📝

하예림

챕터

UXUI 북/아티클 스터디 (2)

상태

완료

링크

https://sprinkle-sunspot-9a8.notion.site/UX-UI-2-807dcdf9fe984a6086056090616ff7b4

사용자를 사로잡는 UX/UI 실전 가이드 (김성연)

Chapter 4. 더 나은 비주얼 디자인을 위하여

4-1 타이포그래피의 기본, 웹폰트

•

타이포그래피 - 글자를 창조하고 배치하는 행위 전반을 뜻함

•

웹폰트의 이해

→ 폰트 임베디드(웹폰트) : 접속한 웹사이트에 사용한 폰트가 내 컴퓨터에 없어도 디자이너가 의도한 폰트를 볼 수 있는 방식

→ 웹폰트는 파일 형태로, 확장자가 존재

1) TTF(True Type Font) - 가장 오래된 폰트 파일 형식 / 맥과 윈도우 모두 사용 가능, 로딩 속도가 빨라 문서 작업에 주로 사용

2) OTF(Open Type Font) - 어도비와 마이크로소프트가 합작한 폰트 파일 형식 / 맥과 윈도우 모두 사용 가능, TTF보다 로딩이 느리지만 섬세한 작업이 가능해 주로 그래픽 디자인이나 인쇄에 사용

3) EOT(Embedded Open Font) - 마이크로소프트가 웹페이지에 적용할 목적으로 제작한 폰트 파일 형식 / 인터넷 익스플로러만 지원, 맥에서는 깨져 보임

4) WOFF(Wed Open Font Format) - 웹에 사용할 목적으로 제작한 폰트 파일 형식 / OTF와 TTF의 저작권 문제를 해결하기 위해 탄생 / 글꼴 파일 내 라이선스와 메타데이터 등을 따로 포함할 수 있어 저작권 방어에도 특화, 거의 모든 브라우저에서 사용 가능, 다운로드 속도 빠름

4-2 좋은 디지털 타이포그래피의 7가지 공식

→ 디스플레이의 발전으로 디지털 타이포그래피는 종이책 수준으로 선명해졌지만 아주 작은 차이만으로도 사용자의 눈을 피로하게 만든다는 단점이 있음 ⇒ 디지털 타이포그래피의 높은 가독성을 유지하기 위한 몇가지 공식 존재

공식 1. 최소한의 폰트 종류

: 한 페이지에 사용하는 폰트의 종류를 제한하는 것이 좋음

: 폰트를 제한하면서 깔끔하게 쓸 수 있는 가장 좋은 방법 → *폰트 패밀리 활용 (ex) Noto Sans(구글), 나눔 글꼴(네이버)

*폰트 패밀리 - 폰트의 특성을 유지하면서 굵기 차이 등으로 이루어진 글자체 묶음

공식 2. 가독성을 높이는 행간

: 행간 - 줄과 줄 사이의 간격 / 가독성에 결정적인 영향을 끼치는 만큼 적절한 간격을 찾는 것이 무척 중요

: 가장 보기 편한 행간 → 글자 크기에 1.5~1.75배를 곱한 간격 *폰트에 따른 편차 있음(정자체 폰트에 적용 추천)

: 단, 공식은 공식일 뿐 최종으로 디자인을 결정하는 것은 ‘디자이너의 눈’이라는 것을 잊지 말 것

공식 3. 폰트 크기에 따른 자간

: 자간 - 글자와 글자 사이의 간격 / 가독성에 큰 영향을 끼치는 요소지만 행간처럼 구하는 공식이 명확하지는 않음

: 일반적으로 폰트가 클 수록 자간을 좁히고 폰트가 작을 수록 자간을 넓힘

: 자간 값 조정에 어려움이 있다면 *머티리얼 디자인 가이드 참고 추천

*구글에서 제공하는 웹폰트를 효과적으로 활용할 수 있도록 적절한 크기와 자간 값 등을 제공하는 가이드

공식 4. 한 줄에 적당한 글자 수

: 짧은 문단은 줄당 20~40자, 긴 문단은 줄당 40~60자 제안(구글 머터리얼 가이드)

: 한 줄에 들어가는 글자 수는 언어에 따른 행갈이에 의해 조금씩 달라짐 *한글-글자당 행갈이, 영어-단어당 행갈이

공식 5. 배경색과 충분히 구별되는 글자 색

: 디지털 타이포그래피는 배경색과 뚜렷하게 대비되는 글자색이 중요 → 가독성!!!

: 제목과 배경의 명암비 3:1, 본문은 4.5:1 이상 권장(웹 표준 연구기관 국제 컨소시엄 W3C)

공식 6. 계층 구조를 활용한 타이포그래피

: 타이포그래피가 존재하는 가장 큰 이유 - 글이라는 기호로 내용을 전달하고자 하기 위해

: 글에는 제목, 부제목, 본문, 인용문 같은 다양한 형식이 존재하는데 이 형식을 사용자가 쉽게 파악할 수 있도록 위계, 즉 계층 구조를 부여 ⇒ 계층 구조는 주로 글자의 크기나 두께, 색으로 구분

공식 7. 성격에 맞는 폰트 선택

: 제품/서비스의 콘셉트, 타깃에 맞는 폰트 선택

: (ex) 10대 타깃 서비스 → 쾌활한 필기체, 통통 튀는 느낌의 폰트 / 엄숙함이 필요한 디자인 → 명조, 선이 곧은 폰트

4-3 시각적 위계를 만드는 5가지 강조 방법

•

시각적 위계 - 각 요소에 다른 중요도를 부여하는 것

→ 디자이너가 시각적 위계를 얼마나 이해하고 잘 활용하느냐는 사용자의 행동에 영향을 미침

→ 시각적 위계를 만드는 방법

크기를 이용한 강조 - 간단하면서 확실한 방법

색을 이용한 강조 - 색이 얼마나 대비되느냐에 따라 강조 효과도 달라짐 → 색 대비가 클수록 사용자는 인터페이스의 극적인 변화를 기대 ⇒ 따라서 중요한 인터페이스일수록 색으로 강조하면 효과적 / 단, 한 페이지에 색 대비가 큰 요소가 많다면 화면이 쉽게 복잡해지고 위계 효과 감소하니 주의

질감을 이용한 강조 - 질감을 이용한 강조는 주로 이미지에 사용하며 버튼과 같은 UI에는 잘 사용하지 않음

공간감을 이용한 강조 - 공간감: 평면 공간에서 느껴지는 깊이감이나 입체감 즉, 2차원에서 3차원 효과를 내는 것 → 웹/앱 디자인에서는 주로 원근감과 그림자로 공간감 표현

원근감을 표현하는 방법 - 요소 간 크기를 다르게 해 거리감을 주는 것

원근감이 크기로 공간감을 주는 방법이라면, 그림자는 요소와 요소 사이 또는 요소와 보이지 않는 바닥 사이 공간감을 부여

형태를 이용한 강조 - 폰 레스토프 효과 : 인간은 형태가 비슷한 사물이 여러 개가 있을 때 다른 사물과 유독 다른 한가지만 강렬하게 기억한다는 의미 / 우리 뇌는 독특하거나 차별화된 대상을 더 오래 기억하는 특성이 있다는 것

→ 형태는 담고 있는 정보와도 연관 有 / 사용자는 형태가 다르면 담고 있는 정보도 다르다고 인식 ⇒ 형태의 속성을 이용하면 인터페이스가 복잡해도 사용자가 각 기능을 명확하게 구분하는 데 도움을 줌

→ ‘강조’라는 것은 특정 요소가 다른 요소와 얼마나 다른가, 그 다름이 얼마나 시선을 잡아끄는가가 관건

→ 관습에서 크게 벗어나면 멘탈 모델(예측가능성) 부조화가 발생하니 특별한 이유나 의도가 없다면 관습을 따르는 것이 좋음

•

시각적 위계를 활용한 버튼 디자인

◦

버튼은 시각적 위계가 가장 잘 반영되어야 하는 요소 → 보통 화면에서 가장 중요한 일을 수행하기 때문 / 반대로 강조되지 않아야 하는 버튼이 강조되는 것도 막아야 함

◦

시각적 위계는 선 → 면 → 입체 순서로 강화

◦

조형의 무게도 시각적 위계 형성 - 조형의 요소가 무거워질수록 시선을 끔

→ 대표적인 예시 : iOS 기본 앱

4-4 컬러와 UI 디자인

•

책, 포스터, 광고, 인쇄물 등 출판 디자인에서 컬러는 시각적 위계를 결정 짓는 요소이자 주제의 정체성을 드러내는 역할

기능을 위한 색상	정서를 위한 색상
시스템 아이콘	스플래시 스크린
헤드라인 제목	히어로 이미지
정보의 위계	로고 색상
마케팅적 요소 (ex) New, Sale	스크린샷
링크 유도	브랜드 아이콘

코멘트

•

두루뭉실하게 알고 있던 타이포그래피 개념을 책으로 읽으면서 정리하니 머릿속이 깔끔해진 느낌이 든다. 과제 PPT를 만들 때에도 폰트 스타일, 자간, 행간 등 텍스트만으로도 굉장히 신경 쓸 것이 많아서 스트레스를 받았던 기억이 있는데, 이 책에서는 사용자 입장에서 보기 편한 수치 정보를 제안해줘서 후에 작업할 때 굉장히 유용할 것 같다. 

•

아쉬웠던 점은 딱히 없었다! 다만 이 챕터 내용이 길어서 충분히 정리할 시간이 부족했던 것이랄까~ 꼭 과제 때문이 아니더라도 개인 시간에 챙겨서 읽어봐야 겠당.

•

알게 된 개념 : 폰트 임베디드의 개념과 폰트의 파일 유형 → TTF, OTF 외에 다른 파일 확장자의 존재를 처음 알았다…