웹 디자인에 대한 훌륭한 리퍼런스인 Smashing Magazine에 등록된 (X)HTML/CSS Coding-Services라는 글에서 해외의 웹 페이지 코딩 서비스의 비용이 공개됐습니다. 최근 웹 접근성과 표준에 관심이 높아지면서 PSD => (X)HTML/CSS 코딩 서비스라는 새로운 비즈니스 영역이 조성됐죠. 이러한 현상은 해외 뿐만 아니라 국내에서도 볼 수 있으며, 최근 몇몇 업체가 신규 사업을 진행하고 있습니다.

Smashing Magazine에 의하면, 1페이지를 코딩하는데 미화 150~250$입니다. 한화로 환산하면 약 15만원에서 25만원 사이인데, 이 금액의 차이는 제작 일정과 관련이 높습니다. 1페이지를 기준 3일 동안 제작하면 150$이고, 1일 동안 제작하면 250$ 정도입니다. 또한 2페이지 이상을 코딩하면 페이지당 50~100$가 추가됩니다. 즉, 10페이지의 코딩을 요청하면 150~200 + 50~100×9 = 600~1100$로 최소 60만원에서 110만원을 지불해야 합니다. 만약 100페이지 이상을 코딩해야 한다면… 사람 대신 CMS를 구입하는 게 바람직하겠죠.

물론 국내와 미국이나 유럽의 임금수준을 단순 비교할 순 없습니다. GDP나 임금수준을 떠나, 서양에선 사람의 손을 많이 사용하는 일의 임금이 높습니다. 미용실도 그렇고, 웹디자인도 그렇고, 개발도 마찬가지다. 그렇기에 국내의 많은 IT 종사자들이 해외로 떠나는 꿈을 그리곤 하죠. 그러나, 우리나라의 현실은 어떤가요? 포크레인으로 1시간이면 파낼 흙을 100명의 병사를 동원하는 헝그리&군인 정신으로 무장한 나라입니다. 1 페이지에 5만원은 커녕 1만원 받지 못하고 코딩하는 사람들이 대다수죠. 그러니.. 국내 수 많은 웹 페이지들이 copy&paste를 벗어날 수 없답니다.

사람 속에서 희망을 찾는 사회가 됐으면 좋겠습니다.

구글 코리아의 첫 화면이 변경됐다. 기존에는 로고에만 1개의 이미지를 제공할 정도의 텍스트 기반 페이지였는데(현재 google.com처럼), 이번에 여러가지 아기자기한 아이콘이 추가됐다. 특히 검색 영역 아래쪽에 위치한 구글 서비스로 바로 갈 수 있는 링크들을 제공하는 점이 눈에 뛴다.

내 경우에는 구글을 검색 뿐만 아니라, GMail, Gtalk, Gcalendar, Gnote, Gdesktop, Ggroup 등 다양한 서비스 등을 이용하고 있기에 Google My Account를 시작 페이지로 구정해서 사용해오고 있었다. 하지만, 이번에 구글 코리아의 첫 화면이 변경됐기에, 시작 페이지 주소를 변경해야겠다.

추가된 바로가기 링크에 마우스를 오버할 때, 아이콘이 변경되는 것을 확인할 수 있다. 플래시를 이용하면 쉽고 빠르게 표현할 수 있는 기법이지만, CSS와 JavaScript만으로 플래시 못지 않게 부드럽게 표현한 점이 놀랍다. 플래시가 설치되지 않은 브라우저, 또는 플래시를 사용할 수 없는 텍스트 브라우저에서도 해당 텍스트와 링크를 이용할 수 있도록 배려한 점이 맘에 든다.

구글 코리아의 서비스 바로가기 아이콘에 사용된 이미지 1개

1개의 배경이미지만으로 마우스가 오버될 때, Javascript로 CSS의 위치지정(position)을 바꿔주는 방법을 사용하여 부드러운 온오프 효과를 보여주고 있다. 정지된 GIF 이미지와 CSS + Javascript로도 플래시의 모션 그래픽 못지 않게 부드러운 효과를 나타낼 수 있는 것을 보여준 좋은 사례로 꼽을 수 있다. 다만, 키보드로 이동할 때를 고려하지 않은 점이 아쉽다. ㅎㅎ

이번 구글 코리아의 첫 화면 개편은 국내 웹 디자이너에게 많은 자기개발과 고민을 할 수 있는 동기를 부여했다. 시각 장애인과 같은 사람은 물론이고, 검색엔진과 같은 기계에게도 접근성 높은 사이트를 디자인하는 것이 결코 1990년대식의 초라한 웹 디자인으로 돌아가지 않아도 된다는 것을 보여줬기 때문이다.

CSS와 Javascript를 이용한 다양한 네비게이션 효과 몇개

• CSS Dock Menu (Jquery + CSS)
• Mini Slide Navigation
• Faster Page Loads With Image Concatenation (구글 코리아에서 사용하는 방법)

꼬릿말1) 많은 사람들이 구글 코리아 첫 화면에 많은 이미지를 사용했다고 하는데, 시각적으로만 그럴뿐이며 실제는 3개만 사용됐다. “구글 로고, 검색 아이콘 세트, 서비스 아이콘 세트” 이렇게 3개의 이미지를 CSS의 배경 위치 변경 기법을 이용하여 여러개 처럼 보이게 한 것이다.

꼬릿말2) 사용자들은 방문한 웹 사이트가 어떻게 만들어졌는지 전혀 고민하지 않는다. 하지만 웹 개발자와 디자이너는 수많은 고민과 노력을 통해서 보다 나은 웹 사이트를 만들어가고 있다. 로딩 속도를 0.00001초라도 빠르게 하기 위해서, 시각 장애인도 접근하고 이용할 수 있도록 하기 위해서, 최고의 웹 사이트를 만들기 위해서 노력하는 그들이 진정한 챔피언이다.

Read & Write Web의 English language only 39% of all blogs라는 글에 있는 Tacnorati의 통계표를 통해서, 국내 웹(블로그 공간)이 얼마나 폐쇄적인지 알 수 있다.

영어를 사용하는 블로거가 고작 39%라는 Tacnorati의 통계표를 구석구석 확인해봐도 한국어(korean)는 찾을 수 없다. 국내 네이버, 다음, 싸이월드, 파란, 이글루스, 테터툴, 워드프레스 블로그 사용자들은 모두 어디로 사라진 것일까?

이러한 현실을 담담하게 받아들여야 하나? 아니면 문제제기와 함께 대안을 찾아야 하나? 그냥 모른 척 넘어가야 하나?

CSS 기반 디자인된 사이트들을의 정보를 제공해주는 CssValut를 오랫만에 찾았다.

마침 워드프레스의 기본 테마에 스타일만 RED계열로 바꾼 듯한 Aurum3이란 사이트가 있기에 가봤더니, 이럴수가.. 영화 달콤한 인생의 한 장면이 메인 이미지로 걸려있었다.

이 녀석들이 아직 한국의 저작권법의 무서움을 모르나 보다. 심지어 카페에 사진 1장 잘못 올려서 1000만원의 저작권료를 지불하게 될 처지에 놓인 40대 가정주부가 사는 곳이 한국이다. 보아하니 영화 리뷰 사이트를 운영하는 것 같은데, 이런식으로 하다가 큰코 다칠 수 있다고 경고성 이멜이나 보낼까 보다. ㅎㅎㅎ

한국 영화가 이렇게 해외 사이트의 메인 이미지로 걸려 있으니 기분이 좋아서 괜시리 딴지성 글을 써 본다. 기왕이면, 한글로 달콤한 인생 정도는 써줘도 되지 않은가?!

어쨓거나 녀석들이 운영하는 영화 관련 사이트의 디자인은 정말 맘에 든다. 사이드바에서 부제목(서브메뉴) 부분의 별과 날개를 합쳐놓은 이미지 하나만으로도 이 사이트의 목적을 충분히 설명해 주는 것 같다. 이런 게 바로 고수의 디자인일 듯 싶다.

오랫만에 CSS ZEN GARDEN에 갔더니 새로운 디자인이 몇개 업데이트됐다.

그 중에서 특히 Table Layout Assassination!이 눈을 사로잡았다. CSS ZEN GARDEN의 첫 디자인 역시 일본풍이 심히 느껴졌었는데, 이 디자인은 더욱 심했다.

일장기와 닌자, 일본성 그리고, 하단의 후지산… 디자인 측면에선 99점을 줘도 부족할만한 뛰어난 작품이긴 하지만, 그럴수록 더욱 기분이 나뻐진다.

Kill Bill이나 많은 헐리우드 영화가 그렇듯 서양에선 일본적인 것이 동양적인 것을 대표하는 것처럼 표현한다. 최근 삼성과 LG에서 LCD, PDP, 핸드폰 등 전자제품을 통하여 세계 속의 한국의 이미지가 나아진 건 사실이다. 하지만, CNN이나 TIME지, 헐리우드 영화에서 한국의 이미지는 무척 비하되어 보여진다.

방금 전 찜찜한 기분에 일본 역사 교과서 관련 글을 썼는데, 이런 일본풍 디자인을 보니 기분이 찹찹하다. 사실 기분이 나쁜 이유가 CSS ZEN GARDEN의 디자인 중에서 한국인 디자이너가 만든 것이 하나도 없기 때문인지도 모른다.