웹 디자인할 때 10가지 나쁜 습관

스위스의 웹 디자인 잡지인 CAP&Design 2006년 4월호에 실렸고, 456 Berea Street에서 요약한 웹 디자인할 때 10가지 아주 나쁜 습관(Ten deadly sins of web design)이라는 기사에 나온 10가지 사항을 인용해본다. 특히 우리 나라의 웹 환경에서 디자이너들에게 시사하는 바가 큰 것 같다. 각 항목에 대한 설명은 온라인 기사에서 제공되지 않기 때문에 넘겨 짚은 개인 의견이다.

Not following basic typographic rules (기본적인 글꼴 사용 규칙을 따르지 않는 것)

흔히 발견되는 문제는 아마도 글꼴을 pt나 px 등의 단위를 써서 고정된 크기로 디자인하는 것, 그리고 serif, sans-serif, monospace 등 generic font를 명시하지 않고 그냥 굴림 등 특정한 시스템에서만 나오는 글꼴만 지정하는 것, 가변폭을 써야 할 곳에 고정폭 글꼴을 쓰거나 그 반대의 경우, 지나치게 많은 글꼴을 쓰는 경우, 텍스트로 표현 가능한 내용을 쓸데없이 그래픽으로 그려 넣는 경우 등이 아닐까 싶다.

Being too creative with navigation (지나치게 독특한 네비게이션 방법을 사용하는 것)

우리 나라 사이트들의 정말 심각한 문제점 중의 하나이다. 메뉴를 무조건 플래시로 만들어야 고급스럽다고 생각하는 것에 플래시의 접근성도 전혀 고려하지 않고 무지막지한 마우스 포인팅 훈련을 시키는 메뉴들. 최근에 나이드신 아버지에게 컴퓨터를 가르쳐드리면서 다시 깨달았다. 마우스의 정확한 포인팅이 초보자들에 얼마나 어려운 것인지를. 마우스 포인팅 훈련을 강요하는 춤추는 플래시 메뉴를 나는 정말 싫어한다. 게다가 플래시 메뉴의 일관성도 없다. HTML의 하이퍼링크의 동작에 대해서는 비교적 예측이 가능하지만 플래시는 제작자가 마음대로 만들어버릴 수 있기 때문에 어떻게 동작하는지 매 사이트마다 예측하기 어렵다.

Creating a cluttered navigation system (혼란스러운 네비게이션 체제를 만드는 것)

네비게이션이 무지하게 복잡한 경우이다. 나는 이러닝 콘텐츠에서 그런 경우를 많이 본다. 이렇게 사용성을 고려하지 않은 콘텐츠에 대해서 학습자들은 다음 단원으로 넘어가는 것과, 다음 절로 넘어가는 것, 다음 페이지로 넘어가는 것을 항상 헷깔려한다.

Making sure the site requires certain technology to work (특별한 기술을 써야지만 사이트가 작동하도록 하는 것)

우리 나라엔 워낙 독특한 사이트들이 많아서 두 말한 필요가 없다. 특히 문제되는 것들은 공적인 서비스를 제공하는 정부, 정부 산하 기관, 은행, 대학, 사이버대학, 그리고 심지어 접근성을 고려해서 따로 만든 시각 장애인용 전용 페이지들이 모조리 Active X 깔라고 협박하는 현실. 그렇지 않으면 아무것도 할 수 없으니까.

Thinking that accessibility is only about blind people (접근성은 시각 장애인만 고려하면 된다고 생각하는 것)

가장 극적으로 접근성의 문제가 드러나는 장애인이 시각 장애인일 수 있다. 그러나 그것이 전부인 것처럼 시각 장애인용 페이지를 요상하게 따로 만들어놓고, 땡이다라고 버티는 정부 사이트들은 정말 문제이다. 뇌병변 장애인, 청각 장애인, 외국인, 컴퓨터를 잘 모르는 초심자, 노인, 저속 사용자 등 고려해야 할 계층은 많다. 따라서 시각 장애인용 사이트라는 것 자체가 말이 안 된다. 모두가 쉽게 볼 수 있는 사이트를 만들어야지.

Ignoring web standards (웹 표준을 지키지 않는 것)

다행히 최근에 웹 표준을 지킨 또는 지키려는 사이트가 소수이지만 조금씩 늘어나고 있다. 그러나 대부분의 대중적인 사이트들은 아직 한참 갈길이 멀다. 아직도 웹 표준이라는 것이 있기나 한 것인지 모르는 사람들이 많고, 더 심각한 것은 이상한 reference들이 표준인 것처럼 둔갑해 돌아다니고 그것이 코드 베끼기로 여기저기 퍼진다는 것이다.

Not keeping search engines in mind from the start (처음에 검색 엔진을 염두해두지 않고 제작하는 것)

화려한 사이트일 수록 기초 공사가 부실한 경우를 많이 봤다. 사이트 전체를 온통 프레임으로 만들어놔서 검색 엔진이 세부 페이지를 검색하지 못하거나 검색해도 소용없게 만드는 행위가 가장 많다. 두 번째는 기초중에 기초인 페이지 제목을 엉망으로 달아놓은 경우, 또는 엽기적으로 페이지 제목 부분에 자바스크립트를 써서 제목이 계속 바뀌게 만드는 경우도 있다. 세 번째는 페이지 내부 구조, 또는 여러 페이지들 사이의 구조가 전혀 드러나지 않는 경우이다.

Basing the site structure on your organisation structure (회사의 조직도에 따라 사이트의 구조를 만드는 것)

잘은 모르겠지만 아마 공급자의 입장에서 사이트를 논리적으로 구성해놓은 경우, 소비자의 입장에서는 편하지 않을 수 있다는 것을 말하는 것 같다.

Using grey text on grey background (회색 배경에 회색 텍스트를 사용하는 것)

이것 의외로 심각한 문제이다. 최근에 개정된 Web Content Accessibility 2.0 Working Draft에도 텍스트의 색 대비에 대해서 아주 구체적인 수치까지 언급이 되어있다. 웹 접근성을 고려한다고 하는 개발자들도 색상 대비에 대해서는 신경쓰지 않을 뿐 아니라, 색상 대비가 높은 것은 디자인이 촌스럽다며 일부러 흔히 말하는 파스텔톤의 흐릿한 텍스트를 본문 글꼴로 삼는 경우가 아주 많다. 약시자나 노인들은 글꼴 크기와 색상 대비에 매우 민감하다. 우리 회사에서 운영하는 시스템의 사이트를 화면 캡쳐해서 이러닝 과정으로 제작하거나 매뉴얼을 만드려다 보니 화면이 흐리게 나와서 상당히 애먹은 적이 있었다. 온라인으로 luminosity의 대비를 측정해주는 사이트에서 최소한 5:1 이상의 대비가 나오게 하라고 되어있다. 또 한 가지 기술적으로 주의할 것은 글꼴의 전경색을 지정했으면 반드시 배경색도 지정해주어야 약시자들이 글꼴색만 바꾸더라도 글을 못 읽는 사태를 방지할 수 있다는 것이다.

Skipping the feasibility study (타당성 조사를 하지 않고 넘어가는 것)

학습 과정을 만들 때에는 보통 학습자 요구 분석이라는 것을 한다. 아마 웹 사이트를 제작할 때에도 마찬가지일 것이다. 주 고객층이 누구이고, 그들에게 필요한 서비스가 무엇이고, 그것을 우리가 어떻게 만족시켜줄 지, 현실적으로 가능한 서비스인지 점검해보고, 제작에 반영해야 한다. 기사 원본이 없어서 어떤 내용으로 이 항목을 썼는지는 잘 모르겠다. 내가 느끼는 것은 이러닝 서비스에서 항상 성인 학습자들이 원하지도 않거나, 거의 참여하지도 않을 과도한 배경 이야기와 어설픈 상호 작용, 유치한 애니메이션과 스토리가 우리 나라 콘텐츠에 너무 많다는 것이다. 바쁜 성인들(또는 직장인들)에게 이런 콘텐츠들이 짜증만 더해주지는 않는지 궁금하다.