이재은

챕터

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

상태

완료

링크

https://rapid-blossom-b04.notion.site/1-_TIL04-UX-UI-1-4ad2af6be2b6443b8c31e784ada2b696?pvs=4

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

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

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

타이포그래피

•

글자를 창조하고 배치하는 행위 전반

•

디지털 타이포그래피의 근간 = 웹폰트

웹폰트의 이해

•

컴퓨터에 기본적으로 설치되어 있지 않은 글꼴도 인터넷을 통해 웹브라우저에서 보여주는 기술

•

이러한 방식을 웹폰트 혹은 폰트 임베디드라고 함

•

구글 무료 웹폰트 제공하는 페이지: fonts.google.com

•

웹폰트의 4가지 파일 형식

1. TIF (True Type Font) - 가장 오래된 폰트 파일 형식 - 맥과 윈도우에서 모두 사용 가능 - 로딩 속도가 빨라 그래픽 작업보다 문서 작업에 주로 쓰임 2. OTF (Open Type Font) - 맥과 윈도우 모두 사용 가능 - TIF보다 복잡한 과정으로 글자를 그리기 때문에 로딩이 느림 - 그러나 더 섬세한 작업이 가능 >> 그래픽 디자인이나 인쇄에 사용 3. EOT (Enabled Open Type) - 마이크로소프트가 웹페이지에 적용할 목적으로 제작한 폰트 파일 형식 - 인터넷 익스플로러만 지원 - 맥에서는 글자 깨짐 4. WOFF (Web Open Font Format) - 웹페이지에 적용할 목적으로 제작한 폰트 - OTF와 TIF의 저작권 문제를 해결하기 위해 탄생 - 글꼴 파일 내 라이선스와 메타데이터 등을 따로 포함할 수 있어 저작권 방어에도 강함 - 파이어폭스, 크롬, 인터넷 익스플로러 등 거의 모든 브라우저에서 사용 가능 - TIF나 OTF를 압축한 버전이라 용량이 가벼움

웹폰트가 호출되는 과정

•

CSS 코드

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

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

•

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

•

폰트 패밀리 활용: 폰트를 제한하면서 깔끔하게 쓸 수 있는 가장 좋은 방법

•

대표적인 폰트 패밀리: ‘노토 산스’, ‘나눔 글꼴’

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

•

행간: 줄과 줄 사이의 간격

•

웹 콘텐츠 접근성 가이드 WCAG 2.1에서는 가장 보기 편한 행간을 글자 크기에 1.5배를 곱한 간격으로 제안

•

위 공식은 노토 산스나 나눔 고딕같이 정자체를 표현한 폰트에 적용하는 것이 좋음

•

공식은 공식일 뿐 최종으로 디자인을 결정하는 것은 ‘디자이너의 눈’

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

•

글자와 글자 사이의 간격

•

가독성에 큰 영향을 끼치는 요

•

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

•

구글의 머터리얼 디자인 가이드에서 폰트의 크기와 굵기에 맞는 자간 값을 제시
- H1(가장 큰 제목) : -1.5%
- Body 1(본문): 0.5%

•

커닝
- 인쇄물에서 시작된 개념
- 글자 사이의 미세한 간격을 눈으로 직접 조절해 최적의 가독성을 찾는 것
- 웹폰트에서는 활용할 수 없음
- 포토샵이나 인디자인 같은 인쇄물 디자인 프로그램에서 활용
- 앱이나 모바일 디자인 시 이미지로 된 타이포그래피가 있다면 커닝을 적용하는 것이 좋음

(왼)커닝을 하지 않은 폰트 (오) 커닝을 적용한 폰트

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

•

구글 머터리얼 가이드
- 짧은 문단: 줄당 20~40자
- 긴 문단: 줄당 40~60자

•

한 줄에 들어가는 글자 수는 언어에 따라 조금씩 달라짐

•

한글은 글자당 행갈이가 적용 / 영어는 단어당 행갈이 적용

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

•

글자색과 배경색이 비슷하면 눈이 피로해짐

•

특히 디지털 타이포그래피는 배경색과 뚜렷하게 대비되는 글자색이 중요

•

W3C는 제목과 배경의 명암비는 33:1, 본문은 4.5:1 이상을 권

•

명암비를 정확하게 확인시켜주는 웹사이트 ‘Contrast-finder’

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

•

글의 제목, 본문 등과 같은 형식을 사용자가 쉽게 파악할 수 있도록 계층 구조를 부여함

•

주로 글자의 크기나 두께, 색으로 구분

•

폰트의 종류를 다르게 하는건 화면의 복잡도를 높이기 때문에 권하지 않음

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

•

제품/서비스의 콘셉트, 타깃에 맞는 폰트를 선택해야 함

•

10대 타깃 서비스: 쾌활한 필기체, 통통 튀는 느낌의 폰트

•

엄숙함이 필요한 서비스: 명조나 선이 곧은 폰트 

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

시각적 위계

•

각 요소에 다른 중요도를 부여하는 것

•

디자이너는 이 중요도에 따라 각 요소를 배열해야 

조형

•

시각적 위계를 만드는 가장 기본 단위

•

다양한 재료로 형상을 만들고 구성하는 시각 예술의 총체

•

대부분의 조형은 점, 선, 면을 바탕으로 하여 윤곽이나 덩어리를 표현함

•

점: 가장 기본이 되는 단위로 ‘위치’를 나타냄

•

선: ‘방향, 길이, 속도’등을 표현

•

면: 조형의 무게가 생김

•

면이 모이면 입체가 됨

방법 1. 크기를 이용한 강조

•

크기를 이용한 강조는 가장 간단하고 확실한 방법

•

크기가 남들과는 다른 요소는 시선이 자연스럽게 이끌림 > 이때 시각적 위계가 발생

방법 2. 색을 이용한 강조

•

크기보다 훨씬 강렬하게 시선을 사로잡음

•

색이 얼마나 대비되는야에 따라 강조 효과도 달라짐

•

중요한 인터페이스일수록 색으로 강조하면 효과적

•

한 페이지에 색 대비가 큰 요소가 많으면 복잡해지고 위계 효과도 줄어듬

방법 3. 질감을 이용한 강조

•

질감을 이용한 강조는 주로 이미지에 사용

•

버튼과 UI에는 잘 사용하지 않음

방법 4. 공간감을 이용한 강조

•

공간감: 평면 공간에서 느껴지는 깊이감이나 입체감

•

웹/앱 디자인에서는 주로 원근감과 그림자로 공간감을 표현

•

요소 간 크기를 다르게 해 거리감을 주는 방법/ 그림자를 주는 방법이 대표적임

방법 5. 형태를 이용한 강조

•

폰 레스토 효과: 인간은 형태가 비슷한 사물이 여러 개가 있을 때 다른 사물과 유독 다른 한 가지만 강렬하게 기억함

•

사용자는 형태가 다르면 담고 있는 정보도 다르다고 인식

•

형태의 속성을 이용하면 인터페이스가 복잡해도 사용자가 각 기능을 명확하게 구분하는데 도움을 줌

느낀점

좋았던 점 더 나은 UI 인터페이스를 만들기 위해 UI의 요소의 개념과 규칙을 알 수 있어서 좋았다. 타이포그래피에서 자간과, 행간등에 사용되는 공식들도 알 수 있었다. 그러나 저자가 말했듯이 공식은 공식일뿐 최종 디자인을 정하는건 디자이너이다. 이런 기본 지식을 베이스로 가져가고 레퍼런스를 보고 분석하고 작업을 많이 해보면서 디자인 감각을 많이 키우는 것이 중요하다고 느꼈다.

알게된 개념

•

타이포그래피 법칙

•

시각적 위계를 만드는 방법