2009년 12월 27일 일요일

2009/12-5주차 클리어보스 소식

2009년 12월 5주차 클리어보스 소식입니다.

제가 운영하는 두개의 사이트(이 블로그와 클리어보스)의 성격이 많이 닮아 있다 보니 콘텐츠를 배치하는 일이 쉽지 않았습니다. 그래서 앞으로는 강좌나 정보성 콘텐츠는 클리어보스에 올리고, 이 블로그를 통해서는 제 개인적인 생각이나 의견 정도를 담아 두는 곳으로 사용할 계획입니다. 하지만 그동안 제 블로그를 찾아 주셨던 분들을 위해 그리고 클리어보스와의 관계를 위해서 틈틈이 클리어보스에 등록된 새로운 콘텐츠를 리스트 업 해 드리도록 하겠습니다.

클리어보스 소식지로는 첫 포스팅이기 때문에 최근에 등록된 콘텐츠들을 모두 적겠습니다.

편리한 웹 접근성 검사 도구 PAJET - 신현석, 홍윤표님이 제작하시고 배포중인 PAJET 도구에 대한 간단한 가이드입니다. (주의:접근성 자동 평가 도구는 아닙니다. 사용자의 수동 평가를 도와주는 도구입니다.)
CODA에서 Less 사용하기 - CSS를 프로그래밍 방식(변수를 정의하고, 함수를 다루듯)으로 작성할 수 있게 도와주는 Less를 CODA와 연동하는 방법입니다.
웹기반 에디터 분석 - CKEditor, DAUM OpenEditor, Naver Smart Editor 등 웹 기반의 에디터 분석 자료입니다.
웹퍼블리셔 평균 연봉 (설문 진행중) - 2009년 웹 퍼블리셔들의 평균 연봉을 조사하고 있습니다. 연말까지 설문을 받은 뒤 1월초에 별도로 포스팅할 예정입니다.
어떤 사람들이 웹퍼블리셔가 될까? (설문 진행중) - 웹기획자, 디자이너, 개발자 등 어떤 분야의 사람들이 주로 웹퍼블리셔로 전직하는지에 대한 설문조사입니다.
IE6 커닝 페이저: IE6 버그+ 해결하는 방법 - IE6의 여러가지 문제들을 해결하기 위한 종합 안내서와 같은 글입니다. 번역된 콘텐츠입니다.

짤막한 2009년 후기.

2009년의 마지막 달도 이제 나흘 정도 남았습니다. 크리스마스였던 25일부터는 눈도 제법 내려서 서울이라는 거대한 도시가 숨어버린듯 새하얗게 변하기도 했구요. 가슴속을 파고드는 차가움이 무척이나 생기롭게 느껴졌습니다. 한편으로는 부지런하지 못했던 제 자신을 들킨것마냥 부끄럽기도 했구요.

2009년은 제게 참 많은 일들이 있었습니다. 클리어보스라는 웹표준 모임의 활동도 그 어느때보다 활발했구요. 2월과 9월에 웹퍼블리셔 오리엔테이션이라는 작은 세미나를 개최했고, 세번째 웹표준의날과 CSS Nite in Seoul, Vol.1 행사의 자원봉사와 기획, 운영을 맡기도 했구요. 개인적으로도 여러 세미나에서 발표를 해 보면서 스스로 더 커질 수 있는 기회도 있었습니다. 그 가운데에서도 아내를 맞은 결혼식이 가장 기억에 남구요. 최근에는 회사가 어려워서 휴직을 하게 된 일과 프리랜서로 집에만 있게 된 사연들... 이 기억에 나네요. 정말 많은 일들을 했고, 바빴고, 힘겨웠던 시간들이었던 것 같습니다. 그런데 참 이상한건 그 이전에 비해 무척 담담해지고, 걱정이랄게 없어졌습니다. 아무래도 제 곁에 저를 든든하게 지켜주고, 힘들 때 위로해줄 사람이 생겼기 때문이 아닐까 싶습니다. 그래서 2010년이 그렇게 두렵지 않습니다.

2010년에는 제 나이도 어느덧 서른이 되구요. 한 가정의 아버지가 되기도 합니다. 새로운 마음가짐으로 일을 하게 될 것이구요. 개인적으로 꿈 꾸던 일 하나를 매듭지을 수 있을것도 같구요. 그래서 그런가요. 어서 2010년이 되었으면 하는 생각도 드네요.

2009년 12월 22일 화요일

'장애인 웹 사용 실태 조사' 참여해 주세요

웹 접근성 스터디 모임(신현석, 정찬명, 조현진, 현준호, 홍윤표)에서 장애인이 실제로 느끼고, 실제로 사용하는 문제점 등을 파악하여 장애인이 보다 웹을 자유롭게 쓸 수 있는 기초자료로 활용하기 위해 실태조사를 실시한다고 합니다.

이번 실태조사는 장애인만을 대상으로 하는 것으로 비장애인은 설문에 참여하지 않습니다. 주변에 장애인 분이 계시다면 참여를 부탁드려 주세요.

다음은 실태조사 설문지 내용

장애인 웹 사용 실태조사

안녕하십니까?

저희는 웹 접근성 개선에 조금이나마 도움이 되고자 공부를 하는 사람들의 모임입니다.

저희 모임의 참석자들은 "장애인차별금지 및 권리구제 등에 관한 법률" 제정으로, 앞으로 우리나라에서 장애인이 더 이상 장애로 인한 차별을 받지 않는 세상이 되기를 진정으로 바라고 있습니다.

많은 분들이 알고 계시는 것처럼 인터넷은 쇼핑, 정보습득, 은행업무, 정부 민원, 커뮤니티 등 이제 생활의 필수 수단으로 등장하고 있습니다. 이에 우리나라에서도 장애인의 인터넷 이용 개선을 위해 웹 접근성 제고를 위한 표준화, 교육 등 다양한 사업들이 진행 중에 있습니다.

하지만, 장애인이 직접 인터넷을 활용하는 방법에 대해 풍부한 통계가 없어, 저희 모임에서 의욕적으로 이를 진행해 보고자 합니다.

본 설문조사는 어떠한 공공이나 민간기업의 지원에 의해 실시한 것이 아니며, 웹 접근성을 고민하는 사람들이 웹 접근성 관련되는 통계를 만들어 보고자 하는 의도로 기획되었음을 알려 드립니다. 장애인의 실제로 느끼고 실제로 사용하는 문제점 등을 파악하여 보다 장애인이 웹을 자유롭게 쓸 수 있는 기초자료로 활용하고자 합니다.

본 설문조사의 취지를 이해해 주시고 장애인 여러분의 많은 참여 부탁드리며 보다 많은 장애인분들이 설문에 참여할 수 있도록 알려 주시면 감사하겠습니다.

본 설문조사는 장애인만이 해당됨으로 비장애인은 설문에 참여하지 마시기를 간곡히 부탁드립니다.

웹 접근성 스터디 모임 일동(신현석,정찬명, 조현진, 현준호, 홍윤표)  올림

2009년 11월

장애인 웹 사용 실태조사 참여하기

2009년 12월 21일 월요일

Firefox 3.5 세계에서 가장 인기 있는 웹브라우저 되다

StatCounter 통계에 의하면 현재 세계에서 가장 인기 있는 웹브라우저는 Firefox 3.5인 것으로 나타났습니다.

Firefox 3.5가 IE 6,7,8을 모두 제치고 1위로 올라섰다

물론 IE의 모든 버전을 합치면 여전히 두배가량의 격차를 가지고 있지만 IE6와 IE7이 상당히 점유율을 잃고 있고, IE8의 상승세가 그렇게 크지 않다는 점을 볼 때 Firefox 3.5가 가지는 '1위 등극'의 의미는 남다를 수 밖에 없을 것 같습니다.

버전과 관계없이 브라우저별 점유율에서는 IE가 여전히 선두다

하지만 이런 상황에서도 한국은 여전히 IE의 초강세를 벗어나지 못하고 있습니다. IE8의 점유율 향상이 그나마 다행스럽게 여겨지는 대목입니다. 그런데 Firefox 3.0과 3.5는 기대만큼 상승 분위기를 타지 못하고 슬며시 하향 곡선을 그리고 있는 것이 보이네요.

한국의 웹 브라우저 점유율. IE8의 상승률이 두드러진다.

위 그래프만 놓고서 2010년을 예측하는 것은 위험할 수 있지만 적어도 전세계적으로는 Firefox가 더 이상 IE6보다 점유율이 낮기 때문에 지원 브라우저에서 빠질 일은 없을 것 같습니다. 반대로 IE6에 대한 개발 리소스 등을 이유로 들어 지원을 중단하는(이미 몇 몇 기업들이 그런 움직임을 보이기도 했죠) 상황도 연출되리라 봅니다.

문제는 우리인데. 현실적으로 Firefox에게 큰 기대를 걸기는 어려울 것 같습니다. 하지만 웹표준을 비교적 잘 준수하고 있는 IE8의 상승폭이 작지 않다는 점. 그리고 올 하반기 아이폰의 정식 출시로 인해 2010년의 최대 화두 중 하나는 '스마트폰'일 것이며, 스마트폰으로 즐기는 인터넷이 큰 이슈가 될 것이라는 점입니다. 아이폰의 기본 브라우저는 사파리이며, 모바일 브라우저의 최대 강자는 '오페라'죠. 내년이 그렇게 암울할 것 만 같지 않은 까닭은 거기 있습니다. 2010년에 불여우가 조금 더 힘을 내 주기를 바라면서 2009년보다 더욱 더 아름다워질 대한민국 인터넷을 꿈 꿔 봅니다.

CSS 메타프레임워크를 사용하는가?

Less나 Sass와 같은 CSS 메타프레임워크를 사용하는가? 라는 흥미로운 투표가 진행중입니다. CSS 메타프레임워크는 CSS를 개발언어처럼 변수도 지정하고, 분기문이나 반복문을 작성하여 효율적(?)으로 작성 및 관리할 수 있도록 해 주는 프레임워크입니다. 처음 Sass를 접했을 때 그 방식에 충격도 받았고, 아주 획기적인 것이라고 생각했었는데요. 제 경우에는 그것을 익히는 것 자체가 부담이었고, 그것을 제대로 사용하려면 함께 작업하는 웹 퍼블리셔들 모두가 함께 배워야 제대로 써 먹을 수 있다는 것이었습니다. 그리고 그렇게 사용하더라도 CSS 코드를 있는 그대로 읽고 해석하는게 아니라 한 번 더 논리적인 판단과 고민을 거쳐야 하는 문제가 있었죠. 굉장한 것이기는 하지만 효용성 자체를 아직 느끼지 못한 것이었습니다.

PollDaddy.com에 올라온 이 투표는 저만 그런 생각을 가지고 있었던것은 아니라며 위로를 해 주는 것 같습니다. 아직 진행중이기는 하지만 368명이 투표에 참여를 하고 76%에 달하는 사람이 전혀 사용하지 않는다를 선택했습니다. 거의 사용하지 않는다라고 선택한 11%를 합치면 87%가 되는군요.

CSS 메타프레임워크를 사용하는가? 라는 투표가 진행중이다

2009년 12월 20일 일요일

2009년 웹 퍼블리셔 평균 연봉 조사, 참여해주세요.

지난해에 이어서 올해도 웹퍼블리셔 평균 연봉 조사를 해 보려고 합니다. 2008년은 경제 위기까지 겹쳐 비단 웹 퍼블리셔들 뿐 아니라 여러 직군들이 모두 힘들었던 한 해가 아니었나 싶습니다. 그래서 대다수의 기업들이 연봉 동결 내지는 삭감을 단행했던 해이기도 하구요.

또 한편으로는 공공기관의 웹접근성 사업으로 인해 웹 퍼블리셔들에 대한 수요가 많이 들었지만 부족한 인력 때문에 연봉 인상에 대한 기대치를 높였던 해이기도 했습니다. 그만큼 새로운 인력들이 비전을 갖고 도전하는 직업이 되어 가고 있기도 합니다. 하지만 우리들 스스로가 느끼기에 자신의 연봉은 항상 부족하고, 속상할 정도의 크기였지요.

올 한 해는 어느정도의 평균 연봉이 나타날지 궁금하기도 하고, 내년에는 얼마정도를 예상해 볼 수 있을지 한 번 조사해보려고 합니다. 많이 참여를 해 주실수록 통계에 대한 믿음도 커질 수 있지 않을까요.

현재까지 설문 결과

클리어보스 개편 소식

웹 표준을 알리는 사람들의 모임 Clearboth 공식 사이트에 변화를 주었습니다. 콘텐츠를 생산하던 위키와 게시판 운용을 위해 개설했던 포럼이 서로 다른 로그인 시스템을 갖고 있다보니 사용하기도 불편하고 해서 이번에 통합작업을 진행했구요. 함께 UI도 통일 시켰습니다.

아이폰과 같은 스마트폰에서 클리어보스에 접속하다 보니 우측으로 배치되어 있던 메뉴 영역 때문에 콘텐츠 영역이 상당히 작아져 보이는 문제도 있어 이번에는 상단에만 메뉴를 배치하는 레이아웃을 가져왔습니다.

새로운 클리어보스

스마트폰에서 손가락으로도 메뉴를 비교적 잘 클릭할 수 있도록 충분한 패딩을 주었구요. 메뉴명을 좀 더 크게 해서 보이게 하고 싶기는 했는데 그러다보니 너무 안 예쁘더군요. 일단 이정도로만-

그리고 일반적으로 사용자들은 위키라는 것을 어려워하고 생소해 합니다. 때문에 개편된 클리어보스에서는 '위키'라는 명칭을 최대한 감추어버렸습니다. 포럼과 위키가 하나의 웹 사이트처럼 보이도록 메뉴를 배치했습니다. 포럼은 내부에 여러개의 게시판(포럼)을 가지기 때문에 큰 메뉴로 '포럼'을 유지하였습니다. 하지만 여전히 실제로는 포럼을 제외한 나머지 페이지들은 '위키'로 제작되고 운영되는 것들이죠. 하지만 앞으로는 운영진만 위키 페이지를 조작하게 될 것 같습니다.

나름 2010년을 위한 리뉴얼 작업이었습니다. 일주일 정도의 작업 시간이 소요되었구요. 루트박스님이 여러가지로 많은 도움을 주셨습니다. 내년에는 보다 많은 콘텐츠를 채우고, 웹퍼블리셔 오리엔테이션과 함께 실무자들을 위한 기술 세미나도 새롭게 개최를 해 볼 작정입니다. CDK만큼 훌륭한 사이트로 만들고 싶네요.

2009년 12월 12일 토요일

웹개발자를 위한 스크린리더 이해 세미나 후기

오늘 오후 2시 '웹개발자를 위한 스크린리더의 이해 그리고 웹 접근성(이하 스크린리더 세미나)'이라는 제목으로 세미나가 있었습니다. 서울 삼성동에 위치한 잡코리아에서 두번째로 갖는 행사였구요. 백남중 선생님께서 긴 시간 강의를 해 주셨고, 장성민과 여러 자원봉사자 여러분들이 행사를 위해 준비를 해 주셨던 자리였습니다.

백남중 선생님

이번 스크린리더 세미나는 지난 1회 세미나와 거의 동일한 내용으로 진행되었지만 아무래도 한 번 진행을 해보셨던 부분이라 그런지 1회보다 더 깔끔하고 시연들이 많았던 것 같습니다. 그리고 여러가지 보조기기들을 전시하여 참석자들이 직접 눈으로 보고, 만져보는 등 '실감'할 수 있는 기회도 가졌습니다. 그리고 이번 2회 세미나에서는 뭐니 뭐니 해도 1회에 없던 '경품'이 생겨 나서 모두들 반가워 했는데요 백 선생님께서 직접 스크린리더 제품인 '센스리더' 2개를 경품으로 지원해 주신 것이었어요. 강의료를 드려도 모자를 판에 이렇게까지 해 주신데에는 한 분의 개발자라도 더 시각장애인분들을 위해서 올바른 웹을 만들어 주십사하는 진심 때문이셨을 것이라고 생각합니다. 오늘 '센스리더'를 받아 가신 두 분께서는 다른 분들보다 더 열심히 웹을 아름답게 만들어 주셔야 할 '사명감'이 있으신 겁니다. (^^ 아셨죠?)

이번 스크린리더 세미나의 아쉬움이었다면 조훈님의 웹접근성 세션 하나가 아쉽게 취소된 것이었지요. 오랜만에 아니 저 개인적으로는 처음으로 조훈님의 강의를 들어볼 수 있었던 기회이기도 했는데요 내년으로 미뤄야 했습니다.

질의 응답 시간

그리고 마지막 세션으로 말도 안되지만 저를 포함해 4분의 전문가(여기서 저는 절대 전문가일리 없다는 해명을 하면서)를 모시고 질의 응답 시간을 가졌습니다. 사전 설문지를 통해서 깔끔하게 작성된 질문지를 들고 답변을 드리는 시간이었구요. 오페라 소프트웨어의 신현석님과 요즘 웹표준 강의로 많이 바쁘신 조현진님, 기획자지만 개발 실력도 수준급이라는 나인환님, 그리고 부족하기 짝이 없는 제가 성의껏 답변을 드렸습니다. 여러 질문들이 있었고, 앞에 나와 있던 분들도 참 대답하기 어려운 질문들도 있었구요. (몇가지 질문에 대해서는 시간이 되는대로 제 블로그를 통해서 이야기를 풀어보고 싶기도 합니다.)

그렇게 예정된 종료 시간을 40여분 정도를 넘기고서야 공식적인 일정이 모두 마쳐졌는데요. 아마 지금 이 시각엔 송년회겸 마련된 뒤풀이가 한참일 것으로 생각됩니다. 행사를 준비하신 모든 분들과 백남중 선생님, 패널분들, 그리고 참석자 한 분 한 분이 모두 수고하셨던 하루였습니다.

질의응답 시간에 나왔던 마지막 질문 하나가 집으로 돌아오는 내내 제 머리속에서 지워지지 않고 남아 있습니다. 미래의 웹접근성은 어떻게 될 것인가?라는 것이었어요. 여러분은 한 달 후 2010년 1월과 조금 더 지난 미래, 더 먼 미래에 우리의 웹이 어떻게 변하게 될지 예상하실 수 있으신가요?

저는 솔직히 모르겠습니다. 근래들어 내가 알아본 웹표준과 웹접근성이라는 지식의 알갱이들이 과연 진실이었고, 실체를 가진 것들인지. 그것들이 하루 뒤에 한 달 뒤에 어떻게, 어떤 모습으로 어떤 의미로 다시 내 감각들을 자극할지를 말이죠.

현석님이 마지막으로 마이크를 잡으시고 이렇게 말씀하셨죠. HTML이 제대도 만들어져 있다면 미래가 지금보다 더 발전했건 못 했건 우리는 콘텐츠에 접근할 수 있을 것이라구요. 미래에 어떤 새로운 표준 명세서가 발표되고, 기술이 만들어지더라도 겁먹을 필요가 없다는 말씀이신것 같아요. 현재 우리가 할 수 있는 방법으로 가장 정직하게 웹을 만들어 놓는다면 그것이 바로 현실에 대한 최선이자 미래를 대비하는 최고의 방법일 수 있을 거라는 거죠.

2010년. 많은 것들이 변하고 그래서 또 힘들 시간이 될 것이라고 생각합니다. 하지만 저는 왠지 2008년에서 2009년으로 넘어가던 그 겨울보다는 올 겨울. 이 시간이 조금 더 편안합니다. 그리고 덜 걱정되구요. 올 한해 정말 많은 분들이 웹표준을 공부하셨고, 웹 접근성을 이해하셨잖아요. 그 한 분 한 분이 2010년에는 더 많은 분들을 이해시켜서 정말 아름다운 웹을 만드실테니까요.

2009년 12월 8일 화요일

웹개발자를 위한 스크린리더의 이해 그리고 웹 접근성

지난 9월에도 한 차례 가졌던 '웹 개발자를 위한 스크린리더의 이해' 세미나가 불과 두달여 만에 업그래이드 되서 두번째 세미나를 갖는다고 하네요.

역시 이번에도 장성민님께서 수고를 해 주고 계시구요. 한국 시각 장애인 복지관의 백남중 선생님과 디비딥의 조훈님께서 강의를 해 주신다고 합니다.

웹 접근성이 이슈화 되면서 많은 분들이 스크린리더에 대한 관심을 갖고는 있지만 실상 제품이 몇개 없고, 개인이 구입하기에는 가격도 많이 비싼 편입니다. 그래서 실제로 테스트를 해볼 수 있는 여유가 거의 없는게 현실인데요. 이 날 세미나에 참석하시면 국내 스크린리더의 역사부터 시작해서 실제 구현되는 모습과 음성을 들어보실 수도 있습니다.

첫 세미나 때는 조훈님의 발표는 없었는데 아마도 웹 접근성과 관련해서 최신의 정보를 알려 주시지 않을까 기대가 됩니다.

현재 스무명 남짓 되시는 분들이 신청을 마친 상태입니다. 총 40명을 모으는 세미나이니만큼 꼭 듣고 싶으신 분들은 서둘러서 신청해 주셔야 할 것 같습니다.

2009년 12월 5일 토요일

IE6 커닝 페이퍼: IE6 버그 25+ 해결하는 방법

Virtuosi Media의 Benjamin이 만든 아주 환상적인 커닝 페이퍼였던 Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs를 기억하시는 분들이 많을 것 같습니다. 아마 대부분 즐겨찾기를 해 두셨을 겁니다. 그리고 궁금한 것이 생길 때마다 찾아보시곤 하시겠지요.

그런데 아쉽게도 이 문서는 영문이기 때문에 조금 어렵게 생각하시는 분들도 많았습니다. 저 역시 그랬구요. 하지만 다행히도 이제는 한글로 된 이 커닝 페이퍼를 읽어보실 수 있습니다.

저의 훌륭한 동료이자 형인 이석진 선임 연구원께서 제 부탁을 거절치 못하시고 번역을 해 주셨거든요! 이석진님은 훌륭한 UX기획자로 일을 하고 계십니다.

UI개발이나 웹표준쪽은 거의 알지 못하십니다. 그래서 제가 조금 문맥을 고치는 작업을 진행했습니다. 그럼에도 오타나 오역이 있을 수 있으니 혹시 발견하신다면 제 블로그나 커닝 페이페 문서(위키)의 의견란에 남겨주세요!

Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

IE6 커닝 페이퍼: IE6 버그 25+ 해결하는 방법

2009년 12월 3일 목요일

잠쉬 회사를 쉬게 되었습니다.

2008년 가을이 끝나갈 무렵 가슴에 뜨거운 것 하나를 끌어안고 지금 회사에 입사를 했던 것이 기억납니다. 그렇게 1년하고 한 달 동안 여러 사람들을 만나고, 함께 일을 해 오면서 즐겁기도 했고, 고되기도 했었습니다. 또, 그렇게 앞으로 1년, 또 1년 내 꿈을 키워볼 수 있겠지 하며 달려왔습니다.

하지만 참 그게 쉽지 않다는 것을 다시 한 번 느껴봅니다. 제가 다니는 회사에 대해서 안밖으로 말이 많습니다. 제 블로그를 통해서는 회사 이야기를 한 번도 한 적이 없지요. 물론 지금도 굳이 회사 이야기를 들어 내밀 마음은 없습니다. 그저 현재의 상황이 아쉽고 속상할 따름이지요. 어찌되었든 저는 당분간 회사를 쉬게 되었습니다. 외적 상황에 의한 것이긴 하지만 선택은 스스로 한 것이기 때문에 혹여라도 오해들이 없으셨으면 하여 덧붙입니다.

아직 쉬는 동안 해야 할 일을 확실히 결정하지는 못했습니다. 몇 가지 계획한 것과 시작한 것이 있지만 그 것들이 회사를 대신하여 제게 한달치 월급을 챙겨주지는 못할 것 같네요. 아내와 곧 태어날 아기를 위해서 가장의 몫은 해야 할 테인데 말이죠.

걱정도 많지만 딱히 불안하거나 부정적인 상황은 아닌것 같습니다. 쉽게 얻을 수 없는 기회라고 생각하고 값지고 훌륭한 일들을 찾아서 해보고 싶기도 합니다. 아내에게 조금 더 따듯한 남편이 될 수 있는 시간을 갖는 것과 운영하는 커뮤니티를 조금 더 멋진 곳으로 만들어내는 것과 내 욕심을 담은 작은 것들 몇 가지를 이루어 내는 시간으로 말이지요. 또, 쉬는 동안 만큼은 이 블로그도 열심히 운영해 볼 수 있지 않을까 싶기도 합니다.

2009년 12월 1일 화요일

오페라 웹표준 강좌 50. 자바스크립트 애니메이션

오랜만에 클리어보스에서 번역중인 오페라 웹표준 강좌 하나가 공개되었습니다.

50장. 자바스크립트 애니메이션이고 졸린눈이님께서 번역 작업을 진행해 주셨습니다.

번역된 다른 강좌들:

CSS Nite in Seoul 발표 자료(PDF) 공개

지난 11월 21일 서울 삼성동 한국 마이크로소프트에서 열렸던 CSS Nite in Seoul, Vol.1의 발표 자료가 CSS Nite in Seoul 공식 사이트를 통해서 공개되었습니다. 여러 분들께서 제 블로그에 문의를 남겨 주셔서 따로 공지차 포스팅을 해 봅니다.

공식사이트 발표자료 공개 글(http://cssnite-seoul.regraphy.com/archives/457)

박 태준（주식회사 NHN 웹표준1팀팀장）- 웹표준을 기반으로 한 HTML 개발 프로세스
타가노 마사히로（주식회사 스위치 대표 이사）- 일본의 웹표준 현실과 제작 프로세스
마시코 다카히로（주식회사 사이버가덴 대표 이사）- 미래의 웹표준으로써의 HTML5과 CSS3

더불어 동영상 자료는 한참 편집중에 있고, 현재는 오프닝 동영상이 공개되어 있습니다. HTML5의 VIDEO 요소를 이용해서 마크업된 웹페이지입니다. Firefox, Safari, Chrome 등 최신 브라우저를 이용하시면 보실 수 있습니다.

2009년 11월 22일 일요일

CSS Nite in Seoul, Vol.1을 마치고

꽤 오랜만에 블로그를 통해서 인사를 드리게 되었습니다. 지난 몇 주간 개인적으로 여러가지 일들이 생겼고, 그 중 하나는 CSS Nite in Seoul, Vol.1 행사를 준비하는 것이었습니다. 그리고 이렇게 무사히 행사를 마치고 간단한 소회를 남기고자 블로그를 열었습니다.

CSS Nite in Seoul, Vol.1 단체사진

지난 21일 토요일 오후에 대문을 열었고, 한 분씩 자리에 모시기 시작했습니다. 행사가 공식적으로 시작되는 1시가 되자 거의 모든 분들이 자리를 빼곡히 채워 주셨구요. 물론 유료 세미나라는 점 때문에 미리 내주신 돈 때문(?)이실지는 모르겠지만^^ 준비한 저희들로써는 너무나 감사드리는 부분이 아닐 수 없었습니다.

그런데 하루 전날 갑작스럽게 행사 장소와 관련하여 문제가 발생했었구요. 때문에 3시간 가까이 예정보다 좁은 장소에서 여러분들을 모실 수 밖에 없었습니다. 이런 일이 생기면 안되는 것이었는데 정말 정말 죄송하다는 말씀 말고는 드릴 말씀이 없었습니다. 그나마 3시 이후에는 본래대로 넓은 세미나룸을 모두 사용할 수 있게 되어 한 시름 놓기도 했었습니다.

사실 저는 밖에서 주로 관리와 운영을 담당했기 때문에 세션 발표를 하나도 듣지 못했습니다. 그래서 내용과 관련해서는 적을 것이 거의 없네요^^; 동영상을 촬영해 놨고 지금 아마도 인스카님께서 열심히 편집 작업을 진행하고 계신줄로 압니다. 그것이 완료되면 자원봉사자들도 볼 수 있지 않을까 싶습니다. 그리고 아직 확정되지는 않았지만 영상과 사진등을 더 많은 분들이 보실 수 있도록 공개도 하지 않을까 싶습니다.

일단은 CSS Nite in Seoul 미투데이 페이지에서 핸드폰과 스마트폰, 카메라 등으로 촬영된 일부 사진들이 올라와 있습니다. 행사장 풍경이 궁금하셨던 분들은 찾아주셔서 구경도 해 주시고, 댓글도 달아 주시면 감사하겠습니다. 아울러 행사에 참가해 주셨던 분들께서 개인 블로그나 커뮤니티 게시판, 트위터와 미투데이 등에 후기를 남겨주시면 저희에게 너무 큰 선물이 되지 않을까 싶습니다.

설문지를 통해서 평가를 해 주셨지만 진솔하고 작성해 주신 후기 하나 하나를 통해서 다음 행사를 더욱 더 멋지게 준비할 수 있지 않을까 생각해 봅니다.

아무쪼록 한국이라는 작은 나라에서 '웹'이라는 직업을 갖고 살아가시는 모든 분들께 작으나마 기운과 정보를 드리고자 준비했고, 기꺼이 제 수고를 아끼지 않았습니다. 모두가 만족할 수 있는, 내신 돈이 아깝지 않은 세미나를 만들기 위해서 또 고민하고, 노력하겠습니다.

일본의 CSS Nite와 리그라피, 스폰을 해 주신 한국 마이크로소프트와 Tag & Brace, IT인재개발원. 후원해 주신 Clearboth, CSS Design Korea, 하드코딩하는 사람들, 도서출판 길벗. 관계자 모든 분들께 다시 한 번 감사의 인사를 드립니다.

감사합니다.

덧붙임.CSS Nite 주최자이시고 이 날 발표를 해 주신 타카노 마사히로씨가 찍은 사진들 보기

2009년 10월 25일 일요일

웹접근성 지지 서명 운동 동참해주세요!

행정안전부가 주최하고 한국정보문화진흥원에서 주광하는 웹 접근성 지지서명 운동이 진행중입니다. 예전에도 한 차례 진행되었던 서명 운동이었는데 이번에 여러 후원 업체를 등에 업고, 경품까지 마련해서 다시 진행하는 것 같네요.

경품도 경품이지만 웹 접근성 향상을 위한 이같은 노력은 그것 자체로 매우 의미가 있는 운동입니다. 보다 많은 분들이 동참하여 '차이를 넘어 차별없는 세상을 만드는 웹 접근성'이 완성되기를 바라겠습니다.

웹 접근성 지지서명 운동 웹사이트

지지서명 참여는 아래 웹페이지에서 간단히 남기고 싶은말씀을 적어주시면 됩니다. 꼭 참여해 주세요!

웹접근성 지지서명 웹페이지

2009년 10월 21일 수요일

CSS Nite in Seoul Vol.1 무료 초대권 이벤트 담청자 발표

클리어보스에서 진행한 CSS Nite in Seoul Vol.1 무료 초대권 이벤트 담청자 발표입니다.

총 열 분이 참여해 주셨습니다. 진심으로 감사의 말씀을 드리면서 약속한 시간(21일)이 지났기 때문에 추첨을 해야만 했습니다. 추첨 방식은 네이버에서 '사다라게임'을 검색하니 플래쉬로 만들어진 사다리 게임이 바로 나오더군요. 그 녀석을 이용했구요. 혹시라도 오해를 하실까봐 아래 화면을 캡쳐했습니다. 또 하나 공정성을 위해 양심껏 딱 한 번 실행했습니다.

CSS Nite in Seoul Vol.1 초대권 이벤트 추첨을 위한 사다리게임 준비

CSS Nite in Seoul Vol.1 초대권 이벤트 추첨을 위한 사다리게임 결과!

그리하여 김요한, 위연주, 박민호 이상 세 분께 무료 초대권을 드리게 되었습니다.
축하드립니다~ 혹시라도 참석이 어려우신 경우에는 제게 꼭 말씀해 주시기를 부탁드리겠습니다.

2009년 10월 18일 일요일

한국에서 가장 많이 사용하는 HTML에디터는?

클리어보스에서 지난 9월 3일부터 '가장 많이 사용하는 에디터는?'이라는 주제로 웹제작자들이 주로 사용하는 에디터 사용율 조사를 실시해 보았다.

한국에서 가장 많이 사용하는 HTML 에디터

조사 결과는 Editplus+가 46%로 절반에 가까웠고, 그 뒤를 DreamWeaver가 17%를 차지하며 따르고 있다. vi와 Eclipse, UltraEdit, Aptana 등이 그나마 5%내외의 사용율을 보이고 있고, 그 외의 에디터들은 1,2%도 채 되지 않는 사용율을 보이고 있다.

앞서 woorkup.com에서 발표한 HTML 에디터 사용율 결과와 비교해 보면 한국에서의 에디터 사용율이 특정 플랫폼과 에디터에 과도하게 집중되어 있음을 알 수 있다. Wookup.com의 결과를 살펴보면 맥과 윈도우 플랫폼에서 각각 CODA와 Notepad++라는 제품이 자리를 잡고 있으면서도 DreamWeaver와 Aptana와 같은 크로스 플랫폼이 비슷한 수준의 사용자 수를 확보하고 있음을 알 수 있다.

해외나 우리나라나 비슷하게 나타나는 것은 DreamWeaver나 Aptana와 같은 다양한 기능을 탑재한 고급 에디터보다 하드 코딩에 적합한 가벼운 에디터들을 주로 선호한다는 점이다. 또, 우리나라야 맥 사용율이 워낙 낮다 보니 맥 기반의 CODA나 Espresso같은 에디터들이 겨우 1,2%를 차지하는 정도이지만 해외의 경우에는 CODA와 Textmate 같은 에디터들의 사용율이 매우 높게 나타나는 것을 알 수 있다.

에디터 자체가 웹표준을 준수한 웹사이트를 만드는데 절대적인 도구가 될 수는 없기 때문에 특정 제품 하나가 지나치게 점유율이 높다고 해서 크게 문제가 될 것 같지는 않다. 물론, 과거에 나모 웹 에디터나 DreamWeaver의 구 버전처럼 오류 투성이의 마크업을 양산해 내는 에디터들이 시장을 잠식하고 있다면 문제가 될지도 모른다. 하지만 해외나 국내나 대체로 위지익이 아닌 텍스트 기반의 에디터들이 주류를 이루고 있고, 정도의 차이는 있지만 거의 대부분의 최신 에디터들은 마크업과 스타일시트에 대한 유효성 검증을 지원하고 있다.

어쨌든 이번 에디터 사용율 조사는 예측 가능한 결과(Editplus+의 압도적 승리?)를 놓고 얼마나 많은 에디터들이 사용되고 있을까에 대한 궁금증이 더 컸던 조사였던것 같다. 개인적으로도 윈도우에서 Editplus+ 를 가장 많이 사용하고 있고, 그 편리함을 쉽게 버릴 수 없기는 하지만 최근에 Editplus+ 외에 여러 에디터들을 사용해 보면서 생각보다 편리하고 강력한 에디터들이 꽤나 많다는 것을 알았다. 그리고 그러한 에디터들이 조금의 노력만 덧붙여진다면 Editplus+ 에 익숙해진 코딩 패턴을 바꿔줄 수도 있을 것이고, 웹 사이트를 제작하는데 더 나은 환경을 제공해 줄지도 모른다.

Editplus+ 도 계속해서 발전해 나가기를 바라고, 더불어 다른 여러 에디터들도 함께 발전해서 도대체 뭘 써야 할 지 모를 행복한 고민을 하게 해 줬으면 좋겠다.

HTML 에디터 전쟁: 당신은 어떤 에디터를 사용하는가?

Woorkup.com에서 지난 10월 16일 HTML 에디터 사용자 조사를 실시한 결과를 발표했습니다.

전체적으로 볼 때 Coda와 Dreamweaver, Notepad++ 가 약 20%씩 차지하고 있는 것을 알 수 있었구요. 맥 사용자들은 대체로 Coda를 사용하고, 윈도우 사용자들은 Notepad++를 이용하고 있었다고 합니다. Dreamweaver는 맥과 윈도우 모두에서 두루 나타난것 같습니다.

HTML Editors Distribution

2009년 10월 12일 월요일

오페라 웹표준 강좌 45장. 자바스크립트 객체

클리어보스에서 번역중인 오페라 웹표준 강좌의 45장. 자바스크립트 객체가 번역 되었습니다.

번역된 다른 강좌들:

웹표준 컨퍼런스 CSS Nite 한국 첫 개최!

CSS Nite in Seoul 실행위원회와 (유)리그래피가 함께 주최하고, 한국 마이크로소프트와 태그앤브레이스가 협찬하고, 하드코딩하는 사람들, CSS Design Korea, Clearboth가 후원을 하는 웹표준 컨퍼런스 CSS Nite in Seoul Vol.1이 오는 11월 21일 토요일 삼성동 한국 마이크로소프트 세미나룸에서 개최됩니다.

CSS Nite는 나고야, 오사카, 아오모리, 후쿠오카, 오키나와, 아키타, 삿포로, 후쿠이, 센다이, 히로시마 등 일본의 여러 도시에서 지금까지 총 113회의 컨퍼런스를 통해 18,191분이 참여한 가장 규모가 큰 웹표준 컨퍼런스입니다.

이번 기회를 통해 CSS Nite는 한국과 일본 양국간의 웹제작들간의 교류와 정보 공유를 위해 자리를 마련했고, 그 시작을 서울에서 하고자 합니다.

이번 첫번째 컨퍼런스를 위해 국내에서도 웹표준 교과서의 저자로 잘 알려져 있는 마시코 다카히로씨께서 멀지 않은 미래에 표준이 될 HTML5와 CSS3에 대한 발표를 해 주시고, CSS Nite 의 주최자였던 타가노 마사히로씨께서 일본 웹환경과 제작 프로세스에 대한 강연을 해 주시기 위해 한국을 방문하시게 되었습니다. 여기에 NHN 웹표준화팀의 팀장님으로 계신 박태준 팀장님께서 오랜 경험과 노하우를 통해 얻은 HTML 개발 프로세스 방법론을 소개해 주실 것입니다.

행사내용과 프로그램

행사내용

구분	내용
일정	2009년 11월 21일 12:30-18:00
장소	삼성동 포스코센터 서관 5층 한국MS
주최	CSS Nite in Seoul 실행위원회, 유한회사 리그래피
협찬	한국 마이크로소프트, 태그앤브레이스
후원	하드코딩하는 사람들, CSS Design Korea, Clearboth
모집인원	150명 (초대 인원 포함)
등록비용	사전 등록：25,000원 / 현장 등록：30,000원
발표자	타가노 마사히로 (주식회사 스위치 대표 이사) 마시코 다카히로 (주식회사 사이바가덴 대표 이사) 박 태준 (주식회사 NHN 웹표준1팀팀장)

프로그램

시간	발표자	내용
12:30 [30min]		입장개시
13:00 [15min]	이 유미	오픈닝,행사 소개
13:15 [45min]	박 태준	웹표준을 기반으로 한 HTML개발 프로세스
14:00 [60min]	타가노 마사히로	일본의 웹표준현실과 제작 프로세스
15:00 [10min]	한국 마이크로소프트	라이트닝 토크1
15:10 [15min]		휴식
15:25 [60min]	마시코 다카히로	미래의 웹표준으로서의 HTML5과CSS3
16:25 [10min]	태그앤브레이스	라이트닝 토크2
16:35 [15min]		휴식
16:50 [60min]	박태준, 박중석, 타가노 마사히로, 마시코 다카히로, 미츠코시 유스케	패널토의와 질의응답
17:50 [10min]		경품 추첨
18:30 [60min]		교류파티(무료)

사전등록

사전등록은 온오프믹스를 통해서 실시하고 있습니다. 아울러 이번 행사는 유료로 진행되고 있습니다. 등록금은 30,000원이며, 사전 등록시 25,000원으로 등록을 하실 수 있습니다. 사전 등록이 조기에 마감되는 경우 현장 등록은 받지 않습니다.

배너 등록하기

CSS Nite in Seoul Vol.1 공식

CSS Nite in Seoul Vol.1 블로그 배너(가로 170px)

CSS Nite in Seoul Vol.1 블로그 배너(가로 200px)

CSS Nite in Seoul Vol.1 (가로 800px)

CSS Nite in Seoul Vol.1 (590x390)

CSS Nite in Seoul Vol.1 (가로 590px)

2009년 10월 6일 화요일

브라우저가 뭐야?

컴퓨터를 이용하는 대다수의 사람들은 웹 브라우저에 대해서 제대로 이해하고 있지 못하는 경우가 많다. 윈도우에서는 파란색 지구 아이콘이 곧 인터넷이라고 인지할 뿐이고, 맥에서는 나침반 아이콘을 인터넷이라고 여긴다. 사용자들에겐 지금 이 순간 인터넷을 이용할 수 있는 것이 중요한 사실일 뿐. 그것이 웹 브라우저라는 프로그램이고, 내가 지금 사용하고 있는 것 이외의 다른 것이 또 존재해서 선택에 대한 고민을 해야 한다는 것에 스트레스를 받을지도 모른다.

What Browser? Website

구글은 그런 사용자들을 가르치고 싶었나보다. 그들은 What Browser? 라는 사이트를 만들어 놓고, 웹 브라우저의 역사와 자바스크립트가 얼마나 많이 발전했는지, 지금 사용하고 있는 당신의 브라우저의 성능은 어느정도인지. 당신이 사용하고 있는 브라우저 외에 설치할 수 있는 브라우저는 무엇 무엇이 있는지, 새로운 브라우저에서 홈페이지를 변경하는 것, 기본 브라우저를 변경하는 것 등을 꼼꼼하게 설명하고 있다.

만약 당신이 맥에서 파이어폭스를 사용하고 있다면, WhatBrowser.org는 Try a New Browser를 통해서 오페라, 파이어폭스, 사파리를 새로 설치할 수 있다고 보여줄 것이고, 윈도우에서 인터넷 익스플로어를 사용하고 있다면 오페라, 구글 크롬, 파이어폭스, 인터넷 익스플로어, 사파리를 보여줄 것이다.

그리고 A few useful tweaks에서 각 브라우저별로 다른 홈페이지 설정, 검색엔진 변경, 기본 브라우저 설정에 대한 가이드를 아주 친절하게 보여줄 것이다.

웹킷 기반에서 CSS3 맛보기

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

CSS3 Generator

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

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

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

2009년 10월 5일 월요일

다재다능한 마크업 에디터 markItUp!

markItUp은 게시판 등에서 주로 활용하는 WYSIWYG 형태의 웹 에디터는 아닙니다. HTML을 비롯해, Markdown, Textile, Wiki Syntax, Markdown, BBcode 등 다양한 형태의 마크업으로 문서를 작성할 수 있도록 기능을 갖춘 솔루션입니다.

markItUp

markItUp은 jQuery를 사용하였고, 겸손한 자바스크립트(unobtrusive javascript)로 구현되어 있습니다. 자바스크립트를 사용할 수 없는 경우에도 기본 텍스트박스 영역이 제공되어 최소한의 기능을 이용할 수 있으며, 스타일스트가 제거된 경우에도 각각의 기능을 그대로 이용할 수 있습니다. 상단에 배치된 아이콘 메뉴들은 각각 접근키를 가지고 있어 단축키를 이용하여 쉽고, 편리하게 마크업을 할 수 있도록 배려되어 있는 것도 특징입니다.

markItUp의 장점은 뭐니뭐니해도 다양한 마크업 셋과 확장 기능에 있습니다. HTML 뿐만 아니라 여러 위키 엔진과 블로그 등 CMS에서 사용되고 있는 Markdown, Textile, Wiki Syntax, Markdown, BBcode 등을 얼마든지 추가하여 사용할 수 있습니다. 워드프레스와 드루팔과 같은 인기 CMS에 맞추어진 플러그인도 함께 제공중이며, MacOSX 스킨과 같은 여러 스킨도 지원하고 있습니다. 이 강력한 마크업 에디터가 오픈 소스라는 점 또한 매우 매력적인 사실입니다.

거의 모든 국내 웹사이트가 WYSIWYG형태의 웹에디터를 기본 에디터로 사용하고 있고, 사용성이 높기 때문에 WYSIWYG를 지원하지 않는 markItUp이 다소 아쉽기는 하지만, 웹에서의 HTML 마크업 에디터나 강력한 위키용 에디터 등을 원하시는 분들께는 아주 멋진 솔루션이지 않나 싶다.

오페라 웹표준 강좌 13장. HTML <head> 요소

클리어보스에서 번역중인 오페라 웹표준 강좌의 13장 HTML <head> 요소가 번역 되었습니다.

번역된 다른 강좌들:

2009년 10월 1일 목요일

브라우저의 역사

Six Revisions에서 웹 브라우저의 역사를 포스팅했군요.

1991년 팀 버너스 리가 개발한 WWW 브라우저(World Wide Web의 WWW와 혼동되어 나중에 Nexus라는 이름으로 바뀜)부터 2008년 구글 크롬까지 년도별로 굵직 굵직한 기록들을 이미지와 함께 설명하고 있습니다.

웹브라우저의

클리어보스에서도 웹퍼블리셔 오리엔테이션을 위해 작성했던 '웹표준 역사'라는 것이 있는데 년도별로 브라우저의 발전과 웹표준 스펙을 함께 정리해 둔 것이었다.

2009년 9월 30일 수요일

WCAG 2.0 체크리스트

WebAIM에서 제작한 WCAG 2.0 Checklist를 번역한 문서를 공개합니다.

번역을 마친지는 꽤 되었는데 내용 검수가 충분하지 않다고 판단해서 클리어보스 위키에 게시만 해 놓고 별도의 공지를 하지는 않았습니다. 따라서 번역상의 오류가 있어 내용이 잘 못 전달될 가능성이 있습니다. 또한, WebAIM도 밝히고 있듯이 이 체크리스트는 W3C에서 작성된 WCAG 2.0과 완전하게 동일한 내용을 담고 있지는 않습니다. (실무 반영을 위해 일부 기준을 변경함) 이같은 사정을 숙지하신 후에 참고용으로 활용하시면 될 것 같습니다. 아울러 번역이나 내용상의 오류를 발견하신 분은 본 글의 댓글 영역이나 위키 페이지의 의견란을 통해서 올려주시면 감사하겠습니다.

오페라 웹표준 강좌 44장. 자바스크립트 함수

클리어보스에서 번역중인 오페라 웹표준 강좌의 44장 자바스크립트 함수가 번역 되었습니다. 검은태양님 께서 수고해 주셨습니다.

번역된 다른 강좌들:

2009년 9월 24일 목요일

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

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

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

맥OS의 위젯들

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

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

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

원하는 영역을 선택

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

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

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

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

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

정말로 글이 올라간다

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

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

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

위젯 스킨 1

위젯 스킨 2

위젯 스킨 3

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

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

SuperPreview Review

MS는 Expression Web 3에 비주얼 진단(visual diagnostics) 도구인 SuperPreview를 포함하여 발표했습니다. 하지만 별도로 작동되는 프로그램으로 Expression Web 3 없이도 사용하실 수 있습니다.

오늘은 SuperPreview의 사용기를 간단히 정리해 보고자 합니다.

UI

SuperPreview UI

UI는 다른 Expression Stuio 제품들과 동일합니다. 상단에 웹페이지 위치를 입력하는 로케이션 바를 포함한 메뉴바가 위치해 있고, 중앙에 기준 화면(Base Line)과 비교 화면(Comparison)이 있습니다. 바로 아래에는 기준 화면이 되는 브라우저 아이콘과 비교 화면의 브라우저들 아이콘이 표시되어 있습니다. 하단에는 각각의 브라우저 DOM Tree 정보와 해상도를 설정할 수 있는 드롭다운 메뉴가 제공됩니다. DOM Tree를 통해서 상세한 스타일시트 정보를 확인해 볼 수는 없었습니다.

브라우저 선택

SuperPreview 브라우저 선택

비교 브라우저 목록에서 [+]버튼을 누르면 새로운 브라우저나 이미지를 선택할 수 있습니다.

SuperPreview 브라우저 선택 후 새로고침을 한다

브라우저를 선택하면 새로고침을 하라는 메세지가 나타납니다. 상단에 로케이션바 옆에 새로고침 버튼을 클릭하면 렌더링이 이루어지고, 화면이 나타납니다.

Box Highlighting Mode

Box Highlighting Mode

원하는 영역을 선택하게 되면 박스형태로 표시되며 좌측 하단에 사이즈와 위치 정보가 출력됩니다. 브라우저간 차이가 발생하면 붉은색으로 표시가 됩니다.

Lights-Out Highlighting Mode

Lights-Out Highlighting Mode

Box Highlighting Mode 와 달리 선택 영역만을 밝게 하여 보여줍니다.

Layout

수평 레이아웃

4가지 형태의 레이아웃을 제공한다. 기본 레이아웃은 수직으로 나누어져 있고, 위 그림처럼 수평(Horizontal Split Layout)으로도 나눌 수 있습니다.

오버레이 레이아웃

Overlay 레이아웃은 비교가 되는 두 화면을 하나의 레이아웃으로 겹쳐 보임으로써 차이를 극명하게 보여줍니다. 그리고 나머지 하나는 선택된 브라우저 하나만 보여주는 레이아웃입니다.

이미지 비교

이미지 비교

이미지를 불러와서 비교할 수 있습니다. 꼼꼼한 웹디자이너들이 종종 웹퍼블리셔가 작업한 웹페이지를 캡쳐해서 원본 이미지와 비교하는 것을 볼 수 있는데 더 이상 캡처를 하지 않아도 될 것 같습니다. 웹퍼블리셔에게는 아주 곤혹스러운 상황이겠지만 말이죠. 하지만 반대로 SuperPreview를 통해서 각 브라우저마다 같은 코드가 어떻게 다르게 렌더링 되는지를 효과적으로 보여주고 설명해 줄 수 있는 것이기도 합니다.

정리
SuperPreview를 IETester나 MultiIEs와 같은 어플리케이션에 비해 가볍고, 편리합니다. 가장 많이 사용하고 있는 IETester는 지속적인 패치를 통해 렌더링 정확도가 높아지고 있지만 모든 경우를 보장해 주지 못합니다. 그리고 일부 OS에서 심심치 않게 다운되는 현상도 비일비재합니다. 반면에 SuperPreview는 이같은 문제를 해소시켜줄 대안으로 발표가 되었습니다. 환영할만한 일입니다. 반갑기도 하구요. 하지만 정말 쓸 만한 제품인가? 하는데에는 아직 아쉬움이 많이 남는 제품입니다.

일단 SuperPreview는 비주얼 진단 도구로 실제 웹브라우저처럼 웹페이지를 보여주지 않습니다. 다시 말해 링크나 자바스크립트를 통한 인터랙션을 확인해볼 수 없습니다. 단일 페이지에 대한 렌더링 결과만을 확인해 볼 수 있다고 생각하시면 됩니다. 또한, 자바스크립트로 웹페이지 레이아웃을 구성하는 경우 제대로 렌더링 되지 않는 경우도 발생합니다. Expression Web 3 릴리즈 노트(공식 문서)를 살펴보시면 SuperPreview가 지원하지 못하는 경우를 확인해 보실 수 있습니다. 또 하나 IE 시리즈를 제외하면 현재 지원되는 브라우저는 Firefox 뿐입니다. Safari, Opera와 같은 다른 브라우저들은 다음 버전에서나 지원될 것으로 보입니다.

그리고 SuperPreview를 처음 보고 어도비의 BrowserLab 서비스와 상당히 유사하다는 것을 느꼈는데요. BrowserLab은 웹서비스로 구현되어 있습니다. 드림위버에 플러그인을 설치하면 연동해서 사용하실 수도 있구요. SuperPreview와 BrowserLab이 서로 경쟁해서 둘 다 좋은 제품으로 발전했으면 좋겠네요.

어쨌든 결론적으로 제 생각을 정리해보면 SuperPreview는 괜찮은 컨셉으로 쓸만한 제품이지만 아직은 다른 디버깅 툴을 대체할 만큼 사용성이 높지는 않다는 것입니다. IE8에는 개발자 도구라는 강력한 디버깅 툴이 지원되고 있는데 그것과 연동되어진다면 꽤나 쓸만하지 않을까 기대해 봅니다.

어도비의 BrowserLab

그래도 웹디자이너나 웹기획을 하시는 분들께는 꽤나 유용한 도구가 될 것으로 생각됩니다. 개발자나 웹퍼블리셔에게는 아쉽지만 아직은 IETester를 이용한 확인 작업이 가장 나은 대안인 것 같습니다.

가장 좋은건 IE6이나 IE7이 어서 점유율이 떨어져서 모든 사람들이 표준을 제대로 준수하는 브라우저를 사용하는 세상이 되는 것이겠죠.

참고

2009년 9월 23일 수요일

모든 기기에서 인터넷 뱅킹을!

오픈뱅크 2009 운동

모든 기기에서 인터넷 뱅킹을 지원하는 "최고의 은행"을 소비자 스스로 찾기 위한 운동이 시작되었습니다. 오픈뱅크 2009는 인터넷 익스플로어를 사용하지 말자거나 반 ActiveX 운동이 아닙니다. 은행으로 하여금 윈도우 사용자가 아닌, 인터넷 익스플로어 사용자가 아닌 사람들에게도 동일하게 인터넷 뱅킹 서비스를 제공받을 수 있도록 해 달라는 것이며, 그렇게 해 주는 은행을 만들고자 하는 운동입니다.

운동의 시작과 함께 이미 많은 분들이 이름을 남겨주시고 계십니다. 보다 많은 분들께 참여를 독려하고자 이렇게 포스팅을 해 봅니다.

공식 사이트 : http://openbank.or.kr/
참여 페이지 : http://openbank.or.kr/join

2009년 9월 21일 월요일

두번째 웹퍼블리셔 오리엔테이션 후기

지난 토요일(09.09.19) 오후 압구정동 ACG 대회의실에서 클리어보스가 주최하고 오페라 소프트웨어와 드래곤플라이, ACG가 후원한 웹퍼블리셔 오리엔테이션 두번째 세미나가 있었습니다.

이번 OT에서는 총 18분이 신청해 주셨고, 10분이 참석을 해 주셨습니다.(생각보다 많은 분들이 당일 취소를 하셨네요) 그리고 운영진 및 자원봉사, 패널 참석자를 포함해서 총 18명이 이날 세미나를 진행했습니다.

두번째 웹퍼블리셔 오리엔테이션

이번 OT에서도 1기때와 마찬가지로 1교시 웹표준 역사 발표와 2교시 웹퍼블리셔로 살아가기라는 주제로 토론을 진행했습니다.

1교시 웹표준 역사는 제가 준비한 발표자료를 통해서 년도별 웹 표준 권고안과 브라우저들의 발전 상황을 요약했고, 2교시 토론에서는 애틱님의 진행으로 저와 루트박스, 유자, 호브레드, 듀트 님 등이 패널로 참여하여 참가자들과 함께 질의 응답 형태의 이야기를 풀어가는 시간을 가졌습니다. 토론의 내용은 클리어보스 위키에 공개된 문서를 통해서 확인해 보실 수 있습니다.

그리고 4시간여의 세미나를 마치고, 근처 호프집에서 패널과 참가자들이 함께 못다한 이야기를 나누며 친해질 수 있는 뒤풀이 자리를 가졌습니다.

사실 이번 세미나는 1기때에 없었던 기념품 후원 등도 있고 해서 기대가 컸었는데 의외로 많은 분들이 당일 또는 전날 취소를 하셔서 절반 정도의 인원만을 모시게 되었었습니다. 세미나를 준비한 사람들 입장에서는 참 안탑갑고 아쉬울 수 밖에 없는 대목입니다. 아무래도 저희가 준비한 내용이 충분하지 않고, 홍보도 적었던 탓이라고 생각합니다. 다음 3기 OT에서는 더 나은 주제와 내용으로 조금 더 열심히 알려서 보다 많은 분들께 참석의 기회와 공유의 기쁨을 가질 수 있도록 노력하겠습니다.