[제로베이스 UI/UX 파트타임 스쿨] 7주차 - (금) 타이포그래피, 아이콘

제로베이스 47일차 학습노트이다.

오늘은 의도까지 끝나고 규칙으로 넘어가서 디자인 감각이론에 대해 배웠다. 플랫폼을 제작할 때 사용자들과 효과적인 커뮤니케이션과 관리의 유용성을 위해 규칙을 정해서 화면을 디자인한다. 실용적으로 플랫폼을 만들기 위해 디지털 공간의 논리를 부여하는 작업이다. 타이포그래피, 엘리먼트, 컬러, 아이콘 등을 종합해서 시각화했을 때 그것들이 모듈 안에 들어가서 보이게 되는데, 이 요소들에 보이지않는 규칙들이 있어서 정리되어 디자인되기 때문에 사용자가 더 쉽게 받아들일 수 있고 디자이너나 개발자도 더 쉽게 관리할 수 있다.

---

오늘의 강의 내용

 

1. 타이포그래피

타이포그래피의 규칙의 경우 타이포의 Font, Line-Height, Weight, Size 등을 사용되는 카테고리에 따라 한정적으로 규정한 것이다. 사이즈의 경우 1부터 100까지 있다고 가정할 때, 100개의 모든 사이즈를 쓰는 것이 아니라 각 카테고리에 맞게 가짓 수를 정해놓는다. 카테고리란 예를 들어, 타이틀, 상세 타이틀, 본문, 주석, 대제목 등이 있으며 본문의 경우 그 안에서도 위계가 다시 나눠질 수 있다. 

 

오늘 수업에서는 금융 어플의 소액 투자 화면을 제작해보는 것을 하였는데, 상단 모듈의 타이틀과 하단 모듈의 타이틀의 사이즈가 달랐고, 본문의 타이포를 버튼에도 그대로 사용하면서 복잡성을 줄인게 인상적이었다.

 

2. 아이콘

아이콘의 규칙 또한 사이즈와 연관이 가장 깊다. 아이콘이 사용되는 위치에 따라 타입의 개수를 최소한으로 지정하고 플랫폼에 지정한다. 기본 3~4개 정도로 나뉘며, 이미지가 들어가는 여부에 따라서도 나뉜다. 이때까지는 24 x 24 의 최소 사이즈의 아이콘을 많이 사용하였는데, 이번 실습에서는 아이콘이 가장 크게 보이는 비주얼 아이콘의 경우 160 x 136으로 이전에 비해 매우 큰 사이즈로 진행했다. 또한 이 분류는 보통 H1, H2, H3.. 이런식으로 알파벳과 숫자로 나누며 분류에 따라 그 쓰임도 다르다.

 

가장 큰 H1의 경우 브랜드의 아이덴티티가 반영이 되고 시각적인 비주얼 효과도 가지고 있는 아이콘이며, H2의 경우는 비주얼 효과도 가지고 있으면서 볼륨은 좀 더 작은 안내 등에 사용된다. H3, H4의 경우 정보를 텍스트로 전달해도 되지만 텍스트를 인지할 때 도움을 주는 아이콘으로 활용되는 경우가 많은 작은 사이즈의 아이콘이었다.

---

이전까지 표현과 의도에 대해서 배우고 마지막에 규칙을 배우지만, 필자는 규칙이 가장 중요한 요소인 것 같다. 결국 표현도 규칙 안에서 이뤄지며, 의도도 규칙을 통해 적용되기 때문이다. UX를 설계하는 경우 이러한 규칙을 정하고 사용자와 디자이너 모두가 더 편하고 직관적으로 서비스를 만들고 사용하는 것이 중요하다고 생각하기 때문이다.

 

이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발췌하여 작성되었습니다.