모바일 개발에서의 Ellipsize — 개념 및 텍스트 자르기 방법

Ellipsize란?

Ellipsize(ellipsis — 줄임표에서 유래)는 컨테이너 크기를 초과하는 텍스트를 표시하는 기술입니다. 단순히 경계에서 라인을 자르는 대신 ellipsize는 줄임표 문자(세 개의 점, Unicode U+2026)를 추가하여 숨겨진 콘텐츠가 있음을 사용자에게 알립니다.

이 용어는 Android SDK에서 확립되었으며 android:ellipsize 속성이 오버플로 시 TextView의 동작을 정의합니다. iOS에서는 유사한 기능을 자르기(truncation)라고 하며 NSLineBreakMode를 통해 관리됩니다. 웹에서는 값이 ellipsis인 CSS 속성 text-overflow가 사용됩니다.

Ellipsize의 주요 목적은 텍스트가 단축되었음을 사용자에게 알리는 것입니다. 픽셀 기반 클리핑에서는 단어가 반으로 잘릴 수 있지만 ellipsize는 가독성을 보장합니다. 줄임표는 단어나 문자를 깨뜨리지 않고 완전한 단어 또는 문자 뒤에 배치됩니다. 이는 Material Design 및 Human Interface Guidelines의 원칙에 부합합니다.

컨테이너 너비가 고정되고 텍스트 길이가 동적인 경우 기사 제목, 표 셀, 레이블이 있는 버튼, 목록의 연락처, 이동 경로 및 파일 경로에서 ellipsize를 사용하세요.

Android에서 Ellipsize: TextView 및 모드

Android에서 ellipsize는 XML의 android:ellipsize 속성 또는 코드의 setEllipsize() 메서드를 통해 구성됩니다. 네 가지 모드를 사용할 수 있으며 각 모드는 텍스트의 어느 쪽이 잘릴지 결정합니다.

END 모드(대부분의 경우 기본값)는 라인의 끝을 자르고 컨테이너 오른쪽에 줄임표를 배치합니다. START 모드는 시작을 자릅니다 — 줄임표는 왼쪽, 표시 텍스트는 오른쪽입니다. MIDDLE은 중간을 자르고 라인의 시작과 끝을 표시된 상태로 유지합니다. MARQUEE 모드는 텍스트의 애니메이션 스크롤로, 줄임표가 표시되지 않고 텍스트가 순환적으로 스크롤됩니다.

<!-- XML layout -->
<TextView
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="Very long text that will be truncated"
    android:ellipsize="end"
    android:maxLines="1"
    android:singleLine="true" />

<!-- Kotlin code -->
textView.setEllipsize(TextUtils.TruncateAt.MIDDLE)

중요: ellipsize는 maxLines 또는 singleLine과 함께만 작동합니다. 줄 수가 제한되지 않으면 TextView가 높이로 확장되고 ellipsize가 활성화되지 않습니다. Android 8.0(API 26)부터 ellipsize는 maxLines > 1의 멀티라인 모드를 지원합니다 — 줄임표는 마지막 줄 끝에 배치됩니다.

프로그래밍 방식으로 사용하려면 TextUtils.TruncateAt을 END, START, MIDDLE, MARQUEE 값 중 하나로 호출하세요. NONE 값은 ellipsize를 비활성화합니다.

실제로 END는 90%의 경우에 적합합니다 — 사용자는 텍스트가 끝에서 잘릴 것으로 기대합니다. MIDDLE은 파일 경로(예: "/User/.../project/main.kt")에 사용되어 경로의 끝이 보이도록 합니다. START는 공통 접두사가 있는 이름(예: "...@gmail.com")에 사용됩니다.

iOS에서 텍스트 자르기: NSLineBreakMode

iOS에서 ellipsize에 해당하는 것은 UILabel 클래스의 lineBreakMode 속성입니다(UITextView의 경우 NSTextContainer). 세 가지 자르기 모드를 사용할 수 있습니다: .byTruncatingTail(끝), .byTruncatingMiddle(중간), .byTruncatingHead(시작).

.byTruncatingTail 모드는 android:ellipsize="end"에 해당합니다. .byTruncatingHead는 START, .byTruncatingMiddle은 MIDDLE에 해당합니다. .byClipping 모드는 줄임표 없이 텍스트를 자르며 현대 인터페이스에서는 거의 사용되지 않습니다. .byCharWrapping 모드는 자르기 없이 문자 단위로 줄바꿈합니다.

let label = UILabel()
label.text = "레이블 경계에 맞지 않는 긴 텍스트"
label.lineBreakMode = .byTruncatingMiddle
label.numberOfLines = 1

// NSAttributedString은 lineBreakMode도 지원합니다
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineBreakMode = .byTruncatingTail

iOS에서 자르기는 numberOfLines와 함께 작동합니다. numberOfLines = 1이면 텍스트가 한 줄에서 잘립니다. numberOfLines = 2이면 두 번째 줄에서 잘립니다. UITextView는 NSTextContainer.lineBreakMode를 사용하며 이 역시 세 가지 자르기 모드를 모두 지원합니다.

iOS의 특징: UILabel의 .byTruncatingMiddle 모드는 짧은 문자열에서 예기치 않게 동작할 수 있습니다 — 문자열이 완전히 맞으면 줄임표가 나타나지 않습니다. 짧은 문자열에서 줄임표가 확실히 표시되도록 하려면 sizeThatFits를 통한 사용자 지정 로직을 사용하세요.

CSS text-overflow: 웹에서 줄임표 추가 방법

웹 개발에서 ellipsize는 CSS 속성 text-overflow: ellipsis를 overflow: hidden 및 white-space: nowrap과 함께 사용하여 구현됩니다. 이는 웹 인터페이스에서 줄임표로 라인을 자르는 표준 방법입니다.

.text-cell {
    width: 250px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

text-overflow 속성은 overflow: hidden 없이 작동하지 않습니다 — 브라우저는 콘텐츠가 잘리고 있음을 알아야 합니다. white-space: nowrap은 줄바꿈을 방지합니다. 그렇지 않으면 텍스트가 다음 줄로 넘어가 오버플로가 발생하지 않습니다.

여러 줄 자르기(예: 두 번째 줄 끝에 줄임표가 있는 2줄)의 경우 이전에는 실험적인 -webkit-line-clamp 속성이 사용되었으며, 이제는 CSS Overflow Level 4에서 line-clamp로 표준화되었습니다.

실제로 text-overflow: ellipsis는 10년 이상 모든 최신 브라우저에서 지원되며 웹에서 텍스트를 자르는 가장 신뢰할 수 있는 방법입니다.

올바른 자르기 모드 선택 방법

Ellipsize 모드 선택은 UX에 영향을 미치며 인터페이스 인식을 개선하거나 사용자를 혼란스럽게 할 수 있습니다. 주요 규칙: 사용자는 이해에 가장 덜 필요한 부분이 잘릴 것으로 기대합니다.

END 모드는 제목, 캡션, 타이틀에 적합합니다 — 사용자는 라인의 시작을 보고 컨텍스트를 이해합니다. 오른쪽의 줄임표는 "더 있지만 맞지 않았다"는 의미입니다. 이것이 가장 직관적이고 일반적인 모드입니다.

MIDDLE 모드는 파일 경로, 이메일 주소 및 긴 식별자에 필수적입니다. 라인 끝에 고유한 정보(파일 이름, 도메인)가 포함된 경우 사용자는 특히 그것을 볼 수 있어야 하며 시작 부분은 짧게 할 수 있습니다. 예: "/User/.../important_document.pdf" — 파일 이름이 즉시 표시됩니다.

START 모드는 거의 사용되지 않지만 공통 접두사가 있는 연락처 목록에 유용합니다 — 예를 들어 모든 주소가 동일한 도메인에 속하는 경우 "username@gmail.com" 대신 "...@gmail.com"을 사용합니다. 그러나 이 패턴은 도움이 되기보다 혼란을 주는 경우가 많습니다. Nielsen Norman Group에 따르면 사용자는 왼쪽에서 오른쪽으로 읽으며 시작 부분에 중요한 정보를 기대하므로 START 자르기는 인지 부하를 증가시킵니다.

MARQUEE 모드(스크롤 텍스트)는 업데이트 빈도가 낮은 한 줄 요소에만 적합합니다: 플레이어의 현재 트랙, 뉴스 티커, 상태 표시줄. 테이블, 목록 또는 폼에 마키를 사용하지 마세요 — 애니메이션은 주의를 산만하게 하고 약한 장치에서 성능을 저하시킵니다.

일반적인 문제 및 해결 방법

첫 번째 문제 — ellipsize가 작동하지 않음. 가장 일반적인 원인은 줄 수 제한이 없기 때문입니다. maxLines가 없으면 TextView가 높이로 커지고 너비 오버플로가 발생하지 않습니다. 해결 방법: 항상 maxLines를 지정하세요(한 줄의 경우 singleLine="true").

두 번째 문제 — 프로그래밍 방식으로 텍스트를 변경할 때 줄임표가 표시되지 않음. setText()를 호출한 후 TextView가 올바르게 다시 그려지지 않을 수 있습니다. 해결 방법: 텍스트를 변경한 후 invalidate() 또는 post(() -> requestLayout())를 호출하세요.

세 번째 문제 — 다른 Android 버전에서 다른 동작. API 23 이전에는 멀티라인 모드(maxLines > 1)에서 ellipsize가 지원되지 않았습니다. 해결 방법: 호환성을 위해 Build.VERSION.SDK_INT를 확인하고 AndroidX의 ViewCompat.setEllipsize()를 사용하세요.

네 번째 문제 — 사용자 정의 글꼴에서 줄임표 문자가 표시되지 않음. 글꼴에 U+2026 글리프가 없으면 줄임표가 세 개의 점으로 대체됩니다. 해결 방법: 줄임표 글리프가 있는지 글꼴을 확인하거나 fontFamily를 통해 대체 글꼴을 추가하세요.