쏭군은 열정 드리머

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

제 블로그 상단 메뉴에 마우스를 올려보시면, 풀다운 형태의 메뉴가 만들어져 있습니다.
저것은 CSS로만 만들어진 메뉴입니다. 테이블을 보였다가 감췄다 하는 정도에요^^;

제가 풀다운 메뉴를 사용하다보니, 한 가지 문제가 생겼는데요.

요즘은 플래시로 된 동영상 UCC를 많이 퍼다가 블로그로 올립니다.
아마도 저작권 등의 영향 때문에, 음악을 주로 그렇게 올리는 편인데요.
이 풀다운 메뉴가 플래시 아래로 숨어버리는 현상이 생기는 것이였죠~

바로 이 부분에서, 얼마전 눈치챈 유튜브의 섬세함을 보았습니다.

아래의 화면을 보시죠 :D

국내 동영상 UCC 서비스는 전부 확인 해보지는 않았지만,
제 블로그에 걸려있는 회사의 것들은 전부 저렇게, 메뉴가 플래시 아래로 깔려버립니다.

 
유튜브의 경우에는 메뉴가 플래시 위로 올라갑니다.

사실 이건 별달리 대단한 건 없습니다. 코드 한 줄만 넣어주면, 해결할 수 있는거거든요.
유튜브와 국내 서비스 하나의 '퍼가기 소스'를 비교해 보겠습니다.

 

저를 만족시킨 유튜브의 섬세함은 바로 위의 굵은 줄 한 줄 덕분입니다.

그래서 유튜브를 자주 사용하게 됩니다.
국내 동영상 UCC 서비스들을 블로그로 가져 오려면 일일이 wmode를 넣어줘야 하기때문에 여간 불편한 것이 아닙니다. 이런 경우까지 대비해서 저런 센스있는 코드를 넣어놓은 유튜브 멋쟁이죠?^^

통상, div 나 table 같은 블록라인 태그가 플래시와 겹치게 되면, 플래시가 이들을 잡아먹고 '무조건 위로 튀어나오는 현상'이 있습니다.

이를 방지하기 위해서 불러온 플래시의 wmode 속성에 transparent 를 주면 됩니다.
원래 이 옵션은 플래시에서 사용하지 않는 빈 부분을 투명하게 처리하기 위해서 사용하는데요.
버그인지 뭔지 저 옵션을 주게 되면, 플래시가 블록라인 태그위로 치고 올라오지 않고, 밑으로 깔리게 되더라구요.

위의 예처럼 object 태그를 이용해서 플래시를 삽입할 때는 param 태그를 이용해서 속성을 추가 해주면 됩니다.

<param name="wmode" value="transparent"></param>

만약 object 태그를 사용하지 않고, embed 태그만으로 플래시를 사용하실때는 아래처럼 embed 태그 뒤에 확장태그로 wmode 속성을 설정해주시면 됩니다.

<embed src="어쩌고.swf" wmode="transparent" .... ></embed>

우리 나라 서비스들도 요런 아주 사소한 거 까지 신경써줄 수 있었으면 좋겠습니당 ^_^)/

wmode 처리가 안 된, 국내 서비스가 쏭군 블로그 메뉴를 잡아먹는 현장 목격하러 가기
wmode 처리가 잘 된, 친절한 유튜브씨가 쏭군 블로그 메뉴는 안 잡아먹는 현장 목격하러 가기


PS
올블로그를 통해 오셔서 제 블로그 상단의 메뉴를 이용하시면 메뉴가 오작동 되는 버그가 있습니다.
올블로그 툴바를 끄셔야, 제 블로그 상단의 메뉴가 오작동 없이 제대로 작동합니다.
왜 그런지 이유는 밝혀지지 않았습니다. 묻지마 버그입니다...^^;;;

PS 2
위에 언급된 mncast 는 과거에 올린 동영상으로 현재 mncast는 wmode, transparent 코드가 추가되어 있습니다.. 만쉐!!!

최근 많은 수의 다음카페가 버려지고,
네이버 카페로 이사를 가고 있는 것으로 알고 있습니다.

네이버 카페가 다음카페와 다소 비슷한 부분이 많아서 관리하시는데
어려움은 없으시겠으나,
비공개 카페를 운영하고 계신다면 반드시 메뉴 전체를 비공개 하셔야 합니다.

이유는 아래와 같습니다.