Hierarchy란 무엇인가

먼저 Hierarchy의 사전적 의미는 '계층'을 뜻하며 UI/UX에서는 보통 계층 구조라고 이해를 합니다. Hierarchy(이하 계층 구조)는 UI에서 굉장히 중요한데, 보통 Typography와 많이 연관됩니다. 예를 들어, 각 페이지나 컴포넌트를 대표하는 텍스트는 대표스럽게 보이면 되고, 덜 중요해 보이는 텍스트는 덜 중요해 보이면 되는 겁니다. 쉽게 말해서 각 요소들의 서열을 정리해주는걸 계층 구조를 정리한다고 생각하면 쉽습니다. 

 

대장 피라미드, 꼬마 피라미드 - 이미지 출처(unsplash)

 

계층 구조를 정리하는 방법은 여러 가지가 있지만 개인적으로는 Typography가 가장 쉽게 이해가 되는 방법이므로, Typography를 예로 들어 설명하겠습니다. Typography에서 계층 구조를 정리하는 요소로는 폰트의 크기(size), 굵기(weight), 색상(color), 불투명도(opacity), 위치(position) 등이 있으며, 그룹화를 위해서는 간격(spacing)이 있을 수 있습니다. 그룹화와 관련하여 간단하게 하나만 짚고 넘어가면 단순하게 배경이나 경계선으로 그룹화를 할 수도 있겠지만 디자인마다 허용될 수도 있고 안될 수도 있기 때문에 허용이 되지 않는다면 텍스트 간의 간격만으로 그룹화를 어느 정도 정리해야 합니다.

 

• 크기(size) - 당연히 폰트의 크기가 클수록 계층 구조의 상위에 있다고 보시면 됩니다. 디자인 시스템 상에서는 크기나 용도별로 명세를 구분하여 사용합니다. 예로는 display, heading, subheading, body, message 등등

 

• 굵기(weight) - 크기와 마찬가지로 굵을수록 계층 구조의 상위에 있다고 보면 되지만, 심미적인 이유로 폰트의 크기가 크지만 굵기는 얇게 하는 경우도 있습니다. 보통 heading, subheading 정도를 굵게 해서 조그만 컴포넌트에 대표성을 가지게 합니다. 

 

• 색상(color) - 색상은 단순히 계층 구조에 사용된다기보다는 주로 CTA와 관련하여 사용자에게 행동을 유발하게끔 사용됩니다. 그렇기 때문에 색상을 남발하게 된다면 전체적으로 사용성을 해치는 결과가 발생합니다.

 

• 불투명도(opacity) - 엄밀히 말하면 불투명도보다는 대비(contrast)가 어울릴 거 같습니다. 하얀 배경을 예로 들면 당연히 회색 글씨보다는 검은 글씨가 눈에 잘 띄게 됩니다. 그렇기 때문에 덜 중요해 보이는 텍스트지만 있긴 있어야 하는 경우에는 불투명도를 조절하여 계층 구조를 정리할 수 있습니다.

 

• 위치(position) - 당연하게도 대표성을 가지거나 중요한 텍스트는 상위에 위치하게 됩니다. 글의 제목이 본문의 가장 밑에 있다고 생각하면 이상하지 않을까요? 예시대로 상하의 경우에는 명확하지만 좌우의 경우에는 디바이스의 종류나 사용자의 환경을 고려해야 하지만 보통은 대표성을 가지는 요소는 좌측에 위치하게 됩니다. 중동 쪽은 우측에서 좌측으로 글을 읽는 경우라서 반대입니다.

 

다섯가지 요소가 적절하다면 - 이미지 출처(giphy)

 

마치며

글쓰는 재주를 기르고 머릿속의 내용을 정리하는 목적으로 조금씩 글을 쓰는 중입니다. 포트폴리오의 목적도 있지만 글을 좀 잘 쓰는 사람이 되었으면 좋겠습니다. 혹시 읽는 분이 있을지는 모르겠지만 궁금하거나 이해 안 되시는 내용이 있으시면 댓글 남겨주시면 능력이 되는대로 답변해드리겠습니다.