리딩과 줄 간격: 개념 및 iOS와 Android에서의 설정

리딩과 줄 간격이란

리딩(발음은 “레딩”) — 타이포그래픽에서 인접한 줄의 기선 간의 수직 거리입니다. 기선은 텍스트 문자가 위치하는 보이지 않는 선입니다. 리딩이 클수록 줄이 서로 어느 정도로 더 자유록게 배치됩니다. 디지털 타이포그래픽에서는 리딩을 좌우 줄 간격 또는 줄 높이라고 부릅니다.

역사적으로 이 용어는 금속 타이포그래픽 시대에 나타났습니다: 조판공이 줄 간격을 달게 하기 위해 작은 납 스트립을 줄 사이에 보고다 같았습니다. 현대 폰트에서는 리딩이 폰트 크기에 대한 비율로 설정됩니다. 기본 시스템 값은 1.2(폰트 크기의 120%)이지만, 긴 텍스트와 모바일 인터페이스에서는 더 큰 값이 권장됩니다. Material Design Typography Guidelines에 따르면, 웹 및 모바일 인터페이스의 주요 텍스트에 대한 최적의 줄 높이는 1.4-1.5입니다.

리딩과 줄 간격의 차이: 리딩은 기선에서 기선까지의 완전한 거리이고, 줄 간격은 한 줄의 하단 경계선과 다음 줄의 상단 경계선 사이의 거리입니다. 대부분의 모바일 API(iOS NSParagraphStyle, Android TextView)는 줄의 자연스러운 높이 위에 추가 여백으로 줄 간격을 사용합니다. 이는 총 줄 간격을 계산할 때 중요합니다.

모바일 인터페이스에 최적인 리딩 값

최적의 리딩 선택은 폰트 크기, 줄 길이, 사용 컨텍스트 및 청중 등 여러 요소에 따라 달라집니다. 일반적인 줄 넓이 40-60자인 모바일 인터페이스에선 폰트 크기의 1.4에서 1.6까지의 리딩이 권장됩니다. 걱은 줄(레이블, 버튼)은 더 작은 리딩(1.0-1.2)을 사용할 수 있습니다. 긴 텍스트(기사, 설명서)는 최대 가독성을 위해 1.8까지의 더 큰 리딩이 필요합니다.

실험 데이터: Wichita State University Software Usability Laboratory의 연구에 따르면, 리딩 1.5는 같은 줄 넓이에서 리딩 1.0과 비교하여 읽기 속도를 7.5% 향상시킴니다. 난독증 환자에게 최적의 리딩은 1.8까지 더 높습니다. 이러한 데이터는 WCAG 2.2 권장 사항에 의해 확인되었으며, 컨텐츠 손실 없이 줄 간격을 1.5까지 늮히고 있습니다.

글괴의 영향: x-height(소문자의 상대적 높이)이 높은 폰트는 x-height이 낮은 폰트보다 더 큰 리딩이 필요합니다. 예를 들어, Helvetica(높은 x-height)는 본문 텍스트에 리딩 1.5를 권장하고, Didot(낮은 x-height)는 1.3을 권장합니다. 이는 높은 x-height에서는 같은 줄 간격에도 줄이 시각적으로 더 빠르게 합쳐지기 때문입니다.

iOS에서 NSParagraphStyle을 통한 리딩 구현

iOS에서 줄 간격은 NSMutableParagraphStyle 클래스를 통해 제어되며, 두 가지 핵심 속성을 포함합니다: lineSpacing(줄 사이 추가 여백, 포인트 단위)과 lineHeightMultiple(줄 높이 곱수). 이 속성들은 함께 작동합니다: 최종 줄 높이는 폰트의 자연스러운 높이에 lineHeightMultiple을 곱하고 lineSpacing을 더한 것으로 계산됩니다.

let paragraphStyle = NSMutableParagraphStyle()

// 방법 1: 줄 높이 곱수
paragraphStyle.lineHeightMultiple = 1.5

// 방법 2: 줄 사이 추가 여백
paragraphStyle.lineSpacing = 4.0

// NSAttributedString을 통해 적용
let attributedText = NSAttributedString(
    string: "Text with custom line spacing",
    attributes: [
        .paragraphStyle: paragraphStyle
    ]
)

lineHeightMultiple — 선호되는 방법입니다. 폰트 크기가 바될 때 자동으로 크기가 조정되기 때문입니다. lineSpacing은 절대적인 포인트로 설정되고 크기가 조정되지 않으므로, Dynamic Type을 사용할 때 부일치가 발생할 수 있습니다. Apple Text Programming Guide에 따르면, 접근성이 호환되는 인터페이스에는 UIFontMetrics와 함께 lineHeightMultiple을 사용하십시오.

SwiftUI는 Text와 VStack에 대한 .lineSpacing() 모디파이어를 제공합니다. UIKit과 달리, SwiftUI에서는 줄 간격이 포인트로 설정되고 내장 곱수가 없습니다. 곱수를 구현하려면 개발자가 폰트 크기에 기반하여 line spacing을 수동으로 계산해야 합니다. 제한 사항: SwiftUI는 lineHeightMultiple을 직접 지원하지 않습니다 — 계산된 값으로 .lineSpacing(CGFloat)을 사용하십시오.

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // 폰트 크기의 50%
    }

    var body: some View {
        Text("줄 간격")
        Text("1.5 곱수")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Android에서 줄 간격 설정

Android에서 줄 간격은 TextView의 두 가지 속성으로 설정됩니다: lineSpacingExtra(px 단위의 추가 여백)와 lineSpacingMultiplier(줄 높이 곱수, 기본값 1.0). iOS와 유사하게, 곱수는 폰트 크기가 바즐 때 크기가 조정되고, Extra는 절대값입니다. 접근성이 호환되는 인터페이스에는 곱수를 사용하는 것이 좋습니다.

// XML 레이아웃에서
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Text with line spacing"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.5"
    android:textSize="16sp" />

// Kotlin에서 프로그래메틱으로
val textView = findViewById<TextView>(R.id.contentText)
textView.setLineSpacing(
    TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        4f,
        resources.displayMetrics
    ),
    1.5f
)

Compose — 최신 Android UI 프레임워크 — TextStyle 모디파이어에서 lineHeight 매개변수를 사용합니다. XML 접근 방식과 달리, Compose에서는 lineHeight가 sp 단위의 완전한 줄 높이로 설정됩니다(기본값 = fontSize * 1.2). 곱수를 설정하려면 개발자가 fontSize에 대한 백분율로 lineHeight를 지정합니다. 예시: TextStyle(fontSize = 16.sp, lineHeight = 24.sp)는 곱수 1.5를 제공합니다.

제한 사항: Android API 28 이전에서는 lineSpacingExtra와 lineSpacingMultiplier가 일부 폰트, 특히 사용자 정의 폰트(TTF/OTF)에서 잘못 동작할 수 있습니다. 실제 기기에서 테스트하고, systemTextView가 기본적으로 lineSpacingMultiplier 1.0을 사용한다는 점(추가 여백 없음)을 고려하는 것이 좋습니다. ScrollView에서 긴 텍스트에 대해서는 줄 간격을 명시적으로 설정해야 합니다.

CSS line-height를 통한 웹 개발에서의 줄 간격

웹에서 줄 간격은 CSS 속성 line-height로 설정되며, 이는 숫자(곱수), 백분율 값, 길이 단위(px, em) 또는 키워드 normal일 수 있습니다. 숫자 곱수가 선호되는 방법입니다. 상속되고 자식 요소의 폰트 크기에 대해 크기가 조정되기 때문입니다. normal 값은 대부분의 폰트에서 약 1.2에 해당합니다.

/* Numerical multiplier (recommended) */
body {
    font-size: 16px;
    line-height: 1.5;
}

/* Percentage value */
.article-content {
    line-height: 150%;
}

/* Fixed value (does not scale) */
.small-text {
    font-size: 12px;
    line-height: 18px;
}

숫자 곱수 vs em: line-height: 1.5와 line-height: 1.5em은 다른 것입니다. 숫자 곱수는 계산된 값으로 상속되고 각 자식 요소에 대해 해당하의 font-size를 기반으로 재계산됩니다. em은 부모의 font-size를 기반으로 고정된 계산 값으로 상속됩니다. 이것이 중요한 차이점입니다: font-size: 20px이 font-size: 16px 안에 있을 때, line-height: 1.5는 30px을 생성하고, line-height: 1.5em은 24px(부모로부터)을 생성합니다. 권장: 항상 숫자 곱수를 사용하십시오.

iOS, Android 그리고 웹에서의 리딩 설정 비교

다른 API에도 불구하고, 줄 간격 설정의 원칙은 모든 플랫폼에서 같습니다. 곱수는 폰트 크기가 바즐 때 크기가 조정되고 접근성에 유리합니다. 절대값(여백)은 크기가 조정되지 않으므로 Dynamic Type이나 큰 텍스트 설정을 사용할 때 문제를 일으킬 수 있습니다.

크로스 플랫폼 전략: 디자인 시스템에서 fontSize의 곱수로 lineHeight를 설정하십시오. 예를 들어, 디자인 토큰에서: line-height-body = 1.5, line-height-heading = 1.1. 각 플랫폼은 이 곱수를 자신의 API로 구현합니다: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5. 이를 통해 모든 플랫폼에서 동일한 시각적 결과를 보장합니다.

중요한 세분사항: iOS에서 lineHeightMultiple은 완전한 줄 높이(폰트의 ascender + descender 포함)에 적용되고, Android에서 lineSpacingMultiplier는 Minikin 렌더링 엔진이 계산한 줄 높이에 적용됩니다. 실제로 같은 곱수 값에서 시각적인 리딩에 약간의 차이가 발생합니다. 픽셀 퍼펜트를 위해서는 플랫폼에 따른 조정값이 있는 절대 값을 사용하십시오.