2009년 9월 30일 수요일

WCAG 2.0 체크리스트

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

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

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

2009년 9월 24일 목요일

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

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

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

맥OS의 위젯들

맥OS의 위젯들

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

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

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

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

원하는 영역을 선택

원하는 영역을 선택

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

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

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

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

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

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

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

정말로 글이 올라간다

정말로 글이 올라간다

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

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

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

위젯 스킨 1

위젯 스킨 2

위젯 스킨 2

위젯 스킨 3

위젯 스킨 3

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

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



SuperPreview Review

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

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

UI
SuperPreview UI

SuperPreview UI


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

브라우저 선택
SuperPreview 브라우저 선택

SuperPreview 브라우저 선택

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

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

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

Box Highlighting Mode
Box Highlighting Mode

Box Highlighting Mode

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

Lights-Out Highlighting Mode
Lights-Out Highlighting Mode

Lights-Out Highlighting Mode

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

Layout
수평 레이아웃

수평 레이아웃

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

오버레이 레이아웃

오버레이 레이아웃

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

이미지 비교
이미지 비교

이미지 비교

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

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

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

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

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

어도비의 BrowserLab

어도비의 BrowserLab


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

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


참고

2009년 9월 23일 수요일

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

오픈뱅크 2009 운동

오픈뱅크 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에서는 더 나은 주제와 내용으로 조금 더 열심히 알려서 보다 많은 분들께 참석의 기회와 공유의 기쁨을 가질 수 있도록 노력하겠습니다.

opera.com 한글화에 참여해주세요.

웹 표준과 관련된 다양한 정보를 얻기 위해서 찾는 곳 중 하나가 오페라 개발자 커뮤니티입니다. 제가 활동하고 있는 클리어보스에서 번역중인 웹표준 강좌 역시 이 곳 오페라 소프트 개발자 커뮤니티에 들어 있는 내용이구요. 그런데 요즘 opera.com에 대한 한글화 작업도 진행중인 것 같습니다. 오페라 코리아 블로그에 'opera.com 한글화 자원봉사를 모집합니다.'라는 글이 올라와 있네요.

오페라 소프트웨어 지역화


나라별로 진행중인 지역화를 보면 한국이 0%인 것을 보실 수 있습니다. 많은 분들이 한글화에 참여해 주셔서 opera.com 뿐 아니라 개발자 커뮤니티 사이트까지도 모두 한글로 읽어볼 수 있을 날을 기대해 봅니다.

opera.com 한글화 작업과 관련한 자세한 내용은 여기에서 확인해 보실 수 있습니다.

덧붙임/ 클리어보스에서 진행중인 오페라소프트 웹표준 강좌의 번역을 함께 해 주실 분도 환영합니다. 이건 제게 문의해 주시면 됩니다.

2009년 9월 11일 금요일

오페라 웹표준 강좌 51. 적절한 낮춤 대 점진적 향상

2009년 9월 9일 수요일

텍스트큐브닷컴 미투데이 댓글 연동해주세요~

텍스트큐브닷컴을 이용하면서 미투데이에 글 보내기 기능을 자주 사용하고 있다. 그런데 한가지 아쉬운 점이 있어서 제안해봅니다.


미투데이로의 글 보내기 이후에 미투데이에 걸린 댓글을 텍스트큐브닷컴(블로그)에서도 확인 해 볼 수 있었으면 좋겠습니다. 뭔가 글보내기만으로는 반쪽짜리 기능같아서 아쉽습니다. 텍스트큐브닷컴 개발자님 제발 구현해 주세요~

자바스크립트 프레임워크를 한 자리에

주요 자바스크립트 프레임워크를 한 화면에서 비교해 볼 수 있는 사이트가 있어 소개해 드립니다.
덴마크의 웹디자이너 Matthias Schutz가 제작한 페이지로 jQuery, MooTools, Prototype 등 주요 자바스크립트 프레임워크의 용량, 속도, UI 툴킷 지원 여부, 라이센스 정책을 한번에 확인해 볼 수 있도록 제공하고 있습니다. 또한, 주요 기능 구현을 위한 코드까지도 비교해 볼 수 있도록 페이지를 구성해 놓고 있어서 자바스크립트 프레임워크를 적용하고자 하시는 분들께 꽤나 도움이 될 것 같습니다.
Javascript Framework Matrix

Javascript Framework Matrix


두번째 웹퍼블리셔 오리엔테이션의 선물은 에디트플러스 라이센스!

Editplus

대한민국 웹퍼블리셔들이 가장 사랑하는 에디터! 에디터플러스!


오는 19일 토요일 오후에 클리어보스가 주최하는 두번째 웹퍼블리셔 오리엔테이션에서 참가자 분들께 어떤 선물을 드릴까 고민을 많이 했습니다. 첫번째 오티때처럼 도서와 USB메모리를 드릴까도 했지만 루트박스님의 아이디어를 통해서 에디트플러스 정품 라이센스를 드리기로 결정했답니다.

현재 클리어보스에서 진행중인 웹퍼블리셔가 가장 많이 사용하는 에디터 사용율 조사에서도 당당히 과반수 이상의 투표율을 자랑하는 대국민 에디터 에디트플러스를 당당히 정품 사용자로 사용하실 수 있는 기회를 드리고자 합니다!

상품 공지를 조금 더 일찍 결정해서 공지했더라면 더 많은 분들이 상품에 눈이 멀어(?) 더 많이 참가 신청을 해 주셨을 것 같은데 아쉽네요! 아무쪼록 다음주 토요일로 다가온 두번째 오티가 무사히 마무리 될 수 있도록 남은 기간 행사 준비에 부족함이 없도록 하겠습니다.

더불어 본 행사에 후원을 해주고 있는 오페라 소프트웨어에서도 예쁜 티셔츠를 제공해 주시기로 했습니다. 오페라 소프트웨어의 관심과 지원에 다시 한 번 감사드립니다. (오페라 10 이 최근에 릴리즈되었습니다. 너무나 좋더라구요~ 많이들 사용하세요~)

다음은 클리어보스 주최 두번째 웹퍼블리셔 오리엔테이션을 후원하는 기업들입니다.

Dragonfly
ACG
Opera Software ASA

2009년 9월 8일 화요일

오페라 웹표준 강좌 42장, 자바스크립트 멋진 예제들

클리어보스에서 번역중인 오페라 웹표준 강좌 42장 자바스크립트 멋진 예제들이 번역 되었습니다. 검은태양님 께서 수고해 주셨습니다.


번역된 다른 강좌들:

2009년 9월 6일 일요일

오페라 웹표준 강좌 46장. DOM 여행

오페라 웹표준 강좌 41장. 자바스크립트 시작하기

2009년 9월 2일 수요일

가장 많이 사용하는 에디터 투표해주세요

클리어보스에서 UI개발자, 웹퍼블리셔분들이 가장 많이 사용하고 있는 에디터가 무엇인지 알아보는 투표를 진행하고 있습니다.
가장 많이 사용하는 에디터 투표

가장 많이 사용하는 에디터 투표