모바일 UI 디자인 기본 요소 - 타이포그래피 1
사용자 경험을 향상하는 인터페이스 디자인을 위한 타이포그래피
타이포그래피란 활자를 뜻하는 타이포 typo화 화풍이나 서풍을 의미하는 그래피 graphy의 합성어이다.
타이포그래피는 인터페이스에서 글 Text에 담긴 의미를 효율적으로 전달하고, 계층구조를 명확히 하기 위해 활자 Typeface를 배열하는 기술이다. 미술대사전 - 용어 편에 따르면 “오늘날에는 뜻이 바뀌어 사진까지도 첨가하여 그래픽 디자인 전체를 가리키고 일반의 디자인과 동의어 같이 쓰이는 일도 있다. 즉, 편집 디자인 분야에서는 활자의 서체나 글자 배치 따위를 구성하고 표현하는 일을 가리키는 용어이다.” 타이포그래피는 정보 전달의 정확성을 높이는 가독성뿐만 아니라 브랜드 정체성을 표현할 수 있다.
타이포그래피와 UI디자인
웹(앱) 디자인은 95% 타이포그래피이다. [ia.net] 웹에 있는 정보의 95%는 글로 쓰인 언어라는 의미이다. 틱톡이나 인스타그램같이 동영상과 비주얼 중심의 앱을 제외하고 쿠팡 같은 커머스앱, 토스 같은 금융앱, 당근이나 카카오톡 같은 앱은 대부분의 정보가 글이 중심이다.
그만큼 인터페이스 디자인에서 타이포그래피는 시각적인 부분뿐만 아니라 사용자 경험을 향상하는데 중요한 기본요소이다.
주요 앱의 많은 부분이 글 Text 중심으로 이루어졌다.사용자 인터페이스에서 글은 블로그나 뉴스 같은 긴 글의 콘텐츠뿐만 아니라 다이얼로그, 텍스트 필드, 버튼, 텝 등의 상호작용이 가능한 인터페이스 요소에 사용된다.
타이포그래피는 글꼴 Typeface을 효과적으로 사용하여 인터페이스 내에서 사용성, 가독성, 접근성 및 계층 구조를 향상할 수 있다. 이 과정에서 글꼴의 선택, 글꼴의 크기, 글줄의 길이, 글줄사이, 글자와 글자사이, 색상과 같은 많은 요소가 고려된다. 디자이너는 타이포그래피를 사용하여 디자인 미학과 독창성을 높이고 콘텐츠와 인터페이스에 특정 감정을 불러일으킨다.
타이포그래피의 기본과 특성을 이해하고, 이를 바탕으로 화면상에서 사람들이 콘텐츠의 형식을 이해하고 제품을 쉽게 사용할 수 있도록 효과적으로 그 원리를 적용해야 한다.
글꼴 Font
인터페이스에서 메시지의 전달과 콘텐츠의 특성 맞는 적절한 표현의 분위기와 기호, 감정을 잘 전달하기 위해 적절한 글꼴 선택이 중요하다. 타이포그래피에서 글꼴은 글의 성격과 느낌을 결정한다. 또한 가독성에 많은 영향을 끼친다.
타이포그래피 관련 책이나 글을 읽다 보면 글꼴, 서체, 폰트, 타입페이스, 활자체 등 많은 용어가 혼용되고 있다. 각 용어에 대한 정의를 정리하면
활자 Type
활자 Type란 글을 인쇄하기 위해 금속에 글자를 새겨 넣은 글자 틀을 말한다. 디지털화된 오늘날 활자(Type)는 인쇄 또는 화면에 사용되는 모든 글자를 의미한다.
타입페이스 Typeface
일관성 있는 디자인 형태적 특성을 가진 활자 Type들의 집합으로 한국어 용어는 ‘활자체’ 또는 ‘서체’이다.
폰트 Font
타입페이스의 활자 Type 집합 중 같은 크기 활자 한 벌로 한국어 용어는 '글꼴'이다.
과거 활판 인쇄 때에는 타입 페이스 Typeface가 넓은 의미고 폰트 Font가 좁은 의미로 사용되었다. 기술의 발전으로 타입페이스와 폰트를 구분하는 의미가 사라졌고, 디지털에서는 '폰트'를 더 많이 사용한다. 특히 인터페이스 디자인 툴이나 코드에서는 'Font'로 통일해서 사용되고 있다. 이 글에서는 서체, 활자체, 글자체, 글꼴을 글꼴로 통일하고, 타입페이스, 폰트는 폰트로 통일하여 표기한다. (가장 최근에 발간된 책 “한글 타이포그래피 안내서"를 참조하였다)
글꼴의 용도별 분류
인터페이스 디자인에서 사용되는 글꼴은 용도에 따라 제목용과 본문용으로 나뉜다.
본문용 글꼴 Body Text Font
본문용 글꼴은 블로그의 글이나 뉴스의 글처럼 여러 단락으로 이루어진 긴 글뿐만 아니라 인터페이스 전반에 사용된다. 9-19포인트의 크기에 최적화된 글꼴이다. 작은 크기와 화면 해상도에서 최적의 가독성을 보장하고 인터페이스 내에서 조화롭고 자연스럽게 글을 읽을 수 있도록 디자인되었다. 형태적인 특성이 크지 않아 글꼴 자체에 시선을 빼앗기지 않고 읽을 때 시선의 이동이 자연스럽다.
모바일에 사용하는 대표적인 본문용 글꼴들이다. 언뜻 보면 형태가 크게 차이가 나보이지 않는다.모바일 플랫폼에서 Android에서 기본 시스템 글꼴인 Roboto와 본고딕, iOS에서 기본 시스템 글꼴인 San Francisco의 SF Pro Text와 Apple SD 고딕 네오 같은 글꼴이 대표적인 본문용 글꼴이다.
인쇄용 한글 글꼴은 “보기에도, 읽기에도 좋은 도서용 베스트 본문서체 101” 책 제목에서 알 수 있듯 다양하지만 모바일 본문용 한글 글꼴은 아직 그리 많지 않은 상황이다.
제목용 글꼴 Display Font
본문에 사용하는 글꼴보다는 좀 더 표현력이 풍부하고 형태적으로 특징이 뚜렷해 시선을 끄는 글꼴이다. 모바일에서는 20포인트 이상의 크기에 최적화되어 헤드라인(Headline)에 사용하여 계층 구조를 표현할 때 사용한다. 큰 크기에서 사용하는 만큼 본문용 보다 세부적인 부분을 섬세하고 정교하게 디자인하여 날렵한 형태감을 가진다.
제목용 글꼴들이다. 한눈에 봐도 형태적인 특징과 느낌이 확연히 다르다.제목용 글꼴을 본문에 사용하면 글꼴의 형태적 특징이 글자 영역을 복잡해 보이게 하고 시선이 이동을 어렵게 하여 가독성을 떨어뜨린다.
Apple의 San Francisco는 제목용 글꼴은 SF Pro Display가 대표적이다. 안드로이드의 Roboto와 본고딕은 따로 제목용 글꼴을 제공하지 않는다.
세리프와 산 세리프
글꼴을 나누는 몇 가지 기준 중 세리프(Serif) 체와 산세리프(Sans-Serif)체 의 구분이 있다.
세리프 Serif
펜으로 글자를 쓸 때처럼 글자 획의 시작이나 끝 부분에 돌출된 형태가 있는 글꼴을 세리프(Serif)체라고 한다. 한글에서 명조체나 바탕체가 세리프체에 속한다.
세리프체는 글자의 획의 굵기가 가로와 세로가 다르고, 책과 신문과 같은 인쇄물에서 본문용으로 널리 쓰인다.
산 세리프 Sans Serif
Sans-Serif는 Serif가 없다 는 뜻으로 글자 획의 굵기가 일정하고 끝부분에 장식이 없이 반듯한 형태이다. 헬베티가 가 대표적이다. 한글에서 고딕체나 돋움체가 산 세리프체에 속한다.
일반적으로 봤을 때, 가독성은 인쇄된 인쇄물을 읽을 때는 세리프(Serif)체가 가독성이 높고 모바일이나 웹에서는 산세리프(Sans-Serif)체가 가독성이 높다고 한다. 윈도즈가 맑은 고딕을 맥 OS는 애플고딕, 안드로이드는 본고딕을 iOS는 Apple SD 고딕 네오 같은 산 세리프체를 시스템 폰트로 채택하고 있다.
화면용 글꼴과 인쇄용 글꼴의 차이
화면용 글꼴과 인쇄용 글꼴의 차이를 알 수 있는 대표적인 예시가 헬베티카(Helvetica)와 애플의 샌프란시스코(San Fr ancisco)의 디자인 차이이다. 애플은 맥 OS와 iOS에 사용하는 시스템 폰트를 헬베티카(Helvetica)에서 새롭게 디자인한 샌프란시스코(San Fr ancisco)로 2014년 11월에 변경했다. 샌프란시스코는 가독성을 고려해서 모바일의 낮은 해상도와 작은 화면에서도 글자가 뚜렷하게 보이도록 디자인된 화면용 글꼴이다.
화면용 글꼴 샌프란시스코의 소문자 i, l 등의 크기(x-height)가 더 길어 작은 화면에서 구분이 잘된다.화면용 글꼴은 작은 크기에서도 글씨가 잘 보일 수 있도록 영문의 경우 소문자의 크기가 크고 ‘이응’이나‘미음’ 영문은 'O'나 'D'의 속공간이 크며 획의 끝맺음도 부드럽고 가로세로획의 굵기도 비슷하다.
화면용 글꼴인 샌프란시스코가 소문자의 속공간이 커서 작은 화면에서 가독성이 헬베티카에 비해 높다. 화면용 글꼴에서 레귤러(기본굵기)의 굵기가 인쇄용 글꼴에 비해 전반적으로 더 굵은 편이다.
이에 비해 고해상도를 기반으로 하는 인쇄에서는 이런 점이 오히려 단점이 될 수 있기 때문에 인쇄용 폰트는 획의 끝맺음이 날카롭고 가로세로 줄기도 대비를 이룬다.
글꼴 모음. 활자가족 - Font family
글꼴 모음 Font family은 고유한 시각적인 특성을 공유하는 다양한 굵기, 케이스, 장식 글리프, 세리프 및 산세리프 버전 등과 같은 광범위한 추가 기능을 갖춘 글꼴 Font의 모음을 말한다. (글꼴 모음 또는 활자가족이라고 부른다.)
기준 글꼴(Reguler font)을 굵기별로 파생하여 디자인된 글꼴이 일반적이다. 어미글자(parent font)에서 파생되어 고유한 성격을 유지하면서 쓰임새에 따라 굵기(weight), 비례(proportion), 기울기(angle), 장식(elaboration) 등이 달라진다.
인터페이스 디자인용 본문 글꼴은 다양한 굵기가 있는 글꼴 모음 Font family을 선택해야 한다. 인터페이스 전반에 일관된 디자인을 보장하는 동시에 추가 기능을 창의적으로 사용하여 다른 글꼴이 필요할 수 있는 버튼 같은 컨트롤의 강조나 시각적 위계를 표현할 수 있다. 글꼴 모음은 시각적 일관성과 타이포그래피 유연성을 위해 필요하다.
앱 전반적으로 하나의 폰트를 써야 하지만 두 개의 폰트를 쓴다면 비슷한 계열의 폰트보다 완전히 다른 계열의 폰트를 사용해야 한다.
산돌고딕과 윤고딕같이 동일한 고딕체보다는 나눔 명조와 산돌고딕 같이 다른 유형의 글꼴을 사용한다.
글자사이 Letter spacing
글자와 글자 사이의 간격을 글자사이 또는 자간(Letter spacing)이라고 한다. 단어와 단어 사이의 간격을 낱말사이 또는 어간(Word spacing)이라고 한다. 보통 자간을 조절하며 전체 글의 글자 사이의 공간을 동일한 증분으로 조정한다.
Tracking 트레킹
글자의 간격을 균일하게 늘리거나 줄인다. 글자 사이 값을 조절하여 어려움 없이 읽을 수 있도록 하는 것이며 이를 트래킹이라 한다.
kerning 커닝
한 글자 한 글자 사이의 간격을 미세조정하여 시각적으로 일관성을 유지시키는 작업이다. 일관성 있는 간격은 글의 가독성을 높여준다. 커닝은 로고 디자인 같은 경우에는 중요하지만 매체의 특성상 인터페이스에서는 많이 적용하지 않는다. 영문 글꼴의 경우 커닝 정보가 포함되어 있는 글꼴이 많다.
글자사이를 적용할 때 활자의 크기에 따라 다음과 같이 적용해야 한다.
제목 같은 큰 글자는 자간이 본문보다 더 좁아야 한다.
작은 글자를 조판할 때는 문자 사이의 간격을 더 좁게 해주는 것이 아니라 더 넓게 해 주어야 한다
글줄 사이 · 행간 - Line-height
글에서 한 줄을 ‘행(Line)‘이라고 한다. 글줄사이는 글줄이 두 개 이상 나열되었을 때 한 글줄에서 다음 글줄까지의 거리를 뜻한다. ‘글줄 사이 또는 행간(Leading, Line Spacing)‘부르며 ‘레딩(leading)과 동일한 개념이다. 레딩(leading)은 활판 인쇄 시절 글줄들 사이에 적절한 공간을 주기 위해 사용했던 기다란 낮(레드)이나 금속 조각에서 그 이름이 유래되었다. 전통적인 조판에서 레딩은 줄 사이의 간격만을 가리키는 말이었지만, 오늘날 대부분의 컴퓨터 프로그램에서는 글자의 기준선에서 다음 기준선까지의 거리인 글줄 사이라는 뜻으로 더 많이 사용한다.
보통 표준 레딩은 글꼴 크기의 20퍼센트이다. 웹브라우저에서 정한 기본값도 이와 같다. 피그마 같은 프로그램에서는 기본 자동 행간 옵션에서는 문자 크기의 120%로 행간이 설정된다. 예를 들어, 10포인트 문자의 행간은 12포인트이다. 활자 크기의 120% 퍼센트가 표준 행간이긴 하지만 많은 경우 조정해 줄 필요가 있다. 가독성과 접근성을 위해서 본문 행간은 최소 140% 이상으로 설정하는 것이 좋다. 이는 영문을 기준으로 한 행간이고 알파벳보다 획의 수가 많고 크기가 큰 한글은 이보다 더 넓혀줄 필요가 있다. 본문용 한글의 행간은 150%에서 180% 내에서 글꼴에 따라 적절하게 설정한 후 소수점으로 하지 않고 정수로 적용한다.
기준선 Baseline
글자들이 놓인 기준이 되는 가상의 선으로, 대문자의 아랫부분 선이며 디센더가 없는 a, b, c 등의 소문자가 정렬되어 놓이는 선이다.
기준선은 텍스트 줄이 놓이는 보이지 않는 선이다. 인터페이스 디자인에서 베이스라인은 텍스트와 요소 사이의 수직 거리를 측정하는 데 사용된다.(안드로이드 OS에서 사용된다.)
Bounding Box
웹과 iOSI에서는 줄 높이와 바운딩 박스 높이가 동일하다. 즉 16px크기의 글자 크기에 행간을 24px로 했을 때 바운딩 박스의 높이도 24px이다. 이 높이를 바탕으로 글줄 또는 글은 인터페이스에 배치된다. 바운딩 박스는 웹과 iOS 앱에서 이 방법을 사용한다.
4픽셀 그리드와 행간
시스템 아이콘이나 버튼 같은 인터페이스 요소의 높이를 16, 24, 32, 같이 4의 배수(또는 8의 배수)로 디자인하듯이 행간도 4의 배수로 설정하는 것이 일반적이다.
글 Type을 입력하면 4px 그리드에 맞춰 정렬된다. 이러한 이유로 모든 글줄의 높이는 4px 기본 단위의 배수로 설정하면 좋다. 안드로이드의 경우 행간을 140% 적용해서 글자 크기 14dp는 20dp이고 150%를 적용해서 본문용 16dp는 24dp이다. 14dp의 140%는 19.6이지만 행간 수치를 소수점으로 하지 않고 4픽셀 그리드에 맞춰 정수로 적용한다. iOS 또한 행간 수치를 모두 짝수는 아니지만 소수를 사용하지 않고 정수로 적용한다.
글줄 길이 Line length
‘글줄길이’는 화면에서 글의 시작점부터 끝까지의 길이를 뜻한다. {한글 타이포그래피 안내서} 책 같은 인쇄매체는 종이의 판형에 맞춰 글줄 길이가 정해져 있지만 모바일과 웹은 사용하는 디바이스의 크기에 따라 글줄의 길이가 가변적이다. 책을 읽을 때 사람들은 평균 1분에 300자를 읽는다. 5분이면 1,500자를 읽을 수 있다. 모바일에서는 이보다 속도가 느리겠지만 빠르게 눈을 왼쪽부터 오른쪽으로 한 줄을 읽고 다음 글줄 시작을 찾아 읽어 내려간다.
글줄의 길이가 길면 눈이 다음 글줄을 찾는 데 어려움을 겪고 안구가 좌우로 움직이는 폭이 넓어져 독서 동기를 불러일으키지 못한다. 즉 독자가 같은 줄을 여러 번 읽는 실수를 하여 글을 읽기 어렵게 만들고 집중하기 어렵게 만든다. 글줄의 길이가 너무 짧으면 눈이 글 줄에서 다음 글줄로 너무 자주 움직여 눈이 피로하고 읽기 리듬이 깨진다.
최적의 글줄 길이
최적의 글줄 길이를 설정하여 읽기 쉽고 이해가능한 콘텐츠를 디자인해야 한다. 글줄의 길이는 한 줄이 알파벳은 40-60자 정도이고 간격을 포함하여 줄 당 60- 100자를 권장하기도 한다. 낱말 수는 8-10개가 읽기가 쉽다. 데스크톱과 같이 줄 길이가 더 긴 영역에서는 최대 120자까지 가능하고 최대 넓이는 680~720픽셀 이하가 적정하다. 인쇄용의 경우 10포인트 글자 크기를 기준으로 10-11센티미터 길이이다.
320 ~ 430픽셀 정도의 화면이 작은 모바일에서는 글줄의 길이는 한 줄에 20-40자가 적정하다.
글줄 길이와 글줄 사이
모바일보다 화면이 큰 데스크톱에서는 글줄 길이가 길면 행간도 기본보다 넓혀 흰 여백을 더 확보해야 한다. 글줄의 길이를 짧게 한다면 기본 행간보다 좁혀줘야 한다. 모바일은 화면이 작아 글줄의 길이가 짧아 데스크톱 같은 큰 화면보다는 글줄의 높이를 좁혀줘야 한다.
단락 간격 Paragraph spacing
단락 Paragraph은 문단이라고도 한다. 정보를 쉽게 파악하고 이해할 수 있도록 긴 텍스트 덩어리를 글을 소주제별 내용이나 형식에 따라 구분하여 단락으로 나눈다.
단락과 단락의 구분은 간격을 줘서 위와 아래로 구분된 단락으로 함께 그룹화한다. 단락의 제목을 강조하고 단락 간의 공간을 조절한다.
모바일 콘텐츠의 특성상 콘텐츠를 빠르게 스캔할 수 있도록 단락 구분은 제목과 단락 간격 Paragraph spacing을 사용한다. 단락 간의 간격은 본문 글꼴 크기의 75%가 적정하다. 문단의 글꼴 크기가 16px라면 단락의 간격은 12px을 줄 수 있다.
글꼴의 무게 Font weight
글자 굵기는 본문에서는 가독성에 영향을 끼친다. 본문에 사용하는 글자의 굵기는 너무 얇아도 안되고 너무 굵어도 안된다. 굵기와 농도는 폰트의 무게에 큰 영향을 준다. 폰트는 굵기가 굵을수록, 농도가 높을수록 무거워지며, 무거워질수록 위계가 높아지는 효과가 있다.
폰트의 굵기를 정하는 Font-weight는 디자이너의 경우 Regular, Bold로 설정하지만 숫자로도 설정할 수 있다. 100에서 900까지의 범위가 가능하고 Regular(Normal)는 400과 같고 Bold는 700과 같고, Medium은 500과 같다.
‘폰트랩’에서 무게 이름과 숫자를 다음과 같이 설정한다.
100 – Thin
200 – Ultra Light, Extra Light
300 – Light
400 – Book, Regular, Normal
500 – Medium
600 – Demi Bold, Semi Bold
700 – Bold
800 – Extra Bold
900 – Heavy, Black, Ultra, Ultra Black
1000 – Fat, Extra Black
Bold를 제외하고 폰트를 의 무게 명칭이 조금씩 상이하다.개발자와는 font-weight: 700 , font-weight: 400처럼 숫자로 글꼴의 굵기를 표현하면 굵기 명칭의 차이로 인한 혼동을 줄일 수 있다.
정렬 Text alignment
타이포그래피의 정렬은 페이지나 컨테이너의 여백을 기준으로 인쇄 또는 디지털에 상관없이 글 Text가 배치되는 기준을 의미한다. 모바일에서 글 Text이 정렬되는 방식은 네 가지로 왼끝 맞추기, 양끝 맞추기, 오른 끝 맞추기, 중앙 맞추기가 있다. 디자인의 목적과 콘텐츠의 성격, 의도된 사용자 경험에 따라 정렬 방법을 선택해야 한다.
가독성이 중요한 많은 양의 글에서는 왼끝 맞추기 또는 양끝 맞추기를 적용해야 한다.
시선을 끌고 콘텐츠를 강조하기 위해서는 중앙 맞추기를 적용한다.
정보가 가변적인 숫자에는 오른 끝 맞추기를 적용한다.
정렬을 효과적으로 사용하면 중요한 정보를 강조하고, 읽기 편하고 효과적인 메시지를 전달할 수 있다.
왼끝 맞추기 Left aligned
가장 일반적인 정렬이며 왼쪽에서 오른쪽으로 읽는 한글의 자연스러운 읽기 방향을 반영한다. 글줄이 왼쪽 가장자리에 따라 정렬되고 오른쪽은 글줄의 길이가 달라 가장자리가 고르지 않다.
많은 양의 텍스트를 다룰 때 가장 이상적이고 가독성이 좋아 본문에 주로 사용한다.
왼끝 맞추기는 글꼴이 디자인될 때 만들어진 최상의 어간과 자간을 사용해 간격이 매우 일정하여 글을 읽을 때 전혀 힘이 들지 않는다. 균일한 시작점을 제공하여 사용자는 새로운 글줄의 시작을 찾는 데 큰 어려움이 없으며, 고르지 못한 오른쪽 흘림은 시각적 흥미를 더해 준다.
사용 사례: 블로그 게시물, 뉴스 기사 등 읽기 쉬운 내용이 가장 중요한 긴 문단의 콘텐츠
양끝 맞추기 justified
양끝 맞추기는 문단(Text block)의 글줄길이를 왼쪽과 오른쪽 모두 고르게 맞춰 균일한 길이가 된다. 양끝 맞추기는 글줄의 좌우를 강제로 직선상에 일치시켜 어간이 고르지 못하고 어간이 행간보다 넓은 글줄이 생겨 마치 흰색의 강줄기처럼 보이는 ‘흰 강 현상’ 이 나타난다.
신문이나 잡지 같은 인쇄물에서는 양끝 맞추기가 일반적으로 사용돼 왔지만 모바일에서는 거의 사용하지 않는 정렬 방식이다. 모바일과 웹은 스크롤하면서 읽고 화면의 크기가 다양해서 글줄의 길이가 가변적이라 고르지 못한 자간과 어간을 수정할 수 없다. 미디엄 Medium과 같이 타이포그래피가 매우 잘 디자인되었다고 평가받는 앱의 본문도 왼쪽 맞추기를 적용한다.(브런치는 양끝 맞추기로 정렬되어 있어 어간이 고르지 않다.)
가운데 맞추기 Center aligned
가운데 맞추기는 중앙을 기준으로 문단의 글줄을 대칭시키는 정렬이다. 짧은 단락이나 제목, 짧은 문구에 사용된다. 글줄의 시작점이 고르지 않아 읽을 때 계속 행의 시작점을 찾아야 하기 때문에 많은 양의 글에 작용하면 가독성에 좋지 않다.
가운데 맞추기는 대칭을 만들어 시각적으로 매력적인 디자인을 만들고, 특정 콘텐츠를 강조하는 데 유용하다. 격식을 차린 것처럼 느껴지며, 진지해 보이기도 한다.
모바일 디자인에서는 사용자의 관심을 끌기 위해 제목을 가운데 맞추기 하는 디자인이 점점 더 보편화되고 있다.
애플의 랜딩 페이지사용 사례: 강조와 주의를 끌어야 하는 제목, 장식 요소, 인용문, 앱의 온보딩, 랜딩페이지, 홍보 배너, 결혼식이나 이벤트 초대장 등
오른 끝 맞추기 Right aligned
오른 끝 맞추기는 글줄이 오른쪽 가장자리에 따라 정렬되고 왼쪽은 글줄의 길이가 달라 가장자리가 고르지 않다.
오른 끝 맞추기로 된 글은 왼끝 맞추기와는 색다른 외관을 만들어 낸다. 일정한 어간을 유지하지만 왼쪽 가장자리의 모양이 고르지 않아 시선이 왼쪽으로 움직일 때마다 글줄의 시작을 다시 찾아야 한다. 오른 끝 맞추기는 글이 매우 짧거나 흥미를 유발해하는 독특한 레이아웃을 위해서 사용할 수 있다.
숫자를 오른 끝 맞추기 하면 수의 많고 적음을 한눈에 알 수 있다.테이블, 카드 Card 또는 리스트 List를 디자인할 때 숫자와 시간을 오른쪽에 맞춘다. 숫자를 왼쪽 정렬된 정보와 바로 맞은편에 배치하면 수의 많고 적음을 한눈에 비교하기가 더 쉽다.
사용 사례: 숫자가 포함된 리스트, 대시보드 데이터테이블의 숫자.
타이포그래피 정렬은 페이지나 화면에서 글에 생명을 불어넣는다. 우아함을 더하고 콘텐츠를 강조하기 위해 가운데 맞추기를 하거나, 가독성과 명확성을 위해 왼끝 맞추기를 하고 디자인을 정교화하기 위해 이러한 선택을 하면 메시지 수신 방식이 크게 달라질 수 있다.
모바일 타이포그래피 환경
타이포그래피를 통해 제품의 사용성과 가독성을 향상하기 위해서는 책이나 잡지 같은 인쇄매체와 다른 모바일 또는 디지털의 특성에 대한 이해가 필요하다.
모바일과 인쇄 매체는 화면 크기, 해상도, 사용 환경에서 큰 차이를 보인다. 모바일 화면은 작고 해상도가 낮아 종이보다 읽기가 어렵고, 사용자는 주로 이동 중이나 다양한 환경에서 모바일을 사용하여 집중하기가 어렵다.
모바일과 웹에서 글 읽기는 종이 인쇄물보다 훨씬 힘들다.
모바일과 웹의 콘텐츠를 볼 수 있는 디지털 기기의 화면 (예: 컴퓨터 모니터, 스마트폰 디스플레이)은 빛을 통해 정보를 표시한다. 화면이 번쩍이고 빛이 발산될 경우 장시간 사용 시 사용자의 눈을 피로하게 만들 수 있다. 이러한 특성으로 종이 인쇄물보다 읽기가 힘들다. - 현재 많은 디지털 기기들이 화면의 번쩍임을 줄이기 위해 1초에 60회 이상의 속도로 새로고침되도록 설계되어 있다.
이와 달리 종이 인쇄물을 읽을 때는 고정된 이미지로 장시간 보아도 눈의 피로가 적다. 자연광이나 인공조명에서 읽히며, 종이의 질과 잉크의 질감이 가독성에 영향을 미친다.
모바일에서는 배경색과의 대비를 높이고, 글꼴의 크기를 더 크게 사용해야 한다.
모바일은 화면이 작아서 읽기 어렵다.
모바일 환경에서는 글 Text의 이해가 데스크톱보다 약 두 배 어렵다. [제이콥 닐슨의 모바일 사용성 컨설팅 보고서]에 따르면 사용자 이해도 점수는 아이폰 크기의 화면을 사용했을 때 데스톱 수준의 48%에 그쳤다. 즉 작은 화면에서 글을 읽을 경우 복잡한 콘텐츠를 이해하기가 약 두 배 정도 더 어렵다는 의미이다.
작은 화면으로 인해 사용자는 글을 한눈에 파악하기 어려워 위아래로 스크롤하며 내용을 확인해야 한다. 이로 인해 시간이 오래 걸리고 기억력이 저하되며, 필요한 정보를 찾는 데 어려움을 겪을 수 있다. 작은 화면에 맞게 페이지 디자인이 최적화되어야 하며 중복된 정보는 피해야 한다.
모바일의 이동성은 산만한 환경으로 인해 가독성이 떨어질 수 있다.
모바일 기기는 주로 야외나 이동 중에 사용된다. 야외에서 밝은 햇빛 아래에서 이동하면서 사용할 때 사용자 경험이 악화될 수 있다. 모바일 사용 시 소음이나 산만한 환경으로 인해 글 Text의 이해력과 가독성이 떨어질 수 있다.
사용자들은 작은 화면의 스마트폰으로 SNS를 이용하거나 뉴스를 보거나 게임을 하면서 이동한다. 대중교통이나 카페에서도 많이 사용된다. 이러한 이동성 때문에 모바일 환경은 데스크톱보다 집중하기 어려운 상황에서 사용된다. 야외에서 햇빛이 비추는 환경에서도 한 손으로 글을 읽을 수 있도록 디자인해야 한다.
모바일은 글꼴의 선택과 레이아웃 등 타이포그래피 표현이 제한적이다.
모바일 기기는 화면 크기가 작고 해상도가 낮으며, 네트워크 속도와 상황에 따라 정보 전송이 제약될 수 있다. 또한 다양한 기기에서 구현되어 화면의 크기가 가변적이다. 이러한 제약으로 인해 모바일에서는 인쇄 매체와 달리 타이포그래피의 스타일, 크기, 굵기 등의 표현과 레이아웃이 상대적으로 제한적이다. 이에 비해 인쇄 매체는 페이지 크기가 고정되어 있고, 해상도가 일정하여 세밀한 디테일과 정교한 레이아웃을 구현할 수 있다.
모바일과 인쇄 매체는 화면 크기, 해상도, 사용 환경, 기기 특성에서 뚜렷한 차이를 보인다. 모바일은 인쇄 매체보다 전반적으로 읽기가 어려운 환경이다. 따라서 이러한 모바일 환경의 특성을 이해하고, 사용자가 콘텐츠에 더 쉽게 집중할 수 있도록 가독성을 높이기 위한 다양한 노력이 필요하다.
사람들이 모바일과 웹에서 글을 읽는 방식
모바일 매체의 특성으로 인해 인쇄매체와 다른 읽기 패턴을 가진다. 모바일과 웹에서 사람들의 읽기 패턴은 정보를 빠르게 찾는 ‘훑어보기(scaning)’이다.
미국 인지신경학자 매리언 울프의 저서 [다시, 책으로]에서 디지털(웹, 모바일) 읽기에 대해 다음과 같이 말한다.
정보과학과 읽기를 연구하는 지밍 리우 Ziming Liu는 디지털 읽기에 관한 한 ‘홅어보기’가 새로운 표준이라고 말합니다. 여기에 이의를 제기할 사람은 별로 없을 것입니다. 리우와 안구 운동 연구자들에 따르면, 우리가 디지털로 읽을 때는 흔히 F자형 혹은 지그재그로 텍스트상의 ‘단어 스폿 word-spot’(흔히 스크린의 왼쪽에 있습니다)을 재빨리 홅어 맥락부터 파악한 다음, 맨 끝의 결론으로 돌진했다가, 가끔은 자신이 이해한 내용을 뒷받침하는 세부 내용을 골라 보기 위해 본문으로 되돌아가곤 합니다.
‘홅어보기’와 F자형 읽기 패턴은 디지털 읽기의 표준이다. 모바일에서는 글 전체를 한눈에 파악하기 어려워 훑어보기는 더 강화된다. 사람들은 먼저 내용을 훑어보고, 관심을 끌었을 때만 계속 읽는다.
모바일과 웹에서 사람들은 흘깃, 대충 훑어 scaning 본다.
사용자는 일반적으로 모바일과 웹에서 훑어보며 필요한 정보를 빠르게 찾는다. 대다수는 페이지를 대충 훑어보며 읽을 만한 내용을 찾으며, 평균적으로 페이지 내 단어의 28%만을 실제로 읽는다. 예외적으로 뉴스나 보고서와 같이 읽을 가치가 있는 페이지도 있지만, 이러한 경우에도 사용자는 대개 읽기와 훑어보기를 번갈아 하며 정보를 습득한다. 모바일과 웹에서 사람들의 이런 읽기 패턴을 대강 읽기 또는 훑어보기(scaning)라고 한다.
사람들은 읽기만을 위해 모바일 앱을 사용하지 않는다.
사람들은 앱을 주로 정보 획득, 쇼핑, 인터넷 뱅킹 등의 작업을 위해 사용한다. 이 과정에서 많은 상호작용 Interaction이 이뤄진다. 보통 다른 업무를 완료하기 위한 도구로 활용되며, 속도가 중요한 경우가 많다. 사용자들은 원하는 페이지에 빠르게 접근하려 하며, 페이지를 빠르게 스캔하고 주요 부분을 확인한 후 3초 안에 해당 페이지에 대한 결정을 내리는 경향이 있다. 바쁜 사용자들은 흥미가 없거나 필요한 정보를 찾지 못하면 읽기를 중단하고 이탈한다.
모든 것을 읽을 필요가 없다.
사용자는 주로 자신이 관심 있는 내용이 페이지 일부에만 있기 때문에 나머지 내용은 필요 없다고 판단한다. 필요한 정보나 관련된 요소를 찾기 위해 페이지를 훑어보며, 특히 재미있는 소설책처럼 정독하는 경우를 제외하고는 모든 정보를 순차적으로 읽지 않는다. 사용자는 원하는 정보를 빠르게 탐색하고 선택적으로 취득하는 경향이 있으며, 인터넷 쇼핑 시에도 대개 대강 읽기(scaning)를 한다.
F-패턴
사용자들은 모바일과 웹에서 읽을 때 주로 F자 모양으로 읽는다. F-패턴은 웹페이지의 내용을 읽는 데 사용자들이 가장 자주 따르는 눈의 움직임 패턴이다. 상단과 좌측 부분을 집중적으로 보며, 나머지 부분은 대각선으로 훑어본다.( F-패턴이 유일한 읽기 패턴은 아니지만 가장 많은 훑어보기 패턴이다.)
이는 사용자가 페이지의 왼쪽 상단부터 읽기 시작하여 수평으로 이동한 후, 다시 아래로 이동하여 새로운 정보를 찾는 방식을 따른다. 페이지의 ‘단어 스폿 word-spot’을 빠르게 훑어보고 맥락을 파악한다.
F-패턴은 특히 긴 스크롤 페이지나 검색 엔진 결과, 뉴스기사 등에서 효과적이다. 이 패턴은 사용자가 최대한 많은 정보를 빠르게 스캔하려는 경향을 반영한다.
중요한 정보를 페이지 상단과 왼쪽에 정렬하여 사용자의 주의를 집중시키는 데 도움을 줘야 한다.
요약
모바일에서는 인쇄매체에 비해 낮은 해상도와 작은 화면으로 장시간 읽기 힘들고 집중력과 이해도가 떨어진다.
작은 화면으로 인해 사용자는 글을 한눈에 파악하기 어려워 위아래로 스크롤하며 내용을 확인해야 하고, 야외의 햇빛이 비추고 소음이나 산만한 환경으로 집중하기 어려운 상황에서 사용되기도 한다.
모바일과 웹에서 사람들은 최소한의 노력으로 빨리 작업을 끝내고, 필요한 정보를 빠르게 찾기 위해 흘깃, 대충 훑어 scaning보고 F자형으로 읽는 경향을 보인다.
모바일 환경에서는 간결하고 훑어보기 용이한 타이포그래피로 필요한 정보를 빠르게 읽고 쉽게 이해할 수 있도록 디자인해야 한다. 한정된 공간 안에서 효과적인 정보 전달과 사용자 경험을 최적화하기 위한 타이포그래피가 필요하다.
타이포그래피를 디자인할 때는 모바일과 인쇄 매체의 차이와 특성을 고려하고, 사용자의 콘텐츠 읽기 패턴을 이해해야 한다. 이를 통해 더 나은 가독성과 판독성을 제공할 수 있으며, 사용자 경험을 크게 향상할 수 있다.
타이포그래피 2편
https://brunch.co.kr/@chulhochoiucj0/34
참고한 책
타이포그래피 천일야화
타이포그래피 기본에 대해서 알고 싶다면 꼭 읽어야 할 책이다.
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=205174630
아름답고 프로다운 타이포그래피 101
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=3074821
인터랙션 디자인 p171
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=15558934
보기에도, 읽기에도 좋은 도서본문을 설정하는 32가지 방법
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=266533987
한글 타이포그래피 안내서
가장 최근에 출간된 타이포그래피 책이다. 이 글의 타이포그래피 용어는 이 책을 많이 참조했다.
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=282260732
타이포그래피. 에밀루더
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=317545113
참고 자료
타이포그래피 웹표준
CSS Inline Layout Module Level 3
Material 3
Typography – Material Design 3
Adobo Design System
Spectrum, Adobe's design system
Remain Style
Atlassian Design
Carbon Design System
iOS Typography
Shopify Polaris
Workday Canvas Design
liferay Design
Liferay Design | Articles, Events, and Resources for the Open Source Design Community
Principles of Typography in UI Design
정렬 참고자료
https://buninux.com/learn/typography-alignment
https://bootcamp.uxdesign.cc/understanding-typography-text-arrangements-97a9fe3357ac
https://techstacker.com/how-to-use-text-alignment-typography/
https://www.uxpin.com/studio/blog/alignment-in-design-making-text-and-visuals-more-appealing/
https://brunch.co.kr/@typecode/11
모바일 타이포그래피 환경 참고자료
모든 기획자와 디자이너가 알아야 할 사람에 대한 100가지 사실 - p29, p42
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=283294696
제이콥 닐슨의 모바일 사용성 컨설팅 보고서 - p125, p131
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=28990805
(사용자를) 생각하게 하지 마! - p23
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=49274393
다시, 책으로 - p125
아티클
https://www.nngroup.com/articles/legibility-readability-comprehension/
https://www.nngroup.com/articles/how-little-do-users-read/
https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
