시각적 계층 구조란 무엇일까요?
크기, 여백, 색상, 대비 등을 통해 매력적인 스토리를 만드는 능력
시각적 계층 구조(Visual Hierarchy)란 무엇일까요?
우리는 모든 요소가 동일하지 않다는 것을 알고 있습니다. 모든 UI 요소가 올바른 방식으로 구성되고 구조화되어 잘 만들어진 애플리케이션에서는 사용자가 제품을 쉽게 이해하고 자연스럽게 탐색할 수 있습니다. 시각적 계층 구조란 크기, 여백, 색상, 대비 등을 통해 매력적인 스토리를 만드는 능력이며 모든 디자이너가 연마해야 하는 매우 중요한 기술입니다.
시각적 계층 구조는 사용자가 각 요소의 중요도 수준을 이해할 수 있도록 내용을 보여줍니다. 이 경우 사용자는 어떤 작업이 애플리케이션의 주요 작업인지 쉽게 알 수 있습니다.
비즈니스 목표에 맞게 조정하세요!
모든 응용 프로그램은 다른 목적을 가지고 있습니다. 예를 들어 호텔 예약 애플리케이션에서, 디자이너들은 시각적 계층 구조를 통해 해당 앱의 주요 목표가 객실이나 호텔을 예약하도록 하는 것임을 나타낼 필요가 있습니다.
여기에서 저는 에어비앤비를 예로 들고 있는데, 웹사이트의 주요 목표인 '예약' 버튼이 이 화면에서 가장 많은 주목을 끌고 있는 요소임을 알 수 있습니다.
애플리케이션에 설정된 비즈니스 및 마케팅 목표를 생각함으로써 디자이너는 효과적으로 시각 콘텐츠의 우선순위를 정하고 제품을 다른 제품보다 돋보이게 만들 수 있습니다.
크기가 전부(는 아니)예요!(Size is (not) everything!)
요소 간의 계층 구조를 만드는 가장 확실한 방법은 다른 요소를 다른 크기로 조정하는 것입니다.
그리고 이는 가장 중요한 요소를 가장 크게 만들고 덜 중요한 요소의 크기를 줄이는 전통적인 그래픽 전략을 기반으로 합니다.
그러나 그것만 사용하면 너무 많은 크기 세트를 만들어 혼란스럽고 무질서할 수 있습니다.
그리고 우리가 모든 무거운 작업을 크기에만 맡기지 않는 한 그것은 모두 괜찮습니다. 폰트 크기는 매우 중요하지만, 예를 들어 주요 요소를 더 굵게 만들거나 보조 텍스트에 더 부드러운 색상을 사용하면 더 나은 커뮤니케이션을 만들 수 있습니다.
타이포그래피의 계층 구조에는 세 가지 주요 수준이 있다는 결론을 내립니다.
주요 레벨(Primary Level): 일반적으로 사람들의 관심을 끌기 위해 더 큰 헤드라인에 사용됨.
보조 레벨(Secondary Level): 텍스트를 쉽게 스캔할 수 있으며 주로 사용자가 UI 전체를 쉽게 탐색할 수 있도록 돕는 하위 헤더에 해당.
3차 레벨(Tertiary Level): 일반적으로 본문 텍스트 및 일부 추가 데이터에 사용됨.
아이템이 숨을 쉬게 해 주세요!(Let items breathe!)
요소들 사이의 최적의 공간을 찾는 능력은 훌륭한 기술입니다. 최적이란 공간을 너무 많이 사용하지 않고 반대로 너무 적게 사용하지도 않는다는 뜻입니다. 여백에 관해서라면, 보통 사람들은 그것을 사용하는 것을 두려워합니다. 하지만 여백을 올바르게 활용하면 디자인이 더욱 깔끔해질 뿐만 아니라 더욱 우아하고 아름답게 보일 것이라는 점을 기억해야 합니다.
무작위로 추가하는 것보다는 체계적인 간격을 사용하는 것이 좋습니다. 바깥쪽 여백(Margin)과 안쪽 여백(Padding)의 경우 아래와 같이 4 또는 8의 배수로 지키는 것이 알려진 규칙입니다. 그리드 가이드에 대해 자세히 알아보려면 다음의 훌륭한 기사를 참조하세요.
웹사이트나 애플리케이션에 많은 요소를 배치하는 것이 때로는 어려울 수 있는데, 그 이유는 모든 요소가 일종의 '프라이버시'를 필요로 하기 때문입니다. 그리고 바로 그 부분에 네거티브 공간이 도움이 됩니다. 네거티브 공간은 서로 다른 요소들이 숨을 쉴 수 있도록 하고, 사용자가 각 요소를 쉽게 알아차리고 인식할 수 있도록 하기 위해 남겨둔 여백입니다.
색상 계층(Color hierarchy)
이것 역시 당연합니다. 색상은 UI를 더욱 매력적으로 보이게 하는 것 외에 요소의 계층을 구분 짓는 데에도 사용됩니다.
그래서 사용자의 관심을 쉽게 끌 수 있는 빨간색, 주황색, 검은색과 같은 대담한 색상이 CTA 버튼, 헤드라인 등에 자주 사용됩니다.
반면에 베이비 블루, 크림, 흰색과 같은 부드러운 색상은 약하고 주의를 덜 끌기 때문에 덜 중요한 요소에 사용되는 경우가 많습니다.
UI 계층 구조를 지원하기 위해 다양한 색상을 사용하는 방법을 아는 것은 디자이너에게 매우 중요한 기술입니다. 따라서 모든 UI 요소가 부드러운 색상이고 CTA 버튼이 대담한 색상으로 채워져 있는 웹에서는 사용자가 해당 페이지에 접속한 후 가장 먼저 보게 되는 것이 바로 CTA 버튼입니다.
대비(Contrast)
마지막이지만 중요한 것은, 대비입니다. 모든 시각적 계층 구조는 대비를 기반으로 합니다. 요소가 다른 요소와 대비된다면 이는 분명히 사용자가 그 요소들 간의 차이점을 인식하는 방식입니다. 아래 예를 보면 'Download for free'라는 텍스트는 같은 크기이지만, 'for free'라고 표시된 두 번째 부분은 폰트의 무게에 대비가 있기 때문에 더 많은 주의를 끕니다.
감사합니다!
*comment: 사람이 살아가는 방식에도 적용되는 원리이지 않을까 싶네요. 선택과 집중(크기), 적절히 쉬어갈 시간을 만들어주는 것(여백), 행동을 유도하는 방법을 아는 것(색상), 가볍게 흘러가다가 무게감을 줘야할 때를 아는 것(대비).
