위젯 개발시 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정도로 하면 확대나 축소를 해도 깨지는 정도가 적다. 오히려 이미지 보존을 가장 적정 수준으로 유지할 수 있다.
  

등수놀이의 무의미함.
등수놀이의 덧없음.
잘 알고 있지만.

그래도 등수놀이는 왜 이렇게 재미있는지 모르겠다.
타임지에서 2009년 세계대학랭킹을 발표했다는데..
대학순위 변동이 꽤 많다.

역시 등수놀이는 재미있어 >.<

1 HARVARD University United States
2 YALE University United States
3 University of CAMBRIDGE United Kingdom
4 University of OXFORD United Kingdom
5 CALIFORNIA Institute of Technology (Calt... United States
6 IMPERIAL College London United Kingdom
7 UCL (University College London) United Kingdom
8 University of CHICAGO United States
9 MASSACHUSETTS Institute of Technology (M... United States
10 COLUMBIA University United States
11 University of PENNSYLVANIA United States
12 PRINCETON University United States
13= DUKE University United States
13= JOHNS HOPKINS University United States
15 CORNELL University United States
16 AUSTRALIAN National University Australia
17 STANFORD University United States
18 University of MICHIGAN United States
19 University of TOKYO Japan
20 MCGILL University Canada
21 CARNEGIE MELLON University United States
22 KING'S College London United Kingdom
23 University of EDINBURGH United Kingdom
24 ETH Zurich (Swiss Federal Institute of T... Switzerland
25 KYOTO University Japan
26 University of HONG KONG Hong Kong
27 BROWN University United States
28 École Normale Supérieure, PARIS France
29 University of MANCHESTER United Kingdom
30= National University of SINGAPORE(NUS) Singapore
30= University of CALIFORNIA, Los Angeles (U... United States
32 University of BRISTOL United Kingdom
33 NORTHWESTERN University United States
34= ÉCOLE POLYTECHNIQUE France
34= University of BRITISH COLUMBIA Canada
36 University of California, BERKELEY United States
37 The University of SYDNEY Australia
38 The University of MELBOURNE Australia
39 HONG KONG University of Science & Techno... Hong Kong
40 NEW YORK University (NYU) United States
41 University of TORONTO Canada
42 The CHINESE University of Hong Kong Hong Kong
43 University of QUEENSLAND Australia
44 OSAKA University Japan
45 University of NEW SOUTH WALES Australia
46 BOSTON University United States
47 MONASH University Australia
48 University of COPENHAGEN Denmark
49 TRINITY College Dublin Ireland
50= Ecole Polytechnique Fédérale de LAUSANNE... Switzerland
50= PEKING University China
50= SEOUL National University Korea, South
53 University of AMSTERDAM Netherlands
54 DARTMOUTH College United States
55 University of WISCONSIN-Madison United States
56 TSINGHUA University China
57 HEIDELBERG Universität Germany
58 University of CALIFORNIA, San Diego United States
59 University of WASHINGTON United States
60 WASHINGTON University in St. Louis United States
61 TOKYO Institute of Technology Japan
62 EMORY University United States
63 UPPSALA University Sweden
64 LEIDEN University Netherlands
65 The University of AUCKLAND New Zealand
66 LONDON School of Economics and Political... United Kingdom
67 UTRECHT University Netherlands
68 University of GENEVA Switzerland
69 University of WARWICK United Kingdom
70 University of TEXAS at Austin United States
71 University of ILLINOIS United States
72 Katholieke Universiteit LEUVEN Belgium
73 University of GLASGOW United Kingdom
74 University of ALBERTA Canada
75 University of BIRMINGHAM United Kingdom
76 University of SHEFFIELD United Kingdom
77 NANYANG Technological University Singapore
78= DELFT University of Technology Netherlands
78= RICE University United States
78= Technische Universität MÜNCHEN Germany
81= University of AARHUS Denmark
81= University of YORK United Kingdom
83= GEORGIA Institute of Technology United States
83= The University of WESTERN AUSTRALIA Australia
83= University of ST ANDREWS United Kingdom
86 University of NOTTINGHAM United Kingdom
87 University of MINNESOTA United States
88 LUND University Sweden
89 University of CALIFORNIA, Davis United States
90 CASE WESTERN RESERVE University United States
91= Université de Montréal Canada
91= University of HELSINKI Finland
93= Hebrew University of JERUSALEM Israel
93= Ludwig-Maximilians-Universität München Germany
95 KAIST - Korea Advanced Institute of Scie... Korea, South
96 University of VIRGINIA United States
97 University of PITTSBURGH United States
98 University of CALIFORNIA, Santa Barbara United States
99= PURDUE University United States
99= University of SOUTHAMPTON United Kingdom
101 VANDERBILT University United States
102= University of NORTH CAROLINA United States
102= University of SOUTHERN CALIFORNIA United States
104 University of LEEDS United Kingdom
105 PENNSYLVANIA STATE University United States
106= University of ADELAIDE Australia
106= University of ZURICH Switzerland
108 University College DUBLIN Ireland
109 TECHNION - Israel Institute of Technolog... Israel
110 GEORGETOWN University United States
111 MAASTRICHT University Netherlands
112 TOHOKU University Japan
113 FUDAN University China
114 TEL AVIV University Israel
115 University of VIENNA Austria
116 Université catholique de LOUVAIN (UCL) Belgium
117= MCMASTER University Canada
117= QUEEN'S University Canada
119 University of ROCHESTER United States
120 NAGOYA University Japan
121 OHIO STATE University United States
122= DURHAM University United Kingdom
122= University of MARYLAND United States
124= National TAIWAN University Taiwan
124= University of OTAGO New Zealand
126 ERASMUS University Rotterdam Netherlands
127 STONY BROOK University United States
128 EINDHOVEN University of Technology Netherlands
129 University of WATERLOO Canada
130 University of SUSSEX United Kingdom
131 University of BASEL Switzerland
132 University of CALIFORNIA, Irvine United States
133= CARDIFF University United Kingdom
133= Technical University of DENMARK Denmark
133= University of LIVERPOOL United Kingdom
136 University of GHENT Belgium
137= Freie Universität BERLIN Germany
137= TEXAS A&M University United States
139 HUMBOLDT-Universität zu Berlin Germany
140 Ecole normale supérieure de LYON France
141 University of Science and Technology of ... China
142 WAGENINGEN University Netherlands
143 NANJING University China
144= SHANGHAI JIAO TONG University China
144= University of GRONINGEN Netherlands
146 University of ARIZONA United States
147= CITY University of Hong Kong Hong Kong
147= Universität FREIBURG Germany
149 Université Pierre-et-Marie-Curie PARIS V... France
150 Universidad Nacional Autónoma de México ... Mexico
151 RUTGERS, The State University of New Jer... United States
152 University of BATH United Kingdom
153 University of ABERDEEN United Kingdom
154 Indian Institute of Technology Delhi (II... India
155= Eberhard Karls Universität TÜBINGEN Germany
155= VU University AMSTERDAM Netherlands
157 TUFTS University United States
158 KYUSHU University Japan
159 The University of WESTERN ONTARIO Canada
160 QUEEN MARY, University of London United Kingdom
161 University of LAUSANNE Switzerland
162= CHALMERS University of Technology Sweden
162= NEWCASTLE University, NEWCASTLE Upon Tyn... United Kingdom
164 SIMON FRASER University Canada
165 University of FLORIDA United States
166= CHULALONGKORN University Thailand
166= Universität GÖTTINGEN Germany
168 University of NOTRE DAME United States
169 Universität FRANKFURT am Main Germany
170= INDIANA University Bloomington United States
170= University of CALGARY Canada
170= University of LANCASTER United Kingdom
173 KTH, ROYAL Institute of Technology Sweden
174= HOKKAIDO University Japan
174= Indian Institute of Technology Bombay (I... India
174= RENSSELAER Polytechnic Institute United States
177= University of LEICESTER United Kingdom
177= University of OSLO Norway
179 University of CAPE TOWN South Africa
180= University of COLORADO at Boulder United States
180= WASEDA University Japan
182 MACQUARIE University Australia
183= Lomonosov MOSCOW STATE University Russia
183= Université Libre de BRUXELLES (ULB) Belgium
185 BRANDEIS University United States
186= University of BARCELONA Spain
186= University of CANTERBURY New Zealand
188= POHANG University of Science and Technol... Korea, South
188= Technische Universität BERLIN Germany
190 Universität STUTTGART Germany
191 University of MASSACHUSETTS, Amherst United States
192= University of BERN Switzerland
192= University of BOLOGNA Italy
194 University of READING United Kingdom
195 University of ANTWERP Belgium
196 University of SAO PAULO Brazil
197= DALHOUSIE University Canada
197= University of BUENOS AIRES Argentina
199 KOBE University Japan
200= University of ATHENS Greece

프린스턴 추락...... 홍콩 대학들의 약진...
도쿄대의 추락.. 아니 일본대학들의 추락... 게이오는 아예 200위에서 밀려나는 수모를.. ㅜ..ㅜ
서울대의 입지상승, 200위 내에서 고려대, 연세대는 밀려나고....

관전의 재미

정치적 견해는 절대로 쓰지 말자고 다짐했건만, 답답한 마음에 몇 자 남긴다. 이 블로그는 내 개인블로그다. 나와 관련된 회사, 단체, 동호회 어떤곳의 입장과도 일절 관련없음을 먼저 밝힌다. 모든 의견은 나의 개인적인 의견이다.

http://bbs1.agora.media.daum.net/gaia/do/debate/read?bbsId=D115&articleId=375215&RIGHT_DEBATE=R2
미네르바님의 마지막 글이다.

참으로 많은 생각이 교차된다.
미네르바님의 글을 보고 있으면 꼭 내 생각을 보고 있는 것 같다. 미네르바님의 글에 100% 동감한다. 경제는 싸이클을 그린다. 경제 상황이란 것은 중간이라는 것이 없다. 호황아니면 불황이다. 싸이클을 기다리면 된다. 그리고 그 싸이클을 즐기면 된다. 나의 철칙이다. 어려울때 투자해, 호황에 팔자. 어떻게 보면 투기적 성향이 짙은 말이지만 그만큼 경제자체에 대한 역동성이나 자정능력에는 긍정적이라는 뜻이다.

하지만, 인도의 카스트제도와 외형만 다를 뿐, 자정능력을 상실한 이 나라 지도층의 부패와 끊을 수 없는 가난과 부의 고리는 악취가 심해 토가 나올지경이다.

'티티테인먼트'라는 말을 들어보았는가? 과거에 내 블로그에서도 한 번 언급한적이 있다. '파레토법칙'에서 출발한 20:80법칙을 우리사회에도 적용할 수 있다. 상위 20%가 하위 80%위에 군림하게 된다는 것이다.

자본주의의 함정이 바로 80%의 폭동이나 국가 전복 시도다. 상위 20%는 어떻게든 하위 80%를 착취하여 영원한 번영을 누려야된다. 그런데 80%가 계획대로 따라와 주지 않으면 체제 유지가 어렵게 된다. 그래서 상위 20%는 하위 80%에게 약간의 놀거리와 먹거리, 즐길거리를 주고, 의식주를 제공한다. 단, 이를 다주지는 않고, 1일 8시간 노동이라던가 '봉급제'같은 제도들로 사람들을 묶어둔다. 주말에는 쉬게해주는 대신 약간의 놀시간과 놀거리를 제공해준다. 이를 '티티테인먼트'라하고, 하위 80%를 '티티테이너'라고 부른다. 엄마젖이나 먹고 놀라는 뜻이 담겨있다. 상위 20%가 지배하는 사회에서 집권층의 의식을 반영한 단어라고 볼 수 있다.

하위 80%가 전체 노동력의 80%를 제공하고, 전체 부의 20%를 분배받는다. 상위 20%가 전체 노동력의 20%를 제공하고, 80%의 부를 가져간다. 물론, 실제로는 이것보다 더 데이터는 오도되어 있을 수 있다.

정치, 법, 의료, 유통, 부동산, 금융, 방송, 언론, 교통, 교육 거의 모든 분야에 권력층이 유착되어 있다. 이 고리를 끊고 가난한자가 자신의 뜻을 이루는 것은 하늘의 별따기다. 물론 나는 자신있다. '악'으로 '깡'으로 그 고리를 끊고 한 번 해 볼 자신이 있다. 하지만 내 주변의 많은 친구들이 하나씩 지쳐서 포기하고 떨어져 나가는 것을 보면 이 나라에 증오를 느낀다. 내 친구들을 그렇게 만드는 이 나라에 분노를 느낀다.

미네르바님 표현대로 우리는 사육되고 있다. 그들이 세뇌 시키는대로 믿고, 그들이 시키는대로 챗바퀴도는 삶을 살고, 그들이 시키는대로 국가에 목숨을 바칠 필요가 있을지 회의가 든다. 전쟁이 나면 그들과 그들의 자식들은 이미 해외로 도망가고 없으리라, 그런 그들이 우리에게 희생을 강요한다. 국가에 대한 충성이나 맹세 따위는 어쩌면 공허한 헛소리나 환상에 지나지 않을지도 모른다. 누구를 위해 희생하는 것인가?

나는 주변 사람들에게 늘 이런말을 하고 다녔다.
"난 전쟁나면 가장 먼저 자원입대해서 싸울거야!!"

물론 전쟁이 나지 않으면 가장 좋겠지만, 그만큼 나는 이 나라를 사랑하는 결연한 의지가 있었다. 뭐 거창하게 멀리 갈것도 없었다. 내 여동생을 지키기 위해서, 우리 부모님과 친구들을 지키기 위해서 그렇게 나는 나라를 위해 언제라도 싸울 준비가 되어있었다. 하지만 나는 왜 180도로 생각이 바뀌게 되었는가? 이렇게 만든 사람들은 누구인가?

지난해, 나는 이명박 대통령을 지지했다. 그리고 이명박 캠프에서 열심히 일을 했다. 오랜시간 만들어져 온 내 가치관이 한 표가 되어 행사되었고, 나는 민주시민으로서 당당하게 내 권리를 행사했다. 그래서 지금도 내 선택에 후회나 부끄러움은 없다. 하지만 이명박 대통령의 선택에는 실망을 금치 못하겠다. 강만수 장관, 유인촌 장관을 보면 한숨부터 나온다. 유인촌 장관, 강만수 장관 배불리라고 뽑아준 대통령이 아닌데 말이다.

그렇다고 내가 그 반대세력을 지지하는 것도 아니다. 그들의 아집이나 행동도 강만수 장관, 유인촌 장관과 별반 다를바가 없어보인다. 차라리 대한민국 정치를 내 머릿속에서 지워버리고 관심을 끌 생각이다. 이제 무관심으로 일관할거다. 이 무관심이 어쩌면 악덕한 정치인들이 바라던 바 일지도 모르지만.

미네르바님이 남긴 여운의 말, 나도 오래전부터 생각하던거다. 그래서 기반이 없던 시절부터 외국말 공부하려고 발버둥 쳤던 것이다. 토익 성적표 따위 나에겐 필요없다. 하지만 생활하기 위한 언어는 반드시 필요하다고 생각했고, 나는 그 언어를 써 먹을시간이 2015년 뒤라고 개인적으로 생각해왔다. 하지만 미네르바님은 나보다 더 기간을 당겨 3~4년 안이라고 단언하고 떠나셨다.

오래전부터 머릿속으로 의심만 해오던 것들이 하나하나 눈앞에 현실로 나타나면서, 나는 이 나라에 충성할 이유를 상실했다. 내가 사랑하는 사람들만 데리고 이민갈거다. 그 기간은 길지 않을것이다. 만약에 이민을 가지 못한다면 이 뭐 같은 나라를 뒤집어 엎어버릴 정도로 힘을 키울것이다. 악착같이. 선한것이 이기고, 바른것이 이긴다는 것을 반드시 보여 줄 것이다. 모든 인간은 평등하고, 그 평등은 다른 제 3자가 통제할 수 없다는 것도 보여줄 것이다. 내가 말하는 것은 사회주의자들의 그것과는 다르다. 나는 자본주의자니까. 단지 천민자본주의를 경계하고 증오할 뿐. 그래도 어딘가, 세상의 정의는 살아있다고 믿는다.

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

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


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


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

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

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

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

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

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

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

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


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


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

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

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

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


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