UI 디자인과 타이포그래피
7 typography tips for interface design
원문 출처
UI 디자인에 있어서 타이포그래피는 항상 중요한 역할을 한다. 제품을 디자인할 때, 사용자에게 제품의 의도와 목적을 명확하게 알리는 것이 중요하다. 그리고 그것은 텍스트를 사용하여 수행할 수 있다. 이것이 영향력 있는 디자인과 좋은 타이포그래피가 서로 전반적인 사용자 경험을 증진시키는 이유이다. 다시 말하면, 타이포그래피를 최적화하는 것은 UI를 최적화하는 것과 같다.
타이포그래피를 최적화한다는 것은, 가독성, 접근성, 그리고 시각적인 균형을 최대화하는 것을 포함하며, 가장 중요한 요소는 역시 사용성이다. 궁극적인 목적은 사용자의 인지적인 노력을 최소화시키면서 사용자와 인터페이스 간의 마찰을 없애는 것이다. 좋은 타이포그래피는 사용자에게 글자 자체를 인식시키지 않고 콘텐츠를 이해시킨다.
UI 디자인에서 타이포그래피의 중요성은 간과되서는 안 된다. 그리고 타이포그래피 디자인을 향상하는 것은 UI 디자인을 전체적으로 개선하는 데 있어 중요한 단계이다. 타이포그래피 디자인을 어떻게 향상하는지 몇 가지 팁을 소개하도록 하겠다.
계층을 사용하여 명확성을 증진시켜라.
디자이너는 사용자가 콘텐츠를 쉽게 인식할 수 있도록 시각적인 요소들을 적절한 구조로 계층화하여 표현한다.
타이포그래피의 계층도 헤드, 서브 헤드, 바디, 캡션, 기타 등의 다양한 스타일의 타입으로 계층화시킬 수 있다.
타이포그래피의 계층을 명확히 하는 것은 텍스트의 가독성을 높이고 스캔하기 쉽게 해 준다. 그리고 주요 파트를 강조하여 사용자의 주의를 이끌 수 있다. 폰트 사이즈에 차이를 둘 때 좋은 방법은 두 배 또는 절반 크기로 차이를 두는 것이다. 예를 들면, 헤더에 32px크기를 적용했다면, 대비를 주기 위해 바디에는 16px를 적용하는 것이다.
헤딩에는 2x크기의 타입을 적용하고 헤딩의 헤딩에는 3x를 적용해라. 더 드라마틱한 효과를 얻기 위해서는 4x를 적용하라.
텍스트가 숨을 쉬게 하라.
자간, 행간, 그리고 행 길이는 타이포그래피의 요소들 사이에서 여백을 조정하는 과정들이다. 여백이 부족하면 서로 너무 가까이 있는 글자들로 인해 구분이 어려워지면서 가독성이 떨어진다. 반면에, 여백이 너무 많으면 텍스트를 읽는 동안 길을 잃어버리게 된다.
행간
행간은 대부분의 애플리케이션이 "line-height"의 용어를 쓰지만 포토샵 같은 애플리케이션은 "leading"이라는 용어를 쓰기도 한다. Leading, line spacing, Line-height는 모두 같은 것을 의미한다. 텍스트들의 세로 여백을 의미한다.
행간은 디자인과 폰트 사이즈에 따라 달라지기 때문에 절대적으로 좋은 행간은 없다. 일반적으로 라인 높이의 1.5배를 적용해도 좋으나, 이것은 16px의 폰트 사이즈를 사용할 때의 적절한 행간이라 볼 수 있다.
자간
자간은 각각의 글자 간의 간격을 말한다. 대부분의 디자이너들은 자간을 신경 쓰지 않는다. 그러나 자간으로 인해 가독성이 달라지면서 좋은 타이포그래피와 훌륭한 타이포그래피의 차이가 생긴다. 자간을 사용할 때의 가이드라인이다.
대문자를 사용할 때는 자간을 늘여라
폰트 사이즈를 키울 때 자간을 줄여라.
폰트의 두께를 키울 때 자간을 줄여라.
행 길이
행 길이는 텍스트 박스의 가로 너비를 의미한다. 가독성을 높이기 위해서는 행 길이를 짧게 만드는 것이 좋다. 1440px 스크린에서 16px크기의 폰트 크기를 적용했을 때 적절한 행 길이는 60에서 80글자 사이이다. 모바일 화면에서는 라인당 35에서 45글자로 맞춰야 한다.
미디엄은 전체 화면에서도 텍스트 박스의 너비를 확장시키지 않는다.콘텍스트에 맞는 폰트
폰트를 선택할 때, 콘텍스트와 잠재적인 사용자를 고려하는 것이 중요하다. 무수히 많은 폰트가 존재하며, 각각의 폰트는 인터페이스에 각자의 분위기와 스타일을 만들어 준다. 어떤 폰트를 선택하느냐에 따라 제품에 대한 첫인상이 달라진다.
"좋은 디자이너는 텍스트를 콘텐츠로 다루지만, 훌륭한 디자이너는 텍스트를 UI로서 다룬다" - 카메론 몰
폰트를 잘 선택하면 메시지를 사용자에게 효과적으로 전달할 수 있지만, 잘 못 선택된 폰트는 오해와 혼돈을 낳는다.
하나의 폰트 패밀리
하나의 디자인에 여러 가지의 폰트를 사용하는 것은 사용자를 혼란스럽게 할 수 있다. 폰트와 타이포그래피를 조합하는 전문가가 아니라면, 같은 폰트 패밀리의 타입을 사용하는 것이 안전하다. 폰트 패밀리는 서로 잘 어울리도록 디자인되어 있기 때문이다. 그리고 통일성 있는 형태로 디자인을 더욱 일관성 있게 보이게 만들어준다.
목적에 따라 여러 가지 형태를 가진 폰트 패밀리를 찾을 수 있을 것이다. 폰트 패밀리를 사용할 때, 크기, 무게, 대소문자 등을 이용해 서로 대비를 잘 이루도록 해야 한다.
이텔릭, 장평이 넓은 폰트, 장평이 좁은 폰트를 가지고 있는 폰트 패밀리는 좀 더 크리에이티브한 구성을 만들 수 있지만 과도하게 사용하지 않도록 해야 한다.
San Francisco typeface from Apple가독성을 위해 좌측 정렬하라
대부분의 나라에서, 사용자는 위에서 아래로, 좌측에서 우측으로 텍스트를 읽는다. 텍스트를 좌측 정렬하는 것만으로도 가독성을 높일 수 있다. 좌측 모서리가 일관된 형태는 각각의 행을 끝까지 읽었을 때 시선이 돌아갈 곳을 쉽게 인지하도록 해 준다.
과부(widow)라고 불리는 마지막 줄에 하나의 단어를 사용하지 않도록 하는 것도 중요하다.
요약하자면
타이포그래피는 디지털 시대에 모든 디자이너가 마스터해야 할 스킬이다. 프로젝트의 목적이 무엇이건 간에, 타이포그래피는 인터페이스 디자인에 중요한 역할을 할 것이다. 잘 디자인된다면 사용자가 제품을 잘 사용할 수 있게 해 줄 것이고, 그렇지 않다면 사용을 방해할 것이다.
이 아티클의 목적은 타이포그래피 디자인을 시작하는 단계에서 몇 가지 가이드라인과 팁을 알려주는 것이다. 결국 타이포그래피의 스킬을 개선하고 배우기 위해서는 연습을 많이 하는 방법밖에 없다.
