서론
9일차인 오늘은 화면 Design을 할 때 기본이라고 할 수 있는 Color와 Font에 대해 알아보고 어제 진행하던 'Coupang'의 화면분석을 경우에 따라 어떻게 구성되는지 분석하는 시간을 가졌다.
Color
기본적으로 '색상'이라는 것은 색을 구분하는 가장 기본적인 속성 중 하나라고 정의할 수 있다.
> 채도
색의 강도를 말하며 같은 색 중 채도가 높은 색상은 더 진하고 선명하게 보인다.
채도가 낮을 수록 회색에 가까워지고, 채도가 높을수록 색은 더 생동감 있고 풍부해진다.> 채도대비
채도의 차이가 클수록 대비의 힘은 강해지고 마찬가지로 너무 강한 대비는 균형을 무너뜨릴 수 있다.
(크기와 위치를 고려해서 사용, 개체가 많을 때 채도 대비를 이용하면 원하는 대상 강조)
> 명도
색상의 어둡고 밝은 정도를 나타내는 속성으로 명도가 높을수록 더 밝고 화려한 색상을 나타낸다.
> 명도대비
명도의 차이가 클수록 대비의 힘은 강해지지만 너무 강한 대비는 오히려 주의를 산만하게 한다.
(명도의 각 끝에 있는 White와 Black의 극단적인 대비는 피하기, 대비가 생기는 부분에 시선이 가장 먼저 향함)
※ 채도가 높고 밝은 물체에 그림자를 만들면 채도와 명도가 낮아지고, 채도가 낮고 어두운 물체에 빛을 비추면 명도와 채도가 높아짐
> 색상환 (Color Wheel)
색상을 원형으로 배열한 것을 말하며 색상 간의 관계와 색상의 변화를 시각적으로 이해하기 쉽게 도와준다.
> 유사대비
색상환에서 인접한 위치에 있는 색상들끼리의 대비를 의미하며 보통 부드럽고 조화로운 느낌을 준다.
> 반대대비 / 보색대비
색상환에서 서로 정반대의 위치에 있는 색상들을 조합하여 만드는 대비를 의미하며 이러한 색상들을 함께 사용하면 서로 더욱 두드러져 보여 시각적인 효과를 높일 수 있다.
디자인을 할 때는 이 색상환을 적극 활용하는 것을 추천한다.
> 6:3:1 컬러 비율
디자인에서 색상의 균형을 맞추는 것이 어렵게 느껴질 때 색상 선택과 조합을 더욱 쉽고 효과적으로 만드는 방법으로 배경색, 보조색, 강조색을 6:3:1 비율로 사용한다.
이를 사용하면 자연스럽게 조화로운 컬러 구성이 가능하다.
※ 이 비율을 사용하는 가장 대표적인 브랜드는 'Starbucks'가 있다.
인테리어 디자인을 할 때 이 비율을 가장 많이 사용했던 기억이 있다.
Font
서체와 폰트에 대한 개념을 먼저 알아보면, 서체는 Design Style, 폰트는 개별 Style로 구분할 수 있다.
여기서 폰트가 글꼴 파일 (굵기, 기울기, 자간, 크기)를 포함하고 있다.
> 위계
문서를 정리할 때는 제목, 소제목, 본문이 잘 정리되어 있을 때 가독성이 가장 좋고 이를 '위계'라고 한다.
제목 : 문서, 이미지를 가장 잘 나타냄
소제목 : 제목과 본문 사이에 중간계층으로 내용 세분화를 하기 위해 사용, 중요한 부분을 쉽게 찾을 수 있게 함 (제목보다는 작고 본문보다는 크게)
본문 : 내용을 잘 확인할 수 있게 해야지 문서 전체를 압도하지 않음
> 굵기
일반적으로 Light→Regular→Bold→Black 순으로 구성
Light : 가늘고 부드러운 느낌, 작은 Text에 사용
Regular : 가장 일반적, 본문에 많이 사용
Bold : 굵고 뚜렷한 느낌, Headline에 많이 사용
> 기울기
영어와 이테리체에서 많이 사용 (제목, 강조)
> 크기
기본적으로 크기는 15pt가 일반적이며 위계 차이를 줄 때는 2배 단위로 늘리는 것이 정석
(큰 글씨는 내용을 강조하는 역할, 작은 글씨는 내용을 보충하는 역할)
이 15pt 미만으로 크기를 줄이고 싶다면 항상 신중해야 한다!
> 자간, 커닝
자간 : 글자의 너비, 글자의 Center를 기준으로 띄워지는 간격
커닝 : 글자 끝부분을 기준으로 띄워지는 간격
※ 디자인에서 가장 중요한 역할은 분위기이며 위 요소들이 분위기와 느낌을 결정짓는 가장 중요한 요소들이다.
분석해보기
화면이 구성될 때 Text가 많고 적은 경우, 항목이 많고 적은 경우에 표시하는 방식이 여러가지
Text가 많은 경우 : 오류처리(표시 안 함), 생략(...), 그대로 노출
Text가 없는 경우 : 비활성 처리, 다른 UI로 유도(팝업메세지 표시 등), 그대로 노출
항목이 많은 경우 : 그룹핑, 생략(항목 수 제한), 그대로 노출
항목이 적거나 없는 경우 : 비활성 처리, 다른 UI로 유도(관련항목 표시 등), 그대로 노출, 모든 항목을 전부 노출
화면 구성을 할 때 어떤 것이 자연스러울지 경우의 수를 생각해야겠다.
이 화면 구성들을 Design, 계획할 때 작성하는 문서가 있다.
요구사항정의서 (Product Requirements Document, PRD) : 고객의 요구사항을 정리한 내용
정보 아키텍쳐 (Information Achitecture, IA) : 모델을 정보 개념을 활용하여 복합 시스템으로 명확하게 표현하는 것
Wire Flow : 화면이 어떤 흐름을 통해 이어지는지 정리한 내용
이렇게 문서로 작성해두면 내 디자인의도를 타인에게 정확하게 전달할 수 있어 필요하다고 생각한다.
위 내용을 바탕으로 어제 분석했던 'Coupang My Page'를 경우에 따라 화면이 어떻게 처리되고 있는지 하나하나 뜯어보는 시간을 가졌다.
▼ 아래는 내가 'Figma'로 작성한 'Coupang My Page' 화면처리에 대한 분석 내용이다.
<'Coupang My Page' 화면처리 분석>
내가 직접 UI Design을 하기에 앞서 중요하게 적용되는 요소들과 추가 화면구성 설계에 대한 부분을 전문적으로 알아보는 시간이었는데 관련문서 작성에 대한 내용이나 화면처리 구성이 재미있게 느껴졌던 시간이었다. 점점 심화내용으로 들어가는 느낌이라 두렵기도 하고 설레는 기분도 있다.
