플래시플랫폼 기반의 네이버 포토앨범

NHN의 인터넷 검색 포털인 네이버는 최근 개인 웹 사진 관리 공간인 포토앨범 서비스를 오픈했다. 사진을 올리면 촬영 날짜 별로 자동 분류돼 저장되는 서비스로, 다량의 대용량 이미지 파일을 빠르게 저장, 보기, 관리가 가능해야 한다는 것에 중점을 두고 개발됐다. 이를 위해 네이버는 어도비시스템즈의 Flex Builder 3와 Flash CS4 Professional, AIR(Adobe Integrated Runtime)를 도입, 적용했다.

NHN의 인터넷 검색 포털인 네이버는 최근 대표 서비스인 검색 외에 증권, 부동산 등의 전문 정보와 가계부, 캘린더, N드라이브, 포토앨범 등의 개인 중심적인 서비스를 최근 신규로 런칭하면서 강화하고 있다. 개인화 서비스는 누군가에게 나의 정보를 보여주기 위한 공간아 아닌, 말 그대로 개인이 필요에 의해 이용하는 서비스 공간이다. 네이버 개인화 서비스 기획팀은 이 서비스의 취지에 대해 “나에게는 기록이 되고 타인에게는 정보가 되는 컨텐츠를 커뮤니티에서 ‘좋은 컨텐츠’라고 말한다면, 오직 본인에게만 ‘좋은 컨텐츠’를 어디서나 접근하고 보관할 수 있도록 지원해보자는 것이 기획 의도이고, 그동안 이용자들을 통해 많은 것을 이뤄온 만큼 이용자들에 대한 환원 측면이기도 하다”고 설명한다.   이러한 취지에 맞춰 최근 네이버는 개인별 웹 공간인 N드라이브, 가계부, 캘린더, 포토앨범 등을 연이어 새롭게 선보였다. 특히 2009년 8월에 오픈된 포토앨범은 개인별 웹 사진 관리 공간으로, 사진을 올리면 촬영날짜 별로 자동 분류돼 저장되며, 각 사진 별로 태그를 입력해 동일한 태그를 가진 사진끼리 모아보는 태그 앨범을 만들 수 있는 것이 특징이다. 포토앨범 서비스 개발을 위해 네이버는 어도비시스템즈의 Flex Builder 3와 Flash CS4 Professional, AIR(Adobe Integrated Runtime)를 도입, 적용했다.

네이버 기획팀과 RIA 기술랩이 포토앨범 서비스 기획시 가장 중요하게 검토한 것은 대량의 사진 파일들이 ‘가볍고 빠르게’ 정리되도록 하는 것이었다. 마치 윈도우 탐색기에서 사진을 관리하듯이 원본 그대로 저장하고, 저장된 사진들은 날짜별, 태그별로 빠르게 목록화되고, 포토뷰어를 통해 멋지게 감상할 수 있는 기능을 구현하는 것이 포토앨범 기획의 핵심이었다. 이러한 기획에 맞춰, 기술 측면에서도 다량의 대용량 사진 파일을 빠르게 처리할 수 있는 속도 구현에 중점을 뒀으며, 효과적인 협업을 통한 개발 기간을 단축하는 것도 중요한 고려 요소가 됐다.  네이버 RIA 기술랩은 어도비시스템즈의 Flash Platform 중 핵심 구성 요소인 Flex Builder 3, Flash CS 4 Professional, AIR를 두루 활용하여 시너지를 얻었다. 우선 Flex Builder 3를 활용해, 컴포넌트를 재사용하고 30~40명의 개발자들이 각자의 역할에만 충실할 수 있도록 효과적으로 분업을 할 수 있었다. 네이버 RIA 기술랩의 정호연 선임 UI 개발자는 “Flex가 이클립스 기반이라 SVN, Mylyn 등 다양한 플러그인을 활용할 수 있었고, 제공되는 Flex 컴포넌트를 개발하는 웹 서비스에 맞게 확장하거나, 최적화하는 것이 용이해 개발 생산성 향상 효과를 봤다”고 설명했다. 특히 네이버 RIA 기술랩은 버전 관리를 위해 빌드 배포 시스템을 새롭게 구축했다. 여러 명이 협업을 하다 보면, 개인의 컴퓨터에서 컴파일해 완성된 파일을 메일이나 메신저로 구성원들에게 배포하는 경우가 있는데, 이 경우 버전 관리가 되지 않는 어려움이 있었다. 네이버 RIA 기술랩의 오창훈 UI 개발자는 “빌드 배포 시스템은 Flex SDK를 서버에 두고 자동으로 컴파일해 배포하도록 하는 시스템으로 다수의 구성원이 참석하는 엔터프라이즈 개발에 필수적이다 Flex 3 SDK는 Java처럼 사용이 가능하기 때문에 간편하게 빌드 배포시스템을 구축할 수 있었다”고 설명했다.

포토앨범의 핵심이라 할 수 있는 뷰어 기능을 구현하는 데는 Flash CS4 Professional이 좋은 도구가 됐다. 뷰어는 다량의 대용량 이미지를 작은 크기의 썸네일 목록은 물론, 슬라이드 방식으로도 보여주는 역할을 하기 때문에 디자인 표현이 자유롭고 이미지 처리가 빨라야 하는 특성이 있다. 초기에 네이버 RIA 기술랩은 포토앨범 뷰어 기술로 AJAX와 Flash 기술 중 어떤 것이 적합할지를 두고 고민했다. 그러나 이미지 컨텐츠 특성에 적합한 이미지 로딩 처리 능력, 컴포넌트 기반의 다양한 디자인 적용, 빠른 개발, 성능 등의 면에서 Flash 기술이 보다 효과적이라고 판단 했다. 또한 뷰어 기능은 향후 매우 다양하게 확장, 개선될 수 있는 만큼, Flash 기술의 디자인 변경과 표현이 자유롭다는 점도 중요한 선택 요인이 됐다.  개발 과정에서는 대량의 대용량 이미지를 처리하는 서비스인 만큼 메모리 관리와 속도 향상에 중점을 뒀다. 효과적인 메모리 관리를 위해 GC(Garbage Collection)이 되는 시기에 적절하게 데이터를 반환할 수 있도록 내부 프레임워크를 구축했고, 페이지 로딩에 대한 규칙을 정했다. 서버와의 통신을 최소화해 누수되는 메모리를 최소로 줄이는 것이 그 규칙의 기반이었는데, 이를 위해 리스트, 태그, 페이지, 날짜 등의 로딩 정보를 모두 분리해서 저장함으로써 데이터 호출 쵯수를 줄이는 방법을 택한 것이다. 또 일반적으로 Flash 내부의 로더(Loader) 객체를 이용해 이미지를 많이 표현하는데, 이것의 용량이 커서 속도가 느려지는 문제가 발생하곤 한다. 이를 개선하기 위해 로더에서 이미지 데이터만을 추출해 호출하도록 했고, 로더 객체도 요청시 계속 생성하는 방식이 아니라 가능한 한 생성된 객체를 재사용하도록 구현했다. 초기 페이지 로딩시 화면에 보이는 부분과 보이지 않는 부분을 분류해, 화면에서 보이지 않는 부분은 페이지 위치만 잡아두고, 필요한 시점에 객체를 불러오는 방법 등도 속도 향상을 위해 취한 방법 중 하나다. 네이버 RIA 기술랩의 백승철 UI 개발자는 “Flash에 대해 잘못 알려진 오해 중 하나가 느리다는 것인데, Flash는 연산 속도가 느리고 메모리를 많이 사용한다는 것인데 이는 Flash의 특성을 제대로 알지 못하고 개발을 하기 때문이다. Flash의 특성을 잘 살려서 데이터 구조, 프레임워크 및 통신 로직 등을 설계한다면 Flash 만큼 유연하고 훌륭한 웹 애플리케이션 구현 플랫폼은 없을 것이다”라고 설명한다.

네이버는 포토앨범 런칭 후 추가적으로 대용량 업로더 기능을 선보였다. 대용량 업로더 기능은 데스크톱의 탐색기에 있는 사진 폴더를 통째로 포토앨범 서비스에 업로드 할 수 있는 기능이다. 이 기능을 구현하기 위해 네이버 RIA 기술랩은 AIR를 적용했다. 네이버 RIA 기술랩의 김철 UI 개발자는 “기본 업로더 기능이 Flash 기반에서 이미 개발되어 있었기 때문에 이를 재활용할 수 있다는 점과 다양한 브라우저와 운영체제 환경에 적용이 가능하다는 점이 AIR 도입의 검토 요건이었다,”고 설명한다. 실제 네이버의 대용량 업로더 기능은 파이어폭스, 사파리 등 다양한 브라우저와 맥, 리눅스 등 다양한 운영체제 환경에서 활용이 가능하다. 네이버는 폴더를 통째로 드래그 하더라도 몇 개 파일이 어떤 폴더에 각각 들어있는지 즉각 인식할 수 있는 인덱싱 기능을 추가했으며, 한번에 여러 파일이나 폴더를 다운로드 할 수 있는 기능도 곧 추가할 예정이다. 네이버는 향후 포토앨범 서비스를 지속적으로 개선할 계획을 갖고 있다. 실제 앨범처럼 사진에 짧은 메모를 넣거나 좀더 예쁘게 편집해서 보관하는 기능을 추가해 보다 ‘앨범’다운 모습을 갖추도록 할 예정이며 보관중인 이미지들의 활용을 높이기 위해 네이버의 다른 서비스들과 다양하게 연동하는 것을 고려하고 있다.