[HIG] Human Interface Guidelines - Labels

https://developer.apple.com/design/human-interface-guidelines/labels

Labels | Apple Developer Documentation

1. 정의

Labels 정의는

A label is a static piece of text that people can read and often copy, but not edit.

label 은 사람들이 읽고 종종 복사할 수 있지만 편집할 수 없는 정적인 텍스트 조각 이라고 합니다.

조금 더 읽어보겠습니다.

Labels display text throughout the interface, in buttons, menu items, and views, helping people understand the current context and what they can do next.
The term label refers to uneditable text that can appear in various places.

For example:
- Within a button, a label generally conveys what the button does, such as Edit, Cancel, or Send.
- Within many lists, a label can describe each item, often accompanied by a symbol or an image.
- Within a view, a label might provide additional context by introducing a control or describing a common action or task that people can perform in the view.

요약하면 
사용자가 현재 상황(context)을 이해하고 다음에 무엇을 해야(do) 할지 알 수 있도록 돕는, 편집할 수 없는 텍스트 라고 합니다.

label은 언제 사용하면 좋을까요? 그에 따른 Best practices 가 존재합니다.

 

2. Best practices

1. Use a label to display a small amount of text that people don’t need to edit.

사용자가 edit 할 필요가 없는 작은 양의 텍스트를 보여줄 때는 UILabel을 사용하세요.
작은 양인데, edit 해야 한다면 UITextField를 사용하고,
텍스트의 양이 많고, 선택적으로 edit 할 수 있는 경우는 UITextView를 사용하면 됩니다.

2. Prefer system fonts.

시스템 기본 font 를 사용하여 읽기 쉽게 만들고, 사용자 지정 font 나 스타일을 적용할 경우에도 텍스트 가독성을 유지하세요.

3. Use system-provided label colors to communicate relative importance.

중요도에 따라 시스템 제공 label 색상을 사용하고, 더 자세한 내용은 '색상' 가이드에서 확인하세요.

4. Make useful label text selectable.

유용한 정보(오류 메시지, 위치, IP 주소 등)를 담고 있는 라벨은 사용자가 쉽게 복사해서 붙여 넣을 수 있도록 선택 가능하게 만드세요.

 

3. SwiftUI

SwiftUI 에서 실제로 Label, Text 구조체 두 개가 존재하는데 각각 언제 사용하면 좋을지 알아봅시다.

Label

https://developer.apple.com/documentation/SwiftUI/Label

Label | Apple Developer Documentation

A standard label for user interface items, consisting of an icon with a title.
아이콘과 제목으로 구성된 사용자 인터페이스 항목의 표준 라벨입니다.

Label은 텍스트와 이미지(아이콘)를 함께 표시할 때 사용하도록 설계되었습니다.
아이콘이 포함된 List, Button, Menu 등 시각적 요소를 통해 기능을 명확히 보여줘야 할 때 사용하면 되겠군요

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Label("Rain", systemImage: "cloud.rain")
            Label("Snow", systemImage: "snow")
            Label("Sun", systemImage: "sun.max")
        }
    }
}

#Preview {
    ContentView()
}

Text

https://developer.apple.com/documentation/SwiftUI/Text

Text | Apple Developer Documentation

A view that displays one or more lines of read-only text.
한 줄 또는 여러 줄의 읽기 전용 텍스트를 표시하는 뷰.

텍스트만 표시할 때 사용하면 되고, 목, 본문, 부제목 등 순수한 텍스트를 표시할 때 사용하면 좋을 것 같습니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("순수 정보만")
            Text("드리 겠습니다.")
        }
    }
}

#Preview {
    ContentView()
}

감 사합니다.

 

SwiftUI에서 Label과 Text를 큰 고민 없이 사용했지만,
가이드라인을 통해 각각의 명확한 용도를 이해하게 되어 앞으로 더 적절한 상황에 사용할 수 있을 것 같습니다.

Xcode 16.2
iOS 18.6
MacOS Sequoir 15.3.1
환경에서 작성 한 글입니다.