올바른 웹, 모바일 폰트 사용하기

디자인을 공부하신 분이라면 검은색 명조체가 가독성에 가장 좋다는 것을 알고 있습니다. 물론 웹에서는 좀 다르다는 사실도 알고 있을 텐데요. 많은 디자인 전문가들이 웹에서는 고딕체와 회색 글씨가 가장 읽기 좋고, 심미적으로도 우수하다고 얘기합니다.

이제는 모바일도 고려해야 하는데요. 과연 여러분이 선택한 폰트가 데스크톱에서 잘 보여서, 모바일에서도 적합할까요? 여러분이 반응형 웹디자인을 쓰신다면 이것에 대해 고민해봐야 되지 않을까요?

타이포그래피의 명백한 책무는 '쓰인 정보를 정확히 전달해주는 것'이다.

이것은 어떤 논란의 여지가 있을 수 없으며 절대 무시될 수도 없다.

왜냐하면, 읽기 불편한 인쇄물은 무의미한 생산에 지나지 않기 때문이다.

- 에밀루더

타이포그래피의 책무는 스크린디자인에서도 변하지 않습니다. 아무리 심미성이 좋아도 제대로 읽히지 않으면 빛 좋은 개살구일 뿐이죠. 아쉽게도 웹과 모바일의 타이포그래피의 가독성에 대해 잦은 논쟁이 있습니다. 그리고 모든 상황에 적용할 수 있는 정설도 없는데요.

하지만 여러분의 웹사이트와 모바일 앱 사용자가 읽기에 적합한 폰트를 고를 수 있는 몇 가지 방법이있습니다.

폰트 크기와 글줄 길이

노인이나 저시력자들은 작은 텍스트를 읽기를 힘들어합니다. 눈이 좋은 사람도 작은 글씨를 오래 보면 눈에 피로가 올 수도 있는데요.

웹 브라우저에서 Ctrl+를 눌러 확대해 보면 된다고 말하는 분도 있지만, 어르신이나 저시력자 중에는 이 기능을 모르는 사람이 많습니다. 그리고 알아도 이 기능을 쓰는 것을 귀찮아합니다.

그러기 때문에 데스크톱에서는 본문 기준으로 16pt 폰트보다 더 크고, 한 줄에 50~75글자(영어 기준)를 쓰는 것이 좋습니다.

아래 예시는 100글자가 넘고 더 작은 사이즈르 사용한 경우인데요. 

16pt 이상, 한 줄에 50~75자를 사용한 위의 예시와 비교하면서 읽어보세요.

이 이슈는 모바일에서 더욱 중요합니다. 밝은 스크린에서 작은 타입들은 사용자들에게 두통을 줄 수 있습니다. 모바일은 한 줄에 30~40글자(영어 기준) 정도 쓰는 것이 좋습니다. 아래 예시의 왼쪽은 30~40글자를 사용했으며, 반응형 대응이 안 되어 있는 오른쪽 예시보다 훨씬 읽기 편합니다.

코딩을 하시는 분들에게는 px 단위보다는 다양한 기기에 유동적으로 대응할 수 있는 rem 단위를 추천합니다.

색상

전문가들은 웹, 혹은 모바일 타이포그래피 색상에 대해 의견을 서로 달리하는데요. 크게 2가지로 나눌 수 있습니다.

• 가독성에서는 색상 대비가 중요하며, 고로 흰색 바탕에 검은색 텍스트가 가장 가독성이 좋다.

• 너무 큰 색상 대비는 눈이 피로하다. 회색을 쓰는 것이 적합하다.

누가 옳고, 그른지는 판단할 수 없습니다. 왜냐면 사용자의 기기와 사용하는 환경은 천차만별이기 때문입니다. 디자이너가 판단하기에 적당한 색상 대비도 사용자들이 사용하는 스크린에서는 잘 안 보일 수도 있습니다.

특히 모바일에서 볼 때는 색상 대비 이슈가 매우 중요한데요. 외부나 밝은 공간에서 모바일로 접속했을 때 스크린에 반사되는 것 때문에 잘 안 보일 수도 있습니다.

디자이너가 영혼을 담아 디자인했는데, 사용자 환경 때문에 전달이 잘 안 된다면 그런 비극도 없겠죠. 

그래도 최신 스마트폰에서는 밝기를 스스로 조절이 가능해서 다행입니다 :)

WC3 웹 콘텐츠 접근 지침(WC3’s Web Content Accessibility Guidelines)은 좋은 기준이 됩니다. WC3는 최소대비를 저시력자 기준으로 잡아서 명시해놨습니다. 색상 대비를 점검해주는 도구를 가지고 여러분의 디자인을 점검해보세요.

순수 검은색(#000000)은 저처럼 난독증이 심한 사람에게 더 읽기 어려울 수 있습니다. 장시간 보게 되면 눈에 피로를 더 줄 수 있게 때문입니다.

많은 디자이너가 가장 진한 검은색을 #000000가 아닌 #0D0D0D, #0F0F0F, 또는 #141414를 선택한다고 합니다.

이 3가지 색상들이 순수 검은색보다 눈에 피로를 덜 수 있다고 합니다.

여러분이 색상을 선택했을 때는 사용자와 함께 그들이 쓰는 기기와 환경에서 테스트를 해봐야 합니다. 만약 테스트한 사용자들이 읽는 데 문제가 있다면 일반 사용자들도 똑같은 문제를 겪을 것입니다.

명조 vs. 고딕

명조체와 고딕체의 가독성과 효과에 대해서 잘못 알려진 것이 많습니다.

프린트 기반의 디자인에서는 명조체가 가독성과 읽는 속도를 올려준다는 것이 정설이 되었습니다.

하지만 출판인 카스 토마스(Kas Thomas) 씨는 두 폰트 스타일 가독성의 뚜렷한 차이점을 연구했지만, 결론에 이르지 못했는데요(링크). 이 글의 작성자인 한나 알바레즈(Hanna Alvarez) 씨도 비슷한 연구를 했습니다. 그녀는 30명의 사용자들을 그룹을 나눠, 똑같은 웹페이지에 폰트만 다르게 하고, 그들의 읽는 속도와 읽은 내용의 정확성을 측정했습니다.

첫 번째 웹페이지는 서체는 Arial(고딕체) 폰트 크기는 16pt, 두 번째 웹페이지는 Times New Roman (명조체), 17pt입니다.

이 연구 또한 결론에 이르지 못했습니다.

고딕체를 읽은 사용자 그룹이 평균 읽는 속도가 9% 정도 빨랐지만, 그 수치는 중요한 의미를 갖지 않습니다. 게다가 읽은 내용의 정확성은 거의 동일한 수치가 측정되었습니다. (명조체로 읽은 그룹이 1% 높았습니다)

두 그룹의 가장 눈여겨볼 차이는 명조체로 읽은 그룹이 고딕체로 읽은 그룹보다 글이 잘 안 읽어진다는 불만이 두 배 많았습니다. (명조체 6명, 고딕체 3명)

그럼 명조체의 문제는 뭘까요? 크게 두 가지로 얘기할 수 있는데요.

첫 번째, 명조체는 획이 전부 다릅니다. 이런 특성 때문에 난독증이 있는 사람이나, 저시력자가 보기 힘듭니다.

두 번째, 해상도가 낮은 컴퓨터는 명조체의 곡선 영역을 거칠게 표현합니다.

그러면 우리는 스크린 디자인에서 고딕체만 써야 할까요?

당연히 아닙니다. 여러분이 명조체를 쓰고 싶다면 깨끗하고 정확한 폰트를 쓰기 바랍니다.

하단 우측 예시와 같이 힌팅(Hinting)된 폰트를 사용해보세요.

그럼 어떤 폰트가 적합할까요?

여러분이 선택한 폰트가 사용자의 주된 사용자 경험에 영향을 줄 수 있습니다. 어느 공식에 얽매이기보다는 프로젝트 맥락에 맞는 선택을 하시기 바랍니다.

• 사용자들은 어떤 것을 기대할까?

섬세함, 재미, 간결함 등 여러분이 브랜딩 한 것에 따라 사용자들이 기대하는 스타일도 다릅니다. 웹사이트에 들어왔을 때 어떤 첫인상을 주고 싶은가요?

여러분은 폰트 선택을 통해, 고객들에게 브랜드 이미지를 확고하게 심어줄 수 있습니다.

• 사용자들은 어떤 환경에서 쓸 것인가?

모바일의 사용은 점점 늘어나고 있습니다. 이제는 당연히 모바일에 맞는 환경을 제공하지 않으면 뒤처질 수밖에 없습니다. 특히 모바일에서는 자신의 OS만 테스트해보고 일반화하기에는 무리가 있습니다. 꼭 사용자들의 기기를 고려하시기 바랍니다.

여러분의 고객들은 지하철 안이나, TV, 혹은 햇빛이 강렬한 야외에서 여러분의 웹사이트를 보고 앱을 사용할 수 있습니다. 우리는 당연히 고객 환경에 맞게 읽기 쉬운 디자인을 제공해야 합니다.

• 사용자들은 어떤 목적을 달성하려고 하는가?

쇼핑, 교육, 아니면 재미를 얻으려고 하는 것인지 정확히 알 필요가 있습니다.

만약 고객이 여러분의 상품을 빠르게 이해하고 구매하게 하려면, 속독이 가능한 폰트를 선택하세요. 아니면 사용자들이 오랜 시간 동안 콘텐츠를 보길 원한다면, 눈에 피로하지 않은 편안한 폰트를 사용하시기 바랍니다.

여러분 폰트 선택에 피드백 받기

디자인은 디자이너를 위한 것이 아니라, 사용자를 위한 것입니다. 여러분이 폰트 선택을 끝냈다면, 여러분이 공략하고자 하는 시장과 적합한지 테스트해봐야 합니다.

사용자테스트를 통해 당신의 디자인 선택에 사람들이 어떻게 반응하는지 알아야 하며, A/B 테스트를 통해 폰트를 바꿔서 전환율이 올라가는지도 체크를 해봐야 합니다. 여러분의 서비스가 점진적으로 발전하길 원한다면 이 과정을 꾸준히 거쳐야 할 것입니다.

출처: User Testing

원숭이발자국