웹킷 기반에서 CSS3 맛보기

WidgetPad에 웹킷 기반의 웹브라우저에서 텍스트와 관련된 CSS3 속성들을 미리 맛볼 수 있는 위젯을 만들었네요.

CSS3 Generator

'Hello World' 라는 텍스트에 Rounded Corner, Opacity, Box Shadow, Text Shadow, Reflection, Text Stroke, Transform등 7가지 CSS3 속성을 적용해 보고 확인해 볼 수 있습니다.

하단에는 적용된 스타일의 속성과 값이 나타나는데 웹킷전용 속성으로 처리되고 있을을 볼 수 있습니다. W3C의 스펙에 따른 표준 속성들은 아니지만(파이어폭스등 타 브라우저에서도 위와 유사한 전용 속성을 이용해서 구현될 수 있다) 앞으로 사용될 CSS3의 특징을 미리 살펴볼 수 있는 정도로 참고하기에는 괜찮은 것 같습니다.

위 위젯을 구현한 마크업과 스타일시트, 자바스크립트에 대한 코드는 소스보기에서 보실 수 있습니다.

맥에서 위젯으로 미투데이 글 올리기

맥 위젯 중에 웹클립이라는 위젯이 있습니다. 웹클립을 이용하면 웹사이트의 일부를 잘라내서 위젯처럼 사용할 수 있게 되는데요. IE8의 웹조각 기능과 흡사합니다.

웹클립을 이용해서 미투데이 글쓰기 창을 위젯으로 만들어 볼까요?

맥OS의 위젯들

일단 위젯 가운데 Web Clip 위젯을 활성화 시켜 주시고,

사파리 웹브라우저의 Dashboard에서 열기를 실행

사파리를 구동시켜서(웹 클립 위젯은 사파리에서만 됩니다) [파일] 메뉴 아래 'Dashboard에서 열기'를 선택합니다. 물론 이전에 원하는 웹사이트를 열어 두셔야 합니다.

원하는 영역을 선택

'Dashboard에서 열기'를 선택하면 웹페이지 위에 클립할 영역을 선택할 수 있는 가이드가 나타납니다. 이 때 미투데이 글쓰기 창을 지정해 줍니다.

미세 조절을 하고, 추가 버튼 클릭

영역을 선택하면 상하좌우로 세밀한 조정이 가능합니다. 그리고 우측 상단에 [추가] 버튼을 클릭하면 끝입니다.

위젯창에 등록된 미투데이 글쓰기 위젯

자 이제 다시 맥의 위젯들을 불러오면 미투데이 글쓰기 창이 위젯화 되어 나타나게 됩니다. 정말 글이 써질까요? 제대로 전송을 될까요?

정말로 글이 올라간다

네 됩니다! 제대로 글이 저장되었다고 합니다.

사실 이 위젯은 사용자가 선택한 영역만 정확히 떼어 내어 위젯으로 만드는(IE8 웹조각은 그렇게 처리)것은 아닌듯 합니다. 잘 보면 사실은 해당 페이지 전체를 저장하고, 위젯 화면에서는 사용자가 선택한 영역만 보여주는 것 같습니다.

그리고 다음과 같이 위젯의 모양을 여러가지 형태로 바꿀수도 있었습니다.

위젯 스킨 1

위젯 스킨 2

위젯 스킨 3

저는 이렇게 네이버 스포츠 중계창을 위젯으로 만들어 놨는데요. 일부러 네이버에 접속해서 찾아 보지 않아도 간단히 위젯으로 볼 수 있으니 편리한것 같습니다.

네이버 스포츠 중계를 위젯으로 만든 화면

iGoogle 새로운 기능을 사용해 보자

지난 6월 26일 iGoogle의 새로운 기능이 소개가 되었다. 현재의 iGoogle은 컨텐츠 영역 상단에 탭을 구성하도록 되어 있는데 새로운 기능으로 업그래이드(?)를 하게 되면 좌측에 탭영역이 활성화 된다. 마치 웹사이트의 2차 메뉴를 보는 것과 같이 되는데 탭 이름 아래 가젯목록이 나열된다. 가젯명을 클릭하면 새로운 탭 또는 창으로 이동하지 않고, 컨텐츠 영역에서 바로 전환이 되면서 편리함을 제공하고 있다.

상단에 탭이 위치한 현재의 iGoogle

새로운 iGoogle은 좌측에 탭영역이 활성화 되고, 가젯목록이 나타난다

가젯명을 선택하면 컨텐츠영역이 전환되어 편리하다.

YouTube 동영상 가젯을 선택하면 바로 동영상 목록을 볼 수 있다.

현재는 새로운 iGoogle의 테스트중으로 설정을 통해서 위의 기능을 사용할 수는 없고 다음과 같은 방법으로 적용해 볼 수 있다.

1. iGoogle 에 접속.
2. 주소창에 javascript:_dlsetp('v2=1'); 입력하고 실행.

원래의 버전으로 돌아오고 싶은 경우에는 javascript:_dlsetp('v2=0'); 이라고 입력하고 실행하면 된다.

위젯인가?

90년대 외계소년 위제트라는 만화 영화가 있었다. 아름다운 지구를 환경오염으로부터 지켜내야 한다는 게 주제였고, 기억속에 머리만 달린 '위제트'라는 외계인이 주인공이었다. 그런데 최근 '위젯'에 대한 관심이 높아져서 새삼 그 만화영화가 떠올랐다. 비슷하게 '형사 가제트'와 '가젯'의 관계도 궁금증을 갖게 만들었는데, 최근에 '웹 패러다임을 바꾸는 위젯'이라는 노주환님의 책을 통해서 두 만화의 주인공의 이름과 '위젯','가젯'이 같은 의미로 만들어진 것임을 알 수 있었다. 그래서였는지 모르겠지만 '위젯'을 다룬 이 책이 어렵지 않게 읽혀졌고, 꽤나 흥미롭게 읽어갈 수 있었다.

웹 2.0과 시멘틱웹에 대한 관심이 증가할 때 국내 서점가에는 온통 외국의 번역서로 넘쳐났는데 '위젯'과 관련해서 읽게 된 이 책은 이미 몇 권의 IT 관련 서적을 지필하신 노주환님의 책이었고, 꽤나 반가운 일이었다. 외국에서 일고 있는 위젯 열풍에 비해 아직 국내 시장은 냉랭하기 그지 없고, 단기간내에 비전을 갖기에도 시장 자체가 지나치게 폐쇄적인 면이 없지 않다고 생각한다. 때문에 내용을 떠나 이 책의 출시는 시의적절하지 않았나 하는 생각을 먼저 해본다.

앞서도 만화를 통해 '위젯'이라는 용어의 생소함을 떨쳤듯이 책의 내용 역시 다양한 관련 이미지와 쉽고 간결한 문장으로 비교적 쉽고, 재미있게 읽어갈 수 있었다. 위젯과 가젯이라는 이름의 유래와 의미부터 시작해서 다양한 위젯 서비스의 분석과 비교, 디자인적 가이드와 실제 구현 방법에 이르기까지 위젯과 관련한 최대한의 정보를 나름의 수고스로움으로 채워 넣었지 않나 싶다.

하지만 부분적으로 내용적 깊이의 아쉬움이 있었다. 웹 패러다임이라는 거창한 제목하에 만들어진 책이라면 단편적인 사실의 나열보다는 구글 애드센스나 유니클로의 광고 위젯, 국내외 위젯 서비스 시장의 미래나 현주소, 앞으로의 비전 등도 함께 다루어져서 소개가 되었다면 좀 더 좋지 않았을까 싶은 생각이 들었다.

위젯에 대해서 아는 것이 거의 없다면 이 책을 추천한다. 충분히 좋은 내용과 다양한 이야기들을 들을 수 있다. 하지만 너무 많은 것을 기대하면 허탈할 수도 있을 것 같다. 개별적인 단위의 깊이는 약하지만 초보자 가이드 역활을 해 줄수 있을 정도의 책이라고 생각하면 좋을것 같다.

웹 패러다임을 바꾸는 위젯 상세보기

노주환 지음 | 멘토르 펴냄

진화하는 웹의 중심에 있는 <b>위젯</b>(Widget)! 『웹 패러다임을 바꾸는 <b>위젯</b>』은 <b>위젯</b>의 개념과 전략적 가치, 종류, 쓰임새, 특징, 디자인, 제작 과정 등을 소개한 <b>위젯</b> 교과서이다. 웹 사이트의 한쪽 구석에서...

위젯 포털로 구축한 시작페이지

http://www.wzd.com/chubzo.myid.net

위자드웍스의 개인화 페이지 서비스를 이용해서 웹퍼블리셔들을 위한 시작페이지를 만들어 보았다. 국내외 주요 커뮤니티인 ‘하드코딩하는 사람들’, ‘CSS Design Korea’, ‘A List Apart’, ‘Ajaxrain’ 등의 최근 글을 보여주고, ‘하코사’와 ‘CDK’의 주요 행사를 스케줄러 위젯을 통해서 공유한다. 아울러 개인적으로 모아두었던 즐겨찾기 목록을 북마크 위젯을 통해서 제공하고 있다.

위젯(가젯)을 이용한 개인화 페이지는 iGoogle이 더 많은 위젯과 빠른 속도를 보여주기는 하지만, 초청에 의한 공유만 지원되는 문제로 위와 같이 완전히 공개형태로 만들기는 지원되지 않기 때문에 위자드웍스의 서비스를 이용해 보았는데 소규모 메타블로그와 같은 페이지를 구축하기에는 나쁘지 않은것 같다.

좀 더 위젯의 종료가 다양해지고, 전문 콘텐츠를 가공한 위젯이 등장한다면 특정 분야의 개인화된 페이지들이 많이 생겨나고 활성화 되지 않을까 싶기도 한다.

위젯 코리아 컨퍼런스 2008 후기

벚꽃 몽우리가 싱그럽게 영글어 가는 계절입니다. 컨퍼런스가 있었던 역삼역 부근의 빌딩 숲 사이에서도 가지마다 말갛게 얼굴을 내민 벚꽃을 볼 수 있었는데 하나 하나의 아름다움도 예뻤지만 그렇게 무리를 지어 피어나는 모습들은 참 경이롭다할만큼 멋진 것이었습니다.

후기를 쓰기 시작하면서 위젯 역시 벚꽃처럼 하나 하나가 가지는 기능과 디자인도 멋지지만 그 수를 더할수록 더욱 멋져지지 않을까 하는 기대감을 갖게 한다고 생각해 봅니다.

위젯 코리아 컨러런스 2008은 디지털인사이트코리아가 주최하고 위자드웍스와 안철수연구소, 웹스미디어에서 후원했습니다. 날씨도 좋았고, 행사장도 역삼역 근처의 포스틸타워로 제가 근무하는 회사에서 멀지 않아서 좋았습니다. 후원사에서 제공하는 상품도 요긴한 것들이었고, 컨퍼런스에 참석된 발표자들과 주제 역시 좋았던것 같습니다. 다만 중간 중간 발표준비가 미흡했던 부분이 있었고, 뒷자리까지 발표자의 목소리가 제대로 전달되지 않는 등 약간의 미숙함이 있었던게 옥의 티였지 않나 싶었습니다.

총 8개의 세션으로 이루어졌고, 오전과 오후 두 타임의 세션들이 서로 접점을 맞대며 진행되었는데 대체로 오전의 두 세션은 '위젯'이란 무엇인가?와 가능성에 맞추어졌고, 오후에는 실제 사례 소개와 분석, 위젯 툴, 서비스등을 선보이는 시간이 되었던것 같습니다.
 

몇가지 내용을 정리해서 적어보자면,

KT 조산구 상무님께서는 위젯스테이션을 컵에 비유하며 무엇을 담아내느냐에 따라 얼마든지 달라질 수 있는것이라고 정의를 내려 주셨는데. 이는 위젯이 얼마나 다양한 형태로 서비스를 제공할것인지를 짐작하게 해주는 대목이었습니다. 또한, 위젯을 통한 서비스 접속이 웹사이트를 통한 것보다 점차 높아질 것으로 내다보시면서 마케팅으로의 활용 가능성을 설명하셨습니다.

위자드웍스의 경우 자사의 사업이기도 한 위젯에 대한 강한 비전을 보이고 있었는데 표철민 대표는 위젯을 배너2.0이라고 정의하고, 2008년이 한국 위젯의 원년이 될 것이라고 '선언(?)' 했습니다. 그리고 위젯을  안철수 연구소의 경우는 위젯의 가능성과 더불어 보안 업체답게 보안을 고민하고 있음을 보여주었고, 구글의 오픈셔설 시스템을 국내에서 처음으로 선보이면서 소셜위젯으로서의 시장을 개척할 것임을 시사했습니다. MS는 Vista를 통한 데스크탑 위젯 에플리케이션과 웹 제작을 위한 Popfly 서비스를 소개하는데 포커스를 두었습니다.

디스트릭트의 권희정 센터장은 자사의 지난 프로젝트를 통해 얻은 결과와 교훈을 발표했고,  SK커뮤니케이션즈의 신성철 팀장님은 한국내 대표 SNS인 싸이월드의 문제점과 개선할점등을 소개하고, 위젯을 통한 활로를 선보였습니다. 또한 SK의 싸이월드는 실제로 위자드웍스의 위젯을 자사의 홈2에 삽입했고, 추후 미니홈피에도 그 영역을 확볼할지 모를 가능을 비추기도 했는데 외국과 달리 블로그 시장이 작고, 미니홈피가 과점의 형태로 SNS 시장을 차지한 상황에서  싸이월드와 위자의웍스의 협력은 시사하는바가 큰 것 같습니다. 결국은 한국은 한국만의 독특한 위젯 시장을 만들어가야 할것으로 보입니다.

저는 위젯에 대해서 잘 모릅니다. 구글의 설치형 위젯인 구글 데스크톱을 사용중이고 몇가지 편리한 위젯의 도움을 받고는 있지만 윈도우 Vista의 위젯인 사이드바는 바로 제거하거나 모바일 위젯의 존재 자체를 모르고 있었을 만큼 아직도 위젯에 대한 공부는 많이 부족합니다.

그런의미에서 이번 컨퍼런스는 제가 몇가지 중요한 의미와 궁금증을 만들어 주었던것 같습니다.

현재의 위젯 시장은 충분한 규모를 갖고 있지도 않은데 이미 다양한 플랫폼과 개발방법들이 도입되어 서로 소통되고 있지 못하다는 문제는 위젯 역시 웹표준을 통한 업계 표준이 요구되고(MS와 위자드웍스등이 이 문제를 제기) 있음을 일러 주었고, 위젯이 HTML과 CSS, JS로 개발되어진다는 것에서 본업이 웹퍼블리셔인 나에게도 결코 관련없는 내용이 아님을 느끼게 해 주었습니다. 위젯은 새로운 형태의 UI를 가질 것(디스트릭트 권희정 팀장)이며 새로운 경험을 가져다 줄 것이라는 사실은 웹디자이너와 개발자들에게 새로운 연구를 요구하게 될 것 같습니다.

그런데 마케팅과 관련된 부분은 컨퍼런스 분위기와 달리 개인적으로 의구심이 많이 들었습니다. 특히 위자드웍스의 김범섭 팀장님의 발표에서 궁금한것들 있었는데(다른 분들의 질문을 통해 답이 있었지만) 블로그가 마케팅 시장이 될 것이고, 충분히 가능성이 있다라는 논리가 조금 납득이 가지 않았습니다. 현 시점에서 위젯을 통한 마케팅 성공 사례가 얼마나 있는지 모르겠지만 왠지 '유니클락'의 큰 성공 하나에 환상을 갖게 된 것은 아닌가? 하는 생각이 들었던 것이 있고, 블로거들의 자발적인 위젯마켓팅 참여가 얼마나 이루어질 수 있을까? 하는 것. 위젯 본연의 기능과 광고적 기능을 어떻게 조절할 것인가? 하는 것. 위젯 광고가 블로그에 붙었을 때 사용자에게 거부감을 주지 않을것이라는 내용은 사실 받아들이기 어렵다고 봤습니다.

제가 생각할때 유니클락은 1. 위젯 본연의 기능인 시계로써의 역활 을 충분히 하고 있고, 2. 초국가적 초기업적 이미지의 캠패인성 광고였습니다. 때문에 사용자들의 거부감을 최소화하면서도 블로그 내에 기능적으로 포함될 수 있었던 것이 아닌가 싶습니다. 실제로 유니클락을 싫어하거나 거부감을 드러내는 사람도 있었습니다. 한국에서 정말 위젯을 통한 마케팅을 한다면 그 성격은 캠패인성이 되야할 공산이 크고, 본래 위젯이 가지는 기능을 포기하지 말아야할 것입니다. 이는 광고주와의 줄당기기를 피할 수 없을 것으로 보입니다.

몇가지 좋은 아이디어도 있을 것입니다. 컨퍼런스에서 소개된 영화 컨테츠를 제공하는 미니 사이트 형태의 영화 위젯이나 음악 위젯이 그렇고, 스포츠 중계판의 역활을 해주는 위젯도 좋은것 같습니다. 개인적인 생각으로는 쇼핑몰의 무료/할인 쿠폰을 안내하는 위젯바도 반응이 좋을 것 같습니다. 여하튼 위젯은 가장 작은 단위의 에플리케이션이다라는 정의를 생각해 봤을때 위젯이 가진 행동이 컨텐츠를 보여주는 것이든 부가적인 기능을 도와주는 역활이든 그 기능을 버린채로 광고만을 위한 것이라면 성공하기 어려울 것이라는 것입니다.

이번 컨퍼런스는 대체로 그러한 인식을 가지고 시작된듯 하고, 가지게 했던것 같습니다. 위젯의 개념과 기능, 가능성을 보여주고 마케팅 도구로써의 가능성을 제시하고 위자드웍스가 제시하듯 그 시점이 '지금'이듯 여러 발표자들이 걱정하듯 시기상조인지는 조금더 많은 사람들의 고민이 필요하다는 사실을 확인시켜준 모습이라고 생각합니다.