쏭군은 열정 드리머

너 방금 피자 시켜먹었지? - 블리피

(쏭군) — Fri, 05 Feb 2010 16:59:56 +0900

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

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

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

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

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

블리피는 최근까지 총 160만 달러를 펀딩 받았습니다. 이 중 올해 1월 14일 트위터의 창업자인 에반윌리엄스의 돈도 있습니다. 트위터와 블리피가 결합한다면 트위터는 플랫폼으로서 한단계 더 도약할 수 있지 않을까 생각됩니다. 구글도, 트위터도 그리고 애플도. 플랫폼 지향적인 그들의 큰 스케일에 자주 놀랍니다.

[HTML5] 네비게이션 nav 태그

(쏭군) — Mon, 01 Feb 2010 18:42:37 +0900

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

2010 웹디자인 트렌드

(쏭군) — Fri, 22 Jan 2010 06:55:12 +0900

Web deisnger wall 과 WDL 에 재미있는 글이 올라왔네요. 2010년 한해 유행할 웹디자인 트렌드를 예측한 글입니다. 재미있는 내용들이 많네요. 디자인이나 퍼블리싱 하시는 분들께는 어찌보면 배울게 많은 한해가 되겠고, 어찌보면 재미있는 일들이 많은 한해가 될 것 같습니다. 두 사이트에 올라와있는 내용을 정리해 보았습니다. 큰 트렌드와 제 생각을 중심으로 적어보았습니다.

1. 세리프 폰트의 적극적인 사용
글자의 끝부분이 낚시바늘처럼 꺽이거나 가늘어지거나 기타 등등의 효과가 적용된 세리프 폰트는 잘 사용하면 세련된 느낌을 줄 수 있습니다. 단, 세리프 폰트는 인쇄물에서는 크기가 아무리 작아도 잘 보이지만 모니터 상에서는 컨텐츠 제공용으로 깨알같이 작은 폰트는 잘 사용하지 않는것이 관례였습니다. 올해 디자이너분들께서 세리프 폰트를 어떻게 활용할지 무척 기대가 됩니다.

2. 다양한 커스텀 폰트의 사용
CSS3에는 방문자에게 없는 폰트를 강제로 제공하는 방법이 있습니다(@font-face). 아마도 국내에서는 굴림, 돋움을 벗어나 텍스트의 폰트를 자유자재로 제공할 수 있다면 디자이너 분들은 더 없이 행복할 것 같습니다. 해외에서는 TypeKit 이라는 사이트에서 무료로 다양한 폰트를 제공하나 봅니다. 궁금하시면 한 번쯤 들러보세요~

3. 텍스쳐가 들어간 배경이미지
단색이나 단순한 그라데이션 대신 질감을 사용한 웹페이지 배경이 대세를 이룰 것이란 전망입니다. 백그라운드 트렌드 관련글

4. 단순하게, 그리고 그리드를 맞춰서 깔끔하게(여백과 그리드의 활용)
원 글쓴이 말마따나 심플하고 그리드가 딱딱 맞는 웹페이지는 새롭지는 않습니다. 다만 2010년 한해에도 이런 경향의 웹디자인 열풍은 계속 될 것 같습니다. 관련 추천 사이트 더보기

5. CSS3의 활용
브라우저들의 지원 정도에 따라 CSS3의 활용이 가장 두드러지는 한해가 될 것 같습니다. CSS3의 강력한 추가 기능들이 있지만, Web designer wall에서는 웹페이지를 제작하는데 가장 많은 도움을 주는 기능들 위주로 소개를 한 것 같습니다.

CSS 애니메이션
웹킷이 지원되는 환경이라면 이 블로그 우측 상단의 배경 화면이 빙글빙글 돌고 있는 것을 보실 수 있습니다. 맥용 사파리나 파폭에서도 적용됩니다.

둥근 모서리
UI개발자 분들과 디자이너분들 사이에 다툼이 가장 잦은 부분이 조만간 해결될 것 같습니다. 박스 모델 모서리에 둥근 효과를 주거나, 그림자 효과를 주기 위해서 필요없는 마크업과 스크립트가 많이 들어갑니다. 둥근 모서리를 CSS에서 컨트롤 하거나 만들어 낼 수 있다면 불필요한 마크업과 스크립트가 많이 사라질 것 같습니다. 게다가 디자이너분들과 UI개발자분들의 다툼도 많이 사라지겠죠.

요소 그림자 효과
요소의 그림자 효과도 CSS에서 컨트롤을 할 수 있게 된다면 역시 불필요한 마크업과 스크립트가 많이 사라지게 될 것으로 기대됩니다.

6. 반투명 활용
RGBA 를 사용하면 백그라운드 컬러가 들어가는 요소의 투명도를 쉽게 조절할 수 있습니다. 일반적인 마크업 구성요소의 opacity(IE계열에서는 alpha)를 조절하여 반투명 효과를 사용하면 깔끔한 페이지를 만들 수 있을 것 입니다.

7. 모바일 페이지는 기본으로 제공
국내에서는 좀 늦었지만, 아이폰 열풍을 기점으로 모바일용 웹페이지가 기본적으로 제공되어야 할 것 같습니다. 모바일용 웹페이지라고 해서 다른 별게 있는 건 아닙니다. 실제 Base데이터는 웹에 있고 단지 CSS와 자바스크립트, 그리고 약간의 디자인만 변경을 해서 페이지를 제공하면 될 것 같습니다. 모바일이라고 해서 따로 서비스가 분리 되는게 아니라 뷰만 바뀐다고 생각하시면 되겠습니다. 크로스브라우징이 된다면 아이폰 뿐 아니라 다른 모바일 기기에서도 서비스를 제공할 수 있을 것 입니다.

8. 커다란 로고와 헤드라인
커다란 로고나 헤드라인으로 무장한 사이트를 올해는 더 많이 보게 될 것 입니다. 디자인에 신경을 많이 쓰는 사이트나 개인 블로그등에서 많이 사용할 것 같습니다.

9. 스케치 이미지와 손으로 그린 이미지
우리나라에서도 예전부터 기업사이트 등에 많이 쓰이던 방식입니다.

10. 통 페이지 레이아웃
다른 페이지로 이동하지 않고도 한 페이지내에서 웹사이트를 이용할 수 있는 디자인이 유행할 것이라는군요. 이를테면 우리가 사용하는 블로그나, 트위터 같은 사이트들은 딱 하나의 디자인만 만들어도 서비스를 제공할 수 있는 수준까지 되는데 이런 형태의 사이트와 디자인을 말하는 것 같습니다.

11. 모달창, 모달레이어(Modal Box)
모달 레이어는 이미 많은 사이트에서 볼 수 있습니다. 이 레이아웃의 디자인은 쉽고 깔끔하게 만들 수 있지만 접근성이나 유저빌리티에는 도움이 될런지는 의문입니다. 앞서 설명드린 10번의 통페이지 레이아웃과 매칭하여 만들면 좋을 것 같습니다.

이외에도 두껍고 반듯한 텍스트의 사용, 거대한 푸터, 언제나 그렇듯 복고풍의 디자인, 페이지 상단의 거대한 인트로 박스, 잡지 형태의 레이아웃, 적극적이고 다양한 이미지의 사용, 등이 주요 항목이였습니다.

이 중, 올해 화두는 단연 HTML5와 CSS3가 아닌가 싶습니다. 특히 새로운 브라우저들이 속속 CSS3를 지원하기 시작한다면 다양한 디자인 테크닉으로 무장한 웹페이지들을 만날 수 있는 한해가 될 것 같습니다. 해외의 트렌드 예측이지만 우리나라도 이와 비슷한 트렌드를 경험할 것 같습니다. 그리고 벌써 HTML5로 만든 플레이어 들이 등장하는군요. 후덜덜; 빛과 같은 속도입니다.

표절로 떡칠한 다음의 '요즘(yozm)'

(쏭군) — Wed, 20 Jan 2010 19:16:48 +0900

절반은 트위터 + 절반은 헬리젯 프로필 위젯
포털 기획자들의 창의력이 겨우 남의 서비스 베껴서 떡칠하는 수준?
안녕하세요. 헬리젯의 프로필 위젯 기획자 쏭군입니다. 다음에서 베타 테스트 중인 '요즘 '이라는 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만 훔쳐와서 기획서라고 만들었더군요. 차라리 화면 캡쳐를 하지 뭐하려고 기획서를 만드는지 이해가 가지 않았습니다. 적어도 자신이 '기획자'라고 불리는 사람이라면 벤치마킹도 상식선에서 행하여야 되지 않을까요?

돈만 노리는 앱스토어 사냥꾼들

(쏭군) — Thu, 14 Jan 2010 08:23:42 +0900

애플 앱스토어 오픈 초기부터 제기되어 왔던 문제들이 최근에 서서히 문제가 되고 있나봅니다. 앱스토어에 쓰레기 앱(사실은 앱을 가장한 껍데기)을 올려서 시험삼아 $0.99에 앱들을 파는 사람들이 이용자들의 원성을 사고 있다 합니다. 돈만 노리고 이런 행동을 하는 사람들이 있는가하면 애플리케이션 개발을 배우는 사람들이 시험삼아서 올리는 경우도 적지 않다고 합니다.

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

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

가장 좋은것은 앱 개발자분들께서 스스로 이런 현상을 자정하려는 노력이 필요할 것 같습니다. 그렇지 않으면 일부 미꾸라지 같은 사람들에 의해서 '소탐대실' 하는 결과를 가져 올지도 모르니까요. 앱스토어와 같은 플랫폼은 모두가 지켜야 할 훌륭한 자원입니다.

접근성을 위한 섹션 바로가기 만들기(a 태그 북마크 기능 활용하여 접근성 높이기)

(쏭군) — Tue, 29 Dec 2009 21:29:24 +0900

원하는 섹션으로 가려면 페이지를 다 읽어야 하나요? 시간이 너무 아까워요..
웹표준과 웹접근성을 잘 지원하여 만든 사이트가 있습니다. 만약 그 사이트를 스크린리더기로 읽는다면 아래 그림과 같은 순서로 읽어 나갈 것 입니다. 사이트 이미지는 다음을 예로 들었습니다. 마크업 순서는 헤더, LNB, 컨텐츠 영역, RNB, 푸터 순이라고 가정했습니다.

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

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

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

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

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

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

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

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

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

메인페이지의 각 섹션으로 바로 이동할 수 있는 기능을 제공합니다. 이 기능을 제공함으로서 사이트를 이용하는 시각장애인(스크린리더 이용자)들은 웹페이지 전체를 일일이 읽으면서 시간낭비를 할 필요가 없어졌습니다. 바로바로 원하는 섹션으로 이동할 수 있게 되었기 때문이죠. 각 섹션으로 이동시키는 방법은 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)에서도 스크린리더를 이용하는 유저를 위한 배려가 잘 되어 있습니다.

접근성 향상을 위한 다양한 노력들이 웹을 조금 더 평등하고 편리한 곳으로 만들어 나갑니다.

웹표준 책이 나왔어요~ 스타일링 CSS(Stylin' with CSS )

(쏭군) — Tue, 22 Dec 2009 16:35:14 +0900

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

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

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

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

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

- 부족한 역자 쏭군 올림

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

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

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

끝으로, 번역 작업 때문에 새벽 늦게 까지 잠도 못잤던 사람. 위장병까지 얻은 저희 와이프 유미에게 진심으로 고맙다는 말씀을 전합니다. 유미야 수고했어. 사랑해요!

스캐닝 검색의 시대 - 구글 고글, 인투모스 쿠루쿠루

(쏭군) — Tue, 15 Dec 2009 14:57:57 +0900

검색의 영역이 넓어지고 있습니다. 공교롭게도 모바일 확산과 새로운 검색 패러다임이 일직선상에 있습니다. 그리고 이것의 또 다른 연장선 '실시간 검색'은 웹3.0 패러다임의 중요한 요소 중 하나인 '실시간 웹'의 중요한 부분을 차지할 것으로 보입니다. 이 새로운 검색 영역은 이미 크고 작은 회사들로부터 치열한 전쟁이 시작되고 있습니다.

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

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

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

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

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

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

아이폰의 등장으로 모바일 네트워킹이 붐을 이룰 것이라고 많은 분들이 예상을 했는데, 소프트웨어 기술이 따라가는 속도도 어마어마 한 것 같습니다. 세상이 참으로 빨리 변하네요.

한글로 트위터하는 사람들 - 트위플(twitple)

(쏭군) — Mon, 14 Dec 2009 09:40:51 +0900

#self_intro 해쉬태그를 이용해서 트위터에 글을 쓰면 한국 트위터 자기 소개 페이지에 본인 소개가 올라갑니다. 이미 7,000여분 가까운 분이 이 해쉬태그를 이용해서 자기소개를 하셨습니다.

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

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

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

구글 실시간 검색 테스트 페이지

(쏭군) — Tue, 08 Dec 2009 09:29:33 +0900

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

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