타이포그래피에 관한 모든 것이 UI 디자인인 이유 (Why UI Design Is All About Typography)

이 글은 Ayadi GhaitWhy UI Design Is All About Typography글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다.

저는 모든 디자인 워크샵을 다음과 같은 성명서로 시작하겠습니다.
디자인의 첫 번째 규칙은 다음과 같습니다. 종류(타이포그래피)에 관한 모든 것입니다. 두 번째 디자인 규칙은 다음과 같습니다. 모두 종류에 관한 것입니다.
영화 파이트 클럽(Fight Club)에서 주인공 타일러(브래드 피트)가 자신의 언더그라운드 맨 너클 파이팅 클럽의 규칙에 신인을 소개하는 내용을 언급한 것입니다. 제가 브래드 피트가 말한 것만큼 멋있어 보이지는 않지만, 노력해서 점수를 얻어야죠, 그렇죠? 성명서는 명확하지만 다음과 같습니다. 타이포그래피는 여러분이 항상 기억해야 할 가장 중요한 것입니다.
제가 디자인이라고 말할 때, 좀 더 구체적으로 말하자면, 평범한 디자이너가 아닌 사람과 관련된 것들을 의미합니다 : 작은 웹사이트를 만드는 것, 이력서, 포스터, 소셜 미디어 포스트 같은 것들 말입니다. 하지만 이 글의 목적을 위해, 저는 사용자 인터페이스 디자인/웹 디자인에 더 중점을 두려고 합니다.
타이포그래피의 문제점은 너무 미묘해서 대부분의 사람들이 그것에 주의를 기울이지 않는 것입니다. 그러나, 자신이하는 일을 알고있는 경우에만 유형으로 완전한 디자인을 만들 수 있습니다.

타이포그래피의 중요성입니다.

간단한 질문을 해 보겠습니다. 웹사이트나 앱의 목적은 무엇입니까? 확실한 정보를 전달하기 위한 것 아닙니까? 이건 다 그냥 여러 가지 정보를 집어넣는 프레임 아닙니까? UI 디자이너의 목적은 단지 이러한 정보 조각을 이치에 맞는 방식으로 배열하는 것입니다.
웹 사이트 또는 응용 프로그램의 대부분의 정보는 텍스트입니다. 슬랙(Slack)의 웹 사이트가 텍스트없이 어떻게 보이는지 살펴보십시오.
presentation

presentation
Slack.com
타이포그래픽에 관해서는 우리가 가지고 놀만한 레이어가 많지 않습니다. 사진의 경우, 훨씬 더 쉽습니다. 왜냐하면 여러분이 가지고 놀 수 있는 매개변수들이 많기 때문입니다. 밝기, 대비, 포화, 색상, 노출 그리고 각각의 매개변수들은 무한한 가능성을 가지고 있었습니다. 타입이 있으면, 별로 문제될 게 없어요. 그래서 더 쉽고 더 힘들죠. 다음은 텍스트를 포맷할 수 있는 설정입니다.
  • Typeface choice
  • Weight
  • Tracking (letter spacing)
  • Leading (Line spacing)
presentation
Photoshop character panel
저는 많은 사람들이 이러한 설정을 별로 생각하지 않을 것이라고 확신합니다. Heck, UI 디자이너와 프런트엔드 개발자는 이러한 매개변수를 사용해 본 적이 없습니다(물론 서체를 선택하는 것과는 별도로). 네, 맞아요 꼭 그럴 필요는 없어요 하지만 여러분의 작품을 돋보이게 하고 좀 더 "전문적(professional)"으로 보이게 하는 추가적인 정교함을 제공합니다. 저는 이 각각의 것들이 어떻게 여러분이 더 나은 디자인을 만드는 데 도움이 될 수 있는지에 대해 자세히 설명하겠습니다.

1- 당신의 서체 알기

당신의 디자인을 위한 좋은 글꼴을 선택하는 것은 제 생각에, 당신의 디자인에 가장 많은 "make or break"단계입니다. 그런 점에서 이러한 것들을 염두에 두십시오.
  • 프리미엄 글꼴 사용해보기
Helvetica Neue와 Segoe는 완벽합니다. 그러나 항상 Open Sans, Roboto, Raleway, Lato 및 나머지 Google fonts 중 일부를 사용하는 사람이라면 정말 실수를 하고 있는 것 입니다. Google Fonts는 무료 글꼴이 까다로운 라이센스가 적용된 프리미엄 글꼴만큼이나 훌륭하다는 개념에 크게 기여합니다. 여기 제 프리미엄 글꼴 치트 시트가 있습니다.
presentation
일관성없는 weights에 대한 사과, 저는 폰트 패밀리 전체를 가지고 있지 않습니다. 그들은 비싸다 🤣.)
유명한 구글 폰트의 대부분은 전혀 나쁘지 않습니다. 서체는 다른 도구나 기법으로 접근할 수 없는 방대한 표현 차원을 알려줍니다. 아름답게 잘 만들어진 글씨로 말할 수 있는 것이 너무 많을 때 표준 글꼴로 공간을 낭비하는 것은 정말 부끄러운 일입니다. 다음은 Spotify의 소개 페이지입니다. 원본 글꼴과 가장 가까운 Google 글꼴 중 3개입니다. Open Sans, Work Sans 및 Rubik이 있습니다. 어느 것이 원본인지 알아맞힐 수 있나요?
presentation
Open Sans vs Work Sans vs Rubik Vs Circular(원본 글꼴)
3번 입니다. 그런데 제대로 못 맞혔다면, 서로가 상당히 가까운 것이라는 데 다 동의할 수 있을 것 같아서 큰 문제는 아니죠? 맞아요. 거의 비슷해요. 하지만 그게 다예요. 여기 원문체인 원형체는 다른 것들보다 훨씬 뛰어납니다. 그리고 이제 당신은 좋은 유약을 먹었습니다. 어떤 것을 선택하겠습니까?
하지만 단지 차이를 만드는 헤더만 전시하는 것은 아닙니다. 프리미엄 글꼴은 작은 크기로 훨씬 더 잘 렌더링하고, 성격도 훨씬 더 잘 보존합니다. 다시 해볼까요? 저는 그것이 얼마나 큰 차이를 만드는지를 보여주기 위해 Open Sans로 Spotify window app을 리메이크하는 자유를 취했습니다.
presentation
다시 말하지만, 원문은 말할 필요도 없이 왼쪽에 있습니다. 아마 스크린샷이고 더 흐릿하기 때문에 너무 뻔할 거예요. Open Sans 버전이 더 잘 만들어지긴 했지만, 원본과 일치하도록 추적과 색상을 바꾸면서 여기저기서 바람을 피웠음에도 불구하고, 그것은 여전히 대조적으로 보입니다. Danta를 보세요. 그것보다 더 좋아 보이게 할 수가 없었어요 (너무 모양을 바꾸지 않고)
Serifs들을 고려해보세요.
어떤 사람들은 여러분에게 긴 텍스트 본문에 serifs를 사용해야 한다고 말할지도 모릅니다. 왜냐하면 serifs는 더 "읽기 쉽기" 때문입니다. 하지만 처음에 그 주장을 했던 연구는 너무 많이 틀려서 셀 수 없었습니다(debunked too many times to count). 하지만 여전히, serifs는 웹사이트에 많은 캐릭터와 세련미를 소개합니다. 그들은 진지하고, 고급스럽고, 대담하고, 무엇보다도 의도적인 느낌을 주는 빈티지 플레어를 가지고 있습니다. 또한 Sans-Serif 웹 전염병의 틀에서 벗어날 수 있도록 도와줍니다.
presentation
Sans Serif (Circular) | Serif (Caslon pro)
  • 글꼴을 한쌍으로 구성하는 방법을 알고 있습니다.
여러분의 보물상자에 몇 년간의 시각적 디자인을 가지고 있을 때, 이것은 아마도 자연스럽게 여러분에게 다가옵니다. 당신만에 준비된 글꼴 조합이 있을 수 있습니다. 하지만 디자인 학교에 가지 않고 x-height에 따라 글꼴을 맞추는 법을 배우거나 그게 무엇인지 모르는 사람들에게는, 그렇게 복잡하지는 않습니다. 여러분은 온라인에서 Fontpair와 같은 웹사이트에서 멋진 폰트 페어링을 찾을 수 있습니다. 물론, 제가 여전히 공짜라고 믿을 수 없는 필수 불가결한 Typewolf도 찾을 수 있습니다.
제가 당신에게 말하고 싶은 것은 스타일을 섞으라는 것입니다. serif와 sans-serif를 섞을 수도 있고, script과 serif를 섞을 수도 있고, 모험심이 좀 있으시다면, monospace와 sans-serif를 추천해도 될까요?

2- Weights

구성을 위해 어떤 가중치를 선택해야 하는지 아는 것은 서체를 가장 잘 선택하는 첫 번째 단계입니다. 다음은 몇 가지 규칙입니다.
  • 두 세 개의 weights를 선택하세요, 더 이상은 말구요.
글꼴이 20개의 서로 다른 weights와 스타일을 가지고 있다고 해서 모두 사용해야 하는 것은 아닙니다. 두 개 또는 세 개만 있으면 충분합니다. 하나는 표준이고, 하나는 타이틀이고, 다른 하나는 hero 섹션과 같은 큰 헤더입니다. 그 정도면 대부분의 경우 충분할 것입니다.
  • weight를 건너뜁니다.
선택할 weights가 많은 경우 대비를 강조하기 위해 weights를 건너뛸 수 있습니다. 예를 들어 단락에 대해 일반을 선택한 경우 medium을 건너뛰고 제목에 대해 semibold을 시도하고 bold 건너뛰고 머리글을 사용할 수 있습니다. 기억하세요, 목표는 얼마나 무거워 보이는지가 아닙니다. 다른 텍스트와 얼마나 다른지를 목표로 합니다. 다른 모든 것을 제대로 한다면(색상, 간격 등) 대조를 그리는데 다른 것은 많이 필요하지 않을 것입니다.
  • 검정색 및 hairline(ultralight)을 피합니다.
일반적으로 UI 프로젝트에 블랙이나 hairline을 사용했던 경우를 많이 기억하지 못합니다. 물론이죠, 그들은 그들의 용도가 있습니다. 하지만 그들의 단점도 기억하세요. 많은 글꼴로 사용할 수 없는 hairline 텍스트는 읽기가 어렵고 작은 텍스트에서는 작동하지 않습니다. 검정색은 공간을 너무 많이 차지해서 구성을 어지럽힐 수 있습니다. 그러니 가능한 한 그 두 개를 멀리하세요. 대형 디스플레이 헤더를 사용하는 것이 가장 좋습니다.
presentation
San Francisco Display Pro font family (Apple’s proprietary font)

3- Tracking

Tracking은 단어의 glyphs(문자) 사이의 공간을 말합니다. 이것은 종종 두 개의 개별 glyphs 사이의 간격인 Kerning과 혼동되는데, 이것은 글꼴 파일 자체에 내장된 것입니다. 저에게 물어본다면, 이것은 가장 덜 사용되는 매개 변수입니다.
  • 다른 글꼴을 선택하기 전에 tracking을 수행합니다.
저는 tracking을 활용하기 전에 글꼴을 선택하는 데 많은 어려움을 겪곤 했습니다. 일부 글꼴은 자연스럽게 수평(horizontal) 공간을 너무 많이 차지합니다. 예를 들어 제가 항상 좋아하는 글꼴 중 하나인 Poppins을 생각해보세요. 공간이 너무 많이 소요되기 때문에 원하는 만큼 사용할 수 없었습니다. 해결책은 반드시 Poppins의 이상한 분위기를 포착하지 않는 다른 글꼴을 찾는 대신 tracking을 줄이는 것입니다(해 보지 마십시오, 없습니다).
presentation
Poppins | Poppins (-40 tracking) | Circular
우리가 어떻게 제목에 맞는지 알아채고 tracking을 줄이거나 글꼴을 완전히 변경하여 5개의 단어를 더 짜넣었습니다. 그러나 새 글꼴이 원래 선택한 본질 전체를 담아내는 것은 아닙니다. 또한 tracking을 조일 때 더 단단한 Poppins가 얼마나 많이 발생하여 공간이 줄어들 뿐만 아니라 구성을 더 단단하게 유지할 수도 있습니다.
  • 축약된 글꼴을 고려합니다.
Domain-display는 편집 프로젝트에서 헤더를 위해 사용하려고 할 때 많은 문제를 일으켰습니다. taking을 줄여도 너무 많은 공간을 차지하고 있었습니다. 다행히도, 축약된 글꼴이 있어서 kerning을 줄일 뿐만 아니라 서체의 아름다운 구조를 희생하지 않고 glyphs 자체를 수평으로 더 작게 만들었습니다. 이로 인해 필요한 수평적(horizontal) 공간(real-estate)이 감소하고 필요한 density를 유지할 수 있었습니다.
저는 또한 제가 가지고 놀 수 있는 거의 수평적(horizontal)인 공간이 없는 앱을 디자인했던 것을 기억합니다. 저는 Encode-Sans-Condensed를 사용하기로 결정했는데, 이것은 제가 꽤 읽기 쉽고 미적으로 만족스러운 상태를 유지하면서 공간을 절약하기 위해 한 줄에 정보를 쓸 수 있는 가능성을 주었습니다.

4- Leading

이것은 아마도 가장 미묘한 변수(parameters)들 중 하나일 것입니다. 하지만 때때로 이것은 분명히 생명의 은인이 될 수 있습니다. 랜딩 페이지, 블로그, 뉴스 피드 및 기타 텍스트가 풍부한 디자인을 설계할 경우 라인 간격이 매우 편리합니다. 제가 지금 다루려고 하는 핵심 세부사항에 대해 생각하기 전에, 항상 선을 구분하는 요점을 생각해 보세요: 가독성. 따라서 선행은 반드시 텍스트 크기에 정비례할 필요는 없습니다. 선행에 관해서는 머리글을 줄이고 작은 텍스트에 대해서는 늘린다는 것이 기본 원칙입니다. 글자 크기가 72pt이면 줄 사이의 공간이 필요 이상으로 많아 구분할 수 있고, 줄일 수 있기 때문입니다.
  • 정보 밀도(density)를 제어합니다.
우리는 항상 사용자/방문자에게 전달하고자 하는 정보의 양과 그들이 공간 단위당 얼마나 받을 용의가 있는지 간에 균형을 맞추려고 노력하고 있습니다. 그것이 바로 정보 밀도의 과제입니다. 너무 밀도가 높아서 인터페이스가 어수선하고 분주하게 느껴집니다. 너무 적고 공허하고 낭비적인 느낌이 들어요. 다음은 선도적이지 않지만 정보 밀도(density)의 개념을 완벽하게 보여 주는 예입니다.
presentation
https://material.io/design/layout/density.html#usage
  • 간격(spacing)을 보완합니다.
구성 요소 사이의 여백이 큰 매우 숨쉴 수 있고 밀도가 낮은 디자인(low-density)을 사용하는 경우 레이아웃 내에서 텍스트 블록이 "느러짐(loose)"을 느낄 수 있습니다. 리드선을 증가시켜 단락 자체에 더 많은 호흡성을 도입함으로써 디자인의 전반적인 호흡성을 준수함으로써 이를 해결할 수 있습니다.
세계 최고의 디자인 대행사인 IDEO의 숨가쁘게 느껴지는 웹사이트와 엔지니어링 및 제조 분야의 선두 기업인 Mercedes-Benz의 작고 풍부하고 로드된 웹사이트를 비교한 예가 있습니다.
presentation
Breathable vs compact compositions
IDEO’s website의 단락이 어떻게 더 숨 쉬기 쉬운지 전체적인 구성 간격을 보완할 수 있는지 알아봅니다. 이를 Mercedes-Benz’s website의 웹 사이트와 대조하여 텍스트 블록이 약간 더 조여져 정보 포화도가 증가했다는 이미지를 전달합니다.
  • 주의(Attention)를 끌기/강조(emphasis)를 높입니다.
선 간격(line spacing)을 올바르게 활용하는 경우 대비를 사용하여 특정 블록을 강조 표시할 수 있습니다.
presentation


약간의 괴상함을 느낀다면 anti-aliasing을 고려해 볼 수 있습니다.이 anti-aliasing은 디지털 프로젝트에 매우 중요 할 수 있습니다. 하지만 이것은 또 다른 시간 동안 다뤄질 주제입니다. 주요 이점은 다음과 같습니다. 모든 프로젝트에서 타이포그래픽에 더 많은 주의를 기울이십시오. 우리가 처리 할 수 있는 몇 가지 매개 변수를 활용하는 방법을 배우는 것은 당신의 디자인을 좋은 것에서 매우 좋은 것으로 만드는 것입니다.
presentation

Originally published at muz.li

이 글은 번역 글입니다. 원본 링크입니다.


https://www.facebook.com/groups/224179755005643/

안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp