모바일 UI 디자인 기본 요소 - 타이포그래피 2
모바일 환경에 최적화된 가독성 가이드
“타이포그래피가 해야 할 지극히 당연한 의무는 정보를 글로 전달하는 일이다. 무슨 일이 있더라도 이 의무만은 면제될 수 없다. 만약 읽을 수 없는 인쇄물이 있다면 무용지물에 불과하다.” (에밀루더. 타이포그래피)
타이포그래피의 가장 큰 목적은 정보 전달의 효율성이다. 특히 모바일 환경에서는 읽기 쉽고 의미를 효율적으로 전달하는 가독성과 판독성이 중요하다.
가독성과 판독성 Readability and Legibility
정보 전달력을 높이고 사용성을 높이기 위해 타이포그래피의 가독성(readability)과 판독성(legibility)이 조화롭게 적용되어야 한다.
가독성과 판독성은 함께 사용되는 경우가 많지만 타이포그래피에서는 서로 다른 의미를 갖는다.
가독성(readability)은 소설책, 뉴스, 블로그 등 많은 양의 글을 사용자가 얼마나 쉽고 빠르게 읽을 수 있는가를 의미한다.
판독성(legibility)은 제목, 목록, 도로표지판 등 개별 글자와 문자를 얼마나 빠르게 구별하고, 인식하고, 알아차리는가를 의미한다.
가독성과 판독성은 모두 읽기의 효율을 높이고, 향상하는 데 관여하는 개념들이라 할 수 있고, 커뮤니케이션이라는 같은 목적을 갖는다.
가독성 Readability
가독성(readability)은 소설책, 뉴스, 블로그 등 많은 양의 글을 사용자가 얼마나 빠르게 읽을 수 있는가를 의미하며, 글자나 메시지를 쉽게 읽고 이해하는 능력을 반영한다. 특히 블로그나 뉴스처럼 글의 양이 많은 경우에는 가독성이 매우 중요하다. 가독성은 주로 시각 디자인, 특히 타이포그래피에 의해 결정된다. 가독성이 좋은 타이포그래피는 독자가 시각적 피로를 느끼지 덜 느낀다.
가독성을 높이기 위한 몇 가지 주요 요소는 이전글 타이포그래피 1에서 설명한 다음과 같다.
글꼴의 크기 Font size
모바일에서 편안하게 읽을 수 있는 적절한 글꼴의 크기를 지정한다. 인쇄매체에서 적절한 글꼴 크기는 일반적으로 10포인트에서 12포인트 사이로 추천된다. 이는 독자의 시각적 거리와 관련이 있으며, 대개 정상적인 독서 거리는 약 30~35cm로 설정되어 있습니다. 이 거리에서는 8포인트에서 14포인트 사이의 크기를 권장한다 웹과 모바일에서는 다양한 디스플레이와 사용 환경이 존재한다. 웹 페이지에서 글꼴 크기는 일반적으로 16px로 대부분의 사용자가 불편함 없이 읽을 수 있는 크기이다. 그러나 다양한 디스플레이의 크기와 해상도에 따라서 글꼴 크기가 적절히 조정될 필요가 있다. 글꼴 크기는 사용자가 글자를 쉽게 읽을 수 있도록 최적화되어야 한다.
글꼴의 굵기 Font weight
글자 굵기는 본문에서는 가독성에 영향을 끼친다. 본문에 사용하는 글자의 굵기는 너무 얇아도 안되고 너무 굵어도 안된다. 지나치게 굵거나 가벼운 글꼴은 가독성을 감소시킨다.
글자사이 Letter spacing
글자 사이의 간격을 적절히 조절하여 글자가 뭉쳐 보이지 않고 쉽게 읽을 수 있도록 해야 한다.
적절한 자간은 읽기 속도를 높이고 글자가 서로 겹치지 않아 독자가 내용을 쉽게 이해할 수 있게 한다. 자간이 너무 좁으면 글자가 겹쳐 보여 가독성이 저하되고, 너무 넓으면 글자들이 분리되어 보여 문맥 이해가 어려워진다.
글줄 사이 Line-height
글줄 사이의 간격을 충분히 두어 각 줄이 명확히 구분되도록 한다. 행간이 너무 좁으면 다음 글줄을 빠르게 찾기 어려워지며, 읽기 불편함을 초래한다. 반대로 행간이 너무 넓을 경우, 텍스트가 단절되거나 산만해져서 독자가 흐름을 놓칠 수 있다. 모바일에서는 인쇄 매체보다 행간을 좁게해 주는 편이다.
정렬(Alignment)
텍스트의 정렬 방식이 독서의 흐름을 방해하지 않도록 한다. 긴 문단을 왼쪽 정렬할 경우 문장의 균일한 시작점을 제공하여 사용자는 새로운 글줄의 시작을 찾아 편하게 읽을 수 있다.
글줄의 길이(Line Length)
너무 길거나 짧지 않은 최적의 글줄 길이를 설정하여 디자인해야 한다. 글줄의 길이가 길면 눈이 다음 글줄을 찾는 데 어려움을 겪고 안구가 좌우로 움직이는 폭이 넓어져 독서 동기를 불러일으키지 못한다. 글줄의 길이가 너무 짧으면 눈이 글 줄에서 다음 글줄로 너무 자주 움직여 눈이 피로하고 읽기 리듬이 깨진다.
대비(Contrast)
텍스트와 배경 사이의 충분한 대비는 텍스트를 더 쉽게 읽게 하며, 시각적 피로를 줄인다. 정보를 명확하게 전달하기 위해서 텍스트와 배경의 명도 대비(Contrast)를 4.5:1 이상을 쥐야 한다.
이러한 요소들이 조화롭게 사용되면, 사용자는 글을 빠르고 쉽게 읽을 수 있으며, 정보 전달의 효율성도 높아진다.
모바일 환경에 맞는 본문용 글꼴 선택
명확하고 읽기 쉬운 글꼴 선택이 중요하다. 작은 크기에서도 읽을 수 있고 긴 문단에서도 편안하게 읽을 수 있는 본문 전용 글꼴을 사용해야 한다. 본문에 표현적이거나 장식적인 글꼴은 작은 크기에서는 읽기 어려울 수 있으므로 피해야 한다.
왼쪽의 본문에 사용된 나눔 스퀘어는 제목용 글꼴이다. 본문에 사용할 경우 형태적인 특징이 눈에 띄어 오른쪽의 본문용 글꼴 프리텐다드에 비해서 가독성이 떨어진다.
모바일 환경에서 가독성이 높은 본문용 글꼴은 Android의 본고딕, iOS의 Apple SD 고딕 네오, 오픈 소스 폰트인 프리텐다드 Pretendard, 스포카 한 산스 네오 Spoqa Han Sans Neo, 슈트 SUIT 등이 있다. 위 폰트들은 아래 주소에서 다운로드 가능하다.
본고딕 (Noto Sans)
프리텐다드 Pretendard
Spoqa Han Sans Neo 다운로드
슈트 SUIT 다운로드
세리프체(명조체)보다 산세리프체(고딕체)가 가독성이 높다.
일반적으로 가독성은 인쇄된 인쇄물을 읽을 때는 세리프체(명조체)가 가독성이 높고 모바일이나 웹에서는 산세리프체(고딕체)가 가독성이 높다고 한다. 윈도즈가 맑은 고딕을 맥 OS는 애플고딕, 안드로이드는 본고딕을 iOS는 애플 SD고딕을 시스템 폰트로 사용한다. 모두 산세리프인 돋움체이다.
네이버의 모바일 본문 타이포그래피 연구에 따르면 바탕체(명조체)보다는 돋움체(고딕체) 가독성이 우수하다고 한다.
가독성은 익숙함에 비례한다. 가독성을 좌우하는 중요한 요인은 세리프가 있고 없음이 아니라 글을 읽는 독자가 얼마나 그 글꼴에 익숙해져 있는가에 좌우된다. 아직까지는 모바일의 본문은 산세리프인 돋움체(고딕체)가 사용자에게 더 익숙하다고 볼 수 있다.
가독성이 높은 굵기는 레귤러 Regular 나 미디엄 Medium이다.
글꼴의 굵기 Font weight는 본문에서는 가독성에 영향을 끼친다. 본문에 사용하는 글자의 굵기는 너무 얇아도 안되고 너무 굵어도 안된다.
본문에서 가독성이 높은 굵기는 레귤러 Regular 나 미디엄 Medium이고, 큰 차이를 보이지 않지만 레귤러를 사용한다. 볼드 Bold 같이 지나치게 무겁거나 라이트 Light 같은 얇은 굵기는 가독성을 감소시킨다.
너무 얇은 Light 글꼴은 바탕면과 쉽게 구분되지 못하며, 반면 너무 굵은 글꼴은 글자 내부에 존재하는 시각적 변별 단서들이 감소된다. 볼드 Bold 같이 굵기가 두꺼운 글꼴은 본문으로 사용하는 것보다, 본문에서 특별한 일부 내용을 강조하는 제목 Title에 사용해야 한다.
모바일 환경에서 이상적인 글꼴의 크기는 17px이다.
모바일과 웹에서 텍스트를 읽기 쉽게 만들기 위해서는 적절한 글꼴의 크기를 지정해야 한다.
안드로이드의 기본 본문용 글꼴의 크기는 16dp이고, iOS는 17pt이다. 모바일 환경에서는 17px 크기가 이상적이며, 20px보다 크면 가독성이 떨어진다. 네이버의 뉴스 본문과 블로그 앱 미디엄의 본문 크기는 18px이다. 18.5px부터는 가독성이 떨어지기 시작한다. 모바일에서 본문의 크기는 16~19px 범위가 가독성을 보장한다.
모바일 환경에서 글줄 사이는 150 ~ 160%가 적정하다.
글줄 Line-height이 가까우면 위아래의 글 줄이 동시에 읽히기 때문에 글의 내용을 쉽게 읽기가 어렵다.
네이버의 모바일 본문 타이포그래피 연구에 따르면 모바일에서는 행간을 155%가 적정하다고 한다. 가독성과 접근성을 위해서 본문 행간은 150% 이상으로 설정하는 것이 좋다. 행간을 180~200%로 지정하는 책과 같은 인쇄물에 비해 글줄 사이가 좁은 편이다. 너무 좁다는 인식이 있어 155%는 보통 인쇄에서는 잘 쓰지 않는다.
모바일에서는 글줄이 조밀하게 모여 있을 때 한꺼번에 덩어리로 읽어내는 효과가 더 높다고 한다.
만약 18px를 본문 크기로 정했다면 155%인 27.9px를 반올림해 행간을 28px로 지정할 수 있다. 이런 식으로 계산하면 17px는 26px가 적정하다.
위 두 예시는 행간을 180%와 200% 지정한 예이다. 글줄 사이의 흰색 여백이 많음을 알 수 있다. 이는 눈의 피로도를 높이는 원인이 된다.
제목의 단어와 단어사이는 행간보다 절대로 넓어서는 안 된다.
제목은 글꼴의 크기가 크기 때문에 본문보다 행간을 좁게 해 준다. 또한 자간도 본문보다 좁게 한다. 본문의 행간이 155%라면 제목은 120% 정도가 적정하다. 제목(Title)을 디자인할 때 어간 즉 단어와 단어사이는 행간 즉 글줄과 글줄 사이보다 좁아야 한다. 어간이 행간보다 넓으면 바로 아래 붙어있는 글자가 시선을 분산시켜 횡으로 읽기가 어려워지고 이는 가독성을 저해한다.
이 원칙은 특별한 이유가 없는 한 절대적으로 지켜야 할 원칙이다. 특히 제목을 디자인할 때는 더욱더 이 원칙을 지켜야 한다. 어간과 자간, 행간을 디테일하게 조정하여 가독성을 높이여야 한다.
가독성이 가장 좋은 정렬은 양끝 맞추기보다 왼끝 맞추기이다.
가독성이 중요한 많은 양의 글에서는 왼쪽정렬과 양끝 정렬을 많이 사용한다. 왼끝 맞추기는 필요한 정보를 빠르게 찾기 위해 콘텐츠를 훑어보는 모바일 환경에서 적절한 정렬이다.
충분한 마진 Margin은 가독성을 향상한다.
문단의 주변에 충분한 여백이 있을 때 시선을 집중시키고 읽기도 편하다. 마진 Margin은 페이지 레이아웃에서 콘텐츠 또는 본문을 감싸고 있는 상하좌우 여백을 뜻한다. 마진은 화면 내에서 콘텐츠 블록 주변에 여백을 만들어 가독성을 향상한다. 모바일에서는 구조상 상하 마진은 지정하기 어렵고 좌우 마진을 주는데 최소 16px에서 24px 사이의 여백이 적정하다.
적절한 문단 간격 Paragraph spacing은 가독성을 높인다.
동일한 내용이지만 오른쪽의 예가 더 읽기 편하다. 단락 Paragraph은 문단이라고도 한다. 콘텐츠를 빠르게 훑어보고, 단락 정보를 쉽게 파악하고 이해할 수 있도록 긴 글을 소주제별 내용이나 형식에 따라 구분하여 단락 간격 Paragraph spacing을 준다.
단락 간의 간격은 본문 글꼴 크기의 75%가 적정하다. 문단의 글꼴 크기가 16px라면 단락의 간격은 12px을 줄 수 있다.
본문의 글자사이는 좁혀줄 필요가 있다.
글자사이가 넓으면 가독성이 떨어진다. 글자와 글자사이가 너무 빡빡하거나 너무 느슨해진 않도록 한다. 자간을 조절하지 않는 경우도 많지만 한글의 경우 일반적으로 16pt~17pt의 본문 문단에는 약 -0.3 정도로 자간을 좁혀 준다. 모바일의 적정 행간이 155% 내외로 인쇄매체에 비해 촘촘한 편으로 자간을 좁혀줄 필요가 있다. 글꼴 크기가 커지면 자간을 본문보다 줄여주고 작아지면 자간을 넓혀준다.
글꼴의 색상과 배경의 충분한 대비를 통해 가독성을 높인다.
가독성을 보장하는 글과 배경 간의 충분한 명도 대비(Contrast)는 4.5:1 이상이어야 한다. 흰색 또는 단순한 배경위에 검은색 글자를 올렸을 때가 가장 읽기 쉽다.
충분한 대비를 가진 배경 색상을 선택하여 텍스트가 잘 보이고, 편안하게 글을 읽을 수 있도록 디자인해야 한다.
가독성과 판독성 관련 참고자료
이 글에서 모바일 본문의 가독성에 관해 가장 많이 참조한 자료입니다.
글자사이(자간)에 대한 상세한 가이드입니다
https://johndjameson.com/posts/guidelines-for-letterspacing-type
https://www.nngroup.com/articles/legibility-readability-comprehension/
https://blog.naver.com/uiux_lab/220581686385
https://www.joongang.co.kr/article/22323641#home
http://www.k-im-ey.com/archives/90
https://m.dongascience.com/news.php?idx=49775
https://blog.prototypr.io/how-to-use-typography-in-ui-design-ce045 fa4 ff2 e
https://618media.com/en/blog/how-spacing-affects-the-readability-of-text/#spacing-and-brand-identity
https://brunch.co.kr/@hijinnyjinny/13
책
타이포그래피 천일야화. 원유홍 | 서승연 - p79
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=205174630
타이포그래피 교과서
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=7611979
타이그래피. 에밀루더
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=317545113
한글 타이포그래피 안내서. 김은영
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=282260732
정보디자인 교과서
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=323640826
