|
|
| Web Professional > Case Study 01 - Flash |
|
|
| Flsh 8 ExternalInterface와 FileReference 클래스를 활용한 네이버 모자이크 사이트 |
|
|
| |
“ Flash 8에 새롭게 등장한 ExternalInterface 클래스는 플래시와 웹 브라우저 사이의 데이터통신을
담당하며, FileReference 클래스는 로컬 컴퓨터의 파일을 참조하는 기능을 제공한다.
이번 Case Study에서는 네이버 모자이크 사이트에서 구현한 이미지 파일 업로드 모듈에 대해 살펴볼
것이다. ” |
| |
|
글. 김정민 NHN UX디자인센터
UII팀 플래시개발자 |
|
| |
네이버 모자이크 |
| |
네이버 모자이크(http://nemo.naver.com)는 ‘네모’라는 애칭으로 부르는 주제별 이미지 모음 서비스
이다. 요즘 유행하는 트렌드를 한번에 모아보는 재미를 추구하고자 제작한 서비스로서 기존의 게시판
형 텍스트 위주의 커뮤니케이션에서 벗어나 이미지를 매개체로 하는 시각적 커뮤니케이션을 추구한다.
네모는 스토리가 담긴 이미지를 모으기 위한 관계형, 이미지를 색다른 느낌으로 배치하기 위한
나열형, 가지런히 정돈된 느낌으로 모으기 위한 정렬형의 3가지 이미지 배치 형식을 갖고 있다.
네모의 서비스의 핵심은 유저들이 자발적으로 참여하여 이미지를 모음을 생산하고 공유할 수 있다는
점이다. 따라서 서비스를 제작하는데 있어서 가장 고려했던 사항은 대다수의 유저들이 이미지를
업로드 하는데 손쉬운 인터페이스를 제공하고 어떤 플랫폼에서도 불편함이 없이 서비스를 사용할
수 있도록 만드는 것이었다.
| 사용자에게 손쉬운 인터페이스를 제공하는 것이 주요 고려사항 |
|
| |
ExternalInterface 클래스 |
| |
플래시와 웹 브라우저 사이의 통신은 자바스크립트를 통해서 실행된다. 파일첨부에 대한 자세한 통신
구조는 플래시 무비 내부에서 액션스크립트를 통해 자바스크립트를 호출하고 자바스크립트는 브라
우저와 통신하여 파일 탐색창을 띄우게 된다.
플래시 8 이전 버전에서의 플래시와 자바스크립트간의 통신방법은 액션스크립트에서getURL()과
fscommand() 함수를 호출하여 자바스크립트를 실행하고 자바스크립트에서는 setVariable() 함수로
플래시를 참조하는 방식이었다. 이와 같은 방식은 다양한 브라우저를 지원하기 위해 자바스크립트의
호환성을 맞춰야 하는 번거로움이 있고, 파라미터 전달에 있어서 자바스크립트의 split() 함수를 이용
하여 문자열 처리를 사용해야 하므로 통신에 있어서 처리가 복잡한 면이 존재한다.
그리고 자바스크립트에서 플래시를 호출할 때에는 액션스크립트에서 처리하는 방법과 아무런
연관성이 없기 때문에 서로 다른 방식에 대한 완전한 이해가 필수였다.
플래시 8에서 새롭게 추가된 ExternalInterface는 이와 같은 번거로움을 한번에 해소시켜준다.
이것은 예전에 여러 단계를 거쳐서 실행되던 구조를 보다 짧게 축소시켜주고, 자바스크립트 함수를
ExternalInterface에 등록시켜 사용하므로 보다 의미상 이해하기 쉽고, 사용상 밀접한 관련이 있는
내용으로 변하게 된다.
ExternalInterface는 flash.external 패키지에 들어있다. 이 클래스는 인스턴스를 생성하지 않고 static
메소드인 call()을 실행하여 자바스크립트를 직접 호출한다. 예를 들어 HTML상에 자바스크립트 함수
로 HelloWorld(msg)가 있다면 ExternalInterface.call(“HelloWorld”, “안녕하세요”)와 같이 실행할 수
있다. 그리고 자바스크립트에서 반환값(return value)이 존재하면 call() 메소드의 실행결과로 전달
되므로 var returnValue = ExternalInterface.call(…)과 같이 전달받아 사용할 수 있다. 이처럼 사용법
이 매우 간단하며, 기존의 제작과정에서 플래시 오브젝트명을 살펴보면서 자바스크립트와 연결했던
복잡한 과정을 거치지 않아도 된다.
|
| |
FileReference 클래스 |
| |
플래시에서 파일 첨부를 가능하게 만드는 것은 오랜 기간 동안 플래시 제작자들이 간절히 바라던
숙원 사업이었다. 플래시 8에서 그것이 가능하게 됐을 때, 대다수의 유저들이 먼저 테스트 해본 것이
바로 FileReference 클래스였다.
FileReference 클래스가 있기전까지 파일 첨부는 소위 ‘꽁수’라 불리는 비정규 방식을 사용했다.
그것은 플래시 무비가 존재하는 페이지 이외에 iframe 또는 frameset 태그를 사용하여 숨겨진 프레임
을 두고 자바스크립트를 이용하여 파일 첨부기능을 동작시키고 전송하는 구조를 사용해야만 했다.
이것은 구현하기에 상당히 복잡한 기능이었고, 비표준화된 코딩 방식이었으며, 일관된 UI를 구현
하기에 매우 어려운 작업이었다. 따라서 플래시 8에서 FileReference의 등장은 10년 묵은 체증을
한번에 씻어주는 묘약과 같은 존재였다.
FileReference 클래스는 flash.net 패키지에 들어있으며, FileReferenceList 클래스와 함께 사용한다.
기본 사용법은 이들 두 클래스를 import한 다음 새로운 FileReferenceList의 인스턴스를 만들고
이벤트 오브젝트를 등록하면 된다.
var fileList:FileReferenceList = new FileReferenceList();
var eventObj:Object = new Object();
fileList.addListener(eventObj);
업로더를 제작하는데 있어서 도움을 주는 이벤트는 onSelect, onOpen 등이 있으며, 이들 이벤트
들이 발생하는 상황에 따라서 파일 업로드 과정을 제어할 수 있다.
| ㆍonSelect : |
파일 탐색 대화 상자에서 업로드 또는 다운로드 할 파일을 선택할 때 호출된다.
파일 선택 후 선택한 파일의 파일명을 화면에 보여주고, 최초 업로드 하는
파일을
업로드 한다. |
|
|
| ㆍonOpen : |
업로드 또는 다운로드 작업 시작 시 호출된다. 작업 시작 시 프리 업로딩바를
보여준다 |
|
|
| ㆍonProgress : |
파일 업로드 또는 다운로드 작업 중 정기적으로 호출된다. 업로드할 파일의
현재 업로드 된 용량과 전체 업로드의 용량을 계속 해서 전달 받을 수 있다.
따라서 프리 업로딩바의 상태를 보여 줄 수 있다. |
|
|
| ㆍonComplete : |
업로드 또는 다운로드 작업 완료 시 호출된다. 하나의 파일이 업로드가 다 되면
또 다른 파일을 업로드 하고, 최종적으로 파일을 업로드 한 수와 선택되었던
파일의 수가 같게 되면 더 이상 파일을 업로드 하지 않는다. 또한 마지막 파일이
업로드 된 후 프리 업로딩바를 화면에서 사라지게 한다. |
파일 업로드 모듈을 만드는데 있어서 FileReference 클래스 역할에 아쉬운 점은 이미지의 프리뷰
기능을 로컬 컴퓨터에서 가능하도록 만들 수 없으며, 또한 탐색기에서 직접 드래그&드랍을 지원하는
기능이 있다면 아주 완벽할 것이다. 아마도 기대를 충족시키면 또 다른 기대를 가지게 되는 것은 어쩔
수 없는 사람 심리일 것이다.
|
| |
유저의 과업 흐름 |
| |
사용자가 네모에서 이미지 모자이크를 제작하는 과정은 다음과 같다.
1.‘네모판 만들기’를 선택하여 원하는 종류의 네모를 선택한다.
2.‘네모칸 채우기’ 과정에서 이미지를 순차적으로 올린다.
이렇게 만든 네모판을 공유해 다른 이용자가 참여할 수 있도록 제작하게 된다. 사용자는 공개된 네모
페이지에서 ‘참여하기’ 버튼을 누르거나 네모판 안의 ‘채우기’ 버튼을 눌러 이미지를 추가로 등록하여
네모판을 완성한다. 그리고 사용자가 만든 네모판은 ‘마이네모’에서 모두 볼 수 있으며, 네모 서비스
에서 네모판 만들기, 참여하기 등에 따라 활동점수가 올라가며, 활동점수를 통해 사용자의 네모 레벨
이 총 7단계까지 상승한다.
|
| |
네모 이미지 업로더 |
| |
네모에서 이미지를 올리는 과정은 다음과 같이 플래시에서 처리한다.
1. 네모칸 채우기 과정에서 이미지 찾아보기 버튼을 누른다.
2. 자바스크립트가 호출되고 ExternalInterface 클래스를 통해 플래시에 전달된다.
3. FileReference 클래스를 이용하여 파일 선택과정이 진행된다.
4. 사용자가 파일을 선택한다.
5. 플래시에서 업로드를 실행한다.
6. 업로드가 끝나면 썸네일 선택과정을 진행한다.
7. 썸네일을 결정한 다음 업로드 과정을 완료한다.
FileReference 클래스를 사용하여 이미지 업로더를 제작하면 로컬상에 존재하는 파일명과 확장자에
대한 정보는 알 수 있지만 이미지 미리보기 기능을 구현하는 것은 불가능하다. 따라서 네모에서
이미지 업로드 과업을 진행할 때, 이미지를 선택하는 즉시 서버로 전송하고 썸네일 선택과정을 진행
하도록 제작했다. 로컬 상에 존재하는 이미지를 플래시에서 미리보기 상태로 구현할 수 업는 이유는
플래시의 보안 정책상 지원하지 않는 기능이기 때문이다.
| 썸네일 선택과정에서 이미지는 서버에 전송된 상태이다. |
|
| |
마치며 |
| |
지금까지 네이버 모자이크 서비스에서의 사용한 플래시 8의 기능 중 ExternalInterface와
FileReference 클래스에 대해서 간략히 소개하였다. 실제로 두 가지 기능은 상당히 유용하며,
예전과 달리 제작방법도 매우 간단하다. 따라서 소스코드를 중심으로 설명 하는 것을 배제하였다.
네모 서비스 자체는 상당히 다양한 기능을 갖추고 있지만, 이 두 가지 기술 자체는 매우 직관적으로
사용할 수 있을 정도로 이해하기 쉽기 때문이다. 앞에서 두 클래스를 설명할 때 참고로 표시한
Adobe.com의 Devnet 기사에 보다 자세한 정보가 있으므로 참고하기 바란다.
한가지 슬픈 소식이 있는데, 애초에 ExternalInterface로 구현했던 코드를 현재 서비스 하지
않고 있다.
서비스를 오픈하던 시기에 플래시 9 플레이어에 대한 정식 배포가 시작됐는데, 플레이어
버전 9를
사용하는 사용자들은 인터넷 익스플로러 상에서 메모리 부족 현상을 나타내는 경우가
발생했기
때문이다. 이것은 플래시 플레이어의 문제라기 보다 익스플로러에서 Eolas 패치와 관련된
변경사항
때문에 원천적으로 해결하지 못한 버그 이슈 중 하나라고 알려져 있다.
|
|
