[HIG] Components - Labels

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

Labels | Apple Developer Documentation

Labels

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

• Label은 인터페이스 전체에 텍스트를 표시하고 버튼, 메뉴 아이템, 뷰에서 사용자가 현재 컨텍스트와 다음에 수행할 작업을 이해하는데 도움을 준다.
• Label이라는 용어는 다양한 위치에 나타날 수 있는 편집할 수 없는 텍스트를 나타낸다.
  • 버튼에서 Label은 일반적으로 취소, 편집 또는 보내기와 같이 버튼이 수행하는 작업을 전달한다.
  • List에서 Label은 각 항목을 기술하며 종종 이미지나 기호와 함께 표시된다.
  • 뷰 내부에서 label은 사람들이 뷰에서 수행할 수 있는 일반적인 액션이나 작업을 설명하거나 control을 introducing 하여 추가 컨텍스트를 제공한다.
    • introducing control이라는 단어 뜻이 이해가 잘 안돼서 gpt에게 물어보니 다음과 같은 답을 얻을 수 있었다.
    • "Introducing Control"라는 문구는 일반적으로 어떤 새로운 시스템, 제품, 서비스 또는 개념을 소개하는 의미로 사용됩니다.
• SwiftUI에서는 편집할 수 없는 텍스트를 표시하기 위해 Label과 Text라는 2가지 components를 정의한다.

 

Best practices

• label은 편집할 필요가 없는 소량의 텍스트를 표시할 때 사용하자.
• 소량의 텍스트를 편집해야 한다면 TextField를, 많은 양의 텍스트를 표시하고 필요에 따라 편집할 수 있도록 하려면 TextView를 사용하자!!
• 가능한 System Font를 사용하자.
  • Label은 plain과 styled text를 표시할 수 있고 기본적으로 가능한 경우 Dynamic Type을 지원한다.
  • Label 스타일을 조정하거나 커스텀 폰트를 사용하는 경우 텍스트의 legible을 유지해야 한다.
• System-provided Label Color를 사용해 상대적 중요성을 전달하자..!
  • 시스템은 appearance가 다른 4가지 Label 색상을 정의하여 텍스트에 다양한 수준의 시각적 중요도를 부여할 수 있도록 도와준다.

• 유용한 Label 텍스트를 selectable하게 만들자.
  • Label에 오류 메시지, 위치, IP 주소와 같은 유용한 정보가 포함된 경우에는 사람들이 Label을 선택하고 복사할 수 있도록 하는 것이 좋다.

 

후기

• iOS 개발을 하면서 가장 많이 사용하는 UI Component 중 하나가 Label이 아닐까 싶은데 내용이 많지는 않지만 이번 기회에 HIG를 읽고 정리했습니다.
• 대부분은 다들 직관적으로 알고 있던 내용들일 것 같습니다.
• 소량의 텍스트를 편집 불가능하게 보여줄 때만 Label을 사용하는 것이 좋다는 것을 한번 더 리마인드하고 넘어가면 될 것 같습니다..!
• 그리고..,, 항상 HIG를 읽다 보면 System에서 기본적으로 제공하는 폰트, 색상, UI를 활용하는 것을 꽤나 강력?하게 제안하고 있는데 사실 지금까지 다양한 프로젝트를 하면서 컬러, 폰트 등은 시스템의 것을 활용한 적이 거의 없는 것 같다는 생각이 들었습니다.
• 보통 디자이너분들이 피그마에 UI를 만들어주시는데 거의 모든 경우에 직접 색상도 짜오시고 폰트도 외부 폰트로 지정되어 있었습니다.
• System의 것을 사용하면 개발도 훨씬 편하고 사용자에게도 직관적으로 느껴질 것 같다는 장점이 있습니다. 물론 상황마다 커스텀이 더 좋은 효과를 보여줄 때도 있겠지만 대부분의 경우는 반대라고 생각됩니다.
• HIG는 읽을수록 개발자와 디자이너 모두가 이해하고 있어야 하는 교본이라고 느껴집니다. 한쪽만 알고 있으면 상대를 설득시켜야 하는데 물론 이 것도 의미있는 과정이겠지만 역시나 물리적, 정신적 리소스가 꽤 필요하기에 쉽지 않은 것 같습니다.
• 그럼에도 꾸준히 공부할수록 식견이 넓어지는 느낌이 드네요! ㅎㅎ