#JAVA #Hierarchy #하이라키 #구조 #계층

⚡하이라키(Hierarchy) 구조란?

 

Hierarchy의 사전적 의미는 계층을 말하면 UI/UX에서 보통 계층 구조로 각 요소들의 서열을 정리해주는 계층 구조라고 이야기한다. Hierachy는 UI에서 많이 중요한데 Typography 와 많은 연관이 있다.  

 

🌱 크기(size)

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

 

🌱  굵기(weight) 

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

 

🌱 색상(color) 

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

 

🌱 불투명도(opacity)

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

 

🌱 위치(position)

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

 

💠용어정리 

타이포그라피(typography)란 활자를 뜻하는 ‘type’와 서법이란 뜻인 ‘graphy’가 합쳐진 것이다. 
이 말은 전통적으로 활판인쇄술을 가르키는 말로 쓰여져왔지만 오늘날 디자인의 발전에 따라 
타이포그라피는 전달의 한 수단으로 ‘활자를 기능과 미적인 면에서 보다 효율적으로 운용하는 
기술이나 학문’이라는 현대적인 개념으로 바뀌었다.