위젯 개발시 width(너비)문제는 어디에서 출발하는가?
위젯을 개발할 때, 빠질 수 없는 화두가 바로 'width', 바로 '너비'다. 위젯은 하나의 어플리케이션이다. 하지만 일반 어플리케이션이나 웹어플리케이션과 달리 위젯(위젯도 어플리케이션이긴 하다, 특수 어플리케이션)은 외적인 요소가 매우 중요하다. 단지 예쁘거나 혹은 안예쁘거나를 가름짓는 디자인 뿐 아니라, 위젯이 깨지는지, 혹은 '노출해야 할 컨텐츠를 제대로 노출을 못하고 있는지'와 같은 외적인 요소가 다른 어플리케이션 개발때보다 더 중요하다. 그 외적인 요소중에서 가장 신경써야 하는 부분 중 하나가 바로 위젯의 너비 즉, width에 관련한 것이다.


위젯은 블로그에도 달 수 있고, 카페에도 달 수 있고, 일반 웹사이트에도 달 수 있다. 웹상에서라면 어디서든지 달 수 있다. 하나의 위젯이 다양한 웹사이트에 달린다. 그러면 필연적으로 사이즈에 대한 문제가 생기게 된다. 위젯을 퍼가는 사람들의 블로그나 카페, 웹사이트의 사이드바 혹은 컨텐츠영역 등의 크기가 전부 다르기 때문이다. 거기서부터 위젯을 개발하는 사람이 width(너비)문제를 왜 숙지해야 하는지 고민이 출발한다.


위 이미지를 보자. 좁은 사이드바에 고정된 너비의 위젯이 들어가니, 위젯의 컨텐츠가 온전하게 제공되지 못하고 있다. 위의 경우는 위젯의 절반이 감춰져버렸지만, 심지어 위젯의 너비 때문에 웹사이트의 레이아웃이 망가질 수 있다. 고정 너비를 가진 위젯이 포털사이트를 타고 많이 선보이고 있지만 개인적으로 별로 환영할만한 일은 아닌 것 같다. 위젯을 제작하는 디자이너/코더 분들께서는 될 수 있으면 위젯의 너비가 자유롭게 변해도 위젯의 컨텐츠가 일그러지지 않는 위젯을 개발하기를 희망한다.


가변너비(variable width) 위젯, 어떻게 만들어야 되나?
일반적으로 가로 혹은, 가로세로 사이즈가 모두 고정되어 있는 위젯은 이번 기고글의 내용과는 별 해당사항이 없다. 하지만 어떤 곳에 위젯이 붙더라도 자유롭게 위젯 사이즈가 변해서 자연스럽게 어울리는 위젯을 만들고 싶다면 아래에 있는 내용들을 위젯 개발시 고민해 보아야 한다. 위젯 사이즈가 자연스럽게 변한다는 것은, 위젯의 크기가 크든 작든 컨텐츠가 깨지지거나 왜곡되지 않고 온전하게 보여질 수 있다는 것을 의미한다.

일단 가변너비 위젯을 만들때 고민은 크게 플래시로 만드냐, 아니면 XHTML/CSS로 만드느냐에 따라서 방법이 확연히 달라진다.


XHTML+CSS+JAVA SCRIPT로 만드는 위젯의 경우
보통 HTML로 만들어지는 위젯의 경우에는 높이는 고정을 하는편이 좋다. 보통 웹위젯은 iframe으로 배포된다. 헌데, 위젯 컨테이너의 높이가 수시로 변하게 되면 iframe의 높이 또한 자바스크립트를 동원하여 변화시켜야 한다. 이것은 코드낭비다. 그리고 HTML특성상 컨텐츠는 가로로 뻗는(inline, block) 성향이 있기 때문에, XHTML위젯을 만들때는 너비만 신경 써 주면 된다. 위젯 컨테이너가 넓어지든 좁아지든 컨텐츠 또한 유기적으로 늘었다 줄었다 하면 된다.


HTML위젯은 될 수 있으면 세로사이즈는 고정으로, 너비는 유동적으로 만들자

XHTML과 CSS로 제작된 위젯이다. HTML위젯은 될 수 있으면 세로의 크기는 변동되지 않도록 고정하는 것을 권장한다. 그리고 너비는 자유롭게 변할 수 있도록 만든다. 위에서 볼 수 있듯이 너비가 변해도 컨텐츠가 왜곡되거나 위젯의 레이아웃이 전혀 뒤틀리지 않도록 제작하는 것이 관건이다.


HTML위젯의 길이가 긴 컨텐츠는 자바스크립트로 자르지말고 CSS로 자르자
위젯의 너비가 늘었다 줄었다 자유롭게 변할 때, 가장 염두해야 할 부분이 바로 긴 컨텐츠를 어떻게 처리할 것인가의 문제다. 긴 글을 자르는 방식은 크게 두 가지가 있다. CSS로 자르는 것과 스크립트로 자르는 방법이 그것이다. 헌데, 스크립트로 자르는 방법보다 CSS로 자르는 것을 권장한다.

스크립트를 이용해서 자르면 여러가지 불리함이 작용한다.

• 웹표준과 거리가 멀어진다. 실제 컨텐츠가 ...으로 축약되기 때문이다. CSS로 처리하면 긴 글이 자동으로 줄어도 실제 컨텐츠에서는 온전하게 모두 보인다.
  
• CSS 한 줄로 처리하면 될 것을 불필요한 스크립트 함수를 동원할 필요가 없다. 코드 낭비다.
• 미약하나마, 페이지가 로드될 때, CSS로 처리하는 것 보다 스크립트로 자르는 것이 훨씬 무겁다.
  

위의 그림을 보면 물론 자바스크립트로 자르는 것이 자연스럽긴하다. CSS는 글자 한 가운데가 잘릴 수 있다. 스크립트로 자르면 ...으로 자동 축약되기 때문이다. 하지만 실제로 컨텐츠를 이용하는데는 하등 문제가 없다. 위젯을 만들 때, 긴 글은 스크립트로 자르지말고 가급적 CSS로 처리하길 권장한다.

.container { height: 300px; }
   ul { line-height: 18px; }
     ul li { height: 18px; overflow: hidden; }

위에서 설명한 위젯형태를 가장 기본적인 형태로 CSS 코딩 해본 것 이다. 위젯이나 컨텐츠나 일단 width를 지정하지 않았다. 그러면 위젯은 위젯이 담기는 블로그나 웹사이트의 사이드바에 따라서, 컨텐츠는 위젯에 따라서 너비가 신축적으로 변하게 된다. 반면, 위젯의 높이는 고정되어 있다. 이렇게 처리하면 이상적인 형태의 XHTML위젯을 만들 수 있으리라 생각한다.

그리고 li가 표현되는 컨텐츠 리스트 한 줄 이라고 가정하자. 그렇다면 이 컨텐츠의 height 역시 고정하고, overflow: hidden;을 주어 아랫줄 이하로 밀려나는 컨텐츠는 감춰주는 것이 바람직하다. 정밀하게 감추려면 li의 height와 line-height를 잘 조정하는 것이 필요하다.


플래시로 만드는 위젯의 경우 (가로세로 비율의 문제)
플래시 위젯의 경우는 액션스크립트나 로드무비를 특별하게 사용하지 않는 한, 가로세로 비율이 항상 같아야 한다. HTML위젯의 경우에는 높이는 고정시켜두고 너비만 잘 컨트롤 하면 됐다. 하지만 플래시 위젯은 너비와 높이를 함께 컨트롤해야 한다. 어떤 플래시 위젯 하나의 가로 세로 비율이 100:80 이였다고 치자. 그러면 누군가가 이 위젯을 가로 200으로 퍼갈 때, 세로의 사이즈는 당연히 160이 되어야 한다는 것이다(단위는 픽셀).

대표적 플래시 위젯 중 하나인 wezet.co.kr의 등수위젯. 퍼갈 때 기본적으로 가로세로 비율이 맞춰진 상태로 사이즈가 변한다.

일반적으로 크기가 고정된 형태의 위젯이 아닌 플래시 위젯의 경우 가로세로 비율이 같이 변하도록 해야한다. 그래야 위젯 본래의 모습이 훼손되지 않고 온전하게 컨텐츠를 출력할 수 있는 것이다.

만약, 플래시 위젯을 퍼갈때 가로사이즈와 세로사이즈의 비율이 맞지 않으면 아래와 같이 된다.


국내 대표 위젯 서비스인 WEZET과 위자드웍스의 플래시 위젯이다. 임의로 가로와 세로의 비율을 맞추지 않고 위젯을 설치해보았다. 위젯의 빈공간에 여백이 생기고, 위젯이 깨지는 모습을 확인할 수 있다. 그래서 플래시 위젯은 꼭 가로세로 비율을 맞춰서 퍼갈 수 있도록 배려해야 한다.


WEZET(wezet.co.kr) 서비스의 경우 올해 초, 국내에서는 최초로 위와 같은 퍼가기 방식을 지원했다. 동그라미 부분을 조절하면 가로세로 비율이 동일하게 유지되어 위젯을 원하는 크기로 퍼갈 수 있다. 플래시 위젯을 사용하는 유저들을 위한 작은 배려다.


플래시로 만드는 위젯의 경우(비트맵 vs 벡터의 문제)
플래시로 위젯을 만들면서 중요한 문제가 비트맵과 벡터의 문제다. 자유롭게 사이즈를 변경시킬 수 있는 플래시 위젯을 만들 때 중요한 문제다. 안에 들어가는 이미지, 텍스트 등의 요소들은 될 수 있으면 벡터방식으로 제작된 것을 사용하기를 권한다. 비트맵 방식의 오브젝트를 사용하거나 non-antialiasing된 시스템 폰트를 사용하면 어떤 문제가 발생되는지 아래의 그림을 통해서 보자.

위 그림을 보자. 계속 소개되고 있는 등수위젯의 한 장면이다. 가운데가 WeZeT서비스에서 기본적으로 제공하는 크기다. 위와 아래는 임의로 크기를 조절해보았다.

빨간 동그라미 부분이 벡터방식의 문구다. 그리고 파란 동그라미는 앤티앨리어싱이 적용되지 않은 기본 시스템 폰트다. 즉, 비트맵 방식으로 처리된 문구다. 어떤 차이가 있는지 확연히 눈에 들어온다. 벡터방식으로 처리된 부분은 위젯의 사이즈가 아무리 무한정 변해도 깨지거나 왜곡되지 않는다. 반면, 비트맵 방식의 문구는 위젯의 크기가 조금만 작아져도 문구가 깨지고 왜곡되어 알아보기 힘들게된다.

사실, 파란 동그라미 부분은 XML연동으로 데이터가 수시로 바뀌는 부분이다. 그래서 벡터방식으로 처리를 하려면, 폰트 하나를 몽땅 SWF에 임베드시켜야 하는 문제가 있기는 하다. 그렇게 되면 위젯의 용량이 엄청나게 늘어나니까 서비스용 위젯으로는 독약이다. 그렇지만 진보를 꿈꾸는 제작자라면 저렇게 깨지게 보이는 것 보다는 다른 더 좋은 방법을 계속 찾아야 하지 않을까 싶다.

위자드웍스의 효리위젯이다. 비달사순 로고 'VS'와 반짝이만 벡터방식이고 나머지 문구와 사진은 모두 비트맵 방식이다. 가운데가 위젯의 기본사이즈다. 그리고 그 위아래가 위젯을 크기를 늘렸을 때, 그 아래가 위젯을 크기를 줄였을 때 모습이다. 어떤가? 비트맵으로 처리된 이미지는 기본사이즈에서 단 1px만 사이즈가 변해도 그냥 깨지는 문제가 발생한다. '2008 summer'라는 문구를 보면 비트맵의 점 단위까지 보인다. 효리 이미지는 플래시내에 삽입 후, 가장 상위 퀄리티를 적용하지 않아서 점으로 보이지는 않지만 흐릿하게 보인다.

위자드웍스의 '서울 문화꽃' 위젯이다. 위젯 이미지 전체가 벡터방식으로 그려져 있다. 위에서 보이는 것 처럼, 위젯 크기를 줄이든 늘리든, 이미지가 왜곡되거나 깨지지 않고 깨끗하게 처리된다.


이렇게 크기를 완전히 키워도, 깨끗하게 이미지가 처리된다. 이것이 바로 벡터의 매력이고, 플래시 위젯에서 될 수 있으면 벡터 이미지를 써야 하는 이유다.


총 정리

• 될 수 있으면 사이즈가 고정된 형태의 위젯보다는 가로 사이즈가 유동적인 위젯이 좋다.
• HTML위젯의 가로사이즈는 유동적인게 좋으나, 세로사이즈는 변하지 않는 형태가 좋다. 기술적으로 불필요한 코드가 많아져서 웹표준과 거리가 멀어지고, 불필요한 자원이 소모된다.
• HTML위젯의 경우 컨테이너 및 컨테이너 안에 들어가는 요소들은 될 수 있으면 width값을 지정하지 말고 디폴트로 두는편이 좋다. 그러면 위젯의 크기가 변해도 위젯과 컨텐츠가 유동적으로 늘었다 줄었다 할 수 있다.
• HTML위젯의 경우 위젯의 너비에 따라 컨텐츠가 늘었다 줄었다 하는 경우에는 컨텐츠 요소의 height를 고정하고 넘어가는 부분은 감추는 것이 좋다. (overflow: hidden;)
• 위젯의 너비가 컨텐츠의 너비보다 좁을 때, 위 처럼 처리되도록 하고 자바스크립트로 글자를 잘라내는 것을 될 수 있으면 사용하지 않는다. (자바스크립트보다 위 처럼 CSS로 처리 하는 편이 자원효율 등에서 훨씬 유리하다.)
  
• 플래시 위젯은 사이즈가 변할 때, 가로세로의 비율이 동일하게 유지되도록 함이 좋다.
• 플래시 위젯의 로고나 문구는 될 수 있으면 플래시내에서 제작을 하거나 .ai 등의 벡터파일 사용을 권장한다.
• 플래시 위젯에서 텍스트는 앤티엘리어싱이 적용된 벡터 폰트를 사용한다. 방법은 폰트를 임베드 시키는 것인데, 될 수 있으면 최소한의 필요한 문자만 임베드 시켜서 위젯을 최적화 시키는데 주력한다.
  
• 플래시 위젯의 사진을 제외한 아이콘이나 이미지는 플래시내에서 제작을 하거나 .ai등의 벡터파일 사용을 권장한다.
• 플래시 위젯에서 사진을 사용할 경우에는 퀄리티를 100으로 하는 것 보다는 70~80정도로 하면 확대나 축소를 해도 깨지는 정도가 적다. 오히려 이미지 보존을 가장 적정 수준으로 유지할 수 있다.
  

요 며칠 연달아 국내외에서 위젯(가젯) 컨퍼런스 혹은 세미나 같은 행사가 많이 열렸다. 국내에서는 다음과 구글이 위젯 컨퍼런스를 열었고, 미국에서는 위젯 서밋 행사가 열렸다. 우리나라에서 열린 행사는 선약 때문에 참석하지 못했고, 미국에서 열렸던 위젯 서밋은 시간과 금액 등 여러가지 자원 제약으로 다녀오지 못했다. 하지만 검색을 통해서, 그리고 행사에 참석했던 주변 사람들의 말을 주워 들으며 대강의 행사내용은 숙지할 수 있었다.

스터디 해 본 결과 많은 회사들이 위젯에 거는 기대도 달랐다. 그리고 위젯에 대한 비전도 각기 달랐다. 비전이나 기대는 누가 옳다 그르다 할 수 없다고 생각한다.


국내 보다는 확실히 해외쪽의 위젯 시장이 훨씬 빠르게 변화하고 있음을 느낀다. 그리고 그 변화의 방향이 수익에 급급한 국내 제작사나 유통사들 보다 올바른 방향으로 가고 있음을 느낀다.
단기적으로 돈벌이에 급급한 위젯보다는 더욱 큰 패러다임을 담은 위젯을 만들어 볼 생각은 없는지 국내 제작사들에게 물어보고 싶다.


내가 꿈꾸는 웹위젯의 역할 하나.
플랫폼을 넘어서, 언어 장벽을 넘어서, 네티즌을 하나로 묶어줄 수 있는 도구

한 때, 싸이월드 열풍이 불었다. 싸이월드의 '일촌'개념은 싸이월드가 거의 쓸모없어진 지금도 싸이월드를 사용하게끔 만드는 획기적인 발명품이라고 생각한다. 싸이월드를 열심히 이용하던 쏭군 조차도 최근엔 싸이월드의 필요성을 거의 못느낀다. 하지만 '일촌'기능 덕분에, 고향친구나 군대선후배와 안부를 묻는 용도로 쓰게 된다. 특히 해외에 유학을 가 있는 친구들에게 싸이월드는 단비와 같은 역할을 해주고 있다. 그것이 싸이월드 서비스의 마지노선 인 것 같다.

개인에게서 나오는 데이터는 수 없이 많다. 놀면서 찍은 사진도 있고, 취미로 불러 올리는 노래도 있다. 그리고 개인이 가진 전문 지식을 글로 만들 수 있고, 또한 생각을 쓸 수 있다. 이 모든 것들이 개인이 만들어 낼 수 있는 데이터다. 이 데이터 중 '사진'을 체계적으로 담는 역할은 싸이월드가 잘 담당했다고 생각한다. 물론 타이밍도 적절했다. 디지털카메라의 보급율이 올라갈즈음 싸이월드가 그 사진들을 받아내는 플랫폼이 되어주었으니까.

하지만 싸이월드는 사진 이후의 개인 데이터를 받아내는 역할을 잘 했는지는 의문이다. 국내 브로드밴드의 발전과 더불어서 개인의 컨텐츠 생상능력도 비약적으로 발전하였다. 개인이 1년에 만들어 내는 데이터의 양이 GB단위로 늘어난 것도 얼마되지 않는데, 몇년후면 TB단위로 늘어난다고 한다. 그런점에서 싸이월드는 그 변화를 100% 수용하지 못했다.

갈증을 느낀 유저들은 대거 블로그로 넘어왔다. 사실, '넘어왔다'는 표현보다는 데이터를 받아내는 역할로 블로그를 선택했다고 볼 수 있겠다. 지인들과 연락하는 용도마저 남아있지 않았다면, 지금쯤 싸이월드는 문을 닫았을지도 모른다. 감히 그렇게 생각한다.

이미 싸이월드에 최적화된 일반 유저들조차도 많은수가 블로그로 넘어온 것으로 알고 있다. 블로그는 어려워서 도저히 못하겠다고 하던 주변 사람들중에서도, 최근에 블로그를 자유롭게 다루는 사람이 늘었다. 네이버블로그의 유저가 1,000만을 돌파했고, 티스토리는 순식간에 국내 10위안에 드는 서비스로 등극했다.

이렇게 사람들이 블로그를 가지려고 하는 이유는 여러가지가 있겠다. 그 중 가장 큰 것은 역시 자신이 만들어내는 여러가지 데이터를 체계적으로 정리하기 위함일 것이다. 그리고 그 정리된 데이터로 약간은 자신의 브랜드가치를 올릴 수 있으니, 그 부분이 가장 크게 작용하는 것으로 추측된다.

블로그는 데이터를 담아주는 역할을 충실히 하고 있다. 하지만 기존에 싸이월드에서 해주던 사회적인 측면은 많이 부실하다. 심지어 같은 블로그 서비스를 사용하더라도 교류할 수 있는 수단이 없다. 블로그는 둥둥 떠다니는 하나의 섬이다. 이 섬들을 이어줄 수 있는 역할을 위젯이 할 수 있을것이라고 생각한다. 이는 매우 중요한 문제로 오래전부터 나를 고민에 빠지게 만들었던 주제 중 하나다.


지난 3, 4일. 샌프란시스코에서 위젯 서밋 2008이 열렸다. 행사에 다녀왔던 이사님이 많은 이야기를 풀어놓으셨다. 이사님의 설명을 들으니, 나의 이런 고민을 해외의 CEO들이 많이 하고 있는 것 같았다. 그리고 이미 해외에서는 '오픈 소셜'이라는 개념을 통해서 이 문제를 해결하고자 하는 것으로 보였다.


내가 꿈꾸는 웹위젯의 역할 둘.
개개인의 아이덴티티를 가지게 해주는 웹위젯

내가 꿈꾸고 있는 위젯의 기능 중 중요한 역할 중 하나다. 단순히 연결만 해준다고 되는 것이 아니라, 개개인의 아이덴티티를 확실하게 담고 있어야 한다는 것이 내 생각이다. 지금이라도 블로그를 돌아보라. 개인의 아이덴티티를 확실하게 알기 힘든곳이 대부분일 것이다. 어떻게 하면 위젯에 개인의 아이덴티티를 담을 수 있을까? 나의 오랜고민거리 중 하나였다.

블로그에서 아이덴티티를 나타내는 것은 무엇무엇이 있을까? 우선 블로그 이름이 있을 것이다. 그 다음, 블로그 소개글이나 썸네일, 그리고 닉네임 정도가 있을 것이다. 그리고 최근 텍스트큐브 새로운 버전을 써보니 이러한 노력을 하려는 것 같다. 하지만 이것들 만으로는 뭔가 부족하다. 조금더 생각하고 연구하면 누군가 좋은 결과를 낼 수 있을 것이라고 기대한다.

위젯은 이름 그대로 '도구'에 불과하지만, 액세서리만으로 치부하기에는 그 가능성이 너무나 큰 도구라고 생각한다.


당장의 언론플레이와 데이터 부풀리기는 아무런 도움도 되지 않아...
데이터를 부풀리기 좋아하는 사람들이 있다. 그리고 그 부풀려진 데이터를 가지고 언론플레이를 즐기는 사람들이 있다. 주로 부풀려지는 숫자의 데이터는 기가 찰 수준이고, '최고', '최초', '최대'등의 수식을 사용하는 것을 마다하지 않는다. 이런 거짓 수식어에 내 얼굴이 다 화끈거린다. 사실 이런식의 언론플레이와 데이터 부풀리기는 매우 고전적인 방식(?)의 마케팅 수법 중 하나다. 위젯시장이 올바르게 성장하기를 바라는 사람 입장에서 가슴 아프기도 하다. 당장의 언론플레이와 당장의 수익추구는 아무런 도움이 되지 않는다. 웹서비스가 마라톤이라면, 웹위젯 시장을 키우는 것은 그 이상이다. 함께 시장을 키워나가는 사람들이 조금 더 넓은 안목을 가졌으면 좋겠다. 더 큰 패러다임을 가지고 올바르게 열매를 키워 그 과실을 모두가 기쁘게 나누길 바란다.

작년 한 해 동안 사회 각 분야에 2.0열풍을 몰고 올 정도로 뜨거웠던 웹2.0 열기. 그 열기도 이제 국내에서 서서히 시들해지고 있다. 그렇다고 IT에 이슈가 없진 않는 법. 올해는 '위젯'이 서서히 관심을 받기 시작한 한 해라고 봐도 무방할 것 같다. 특히 일반 공기업들까지도 위젯에 대한 관심이 대단히 깊은 한 해 였으니, 아마 내년에는 위젯이 더욱 더 이슈가 되는 한 해가 되지 않을까? 특히, 뉴미디어의 입지 상승과 더불어 위젯은 차세대 마케팅 도구로써 더욱 관심을 받고 있다.

위젯과 배너 무엇이 다른가? (배너 vs 위젯)

1. 확산 불가능 vs 자발적 확산
2. 단순 비주얼 vs 독립된 하나의 애플리케이션
3. 수동 통제 방식 vs 중앙 집중형 통제방식
   
   

위젯에는 어떤 종류가 있는가?
위젯의 종류는 위젯을 어떤 플랫폼에 담느냐에 따라 분류하는 방법이 가장 널리 사용되고 있다. 대표적으로 웹위젯과 데스크탑용 위젯이 많이들 알고 있는 위젯이다. 그리고 오래전부터 휴대전화 등의 기기에서 사용해왔지만 소비자들이 잘 몰랐던, 최근엔 모 통신사가 TV광고를 많이 하면서 일반인들에게 유명해진 모바일용 위젯이 있다. 덧붙이면, 가정기기나 자동차, 거리의 전광판 등 위젯은 플랫폼을 넓혀서 생각해보면 그 활용가치는 무궁무진하다고 생각한다.

이 중 업계가 가장 주목하는 것이 '웹위젯'이다. 다른 플랫폼에서 돌아가는 위젯과는 달리 '웹위젯'은 스스로 번식이 가능하다. 즉, 유저들이 인터넷을 이용하다가 마음에 드는 위젯이 있으면 '퍼가기'할 수 있다는 것이다. 퍼와서 내 블로그나 미니홈피에 달아놓은 위젯은 또 다른 사람들이 보고 퍼간다. 이런 방식으로 위젯은 '자발적 배포'가 가능하다. 바로 이 부분이 매력적인 마케팅 도구로써 웹위젯을 더욱 빛나게 해주는 것이다. '롱테일' 그야 말로 롱테일을 잘 활용해야 하는게 웹위젯의 숙명이 아닌가 생각된다.


일반 배너형 광고와 위젯형 광고의 사용예



첫 번째 사진은 네이버의 '배너광고', 두번째부터 네번째까지 사진은 구글의 애드센스 서비스로 '위젯형 광고'다. 배너 광고는 특정 웹사이트에 접속을 해야만 볼 수 있다. 그리고 불특정 다수를 겨냥하기 때문에 광고의 집중도가 떨어지는 반면, 구글의 위젯형 광고는 구글에서 볼 수 없다. 대신, 전세계의 크고 작은 다양한 웹사이트에서 볼 수 있다. 광고를 전세계 웹사이트와 블로그 운영자들에게 나누어주고 수익을 쉐어하는 방식이다. 자동화 되어있기 때문에 광고는 누구나 가져갈 수 있고, 잘만 운영하면 개인도 높은 수익을 올릴 수 있어서 인기다. 또한 컨텐츠매칭을 하여 컨텐츠와 가장 연관성이 높은 광고를 자동으로 게재한다.


위젯마케팅은 이미 오래전부터 국내에 존재하고 있었다
올들어 기업들이 위젯마케팅에 주목하고 있지만, 사실 국내의 위젯 마케팅은 90년대 말부터 존재해왔다. 대표적인 예가 '애드바'서비스다. 애드바가 수익을 내는 원리는 간단했다. 회원가입을 하고 클라이언트 프로그램을 다운로드 받는다. 인터넷에 연결된 상태에서 내컴퓨터 한쪽에 광고만 계속 켜놓으면 됐다. 켜놓는 시간대로 이용자에게 수익을 배분했다. 당시 모뎀을 쓰던 시절이라서, 유저들은 전화비나 전용선 비용이라도 벌어보자는 생각에 애드바를 많이 했던 기억이 난다. 이른바 '클라이언트 어플리케이션 위젯' 개념으로 이미 90년대 말부터 수익사업이 진행되었던 것이다.

한 때, 이런 방식의 BM이 잠시 성행했던 적이 있었다. 각 개인이 자신의 컴퓨터에 광고프로그램을 설치한다. 그리고 광고를 켜두는 시간에 비례해서 광고비를 받아가던 방식이였다. 엄연히 말하면 이것도 위젯의 개념이라고 볼 수 있다. 하지만 이런 광고 방식은 머지 않아 별로 좋지 않은 방식임을 알게 되었고, 관련 업체들은 수 없이 무너졌다. 이유는 광고프로그램을 사용하는 PC유저가 '돈을 버는 데'만 혈안이 되어 있었지, 광고를 받아들이고 소비하는데는 전혀 관심이 없었기 때문이다.


위젯으로 대박난 회사 '구글'
하지만, 앞서 언급한 광고 방식에 약간만 방향을 바꾸어 대박이 난 회사가 있다. 바로 구글이다. 구글은 검색엔진을 기반으로 한 기업이다. 하지만 구글이 돈 방석에 앉게 된 것은 순전히 위젯 때문이라고 해도 과언이 아니다. 바로 '웹 위젯'으로 대박난 회사다. 현재는 세계 경제의 싸이클이 조정국면이지만, 세계 경제가 호황이고 구글이 잘 나갈때 구글의 시가총액은 무려 한화로 150조원을 육박했던 적이 있다. 이 거대한 회사 매출의 99%는 광고 매출이고, 이 중 절반 정도의 매출이 '애드센스'에서 나온다. 애드센스는 구글이 운영하는 광고 상품의 이름으로, 명확하게 웹위젯의 형태를 띄고 있다. 구글은 '웹위젯'으로 대박난 회사라고 봐도 전혀 무리가 없다.

애드센스는 자사의 웹사이트에 광고를 게재하지 않는 대신, 전세계 모든 사람들에게 광고플랫폼을 개방했다. 누구나 구글의 광고를 가져다 쓰고, 본인 사이트에서 발생한 수입을 현금으로 받는다. 이 획기적인 광고시스템 하나 덕분에 구글 창업자 세르게이브린과 래리페이지는 돈방석에 앉게 된다.

앞으로의 인터넷 광고 대부분 형태는 위젯에 최대한 근접할 것이다

각자만의 위젯플랫폼을 무기로 한 업체들의 진검승부도 볼만하겠다
구글의 성공과 위젯에 대한 광고회사들의 관심으로 앞으로 위젯을 이용한 기업들의 치열한 경쟁이 예상된다. 이 글을 쓰고 있는 2008년 현재 기준으로 당분간 일반 광고회사나 홍보회사에서 위젯플랫폼을 소유하기는 어려워보인다. 직원 교육은 물론이고 약간은 난이도를 요하는 개발작업, 경험많은 디자이너가 필요하기 때문이다. 하지만 일정 시간이 지나면 일반 홍보 회사들이나 에이전시 업체들도 위젯을 무기로 하여 광고시장이 뜨거워 질 것이라고 생각한다. 순전히 시간문제다.

그럼에도 불구하고 마케팅 도구로서 위젯이 가지는 약점

'꿈을 쓰는 사람'이라는 블로그에 접속했다. 이 화면에서 위젯을 찾을 수 없다.

하지만 스크롤을 한참동안 내리니 위자드웍스의 W 위젯 하나가 붙어있음을 확인할 수 있다. 문제는 바로 여기에 있다. 위젯마케팅 업체들은 분명히 고객에게 위젯의 일정 노출수를 개런티하고 계약할 것이다. 하지만 위에서 보듯이 처음 블로그나 웹사이트에 접속해서 스크롤하지 않았을 때, 위젯을 찾을 수 없으면 실제 개런티보다 위젯의 광고로써의 효과는 떨어진다고 봐야지 옳을 것이다.

일단 블로그에 접속한 사람이 컨텐츠를 소비하지 않고 브라우저를 Back 하는 경우는 위젯의 노출 통계는 올라가지만 실제로 위젯이 노출되지 않은 것이나 마찬가지 일 것이다.

블로그를 방문한 유저가, back하지 않고 온전히 글을 읽으며 컨텐츠를 소비한다면, 즉, 스크롤을 진행하여 위젯이 노출된다면 위젯이 광고로서의 효과를 크게 가진다고 할 수 있을까? 위의 화면에서도 볼 수 있지만, 일단 블로그의 포스팅은 '컨텐츠'고, 그 컨텐츠를 소비하기 위해 들어온 방문자는 대부분 '검색'을 통해서 들어왔을 것이다(RSS리더, 블로거뉴스 등 유입 제외시). 해당 컨텐츠를 직접 찾아서 들어온 유저이므로 컨텐츠를 읽는 동안 컨텐츠 자체에 대한 집중도가 높을 것이다. 컨텐츠 중간에 저렇게 위젯이 있어봤자, 위젯으로 시선이 갈 확률 또한 낮아진다고 보는 것이 옳을 것이다.

문제는 위젯을 자신있게 전면에 달고 있는 유저보다, 위의 블로그처럼 블로그의 하단에 다는 경우가 많다는 것이다.

이 문제를 어떻게 해결할 것인지 혹은, 어떻게 다른 방법으로 상쇄를 시킬 것인지 고민해봐야 할 것이다.

마케팅 도구로써 약점을 극복할 수 있는 방법은?
위의 약점을 최대한 극복할 수 있는 방법으로 나는 네 가지 정도의 해법을 생각하고 있다.

1. 내 블로그의 아이덴티티를 확실하게 나타내줄 수 있는 위젯인가?
2. 나에게 수익을 안겨주는 위젯인가?
3. 다른 사람에게 자랑하고 보여주고 싶은 컨텐츠가 들어있는 위젯인가?
4. 아니면 아예 블로그나 웹사이트를 모두 위젯으로 치장하게 만들 수 있는가?

이 4가지 중 하나만 충족해도 많은 블로거들이 위젯을 조금 더 위로 달려고 할 것이다. 일례로, 애드센스의 경우 클릭율이 높으면 블로거 자신도 돈을 벌기 때문에, 애드센스를 블로그의 최상단에 배치하지 않던가? 대부분의 애드센스가 최상단에 걸려있는 점을 생각해보면 내가 제안하는 위의 4가지 항목을 어떻게 활용할 수 있을지 재빨리 이해할 수 있을 것이다.

남겨진 또 다른 약점
위젯 서비스를 하기 위해서는 고도의 서비스 유지 능력이 필요하다. 위젯 서비스 가치평가의 핵심요소 중 하나는 '얼마나 많은 곳에 위젯이 달려있나?' 하는 것이다. 위젯 서비스의 경우 단 한 번의 접속불능이나 서비스 오류로 달려 있는 위젯이 모두 떼어지는 엄청난 피해(?)가 발생할 수 있다. 단 한 번의 서비스 문제로 사업의 운명까지 흔들릴 수 있는 것이다.

일반 웹서비스의 경우 서버 문제 등이 발생할 경우에 '공지사항' 걸어놓고 작업을 하면 되지만, 위젯 서비스의 경우 문제가 발생하면 위젯을 달고 있는 블로그나 웹사이트는 이유없이 접속이 되지 않기 때문에, 유저가 이에 짜증을 느끼면 위젯을 떼버릴 것이다. 더구나 그렇게 한 번 떼어진 이미지는 다시 회복하기 어렵게된다. 위젯으로 사업을 영위하기가 어려워진다는 것이다. 위젯 서비스를 할 때, 한번의 접속불능이 얼마나 치명적인가를 인지하고 계속적으로 이를 점검하고 관리할 필요성이 있다.

위젯 서비스를 한다면 단 한번의 서비스 불능사태도 없도록 최적의 상태로 유지하는 기술이 필요하다. 서버기술자들과 개발자들의 노력, 고도의 실력과 서비스에 대한 집중력을 요구할 것이다.

하지만 분명한 점은...
아직 웹위젯도 제대로 자리 잡지 못하는 상황에서 너무 앞서가는 이야기가 아닌지 모르겠다. 위젯이 유비쿼터스 가정환경에서 빠질 수 없는 주인공이 되었을때를 미리 대비할 필요가 있다. 웹페이지는 천문학적인 숫자가 산발적으로 퍼져있고, 유저의 attention이 떨어진다. 하지만 위젯이 냉장고나 밥솥에 붙어서 항상 이용자의 눈에 띄게 되고, 이용자가 어쩔 수 없이 위젯을 사용하게 된다면 이야기는 확연히 달라진다. 위젯에 대한 유저의 attention이 확연히 높아지기 때문이다.

위 동영상은 이미 상용화 되어 있는 BMW의 편의기능 중 하나다. HUD라고 불리는 기술로써 항공기에서 사용하는 TFT기술을 자동차에 접목시켰다. 현재 속도, 내비게이션 정보 등이 운전자의 앞유리창에 비친다. 만약 저게 위젯이라면 우리는 어떻게 생각을 접근해 볼 수 있을까?

자동차의 유리에 위젯이 다음과 같이 배치될 수 있다면? 그리고 위젯의 컨텐츠는 언제라도 유저가 바꿀 수 있다면 어떨까?


플랫폼의 다양화를 꾀하면, 모니터 밖으로, 액정 밖으로 얼마든지 위젯이 활용될 수 있으리라 생각된다. 위젯은 마케팅 도구로써 뿐만 아니라 편리한 도구(gadget)로써, 분명히 우리 삶을 더욱 혁신적이고 편리하게 바꾸어 줄 도구임에 틀림없다.