최악의 웹 디자인 실수와 대응책

브라우저 | 애플리케이션
최악의 웹 디자인 실수와 대응책
2011.12.13 Michelle Mastin | PC World .

지오시티가 사라지고 어도비 플래시가 죽어가면서 이제 웹 디자인으로 재미를 줄 수 있는 것이 없어졌다고 생각할 수도 있다. 하지만 걱정하지 말라. 많은 기업들이 여전히 성가신 방법으로 플래시를 사용하고 있으며, 애니메이션 GIF가 여전히 웹의 어두운 구석을 위협하고 있으며, 방문자 수를 표시하던 영역은 이제 소셜 위젯으로 도배되고 있다. 이것만이 아니다, 횡스크롤 웹 사이트, 배경과 같은 색의 텍스트, 여전히 자동으로 배경 음악을 재생하는 웹 사이트 등 우리르 즐겁게 해주는 웹 사이트는 아직도 많다.  editor@itworld.co.kr

전면 플래시 웹 사이트
보고 싶지만 볼 수 없는 사이트이다. 웹은 점점 HTML5로 옮겨가고 있으며, 플래시 지원은 약화될 것이다. 설사 모바일 디바이스가 플래시를 지원한다고 해도, 사용자 경험은 그리 좋지 않다. 사용자는 터치로 마우스 롤오버를 활성화시킬 수 없기 때문에, 만약 웹 사이트의 대부분의 플래시를 기반으로 한다면, 사람들과는 멀어질 수밖에 없다. 일부 브라우저는 플래시 플레이어가 없다는 알림 메시지도 띄워주지 않고, 그저 검은 화면만 보여주기도 한다. 방문자에게 절대 좋은 인상을 주지 못할 거이다. 정 동영상을 사용해야 겠다면, HTML5 비디오나 리치 콘텐츠, 동적 내비게이션을 고려하기 바란다.

질 나쁜 전면 플래시 웹 사이트
전면 플래시 웹 사이트보다 더 나쁜 것도 있다. 바로 대충 만든 전면 플래시 웹 사이트이다. 이 연회장 사이트는 커다란 플래시 애니메이션 하나가 브라우저에 맞춰 확대되도록 되어 있다. 하지만 이런 구성은 브라우저의 화면 비율이 다를 때 문제를 일으킨다. 여기에 더해 자동으로 빌리 아이돌의 노래를 재생하고, 건너뛸 수 없는 동영상 인트로, 그리고 제대로 발음하기 어려운 이름까지 여러 가지 나쁜 조건을 갖추고 있다.

열악한 텍스트와 배경색의 대비
사이트를 만드는 사람은 설사 약간 어두운 푸른 색 배경에 약간 밝은 푸른 색 텍스트를 배치하더라도 내용을 읽을 수 있을 것이다. 하지만 방문객은 절망적인 기분을 느낄 수 있다. 그리고 방문자가 사이트의 내용을 쉽고 빠르게 읽을 수 없으면 어떤 일이 일어나겠는가? 사람들은 탭을 닫아버리고 검색 결과의 다음 사이트로 가버린다.
아래의 화면은 이 사이트에 적합한 대비를 나타낸 것이다. 그리고 텍스트를 이미지화해서 표시하면 안되는 이유가 되기도 한다. 이미지화해 버리면 이처럼 강조하거나 크기를 조절할 수 없게 된다.

의문스러운 색상 선택
이 사이트는 “더 이상 컬러풀해지기 어려운 방법 시도”라고 이름 붙여야 할 것이다. 통일된 색상 구조는 페이지를 깔끔하게 만들 뿐만 아니라 브랜드에 통일성을 부여해 방문자에게 더 강한 인상을 줄 수 있다. 그래서 버라이즌은 빨간 색을, AT&T는 파란 색을을 사용하는 것이다.
이번 예에서는 왼쪽의 원래 사이트를 한 가지 색으로 바꾸고, 강조해야될 부분인 "Feature Articles" 역시 조금 더 보기 쉽게 만들었다.

의문스러운 폰트 선택
어떤 웹 사이트도 사이트 전체를 Comic Sans 폰트로 만들어서는 안된다. Comic Sans 폰트로 전체 사이트를 만드는 것보다 더 나쁜 것은 아마도 페이지 전체에 걸쳐 모든 폰트를 섞어 사용하는 것 정도일 것이다. 보여주고자 하는 콘텐츠의 색상과 맞는 폰트와 간격을 골라보기 바란다.
이 사이트는 또 한 가지 실수를 했는데, 브라우저 창을 조금만 좁히면 가운데 칼럼이 공백이 되어 버린다(아래 이미지).

산산히 부서진 레이아웃이여!
아마도 이 페이지는 IE6에서는 괜찮게 보일 것이라고 생각한다. 하지만 크롬에서 잡은 스크린샷에서는 모든 요소들이 여기저기 흩어져 버린다. 최소한 세 가지 최신 브라우저에서 레이아웃을 확인해 보고, 현재의 웹 표준에 맞춰려고 노력해야 한다. 여분의 돈을 준비해 몇 년에 한 번 정도는 사이트를 리디자인해야 한다. 웹 표준은 진화하고 있고, 빠르게 변화하기 때문에 1998년에 상을 탄 뛰어난 웹 디자인이라도 최신 파이어폭스에서는 제대로 돌아가지 않을 수 있다.

당황스러운 횡 스크롤
수많은 콘텐츠를 단일 웹 페이지에 담는 것은 어려울 수 있지만, 이때 필요한 것은 좋은 내비게이션이다. 만약 불가피하게 수평 스크롤이 필요하다면, 레이아웃을 다시 생각해 보기 바란다. 최신 노트북에는 멀티터치로 횡스크롤을 할 수 있는 기능이 탑재되어 있기는 하지만, 대부분의 노트북과 데스크톱에서 사용하는 마우스는 수직 스크롤만 지원한다. 수평 스크롤은 방해가 될 뿐아니라 사람들이 예상하지 못하는 것이기 때문에 방문자들이 옆쪽에 잇는 콘텐츠를 못볼 가능성도 높다. 모든 콘텐츠를 수용할 수 있도록 좀 더 심도 깊은 메뉴 구조에 대해 연구해 보기 바란다.

애니메이션 GIF 도배
이번 사이트는 플래시 위젯과 애니메이션 GIF 과다의 극단적인 예이다. 하지만 양이 어떻든 간에 좋지 않은 아이디어이다. 번쩍거리는 것들은 주의를 분산시켜 방문자가 실질적인 웹 사이트 내용을 보지 못하도록 한다. 이 사이트는 무엇인가 한 가지에 집중하기가 어렵다. 레이아웃을 정리한 다음에 정말로 강조해야 할 것 한두 가지만 선택하기 바란다. 그리고 사이트의 핵심 내용이 아닌 위젯이나 다른 요소는 중앙에 배치하지 말라.

웹 2.0 스타일의 소셜 위젯
방문자 수와 웹 배너가 줄어들면서 새로운 위젯들이 웹 사이트를 밝히기 위해 등장하고 있다. 물론 방문자들에게 자사의 트위터 피드나 페이스북 페이지, RSS 피드, 유튜브 채널을 알려주는 것도 중요하지만, 배가 산으로 가기가 쉽다. 구식 플래시 배너가 사이트 로딩 시간을 잡아먹듯이, 너무 많은 소셜 위젯 역시 깔끔하고 날렵하고 신속한 페이지 로딩을 망칠 수 있다. 세 개 혹은 최대 4개 정도의 소셜 위젯을 골라 메뉴 근처에 잘 정리된 형태로 배치하기 바란다.

일반적인 콘텐츠 균형
모든 사람들이 자신들의 웹 사이트로 돈을 벌고자 하는 것처럼 보인다. 그래서인지 여기저기 광고가 많이 등장한다. 하지만 광고는 균형이 중요하다. 사이트에서 광고 때문에 진짜 콘텐츠를 찾기가 어려워진다면, 레이아웃을 다시 생각해 보거나 광고 매출의 비중이 얼마나 되는지 다시 생각해 보기 바란다. 이 사이트는 엄청난 광고를 담은 사이트의 전형적인 예는 아니다. 하지만 나쁜 웹 디자인에 대한 포스트를 광고 사이에 끼워넣는 아이러니를 보여준다. 그리고 좌우로는 5개의 공유 위젯과 3줄의 광고가 둘러싸고 있다. 그나마 광고가 오른쪽에 있어서 심하게 방해가 되지는 않는다. 사이트에서 가장 중요한 것은 콘텐츠라는 것을 확실하게 하기 바란다.

"업데이트를 못해 죄송합니다"
웹 사이트를 최신의 상태로 유지하는 것이 중요하지만, 업데이트의 내용이 더 중요하다. 만약 누군가 구글 검색을 통해 흥미로운 포스트를 찾아 왔다면, 내용이 몇 주 전의 것이라고 해서 문제가 되지는 않는다. 자주 업데이트를 못하는 것에 대해 사과하는 것을 자제하기 바란다. 그리고 뭔가 공유할만한 내용이 있을 때 업데이트하기 바란다. 이런 나쁜 습관은 개인 블로그에서 특히 심한데, 예로 든 이 페이지는 기업의 페이스북에서 가져온 것이다.

그곳에는 말씀이 없다
무엇보다도 실제 이 사이트에 들어가보면, 번쩍거리면서 빠르게 움직이는 네온이 방문객을 맞는다. 눈이 아플 정도로 빠르게 돌아가 글자를 읽기 힘들게 만들뿐 아니라 상단에는 가짜 경고 메시지, 비둘기가 화면 상단을 날아다니고, 하단에는 고양이가 뛰어다니고, 가운데 문은 마우스를 대면 벌컥 열린다. 무엇보다 나쁜 것은 IE에서 "훨씬 더“ 잘 보인다는 것이다.