모바일 개발에서의 트래킹 — 글자 간 거리의 본질과 설정

타이포그래피에서 트래킹이란?

트래킹(Tracking)은 텍스트 블록의 모든 문자에 균일하게 적용되는 글자 간 거리 조정입니다. 커닝과 달리 각 문자 쌍이 글꼴의 커닝 테이블에 기반하여 개별적으로 조정되는 반면, 트래킹은 전체 범위에 대해 단일 숫자 값으로 설정됩니다. 양의 트래킹은 간격을 늘리고(확장 간격), 음의 트래킹은 줄임니다(압축 간격).

용어는 금속 활자에서 유래되었으며, 글자 간 간격이 활자 사이의 물리적 거리로 조절되었습니다. 디지털 타이포그래피에서는 커닝 테이블 위에 트래킹이 적용됩니다: 먼저 글꼴이 내장된 커닝 쌍을 적용하고, 그 다음 시스템이 모든 문자에 균일한 트래킹을 추가합니다. 결과 간격 = 커닝 + 트래킹. 이는 텍스트를 공격적으로 압축할 때 고려해야 합니다.

측정 단위: 트래킹은 절대 단위(포인트, 픽셀, 밀리미터)와 상대 단위(em, 글꼴 크기의 백분율)로 지정할 수 있습니다. 모바일 개발에서 트래킹은 일반적으로 절대값으로 포인트(iOS)나 sp(Android)로, 웹에서는 em으로 상대값으로 지정됩니다. 상대 단위는 사용자가 글꼴 크기를 변경할 때 스케일되므로 접근성에 유리합니다.

트래킹과 커닝: 근본적인 차이

트래킹과 커닝의 혼동은 초보 디자이너와 개발자에게 가장 흔한 실수 중 하나입니다. 커닝은 마이크로 레벨에서 작동하여 특정 문자 쌍(AV, Te, To)의 기하학적 형태에 따라 간격을 조정합니다. 트래킹은 매크로 레벨에서 작동하여 문자의 형태를 고려하지 않고 퍼그먼트의 모든 문자를 균일하게 이동시킵니다.

시각적 효과: 커닝에서는 다른 문자 쌍 간의 거리가 달라집니다. A와 V 사이는 A와 I 사이보다 작으며, 이는 문자의 형태가 서로 보상하기 때문입니다. 트래킹에서는 모든 거리가 동일합니다: A와 V, A와 I, T와 o 사이 — 모든 곳에서 같은 이동입니다. 이로써 트래킹은 전체적 조정 도구가 되고, 커닝은 세밀한 조정 도구가 됩니다.

결합 사용: 인터페이스 타이포그래피에서 트래킹과 커닝은 함께 사용됩니다. 글꼴에는 기본 최적화를 위한 커닝 테이블이 포함되어 있고, 개발자는 스타일링과 접근성을 위해 트래킹을 추가합니다. 커닝 테이블이 먼저 적용되고, 그 위에 트래킹이 추가됩니다. 음의 트래킹(압축)에서는 커닝 쌍이 원치 않는 격침을 만들 수 있으므로 문제가 되는 조합을 확인하세요.

양의 및 음의 트래킹: 사용 시기

양의 트래킹은 문자 간 거리를 달립니다. 표준 간격에서 문자가 시각적으로 응합되는 작은 텍스트(10–13pt)의 가독성을 향상시키는 데 사용됩니다. 또한 난독증이 있는 사용자를 위한 접근성에서도 사용됩니다. 일반적인 값: iOS에서 0.3–1pt, 웹에서 0.02–0.05em.

음의 트래킹은 문자 간 거리를 줄임니다. 제목(24pt 이상)과 강조 텍스트에서 사용되며, 밀집한 텍스트가 일관되고 현대적으로 보입니다. 크기가 큰 글꼴은 문자 간 거리가 시각적으로 큰 것이므로 압축에 잘 검낵니다. 일반적인 값: -0.3에서 -1pt. 제한: -1pt 미만의 트래킹에서는, 특히 돌출된 요소가 있는 쌍(fi, fj, TT)에서 문자가 격칠 수 있습니다.

경험칙: 각 글꼴 크기에는 수용 가능한 트래킹 범위가 있습니다. 글꼴이 큰 수록 최적의 가독성을 위한 트래킹이 멊집니다. 공식: 최적 트래킹 ≈ font-weight × 0.01 − font-size × 0.001. 16pt의 볼드체(weight 700)의 경우: 700 × 0.01 − 16 × 0.001 = 6.84. 이를 글꼴에 따라 조정하면 약 0.5pt의 양의 트래킹이 됩니다.

다양한 텍스트 유형에 따른 트래킹

본문(14–18pt): 트래킹이 필요 없거나 최소한의 양의 0.1–0.3pt로 감니다. 전문적인 글꼴에는 이미 본문에 대한 최적의 간격이 포함되어 있습니다. 본문의 트래킹에 대한 인의적 개입은 디자인이나 접근성 요구사항에 의해 정당화되어야 합니다. 제목(20–36pt): 글꼴과 가중치에 따라 -0.3에서 -0.8pt까지의 음의 트래킹이 가능합니다. 모두 대문자(ALL CAPS): 0.5–2pt의 양의 트래킹이 권장됩니다. 대문자에는 위아래 단성이 없어 추가 간격이 없으면 시각적으로 응합됩니다.

글꼴 특성: 그로테스크 기하학의 글꼴(Helvetica, Inter, SF Pro)은 서린체 글꼴(Times, Georgia, PT Serif)보다 음의 트래킹을 더 잘 검낵니다. 서린체에서는 서린이 문자 사이에 추가적인 시각적 연결을 만들고, 압축이 텍스트를 읽지 못하게 만듭니다. 서린체 글꼴에는 양의 트래킹만 권장됩니다.

iOS 및 Android에서 트래킹 구현

iOS에서 트래킹은 커닝과 동일한 .kern 속성을 NSAttributedString에서 사용하여 구현되며, 한 가지 차이가 있습니다: 트래킹에는 nil이 아닌 숫자 값이 지정됩니다. nil은 기본 커닝(글꼴 테이블), 0은 커닝 비활성화, 그 외의 숫자는 커닝 테이블 위에 트래킹을 의미합니다. .kern = 2를 설정하면 모든 문자가 내장된 커닝 쌍 위에 +2pt의 글자 간 간격을 받습니다.

let text = "Heading with tracking"
let attributedString = NSMutableAttributedString(string: text)

// 양의 트래킹 +0.8pt
attributedString.addAttribute(
    .kern,
    value: 0.8,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// 트래킹이 있는 UILabel
label.attributedText = attributedString

SwiftUI는 Text에 .tracking() 수식자를 사용하며 CGFloat을 받습니다. UIKit과 달리 SwiftUI 트래킹은 수식자 내의 모든 텍스트에 적용되며, 여러 Text 블록으로 분할하지 않는 한 부분적으로 할 수 없습니다. SwiftUI는 커닝과 트래킹의 조합을 자동으로 처리하여 글꼴의 커닝 테이블 위에 트래킹을 적용합니다.

Android는 TextView에서 letterSpacing 속성을 사용하며, em(글꼴 크기에 대한 상대값)으로 지정됩니다. 0은 기본 트래킹, 0.05는 em의 5% 증가, -0.02는 감소를 의미합니다. Android에서 letterSpacing은 트래킹(모든 문자에 대한 통일)으로 작동하며, 글꼴의 커닝 테이블은 Minikin 렌더링 엔진 레벨에서 자동으로 적용됩니다.

// XML 레이아웃에
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with tracking"
    android:letterSpacing="0.08"
    android:textSize="12sp" />

// Kotlin에서 프로그래밍으로
val textView: TextView = findViewById(R.id.smallText)
textView.letterSpacing = 0.08f

Compose Android에서는 TextStyle의 letterSpacing 매개변수를 사용하며, sp로 지정됩니다. 예를 들어 TextStyle(letterSpacing = 0.5.sp)는 0.5 sp의 트래킹을 제공합니다. XML 접니와 달리 Compose는 단일 TextStyle 객체에서 letterSpacing을 다른 타이포그래피 매개변수와 결합할 수 있어 디자인 시스템 작성을 간소화합니다.

웹 개발에서 letter-spacing 설정

웹에서 트래킹은 CSS 속성 letter-spacing을 통해 구현되며, 모든 길이 단위나 키워드 normal을 받습니다. normal은 0(추가 글자 간 간격 없음)에 해당합니다. 이 속성은 상속되고, 음수 값을 지원하며, 애니메이션이 가능합니다. CSS 규격에 따르면 letter-spacing은 글꼴의 커닝 테이블 다음에 적용됩니다.

/* Positive tracking for small text */
.caption {
    font-size: 11px;
    letter-spacing: 0.03em;
}

/* Negative tracking for headings */
h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Tracking for uppercase */
.uppercase-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

em vs px: em의 letter-spacing은 font-size가 변경될 때 스케일되며 접근성에 유리합니다. px은 스케일되지 않으며 브라우저가 텍스트를 줌하는 경우 일관성이 결여될 수 있습니다. 권장: letter-spacing에는 항상 em을 사용하세요. 예외는 로고와 같이 크기에 관계없이 트래킹이 고정되어야 하는 경우입니다.

letter-spacing 애니메이션: 이 속성은 CSS 전환과 애니메이션을 지원하여 부드러운 텍스트 나타내기 효과를 만들 수 있습니다. 제목이 로드될 때 letter-spacing: -0.05em에서 letter-spacing: 0.01em으로 애니메이션하는 것은 현대 인터페이스에서 인기 있는 기법입니다. 성능: letter-spacing 애니메이션은 텍스트 폭이 변하므로 리플로(레이아웃 재계산)를 유발합니다. 가능하면 덮 성능 애니메이션을 위해 transform과 opacity를 사용하세요.

접근성과 모바일 인터페이스에서의 트래킹

트래킹은 시각 장애와 난독증이 있는 사용자를 위한 텍스트 가독성에 직접 영향을 미칩니다. WCAG 2.2 가이드라인 1.4.12(텍스트 간격)은 글자 간, 줄 간, 문단 간 간격이 특정 값으로 늘어나도 텍스트가 콘텐츠를 잃지 않아야 한다고 요구합니다. letter-spacing은 콘텐츠 크롭핑이나 요소 격침 없이 0.12em까지의 증가를 결디어야 합니다.

난독증: British Dyslexia Association의 연구에 따르면 letter-spacing을 0.12em으로 늘리면 난독증이 있는 사용자의 읽기 속도가 10–15% 향상됩니다. 그러나 이는 개인차가 있으므로 일부 사용자는 표준 간격을 선호합니다. iOS와 Android는 애플리케이션이 준수해야 하는 글자 간 간격 증가를 위한 시스템 접근성 설정을 제공합니다.

개발자를 위한 규칙: letter-spacing이 늘어날 때 깨질 수 있는 고정 너비/높이를 사용하지 마세요. 접근성 확인 없이 텍스트 컨테이너에 overflow: hidden을 사용하지 마세요. 모든 화면에서 letter-spacing을 0.12em으로 늘려 인터페이스를 테스트하세요. 디자인이 깨진다면 접근성을 무시하지 말고 레이아웃을 검토하세요.

플랫폼 지원: iOS는 UIFont.preferredFont가 사용되는 경우 접근성 설정으로 Larger Text가 사용되면 자동으로 letter-spacing을 달립니다. Android는 FontScale을 통해 비슷한 옵션을 제공합니다. 개발자는 이러한 설정을 비활성화해서는 안 됩니다. 테스트 시나리오: 장치 설정에서 최대 텍스트 크기를 사용하고 트래킹이 인터페이스 레이아웃을 깨지 않는지 확인하세요.