jasu's blog

네이트 검색위젯이 12월 21일 사용자와 만나게 되었다. 개인적으로 짧은 프로젝트 일정이었고, 어느 때보다도 숨가빴던 시간이었기에 나에게 많은 고민을 안겨주었던 프로젝트였다.

네이트 검색위젯은 개별적인 위젯을 하나로 조립하여 사용할 수 있는 구조로 설계되었다. 사실 그렇게 하기 위해서가 아니라 그렇게 할 수밖에 없었던 이유가 더욱 컸을지 모른다. 색상 타입별로 70개의 위젯을 만들어야 하고, 모듈별로는 111개의 swf파일이 만들어져야 하는 상황이었기 때문이다. 그래서 나는 일주일에 15개씩 위젯을 양산(!?)했다.

위젯은 모션으로 시선을 빼앗을 필요가 없는 컨텐츠이다. 반면 디자인적으로는 다양한 블로그 레이아웃에 맞아야 한다. 그래서 플래시의 모션은 최대한 단순한 형태로 구현되었고, 디자인은 다양한 색상에 어울리기 위해서 5가지로 정리가 되었다. 디자인팀에서 5가지 색상 타입별로 이름을 정리하는 것도 쉬운 일이 아니었을 것이다. ^^

검색위젯 프로젝트에 참여했던 모든 작업자 분들에게 박수를 보낸다. 그리고 앞으로도 지속적으로 차별화되는 서비스로 발전해 나가길 기대해 본다.

검색위젯 섹션 페이지
http://slab.nate.com/widget/index.html

미니홈피에 새로운 스킨이 오늘 출시 되었다. 바로 “뮤직스킨”이다. 올해 3월부터 R&D로 진행하던 작업이 실제로 서비스화 되었다. 뮤직스킨은 미니홈피에서 배경음악이 있을 경우, 배경음악의 비트에 맞춰서 비주얼이 움직이는 스킨이다. 기존의 gif 스킨과는 달리 자신이 사용하는 배경음악의 음의 흐름(높낮이)에 따라서 스킨이 표현되기 때문에 배경음악을 듣는 재미가 쏠쏠하다.

뮤직스킨은 스킨 영역에 플래시를 도입했다. 그렇기 때문에 제작자에 따라서 다양한 비주얼을 표현할 수 있는데, 그 제작 방법도 아주 간단하게 설계되었다. (물론 본인은 간단하게 설계를 했다고 하지만 이 말을 믿는 분은 그리 많지 않다. 그러나 진짜다;)

오늘 출시된 따끈따끈한 서비스이기 때문에 상품이 많이 등록되어 있지는 않지만 앞으로 계속적으로 다양하고 ,재미있고, 멋진 뮤직스킨들이 나올 것이다. 그 동안 미니홈피 관리에 소홀히 하신 분들이 있다면 아래 경로에 방문 하셔서 미리보기 해보시고 마음에 드는 뮤직스킨을 본인이 선호하는 음악과 설정해 보면 눈과 귀가 즐거울 것이다.

http://www.cyworld.com/mall/mall5_index.asp

그 동안 뮤직스킨을 위해 고생하신 많은 관계자분들에게 박수를 보낸다. 혼자 할 수 없는 일이 도움을 주신 많은 분들 덕에 결실을 맺었기 때문에 더욱 기분이 좋은지도 모르겠다. 앞으로도 지속적으로 사용자들이 원하고, 사용자들이 즐거워지는 서비스로 항해를 계속 할 것이라 나는 믿어 의심치 않는다.

네이트가 싸이월드와 통합하면서 많은 변화가 있었다. 회사의 모든 구성원들이 오늘을 준비하기 위해 많은 노력을 한 만큼, 사용자들에게 좋은 영향을 주었으면 좋겠다.

통합을 하면서 여러가지 많은 변화가 있었다. 그 중 하나는 바로 시맨틱(Semantic) 검색이다. 시맨틱은 주어진 단어와 문장의 의미를 파악하고 이를 해석하여 사용자가 찾고자 하는 결과를 추론하는 차세대 검색기술을 말한다. 사람이 이해하는 만큼, 문장의 의미를 시스템이 정확히 파악하기 위해서는 앞으로도 많은 연구와 개발이 필요하겠지만 네이트가 상용화에 첫 발을 내딛게 된 것에 본인은 큰 의미를 두고 싶다.

무엇보다 검색면에 플래시 UI를 도입하게 된 것은 개인적으로 참 의미가 있는 작업이었다. 뒤늦게 프로젝트에 참여하여 팀웍에 적응하는 시간조차 갖지 못하고 빠르게 진행하다 보니 나름대로 고충도 많았던 것 같다. 나의 부족함은 프로젝트에 참여했던 모든 분들이 너그럽게 이해해 주시리라 믿는다.

시맨틱 검색은 크게 검색어 -> 주제분류 -> 추천즉답 이라는 연결 고리를 갖고 있다. 검색 타이틀에 대한 주제분류를 하고 그 분류에 대한 추천즉답을 제시하게 되는데, 주제분류에 따라서는 몰랐던 내용도 알 수 있고, 때로는 재미있는 검색 결과도 볼 수 있다.

예를 들어 “아버지가방에들어가신다” 로 시맨틱 검색을 했을 경우 주제분류인 「예상전망」은 “결국은 아버지 가방에 들어가셨다로 그칠 전망이다.” 라는 결과를 볼 수 있다. 재미있는 결과다.

사실 텍스트 위주의 검색서비스에서 플래시를 UI로 채택한다는 것이 나에게 부담이기도 했지만 좋은 기회일 수 있다는 판단이 더 크게 작용했던 것 같다. 업계의 생리로 본다면 이번 작업은 거의 실시간으로 진행되었다. 이 과정에서 디자이너분이 고생을 많이 하셨는데 그걸 알면서도 시간적 여유가 없다는 이유로 본인이 충분히 배려하지 못한 부분에 대해서는 미안한 마음이다. 이해 하실 거라 믿는다.

정보 표현의 효율성을 생각하며 고민했던 샘플


어떤 일이든 고생한 만큼 의미가 크게 다가오는 것 같다. 이번 프로젝트에 참여하신 모든 분들에게 박수를 보내고 싶다. 본인은 내일부터 또 다른 프로젝트에 매진해야 할 것 같다. 매번 중요하지 않은 프로젝트가 없는 것을 보면 나에게는 큰 행운이다. ^^

오랜만에 재미있는 작업을 마무리 하고 오늘 오픈 하게 되었다. 만드는 서비스에 애정을 갖고 접근한 기획자, 개발자, 디저이너분들 덕에 즐겁게 작업할 수 있었다.

이번에 개편한 미니홈피 갤러리는 기존의 이미지 저장 형태를 벗어나 그리는 과정을 재생하는 기능을 제공하며 일반 동영상 플레이어처럼 외부 블로그로 퍼가기가 가능한 것이 특징이다.

개발 과정에서 FlashPlayer10버전이 배포되어 개발 버전에 고민을 했었는데 결국 두 버전을 혼용하는 것으로 개발을 진행하였다. 일부 기능(PC 저장하기)은 FlashPlayer10버전에서만 지원하며 나머지는 FlashPlayer9 버전에서도 정상적으로 사용 가능하도록 개발 하였다.

현재 일반, 칠판 그래피티와 같은 브러시 타입을 지원하며 기존의 갤러리툴에서 사용했던 도형도 일부 적용 하였다. 이번 작업은 테스트 주도적 프로세스로 진행했기 때문에 개발 중간에 발생할 수 있는 시행착오를 줄일 수 있었다. 개발자의 의도와 방향성을 충분히 배려하고 존중해준 기획자 분들에게 감사를 전한다.

http://www.cyworld.com/main2/notice/view.asp?seq=2123

예전 방문자 카운터 기능을 추가하면서 생각한 것이 있었다. div로 iframe을 잡고 상위 레이어를 올리면 올플래시 형태의 페이지를 만들 수 있을 거라는 생각에서 시도해 보았다.

이 구조를 넣으면서 여러가지 문제점이 생겼는데 문제점들은 아래와 같다.

1. 자바스크립트에서 플래시로 값을 넘겨주기 위해서는 플래시에서 ExternalInterface 클래스를 사용하게 된다. 이 클래스를 이용하면 html에 삽입된 javascript와 플래시간 상호 지정한 function을 호출할 수 있으며 return값도 전달 할 수 있다.
하지만 배경 화면에 해당하는 플래시에서 티스토리 스킨에 제공하고 있는 skin.html안에 삽입된 자바스크립트를 호출하는 것은 가능하나 그 자바스크립트에서 플래시로 값을 넘겨주지 못하는 문제점이 있다. 아마도 크로스 도메인 문제인 듯 싶다.

하루정도 고민 하다가 결국은 우회하기로 결정했다. 일단 하단에 있는 메뉴플래시에서 infinite 버튼을 클릭할 시에 상위에 있는 레이어를 display = block을 적용하고 플래시의 LocalConnection을 이용하여 레이어 안에 있는 플래시와 통신을 하는 방법이다.
여기도 또다시 문제점이 발생했는데 하위 플래시에서 레이어를 살리는 동시에 상위 플래시와 통신을 할 경우에는 기존에 있던 플래시가 포함된 레이어가 작동을 정지하면서 제대로 호출해주지 않는 문제가 발생했다. Display를 대신해 visibility을 이용해 보았지만 마찮가지였다.

상위 레이어가 살아났을 때 플래시에 레이어가 나타났다는 메시지를 전달함으로써 infinite의 초기 시작 모션을 적용해야 하는데 그 문제가 해결되지 않아서 발생하는 문제점이다.

익스플로러와 파이어폭스 두 브라우저에서 테스트해본 결과 두 브라우저 간의 약간의 차이가 발생했다.

그래서 LocalConnection으로 플래시간 통신을 하되 약간은 딜레이 타임을 적용하기로 하고 레이어를 살리고 초기 시작 모션들 들어가기 전에 0.5초간 로딩바를 보여주는 형태로 LocalConnection의 문제점을 해결했다. 사실 해결이라기보다는 궁여지책이다.

2. 두번째 문제는 익스플로러와 파이어폭스의 호환 문제다. document.all는 IE에서만 먹는 코딩 방식이라는 것을 알게 되었다.
보 통 IE에서 div의 style이나 레이어에 접근하기 위한 접근자 방식을 document.all.ID.style.display이런 형태로 썼는데, 이러한 코딩방식은 파이어폭스나 타 브라우저에서는 먹히지 않는 방식이다. MSDOM에서만 사용하는 것이며 W3C에서도 권하지 않는 방법이라고 한다. 우리나라의 경우는 90% 가량이 IE를 사용하고 있는 상황이기 때문에 IE를 사용하고 있다면 별 문제가 되지 않겠지만 타 브라우저를 사용하는 사용자에게는 치명적인 문제를 발생시킨다. 공든 탑이 이러한 표준 문제에서 무너질 수 있다.

W3C에서 권장하는 표준형은 document.getElementById("ID").style.display 이러한 형태로 접근하는 것이다.

3. 세번째 문제는 티스토리에 로그인한 상태에서 블로그에 접근했을 때는 오른쪽 상단에 티스토리 툴바가 보이게 된다.  테스트 과정에서 레이어의 index값을 아무리 올려도 상위에 있는 레이어보다 티스토리 툴바가 상위에 떠있는 것이다. 그래서 블로그 소스를 뒤져보니 상위에 뜨는 툴바의 index값이 무려 1000000라는 사실… 그래서 상위에 뜨는 레이어의 index 값을 1000001로 잡아서 해결했다.

4. 네번째는 문제라기 보다는 레이어를 올리는 과정에서 생겨난 부가적인 노동이다. 블로그에서 음악이 흘러나오도록 play를 시켜놓은 상태에서 infinite 페이지로 들어갔을 때는 끄고, play되고 있던 사용자라면 다시 나올 때 play를 시켜주는 것이다. 그리고 음악을 듣지 않고 있던 사용자라면 그대로 음악이 흘러나오지 않는 기능을 추가해야 했다. 그리고 블로그의 배경에서 랜덤으로 생겨나는 나비의 움직임이 infinite 페이지를 접근했을 때에 불필요하게 CPU의 낭비를 가져오고 있어서 infinite메뉴로 들어갔을 때는 나비들이 생성하지 않도록 interval을 clear시켜주고 다시 블로그로 나갔을 때는 생성하도록 설정해 놓았다.

Infinite메뉴를 추가하면서 가장 큰 문제는 자바스크립트에서 플래시로 통신하기가 어렵다는 것이 가장 큰 문제였던 것 같다. 일단 지금은 LocalConnection을 이용하여 플래시 간에 주거니 받거니 하고 있으니 나중에 알게 되면 수정해야 겠다.

Infinite 메뉴는 아직 구체적은 내용 구성과 구현 방법에 대해서는 생각해 둔 것은 없다. 일단 블로그에서 새로운 시도를 해본 것이고 캠버스에 어떤 것들을 담아갈지는 앞으로 시간 날 때 고민해 봐야 하겠다.

루이까또즈 브랜드 사이트의 장점
루이까또즈는 사용자 중심으로 설계하려고 노력했다.
 
기본적으로 메뉴 구조라고 한다면 위와 같이 단일 메뉴, 순차적 메뉴, 트리 메뉴, 네트웍 메뉴 등으로 나눌 수 있을 것이다. 각각 특정 메뉴로 접근하는 방식에 차이가 있다. 웹은 기본적으로 이러한 여러 가지 메뉴 구조를 복합적으로 사용하고 있는데 루이까또즈는 이러한 메뉴구조를 좀더 다른 방식으로 접근한 형태이다.

루이까또즈의 경우는 기본적으로 트리 메뉴구조를 가지고 있으며 네트웍 메뉴 구조로 접근이 가능하다. 이를 다른 형태로 표현하면 아래와 같은 형태로, 사용자는 원하는 특정 페이지로 다이렉트 접근이 가능하다.
 
이런 형태는 자칫하면 사용자가 현재의 위치를 파악하지 못하는 문제점이 발생할 수 있는데 루이까또즈는 이러한 문제점을 해결하기 위해서 사용자가 새로운 페이지로 접근을 시도할 때 하나의 규칙을 만들었다.
 
SiteMap을 보면 1뎁스와 2뎁스 모두를 세로 직렬로 배치하여 현재 위치에서 원하는 페이지로 이동할 때 컨텐츠들은 위에서부터 아래로 정렬되어 있다는 것을 사용자가 학습할 수 있도록 모션을 적용하였다.

예를 들면 현재 AD CAMPAIGN에서 HISTORY 메뉴로 이동시 현재 컨텐츠는 위로 올라가고 HISTORY 컨텐츠는 아래에서 위로 올라오게 된다. 반면 HISTORY에서 WEBZINE 페이지로 이동시에는 현재 페이지는 아래로 내려가고 WEBZINE 페이지는 위에서 아래로 내려오게 함으로써 사용자가 현재 위치에서 원하는 위치로 이동할 때, 현재의 위치를 파악할 수 있도록 하였다.

로딩바의 형태도 이러한 규칙의 일환으로 위에서 내려오는 컨텐츠의 로딩바는 아래에서 위로, 아래에서 올라오는 컨텐츠의 로딩바는 위에서 아래로 채워지게 된다.

루이까또즈에서 가장 중요한 컨텐츠인 Collection은 로딩의 순서가 왼쪽에서 오른쪽으로 이루어지며 전체 로딩이 어느 정도 진행되었는지를 사용자가 알 수 있도록 메뉴 아래에 상태를 표시하고, 사용자가 특정 메뉴의 이미지를 먼저 보기위해 접근을 시도하면 해당 이미지를 개별적으로 로딩함으로써 사용성을 높이고자 했다.

루이까또즈 브랜드 사이트의 구조는 아래와 같은 형태로 사용자가 인지할 수 있을 것이다.
 

사이트의 단점
루이까또즈는 사용자 중심의 UI로 접근을 하였기 때문에 페이지 전환시 획일적인 모션 적용으로 인하여 다소 각 컨텐츠의 재미요소가 미흡한 단점이 있다. 이는 각 페이지로 넘어갔을 때 그 페이지에 고유의 모션을 통해서 어느 정도 해소할 수는 있겠으나 그런 과정에서 기존의 컨셉트에 부합되지 않는 문제점도 발생할 것으로 예상된다.

* 정해진 일정으로 빠듯하게 작업을 진행하였으나 클라이언트의 자료수급이 제때 이루어지지 않아 오픈 시일이 연기되었고, 클라이언트의 개인적인 취향에 따른 수정과 일관성 없는 요구사항으로 인하여 전체적인 컨셉트를 훼손하는 결과를 낳았던 것 같다.

항상 이런 부분들은 아쉬움을 남기지만 갑과 을의 관계에서 진행되는 프로젝트이므로 어쩔 수 없는 아쉬움이 아닌가 싶다.

http://www.louisquatorze.co.kr/

작년 말쯤에 오픈란 라이브 플렉스, 화면에 나타난 오브젝트들이 스테이지 사이즈에 따라 유동적으로 좌표를 찾아 가도록 만들었다.

http://www.liveplex.co.kr/

Dcaland.com 사진 갤러리 사이트

이 사이트는 개인적인 취미인 디카 생활을 하면서 모아온 사진을 웹에 올리고자 만들었던 사이트다 이미지를 클릭했을 때 사진이 나타나는 모션을 만들고 그것을 어떻게 활용해 볼 방법이 없을 까 해서 만들게 되었다.

플래시8에서 추가된 FileReference 클래스를 이용하여 이미지 업로드를 지원했으며 모든 구성요소들이 현재 화면의 크기에 따라 유기적으로 위치를 잡고 사이즈를 조정하게 만들었다.

이 사이트 또한 나에게 여러가지 재미를 준 고마운 녀석인데 만들고 나서 언제나 그랬듯이 관리가 안되었던 것 같다. 추가적인 기능과 보완할 것들을 정리하고 수정해야 하는데 회사일이 그렇다보니...

http://www.dcaland.com

2005년 연말쯤에 만들었던 개인 홈페이지

이 사이트는 개인적인 포트폴리오 관리와 사진 갤러리를 통해 취미 활동을 하기 위해 제작하였다. 전체적으로 심플한 디자인과 CPU와 용량에 신경을 썼지만 관리가 제대로 되지 않았다.

항상 개인 홈페이지를 만들때면 잘 가꾸어 나가겠다고 하지만 회사 일들과 개인적인 생활을 하다보면 관리가 제대로 되지 않는다. 그래서 지금은 그냥 사용하기 편하고 유지 관리가 편리한 블로그를 활용할 생각이다.

이 사이트의 마지막 메뉴에는 탱크 게임을 만들어 놨는데 플래시툴을 개발했던 매크로미디어의 마지막으로 진행한(지금은 Adobe가 인수) MAX 2005 Korea에서 강연을 했던 스피커가 만든 게임을 보고 나름대로 비슷하게 만들어 봤었다.

http://dicaland.cafe24.com/nc_project/main.html

2005년 9월 5일 오픈한 아다또 사이트

이 사이트는 웹에이전시에 근무한지 6개월이 지난 시점에서 처음 혼자서 플래시 부분을 담당하여 작업했던 사이트다. 지금 보면 여러가지로 미흡한 부분이 많이 보이지만 3일도 안되는 작업 일정동안 나름대로 노력했던 기억이다. 이 사이트는 월간 ‘w.e.b’ 2005년 10월호에 ‘Site of the Month’로 선정되기도 하여 나에게는 의미있는 사이트가 되었다.


http://www.adattorelax.com/main.html