웹폰트가 가지고 있는 온라인 UX 영향력

빌 게이츠는 "콘텐츠는 왕이다"라는 말을 했으며 온라인 UX에서 이 말은 100% 맞습니다. 좋은 UX를 전달한다는 것은 단지 좋은 콘텐츠를 전달한다는 의미만은 아닙니다. 사용자가 읽기 불편한 이유로 사이트를 나가버리는 대신 읽기와 인터랙션을 독려하는 사용성 있고, 효율적인 포맷으로 콘텐츠를 제공한다는 것을 의미하기도 합니다. 

타이포그래피는 길고 흥미로운 역사를 가지고 있습니다. 

프린트 미디어의 생산 이래로 중요한 것이 되었으며 인터넷에서는 이제 전혀 새로운 것이 아닙니다. 

그러므로 웹 폰트는 당연히 디자이너의 작업에서 중요한 부분입니다. 올바른 방식으로 올바른 폰트를 사용하는지에 따라 사용자 경험을 만들거나 해체할 것입니다. 

"타이포그래피는 지지를 보내고, 커뮤니케이션하고, 축하하고, 교육하고, 협업하고, 분명히 밝히고, 전파하는 사용 형식이다. 이러한 방식을 따라 단어와 페이지는 예술이 된다." 

- 제임스 펠리치James Felici, The Complete Manual of Typography의 저자.

웹에서 폰트 사용 가이드라인

온라인에서 어떤 폰트를 골라야 할지에 대한 가이드라인은 많이 있습니다. 만약 폰트에 직접 효과를 주게 되면 가이드라인을 따르는 것은 더이상 의미가 없어집니다. 어디에도 모든 것을 커버하는 단 하나의 폰트란 없으며, 이쪽 UX 분야에서의 사용자 리서치는 다른 UX 분야에서와 마찬가지로 중요성을 가지고 있습니다. 

헤딩Headings

헤딩은 콘텐츠 경험의 중요한 부분입니다. 사용자의 주의를 사로잡을 수 있도록 쓰여져야 하죠. 또한 헤딩은 올바른 곳에 배치되어야 하며 적절한 폰트와 폰트 사이즈가 사용되어야 합니다. 

온라인에서 전형적인 헤드라인 헤딩은 현재 38px 입니다. 지난 10년동안 헤딩은 상당히 비대해졌습니다. 이것은 결국 사용자의 주의를 잡지 못했다는 이해관계가 팽배해진 것을 의미합니다. 이전에 헤딩은 보통 20에서 32px 사이였으니까요. 

폰트에 대해서 말하자면, 온라인에서도 세리프와 산세리프로 나뉘어지며, 세리프 폰트로는 조지아Georgia가 가장 대중적이고, 산세리프 폰트로는 에어이얼과 함께한 체퍼럴 프로Chapparal Pro with Arial나 프레이트 산스 프로Freight Sans Pro가 가장 대중적입니다. 폰트를 실험해보는 것을 두려워하지 말되, 사용자의 가독성 만큼은 확실해야 합니다. 

헤딩에 효과를 줘서 독자의 주의를 사로잡아야 합니다.

바디 텍스트Body Text

바디 카피는 헤딩만큼이나 하나하나가 중요합니다. 헤딩은 독자를 끌어당기는 역할을 한다면 바디 텍스트는 독자를 붙잡아두는 역할을 합니다. 여기서 콘텐츠의 배치가 중요함을 다시 한번 말해주고 있습니다. 

바디 카피에서 가장 인기있는 폰트 사이즈는 14-16px 입니다. 한때 더 작은 폰트가 대중적이였던 적이 있었지만 지난 10년동안 이것 역시 사이즈가 커져왔습니다. 요즘에는 글을 쉽게 읽을 수 있어야 한다는 생각이 널리 퍼져있습니다. 

온라인에서 사용되는 헤더의 폰트 사이즈가 보통 바디 텍스트의 것보다 2.5배 더 크다고 알려진 말들이 있긴하지만 이는 별로 중요하지 않습니다.

또한 웹 카피를 위해 적용되어야 할 행간과 행 길이의 규칙이 있다고 합니다.(최소한 일반 웹사이트를 위한 규칙입니다. 모바일 사이트는 다르게 다뤄집니다.) 여기서 행간은 폰트 높이보다 1.46배 커야하고, 최적의 행 길이는 행간보다 24.9배 커야합니다. 행 길이는 글자수로 계산할 수도 있는데 85개의 글자가 가장 최적입니다. 이런 경험에 근거한 규칙은 마진margins, 패딩padding 등이 바디 카피를 시각적으로 끌 수 있게 해야합니다. 

폰트에 관해 말하자면, 대다수의 웹사이트는 바디 카피에 세리프 폰트를 사용합니다. 가장 인기있는 세리프 폰트는 헤더에서 쓰였던 것과 동일하지만, 산세리프는 에어리얼Arial과 헬베티카Helvetica가 가장 많이 쓰이고 있습니다. 

조지아Georgia는 온라인에서 가장 많이 사용되는 폰트입니다. 

그러나 맞춤제작된 타이포그래피도 많은 사랑을 받고 있습니다. 

커스텀 폰트

위에서 말했던 것처럼 대다수의 웹사이트는 표준 폰트를 사용하지 않고 있습니다. 주로 자신의 브랜드에 맞게 맞춤제작된 타이포그래피를 사용합니다. 경쟁사와 차별화를 주기 위한 방법에는 여러가지가 있으며 이는 어느 정도의 사용자 리서치를 필요로 합니다. 

모바일 환경

모바일 웹은 표준 웹에서 쓰이는 규칙을 그대로 따르지 않으며, 디자이너는 서로 다른 플랫폼에서 지속적인 사용성을 유지하기 위한 반응형 폰트를 검증하고 사용해야 합니다. 

폰트 컬러

폰트 컬러 사용에 관한 말들이서로 대립각을 세우고 있어 오히려 디자이너를 혼란스럽게 하고 있습니다. W3C 웹표준에서는 폰트와 배경간에 컬러 대비값을 최소 3:1로 하라고 권장하고 있습니다. 그러나 또다른 곳에서는 최소 3:1의 대비값은 너무 커서 누구도 좋아하지 않는 반감적이게 될 수 있으며, 난독증을 가지고 있는 독자에게는 치명적일 수 있다고 합니다. 이는 결국 반드시 테스터와 함께 폰트 컬러를 테스트하고 사용해야 함을 의미합니다. 

컬러는 반드시 대비를 가지고 있어야하지만 얼만큼 가져야 하는지가 논쟁거리입니다. 

가이드라인조차 서로 다르기 때문에 반드시 테스트를 진행하고 사용하기 바랍니다. 

마치며 

온라인에서 콘텐츠는 한마디로 왕입니다. 아무리 디자인이 좋고 내비게이션이 멋지더라도 콘텐츠 없이는 사용자는 절대 찾지 않을 겁니다. 콘텐츠의 사용자 경험을 최대화하기 위해서는 사용자가 콘텐츠에 몰입하도록 디스플레이를 잘 해야하며, 읽는 동안에 불편함이 없어야 합니다. 디자이너의 눈만 가지고 리서치와 테스트를 하는 것으로는 모두의 눈을 만족시킬 수는 없습니다. 

원문: web fonts are critical to the online user experience

Refresh Studio

해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.