좋아보이는 웹사이트를 만드는 디자인 원칙

좋아보이는 웹사이트를 만드는 디자인 원칙

고등학교 시절 내 꿈은 웹 디자이너였다. 페인트 샵 프로를 이용해서 머리속에 그려지는 온갖 것들을 디지털 이미지로 창조해 내는 그 느낌이 너무나 황홀했고 행복했었다. '디자이너'라는 이름이 가져다 주는 감동도 컸다. 거기에 HTML과 CSS라는 프로그래밍같은 언어를 함께 다루는 솜씨는 더욱 더 웹 디자이너를 돋보이게 했다. 하지만 대학을 졸업하고, 군대를 마치고 나니 많은 것이 변했고, 나는 HTML과 CSS를 다루는 UI개발자가 되어 있었다. 포토샵을 실행시키기는 하지만 대부분 디자이너가 작업한 PSD파일을 자르고, 약간씩 편집을 하는 수준이었다. 무엇인가 창조하는 즐거움은 사라지고 없었다. 그런 업무적 경계과 선명해질 수록 나는 웹디자이너와 다른 모습으로 살아가게 되었고, 그들의 생각이나 고민을 이해하지 못하게 되었다. 막연히 디자인도 역시 힘들고 고단하겠지하고 넘겨 짚을 뿐이었다.

우리가 하는 일-웹 사이트를 제작하는-이라는 것이 기획자나 디자이너, 개발자나 퍼블리셔 한 두명으로 되지 않는다는 사실은 누구나 알고 있다. 하지만 점점 분야의 깊이가 깊어지면서 서로의 업무의 경계를 분명해지고 벽이 만들어진다. 서로를 이해하기 힘들어지게 되며 자신만의 지식이 진리가 되어 버리곤 한다. 사이트는 쉽게 경로를 이탈하게 되고, 일정은 무한히 늘어진다. 모두가 피곤해진다.

과거에는 스스로 기획과 디자인 개발과 퍼블리싱을 모두 해내야 하는 웹 마스터가 있었지만, 지금은 보다 더 현명하게 웹사이트를 제작하고, 자신의 일을 훨씬 전문화시키기 위해서 서로를 이해할 필요가 있다고 생각한다. 그래서 종종 내가 하지 않는 일. 내가 관심을 두지 않는 일들에 대해서 관심을 둘 필요도 있지 않을까 생각한다. 조금씩 공부를 하고, 이해를 하기 시작하면 디자이너가 개발자가 얼마나 고단한지 어떤 어려움이 있는지 이해할 수 있고, 협업에 있어 도움을 주고 받을 수 있지 않을까?

그런 의미에서 최근에 내가 찾아 읽은 책은 '좋아보이는 웹 사이트를 만드는 디자인 원칙'(도서출판 인사이트)이었다. C, JAVA를 비롯해 ASP, PHP, JSP등 여러 개발 언어는 대학시절부터 꾸준히 공부를 해 왔지만 고등학교 이후 디자인 영역은 내 영역이 아니라고 생각했고 그만큼 멀찍이 떨어져 지내 왔던게 사실이다.

하지만 최근 몇년간 웹표준과 웹접근성에 대한 이야기가 많이 화자되면서 디자이너와의 협업- 접근성을 위한 유니버설 디자인 등을 이야기할 때마다 내 지식의 한계에 부딪히며 말을 잇지 못하는 경우가 많았다. 나는 디자이너들의 작업을 어느 정도나 이해하고 있을까? 그들이 생각하는 색이나 이미지, 폰트는 어떤 개념들일지 나는 몰랐다. 그래서 알아볼 필요가 있었다.

이 책은 아주 세세한 부분까지 가르침을 주는 책은 아니다. 두께도 그다지 없고, 내용의 깊이도 충분하다고 보긴 어렵다. 어떤 미술 사조를 거론하며 권위를 내보이지도 않는다. 이 책은 아주 정갈하고 가볍다.(저자는 가볍다라는 평가에 불만일 수 있겠지만) 왜냐면 나같은 무지한 인간에게도 또렷하게 읽혀졌기 때문이다. 편하게 디자인이라는 개념을 받아들일 수 있도록 친절함으로 글을 적어 놓은 책이 이 책이다.

일부러 강조하지 않으면서도 마크업을 의미 있게 작성해야 하는 이유를 가슴을 두드리며 설득하고 있으며, 접근성이라는 단어를 적지 않으면서도 접근성에 대한 고민을 하게끔 시선을 이끄는 책이었지 않나 싶다. 왜냐면 표준이나 접근성은 너무나 자연스럽게 우리 몸에 베어야 할 무형의 지식이지 강제로 주입되어야 할 암기 과목이 아니기 때문이다.

디자이너에게 좋은 책이지만, 웹퍼블리셔, UI개발자들에게도 한번 읽어보기를 추천하는 책이다.

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

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

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

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

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

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

개발자들이여 당신의 상사가 바보같다고 느껴진다면 이 책을 선물하라

소프트웨어 누가 이렇게 개떡같이 만든 거야 상세보기

데이비드 S. 플랫 지음 | 인사이트 펴냄

소프트웨어 사용이 어려운 이유는? 『소프트웨어 누가 이렇게 개떡같이 만든 거야』는 왜 사용자가 소프트웨어를 사용하기가 어려운지에 대해 이야기한다. 소프트웨어를 어렵게 느끼는 이유는 무엇인지, 누구 때문에 이러한 일들이 발생하는지, 과연 잘 만들어진 소프트웨어는 어떠한 것인지에 대해 재미있고 직관적으로 풀이한다. 잘못된 소프트웨어를 만드는 개발자들의 방식과 사용자들이 생각하는 방법을 대조적으로 알기

저는 웹퍼블리셔입니다. XHTML으로 마크업을 하고 CSS를 가지고 웹디자이너가 건네준 디자인을 브라우저 화면에 재디자인합니다. 그리고 JavaScript로 약간의 재주를 부리기도 합니다.

최근에 웹2.0이라는 경제적 용어가 이슈가 되고, 뒤를 이어서 웹접근성과 웹표준화에 대한 이슈가 커지고 있습니다. 하지만 아직도 많은 수의 클라이언트(기업의 우두머리들)와 웹사이트를 대신해서 만들어주는(웹에이젼시) 기업 내의 거의 모든 사람들은 이를 외면하거나 애써 피하려고만 합니다. 오직 웹퍼블리셔들만이 쫑알쫑알 떠들어 대는 듯한 느낌이 강합니다. 그나마 그것도 소수의 웹퍼블리셔들만이 말입니다.

최근에 저는 사내에서 적극적(?)으로 웹표준 홍보를 하고 있습니다. 웹디자이너들에게 사용자들이 폰트를 크게 키워서 볼 수 있다는 것을 인식시키고, 유연한 레이아웃을 부탁합니다. 바로가기 셀렉트 박스 옆에 버튼을 달아두면 시각장애인도 이용할 수 있을것이다라는 이야기도 합니다. 플래셔에게는 플래시의 대체 텍스트 기능이 들어 있음을 알려줍니다.(저는 플래시를 전혀 모릅니다. 하지만 웹에서 검색을 통해서 알아냈고, 그 사실을 항상 플래시를 다루는 사람들에게 알려주고 있는 겁니다! 이게 뭡니까!) 기획자와는 아주 긴 시간 논쟁을 벌여야 합니다. 그들의 스토리보드를 뜯어고쳐야 하고, 개발 프로세스를 개선할 것을 요구합니다. 그들에게 장차법을 소개하고, 다양한 브라우저를 보여줍니다. 그리고 우리 회사가 만들었던 그 많은 사이트들을 하나씩 보여줍니다. 그들은 당황해 합니다. 그러나 어떻게 해야 할지 모릅니다. 그저 클라이언트가 좋아만 하면 그만이다 말합니다. 20대를 위한 사이트는 20대만 들어오면 되고, 비주얼이 강한 사이트는 시각 장애인이 와도 볼게 없으니 무시해도 된다라는 논리. 청각 장애인을 위해서 간단한 사이트를 하나 더 만들면 되지 않겠냐는 논리. 회원가입 양식에 온갖 항목을 집어놓고 단 하나의 에러도 표시해주지 않아서 다시 처음부터 가입하게 만드는 개발자의 센스. 우리에게 사용자란 무엇인지? 사용자를 위한 사용성이란 무엇인지? 한번 진지하게 고민해봐야 하지 않을까요.

웹표준과 웹접근성에 대한 이슈는 이 책이 지적하는 사용자에 대한 사용성과 아주 밀접한 관계를 가지고 있습니다. 바보같은 개발자들은 자신들의 관점으로 사용성을 판단한다. 맞는 말인것 같습니다. 저도 제가 코딩한 마크업 문서의 오류를 확실하게 찾아내지 못합니다. 제가 작업한 스크립트가 사용자에게 편리함을 준다고 착각할 때가 아주 많습니다. 저 역시 한 명의 사용자라고 생각하기 때문입니다. 하지만 개발자는 어디까지나 개발자입니다. 완벽하게 사용자일 수 없습니다. 온전하게 컴퓨터를 제대로 알지 못하는 사용자 말입니다. 시시때때로 경고창과 말도 안되는 에러 메세지를 띄워서 사용자에게 선택을 강요하는 것은 개발자가 생각하는 사용자에 대한 사용성일 뿐입니다. 사용자들은 그것들을 원하지도 않고, 오히려 불편해 한다는 사실을 이 책은 적나라하게 보여주고 있습니다.

제가 생각하는 한국의 웹은 아주 심각할 정도의 개발자들의 웹입니다. 온통 신기하고 제멋대로인 웹이 지천에 널려 있습니다. 사용자들은 이 불편한 웹을 매번 새롭게 교육받으며 몇번의 시행착오를 거치며 적응해 가고 있습니다.

UI/UX를 떠들면서 우리는 항상 사용자 입장에서 생각한다라는 말을 합니다. 하지만 진정 사용자가 누구였는지를 고민하지 않았습니다.

처음 이 책의 제목을 접했을때 나는 단지 윈도우(또는 맥)의 소프트웨어를 만드는 사람들에게 딴지를 거는 것이겠지 싶었습니다. 하지만 저자는 윈도우와 웹을 폭넓게 껴 안으며 사용자를 무시하는 모든 개발자들을 싸잡아 '바보'로 만들었습니다.

너무나 속이 후련하고 시원합니다. 만약에 당신의 상사가- 대리나 팀장, 과장이나 부장이나 심지어 실장이나 이사라고 할지라도- 정말 바보같다고 느껴진다면 이 책을 읽어보라고 말 하시기 바랍니다. 저는 이 삼품평으로 인해 출판사가 돈을 더 벌고 저자가 비싼 음식을 먹게 할 마음은 추호에도 없습니다. 가까운 도서관에 이 책이 있다면 공짜로라도 보시기를 바랄 뿐입니다. 지인중에 누군가 이미 이 책을 사서 보았다면 빌리거나 복사라도 해서 읽어보시길 바라는 겁니다.

개발자들은 너무나 소심해서 자신을 향해 '바보'라고 욕을 해대면 화를 낼지 모릅니다. 하지만 최소한 그렇게 부끄러워할 줄 아는 개발자라면 이 책을 읽고 사용자에 대한 생각을 고칠수 있을것이라고 생각합니다.

장애인차별금지법 시행에 대한 토론

지난주 한국 웹 접근성 그룹 에서 장애친차별금지법에 대한 토론이 있었다.
참여하고 싶었지만 낯을 가리다가 그만 신청 타이밍을 놓쳐 버렸다.

언론에서 지난해 말부터 장차법에 대한 기사를 속속 내놓고 있기는 하지만
뭐랄까 시행을 3개월 정도 앞둔 시점에서도 아직 많이 알려지지 않은것 같다.

오늘 몇몇 기획자와 디자이너 분들께 장차법에 대해 들어봤냐고 물어봤지만
한결같이 처음 듣는다는 답변 뿐이었다.

정작 이 법률에 영향을 받을 업계의 종사자들도 태반이 모르고 있을진데
일반인들은 오죽할까 싶다.

아무래도 대다수의 웹기획자나 개발, 디자이너들은 웹접근성 강화가
클라이언트의 요구와 웹기획자의 기획, 웹퍼블리셔의 수완으로 해결되는 것쯤으로 인식하는 것 같다.

웹에 종사하는 모든 사람들이 공통으로 이해하고,
지식을 갖추어야만 완벽한 웹표준화를 이루고,
웹접근성을 높일수 있는 것인데 말이다.
그래야 장차법을 준수하는 웹사이트를 만들어낼 수 있는데 말이다.


발등에 불이 떨어져야 그때야 불이 뜨거운줄 아는 한국사람들-
뜨겁다고 알려주는 사람이 있을때 미리 대비하고 준비하는 모습들을 가졌으면 좋겠다.

마크업이야? 메이크업이야?

내가 처음 HTML을 접한건 1997년 겨울이었다. 우연히 서점에 들렸다가 인터넷이라는 생소한 제목을 달고 있는 책들 틈이 머뭇거리게 되었고, 그 중에 HTML을 소개하는 책 한권을 손에 들게 되었었다. 나는 그날 이후로 HTML에 대해 공부했고, 궁금해했고, 찾아보게 되었다. 적지 않은 관련 서적을 구입하면서 공부했고, 처음으로 개인홈페이지를 만들었다. 동아리 홈페이지도 만들었고, 학교 홈페이지도 만들었다. PC통신을 연구하던 동아리는 내 의지로 홈페이지 연구반이 되어 버렸고, 나는 국어국문학과에 가서 인문대답지 않은(?) 홈페이지를 만들어서 엉뚱하게 유명한 학생이 되어 버리기도 했었다. 교육컨텐츠를 제작하는 회사에 들어가 반년간 드림위버를 이용한 코딩일을 하기도 했고, 처음으로 웹에이젼시에 들어가 커다란 사이트를 개발하는 프로젝트에 참여하기도 했다. 그렇게 나는 학교와 업계를 왔다갔다 하면서 웹퍼블리싱 공부를 하고, 경력을 쌓아갔었다. 그 와중에 내게 조금은 특별한 경험이 있었는데 2001년 봄 내가 다니던 고등학교에서 방과후 특별수업을 할수 있는 기회가 주어졌었다. 그때 나는 스무명 남짓의 학생들(얼굴도 알아볼 수 있을만큼 가까운 후배들)을 앉혀놓고 홈페이지 수업을 했었는데 첫 수업은 아직도 기억에 남아 있다.

칠판에 HTML이라고 써놓고 학생들에게 이게 무슨 뜻인지 아느냐고 물었다. 당연하지만 모든 학생들이 입을 다물고 나만 바라보고 있었다. 잠시 지켜보다가 동아리 후배이기도 했던 학생에게 직접 물었다. 학생은 화면을 꾸며주는 인터넷 언어입니다. 라고 대답했다. 그리고 나는 칠판에 다시 썼다. Hypertext Markup Language 라고.

어떤 책이었는지는 정확히 기억나지 않지만 2000년대 이전의 꽤 많은 책과 웹사이트에서 HTML을 Hypertext Makeup Language라고 가르쳐주고 있었다. 당영한 이야기이지만 이건 틀린것이다. 우린 HTML의 M이 Markup의 약자라는 사실을 너무나 잘 알고 있다. 하지만 그땐 그랬다. 메이크업과 마크업의 차이를 알지 못했다. 번역자의 실수일수도 있고, 검수자의 무지에서 비롯된 것일수도 있었다. 어찌되었건 덕분에 HTML을 잘못 이해해버린 사람들을 만들어 버렸다.

메이크업은 화장술에 쓰이는 용어이다. 보통 기초화장 뒤에 하는 색조화장을 말하는데, 조금 다른 분야에서 사용되더라도 그 의미는 크게 벗어나지 않는다. 그럼 HTML을 메이크업이라고 풀이했을때 어떻게 될까?

하이퍼텍스트는 화면을 꾸미는 언어가 된다!

아 이 얼마나 이해가 쉬운 풀이인가!! 내 첫 수업때 화면을 "꾸미는"이라고 대답했던 학생이 결코 죄가 없음이다. 나 역시 한때 그렇게 알고 있었으니까.

다행히도 난 당시 메이크업이 잘못된 것이고, 마크업이 맞다는 것을 알고 있었다. 그리고 학생에게 "꾸미는"이 아니라 "구조화하는" 것이라고 설명하는데 애를 써야 했다. (하지만 아쉽게도 당시의 난 구조화라는 풀이만 알았다. 스타일시트를 통한 표현의 분리까지는 이해하지 못했었다.)

그런데 아쉽게도 아직도 HTML을 웹을 꾸미는 언어쯤으로 생각하는 사람이 많은것 같다. 수 많은 웹기획자와 웹디자이너, 웹개발자들 말이다. (웹퍼블리셔들 가운데에도 있을 것이다) 웹기획자는 고객에게 어필할수 있는 화면을 고민하고, 웹디자이는 자신의 작품을 완벽하게 브라우져화면에 띄워주는 목적으로 HTML을 사용하거나 이해한다. 중간에 웹퍼블리셔가 아무도 알아주지 않는 마크업 작업을 했더라도! 웹개발자는 HTML을 조각조각 쪼개는것도 모잘라 온갖 서버측 스크립트 언어로 바꿔 버림으로써 디자인과 HTML, 스크립트가 하나되는 삼위일체의 꿈을 완성(?) 시켜준다.

요즘 우리가 고민하고 있는 웹접근성 향상과 웹표준화 작업은 애초에 Markup을 Makeup으로 오해하지 않았더라면 이만큼 늦게 깨닫지도 않았을 것이며, 이렇게 답답해하지 않았을수 있었을텐데라는 아쉬움이 든다.

XHTML로 바꾸지 말아야 하는 이유 Top5

1. 시간제로 일하고 있는 경우
2. 가능한 모든 브라우저나 기기에 대한 모든 버전에 맞게 여러 개의 페이지를 만들기를 즐기는 경우
3. 머리 속에서 그냥 무조건 하지 말라고 하는 경우
4. 웹 사업을 그만 두려고 하는 경우
5. XHTML을 사용할 줄 모르는 경우

<제프리 젤드만의 웹표준 가이드 2ed 발췌>

내가 HTML을 버리고 XHTML로 가고자 하는
이유는 적어도 위 다섯가지에 포함되지 않을 것이라는 확신때문이다.

어제 웹표준가이드(2ed)를 완독했다. 기술서라기 보다는 실무에서 와닿는 이해와 설명이 많은 책이었는데 우리가 웹접근성을 향상시키고, 웹표준화를 배우고, 적용하면서 왜? 왜지? 왜일까? 라고 수없이 물음표를 달았던 것들에 대한 느낌표를 달아주는 책이었지 않나 싶다.

책을 다 읽고 가장 먼저 회사의 기획자 한분께 바로 건네면서 꼭 읽어보시라고 했다.

나와 같은 웹퍼블리셔는 물론이거니와 웹디자이너, 웹개발자, 웹기획자까지
웹에서 손가락을 묻어놓고 먹고사는 모든 사람들은 꼭 한번 읽어봤으면 하는 책임에는 틀림없는것 같다.

-

다만, 급하게 번역을 하여서인지 오타도 더러 보였으며, 문장도 다소간 어색한 부분이 있어 아쉽게 느껴졌다.