반니라는 서비스가 오픈했습니다. "뭐 봤니?"를 편하게 발음하면 "뭐 반니?"가 됩니다. 그래서 서비스 이름도 '반니'인 것 같습니다. 인터파크에서 만들고 운영하고 있습니다. 현재는 베타테스트 중입니다. 반니는 온라인 서재입니다. 내가 본 것들을 차곡차곡 모아서 정리할 수 있습니다. 책 뿐만 아니라 공연이나 음반도 정리할 수 있습니다. 저는 제가 봤던 책을 정리하는 용도로 이 서비스를 쓰고 있습니다. 봤던 책을 특별히 다시 찾아봐야 할때가 있습니다. 그런 경우 책 이름이 기억나지 않으면 난감합니다. 반니는 그럴때 유용하게 쓸 수 있을 것 같습니다. 물론 제 개인적 취향입니다. 여러분들이라면 다양한 용도로 서비스를 쓰실 수 있을 것 입니다.

작은 회사들이 운영하는 온라인 서재서비스가 이미 있었습니다. 하지만 선뜻 쓰지 못하고 있었습니다. 모든 작은 회사들이 그렇지는 않습니다만, 서비스가 갑자기 문을 닫는 경우가 종종 있습니다. 그런 경우 데이터를 백업 받기가 상당히 곤란한 경우가 있습니다. 그래서 선뜻 작은 서비스를 사용하지 못하고 있었습니다. 하지만 인터파크 정도 된다면 믿을만 한 것 같아서 과감하게 온라인 서재를 만들고 있습니다. 아직 몇 권 올리지 않았는데도 꽤 많은 시간을 투자했습니다. 천천히 시간을 가지고 한 두권씩 올려야겠습니다.

반니는 여러가지 기능들을 제공하고 있습니다. 그 기능들을 모조리 설명해드리기는 힘들고요. 제가 사용하는 기능들 위주로만 소개를드릴게요.

사용자 삽입 이미지

반니 홈


반니의 첫 페이지입니다. 일종의 라운지 개념의 페이지 입니다. 다른 분들은 어떤 책장을 가지고 있는지 알 수 있습니다. 여기서 좋은 책을 알게되면 직접 읽어볼수도 있겠습니다. 전체적으로 디자인이 모던하고 예쁩니다. 예쁜 디자인 덕분에 첫인상이 좋습니다.

사용자 삽입 이미지

내 서재


이 페이지는, 제 개인페이지입니다. 반니에서는 '내 서재'라고 부릅니다. 왼쪽의 타임라인에는 내가 친구로 등록한 사람들에 대한 정보가 올라옵니다. 친구가 추가한 책, 친구가 한 말 등의 정보가 올라갑니다.

사용자 삽입 이미지

책장


오른쪽 사이드바는 제가 이 서비스를 사용하는 가장 큰 이유입니다. 책장을 만들 수 있습니다. 그리고 책을 담아서 모을 수 있습니다.

사용자 삽입 이미지

큰 책장


각 책장 오른쪽에 있는 아이콘을 클릭하면 책장을 조금 더 크게 볼 수 있습니다. 위 그림에서 빨간색으로 동그라미 표시된 부분입니다. 개인적으로는 이 큰페이지가 마음에 듭니다. 카테고리 상관없이 모든 책을 이 큰책장에서 한번에 보여줬으면 좋겠습니다. 그리고 그 책장을 떼서 내 블로그에도 붙일 수 있으면 좋겠습니다. 큰 책장도 붙일 수 있고, 사이드바에 있는 작은 책장도 붙일 수 있으면 좋겠습니다. 그러면 블로그의 사이드바에는 작은 책장을 붙일 수 있고, 프로필 페이지에는 큰 책장을 붙일 수 있을텐데요.

책을 추가 하기 위해서 오른쪽 상단의 통합검색을 이용하면 됩니다. 검색 품질이 다소 아쉽습니다. 책 제목을 정확하게 입력하지 않으면 검색이 잘 안됩니다. 저는 네이버 책검색을 이용해 정확한 책 제목을 찾습니다. 그리고 그 제목을 복사해서 반니에서 다시 검색합니다. 책을 찾아서 서재에 담으며 한마디를 남기면 책이 서재에 담깁니다.

저는 책 위주로 사용하고 있습니다만 음반이나 공연과 같은 것들도 모아서 정리할 수 있습니다. 조금 더 자세한 것은 직접 반니에 접속해서 사용해보세요.

책이나 공연을 처음으로 추가하면 '발굴자'가 됩니다. 아직은 베타기간이라 어떤 책이든 발굴자가 될 확률이 높습니다. 나중에 서비스가 커지면 책 발굴왕으로 유명해질 수 있지 않을까요? 농담입니다. 양심껏 정말로 본 책만 등록 하셔야 겠지요. 여러분들도 반니에 서재를 만들어보세요! 은근히 재미있어요!

참! 제 반니 주소에요. 일촌 고고씽! http://banni.kr/ssong
1. W3C 표준 권고안? 그거 뭐야? 먹는거야?
HTML5와 CSS3에 대한 사람들의 관심이 많다. 이 많은 관심 중 잘못된 생각들이 많은 것 같다. 흔히 '조금 아시는 분들'의 입에 자주 오르내리는 'W3C 표준 권고안'에 대한 문제다. W3C에서 HTML5 표준 권고안이 2012년에 나온다느니 그래서 2022년은 되야 HTML5가 안정적으로 쓰일 것이라느니 하는 말은 완전히 시대 착오적인 발언이다.

HTML5와 CSS3의 굵직한 스펙들은 이미 개발이 완료된 상태다. 그리고 표준권고안은 나와도 그만 안나와도 그만인 상황이다. 왜냐하면 많은 브라우저들이 이미 전면적으로 혹은 소극적으로 HTML5와 CSS3의 스펙들을 잘 지원하고 있기 때문이다. 단지 익스플로러만 빼면 말이다. 익스플로러는 버전 9부터 HTML5와 CSS3를 적극 지원하겠다고 했다.

사용자 삽입 이미지

MS의 테스트드라이브 for IE9


2. 구형브라우저, 익스플로러는 버려
우리나라의 의사 결정권자나 중간관리자들이 가장 무서워 하는 것이 익스플로러를 버리는 것이다. 그들이 익스플로러를 버리지 못하고 대는 핑계는 한결같다. "이용자층이 그래도 익스플로러가 가장 많다"는 것이다. 과연 그럴까. 해외에서는 구글이나 트위터 같은 곳이 나서서 익스플로러를 버리고 있고 과감하게 HTML5의 스펙과 CSS3 스펙을 이용하고 있다. 심지어 MS마저도 IE6 버리기 운동에 대해 '감사하다'는 의견을 피력했다. 친구에게 익스플로러6를 쓰지 않도록 인터넷 이용자들의 독려를 부탁하기도 했다.

인터넷 익스플로러에 맞추어 웹사이트를 제작하지 않으면 서비스가 망한다는 것은 달리 말하면 자신이 만드는 서비스에 자신이 없다는 것을 반증한다. 구글을 쓰기 위해 익스플로러를 버리는 사람이 늘어난다면 구글의 서비스가 그만큼 뛰어나다는 것을 의미한다. 만약 네이버가 (현재까지의)익스플로러를 무시하고 HTML5와 CSS3를 적극적으로 지원한다면 과연 네이버는 망할까? 아니면 이용자들이 익스플로러를 버릴까.

또, 익스플로러를 버린다는 표현이 과격해보여도 웹페이지를 HTML5로 만든다고 해서 서비스를 이용할 수 없는 것도 아니다. HTML5는 기존의 HTML과 XHTML문서들의 하위 호환성도 뛰어나니까 익스플로러 이용자도 HTML5 된 웹페이지를 별 문제는 없이 이용할 수 있을 것이다. 까놓고 보면 완전히 말장난인 것이다.

3. 상용 서비스 곳곳에서 찾아볼 수 있는 HTML5와 CSS3, 변화의 물결
지금 곧바로 구글에 접속해서 소스를 보면 확인할 수 있는 사항이 하나있다.

사용자 삽입 이미지

HTML5 독타입을 가지고 있는 구글 메인페이지


문서의 독타입이 HTML5의 독타입임을 확인할 수 있다.

이번에는 트위터에 접속해보자. 위에 있는 그림은 익스플로러로 접속했을 때 아래의 그림은 웹킷엔진을 사용하는 크롬이나 사파리, 혹은 파이어폭스로 접속했을 때의 화면이다.

사용자 삽입 이미지

CSS3를 사용하고 있는 트위터, 익스플로러는 그냥 무시


익스플로러와 파이어폭스나 웹킷을 지원하는 브라우저 등을 이용해서 페이지를 확인해보자. 뭔가 다른점이 있을 것이다. 박스 모서리가 둥글게 디자인 되어 있는데 익스플로러는 무시했음을 알 수 있다. CSS3의 속성 중 하나인 border-radius속성을 익스플로러를 무시하고 과감하게 사용했다. 이미지는 전혀 사용되지 않았다.

사용자 삽입 이미지

동영상을 로드중인 유튜브의 HTML5 플레이어


유튜브와 Vimeo는 HTML5 브라우저를 상용서비스에 이미 적용했고, 점차적으로 플래시로 동작하는 플레이어 개체수를 줄여갈 예정이다.

사용자 삽입 이미지

geolocation API가 적용된 골프존 모바일


이번에는 우리나라의 서비스다. 골프존 모바일 서비스다. 골프존의 매장을 찾아주는 서비스인데 HTML5의 geolocation API가 사용되었다. 아이폰의 사파리에서는 이 API를 지원하기 때문에 차용하였다. 현재 내가 있는 곳의 위치를 자동으로 알아내어 브라우저에 찍어준다.

W3C의 권고안이 문제가 아니고 이미 많은 브라우저가 HTML5와 CSS3 스펙을 잘 지원하고 있다는 것이 문제인 것이다.
안녕하세요. 오랜만에 글을 씁니다. 선거도 끝나고 날씨도 좋네요. 이제는 월드컵을 재미있게 즐기면 올 여름은 즐겁게 마무리가 될 것 같습니다. 그동안 HTML5 책을 쓰고 있었습니다. 일본에서 나왔던 책 말고는 영미권에서 조차 HTML5 책이 없었습니다. 이래저래 실리콘밸리에 있는 노랑머리 개발자 아저씨들과 메일을 주고 받으면서 책을 한줄 한줄 써 나가고 있습니다.

제가 처음으로 번역서를 냈던 '스타일링 CSS'는 다소 급하게 번역이 되어 독자 여러분들의 질타가 많습니다. 그 부분은 죄송스럽게 생각하고 저 또한 마음 고생을 많이 하였습니다. 저의 잘못이 가장 큽니다.

사용자 삽입 이미지

반면에 책을 잘 보았다고 응원해주시는 분들도 많아 한편으로는 감사드리고 힘도 많이 납니다.

이번 HTML5책은 번역서가 아니라 제가 직접 쓰고 있습니다. 최대한 읽기 편하시라고 문체도 편안하고 쉽게 쓰도록 노력을 많이했습니다. 책 이야기는 여기까지만 할게요. 나중에 책이 나오면 재공지 드리겠습니다.

HTML5를 비롯해서 어도비의 CS5 신제품들 그리고 모바일 등 기술과 트렌드의 변화가 너무나 빨라 정신이 없을 정도입니다. 특히 웹으로 먹고 사시는 분들 중에서 프론트앤드 쪽 업무를 하시는 분들은 더욱 정신이 없으실 것 같습니다. 웹디자인을 하시는 분, 웹퍼블리셔, UI개발자분들 모두 그러실 것 같습니다. 실컷 XHTML이나 CSS2.1을 이용해서 웹표준이라던가 접근성에 대해서 조금 알아가고 있는데 HTML5나 CSS3도 공부를 하여야 합니다. 자바스크립트도 다룰 수 있어야 하고 새로이 출시되는 그래픽 도구들도 익숙해져야 합니다. 또한 모바일 기기를 위한 최적화 작업도 공부할 양이 꽤 많습니다. 앱 개발까지 욕심을 낸다면 아예 다른 부분을 플랫폼마다 따로 공부해야 합니다.

이러는 중에 프론트앤드 작업자분들의 포지션이 참 애매해집니다. UI개발자가 해야하는 영역이 클라이언트 스크립트 처리까지인지 Ajax까지인지, 퍼블리셔가 해야 할 일이 이미지를 잘라서 스크립트까지 완벽하게 붙여줘야 하는지, 디자이너는 PSD만 만들면 되는지 이미지까지 잘라줘야 하는지 혹은 마크업이나 CSS작업까지도 해줘야 하는지... 혼란스럽습니다.

물론 각 회사나 팀의 분위기나 업무량 배분 정도에 따라 누가 어떤 업무를 맡을지는 나누면 됩니다. 그러나 그 회사를 나와서 사회가 원하는 업무량이 어느 정도인지 가늠하기가 어려워진 것이 현실입니다. 어떤 퍼블리셔 분은 이전 회사에서는 스크립트를 안 시켰는데 지금 회사에서는 스크립트를 시킨다고 투덜대고 어떤 디자이너 분은 전 회사에서는 마크업까지 했는데 지금 회사에서는 PSD만 찍어낸다고 투덜댑니다.

이런 문제는 앞으로 더 심해질 것으로 보입니다. 웹퍼블리셔와 UI개발자는 마크업과, CSS, 자바스크립트를 이해하고 덤으로 웹표준과 접근성, Ajax까지 다룰 수 있으면 좋을 것 입니다. 덤으로 포토샵과 플래시도 다룰 수 있으면 금상첨화 입니다.

90년대부터 디자인을 했기 때문에 웹디자이너의 포지션에 대해서도 관심이 많습니다. 이 포지션은 최근들어 특히 변화가 많습니다. 이제는 단지 예쁘게'만' 만드는 디자인은 웹에서는 그다지 쓸모가 없어졌습니다. 아마도 이벤트 페이지를 만들때는 유용하겠습니다. 물론 디자이너에게 감각이라는 것이 가장 중요한 비중을 차지하겠지만 웹디자이너라면 좀 다릅니다. 웹디자이너라면 웹에 대한 폭 넓은 이해가 필요할 것 입니다. 이 역시 지금까지는 그렇지 않았습니다. 서버에서 주고 받는 데이터 처리 방식에 대한 것 까지 세세하게 알 필요는 없지만 어떻게 디자인을 하면 시맨틱한 웹페이지를 만드는 데 도움이 되고 서버의 HTTP Request를 줄일 수 있는지까지 고민을 할 수 있는 디자이너라면 프로페셔널 합니다.
사용자 삽입 이미지
또, UI나 UX와 같이 프론트앤드 개발의 중요성이 커지고 있기 때문에 디자인을 하는 과정에서 이 부분에 대한 이해와 배려는 필수적이라고 할 수 있습니다.

"디자인을 하는데 UI개발 하는 사람입장까지 생각해줘야 해?"라고 말하는 디자이너 분들이 계시다면 지금 이글을 보시는 즉시 생각을 바꾸는 것이 현명할 것 같습니다. 과거에 '웹마스터'라고 하는 직군이 있었습니다. '기획-디자인-개발-운영'까지 혼자서 다 처리하는 직군이였는데, 조만간 프론트앤드쪽에서도 '마스터'직군이 나올 것 같습니다. '디자인-마크업-CSS-스크립트-Ajax'까지 혼자서 다하는 마스터 입니다. 물론 모든 업무를 스트레스 없이 빠르게 처리할 수 있는 능력자에 한해서 입니다.

배워야 될 것이 참 많은 요즘입니다. 반면에 UI는 레고블럭 맞춰가는 듯한 재미가 있습니다.
여러분도 저와 비슷한 마음이시리라 생각됩니다. 프론트앤드쪽에서 일하시는 모든 분들께서 항상 즐겁고 행복하시기를 바랍니다.
오래전 한국의 한 구글 유저가 세르게이 브린에게 메일을 보냈다고 한다. 구글 번역기의 품질이 좋지 않았기 때문이다. 세르게이는 그 메일을 받고 즉각 회의를 소집했다고 한다. 그 이후 구글 번역기의 품질을 올리겠다고 단언한지도 몇년이 흘렀다. 하지만 구글 번역기의 품질은 여전히 좋지 않다.

많은 부분을 기계에게 의존하는 시대가 되었다. 하지만 영원히 기계가 사람의 감성까지 따라 갈수는 없다고 생각한다. 특히 언어는 받아들이는 사람의 감성은 물론이고 문화, 자라온 배경이나 가치관이 모두 담겨져 있는 것이기 때문에 기계에 의존하는 것이 힘들다고 생각한다.

사용자 삽입 이미지

그런점에 있어서 이번에 베타 서비스를 오픈한 소셜 번역 서비스 '루아'는 신선하다. 주로 영어가 아닌 곳의 언어를 모국어로 쓰면서 영어를 잘 하는 분들이 번역에 많이 참가하실 것 같다. 아니면 그 반대여도 괜찮을 것 같다. 뭐 이런식으로 서비스를 이용하는 사람들이 번역을 하는 것이다. 초기에는 세계 여러나라의 글들을 영어로 번역하는 작업에 집중한다고 한다.

점점 서비스 활성화가 되면 다국어에서 영어 뿐 아니라 영어에서 다국어로 또 다국어에서 다국어로 번역이 왕성하게 이루어 질 것이다.

한나라의 뉴스를 전 세계 사람들이 함께 소비하게 되고, 언어 장벽도 많이 붕괴시킬 수 있는 잠재력을 가진 서비스다. 신선하고 재미있는 서비스인 것 같다. 잘 되었으면 좋겠다.
Web Resource Depot에 올라온 유용한 포스팅이 있어 소개드립니다. HTML5는 아직 모든 스펙이 완성되어 표준안으로 권고가 되지는 않았습니다만 기본적인 뼈대는 거의 완성된 것 같습니다. 권고안이 2012년에 나오고 HTML5가 완전한 표준스펙으로 자리 잡으려면 2022년까지 가야한다는 이야기도 있지만 변화의 물결은 의외로 빨리 다가올 수도 있을 것 같다는 생각이 드는 요즘입니다.

HTML5와 CSS3의 스펙을 간략하게 정리해 컨닝 페이퍼로 만들어 PDF로 배포하고 있길래 제 블로그에서도 소개드립니다.

HTML5 Visual Cheat Sheet(Gray version)

사용자 삽입 이미지

PDF 파일 다운로드 받기 (1.1MB)


HTML5 Visual Cheat Sheet(White version)

사용자 삽입 이미지

PDF 파일 다운로드 받기 (1.3MB)


HTML5 Cheat Sheet

사용자 삽입 이미지

PDF 파일 다운로드 받기 (73KB)


HTML5 Canvas cheat sheet

사용자 삽입 이미지

PDF 파일 다운로드 받기


CSS3 Cheat Sheet

사용자 삽입 이미지

PDF 파일 다운로드 받기 (123KB)


CSS Property Index

사용자 삽입 이미지

CSS 속성 인덱스 웹사이트 링크

이 녀석들 인쇄해서 짬날때마다 무한반복 모드로 읽으면 머리에 콕콕 박히겠는데요~ 모쪼록 HTML5와 CSS3를 학습하시는 분들께 도움이 되는 자료였으면 좋겠습니다.


어제 제 트위터를 통해서 트윗해드린 내용입니다. HTML5 위에서 돌아가는 추억의 퀘이크2 시연 영상입니다. 물론 어떤 플러그인 설치도 없이 HTML5만으로 퀘이크2를 구동하고 있습니다. HTML5에서 새로이 추가된 canvas요소, audio요소 등의 미래 가능성을 보여주고 있습니다. 더 놀라운 것은 다른 어떤 외부 플러그인이나 프레임워크가 지원되지 않고도 오직 브라우저를 통해서(엄밀하게 HTML5, 웹소켓API를 통해서) 멀티플레이가 된다고 하는군요. 현재는 웹킷이 지원되는 크롬이나 사파리에서 게임이 가능한지 알아보고 있습니다~ 이 부분 알고 계신분 제보해 주시면 감사드립니다~

더 자세한 정보는 여기에서 구하세요. GWT를 이용해서 만들었다고 합니다.
지주회사 SK를 필두로 SK와 계열사들은 참으로 많은 것을 가지고 있는 기업집단이다. 그들은 전국에 걸친 기지국을 가지고 있다. 그들은 네이트와 같은 포털사이트를 가지고 있고, 싸이월드나 네이트온과 같은 강력한 소셜 서비스를 보유하고 있다. SK지주회사는 막대한 현금을 보유하고 있고, 석유, 전기 등 에너지관련 사업도 가지고 있다. 그리고 SK엔크린과 같은 화폐성 자산도 가지고 있고 이외에 전국에 보유한 막대한 부동산 등 SK가 가지고 있는 풍부한 인프라를 꼽자면 끝이 없을 정도다.

그런점이 SK에게는 사업을 영위하는데 많은 도움이 되었다. 촘촘하게 설치되어 있는 기지국이나 기존의 통신 인프라를 택시회사와 결합하여 나비콜이라는 브랜드를 내놓았던 것을 간단하게 예로 들 수 있을 것이다. 그러나 아이폰 열풍이 휩쓸고간 최근에 오히려 그런 방대한 사업분야가 서로 충돌을 일으키는 모습을 볼 수 있다.

앱을 만들어야 해 말아야 해?
포털3사 중 모바일 웹이나, 모바일 애플리케이션 부분에 있어서 지원이 가장 느린것이 네이트다. 네이트가 게을러서 그렇다고 보기는 힘든 것 같다. 모바일용 서비스가 이제는 거스를 수 없는 대세가 되었지만 네이트 내부에서는 고민이 많았을 것이다. SK그룹에서 많은 수익을 창출하고 있는 SKT는 통화료 수입과, 문자메세지 수입, 무선 인터넷 수입이 회사 매출액의 대부분을 구성한다. 통화료의 경우 2008년 1분기 자료에 따르면 9200억원에 이르는 매출을 기록하고 있다. 스마트폰과 wifi의 시대가 오면서 SKT의 이런 핵심 사업이 직격탄을 맞게 된 것이다.

네이트온을 예로 들어보자. 네이트온의 가입자는 3000만명에 달한다. 노인과 아이들을 제외하면 거의 전국민이 네이트온을 쓰는셈이다. 네이트온을 스마트폰용 애플리케이션으로 사용하고자 하는 수요는 당연히 많을 것이다. 그런데 왜 네이트는 네이트온 앱 출시를 한참 미루다가 이제야 뒤늦게 하게 되었을까? 그 이유는 바로 네이트온 앱이 공개되면 자사의 문자메세지 수입에 많은 영향을 미치기 때문이다. 이게 바로 '시장을 독식한 승자의 딜레마'인 것이다.

아이폰이 Wifi를 탑재하고 있기 때문에, 이용자들은 굳이 무선인터넷 요금을 안내고 빠져나갈 수 있는 방법이 생긴셈이다. 그래서 아이폰을 최초로 한국에 들여온 KT에서는 교묘하게 아이폰 기본 요금제를 채택하고 있는 것이다. 그렇다면 통화료 수입은 어떤가? 이건 말할 필요도 없다. 아이폰용 무료 VOIP애플리케이션들 까지 나와있는 상태에서 통화료 수입도 영원하다고 보장받을 수 없는 상태가 되었다. 위기를 느낀 통신사들은 초당요금제니 하면서 새로이 마케팅을 하고 있는데, 그럼 그동안 도대체 눈먼돈을 얼마나 해먹었을까 생각하니 화가 나려고 한다. 특권층 담합이 심한나라에 거대한 통신사를 움직이게 만든 아이폰의 위력이 새삼 놀랍다.

사용자 삽입 이미지

방금 출시한 따끈따끈한 네이트온 앱. 많은 분들이 기다리던 앱이다.


어쨌든 네이트는 아이폰용 앱들을 제공하면서 기존의 자사 비지니스 모델과 충돌하는 부분들을 많이 우려했을 것이다.

네이트온 앱 출시는 좋은 선택, 새로운 수익모델 찾아야
조금 늦긴 했지만, 네이트온 앱 출시는 잘한 선택인 것 같다. 어차피 대세는 거스를 수 없다. 문자메세지 수입이 줄어드는 것을 우려하여 네이트온 앱을 출시하지 않았다면 사람들은 카카오챗이나 트위터용 애플리케이션으로 커뮤니케이션을 했을 것이다. 어차피 대안이 많기 때문이다. 지금이라도 네이트온 앱이 출시되어 그들의 이탈을 도로 흡수할 수 있을 것 같다. 기존의 것을 지키려다 주춤거리게 되면 SKT는 망을 제공하는 망사업자 밖에 안되는 신세로 전락할 수 있다. 거의 다 먹은 달콤한 꿀단지는 버리고 새로운 초콜릿 공장을 찾아 떠나야한다.

이를테면 지금은 SKT와 같은 통신사가 마케팅도 많이하고 어린 학생들에게도 인지도가 있는 고객밀착형 회사이긴하지만, 지금처럼 중요한 시기에 우물쭈물 하다가는 한국전력과 같이 별로 고객에게 마케팅 할일이 없는 그런 회사, 망만 제공하는 회사로 전락할 수 있다는 것이다. 한국전력을 무시하는 발언은 아니니 오해는 금물.

지금이라도 SKT와 SK컴즈 그리고 다른 SK계열사들이 손을 잡고 새로운 수익모델을 찾는다면 좋을 것 같다. SK엔크린은 전자화폐로 발전시킬 수 있고, 도토리도 싸이월드를 벗어나 전자화폐로 키울 수 있다고 생각한다. 그리고 네이트닷컴만 놓고 보면 기존에 보유하고 있던 풍부한 인프라를 잘 활용하여 지금 네이버의 자리를 뒤흔들 정도로 유리한 고지를 차지할 수 있다고 생각한다.

아이폰이 한국에 들어오면서 그동안 국내 통신사들의 비열한 행위가 많이 발가벗겨졌다. 이제는 정말 정정당당하게 싸워야 하는 시대다. 사람들은 예전처럼 바보가 아니고, 정보의 유통속도도 빨라지고 질도 굉장히 높아졌다. 그래서 비밀도 없는 시대다. 조금 다른 이야기지만 스티브잡스 한 사람이 기존 산업을 벌집처럼 뒤흔들고, 새로운 산업군을 만들어내고 하는 것 보면 정말 대단한 사람이라고 생각한다. 스티브잡스와 동시대에 살고 있다는 것만으로도 무한영광이다.
간단한 팁입니다. 인쇄용 CSS파일을 따로 만들어서 다음 코드를 넣어주시면 인쇄 결과물이 A4용지에 딱 맞춰져서 나옵니다.
size 속성에 a4, a5, b5 등의 값을 줄 수도 있고, 여백을 주거나 절단면을 만들수도 있습니다. 만약 내용물이 A4용지를 넘어갈 정도로 많다면 위의 코드를 추가해주시면 됩니다.
인쇄용 CSS를 이용한 여러가지 테크닉들은 CSS print Profile이나 PrinceXML을 참고하세요.

본 포스팅은 Code Syntax Highlighter가 사용되었습니다. RSS구독 하시는 분들은 http://monoeyes.com/811로 접속하시면 깔끔한 코드를 보실 수 있습니다.
개인적으로 부동산 등기부 발급을 받아야 할일이 많습니다. 여태 아무런 문제없이 인터넷 등기소에서 등기부등본을 발급 받아 왔는데, 오늘따라 유난히 에러가 나더라구요. 오른쪽에 '오류시 조치방안'에도 나오지 않는 문제였습니다.

사용자 삽입 이미지

부동산 등기부 발급 페이지로 들어가면 '메뉴를 통해 접속하지 않았습니다. 등기 포탈 초기 화면으로 이동합니다.'라는 오류 메세지가 뜨면서 계속 튕겨버리는 현상이 생기는 것이였습니다. 한참을 원인을 찾다가 구글 크롬 프레임워크를 삭제해보았습니다. 그랬더니 등기부 등본 발급 작업이 잘 진행되었습니다.

크롬 프레임워크를 내가 왜 설치했나 곰곰히 기억을 더듬어 봤더니, 구글 웨이브를 사용하기 위해서였습니다. 혹시 여러분들 중에서도 등기부 등본 발급 업무가 많으신 분들께 도움이 되시는 팁이 되었으면 합니다.

네이버 이웃커넥트 2010/04/05 19:05

카더라 통신에 의하면 페이스북이 한국에 진출한다고 합니다. 네이버와 손잡고 진출한다고 합니다. 네이버 메인페이지에서 '소셜캐스트'가 개설되면 그 안에 페이스북이 들어가는 형태라고 합니다. 어디까지나 카더라 통신이니까 별 신빙성은 없습니다.

네이버 블로그 이웃이 '이웃 커넥트'라는 이름을 달았습니다. 네이버는 아직 이렇다할 SNS서비스를 보유하고 있지는 않지만 카페나 블로그는 잘만 하면 재미있는 SNS도구로 만들 수 있습니다. 특히 본인들이 가지고 있는 강점을 잘 알고 이를 잘 활용하는 네이버의 특성상 다른 분들도 상당히 관심을 가지고 지켜보시리라 생각됩니다.

사용자 삽입 이미지

네이버 블로그 '이웃 커넥트'


현재는 이웃 블로그를 간단하게 링크하는 수준입니다. 그리고 이웃들이 작성한 새글이 올라오면 알려주는 기능을 위젯에 포함하고 있습니다. 현재는 이 간단한 기능만으로도 네이버 블로그 이용자의 기본적인 욕구 정도는 충족시켜 주고 있지 않나 생각됩니다. 아직은 별거 아닌 것 처럼 보이지만 많은 잠재력을 가지고 있는 네이버이기에 이웃커넥트를 어떻게 만들어 나갈지 기대됩니다. 일단 프로필 위젯, 이웃 파도타기, RSS리더기 기능 정도 커버리지 하는 것 같네요.

사용자 삽입 이미지

한 네이버 블로그 이용자의 사이드바에 붙어 있는 이웃 커넥트 위젯의 모습

블리피(blippy)라는 재미있는 사이트를 발견했습니다. 일단 자신의 신용카드를 등록합니다. 그리고 신용카드를 사용할때마다 사용 내역과 금액이 블리피에 기록됩니다. 물론 카드 사용 내용은 실시간으로 업데이트 됩니다.  신용카드 1~2장 이상은 기본으로 가지고 있는 미국에서 재미있는 서비스로 커나갈 것 같습니다.

유저 본인이 정보의 공개여부를 설정할 수 있기 때문에 사생활 침해 논란에서 교묘하게 비켜갔습니다.

사용자 삽입 이미지

블리피 회원들이 지금 막 어디에서 얼마를 썼는지 속속 올라오고 있습니다

사용자 아이디를 클릭하면 그 사람의 소비내역을 볼 수 있습니다. 또한 돈을 쓴 장소를 클릭하면 같은 곳에서 돈을 쓴 사람들도 모아서 보여주고요.

이 서비스가 커져서 데이터가 쌓인다고 생각해보면 그 정보의 활용가치가 무궁무진 합니다. 우선적으로 사람들이 어디에 적극적으로 돈을 쓰고 있는지 알 수 있습니다. 이는 마케팅이나 기업의 제품 가격 측정을 할때도 용이하게 쓰일 수 있을 것 입니다. 또한 각자의 소비지향 패턴을 분석하에 적중률이 높은 타게팅 광고를 제공함으로서 높은 광고 수입과 부가가치를 창출할 수 있을 것 입니다. 그리고 사람들은 같은 물건이라도 다양한 가격에 구매를 할 것 입니다. 서로가 서로에게 구매한 내용에 대한 의견을 제시함으로서 사람들은 조금 더 합리적인 소비를 하게 될 수 있습니다.

블리피는 최근까지 총 160만 달러를 펀딩 받았습니다. 이 중 올해 1월 14일 트위터의 창업자인 에반윌리엄스의 돈도 있습니다. 트위터와 블리피가 결합한다면 트위터는 플랫폼으로서 한단계 더 도약할 수 있지 않을까 생각됩니다. 구글도, 트위터도 그리고 애플도. 플랫폼 지향적인 그들의 큰 스케일에 자주 놀랍니다.
HTML5 <nav> 태그를 사용하는 곳
아마도 추가되는 HTML5의 새로운 요소 중 가장 많이 사용될 요소가 될 것 같습니다.
웹페이지의 문서내에 내비게이션 영역을 지정하고자 할 때 사용합니다.
기존 HTML4.x 버전까지는 없었고 HTML5에 추가된 태그입니다.

코드 사용 예제
사용자 삽입 이미지

위의 코드의 결과물 입니다.


기본 어트리뷰트
class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title

이벤트 어트리뷰트
onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload


만약 '이전'버튼이나 '다음' 버튼을 사용해야 할 경우 <nav>태그안에 들어가도록 해야합니다.

참고
http://informationhighwayman.com/ 의 메인 내비게이션 마크업을 참고해보세요.

본 포스팅은 Code Syntax Highlighter가 사용되었습니다. RSS구독 하시는 분들은 http://monoeyes.com/799로 접속하시면 깔끔한 코드를 보실 수 있습니다.
via : w3schools.com
절반은 트위터 + 절반은 헬리젯 프로필 위젯
포털 기획자들의 창의력이 겨우 남의 서비스 베껴서 떡칠하는 수준?

안녕하세요. 헬리젯의 프로필 위젯 기획자 쏭군입니다. 다음에서 베타 테스트 중인 '요즘'이라는 SNS 서비스를 보고 왔습니다. '미투데이' + '트위터' + '헬리젯 프로필 위젯'을 짜집기 해서 만들었구나 하는 느낌이 들었습니다. 포털에서 다른 사이트 베끼는 일('벤치마킹'이라는 미명하에)이 하루이틀은 아닙니다.

스타트업은 괴롭히지마라
큰 회사들끼리 서비스를 베끼든, 분쟁을 겪든 크게 제가 블로그를 통해서 간섭할 부분이 없다고 생각합니다. 그러나 이제 갓 시작하는 스타트업 벤처기업들의 아이디어를 포털들이 낼름 베껴가서 서비스 한다면 그것은 문제제기를 해야 한다고 봅니다. 사무실에 침대 놓고 먹고 자고하면서, 심지어는 월급도 없이 서비스를 만들어 가는 스타트업 벤처기업가들의 고충을 생각한다면 충분히 그래야 한다고 생각합니다.

사용자 삽입 이미지

다음의 '요즘'


전체적인 UI와 UX flow는 미투데이, 트위터와 거의 흡사합니다. 다만 베꼈다는 오명을 피하기 위해 기타 다른 SNS 기능들을 짬뽕한 것 같습니다.

지인들의 제보(?)
지인들이 계속 다음의 '요즘'이라는 서비스를 언급하며 '프로필 부분이 니가 기획한 서비스랑 너무 흡사하다'며 저에게 제보를 보내줬습니다. 처음에는 그냥 대수롭지 않게 넘겼습니다. 그런데, 워낙 그 이야기를 꺼내는 분들이 많고 해서 짬을 내어 이 서비스에 접속해봤습니다. 오른쪽에 프로필 부분이 바로 눈에 들어오더군요.

결정적으로 제가 이 포스팅을 쓰게 된 계기는 이 부분입니다.

사용자 삽입 이미지

'프로필 위젯'은 제가 재작년부터 구상을 해오며 블로그에서 여러분들께 소개를 드린 바 있는 위젯입니다.(엮음1: 내가 궁극적으로 꿈꾸는 웹위젯, 엮음2: SNS프로필 위젯) 보기에는 간단해 보이지만, 좀 더 완성도를 높이기 위해서 당시 회사에 개발자분들과 많은 분들께서 고민을 많이 해서 나온 모델입니다. UI라던가, 문구 하나하나, DB설계 라던가, 페이지 UX 프로세스 라던가 하는 것들 말입니다.

그냥 저렇게 나열형으로 프로필을 구성한 부분도 얼핏 보기에는 별 것 아닌 것 같습니다. 그러나 처음에는 목록형이였고, 조금 더 재미있고 편리한 UI를 위해 몇 번이고 수정 과정을 거쳐서 저런 형태가 나왔습니다.

사용자 삽입 이미지
사용자 삽입 이미지

그리고 데이터를 입력 받는 항목과 레이블링 역시, 몇 명 되지도 않는 회사 전체 사람들이 모여 한참을 고민하며 다듬어 가며 만든것들입니다.

위의 설정 화면을 보시면, 다음 '요즘'의 프로필 입력 부분은 헬리젯 프로필 입력 항목을 축소한 형태에 지나지 않습니다. 과연 훌륭한 기획자분들이 많이 계신 포털에서 생각 끝에 고민해낸 레이블링과 프로필 입력 항목이 저것 밖에 안됐을까요?
사용자 삽입 이미지
사용자 삽입 이미지
이 화면 역시 헬리젯에서 일부 기능만 제외한 모습입니다. 그리고 UI만 살짝 변경한 모습입니다. 그렇지만 큰 틀은 역시나 헬리젯의 프로필 위젯을 많이 벤치마킹(ㅋㅋ)했다는 것을 알 수 있습니다.
헬리젯 게임 좋아하는 : http://profile.helizet.com/keyword/KTCDLIKETHNG/%EA%B2%8C%EC%9E%84
요즘 게임 좋아하는 : http://yozm.daum.net/home/user?q=%EA%B2%8C%EC%9E%84&type=1

서로서로 베끼는게 하루 이틀은 아니지만..
'요즘'의 프로필 부분과 헬리젯의 프로필은 거의 흡사한 형태입니다. 그러나 궁극적으로 서비스가 추구하고자 하는 방향은 다를지도 모릅니다. 그렇지만 서비스의 방향을 바꾸는 것 정도야 손바닥 뒤집듯이 할 수 있는 일 아닙니까?

일전에도 대형 포털의 작은 회사 아이디어 도용 논란이 적지 않았습니다. 그때마다 저는 분노를 표출하며 댓글을 달러 다녔습니다. 그러나 이번에는 제가 예전에 몸담았던 회사의 서비스가 포털에 의해 카피를 당했습니다.

참, 여기서 제가 계속 카피라고 주장하는 이유는 정황 때문입니다. 프로필 위젯을 오픈한지 1년 남짓 되어갑니다. 그리고 작년 서비스 오픈 직전에는 (당시 회사 대표님께서) 다음 커뮤니케이션에서 프로필 위젯에 대한 간략한 PT를 진행한 적도 있습니다. 그러니 더 의심이 가는것이고, 저희가 고심하여 만들어 낸 레이블링이나 UI, UX가 너무나 유사하게 만들어져 있어서 의심을 할 수 밖에 없습니다.

큰 회사만 문제는 아닙니다
헬리젯을 운영하는 회사를 퇴사하고 오랜만에 사이트에 들어갔습니다. 프로필을 수정하는 부분의 인덱스 UI가 네이버 블로그 설정 페이지를 베꼈더군요. 솔직히 많이 부끄러웠습니다.

그리고 최근에 제가 만난 기획자분들 또한 저에게 충격을 안겨줬습니다. 사이트를 기획하라고 지시를 받은 기획자들은, 국내 중대형 사이트 곳곳의 UI만 훔쳐와서 기획서라고 만들었더군요. 차라리 화면 캡쳐를 하지 뭐하려고 기획서를 만드는지 이해가 가지 않았습니다. 적어도 자신이 '기획자'라고 불리는 사람이라면 벤치마킹도 상식선에서 행하여야 되지 않을까요?
애플 앱스토어 오픈 초기부터 제기되어 왔던 문제들이 최근에 서서히 문제가 되고 있나봅니다. 앱스토어에 쓰레기 앱(사실은 앱을 가장한 껍데기)을 올려서 시험삼아 $0.99에 앱들을 파는 사람들이 이용자들의 원성을 사고 있다 합니다. 돈만 노리고 이런 행동을 하는 사람들이 있는가하면 애플리케이션 개발을 배우는 사람들이 시험삼아서 올리는 경우도 적지 않다고 합니다.

문제는 앱스토어 특성상 유료앱을 사용하기전에 선결제를 해야한다는데 있습니다. 앱의 설명과 포장만 그럴 듯 하면 사용자들은 앱을 써보기전에 결제를 먼저 해야하니 말썽이 빚어지고 있습니다.

아마도 이 부분을 일일이 애플이 관리하기는 쉽지 않아보입니다. 하루에 올라오는 앱의 개수만 해도 방대한데다, 쓰레기 앱이라고 해도 그것을 애플이 마음대로 삭제하고 관리할 수 있는지 여부도 논란의 대상이 되고 있습니다.

가장 좋은것은 앱 개발자분들께서 스스로 이런 현상을 자정하려는 노력이 필요할 것 같습니다. 그렇지 않으면 일부 미꾸라지 같은 사람들에 의해서 '소탐대실' 하는 결과를 가져 올지도 모르니까요. 앱스토어와 같은 플랫폼은 모두가 지켜야 할 훌륭한 자원입니다.
원하는 섹션으로 가려면 페이지를 다 읽어야 하나요? 시간이 너무 아까워요..
웹표준과 웹접근성을 잘 지원하여 만든 사이트가 있습니다. 만약 그 사이트를 스크린리더기로 읽는다면 아래 그림과 같은 순서로 읽어 나갈 것 입니다. 사이트 이미지는 다음을 예로 들었습니다. 마크업 순서는 헤더, LNB, 컨텐츠 영역, RNB, 푸터 순이라고 가정했습니다.

사용자 삽입 이미지

아마도 스크린 리더기는 위의 페이지를 로고가 있는 부분부터 읽어나갈 것 입니다. 그리고 번호가 붙은 순서대로 읽어나가 푸터가 있는 부분까지 차례로 읽어나갈 것 입니다.

이 부분에서 우리가 시각장애인의 웹접근성에 대해서 생각해 볼 것이 있습니다. 만약 스크린리더를 사용하는 한 유저가 있다고 가정합시다. 그 유저는 위의 사이트에서 9번 섹션에 있는 영화 컨텐츠를 주로 이용한다고 가정하겠습니다. 그러면 이 부분에서 접근성 저해 문제가 발생합니다.

이유는 이렇습니다. 9번 섹션을 이용하기 위해서 해당 유저는 매번 페이지를 1번 부터 읽어와야 하는 불편함이 생기기 때문입니다. 유저에게 상당한 시간 낭비일 수 있습니다. 그러면 이 문제를 해결하여 스크린리더를 사용하는 유저가 사이트에 접근하자마자 바로 원하는 섹션으로 접근하는 방법은 없을까요?

다행히도 간단하게 위의 접근성 문제를 해결할 수 있습니다.

스크린리더를 이용하는 유저, 원하는 섹션으로 바로 이동시키기

사용자 삽입 이미지

일단 각 섹션별로 ID값을 지정해줍니다. 이 ID네임을 이용하여 북마킹 기능을 활용할 것 입니다.

각 섹션별 모듈에 해당하는 div에 id값을 다음과 같이 주면됩니다.

<div id="shop_area">
  ... 컨텐츠 중략
</div>

위에 있는 다음(daum.net)의 예처럼 하시면 편리할 것 입니다. 각 섹션별로 id 값을 지정해줍니다.
그리고 페이지의 가장 상단에 다음과 같은 코드를 넣어줍니다. 페이지의 이름을 알 수 있는 헤드라인 태그 바로 아래에 오면 최적일 것 같습니다.

사용자 삽입 이미지

다음(daum.net)의 메인페이지 문서 구조입니다. 웹페이지 최상단에 h1 태그로 사이트의 이름을 지정해 주었습니다. 그리고 그 아래에 간단한 유틸리티와 캠페인 영역을 지나면 '목차'라는 부분이 있음을 알 수 있습니다. 이것이 바로 시각장애인을 배려한 웹접근성 향상 방법중에 하나입니다.

메인페이지의 각 섹션으로 바로 이동할 수 있는 기능을 제공합니다. 이 기능을 제공함으로서 사이트를 이용하는 시각장애인(스크린리더 이용자)들은 웹페이지 전체를 일일이 읽으면서 시간낭비를 할 필요가 없어졌습니다. 바로바로 원하는 섹션으로 이동할 수 있게 되었기 때문이죠. 각 섹션으로 이동시키는 방법은 a 태그의 북마크 기능을 이용합니다. 코드는 다음과 같습니다.

<a rel="bookmark" href="#shop_area">쇼핑 바로가기</a>

a 태그의 rel 속성은 'bookmark'로 해주고, href에는 각 섹션에서 지정한 #id 값을 입력해줍니다. 간단하죠?

섹션 바로 가기 링크는 어떻게 감추죠?
자, 그럼 여기서 의문점이 하나 생기는데요. 편의를 위한 서비스 제공은 좋지만 CSS를 적용한 실제 서비스에 위의 목차를 감추려면 어떻게 해야할까요? 얼핏 생각하기로 다음과 같이 하면 될 것 같은데 말이죠. 음..

HTML마크업
<div class="section_navi">
 ... 목차 내용 중략 ...
</div>

CSS
.section_navi { display: none; }

자, 시각장애인을 위해 만든 목차를 CSS를 적용한 실서비스에서 감추기 위해 위처럼 하면 될까요?
정답은 위의 예제처럼 하면 '안된다' 입니다. display: none; 을 이용하면 일부 스크린리더기가 이를 읽지 못합니다. 그래서 이를 보완하기 위한 방법이 필요하게 되었습니다. display: none; 처럼 컨텐츠를 완전히 감추어 버리는 것이 아니라, 실제로는 컨텐츠를 존재하게 만들면서 디자인상으로만 보이지 않게 하는 방법 말이죠.

HTML마크업
<div class="section_navi">
 ... 목차 내용 중략 ...
</div>

CSS
.section_navi { visibility: hidden; width: 0; height: 0; overflow: hidden; position: absolute; top: -10000px; line-height: 0; }

'다음'의 경우에 이렇게 되어있는데. 좋은 방법이라고 생각됩니다. 목차 div의 너비와 높이를 0으로 만들고 넘어가는 컨텐츠는 overflow: hidden으로 감추는 것이죠. 그리고 2중으로 visibility: hidden까지 자물쇠를 채워 눈에 안띄게 하였고 3중으로 position: absolute에 top: -10000px까지 주어 목차를 안드로메다로 날려버렸습니다. 그러나 dispaly: none처럼 아예 사라진 것이 아니기 때문에 스크린리더기에서도 잘 읽힙니다.

웹접근성 향상을 위한 다양한 아이디어와 노력이 돋보입니다. 혹시 다른 사이트에서도 이 같은 배려가 되어있는지 궁금하네요. 골프존(www.golfzon.com)에서도 스크린리더를 이용하는 유저를 위한 배려가 잘 되어 있습니다.

사용자 삽입 이미지

접근성 향상을 위한 다양한 노력들이 웹을 조금 더 평등하고 편리한 곳으로 만들어 나갑니다.
사용자 삽입 이미지
책 제목 : Stylin' with CSS - 스타일링 CSS
부제 : 웹표준? DIV 코딩? 이 책 하나면 모두 해결!!!
만날 수 있는 곳 : Yes24, 인터파크, 도서11번가, 강컴닷컴, 알라딘, 교보문고
---
YES24에 소개한 역자의 글
안녕하세요. Stylin' with CSS의 한국어판 역자 쏭군입니다. 이 책은 영미권에서 많은 인기를 끈 책입니다. 그 만큼 입문 하시는 여러분들이 보시기에 내용도 탄탄하고 좋은책입니다.

처음에 이 책의 번역을 의뢰 받았을 때, 많이 망설였습니다. 첫번째 이유는, XHTML/CSS책을 번역하기에는 늦은게 아닌가 하는 생각이 들어서 였습니다. 그러나, 실무에서 아직도 이 부분에 대한 서적과 컨텐츠를 필요로 하시는 분들이 많다는 것을 알게 되었습니다.

두번째 이유는 원서가 워낙 훌륭한 책이였기 때문입니다. 제가 감히 이 책을 한국어로 잘 번역해 낼 수 있을지도 두려웠습니다. 어쨌든 저는 심사숙고 끝에 두려움을 물리치고 번역 작업에 착수하게 되었습니다. 이 책의 저자 찰스 와익 스미스가 책에서 최대한 많은 것을 담으려고 노력한 흔적이 엿보입니다. 영미권에서 이 책의 인기 또한 이유가 있음을 알게 되었습니다.

이 책을 통해서 기본기를 확실하게 잡으시고, 부족한 부분은 실무에서 금방금방 쌓으실 수 있으리라 생각됩니다. 책이 많은 분들께 도움이 되었으면 좋겠습니다.

또한, 컴퓨터 서적의 특성상 오타라던가 문장의 번역이 아리송한 부분이 있을 수 있습니다. 이 부분은 제 블로그(monoeyes.com)와 출판사를 통해서 최대한 정오표를 디테일하게 제공해 드릴 수 있도록 하겠습니다. 여러분들께 많은 도움이 되는 책이 되기를 빕니다. 감사합니다.

- 부족한 역자 쏭군 올림


to. 블로그 이웃 여러분들께
안녕하세요. 요즘 개인적인 포스팅이 좀 뜸했습니다. 이래저래 바쁘다 보니 블로그에서 인사를 잘 못드리는 것 같습니다. 다 시간관리에 미숙한 저의 부족함 때문이라고 생각합니다. 이번달에 저와 제 아내가 함께 번역한 책이 한 권 출간하여 판매를 시작했습니다. XHTML과 CSS 서적입니다. 웹표준 서적이에요^^ 아직 배워야 할 것도 많고 갈 길도 먼데 섣불리 서적을 번역한게 아닌가 조금 걱정도 되고 무섭고 그런게 저의 심정입니다~ 하지만 열심히 번역했습니다. 원서가 워낙 좋은 책이라 공부하시는 분들께 많은 도움이 되리라 생각합니다~ 책을 보시고 문제점이 있거나 궁금증이 있으시면 언제라도 블로그 통해서 말씀해 주세요~ 고맙습니다^^ 책을 보시는 분들께 진심으로 많은 도움이 되었으면 좋겠습니다.

책의 오타나 기타 문제, 그리고 궁금증이 있으신 경우
초벌 번역을 할 때부터 교정 작업을 거치기 까지 많은 분들의 손을 거쳐서 책이 완성됩니다. 꼼꼼히 작업하지만, 그래도 사람이 하는 일인지라 오타나 기타 문제들이 있는 경우가 있을 수 있습니다. 특히 컴퓨터 책은 오타가 심하다는 말이 있더라구요~ 하하^^; 스타일링 CSS책에서 발견되는 오타나 기타 문제점들은 제 블로그와 출판사 사이트를 통해서 정오표를 제공해드리겠습니다. 또한, 저희가 찾지 못한 문제를 찾으신 경우에는 제 블로그를 통해서 알려주세요~^^

thanks to
원고 작업 기간동안 조마조마해 하시며 끈기 있게 책의 완성까지 인도를 해주신 지앤선의 홍성신 대리님께 우선 감사의 말씀을 드립니다. 그리고 늘 활기찬 에너지로 저희를 북돋워주신 김지영 이사님께도 감사의 말씀을 전합니다. 정말정말 고생 많으셨습니다.

끝으로, 번역 작업 때문에 새벽 늦게 까지 잠도 못잤던 사람. 위장병까지 얻은 저희 와이프 유미에게 진심으로 고맙다는 말씀을 전합니다. 유미야 수고했어. 사랑해요!
검색의 영역이 넓어지고 있습니다. 공교롭게도 모바일 확산과 새로운 검색 패러다임이 일직선상에 있습니다. 그리고 이것의 또 다른 연장선 '실시간 검색'은 웹3.0 패러다임의 중요한 요소 중 하나인 '실시간 웹'의 중요한 부분을 차지할 것으로 보입니다. 이 새로운 검색 영역은 이미 크고 작은 회사들로부터 치열한 전쟁이 시작되고 있습니다.

바코드를 검색하자 - 쿠루쿠루(QrooQroo)
웹사이트 : http://www.qrooqroo.com
이미 해외에서 2007년에 아이폰 바코드 리더 애플리케이션이 만들어졌습니다. '완전 독특하다'라는 느낌은 받을 수 없는 아이템입니다. 그러나, 이제 국내 제품들의 바코드도 아이폰으로 읽을 수 있게 되었다는 점에서 제 블로그에 소개를 드립니다.



시연하는 동영상을 보시면 바코드를 읽고, 해당 제품을 바로 옥션에서 구매할 수 있도록 연동한 모습입니다. 그리고 다음 검색창도 얼핏 보이네요. 쿠루쿠루를 통해서 제품을 구입하게 되면 수수료를 떼는 방식으로 비지니스 모델을 만든 것 같습니다. 그리고 지도와 연동하여 해당 제품을 가장 낮은 가격대에서 또는 가장 가까운 곳에서 파는 곳을 검색해 줄수도 있을 것 같습니다. 머리만 잘 쓰면 여러모로 재미있는 비지니스 모델을 만들 수 있는 애플리케이션이라고 생각합니다.

눈으로 볼 수 있는 세상 모든 것을 검색하겠다! - 구글 고글(Google Goggles)
웹사이트 : http://www.google.com/mobile/goggles/#landmark
전세계를 자기네 DB에 담겠다는 구글의 야망이 또다른 모습으로 세상에 등장했습니다. 지금도 열심히 웹페이지를 수집하러 다니는 구글 로봇. 지구도 모자라 우주까지 담아버린 구글 어스와 구글 스카이. 구글이 더 어떤 방식으로 세상을 담을까 사람들은 늘 궁금해 합니다.

이번에 런칭한 서비스는 '구글 고글'이라고 하는 서비스입니다. 유명한 관광지의 랜드마크, 책, 명함, 미술품, 그리고 상점이나 와인 등을 모바일 폰에 장착된 카메라로 찍기만 하면 됩니다. 그러면 자동으로 해당 사진의 정보를 분석하여 백과사전이나 기타 정보로 검색하여 보여줍니다.



이제는 문자로만 검색을 하는 것이 아니라, 사진으로도 검색을 하는 시대가 온 것이라 생각합니다. 더불어 지구상의 모든 정보를 자신들의 DB로 만들어버리겠다는 구글의 꿈이 한 발짝 더 가까워 졌다는 것입니다.

제 생각에 책이나 상점과 같은 정보는 상업적으로도 매우 유용하리라는 생각이 듭니다. 상점 입구를 찍은 경우 상점에 파는 음식이나 제품의 메뉴와 가격을 미리 보여준다면 상점에 들락달락 할 필요도 없겠죠.

아이폰의 등장으로 모바일 네트워킹이 붐을 이룰 것이라고 많은 분들이 예상을 했는데, 소프트웨어 기술이 따라가는 속도도 어마어마 한 것 같습니다. 세상이 참으로 빨리 변하네요.
#self_intro 해쉬태그를 이용해서 트위터에 글을 쓰면 한국 트위터 자기 소개 페이지에 본인 소개가 올라갑니다. 이미 7,000여분 가까운 분이 이 해쉬태그를 이용해서 자기소개를 하셨습니다.

이와 유사하지만 등록한 유저의 글까지 모아서 보여주는 사이트가 등장했습니다. 서비스 이름은 트위플입니다. 사이트의 모토는 한글로 트위터하는 사람들을 엮어주자는 취지의 사이트인 것 같습니다. 조금만 다듬으면 한국어로 트위터를 사용하시는 유저분들께 충분히 매력적인 서비스가 될 수 있을 것 같습니다.

심플한 서비스이기 때문에 따로 기능 설명을 드리지는 않겠습니다. 직접 접속하셔서 한 번 사용해보세요^^

서비스 주소는 http://www.twitple.com 입니다.

사용자 삽입 이미지

구글 실시간 검색 테스트 페이지 입니다.

사용자 삽입 이미지

http://www.google.com/search?hl=en&esrch=RTSearch&gl=us&tbo=p&tbs=rltm%3A1&q=obama&aq=f&oq=&aqi=

웹3.0의 핵심 키워드로 불리는 '실시간 웹'의 일부인 '실시간 검색'입니다. 트위터가 Summize를 인수하면서 차세대 검색인 실시간 검색에 주력해 왔는데요. 구글도 이에 질세라 열심히 기술개발과 서비스개발에 투자하고 있는 모습입니다. 출발은 트위터가 빠른 듯 했지만, 지금까지는 구글의 리얼 타임 검색이 더 세련된 것 같습니다. 그리고 기술적으로도 서비스를 훨씬 잘 풀어낸 모습입니다. 역시 구글! 이라는 감탄사가 절로 나옵니다.

종종 웹표준화 작업을 하다보면 양이 방대해서 다른 UI개발자 분들과 협업을 할 때가 있습니다. 실력이 좋다고 소개를 받고 함께 일을 해보면 실제 명성보다 실력이 떨어지시는 분들이 많습니다. 온라인 상에서 유명한 분들임에도 불구하고, 막강한 이론 지식보다 필드에서 실력이 떨어지는 분들이 많은 것 같습니다. 그 분들께서 가장 많이 착각하시는 부분 중 하나가 W3C에서 제공하는 밸리데이터를 통과하면 웹표준을 지킨 사이트라고 믿는 것 입니다.

큰 그림을 봐야합니다, 명성에 비해서 실제 실력이 형편없는 분들이 많아
작은 부분들에 집착하여 작은 부분들에 대한 지식은 뛰어난데, 큰 그림을 보지 못하는 분들이 많습니다. 물론, 작은 부분들 모두 접근성과 표준에 부합하도록 페이지를 제작하는 것은 중요합니다. 그리고 그것은 기본입니다. 그러나, 큰 그림을 그리는 것 역시 중요합니다. 웹페이지는 하나의 문서입니다. 워드프로세서로 작성하는 문서를 생각해보세요. 문서의 큰 제목이 있고, 작은 제목이 있고, 그 아래에는 또 작은 제목이 있고, 컨텐츠들은 제목에 맞도록 순서대로 술술 읽혀야 합니다. 웹페이지 역시 그렇습니다. CSS를 깨보고 문서가 술술 읽혀야 됩니다. 물론 의미에 맞도록 술술 읽혀야 됩니다. 구석구석 밸리데이터은 통과하지만 큰 그림에서 문서의 구조가 엉망인 페이지를 만들고 웹표준을 지킨 웹사이트라고 고객에게 돈을 받고 영업을 하는 사례도 있더라구요.

핵심은 '시각장애우'
앞을 못 보는 분들께서 웹사이트를 이용한다고 생각해봅시다. 그 분들은 웹페이지를 이용하는데 전적으로 소리에 의존할 수 밖에 없습니다. 이를 위해서 웹표준에 의한 웹접근성 준수가 이루어져야 하는 것 입니다. 물론 표준을 지키면 다양한 기기에서 웹페이지를 이용할 수 있게 된다는 장점도 있지만 핵심은 시각장애우 분들께서 웹페이지를 편안하게 이용할 수 있나? 하는 것 입니다.

돈 받고 작업해 준 사이트가 웹접근성 준수율은 낙제점
웹서핑을 하다가 우연히 웹표준화 전문 서비스를 해주는 업체를 찾아냈습니다. 제 블로그에 있는 포스팅을 그대로 복사해가서 본인들의 영업용 자료로 쓰고 있었습니다. 그리고, 그 사이트는 일단 본인들의 웹사이트 조차 웹표준이 준수되어 있지 않았습니다. 물론 XHTML과 CSS, Java Script Validator는 통과되어 있었지만, 페이지를 찬찬히 뜯어보면, 시각장애우분들이 제대로 이용할 수 없는 사이트였습니다. 그 회사의 이름을 밝히지는 않겠습니다만, 그 회사에서 작업한 사이트 하나를 소개해드리겠습니다.

그 회사에서 표준화 작업을 했다고 하는 결혼정보업체 '선우'의 홈페이지 입니다. (https://www.couple.net/)

XHTML페이지를 뜯어보았습니다. Validator는 통과했습니다. 그러나 문서의 구조는 100점 만점에 20점 정도 밖에 안되는 수준이였습니다. 도저히 문서의 구조와 형체를 알아볼 수 없을 정도로 웹페이지를 만들어 놓았습니다. 웹페이지 설계의 실패이고, 웹접근성은 낙제점수 입니다.

사용자 삽입 이미지

좌측에 있는 스크린샷이 결혼정보업체 선우에서 웹표준 전문 업체에 맡겨서 작업을 완료했다는 웹페이지의 모습입니다. 웹페이지의 문서 구조를 이해하기가 어렵습니다. 일단 문서의 설계 자체가 잘못되어 있습니다. 저라면 오른쪽의 모습처럼 웹페이지를 설계 했을 것 같습니다. (5분 정도 시간내어 선우의 XHTML페이지를 만들어 보았습니다.)

일단 문서의 구조가 잘못되었으니, 의미있는 마크업은 거의다 빠져있다고 보시면 됩니다. 이렇게 문서의 구조화가 엉망인 페이지는 SEO도 잘 안된다고 보시면 됩니다. 하지만 업체에서는 웹표준화를 통해서 SEO도 해준다고 홍보하고 있군요. 위의 부분 외에 세세한 부분들도 너무나 시정할 부분이 많지만, 일단 간단하게 몇 군데만 맛배기로 짚어보고 가겠습니다.

사용자 삽입 이미지

'스페이서'이미지를 덕지덕지 사용하였습니다. 이렇게 되면 CSS코딩 할 필요가 없어집니다. 페이지 곳곳에 스페이서 이미지가 접근성을 저해합니다. 이 이미지들이 링크를 대체하고 있습니다.

사용자 삽입 이미지

선우에서 방문객들에게 전하는 메세지 '풍성한 추석되세요'부분은 이미지에 alt태그가 적용되어 있지 않아서, 시각장애우 분들은 이 내용을 전혀 인지할 수 없습니다.

뿐만 아니라, 사이트 로고에는 alt가 적용되어 있기는 하나, alt의 내용은 '로고'입니다. 이 역시 의미에 맞지 않습니다. '선우 홈페이지 바로가기' 정도만 해두었어도 좋을 듯 싶습니다.

사용자 삽입 이미지

로그인 박스 부분은 접근성이 현저하게 떨어집니다. 우선 Tab-index가 엉망입니다. 아이디를 입력하고 패스워드를 입력한 다음 탭을 누르면 탭이 일시적으로 다른 곳으로 포커싱이 되었다가 다시 탭을 눌러야 로그인 버튼으로 돌아옵니다. 그리고 폼 요소는 fieldset 태그로 묶어서 처리하는 방법이 옳을 듯 싶습니다. 그리고 자바스크립트 창이 뜨는 것 역시 좋지 않습니다.

이 밖에도 지적할 부분이 너무 많지만 지면상 줄입니다.

제가 이 'V모사'에 화가 나는 이유는 몇 가지가 있습니다만, 우선은 본인들이 만든 컨텐츠가 아니면서도 이를 영업에 이용하고 있다는 점 때문입니다. 웹표준화 작업 이외에도 위젯마케팅이니 뭐니 다른 사업 부분도 영위한다고 하는데, 제품이나 서비스 설명은 죄다 다른 곳에서 퍼온 이미지나 자료들입니다. 위젯 마케팅은 제가 이전에 근무했던 인사이트미디어의 위젯을 그대로 가져다가 사용을 했더군요.

그렇지만, 궁극적으로 제가 화나는 이유는 따로 있습니다.

팀장님 눈가리고 고객 눈가리고 아웅하면 그만?
업체에서 일하시는 분들중에도 팀장님이 잘 모른다고, 대강대강 코딩해서 페이지를 개발팀에 던져버리는 경우를 종종 목격했습니다. 그리고 웹표준화나 접근성을 가지고 사업을 하시는 분들 역시 위의 사례처럼 대강 밸리데이터만 통과 시키고 고객에게 작업물을 넘겨버리는 경우를 종종 목격합니다. 소위 말하는 '이빨까기'의 달인들이 이런 행각을 많이 합니다.

그런 분들에게 감히 한 말씀 드리고 싶습니다. 프로페셔널 해지십시오. 스스로에게 말입니다. 웹접근성이라고 하는 것은 일단 다른 이점도 많지만, 시각장애우분들의 권리를 지켜준다는 점에서 소중한 작업입니다. 시각장애우분들이 웹에 투자하는 시간은 일반인들의 상상을 뛰어넘습니다. 이제야 그 분들께서 웹사이트를 편안하게 이용할 수 있는 분위기가 조성되어 가고 있습니다.

헌데, 여러분들께서 눈가리고 아웅하는 방식으로 땜질해버린 웹사이트는 여전히 그 분들이 이용하는데 불편함이 많이 생깁니다. 앞을 못 보는 그분들에게 희망과 꿈과 편리함을 준다는 사명감으로 임하셔야 합니다. 엉망으로 만들어진 사이트는 후에 반드시 대가를 치르게 될 것 입니다.

웹접근성이나 웹표준이 생각만큼 쉽지 않습니다. 이렇게 글을 쓰는 저도 많이 배우고 있는 단계입니다. 사업을 시작하는 분들도 부디 생각을 잘 하시고 일을 시작하셨으면 좋겠습니다.
웹표준과 웹접근성에 대한 관심과 중요도가 날로 증대되고 있습니다. 더불어 곧 장애인차별금지법이 발효되면, 일정 규모 이상의 모든 웹사이트들은 웹접근성을 반드시 준수해야 됩니다. 웹접근성과 웹표준에 부합하는지 검사하는 도구들 몇 가지를 소개해드리겠습니다.

웹접근성 평가 소프트웨어 - KADO-WAH

사용자 삽입 이미지

한국정보화진흥원에서 배포하고 있는 도구입니다. 웹접근성 평가 마법사를 이용하시면 간단하게 웹사이트의 URL을 입력하는 것만으로 사이트의 웹접근성 준수율을 자동으로 체크하여 보고서로 만들어 줍니다.

KADO-WAH 2.0 다운로드
KADO-WAH 2.0 Patch 다운로드

WAVE

사용자 삽입 이미지

KADO-WAH와 더불어 웹접근성 평가를 할 때 가장 많이 사용하는 서비스 중 하나 입니다. KADO-WAH가 보고서 형식으로 접근성 평가 항목을 만들어서 보여준다면, WAVE는 화면 레이아웃에 잘못된 부분과 사용된 엘리먼트들을 그대로 나열해서 보여줍니다. 접근성 평가항목은 KADO-WAH보다 개수가 적습니다. 평가할 사이트의 URL을 입력하시거나 파일을 업로드 하시면 됩니다.

WAVE 서비스 바로가기

W3C HTML & CSS Validator

사용자 삽입 이미지

너무나 유명한 W3C의 밸리데이터 입니다. HTML(XHTML)과 CSS가 문법에 맞게 잘 작성되었는지 체크할 수 있습니다. 검사할 사이트의 URL을 입력하거나, 파일을 업로드하면 검사가 됩니다. 또한 코드의 일부분만 떼어서 바로 테스트 할 수 있구요.

CSS Validator 바로가기
HTML Validator 바로가기

그리고 파이어버그의 확장 도구인 Web developer 최신버전을 설치하시면  아래의 화면에서 보시는 것 처럼 W3C사이트를 접속하지 않고도 바로바로 HTML과 CSS, 그리고 스크립트의 표준준수 여부를 확인할 수 있습니다.

사용자 삽입 이미지

올해 6월 초까지 앱스토어에 등록된 아이폰 어플리케이션의 숫자는 5만개를 넘었다. AppVee의 파운더 알렉스아런드는 이 5만개의 어플리케이션 중에서 베스트 35개의 어플리케이션을 엄선하여 테크크런치에 소개하였다.

Zenonia $5.99 다운로드
게임빌에서 만든 게임이다. 우리나라에서 만든 앱이 랭킹에 올라와 있어서 반가운 마음에 가장 먼저 소개. 장르는 2D 액션 RPG. 프로들이 만든 앱이라 그런지 완성도가 굉장히 높다. 게임을 해 본 사람들은 재밌다는 평이고, 외국에서는 매니아들도 많은 것 같다.


Flight Tracker $9.99 다운로드
실시간 비행정보를 제공해주는 애플리케이션이다. 항공기 이용이 잦은 분들께는 좋은 어플리케이션인 것 같다. 출입국 시간, 현재 항공기 위치, 항공기 정보 등을 알 수 있다. 단점이라면 미국 중심의 정보만 제공된다는 점이다.


Photogene $2.99 다운로드
사진 편집 어플리케이션이다. 크롭, 회전, 색상조정, 필터 등 꽤 유용한 기능들을 제공한다.


Quick Office $19.99 다운로드
마이크로소프트사의 엑셀과 워드 문서를 간단하게 읽고 편집할 수 있는 어플리케이션.


Sims 3 $9.99 다운로드
말이 필요 없는 심즈. 환상의 그래픽과 놀라운 게임성으로 호평을 받고 있다.


이번에 선정한 어플리케이션들은 전체 기간을 대상으로 한 것들이 아니라, 올해에 런칭한 제품들을 기준으로 하였다고 한다. 그리고 올해 후반기의 app들은 아직 출시가 안된 것들도 많으니 현재까지 런칭된 제품들 기준 리스트라고 한다. 주관적인 의견으로 괜찮은 어플리케이션 위주로 포스팅을 했다. 엄선된 나머지 35개의 어플리케이션 정보를 보시려면 이쪽으로(링크)
국내 언론사들 트위터 이용한 기사 전파에 속속 나서
미국발 트위터 열풍이 뜨겁습니다. 일부 언론에서는 트위터 폭풍이라고까지 부르고 있습니다. 그 열풍은 일부 Geek 유저분들로부터 시작해서 블로거, 그리고 인기인들을 넘어서 어느새 국내 언론사들과 정치인들도 적극적으로 이용하는 툴로 세력을 넓혀가고 있습니다.

어느새 셀레브리티의 가입이 하나 둘 이루어 지더니 지금은 많은 기업과 유명 정치가, 그리고 국내 언론사들이 트위터를 통해서 대중과 소통하고 있습니다. 이런 현상은 2년이 걸린것도 아니고 1년이 걸린 것도 아니고 불과 2~3달 사이에 일어난 것 입니다.

사용자 삽입 이미지

SBS홈페이지 하단에 노출되고 있는 트위터배너 (출처:SBS홈페이지)

SBS는 자사 홈페이지 기사 하단에 아예 트위터의 배너를 걸어놓고 트위터를 홍보하고 있습니다. SBS의 트위터에는 기사와 방송에서 볼 수 없는 기자분들의 시시콜콜한 이야기도 올라오고 있어 신선함을 더해주고 있습니다.

사용자 삽입 이미지

중앙일보도 자사의 트위터를 적극적으로 홍보하고 있다 (출처:조인스닷컴)

중앙일보 웹사이트 입니다. 우측에 트위터 배너가 보입니다. 반가운 마음에 트위터 배너를 클릭해보았습니다.

사용자 삽입 이미지

중앙일보는 기사 카테고리 별로 트위팅 뉴스를 제공하고 있다 (출처:조인스닷컴)

배너를 클릭해보니, 중앙일보는 아예 독자적인 트위터 안내 페이지를 따로 구비해두고 있었습니다. 기사의 카테고리 별로 나누어서 트위팅 뉴스를 제공하고 있는 모습이 신선했습니다.

이벤트도 마케팅도 제휴도 필요없다
트위터는 국내에 진출도 하지 않았을 뿐 아니라, 따로 홍보에 심혈을 기울이거나 이벤트 같은 것도 진행한 적이 없습니다. 그럼에도 불구하고 단기간에 유저가 유입되고, 제휴없이 알아서 언론사들이 트위터를 사용하고 있습니다. 웹서비스가 나가야 할 모범적인 모델이라고 생각합니다. 이벤트는 단기적으로 트래픽을 늘리기는 좋지만 장기적으로 충성도 있는 회원을 양산하기 어렵고, 제휴는 일일이 회사 찾아다니면서 PT하고 갑에게 굽실거리고 해야하기 때문입니다. 트위터는 서비스 자체의 매력만으로 많은 유저들을 확보하고 있고, 나아가 언론사들과 기업들이 마케팅 수단으로 이용하기 위해 적극적으로 트위터를 홍보해주는 재미있는 양상이 펼쳐지고 있는 모습입니다.

그러나, 이런식의 운영은 하나마나...
트위터의 매력은 뭐니뭐니해도 평범한 일반인과 셀레브리티의 1:1메시징이 가능하다는 점이 아닐까 싶습니다. 물론 소통은 거의 하기 힘들지만 헐리우드 스타들도 많은 사람들이 트위터를 직접 운영하기 때문에 그 사람들이 하는 농담조차 나에게 하는 것 같은 착각을 불러 일으키기 마련이죠. 또한 이 점을 기업들은 교묘하게 잘 이용하고 있기도 하고요. 그러나 다음과 같은 이용은 차라리 하지 않는편이 좋다고 생각합니다.

사용자 삽입 이미지

follower가 겨우 109명

소녀시대의 멤버가 직접 운영하는 트위터라고 가정한다면 팔로워의 숫자는 김연아 선수를 넘어서고도 남았을 것이라는 생각이 듭니다. 그러나 소녀시대 뉴스의 이 다분히 따분한 트위팅은 기획사에서 운영하는 느낌이 너무 강해서 사람들에게 관심조차 받지 못하고 있습니다. 이런식의 운영이라면 차라리 하지 않는 편이 좋겠지요. 기획사들은 운영 방향을 바꾸어서 연예인들이 집적 트위터를 하나씩 운영하게 하면 좋은 효과를 얻을 수 있으리라 생각됩니다.

아무튼, 별다른 마케팅도 없이, 홍보도 없이, 그리고 더군다나 제휴도 하지 않은 것 같은데 국내의 거물급 정치인들과 대기업들.. 그리고 유수의 언론사들이 트위터를 통해서 네티즌들과 적극적으로 소통하려는 모습을 보니 여러가지 기분이 교차하네요. 그들도 이러한 소통의 욕구가 있었다는 말인데, 그동안 웹서비스 만드는 우리는 이런 생각을 안하고 뭘 했을까요. 하하^^; 여튼 대한민국에 몰아치는 140자의 열풍이 대단한 것 같습니다.
해외에서 트위터 열풍이 거셉니다. 얼마전 김연아 선수의 트위팅으로 국내 언론들이 앞다투어 트위터를 국내에 소개했고, 일부 발빠른 정치인들과 기업들은 벌써 트위터를 통해서 네티즌들과 가감없이 소통하고 있습니다. 물론 일부 PR업체는 클라이언트를 트위터에 가입시켜서 트위터 마케팅을 하고 있기도 하고요.

트위터나 미투데이가 완벽한 소셜미디어라고 할 수는 없지만, 내 생각을 허공에 뿌리듯이 이야기 할 수 있고, 유명한 사람들과 1:1로 이야기하는 듯한(혹은 실제로 그렇게 이야기 할 수 있는) 착각을 주어 더욱 인기가 많은 것 같습니다. 이 서비스들은 이미 세상에 선보인지 2년 혹은 그 이상이 되었지만 국내에는 자리를 잡지 못하고 있는 상태였습니다.

사용자 삽입 이미지

트위터를 제외한 다양한 국내 서비스들이 싸이월드 이후 비어있는 SNS제왕의 자리를 차지하기 위해 구슬땀을 흘리고 있습니다

최근 짧은 기간 동안 'SNS'라는 단어가 사람들의 입에 많이 오르내리고, IT업계에서는 거의 '열풍'이라고 봐야할 정도로 관심이 뜨겁습니다. 그러나 이 열기가 무색할 정도로 싸이월드 이후에 성공한 SNS서비스가 나오지 않고 있습니다. 그러던 중에 해외에서 날아 온 트위터의 승전보는 국내 마이크로블로그 서비스는 물론이고 다양한 형태로 소셜서비스를 준비하고 있거나 운영해 나가고 있는 회사들에게 큰 용기가 되어주고 있습니다.

소셜네트워크의 매력은 역시 서비스를 사용하는 유저의 숫자가 많을때 빛을 발합니다. 그런 이유에서 국내에서도 각 SNS 서비스들은 유저를 늘리기 위해서 고군분투 했지만 좋은 결과를 낳지 못하고 있습니다.

스타와 유명인을 이용한 마케팅! 아하!
이미 미투데이가 NHN에 인수된다는 소문이 돌 당시부터 예상하신 분들이 많았습니다. 'NHN의 풍부한 자금력과 마케팅 능력으로 스타마케팅 몇 번만 가볍게 해주면 미투데이 키우는 건 금방이다'라고요. 이미 그 말이 현실이 된 것 같습니다. 최근 소녀시대의 대항 걸그룹으로 평가받는 2NE1을 이용한 마케팅을 진행하고 있습니다. 미투데이에 있어서는 확실히 이전에 없던 강력한 마케팅입니다. 올해 초, NHN의 모바일 비전이 담긴 발표자료를 본 적이 있는데, 미투데이는 NHN에서 끝까지 키울 태세인 것 같습니다. 그동안 모바일쪽 작업도 하고 이래저래 리뉴얼도 하고 기획도 많이 했으리라 생각이 됩니다. 그 동안 유저들이 떠나지 않도록 사소한 부분들 손봐주고 최저 인력으로 미투데이를 운영해 온 것 같습니다.

사용자 삽입 이미지

네이버, Mnet등 서비스 구석구석에 미투데이 홍보 배너가 붙어있습니다

사용자 삽입 이미지

미투데이, 트위터 UV (출처: 다음 디렉토리 검색)

인기 스타 등 셀레브리티를 이용한 마케팅은 확실히 SNS서비스에 적합한 마케팅이라고 생각합니다. 특히 미투데이나 트위터처럼 유명인과 내가 같은 시공에 위치해서 함께 이야기를 나누고 있다는 느낌을 주는 서비스에게는 아주 좋은 마케팅이라고 생각합니다. 어떤 경로로든 사람들을 가입만 많이 시켜놓으면 그 이후 일어나는 액션은 미투데이 하기 나름이니까요.

서비스 시범 후, 잠잠하던 트위터도 오바마의 트위터 사용으로 점점 유명해졌고, 과거 싸이월드도 지상파를 통해서 연예인들이 열심히 자신의 미니홈피와 도토리에 대해서 설명해 준 덕분에 점점 유명해 질 수 있게 되었습니다. 큰 회사의 경우는 연예인을 섭외하기도 쉽고, 자신들의 서비스를 이용중인 연예인들을 온라인상에서 홍보하기도 쉽겠지만 작은 회사라고 방법이 없는 것은 아닙니다^^

위의 그래프를 보시면, 트위터의 UV는 김연아 열풍으로 2주간 급상승하다가 상승세가 많이 꺾였습니다. 그러나, 유력한 정치인, 다양한 대기업들이 재빠르게 트위터에 가입하고 트위터를 이용한 마케팅을 시작하면서 다시 상승세를 회복하고 있는 모습입니다.

아직 싸이월드에 비하면 도토리 키재기를 하고 있는 형상이지만, 지금 치열하게 싸우고 있는 SNS서비스들이 좋은 성과를 낼 수 있다고 믿습니다. 이제는 성장세가 많이 꺾인 싸이월드의 빈자리를 과연 어떤 서비스가 차지하게 될 지 매우 궁금하고 기대가 됩니다. 모쪼록, 세상에 가치가 있고 좋은 서비스가 그 자리를 차지하게 되기를 기원합니다.

한 줄로 즐기는 국내 소셜네트워크 서비스들
미투데이, 헬리젯, 플레이톡, 톡픽