UX 비주얼 핵심 기초원리 [3/3]
마지막 에피소드
설마 이 글을 읽으려고 클릭을 했는데 1,2편을 안 보신 건 아니죠?
세 가지 에피소드로 이루어져 길다고 생각할 수도 있지만 애초에 3가지 에피소드로 나눈 의도가 매우 긴 하나의 글을 가독성을 높이고 콤팩트하게 만들기 위해서다.
브런치를 이용하는 유저라면 충분히 집중할 수 있는 길이의 글이고 2개의 편을 짧고 굵게 구성했기 때문에 아래의 링크를 눌러서 읽고 오는 것을 추천한다.
https://brunch.co.kr/@jgo1504/88
https://brunch.co.kr/@jgo1504/89
마지막 에피소드인 만큼 오늘은 4개가 아닌 5의 항목으로 구성되며 9번부터 시작한다는 점 잊지 말자.
9. 배열
요소들을 똑같은 경로로 배열하면, 그것들이 함께 연관되어 있다는 것을 유저로 하여금 느끼게 할 수 있다. 또한 그 주변의 다른 유사한 콘텐츠를 스캔하는 것을 더욱 쉽게 만든다.
앱이나 웹에서 봤던 표들을 생각해봐라. 각 칼럼에 콘텐츠를 배열할 때, 구분선이 따로 필요가 없다. 왜냐하면 당신의 눈은 데이터의 배열에 의해서 이 칼럼을 연관 짓기 때문이다.
또한 많은 웹사이트에서 이를 내비게이션 바(navigation bar, 우리가 흔히 사용하는 웹사이트의 메뉴이다.)와 함께 볼 수 있다. 로고와 모든 페이지의 링크들이 가로로 배열되어 있기 때문에, 당신은 즉시 이것들을 내비게이션 바처럼 연관 짓는다.
10. 요소의 근접성
요소들을 가까이 두는 것은 독자에게 그것들이 관련 있다는 것을 전달할 수 있다.
아래의 예에서, 요소들을 멀어져 있을 때, 당신의 눈은 콘텐츠를 쉽게 스캔하기가 어렵다. 가장 먼저 제목을 볼 때, 요약글이 떨어져 있기 때문에 당신은 따라가고 싶지 않을지도 모른다.
하지만 요소들이 가까울 때는, 콘텐츠를 스캔하기가 훨씬 쉽다. 왜냐하면 전자보다 후자의 배열일 때, 연관성의 확률이 더 높기 때문이다.
11. 레이아웃을 배열하는 규칙
디자인 레이아웃을 하기 위해 가이드와 격자를 사용함으로써, 모든 요소들을 명확하고 깔끔하게 배열할 수 있다. 이는 독자가 간단한 패턴에 따르는 것을 도와준다. 그들의 눈은 다음 차례로 시선이 어디를 향해야 하는지를 알고 그룹화와 배열을 통해서 각 그룹의 요소들을 가깝게 연관시킬 수 있다.
황금 비율과 같은 공식을 이용하는 것이 대표적인 예시다. 반대로 주요 요소를 부각하기 위해서 이러한 공식을 깰 수도 있다. 이는 디자인을 더욱 다이내믹하고 재밌게 만든다.
아래의 예를 보면, 깔끔한 배열을 위해서 격자무늬의 레이아웃을 사용하고 있다. 그러나 강조를 위해서 차 이미지가 격자 레이아웃을 무시하고 있다. 그리고 그것은 다른 것들로부터 독립적인 느낌을 주는 팝업 효과를 만들어낸다.
12. 모션 이미지 사용 효과
세계적인 웹 사이트들이 여전히 새로워지고, 모든 팝업이 당신의 주의를 끌기 위해서 깜빡이거나 통통 튀는 모션을 사용한 때를 기억하는가? 이러한 시도들은 우리의 관심을 끄는 데 성공했다. 그러나 이 과정에서 그것은 즐거운 경험 대신 짜증을 불러일으켰고 이는 전혀 도움이 되지 않았다.
요즘 우리는 똑같은 원칙을 주의를 끌거나 특정 영역에 중요성을 부여하기 위해 미묘하게 다른 방식으로 사용할 수 있다. 아래의 초콜릿을 보면 어떻게 미묘한 모션이 당신의 주의를 끌고 디자인에 현혹되도록 힌트를 주고 있는지 알 수 있다.
스크롤을 통해 맛을 선택할 때, 각 프로덕트에 맞게 색이 변한다. 마우스로 포장지 위를 움직이면 포장지가 열린다. 마치 초콜릿을 먹기 위해서 당신이 포장지를 찢은 것처럼.
(이는 직접 기사에 들어가서 gif로 보는 것을 추천한다. 모션이기 때문에 사진으로 설명하는 데는 한계가 있다. 기사에 있는 움짤을 보면 바로 이해가 될 것이다.)
13.UX 디자인에 올바른 비주얼 원리를 적용시키는 가장 좋은 방법
우리는 총 12개의 원리를 살펴봤다. 원리들을 사용하는 것은 매우 효과적이다. 하지만 무분별한 사용은 균형을 무너뜨리고 혼란을 야기시킨다.
그럼 어떤 기준을 가지고 어떤 원리를 적용시켜야 할까?
비주얼 원리는 특정 요소에 중요성을 부각하기 위해서 사용된다. 그러나 '가장 중요한 요소'라고 생각하는 요소가 많을수록 디자인을 완성하는 것은 더 어려워진다. 심플하게 시작하고 정말로 가장 중요한 한 가지의 요소에 집중해라.
비주얼 체계의 가장 큰 문제 중 하나는 모든 것들이 가장 중요하게 여겨질 때이다. 동료나 팀 멤버에게 모든 것이 얼마나 중요한지 설명했던 적이 있나? 그때 그들의 피드백은 다음과 같을 것이다.
"유저가 가장 먼저 보는 것은 제목이니깐 제목이 조금 더 커야 해"
"다른 것 보다 더 부각하기 위해서 저 글씨를 더 굵게 하자"
"눈에 띄게 하기 위해서 배경을 오렌지 색으로 하는 게 어때?"
아래의 사진이 이런 원리들을 조합한 결과다. 어떤가? 최악이다. 뭐가 중요한지도 모르겠고 디자인은 중구난방이다.
이 상황에서 당신은 한발 물러서서 생각해야 한다. 그리고 스스로에게 디자인의 목표가 무엇인지 질문해라. 당신의 타깃은 누구이며, 하나의 가장 중요한 것을 끌어내기 위해서 어떻게 정보 구조를 계획할 것인가? 이 질문에 대한 답을 함으로써, 당신은 앞선 12개의 원리를 효과적으로 사용하기 시작할 것이다.
총 12개의 실질적인 원리를 소개했다.
작가의 마지막 조언을 바탕으로 자신에게 필요한 원리를 선택해서 자신의 디자인에 맞게 활용하기를 바란다.
p.s. 오늘도 이 글은 읽은 당신, 그리고 글쓴이는 공부를 해냈습니다. 최소 한 발은 앞으로 나아간 것입니다. 앞으로도 함께 나아가도록 합시다.
피드백은 언제 환영입니다. 편하게 댓글로 적어주시면 성심성의껏 받아들이고 더 나은 콘텐츠를 위해 노력하겠습니다.
아디오스~
https://medium.com/thinking-design/key-principles-of-visual-hierarchy-in-ux-design-c17395949ed
