앱 개발의 Line Height — 개념과 타이포그래피에 미치는 영향

타이포그래피에서 Line Height란

Line Height(줄 높이)는 연속된 줄의 기준선(baseline) 사이 거리를 결정하는 기본적인 타이포그래픽 매개변수입니다. 웹 및 모바일 개발에서 line height는 텍스트의 수직 리듬을 설정합니다. 각 줄은 특정 높이를 차지하며, 이 매개변수는 다음 줄로 이동할 때 누적됩니다. Line height에는 글리프의 실제 높이(어센더 + 디센더)뿐만 아니라 가독성을 향상시키는 추가 공간도 포함됩니다.

수학적으로 line height는 다음과 같이 표현됩니다: line-height = font-size × multiplier. font-size = 16 px이고 multiplier = 1.5이면 line-height = 24 px입니다. 이 경우 행간(leading)은 24 - (어센더 + 디센더) 픽셀입니다. 대부분의 디자인 시스템과 플랫폼이 배수를 사용하는 이유는 글꼴 크기가 변경될 때 자동으로 스케일되기 때문입니다.

Material Design Type Scale(2025)에 따르면, line height는 font-size 및 font-weight와 함께 애플리케이션 타이포그래피 시스템의 세 가지 핵심 매개변수 중 하나입니다. 타이포그래피 계층 구조의 모든 수준에서 일관된 line height 값은 인터페이스를 시각적으로 통합하는 수직 리듬을 만듭니다. 최적값에서 10%의 line-height 편차는 육안으로도 확인할 수 있으며 인터페이스의 인지 품질을 저하시킵니다.

Line Height와 Leading의 차이

Leading(발음 «레딩»)은 글리프 높이를 뺀 기준선에서 기준선까지의 줄 사이 거리를 나타내는 역사적인 타이포그래피 용어입니다. 금속 활판 인쇄에서 leading은 줄 간격을 늘리기 위해 줄 사이에 삽입되는 납 조각을 의미했습니다. Line height는 글꼴 높이와 leading을 모두 포함하는 더 현대적인 개념입니다.

실제로 Figma나 Sketch의 디자인을 코드로 변환할 때 이 차이가 중요합니다. 디자인 도구는 일반적으로 line-height(또는 단순히 줄 높이)를 지정합니다. 모바일 플랫폼 API는 다른 용어를 사용할 수 있습니다: iOS는 minimumLineHeight/maximumLineHeight와 함께 lineSpacing(leading에 가까움)을 사용하고, Android는 alignment와 trim이 있는 LineHeightStyle을 사용하고, Flutter는 height(unitless 배수)를 사용합니다.

// iOS: difference between line height and line spacing
let paragraphStyle = NSMutableParagraphStyle()

// 1. Direct line height setting
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Line spacing (additional space between lines)
paragraphStyle.lineSpacing = 4.0  // added to natural line height of font

핵심 차이점: minimumLineHeight를 설정하면 모든 줄이 동일한 높이를 사용하여 리드미컬한 그리드에 좋습니다. lineSpacing만 설정하면 줄 높이가 글꼴 크기에 따라 달라집니다. 이는 더 유연하지만 예측 가능성은 낮은 접근 방식입니다. 디자인 시스템의 경우 minimumLineHeight가 엄격하게 제어된 결과를 제공하므로 권장됩니다.

IBM Carbon Design System — Typography Guidelines(2025)에 따르면, line height와 leading의 차이는 사용자 정의 글꼴을 사용할 때 특히 두드러집니다. 글꼴에 큰 내장 leading이 있는 경우(예: SF Pro), lineSpacing = 0으로도 허용 가능한 결과를 얻을 수 있습니다. 글꼴의 leading이 작은 경우(일부 오픈 소스 서체), 추가 lineSpacing 없이 줄이 서로 달라붙어 보입니다.

모바일 인터페이스에 최적의 Line Height

최적의 line height는 글꼴 크기, 줄 길이, 서체 및 대상 독자 등 여러 요인에 따라 달라집니다. 모바일 기기의 본문 텍스트(줄 길이 35~55자)의 경우 권장 범위는 font-size의 1.4~1.6배입니다. 이 값은 텍스트의 시각적 응집력을 잃지 않으면서 줄 사이의 편안한 시선 이동을 위한 충분한 수직 간격을 제공합니다.

제목의 경우 줄 길이가 일반적으로 더 짧기(2~6단어) 때문에 line height를 더 작게(font-size의 1.1~1.25배) 설정할 수 있습니다. 제목은 장시간 읽기보다는 주의를 끄는 것이 주요 기능이므로 큰 행간이 필요하지 않습니다. 또한 큰 제목 글꼴 크기(24~32 pt)에 line-height 1.5를 사용하면 페이지의 수직 리듬을 깨는 과도한 간격이 발생합니다.

• 본문 텍스트(16~18 pt) — line-height 1.4~1.6. 줄 길이가 화면 너비로 제한되는 모바일 기기에서 편안한 읽기를 위한 최소값입니다.
• 작은 텍스트(11~13 pt) — line-height 1.3~1.5. 작은 글꼴 크기는 줄이 더 짧고 눈이 다음 줄을 더 빨리 찾을 수 있으므로 더 작은 배수가 필요합니다.
• 큰 텍스트(20~32 pt) — line-height 1.1~1.25. 글꼴이 클수록 가독성에 필요한 상대적 행간이 줄어듭니다.
• 고정폭 텍스트 — line-height 1.3~1.5. 고정폭 글꼴(코드용)은 일반적으로 메트릭이 더 크므로 line-height를 1.3으로 줄일 수 있습니다.

// Flutter: line height in design system
class AppTextStyles {
    static const body = TextStyle(
        fontSize: 16,
        height: 1.5,      // line-height 24px
    );

    static const headline = TextStyle(
        fontSize: 28,
        height: 1.2,      // line-height 33.6px
    );

    static const caption = TextStyle(
        fontSize: 12,
        height: 1.4,      // line-height 16.8px
    );
}

W3C — Accessibility Requirements for Typography(2025)에 따르면, 본문 텍스트의 line height가 1.2 미만이면 접근성 장벽으로 간주됩니다. 난독증과 시각 장애가 있는 사용자는 밀도가 높은 텍스트를 읽는 데 상당한 어려움을 겪습니다. WCAG 2.2는 주요 콘텐츠에 최소 1.5의 line-height를 권장하지만, 모바일 인터페이스에서는 제한된 화면 너비를 고려하여 이 값을 1.4로 낮출 수 있습니다.

iOS의 Line Height: UIKit과 SwiftUI

iOS에서 line height는 NSMutableParagraphStyle 또는 SwiftUI 내장 수정자를 통해 제어됩니다. UIKit은 세 가지 주요 속성을 제공합니다: minimumLineHeight와 maximumLineHeight(정확한 줄 높이 설정)와 lineSpacing(줄 사이 추가 간격)입니다. TextKit(NSTextStorage, NSLayoutManager)을 사용할 때 line height는 lineFragmentRect에서 고려되며 텍스트 블록 형상 계산에 영향을 줍니다.

// iOS UIKit: setting line height via NSMutableParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Important: minimum + maximum = fixed line-height

let attributes: [NSAttributedString.Key: Any] = [
    .font: UIFont.systemFont(ofSize: 16),
    .paragraphStyle: paragraphStyle
]

let label = UILabel()
label.attributedText = NSAttributedString(
    string: "Text with fixed line height",
    attributes: attributes
)

SwiftUI에서 line height는 .lineSpacing(value) 수정자(줄 사이에 추가 공간 추가) 또는 line height를 포함하는 사용자 정의 TextStyle이 있는 .font를 통해 설정됩니다. SwiftUI는 Dynamic Type도 지원합니다. 지정된 line height는 사용자가 설정에서 글꼴 크기를 변경할 때 스케일됩니다.

// SwiftUI: line height via lineSpacing
Text("Text with custom line spacing
second line
third line")
    .font(.body)
    .lineSpacing(4)     // additional space between lines

// SwiftUI: fixed line height via custom style
Text("Heading with line height 1.2")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // compensation for precise line-height

Apple HIG — Typography Implementation(2025)에 따르면, minimumLineHeight를 통해 고정 line-height를 사용할 때 값이 글꼴의 자연스러운 line-height보다 작지 않은지 확인해야 합니다. minimumLineHeight가 어센더 + 디센더보다 작으면 UIKit은 설정을 무시하고 자연스러운 높이를 사용합니다. 글꼴이나 크기를 변경할 때 예기치 않은 결과가 발생할 수 있습니다.

Android의 Line Height: View 시스템과 Compose

Android 개발에서 line height는 기존 View 시스템과 Jetpack Compose에서 다르게 관리됩니다. View 시스템에서는 TextView.setLineSpacing(extra, multiplier) 메서드가 사용됩니다. extra 매개변수는 픽셀 단위의 추가 공간이고, multiplier는 자연스러운 줄 높이의 배수입니다. 결과 높이 = 자연스러운 line-height × multiplier + extra입니다.

// Android View system: line spacing
val textView = TextView(context)
textView.text = "Text with custom line spacing"
textView.setLineSpacing(4f, 1.0f)  // extra=4px, multiplier=1.0

// Usage in XML
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.4" />

Jetpack Compose에서는 LineHeightStyle 클래스를 사용하여 line height를 관리하며, 줄 간격의 정렬(Alignment)과 자르기(Trim)를 설정할 수 있습니다. 이는 단순한 배수보다 더 세밀한 제어를 제공합니다. 예를 들어, 추가 줄 간격을 줄 위아래에 균등하게 배분(align.Center)하거나 완전히 위에 추가(align.Top)하도록 지정할 수 있습니다.

// Jetpack Compose: LineHeightStyle example
Text(
    text = "Sample text
with custom LineHeightStyle
in Jetpack Compose",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// Simple multiplier via TextStyle
Text(
    text = "Line height multiplier",
    style = LocalTextStyle.current.copy(
        lineHeight = TextUnit(1.5f, TextUnitType.Em)
    )
)

Android Developers — Compose Text Styling(2025)에 따르면, LineHeightStyle.Trim.None(기본값)은 첫 번째와 마지막 줄의 간격을 유지하여 Card나 Column에서 정렬이 깨질 수 있습니다. 고정 높이 컨테이너에는 Trim.Both가, 아래쪽 가장자리가 중요한 텍스트 블록에는 Trim.LastLine이 권장됩니다.

Flutter의 Line Height: TextStyle과 StrutStyle

Flutter에서 line height는 TextStyle 클래스의 height 속성을 통해 설정됩니다. font-size의 unitless 배수입니다. fontSize: 16에 height: 1.5는 line-height 24.0을 제공합니다. height 값은 암시적으로 fontSize와 곱해지므로 글꼴 크기가 변경될 때 line-height가 비례하여 스케일됩니다. Flutter는 또한 StrutStyle을 제공합니다. 이는 줄의 실제 글리프와 관계없이 고정 line-height를 강제하는 메커니즘입니다.

// Flutter: line height via TextStyle.height
Text(
    'Text with line height 1.5',
    style: TextStyle(
        fontSize: 16,
        height: 1.5,     // line-height = 24 px
    ),
)

// Flutter: StrutStyle for fixed line height
Text(
    'Text with StrutStyle
fixed line height
independent of glyphs',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle은 다양한 글꼴 크기의 목록(예: 채팅, 뉴스 피드)에서 특히 유용하며, 콘텐츠와 관계없이 모든 줄의 높이가 같아야 합니다. StrutStyle이 없으면 디센더가 없는 문자만 포함된 줄은 «p»나 «y»와 같은 문자가 포함된 줄보다 실제 높이가 작아져 스크롤 시 텍스트가 떨리는 현상이 발생합니다.

Flutter Documentation — Text Layout(2025)에 따르면, forceStrutHeight: true가 있는 StrutStyle은 각 줄의 높이가 지정된 값과 같음을 보장하며, 실제 글리프는 이 공간 내에서 기준선으로 정렬됩니다. 이는 수직 리듬이 시각적 인식에 중요한 텍스트 목록의 표준 접근 방식입니다.

다양한 화면에 적응하는 Line Height

모바일 애플리케이션은 다양한 화면 크기, 픽셀 밀도 및 접근성 설정을 가진 기기에서 실행됩니다. Line height는 가독성을 유지하면서 이러한 변화에 적응해야 합니다. 주요 규칙: px 또는 pt의 고정값 대신 unitless 배수를 사용하여 line-height가 font-size와 함께 스케일되도록 합니다.

Dynamic Type(iOS) 또는 fontScale(Android)을 사용할 때 글꼴 크기는 기준에서 20~50%까지 증가할 수 있습니다. 배수를 통해 지정된 line-height는 자동으로 스케일됩니다. line-height가 고정값(예: font-size 16 pt에서 24 px)으로 설정된 경우, 글꼴이 22 pt로 증가하면 상대적 line-height가 1.09로 떨어집니다. 이는 이미 가독성 임계값 아래입니다.

// iOS: adaptive line height with Dynamic Type
let font = UIFont.preferredFont(
    forTextStyle: .body,
    compatibleWith: traitCollection
)

// Calculate line-height as multiplier from dynamic font
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = lineHeight
paragraphStyle.maximumLineHeight = lineHeight

Material Design — Responsive Typography(2025)에 따르면, 태블릿과 대형 화면(너비 600dp 이상)의 경우 줄 길이가 더 길어지므로 핸드폰보다 본문 line-height를 0.1~0.2 높이는 것이 좋습니다. 화면 너비가 동적으로 변경되는 폴더블 기기의 경우 구성 변경 시마다 line-height를 다시 계산해야 합니다.