웹 UI 시각적 계층구조 이해하기

목차

훌륭한 예술가는 창의적인 것도 중요하지만 무엇보다, 구성, 색상, 크기, 무엇이 포함되는지와 같은 세부사항들을 고려해야 한다. 이중에서 아마도 무엇을 제외해야할지 생각하는 게 가장 중요할 것이다. 이는 쉬운 일이 아니다. 그래서 우리는 다빈치나 반 고흐 같은 거장들을 높이 평가한다.

웹 UI디자이너들도 그래야한다. 웹 UI의 모범사례(Web UI Best Practice)에서 논의된 바와 같이, 웹사이트는 그 자체로서 시각예술의 한 형태이며, 전통적인 예술형태의 동일한 규칙을 많이 따른다. 이는 미학의 과학, 비즈니스의 원칙과 혼합되어 있으며, 특별한 웹사이트는 쉬우면서도 매력적으로 느껴져야한다.

시각적 조직 만들기
야후!의 제품 설계 저자 겸 수석 책임자인 루크 로블르스키(Luke Wroblewski)는 논문: 시각적 계층구조를 통한 소통에서 웹 인터페이스의 시각적 프레젠테이션은 다음에 대해 필수적이라고 설명한다.

• 사용자에게 알리기 - 보이지 않는 손처럼 인터페이스는 사용자에게 부담을 주지 않고, 한 행동에서 다음 행동으로 안내해야 한다. 예컨대, 결제 프로세서 스퀘어는 당신이 아래로 스크롤할 때 그것의 가치를 알려주며, 각 단계의 조치를 취하기 위한 적절한 호출을 제공한다.

• 콘텐츠 관계 커뮤니케이팅 - 인터페이스는 사용자가 정보를 우선 순위화하는 방식과 일치하는 방식으로 콘텐츠를 제시해야 합니다. 예를 들어, 인기있는 디자인 웹 사이트 Abduzeedo는 상단에 넓은 범주, 중간에 있는 콘텐츠 및 바닥글에 있는 세부 범주를 포함합니다.

• 정서적 임팩트 만들기 - 사람들은 단순한 식사 이상의 것을 바라면서 레스토랑을 방문한다. 그들은 맛, 질감, 생김새, 그리고 기억에 남을 수 있는 분위기를 원한다. 인터페이스 디자인도 다르지 않다. 만약 여러분이 긍정적 감정의 반응을 보인다면, 사람들은 실제로 당신 사이트의 단점을 용서하기 쉽다. 예컨대, 우푸(Wufoo)는 편리하고 즐거운 인터페이스를 가진 사이트의 완벽한 사례이다.

UI 디자인의 최종 목표는 세 가지 질문에 답하는 것입니다.

1. 이것은 무엇인가? (유용성)
2. 어떻게 사용하는가? (사용성)
3. 왜 신경써야 하는가? (타당성)

1. 주사패턴: 인간 눈의 예측가능성
눈가에 휙 하는 움직임이나 길 건너 보이는 누군가의 섹시한 걸음걸이를 볼 때처럼, 인간의 눈은 자동적으로 특정한 관심 지점에 끌린다. 이 중 일부는 사람에 따라 다르지만, 대다수의 사람들은 명확한 경향을 따른다. 여기에는 웹 페이지를 보는 방법도 포함된다.

시각적 원칙에 관한 기사에서 99Designs의 디자인 작가인 알렉스 빅맨(Alex Bigman)은 왼쪽에서 오른쪽으로 읽는 문화에 대한 두 가지 주요 독서 패턴에 대해 이야기한다.

I. F 패턴
일반적으로 블로그와 같은 텍스트가 많은 웹사이트의 경우, F 패턴(F-Pattern)은 먼저 텍스트의 왼쪽 아래로 수직선을 스캔하여 단락의 초기 문장에서 키워드나 관심 지점을 찾는다. 독자는 자신이 좋아하는 것을 발견했을 때, 수평선을 이루면서 정상적으로 읽기 시작한다. 결과적으로 F나 E는 비슷하다. 웹 UI 패턴 2014에서 볼 수 있듯이 CNN과 NYTimes는 모두 F 패턴을 사용한다.

닐슨 노먼(Nielsen Norman)그룹의 제이콥 닐슨(Jacob Nielsen)은 232명의 사용자들을 통해 수천 개의 웹사이트를 스캔하는 가독성 연구를 수행하면서, F-Pattern의 실질적인 영향에 대해 상세히 설명했다.

• 사용자는 당신이 쓴 텍스트의 모든 단어를 거의 읽지 않는다.
• 처음 두 단락은 가장 중요하며, 후크를 포함해야 한다.
• 매력적인 키워드로 문단, 부제목 및 주요 항목(bullet point)을 를 시작하라.

위 이미지에서 더 자세한 콘텐츠(또는 콜투액션)는 바로 아래에 있는데, 이는 빠른 스캐닝을 통해 가장 중요한 콘텐츠를 몇 초 안에 볼 수 있게 한다. F 패턴은 콘텐츠를 훼손하지 않는 방식으로 광고를 내세우거나 행동을 취하게 하는 사이트에 매우 도움이 될 수 있다. 콘텐츠는 항상 왕이고, 사용자들이 더 깊은 단계에 참여하도록 하는 사이드바가 존재한다는 것을 기억하라.

모든 패턴과 마찬가지로 F 패턴은 "F"의 맨 위 행 이후로 지루하게 느껴질 수 있기 때문에 템플릿보다는 가이드라인이라고 한다. 아래에서 볼 수 있듯이 킥스타터(Kickstarter)는 디자인을 처음에 1000픽셀 이상으로 시각적으로 흥미롭게 유지하기 위해 일부 위젯(수평으로 배치)을 추가하였다.

Z-Pattern은 계층, 브랜딩 및 콜 투 액션과 같은 핵심 웹 사이트 요건을 다루기 때문에 거의 모든 웹 인터페이스에 적용할 수 있다. Z 패턴은 단순함이 우선이고, 콜 투 액션이 주된 테이크 어웨이 인터페이스에 이상적이다. 복잡한 콘텐츠가 있는 웹사이트에 Z 패턴을 강제하는 것은 F 패턴만큼 효과적이진 않으나, Z 패턴은 레이아웃을 단순화하거나 또는 전환률을 높이는 데 도움이 된다. 아래는 유의해야 할 몇 가지 권장 사항이다.

• 배경 - 사용자의 시야를 프레임워크 내에서 유지하기 위해 배경을 분리한다.
• 포인트 #1 - 이곳은 당신의 로고를 위한 최적의 위치다.
• 포인트 #2 - 화려한 2차 콜 투 액션을 추가하면 Z 패턴을 따라 사용자를 안내할 수 있다.
• 페이지 중심 - 페이지 중심에 있는 이미지 슬라이더에서 상단 및 하단 부분을 분리하고 Z 경로를 따라 눈을 안내한다.
• 포인트 #3 - 여기서 시작하여 하단 축을 따라 이동하는 아이콘을 추가하면 사용자가 포인트4에 있는 마지막 콜 투 액션에 도달할 수 있다.
• 포인트 #4 - 여기가 결승선이며, 주요 콜 투 액션의 이상적인 장소이다.

사용자의 눈이 어디로 갈지 예측하는 것은 큰 장점이 될 수 있다. 페이지의 요소를 배열하기 전에 가장 중요한 요소와 가장 중요하지 않은 요소를 우선순위를 정해라. 일단 사용자들이 무엇을 보기를 원하는지 알고 나면, 올바른 상호작용을 위해 패턴의 "핫 스팟"에 배치하는 것은 어렵지 않을 것이다.

웹 UI 모범 사례에 따르면, 상담 전에 더 많은 가치 제안이 필요하다고 생각될 경우 1-4 포인트를 반복하여 Z 패턴을 페이지 전체로 확장할 수 있다. 아래 보다시피, 에버노트(Evernote)는 "지금 가입하기”의 콜 투 액션으로 시작하여 사용자에게 몇 가지 판매 포인트를 안내하고, 결제 옵션 콜 투 액션을 통해 “반복된 Z 패턴"을 완성하는 방식이다.

2. 대조 : 관심사 생성
대조의 사용법을 가장 잘 설명하기 위해 루크 워블루스키(Luke Wroblewski)에게 돌아가 보자. 분명히 말하면, 대조는 서로 가깝게 위치한 두 개의 서로 다른 요소에서 발생하는 일이다. 웹 UI 디자인에서 이런 요소들은 중요한 요소를 지정하기 위해 색상(제 5 장 참조), 질감, 모양, 방향 또는 크기가 될 수 있다.

크기가 다른 폰트와 색을 번갈아 사용하면 인터페이스에 즉각적인 계층 구조가 생성된다. 예컨대, 아래에서 거듭되는 대조를 보자. 배경이 밝다가 어둡게 변했을 때 탐색 메뉴에서 “무료로 사용해보세요” 가 주요 콜 투 액션이고, 두번째는 “연락 바랍니다” 콜투액션으로 즉각 구분된다. 사이트의 Z 패턴과 결합 된 이 처치방식은, 이메일 제출 폼에 이어 중간 페이지 탐색 메뉴가 강조되는 명확한 시각적 계층구조를 제공한다.

브랜든 존스(Brandon Jones)는 인터페이스에서 색과 크기의 사용이 물체의 첫인상에 어떤 영향을 미치는지 살펴본다. 아래의 이미지를 예로 들면, 대부분의 사람들은 한눈에 두 개의 원을 보지 않을 것이다. 대신 그들은 "검은 원과 더 작은 빨간 원"을 볼 것이다. 이렇게 차별화는 인간의 기본적인 반응이므로 인터페이스 항목의 대조는 매우 강력하다.

3. 거래의 도구 : 색, 크기, 공간
웹 인터페이스를 "페인팅"할 때 색상, 크기 및 공간과 같은 가장 강력한 시각적 도구를 사용하도록 기억하자. 알렉스 빅맨(Alex Bigman)은 색상과 크기가 주의를 집중시키는 반면, 간격은 시각적 상관관계를 관리하는 데 도움이 된다고 말한다.

I. 색상
한 마디로 밝은 색은 차분한 색에서 두드러진다. 이는 당연하게 생각될 수 있겠지만, 실제로 중요한 것은 그것의 실적용이다.: 당신은 이를 이용하여 당신이 원하는 곳에서 사용자의 주의를 끌 수 있다. 또한 특정 색상은 전체 사이트의 분위기를 조성하는 데 도움이 될 수 있다(파란색은 평온하고 붉은 색은 공격적이다와 같이).

위의 Z 패턴 인터페이스에서 핏비트(Fitbit)의 색상 사용은 특히 영리하다. 마젠타 처럼 밝은 색을 사용하면 시각적 계층 구조의 맨 위에 콜 투 액션을 배치 할 수 있으며 “Get Active”의 버튼 색과도 일치한다. 즉, 두 개념이 연결되어 있음을 무의식적으로 알려준다. 유사한 색상인 파란색은 피트니스 목표와 제품 섹션에서도 사용되는데, 이 섹션은 교묘하게 둘 사이의 연관성을 만들어내며 인터페이스의 가장 중요한 부분으로 클릭을 유도한다.


II. 크기
특히 텍스트의 경우, 크기는 왼쪽에서 오른쪽으로 읽기와 위로 읽기와 같은 전통적인 규칙을 우회한다는 점에서 강력한 도구이다. 예컨대, 오른쪽 아래 구석에 있는 큰 단어나 구절이 사람이 읽는 가장 첫 번째 단어일 수 있다. 더불어, 크기는 실제 메시지나 내용에 중점을 두어 더욱 의미를 부여한다.

스매싱 매거진(Smashing Magazine)이 50개의 인기 웹사이트 인터페이스를 대상으로 한 타이포그래피 연구는 헤딩은 대개 18~29픽셀 사이이며, 바디 카피는 12~14픽셀 사이라는 것을 발견했다. 물론, 이것은 단지 가이드라인일 뿐이지만(그리고 콘텐츠가 많은 사이트에 더 많이 적용될 것이다), 당신은 여전히 비례감을 유지하길 바랄것이다.


III. 공간
웹 UI의 모범사례(Web UI Best Practice)에서 논의 되었 듯이, 무언가를 예쁘게 만드는 가장 중요한 기법 중 하나는 그 예쁜 것을 절대적으로 없애는 것이다. 매력적인 이미지를 너무 많이 섞으면 모든 것을 빠르게 망칠 수 있다. 웹 인터페이스에도 호흡할 수 있는 공간이 있으며 밖으로 내보내서 정리하는 게 중요하다. "시각적 소음"의 양을 줄이면 당신은 더 머물러있고 싶게 될 것이다.

사실, 우사우라(Usaura)의 설립자인 드미트리 파데예프(Dmitry Fadeyev)는 공백이 실제로 이해력을 증진시킨다고 조언한다. 2004년 한 연구에 따르면, 공백의 전략적 사용이 이해력을 약 20% 향상시킨다는 것을 발견했다. 공백은 사람들이 웹사이트에서 수행하는 방식에 영향을 주지 않았지만, 사용자 만족도와 경험에는(더 중요하지는 않지만 똑같이) 영향을 미쳤다. 위에서 볼 수 있듯이, 후즈(Houzz)가 사용하는 큰 콘텐츠 마진, 패딩, 단락 간격은 콘텐츠를 읽기 쉽게 만든다.(그리고 링크와 사이드바와의 상호작용을 권장한다).


4. 시각적 계층 테스트: 블러 테크닉
인터페이스 요소들이 시각적 우선 순위에 미치는 영향에 대해 살펴보았으므로, 이제 계층 구조를 테스트하는 간단한 방법을 알아보자. 랙스페이스(Rackpspace)의 디자이너, Lee Munroe는 우리가 블러링 기법(Blurring Technique)라고 부르는 훌륭한 방법을 제시한다.

기본적으로, 사이트의 흐릿한 버전에서 어떤 요소가 눈에 띄는 지 확인하라. 당신의 눈에 띄고 싶은 게 아니라면 되돌아가서 수정해야 한다. 흐릿한 버전은 시각적 계층구조를 요점으로 표현하여, 주의를 산만하게 하지 않고 인터페이스를 신선하게 평가할 수 있다.
시력(또는 바를 통해 보는 여정)을 아끼려면 사이트의 스크린샷을 찍고 포토샵에서 5-10픽셀의 가우시안 블러를 추가해라.

우푸의 홈페이지는 블러 테스트를 통과한다. 가입하기와 제품의 기능 버튼이 주요한 항목이기 때문이다. 둘 다 어떤 홈페이지에서든 우선순위가 되어야 한다. 가입하기 바의 모양은 눈에 띄게 하는 반면, 기능 버튼 주위의 공백은 “호흡할 수 있는 공간”이 되어 두드러지게 한다.


마치며
시각적 계층구조를 이해하고 디자인 패턴을 적용하는 것은 좋은 웹 UI 디자인에서 가장 중요한 두 가지 기술이다. 그것들은 근본적이며 상호 연관되어 있다. 일단 당신이 정보를 시각적으로 우선 순위를 매기는 방법을 알게 되면, 기존의 디자인 패턴을 적용하는 방법을 더 잘 이해할 수 있을 것이다.

사용자가 정보를 검색하는 방법에 따라 인터페이스의 우선 순위를 지정해라. 그런 다음 강조를 더하기 위해 색상, 대비, 크기 및 간격을 적용하라. 학습 곡선을 단축하기 위해 UI 패턴 및 패턴탭과 같은 UI 패턴 리소스로 전환할 수도 있다.

에어비앤비, 우푸, 링크드인 등과 같은 우수 기업의 사례를 기반으로 웹 인터페이스를 구축하는 방법에 대한 실질적인 조언은 웹 UI의 모범사례를 참조해라.

저자 : Chris Bank
원문 링크: https://www.awwwards.com/understanding-web-ui-visual-hierarchy.html
*무단 전재 및 재배포 금지(링크 공유 가능)

피드백은 d.dok.newsletter@gmail.com 으로 남겨주세요. 추천하고 싶은 영문 아티클 역시 링크를 남겨주시면 검토 후 번역하여 보내드립니다.

디독
d.dok.newsletter@gmail.com
- -
수신거부 Unsubscribe