효과적인 웹 디자인을 위한 10가지 법칙

by Smashing Editorial, January 31st, 2008

이 글은 (Smashing Magazine에 기고 되어있는 Smashing 편집부가 발행한 10 Principles Of Effective Web Design를 번역한 글입니다. 상당수의 의역이 포함되었음을 미리 말씀드립니다.

우리는 상세 구현에 대해서 이야기 하고자 하는 것은 아니다.(예를 들면, 검색창이 어디에 놓여야 하는지 등에 대해서) 이미 이전 기사에서 여러번 논의한 바가 있기 때문에, 이번에는 올바르게 사용된다면 더 세련된 디자인 결과물과 더 단순화된 정보 제공 프로세스를 보장할 수 있는 주요 원리들과 인간공학적인 측면, 효과적인 웹 디자인을 위한 방법들을 중심으로 이야기 할 것이다.

• 사용성에 관심이 많다면 우리가 전에 발간한10 Usability Nightmares와 30 Usability Issues를 읽어보길 바란다
• 계속해서 효과적인 디자인의 원리에 대한 글을 연재해나갈 예정이다. RSS-feed 등록을 해놓으면 글을 더 쉽게 접할 수 있다.

효과적인 웹디자인의 법칙

이 글에서 소개될 법칙들을 올바르게 사용하기 위해서는 먼저 유저들이 어떻게 웹사이트를 사용하는지, 어떻게 생각하는지 행동의 기본 패턴은 어떤 것인지에 대해 먼저 고민해 보아야 한다.

사용자들은 어떻게 생각하는가?

기본적으로 웹사이트에서 유저들의 습관은 매장에서 소비자들의 습관과 큰 차이가 없다. 방문자들은 각각의 새 페이지들을 보고, 텍스트를 대충 훑어보고 가장 흥미있어 보이거나 막연히 찾고 있던 정보처럼 보이면 클릭을 한다. 사실 대부분의 페이지는 눈길조차 주지 않는다.

대부분의 유저들은 클릭할 수 있는 부분이 뭔가 흥미있어보이거나, 쓸만해 보이거나, 자신에게 이득이 될 것 같을 때 바로 클릭해본다. 만약 새 페이지가 기대를 충족시키지 못하면, 바로 Back 버튼을 눌러서 전 페이지로 돌아가 탐색을 이어간다.

• 사용자는 컨텐츠의 질과 신뢰도를 중요시한다. 만약 페이지가 사용자에게 양질의 컨텐츠를 제공한다면 광고가 있어도, 디자인이 별로여도 이해하려 한다. 이것이 바로 수년간 디자인은 별로지만 양질의 컨텐츠를 제공하는 웹사이트들이 높은 트래픽을 얻게된 이유이다. 컨텐츠는 외형적인 디자인 보다 훨씬 중요하다.
• 사용자는 살펴볼 뿐, 읽지 않는다. 웹 페이지를 분석해보면, 사용자는 컨텐츠가 존재하는 페이지로 갈 수 있는 지점을 찾는다.

  
  사용자는 살펴볼 뿐, 읽지 않는다. 문장들 사이사이를 얼마나 듬성듬성 보게 되는지 살펴보라. 사람들이 살펴보는 프로세스를 도식화 해놓은 사진이다.

• 웹 사용자들은 인내심이 없고 즉각적인 만족을 원한다. 아주 기본적인 원칙: 만약 웹 사이트가 사용자의 기대를 충족시키지 못하면 디자이너는 일을 제대로 수행하지 못한 것이고 회사는 돈을 잃게 된다. 더 많이 생각해야 하고 직관력이 부족한 네비게이션은 사용자들이 사이트를 떠나서 대안을 찾게 만든다. [JN / DWU]
• 사용자들은 최선의 선택을 하지 않는다. 사용자들은 원하는 정보를 찾기 위한 가장 빠른 길을 찾는 것이 아니다. 사람들은 웹페이지를 순서대로 차근차근 살펴보지 않는다. 사용자들은 만족하기 위한 옵션보다는, 용납할 수 있는 옵션을 한다. 자신이 원하는 정보처럼 보일 면 바로 클릭을 해 볼 가능성이 높다. 최선의 선택을 하는 것은 어렵고, 오랜시간이 걸린다. 사용자의 최소한의 욕구를 충족시켜 주는 것이 더 효율적이다. [video]

  

  
  두 개의 그림에서 볼 수 있듯이 순서대로 읽는 것은 웹에 적용되지 않는다. 하단의 오른쪽 이미지에서 나타난 시선의 움직임을 보아라.

• 사용자들은 직관을 따른다. 대부분의 경우 사용자들은 설계자가 제공한 정보를 읽기 보다는 그냥 지나간다. Steve Krug에 따르면, 사용자들은 전혀 신경 쓰지 않기 때문이라고 한다. "만약 우리가 뭔가 할 것을 찾으면, 거기에 집중을 합니다. 그걸 사용하는데 무리가 없으면 어떻게 돌아가는지 이해가 되든, 되지 않든 중요하지 않습니다. 만약 사용자들이 당신이 설계한 대로 행동한다면, 당신은 훌륭한 디자인을 한 것입니다."
• 사용자들은 모든 것이 예측할 수 있는 범위 내에 있기를 바란다. 사용자들은 사이트에서 제공되는 정보를 자신이 경험했던 방식 안에서 일어나길 원한다. 예를 들면, 원하지 않는 새창이 뜨는 것을 바라지 않고, "뒤로" 버튼을 누르면 자신이 원래 있던 곳으로 가길 원한다. 그렇기 때문에 새 창으로 링크를 열지 않는 것은 굉장히 중요하다.

1. 사용자들을 생각하게 만들지 마라

Krug에 따르면 사용성의 첫 번째 원칙은 웹 페이지는 설명이 필요없도록 명확해야 한다는 것이다. 사이트를 만들 때, 꼭 명심해야 할 것은 사용자들이 뭔 가 결정을 하기 위해서 고민해야 하는 의문점을 만들지 않는 것이다.

만약 사이트의 구조와 네비게이션이 직관적이지 않다면 사용자들은 A에서 B까지 가는 단계에서 시스템이 어떻게 돌아가는지 이해하기 위해서 더 많은 것을 생각하고 궁금해 하게 된다. 명확한 구조와 적당한 시각적 단서들, 그리고 알아보기 쉬운 링크들은 사용자들이 그들의 목표로 갈 수 있는 길을 쉽게 찾을 수 있게 해준다.

예를 살펴보자. Beyondis.co.uk에서는 “beyond channels, beyond products, beyond distribution”라고 말하고 있다. 대체 어떤 의미인가? “F”-pattern에 따라서 판단해보면, 유저가 웹사이트에 들어오면 페이지가 로드되면 제일 처음 보게 되는 것이 이 세 문구이다.

물론 디자인은 사용자들이 어떤 서비스를 받게 될지를 예상할 수 있을만큼 심플하고 직관적이다. 이런 식으로 발생되는 것이 불필요한 의문점이다. 사용자들이 의구심을 갖지 않도록 하는 것이 디자이너가 추구해야 할 일이다. 문구에 대한 시각적 설명이 오른쪽에 배치되어 있다. 이미지와 문구의 위치를 바꾸기만 해도 사용성은 올라갈 것이다.

ExpressionEngine는 Beyondis와 굉장히 유사한 구조를 사용하고 있지만 불필요한 의문점을 없앴다. 더 나아가서 슬로건부분은 사용자들이 제공될 서비스의 무료버전을 다운받을 수 있게 기능적으로 접근했다.

방문자들이 생각해야 할 시간을 줄여줌으로써 방문객들은 시스템에 더욱 쉽게 접근할 수 있게 된다. 일단 이런 환경이 조성되어야 사용자들에게 시스템이 왜 유용한지 어떻게 이익이 될 수 있는지를 설명할 수 있는 것이다. 사람들은 당신의 웹 사이트를 어떻게 사용하는지 이해할 수 없으면 바로 나가버린다.

2. 사용자의 인내심을 시험하지 마라

방문자들을 지원하고자 하는 서비스나 툴에 대한 모든 프로젝트에서는, 사용자의 노력을 최소화 시키도록 해야 한다. 사용자들이 서비스를 테스트하고자 할 때, 더 적은 액션으로 사용할 수 있게 해줄 수록 더 많은 방문자들이 서비스를 사용할 것이다. 맨 처음 사용자들이 어떤 서비스일까라고 생각하고 왔을 때 계정을 만들기 위해서 긴 폼을 작성해야 한다면 더 이상 사용하지 않을 가능성이 높다 개인 정보에 대한 압력을 주지 말고 사용자들이 당신의 서비스나 사이트를 둘러볼 수 있게 해라. 그저 기능을 테스트 해보고 싶은 이용자에게 개인정보를 요구하는 것은 용납되기 어렵다.

37Signals의 개발자인 Ryan Singer의 말에 따르면, 사용자들은 기능을 사용한 이후라면 이메일 주소를 요구했을 때 기꺼이 제공할 것이라고 했다. 왜냐하면 이미 기능을 사용했고 그에 대한 결과값 또는 보상을 받을 것이라는 생각을 하게 되기 때문이다.

Stikkit은 친 사용자 서비스의 완벽한 예시라고 할 수 있다. 사용자에게 과한 요구를 하지 않고 편안하게 접근한다. 이런게 바로 사용자들이 웹사이트에 원하는 느낌인 것이다.

일단 Mite는 좀 더 많은 것을 요구하고 있다. 그렇긴 하지만 가로로 나열된 폼은, 스크롤을 사용하지 않아도 되기 때문에 30초 안에 등록을 끝낼 수 있게 해준다.

장벽이 없는 사이트는 구독이나 등록을 먼저 요청하지 않는다. 사용자 등록 자체만으로도 방문자 트래픽을 줄이는 충분한 요인이 된다.

3. 사용자의 관심을 집중시켜라.

정적 컨텐츠와 동적 컨텐츠를 같이 제공하는 웹 사이트에서 다른 요소들에 비해 사용자 인터페이스에서 더 많은 흥미거리를 제공하는 양상이 나타나고 있다. 당연한 이야기지만, 볼드처리된 문장이 일반 텍스트보다 눈에 더 띄고, 이미지는 텍스트보다 더 눈에 뛴다.

사람의 눈은 전혀 선형적 구조가 아니다. 그렇기 때문에 웹 사용자들은 멋진 것, 패턴, 모션등에 먼저 반응한다. 이런 연유로 인해 모션으로 이루어진 광고들이 눈에 거슬리고 시선의 흐름을 방해하는 이유이다. 하지만 마케팅의 관점에서 봤을 때는 이런 것들은 사용자들의 시선을 잘 이끌고 있는 것이다.

Humanized.com은 집중의 원리를 잘 사용했다. “free”라는 단어만이 재미있게 움직이면서 잔잔하게 정보를 제공하기 때문에, 사용자들의 시선을 잘 유도하고 있다. 제공되는 텍스트는 사용자들이 "free"의 제품을 어떻게 찾을 수 있는지에 대한 충분한 정보를 제공한다.

잔잔한 시각적 요소를 사용하여 사용자의 관심을 사이트의 특정 영역에 집중시키는 것은 방문자들을 A라는 지점에서 B라는 지점까지 그것이 어떻게 이루어지는지 생각하지 않고 따라가도록 도와준다. 사용자들이 의문을 더 적게 가질수록, 사이트를 더 잘 살펴볼 수 있게 되고 회사 사이트가 구축하고자 했던 것 보다 더 많은 신뢰를 쌓을 수 있다. 다시 말하면 사이트는 사용성을 최우선으로 두고 사용자들이 더 적게 고민할 수 있는 사용자 경험을 제공해야 한다.

4. 기능이 겉으로 드러나도록 해라.

최근의 웹 디자인들은 시각적 효과를 가미한 큰 버튼들을 통해서 사용자들에게 시각적으로 단계별 사용법을 제공한다. 설계적 측면에서 봤을 때에도 이런 것들은 나쁜 생각이 아니다. 오히려 사용자들에게 사이트의 컨텐츠를 쉽게 접근할 수 있도록 해주는 이런 가이드라인들은 굉장히 효과적인 방법이다.

Dibusoft.com는 이런 시각적 요소를 명확한 구조와 잘 결합시켰다. 사이트에는 사용자들이 바로 선택할 수 있는 9개의 메인 네비게이션 옵션이 존재한다. 선택된 색들이 좀 많이 밝은 편이기는 하지만 말이다.

어떤 기능이 사용가능한지 명확한 타입을 사용하는 것은 매우 성공적인 인터페이스 디자인을 위한 좋은 방법이다. 어떻게 작업했는지는 별로 중요하지 않다. 정말 중요한 것은 사용자들이 컨텐츠를 이해하기 쉬운지, 시스템을 편안하게 사용할 수 있는지가 정말 중요한 것이다.

5. 효율적인 문장을 사용하라.

웹은 출력물과 달라서, 글을 쓸 때 사용자의 취향과 브라우저 사용 습관을 고려해서 써야 한다. 광고같은 글은 읽지 않을 것이다. 이미지도 없고 볼드나 이탤릭 으로 강조된 부분도 없는 긴 글은 읽지 않는다. 과장된 언어 역시 무시해 버린다.

사업적인 얘기를 해보자. 귀엽거나 똑똑한 체하는 단어, 마케팅적 느낌의 단어, 회사에서 사용하는 단어, 친숙하지 않은 기술 단어는 가급적 피해라. 예를 들면, 만약 당신이 사용자들이 가입해서 사용하는 서비스를 만들었다면 "우리 서비스들을 탐험해보세요"보다는 "시작하세요!"가 낫고, 그 보다도 "가입하세요"가 낫다.

Eleven2.com은 요점만 보여주고 있다. 귀여운 듯한 용어, 과장된 문구등은 다 빼버렸다. 오로지 방문자들이 가장 관심있어 할 만한 가격만을 남겨두었다.

효과적인 작법을 위한 몇 가지 방안을 얘기해보자면

• 짧고 편안한 말을 사용해라. (가능하면 요점만 보여줘라)
• 보기 편한 레이아웃을 사용해라. (컨텐츠를 분류별로 구별하고, 단락을 나누고, 일정한 텍스트 블록의 흐름을 바꿀 수 있는 불릿이나 시각적 요소를 사용해라)
• 평이하고 목적성이 뚜렷한 말을 사용해라. (홍보는 광고처럼 보일 필요 없다; 사용자들이 왜 당신의 웹사이트에서 서비스를 사용하면 좋은지에 대한 납득할만한 이유를 제시해라)

6. 단순함이 생명이다.

“단순함을 유지하라(KIS)”는 원칙은 사이트 디자인의 최우선 목표가 되어야 한다. 사용자들이 디자인 사이트를 즐기는 경우도 있기는 하지만 대부분의 경우 디자인은 무시한 채 정보를 찾는다. 복잡하면 안된다. 단순해야 한다.

Crcbus은 깔끔하고 심플한 디자인을 보여주고 있다. 이태리어로 되어있기 때문에 무슨 사이트인지는 모를 수도 있겠지만, 어디가 헤더인지, 네비게이션인지, 컨텐츠인지 푸터인지는 바로 알 수 있다. 심지어는 아이콘들 마저도 정보를 충실히 보여주고 있다. 아이콘에 롤오버를 하면 해당 정보가 보여진다.

방문자의 입장에서 최고의 사이트는 광고도 없이 자신이 검색했던 내용과 정확히 일치하는 텍스트만 존재하는 것이 최고의 사이트이다. 그렇기 때문에 좋은 사용자 경험을 위해서는 프린트 버전이 제공되어야만 한다.

Finch는 깔끔하게 사이트에 대한 정보만을 보여주고 불필요한 정보에 휘둘리지 않고 필요한 옵션을 선택할 수 있게 해 놓았다.

7. 여백을 두려워하지 마라.

사실 여백의 중요성은 몇 번을 강조해도 지나치지 않다. 방문자들의 인지 시간을 줄여준다. 뿐만 아니라 화면상의 정보가 두드러지게 만들어준다. 방문자들이 사이트를 처음 방문하면 디자인의 레이아웃을 보고 이해하기 쉬운 정보가 있는 콘텐츠 영역을 나누어 낸다.

복잡한 구조는 읽기도, 살펴보기도, 분석하기도, 사용하기도 더 어렵다. 선 또는 여백으로 디자인 영역을 나눠야 한다면 여백으로 나누는 것이 더 좋다. 계층 구조는 복잡함을 줄여준다 (사이먼의 법칙): 시각적 계층 구조를 더 잘 만들 수록 컨텐츠가 더욱 잘 드러난다.

여백은 좋은 것이다. Cameron.io은 여백을 제일 중요한 디자인 요소로 사용했다. 결과론적으로 컨텐츠를 잘 볼 수 있는 레이아웃으로 표현되었다.

8. “시각적 언어”를 효과적으로 사용하라.

Aaron Marcus는 효과적인 시각 커뮤니케이션에 대한 그의 글에서, 스크린을 통해 “시각적 언어”를 사용하여 사용자와 대화하기 위한 세 가지 원칙 이 있다고 말한다.

• 조직화: 명확하고 모순되지 않는 구조를 사용자에게 제공해야 한다. 일관성, 화면 레이아웃, 컨텐츠의 관계와 탐색하기 쉽게 만드는 것은 조직화의 중요한 컨셉이다. 모든 요소에 대해서 똑같은 규칙이 적용되어야 한다.
• 최소화: 최소한의 시각적 요소와 단서를 사용해라. 가장 중요한 4가지 요소는 단순함, 명확함, 독특함, 강조 이다. 단순함은 사용자와의 소통을 위한 가장 중요한 요소다. 명확함은 모든 컴퍼넌트들은 모호하게 보이지 않게 디자인 되어야 한다는 것이다. 독특함은 다른 사이트와 구별되기 위해서는 반드시 필요한 중요한 요소다. 강조는 뚜렷하게 보여주기 위해서 가장 중요한 요소이다.
• 사용자와의 대화: 사용자의 사용 능력을 고려해야 한다. 사용자 인터페이스는 가독성 있고, 상징성 있고, 알기 쉬워야 하며, 컬러와 텍스쳐를 잘 사용하여 사용자와 성공적으로 대화할 수 있게 만들어져야 한다. 3서체 이내로 사용해라. 그리고 너무 긴 문구를 쓰지 않는 것이 좋다.

9. 규칙들을 잘 활용하라.

규칙이 정해져있는 사이트를 디자인한다고 해서 지루한 디자인이 나오는 것은 아니다. 사실, 규칙은 매우 유용한 것이다. 사이트가 어떻게 돌아가는 지 파악하기 위한 시간을 비약적으로 줄여준다. 예를 들자면, 모든 사이트의 RSS-feeds를 위한 디자인이 다 다르다고 생각해보면 얼마나 끔찍한 일이 벌어질지 생각해볼 수 있을 것이다. 이런 건 일상 생활에서 폴더를 이용해 데이터를 정리하거나 쇼핑을 할 때 물건의 위치등을 파악할 때 사용되는 기본 원칙과 전혀 다르지 않다.

규칙들을 이용해서 사용자들에게 자신감, 신뢰, 가독성, 사이트의 견고함을 보여줄 수 있다. 사용자의 기대치에 부응해라. 사용자들이 사이트 네비게이션, 텍스트 구조, 검색 위치등에 대해서 어떤 기대를 하는지 생각해보라. (더 많은 정보를 원한다면 Nielsen의 사용성 경고상자를 살펴보라)

BabelFish 사용: 러시아어로 된 Amazon.com

사용성 측면에서 일본어로 된 사이트를 예로 들어보자. (여기서 사용자들은 일본을 모른다고 가정하도록 하겠다.)로 페이지를 일본어로 번역하는 경우를 들 수 있겠다. 만약 규약이 잘 적용이 된 경우라면, 이상한 단어를 보여주기도 하지만 사용자들은 Babelfish를 이용해서 페이지를 다른 언어로 바꿔서 볼 수 있다.

Steve Krug은 정말 좋은 아이디어라는 확신이 있을 때만, 혁신적인 것을 적용하라고 제안한다. 하지만 그 외 일반적인 경우는 규약을 사용하는 것이 더 좋다.

10. 일찍 그리고 자주 테스트하라

잦은 사용성 테스트는 프로젝트가 심각한 문제에 빠지는 것을 방지하는 데 결정적 역할을 하기 대문에, TETO(Test early, test often)법칙이라고도 불리는 이 법칙은 모든 웹 사이트 프로젝트에 적용되어야 한다.

너무 늦은 테스트란 없다, 너무 적은 테스트라는 것도 없고 테스트를 하는 데 잘못된 이유도 없다. 대부분의 디자인에 대한 결정은 지역적 영향을 많이 받게 되어있다. 따라서 어떤 경우에서라도 납득이 될 수 없는 더 나은 디자인에 대한 답을 내놓기는 어렵다. 그래도 요구사항이라던지, 예산같은 측면을 고려한 관점에서 봤을 때 분석할 때 염두에 두어야 할 점은 있다.

꼭 알아두어야 할 중요한 점들 몇 가지:

• according to Steve Krug에 따르면, 한 명의 사용자라도 테스트 하는 게 안하는 것보다 낫다고 한다. 그리고 프로젝트 초반에 한 명 테스트 하는 것이 프로젝트 말미에 50명을 테스트 하는 것보다 좋다. Accoring to Boehm의 첫 번째 법칙에 따르면, 요구사항 분석과 설계에서 대부분의 에러가 파생되고 시간이 지날수록 해결비용은 점점 올라간다고 말했다.
• 테스트는 반복되는 프로세스이다. 이 말은 뭔가를 제작할 때, 제작, 테스트, 수정이 반복된다는 의미이다. 어떤 문제들은 사용자 테스트에 의해 발견된 다른 문제가 해소되기 전에는 발견조차 할 수 없을 것이다.
• 사용성 테스트는 항상 유용한 결과를 낳는다. 프로젝트 중 이미 제작한 것에 대해서나 들어갔어야 하는 데 빠져있는 것에 대해서나 더 나은 결과를 얻게 될 것이다.
• Weinberg의 법칙에 따르면 개발자 스스로가 테스트를 하면 안된다. 디자이너 역시 마찬가지 이다. 몇 주 동안 작업한 사이트는, 더 이상 신선한 관점으로 바라볼 수 없다. 왜냐하면 당신은 이미 그 프로젝트에 대해서 너무나도 잘 알고 있기 때문에, 테스터와 방문자의 관점으로 보는 것은 불가능하다.

결론적으로 말하면, 더 나은 사이트를 위해서는 반드시 테스트가 필요하다.

References

• Designing Effective User Interfaces by Suzanne Martin
• Summary on Web Design
• UID presentation (Flash)
• Research-Based Web Design & Usability Guidelines
• “The psychology of computer programming” by Gerald Weinberg
• “Designing Web Usability” by Jakob Nielsen [JN / DWU]
• “Prioritizing Web Usability” by Jakob Nielsen
• “Don’t Make Me Think” by Steve Krug
• “Usability for the Web: Designing Web Sites that Work” by Tom Brinck, Darren Gergle, Scott Wood
• A Summary of Principles for User-Interface Design