brunch

You can make anything
by writing

C.S.Lewis

by Lawn Feb 17. 2023

[HIG] Labels

편집할 수 없는 정적 텍스트 라벨

본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.


Introduction


레이블(Label)은 사람들이 읽고 복사할 수 있지만 편집할 수는 없는 정적 텍스트입니다.


레이블은 인터페이스 전체에서 버튼, 메뉴 항목, 그리고 화면에 텍스트를 표시하여 사용자가 현재 맥락과 다음에 수행할 수 있는 작업을 이해하는 데 도움을 줍니다.

레이블이라는 단어는 여러 위치에 나타날 수 있는 편집 불가능한 텍스트를 말합니다. 예를 들어, 

  

버튼에서 레이블은 일반적으로 편집, 취소, 전송과 같이 버튼이 어떤 동작을 하는지 전달합니다.

리스트에서 레이블은 각 항목을 설명할 수 있으며, 종종 기호나 이미지와 함께 보입니다.

화면에서 레이블은 컨트롤을 소개하거나 사람들이 화면에서 수행할 수 있는 일반적인 동작 또는 작업을 설명하여 추가적인 맥락을 제공할 수 있습니다.


DEVELOPER NOTE : SwiftUI는 수정할 수 없는 텍스트를 표시하는 방법으로 2가지, Label 및 Text 컴포넌트를 정의합니다.


아래의 가이드라인은 레이블을 사용해 텍스트를 표시하는 데 도움이 될 수 있습니다. 경우에 따라 buttons , menus, 그리고 lists와 같은 특정 컴포넌트의 가이드라인은 텍스트를 사용하는 것에 대한 추가적인 권장 사항을 포함하고 있습니다.


Best practices


사용자가 편집할 필요가 없는 적은 양의 텍스트를 표시하기 위해서 레이블을 사용합니다. 사용자가 적은 양의 텍스트를 편집하게 하려면 text field를 사용하는 것이 좋습니다. 많은 양의 텍스트를 표시하고 사용자가 선택적으로 편집할 수 있게 하려면 text view를 사용합니다.


시스템 폰트를 사용하는 것이 좋습니다. 레이블은 일반 텍스트 또는 스타일 텍스트를 표시할 수 있으며, 기본적으로 다이내믹 타입(Dynamic Type, 사용 가능한 경우)을 지원합니다. 레이블의 스타일을 조정하거나 커스텀 폰트를 사용할 경우 텍스트를 읽을 수 있는지 확인하는 것이 좋습니다.


시스템에서 제공한 레이블 색상을 사용해 상대적인 중요도를 전달합니다. 시스템은 텍스트에 다양한 시각적 중요성을 부여하기 위해 네 가지 레이블 색상을 정의합니다. 추가적인 가이드라인은 Color를 확인하세요.

iOS, iPadOS, tvOS

labelColor

secondaryLabelColor

tertiaryLabelColor

quaternaryLabelColor

macOS

labelColor

secondaryLabelColor

tertiaryLabelColor

quaternaryLabelColor


유용한 레이블 텍스트를 선택할 수 있게 만듭니다. 만약 레이블이 에러 메시지, 위치 또는 IP 주소와 같은 유용한 정보를 포함하고 있다면, 다른 곳에 붙여 넣을 수 있도록 사용자가 텍스트를 선택하고 복사할 수 있게 하는 것을 고려하는 것이 좋습니다.


Platform considerations


No additional considerations for iOS, iPadOS, or tvOS.


MacOS

DEVELOPER NOTE : Label에 수정할 수 없는 텍스트를 표시하는 방법으로 NSTextField의 프로퍼티인  isEditable을 사용하세요.


watchOS

watchOS 앱에서 SwiftUI의 Label 및 Text 컴포넌트를 사용할 때 추가적으로 WatchKit의 날짜 및 타이머 레이블을 사용해 실시간 값을 표시할 수 있습니다.


왼쪽 아래의 date label(날짜 레이블)은 현재 날짜, 현재 시간 또는 이 둘을 함께 나타낼 수 있습니다. 또한 다양한 포맷, 달력 및 시간대를 사용하도록 날짜 레이블을 구성할 수 있습니다. 구성 후 날짜 레이블은 앱에서 추가적인 입력 없이 해당 값을 업데이트합니다. 오른쪽 아래의 timer label(타이머 레이블)은 정확한 카운트다운 또는 카운트업 타이머를 표시합니다. 타이머 레이블을 구성해 카운트 값을 다양한 포맷 을로 표시할 수 있습니다. 구성 후 타이머 레이블은 앱에서 추가적인 입력 없이 카운트다운 또는 카운트업 됩니다.

컴플리케이션(Complication)에 날짜 레이블 및 타이머 레이블을 사용하는 것을 고려해 보세요. 시스템에서 제공하는 날짜 및 타이머 레이블을 사용할 때 watchOS는 가용 가능한 공간에 맞춰 레이블의 내용을 알맞게 조정합니다. 가이드라인은 Complications을 참고하시고, 개발자 가이드라인은 CLKRelativeDateTextProvider을 참고하세요.


Resources


Related   

Text fields

Text views


Developer documentation   

Label — SwiftUI

Text — SwiftUI

UILabel — UIKit

NSTextField — AppKit


작가의 이전글 [HIG] Disclosure controls
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari