Fujitsu ColorSelector 사용기

지난 번에 작성한 Fujitsu 웹 접근성 보조기기를 소개한 글에 이어서 개별 제품들에 대한 사용기를 작성합니다. 그 첫번째로 오늘은 접근성 높은 웹 컬러를 선택하도록 도와주는 Fujitsu ColorSelector에 대한 사용기를 작성합니다.

Fujitsu ColorSelector는 배경색과 전경색을 조합할 때 색약자가 겪을 수 있는 이상유무를 실시간으로 판별해줍니다. 일반, 백내장, 제1색각(빨강), 제2색각(초록), 제3색각(파랑)의 5가지 색약 분류에 따라 이상 유무를 O/X로 판별해주기 때문에 웹 디자이너 입장에서 접근성을 이해하고 활용하는데 무척 유용한 도구입니다.

제가 주로 사용하는 색상선택기인 ColorCop와 비교하면, 몇가지 불편한 점이 있습니다. 예를 들어, 디자이너가 선택한 전경색과 배경색이 접근성에 문제가 있을 경우에 접근성이 높은 유사한 색상들의 목록을 제공해주지 않고 있습니다. 또한, 색상을 선택하기 위해서 현재의 화면을 팔레트로 사용하는 것이 아니라 스크린캡쳐 받은 영역을 사용하는 문제점이 있습니다. 이 때문에 실시간으로 변경하는 영역의 색생을 선택하는데 불편함이 있습니다.

국내 포털 사이트인 다음(Daum)의 메인 페이지 중에서 색대비가 약한 부분인 사이트맵 영역의 버튼을 Fujitsu ColorSelector로 점검해봤습니다. 전경색이 #FFFFFF이고 배경색이 #C6C6C6이기에 한눈에 봐도 색약 관련 접근성이 낮겠다고 예상할 수 있겠네요.

다음 메인 페이지의 사이트맵

Fujitsu ColorSelector로 점검해보니 제1색각(빨강)을 제외한 일반, 백내장, 제2색각(초록), 제3색각(파랑)의 4가지 영역에서 문제가 있음을 확인할 수 있었습니다.
Fujitsu ColorSelector

사람이 점검할 때는 많은 시간과 노력이 들면서도 그 결과의 객관성 확보에 문제가 발생하곤 합니다. 특히 웹 접근성 영역이 그러하죠. Fujitsu ColorSelector와 같은 유용한 도구를 이용함으로써 보다 객관적이면서도 쉽고 빠르게 색상과 관련한 웹 접근성을 점검할 수 있습니다.

앞으로도 이와 같은 유용한 도구들이 많이 만들어졌으면 좋겠습니다. 물론 제가 할 수 있는 영역에서 최선을 다할 것이구요. ㅎㅎ

Fujitsu ColorSelector에 대한 자세한 소개는 아래 링크를 참고하세요.

웹 디자이너 Larissa Meek 팬클럽 가입

라리싸 미크 클라이언트측 기술에 대한 유용한 정보를 제공하고 있는 Vitamin 사이트를 통해서 Larissa Meek님을 알게됐습니다. Web Design-isms: 7 Surefire Styles that Work라는 글에서 그녀의 미적 용어 구사 능력에 감탄할 수 밖에 없었죠.

여지껏 Web Design을 분석하고 분류하는 방법에는 color, layout, grid, typo와 같은 인쇄/출판 디자인에서 사용하는 전통적인 방법들이 대부분이었습니다. 최근에 디자인된 수 많은 웹 사이트를 분류하기엔 부족한 점이 있었죠. 그런 어려움을 명쾌하게 해결할 수 있는 실마리를 제공한 글이 바로 그녀의 Web Design-isms입니다.

실제로 웹 디자인의 많은 영역은 인쇄/출판 디자인의 것들을 차용해왔습니다. 이 글을 읽음으로써 그 동안 웹 디자인이 인쇄/출판 디자인의 한계에서 갇혀 있지 않았는지 제 자신을 반성하게 됩니다. 디자인 역시 미술의 한 부류인데, 지금까지 그것을 부인해왔던 것 같습니다.

참새가 방앗간을 그냥 지나칠 수 없겠죠. 그녀의 블로그를 찾아가서 주옥같은 글들과 Art들을 확인한 순간 바로 결심했습니다. 그녀의 팬클럽에 가입하자! 이는 결코 그녀 소개 페이지에 있는 아름다운 사진 때문은 아닙니다. 단지, 제 블로그의 feedburner 구독자 수의 1/4도 못치지 않는 그녀에게 힘이 되고 싶을 뿐이었습니다.

1. 웹 디자인과 웹 Art에 관심있는 남성분이나, 2. 미국인 블로그의 글을 읽고 답글을 작성함으로써 영어 공부를 하고 싶은 남성분도 팬클럽에 가입할 수 있습니다. 당분간 한국 팬클럽 임시회장은 제가 맡는 편이 좋을 것 같습니다. ㅎㅎ

CSS의 한계

최근에 웹 표준, 웹 접근성, 웹 호환성이 이슈로 떠오르면서 CSS가 집중 조명받고 있다. CSS가 다양한 이슈들을 한꺼번에 해결해줄수 있는 슈퍼맨처럼 과대포장되고 있지만, 실제로는 자체적인 결함과 외부 환경에 따른 한계들이 명확한 슈렉같은 녀석이다.

이런 CSS의 한계를 명확하게 인지하고, 그에 따른 해법을 모색할 때, 비로서 최근의 다양한 이슈들을 올바르게 해결할 수 있을 것이다. 하늘을 날지 못하는 자동차를 탓하는 것보단, 비행기는 결코 다닐 수 없는 지하도를 훌륭하게 주행할 수 있는 점에 박수를 보내야 할 것이다.

CSS의 한계

  • CSS2 스펙의 한계
  • 웹 브라우저의 CSS2 스펙 지원 부족
  • W3C의 지지부진한 CSS3 개발 속도
  • 웹 디자이너의 인식 부족

CSS2 스펙의 한계 : 지금당장 필요한 기능 위주로…

  • 부모(parent)-selector에 접근 불가 : 사용자 인터렉션 디자인 관점에서 필요. ex) 2단 네비게이션, 하나의 li에 포커스가 이동하면 다른 li들의 상태가 바뀔수 있도록..
  • multi-background 속성 미지원 : 표현을 위한 HTML 마크업을 줄이기 위해서, 또한 이미지와 배경이미지의 명확한 분리를 위해서 필요. ex) div 100단 콤보.
  • web-font(또는 download-font) 기능 미지원 : 2바이트 언어권에서도 타이포 디자인할 수 있도록 필요.
  • 투명(opacity) 속성 미지원 : 사용자 인터렉션 디자인 관점에서 필요. multi-background와 응용하면 다양한 시각적 기능이 가능해짐.
  • text-overflow 속성 미지원 : 글자 수 짜르려고 고생하는 서버측/클라이언트측 개발자를 위해서.. 특히 알파벳이 붙어 있어서 고생할때..

브라우저의 CSS2 스펙 지원 부족

W3C의 지지부진한 CSS3 개발 속도

  • 1998년 : CSS2 RD Candidate Recommendation
  • 2006년 ~ 현재 : CSS2.1 Last Call (아직도 개발 중;;)
  • 1998년 ~ 현재 : 모듈기반 CSS3 개발 중 (기약 없음)

웹 디자이너의 인식 부족

  • GG

세계 비보이 대회 한국 개최, 그리고 잡담

세계 비보이 대회(B-boy unit)가 3월 11일에 서울 올림픽 역도 경기장에서 개최된다. 벌써 8회째인 이 대회를 한국에서 개최하다니, 한국의 비보이들이 세계적인 실력을 갖고 있음에 틀림없다. 왠지 우리나라 비보이가 부럽다.

세계 비보이 대회

공식 사이트에 들렸더니 쓰러지는 줄 알았다. 이렇게 국제적인 성격의 의미있는 행사를 진행하는데, 내가 본 최악의 사이트가 나를 맞이해주고 있다. 해외에서 이 대회에 참석하거나, 관람할 수 있는 최소한의 안내도 없다. 이정도의 개념이라면, 아무래도 해외 참가자들에게 팩스로 대회를 안내했을 것 같다.

세계 웹디 대회(Web-D Showdown) 같은 게 필요할 시기다. 전세계 웹 개발자(Web Developer)와 웹 디자이너(Web Designer)들이 각 국가의 자존심을 걸고 서로 경쟁할 수 있는 그런 대회가 개최돼서, 각 국가 예선도 진행하고, 엉터리 사이트 만들어서 팔아먹고 사는 사람들을 내쫓을 수도 있고, 전세계 웹디들과의 경쟁을 위해 국내/사내/팀내 단결력도 높힐 수 있고, 웹디들의 자긍심도 높히고, 자신감도 회복하고, 발치디가 뭐냐? 발에 치이는 게 디자이너냐? 디벨로퍼냐? 나 좀 해~ 난 디자이너야. 넌 개발자구. 우린 서로 달라. 우린 각자 화성과 금성에서 왔으니까. 넌 내말 이해 못하니까 내가 하란대로만 해. 이런 소리나 하고 있는 국내 웹디들에게 개념도 심어주고, 오로지 우주정복과 우주대통합을 위해 수련하고, 수련자의 마음으로 살아가고, 근본을 깨닫고, 클라이언트와 사장에게 우주평화를 이야기하고, 눈빛으로 말을 하고, 코드로 말을 하고, 인쇄 디자이너는 출판사에 가야지 왜 웹 디자인하고 난리야? 어제 먹은 술은 아직 안깨고…

목이 말라 우유라도 사먹으로 가야겠다.

웹 디자이너를 위한 CSS

오늘 UI아카데미에서 진행한 Global Web Expert 실무 워크샵에서 강의를 했습니다. 여러 번 하다보니 내공이 쌓여서 그런지 오늘 강의는 무척 즐겁더군요. 사실 수강생 대부분이 웹 디자이너 출신이거나 현직 웹 디자이너였기에 즐거웠답니다.

지난 2번의 Global Web Expert 실무 워크샵에서는 수강하는 분들의 직군이 다양했지만, 우연히도 이번에는 웹 디자이너 분들이 많더군요. 덕분에 저 역시 평소 준비만 하고 말하지 못했던 많은 내용들(특히. 웹 디자이너를 위한 CSS)을 나눌 수 있어서 즐거웠답니다.

CSS 디자인 고급 스킬 및 CSS Zen Garden 따라잡기

2시간의 이론과 2시간의 실습을 통해서, 포토샵과 같은 웹 에디터 툴 없이, PSD 파일이 아닌 CSS 파일로 웹 디자인을 하는 방법이 생소하고 어려웠겠죠. 하지만 어떤 방법이 보다 빠르고 쉡게 원하는 웹 디자인 결과물을 얻어낼 수 있을지 직접 확인하실 수 있었을 거라고 생각합니다.

멀리 부산에서 KTX 타고 오신 성세진님, 기획자임에도 불구하고 맨 앞자리에서 열심히 CSS 코딩을 해주신 정혜란님, 웹 디자이너가 된지 3개월되셨다는 이미진님, 늦은만큼 더욱 열정을 불태우겠다는 박지윤님과 전수영님, 그 외 참여하신 모든 분들에게 감사드립니다.

제 강의 자료는 출력용 PDF 파일과 발표용 ppt 파일로 확인하실 수 있습니다. ppt 파일이 보다 최근에 만들었지만, 한글폰트가 깨질 수 있습니다. 혹 파일에 문제가 있으면 알려주세요~

스타일가이드를 작성하지 않는 웹디자이너

웹사이트를 디자인할 때, 스타일가이드를 작성하지 않는 웹디자이너. 그의 뜨거운 감성보다 1장의 A4용지가 믿음직스러운 이유는 뭘까…

Infomation Design, Uservility Design, Interface Design 백날 떠드는 것보단, 이유있는 디자인을 할 수 있는 게 중요하다. 클라이언트와 직장 동료 및 상사, 그리고 내 자신을 설득할 수 있는 디자인 이유/근거가 필요하다.

CSS는 스타일가이드와 찰떡궁합 친구. color, font, layout, boxmodel, image(bg-img)와 같은 스타일 요소와 에셋을 정리하고 관리하는 최고의 수단이다.

웹디자이너(독백)

어제 밤 친구와 메신져로 대화를 나눴다. 서울에서 웹디자이너로 근무하고 있는 친구는 나에게 뜬금없이 “향후 진로를 바꿨냐”라며 물었다. 나는 바꾼적도 없고, 앞으로 바꿀 생각도 없다”라고 대답했지만, 서로 생각하는 부분에 깊은 오해가 있음을 느꼈다.

언제부턴가 나는 웹디자이너 친구들에게 웹표준 준수와 CSS 디자인의 유용성을 강조하고, 새로운 디자인의 방향에 대해서 설파(?)해왔다. 그러나 똥고집의 친구들을 설득하는 건 쉽지 않았고, 결국 어제 밤엔 “너는 이제 디자이너가 아니라, 개발자야”라는 소리까지 듣게 됐다.

아니다. 나는 웹디자이너다. 다만 나는 감성적인 디자인과 이성적인 CSS가 조화롭게 결합될 때, 웹 디자인의 진수를 표현할 수 있다고 믿을 뿐이다.

이런 믿음이 현실화 될 것일지, 아니면 나만의 상상으로 끝날 것일지.. 확실한 건 1년 안에 결론난다. ㅎㅎ

웹디자이너가 가져야할 안목

웹디자이너는 출판디자이너와 다르다. 출판디자이너는 인쇄물의 모든 것들을 자신이 조정할 수 있지만, 웹디자이너는 웹사이트의 아무 것도 자신이 조정할 수 없다. yser님의 웹 표준과 접근성, 그리고 사용자의 관점이라는 글을 보면서 떠오른 생각이다.

웹디자이너가 결국 할 수 있는 일이라곤, 자신의 모니터에 보여지는 웹사이트의 디자인일 뿐이다.800×600 해상도의 모니터를 소유한 사람은 가로스크롤바를 이리저리 욺직이면서 웹사이트의 가로크기에 불만을 토로할 것이며, 핸드폰이나 pda로 방문한 사람은 첫화면을 확인하기 위해서 30초이상 기다리는 것을 포기할 것이다. 또한 자신의 컴퓨터의 색상설정에 문제가 있거나, 수명이 오래돼서 색상이 번진 모니터를 갖고 있는 사람은 웹디자이너의 의도와 전혀 다른 화면을 볼 것이다.

자신의 눈에 보이는 것을 믿지 말라. 다른 사람은 분명 다른 웹사이트를 보고 있을 것이다. 웹디자이너가 가져야할 안목이다.


Be Friend~! Be Friend~!