GUI를 위한 두 번째, 타이포그래피
보기 불편한 것을 억지로 노력해서 보는 사람은 없다.
GUI를 위한 첫 번째, 디자인 규격 알기 이후로 오랜만에 GUI에 대한 글 쓴다.
그림 그릴 도화지의 크기를 알았다면 그림을 어떻게 그릴지가 중요하다. 근데 우리가 그릴 그림은 이미지로만 되어있지 않다. ‘텍스트’가 들어가기 때문에 작가의 사인 마냥 본인만 알아볼 서체는 좋지 않다.
비주얼 디자인을 구성하는 요소로는 컬러, 그래픽 스타일, 레이아웃, 타이포그래피, 여백 등등 다양한 요소가 있지만 그중에 가장 중요한 것을 고르라면 난 타이포그래피를 택하겠다.
타이포그래피를 강조하는 이유
웹디자인의 95%는 타이포그래피다의 저자인 ’Oliver Reichenstein’은 웹에서 제공되는 정보의 95% 이상은 문어(written language)의 형태라고 말한다. 즉 타이포그래피와 UI(User interface)와의 공통분모는 큰 비중을 차지한다고 볼 수 있다.
아무리 좋은 내용이라도 읽히지 않으면 읽지 않는다. 웹이나 앱에서 텍스트가 작아 안 읽히는 페이지에 들어가면 자연스럽게 뒤로 가기를 누른다. 흔히 이탈률이라고 한다. 단순히 들어왔다가 본인이 찾던 내용이 아니라서 나가는 이탈률이면 괜찮은데 보기 힘들어서 나간다는 것은 치명적이다. 재방문율에도 지장을 주기 때문이다. 최악의 서비스를 제공한 식당을 경험했다면 다시는 가지 않는 것과 같다.
좋은 타이포그래피 나름 주관적인 내용일 수 있지만, 보고 듣고 배운 것을 토대로 어느 정도 노하우를 공유해보자면 이렇다.
서체 사용 최소로 제한
너무 많은 서체 사용 시에 복잡함을 느낄 수 있다. 지금 들고 있는 핸드폰을 열어봐도 서체를 다양하게 사용한 앱 서비스는 없다. 온라인상에서 서체 사용은 라이선스라는 제약이 있다. 상업적으로도 사용 가능한 서체는 많지 않다. 영문 서체는 많고, 한글 서체도 점점 늘어나고 있지만 아직까지 본문 서체로 사용할만한 서체는 많지 않다. 본 고딕(Noto sans)나 나눔 고딕 혹은 스포카 정도가 적합하다. 개인적으로는 산돌 네오를 좋아하지만 아주 비싸다…
- https://fonts.google.com/
- https://www.google.com/get/noto
- http://hangeul.naver.com/2017/nanum
- https://spoqa.github.io/spoqa-han-sans/en-US/
여백 활용
여기서 여백이란 문단과 문단 사이의 간격일 수도 있고 행간일 수도 있고, 미디어 (이미지, 영상) 과의 간격일 수 있다. 가장 기본적인 것은 행간이며 본문 행간의 경우 보통 1.8~2배?(180~200%)를 하는 게 가장 보기 편하다. Ex) 본문 서체 크기 16px인 경우 행간은 28~32px(본문 크기 x 1.8 or 2배) 정도로 하면 좋다. *CSS에서 행간 값을 1.8 혹은 180% 이렇게 입력이 가능하다.
서체 최소 크기
웹의 경우와 앱의 경우는 좀 다르다. 개인적으로 웹에서의 최소 크기는 16px로 잡는다. 더 작게 잡는 경우는 집중해서 길게 읽지 않는 경우, 캡션 같은 텍스트가 있는데 12~14px 정도가 적합한 것 같다. 앱은 웹보다 거리가 더 가까워서 크기가 좀 작다.
- Brunch : 11pt (14.6px)
- Medium : 21px
- KBS News : 17px
- JTBC News : 16px
- Naver News : 17px
그러나, 국문과 영문은 다르다.
대체적으로 해외 사이트와 국내 사이트를 비교해보면 가장 다른 것이 최소 폰트 사이즈의 크기다. 한글은 자음 모음의 조합으로 한 글자 안에 들어가는 획이 영문에 비해 많아 서체가 작아질 경우 가독성이 떨어진다. 중문도 마찬가지다. 여러 나라의 언어를 지원하는 서비스를 만들 경우 같은 문장이라도 나라마다 글자 수의 차이가 많이 난다. 이를 염두에 두고 기획 및 UI 디자인을 진행해야 한다.
알아두면 좋을 내용, 웹 표준
웹 표준이란, ‘웹에서 표준적으로 사용되는 기술이나 규칙’을 의미하며, 이는 특정 브라우저에서만 사용되는 비 표준화된 기술은 배제하고 W3C의 토론을 통해 나온 권고안(recomendation)을 사용하는 것을 말하며, 웹 문서의 구조와 표현, 그리고 동작을 구분해서 사용하는 것을 뜻한다.
깊게는 웹 접근성 지침에서 인지성, 운용성 등 다양한 내용이 있지만 이번 주제에 맞는 내용은 텍스트와 배경 간의 명도 대비이다. 텍스트와 배경 간의 명도 대비는 4.5:1 이상을 권장한다.
최근 브라우저들은 텍스트 크기 확대/축소 기능이 있기에 적어도 명도 대비 3:1 수준은 지켜야 된다.
사실 가이드라인을 보면 아주 복잡하다. WCAG 2.0 지침에 의하면 글꼴의 명도 대비는 적어도 AA(지침 1.4.3) 또는 AAA(지침 1.4.6) 수준을 만족해야 된다. 그래야 약시나 노안인 분들에게도 읽는데 불편함이 없다.
또한, 흰 배경에 검정 글씨만 사용하는 게 아니라 색이 들어간 배경인 경우와 어두운 배경에 밝은 텍스트의 경우 등 대비를 알기 쉽지 않아서 대비를 알아보는 툴을 이용하기도 한다.
폰트 대비 알아보는 사이트 http://juicystudio.com/services/luminositycontrastratio.php
요즘처럼 그래픽을 덜어내고 플랫 해지는 트렌드에 서체의 활용은 더욱 중요해졌다. 잊지 말아야 할 것은 좋은 디자인이란 장애 여부에 따른 차별은 있어서 안된다.
반응형을 적용해야하는 이유
모바일의 사용률이 점점 높아지고 있다는 사실은 누구나 다 아는 내용이다. 반응형 웹으로 구축하는 것을 너무나 당연시 됐다. 모바일 대응이 안된 사이트라면 1초만에 바로 나가버리니까… 그런데 정작 모바일 스크린에 적합한 서체에 대해서는 신경 안 쓰는 경우가 종종 있다. 방문자들은 웹사이트 디자인이 멋진지를 보러 온게 아니라 콘텐츠를 보러 온 다. 적어도 본문을 읽기 편하게 만들어야 사이트 내에 머물며 글을 읽는다.
본문 사이즈 : 14~16px
안드로이드, iOS 앱 GUI 가이드라인의 기본 값이다. 모바일 웹도 결국 모바일에서 보는거니까 당연히 앱 기준에 맞춰야 사용성을 유지할 수 있다.
최소 사이즈 : 10~12px
Caption이나 Label 텍스트 같은 경우는 좀 더 작아도 되지만 10px 이하로 되면 아주 콩알만해진다. 시력테스트 마냥…
웹보다 살짝 작은 이유는 한 가지다. 손으로 거리를 쉽게 조절하며 PC와의 거리보다 더 가까이서 보기 때문이다. 글 읽기가 중심인 서비스의 경우는 폰트 사이즈를 좀 더 키우기도 한다.
신연석
가치 중심적인 디자인을 추구하는 디자이너입니다. 현재 Cheil Pengtai에 재직 중이며, 웹·앱 디자인, 일러스트, 모션 그래픽 작업을 주로 하고 있습니다.
