brunch

You can make anything
by writing

C.S.Lewis

by Lawn Jan 09. 2023

[HIG] Typography

좋은 타이포그래피 디자인

본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.

Introduction

읽기 쉬운 텍스트를 제공하는 것 외에도 좋은 타이포그래피는 정보의 계층 구조를 명확히 하고 중요한 콘텐츠를 전달하며 브랜드를 표현하는 데 도움을 줍니다.

Best practices

대부분의 사람들이 쉽게 읽을 수 있는 최소한의 글꼴 크기를 제공하는 것이 좋습니다. 다양한 디스플레이에서 발생할 수 있는 픽셀 및 밝기 등의 차이에 따라 최소 지원 글꼴의 크기가 달라질 수 있습니다. 디스플레이에 대한 근접성, 시력 및 움직임, 환경 조명과 같은 요인은 모두 사용자의 가독성에 영향을 미칩니다. 사람들이 iOS, iPadOS, tvOS 및 watchOS에서 화면에서 텍스트의 크기를 선택할 수 있는 동적 타입(dynamic type)을 지원하면 사람들이 텍스트를 자신에게 맞는 크기로 조정해서 앱이나 게임이 적절하게 적용시킬 수 있습니다. 개발자 지침은 Text input and output을 참고하세요. 사용 가능한 크기는 Specifications을 참고하세요.

중요한 정보를 강조하고 사람들이 계층 구조를 이해하는데 도움이 되도록 필요에 따라 글꼴 두께, 크기 및 색상을 조정합니다. 사람들이 텍스트 크기를 조정할 때 상대적인 계층 구조와 텍스트 요소의 시각적 구분을 유지해야 합니다.

인터페이스에서 사용하는 서체의 수를 최소화하는 것이 좋습니다. 서로 다른 서체를 너무 많이 혼합하면 정보 계층 구조가 모호해지고 가독성이 떨어질 수 있습니다.

다양한 상황에서 가독성을 테스트합니다. 예를 들어 사람들은 밝은 빛 아래에서 콘텐츠를 보거나 움직이거나 멀리서 텍스틀 볼 수 있습니다. 테스트를 통해 사용자의 가독성을 확인하고, 문제가 있다면 대비를 높이거나 배경색은 수정 또는 텍스트 크기를 조정해 시스템 글꼴과 같이 가독성을 최적화하도록 설계해야 합니다.

가독성을 유지하기 위해 가벼운 글꼴 두께(light font weights)를 사용하지 않는 것이 좋습니다. 예를 들어 시스템 제공 글꼴을 사용하는 경우 일반(Regular), 중간(Medium), 세미볼드(Semibold) 또는 볼드(Bold), 글꼴 두께를 사용하고 특히 텍스트가 작을 때 보기 어려울 수 있는 초경량(Ultralight), 가벼운 글꼴 두께(Light font weights)는 지양해서 사용하세요.

텍스트 크기가 변경될 때 적용될 콘텐츠의 우선순위를 정해야 합니다. 모든 콘텐츠가 똑같이 중요하지는 않습니다. 사람들이 더 큰 크기의 텍스트 선택할 때 관심 있는 콘텐츠에 적용되기를 원합니다. 사람들은 화면에 있는 모든 텍스트의 크기가 커지는 것을 원하지 않습니다. 예를 들어 사람들이 큰 텍스트 접근성이 좋은 크기를 선택하면 Mail은 메시지의 제목과 본문을 큰 게 표시하지만 덜 중요한 텍스트(예: 날짜 및 보낸 사람)는 작은 크기 그대로 남겨둡니다.

Using system fonts

Apple은 다양한 두께, 크기, 스타일 및 언어를 지원하는 두 가지 서체 패밀리를 제공합니다.

San Francisco (SF)는 SF Pro, SF Compact, SF Arabic 및 SF Mono을 포함하는 산세리프 서체 패밀리입니다.

또한 이 서체는 부드러운 또는 둥근 UI 요소의 모양으로 텍스트를 조정하거나 대체 타이포그래피 음성(alternative typographic voice)을 제공하는 데 사용할 수 있는 SF Pro Rounded, SF Arabic Rounded 및 SF Compact Rounded를 제공합니다.

New York (NY) 은 SF 글꼴과 함께 단독으로 잘 적용되도록 설계된 세리프 서체 패밀리입니다.

여기에서 San Francisco 및 New York 글꼴을 다운로드할 수 있습니다.

시스템은 SF 및 NY 글꼴을 가변 글꼴 형식(variable font format)으로 제공합니다. 이를 통해 서로 다른 글꼴 스타일을 하나의 파일에 결합하고 스타일 간 보간을 지원하여 중간 글꼴을 만들 수 있습니다.

NOTE : 가변 글꼴(variable font)을 사용하면 다양한 크기에 맞게 다양한 타이포그래피 디자인을 조정할 수 있습니다. 모든 플랫폼에서 시스템 글꼴은 개별 광학 크기(optical size 예: 텍스트 및 디스플레이)와 가중치를 하나의 연속적인 디자인으로 병합하는 동적 광학 크기를 지원하여 시스템이 각 글리프 또는 글자 형태를 보간하여 적절히 적용됩니다. 크기 및 동적 광학 크기를 사용하면 가변 글꼴 형식(variable font format)의 모든 기능을 지원하지 않는 디자인 도구로 작업하지 않는 한 개별 광학 크기를 사용할 필요가 없습니다.

역자 설명 : 가변 폰트는 Adobe, Apple, Google, Microsoft 가 협력하여 폰트의 너비, 두께, 스타일마다 별도의 다른 파일을 사용하는 기존 폰트 대신 다양한 유형의 폰트를 단일 파일에 통합할 수 있는 OpenType 폰트 사양을 발전시킨 것이며 가변 폰트(Variable fonts)를 오픈타입 가변 폰트(OpenType Variable Fonts)라고 부르기도 합니다. 가변 폰트는 width(너비), weight(두께), slant(기울기) 등 폰트 별로 다양한 축을 가지고 있으며 이 축을 수치로 조정하여 원하는 스타일을 지정하고 조합할 수 있습니다.

역자 설명 : 광학 크기(optical size)는 문자의 두께가 폰트의 크기에 따라 변경되는 것을 말합니다.

시각적 계층을 정의하고 다양한 크기와 콘텍스트에서 명확하고 읽기 쉬운 디자인을 만드는 데 도움이 되도록 시스템 글꼴은 Ultralight에서 Black까지 다양한 두께로 제공되며 SF의 경우 Condensed 및 Condensed를 비롯한 여러 너비로 제공됩니다. SF 기호는 동등한 가중치를 사용하기 때문에 선택한 크기나 스타일에 관계없이 기호와 인접한 텍스트 간에 일관성을 제공할 수 있습니다.

NOTE : SF Symbols는 San Francisco 시스템 글꼴과 원활하게 통합되는 포괄적인 기호 라이브러리를 제공하여 모든 두께와 크기의 텍스트에 자동으로 적용됩니다. 특히 텍스트 내에서 개념을 전달하거나 개체를 묘사해야 하는 경우 기호 사용을 고려하세요.

시스템은 두 서체 패밀리 모두에서 적용되는 텍스트 스타일인 타이포그래피 속성 집합을 제공합니다. 텍스트 스타일은 각 텍스트 크기에 대한 글꼴 두께, 포인트 크기 및 행간 값의 조합을 제공합니다. 예를 들어 본문 텍스트 스타일은 여러 줄의 텍스트를 편안하게 읽을 수 있는 값을 사용하는 반면 헤드라인 스타일은 제목을 주변 콘텐츠와 구분하는 데 도움이 되는 글꼴 크기와 두께를 제공합니다. 한마디로 텍스트 스타일은 콘텐츠의 다양한 중요도를 표현하는 데 사용할 수 있는 타이포그래피 계층 구조를 제공합니다. 또한 텍스트 스타일을 사용하면 사람들이 시스템의 텍스트 크기를 변경하거나 접근성 설정에서 큰 텍스트(large text)를 사용하는 것과 같이 접근 설정을 사용할 때 텍스트 크기를 비례적으로 조정할 수 있습니다.

기본적으로 제공되는 텍스트 스타일을 사용하는 것이 좋습니다. 시스템 정의된 텍스트 스타일은 글꼴 크기와 무게를 통해 정보 계층 구조를 전달하는 편리한 방법을 제공합니다. 시스템 글꼴과 함께 텍스트 스타일을 사용하면 Dynamic Type 및 더 큰 접근 가능 유형의 크기(사용 가능한 경우)도 지원되므로 사람들이 자신에게 맞는 텍스트 크기를 선택할 수 있습니다.

필요한 경우 기본적으로 제공된 텍스트 스타일을 수정합니다. 시스템 API는 텍스트 스타일의 일부 측면을 수정할 수 있는 기호 특성이라고 하는 글꼴 조정을 정의합니다. 예를 들어 대담한 특성은 텍스트에 가중치를 추가하여 다른 수준의 계층 구조를 만들 수 있도록 합니다. 가독성을 높이거나 공간을 절약해야 하는 경우 기호 특성을 사용하여 행간을 조정할 수도 있습니다. 예를 들어 넓은 열이나 긴 구절에 텍스트를 표시할 때 줄 사이에 더 많은 공간( 느슨한 행간 )을 사용하면 사람들이 한 줄에서 다음 줄로 이동할 때 위치를 더 쉽게 유지할 수 있습니다. 반대로, 높이가 제한된 영역(예: 목록 행)에 여러 줄의 텍스트를 표시해야 하는 경우 줄 사이의 간격을 줄입니다.) 텍스트가 잘 맞도록 도와줄 수 있습니다. 3줄 이상의 텍스트를 표시해야 하는 경우 높이가 제한된 영역에서도 줄을 너무 좁게 만들지 마십시오. 개발자 지침은 leading(_:)를 참고하세요.

인터페이스 모형에서 필요에 따라 추적(tracking)을 조정합니다. 앱이 실행중일 때 시스템 글꼴은 모든 크기에서 동적으로 추적(tracking)을 텍스트의 크기를 조정할 수 있습니다. 가변 시스템 글꼴(variable font fonts)을 사용하는 인터페이스의 정확한 인터페이스 목업을 생성하기 위해 특정 포인트 크기에서 개별 광학 크기를 선택할 필요는 없지만 추적(tracking)을 조정해야 할 수도 있습니다. 지침은 Specifications. 을 참고하세요.

DEVELOPER NOTE : Font.Design 에 정의된 상수를 사용하여 모든 시스템 글꼴에 액세스 할 수 있습니다. 앱이나 게임에 시스템 글꼴을 포함시키지 마세요. 예를 들어 모든 플랫폼에서 시스템 글꼴을 가져오려면 default를 사용하세요. serif를 사용하여 New York 글꼴을 가져옵니다.

Using custom fonts

사용자 정의 글꼴을 사람들이 읽기 쉬운지 확인하세요. 브랜딩 목적이나 몰입형 게임 환경과 같이 앱에 맞춤 글꼴이 꼭 필요한 경우가 아니면 시스템 글꼴을 사용하는 것이 좋습니다. 사용자 지정 글꼴을 사용하는 경우 사람들이 다양한 상황, 조건에서 쉽게 읽을 수 있도록 해야 합니다.

사용자 지정 글꼴에 대한 접근성 기능을 제공해야 합니다. 시스템 글꼴은 동적 유형(dynamic type)을 자동으로 지원하고 사람들이 굵은(bold) 텍스트와 같은 접근성 기능을 사용하면 자동으로 적용됩니다. 사용자 정의 글꼴을 사용하는 경우 동일한 동작을 구현할 수 있어야 합니다. 개발자 지침은 Applying custom fonts to text을 참고하세요.

Platform considerations

iOS, iPadOS

SF Pro는 iOS 및 iPadOS의 시스템 글꼴입니다. iOS 및 iPadOS 앱도 NY를 사용할 수 있습니다.

macOS

SF Pro는 macOS의 시스템 글꼴입니다. NY는 Mac Catalyst로 구축된 Mac 앱에서 사용할 수 있습니다. macOS는 동적 유형(dynamic type)을 지원하지 않습니다.

필요한 경우 동적 시스템 글꼴 변형(dynamic system font variants)을 사용하여 표준 텍스트와 맞게 제공해야 하세요. 동적 시스템 글꼴 변형(dynamic system font variants)은 시스템 제공 컨트롤의 텍스트와 동일한 형태가 느낌을 텍스트에 제공합니다. 아래 표를 통해 플랫폼의 다른 앱과 일관된 형태를 제공하세요.