brunch

You can make anything
by writing

C.S.Lewis

by Lawn Apr 06. 2024

[HIG] Text fields

텍스트를 입력하거나 편집할 수 있는 텍스트 필드

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

Introduction

텍스트 필드(text field)는 작은 특정 텍스트를 입력하거나 편집할 수 있는 직사각형 영역입니다.

Best practices

이름이나 이메일 주소와 같은 소량의 정보 작성을 입력받기 위해 텍스트 필드를 사용합니다. 사람들이 더 많은 양의 텍스트를 입력하도록 하려면 텍스트 필드 대신 text view를 사용하세요.

텍스트 필드에 힌트를 표시하여 용도를 쉽게 알 수 있도록 합니다. 텍스트 필드를 설명하는 문구가 없는 경우 '이메일' 또는 '비밀번호'와 같은 힌트를 표시한 플레이스 홀더(place holder)를 사용할 수 있습니다. 플레이스 홀더(place holder) 텍스트는 사용자가 입력을 시작하면 사라지므로 해당 필드를 설명하는 별도의 레이블을 함께 제공해 그 용도를 상기시키는 것이 좋을 수 있습니다.

역자설명 : 하단의 이미지는 플레이스 홀더(place holder)의 예시이며, 각각 좋은 예와 안 좋은 예를 보여줍니다.

출처 - UX 컨설턴트 전민수

보안 텍스트 필드(secure field)를 사용하여 비공개 데이터를 숨기세요. 앱에서 비밀번호와 같은 민감한 데이터를 요청할 때는 항상 보안 텍스트 필드(secure field)를 사용하세요. 개발자 가이드라인은 SecureField를 참고하세요.

가능한 텍스트 필드의 크기를 예상되는 텍스트의 크기에 맞게 제공하세요. 텍스트 필드의 크기는 사람들이 제공해야 할 정보의 양을 가늠하는 데 도움이 됩니다.

여러 텍스트 필드의 간격을 균등하게 유지합니다. 레이아웃에 여러 개의 텍스트 필드가 사용된 경우, 사람들이 각 소개 레이블이 속한 입력 필드를 쉽게 확인할 수 있도록 필드 사이에 충분한 간격을 두세요. 가능하면 여러 개의 텍스트 필드를 세로로 쌓고 일정한 너비를 사용하여 보다 정돈된 레이아웃을 만듭니다.

여러 필드 간의 탭 이동이 사용자가 원하는 대로 이루어지도록 하세요. 탭을 사용해 필드를 이동할 때 사람들의 시선에 따른 논리적인 순서로 이동해야 합니다. 시스템에서 자동으로 최적의 논리 순서를 얻으려고 하므로 사용자 지정할 필요가 없습니다.

필드에 입력받은 데이터의 유효성을 적절히 검사합니다. 예를 들어, 필드에 입력받을 수 있는 데이터가 숫자로 이루어진 문자열인 경우 앱은 사용자가 숫자 이외의 문자를 입력했을 때 경고를 표시해야 합니다. 이메일 주소를 입력할 때는 사용자가 포커스를 변경할 때 유효성을 검사하는 것이 가장 좋으며, 사용자 이름이나 비밀번호를 만들 때는 포커스가 다른 필드로 전환되기 전에 유효성 검사를 수행해야 합니다.

숫자 데이터에 숫자 포맷터(number formatter)를 사용하면 도움이 됩니다. 숫자 서식은 숫자 값만 허용하도록 텍스트 필드를 자동으로 구성합니다. 또한 특정 소수점 이하 자릿수, 백분율 또는 통화와 같은 특정 방식으로 값을 표시할 수도 있습니다. 그러나 서식은 사용자의 장소에 따라 크게 달라질 수 있으므로 데이터의 실제 표시 방식을 추정하면 안 됩니다.

필요에 따라 텍스트 필드를 설정합니다. 시스템은 기본적으로 텍스트 필드의 경계를 넘어 확장되는 모든 텍스트를 잘라(clipped) 냅니다. 또는 텍스트를 새 줄(wrapped)로 바꾸거나 시작, 중간 또는 끝에서 줄임표(truncated)로 표시하도록 텍스트 필드를 설정할 수 있습니다.

잘라내거나 잘린 텍스트의 전체 텍스트를 확인하려면 확장 도구 설명(expansion tooltip)을 사용하는 것이 좋습니다. 확장 도구(expansion tooltip) 설명은 일반 도구(tooltip) 설명처럼 동작하며, 사용자가 필드 위에 포인터를 놓으면 표시됩니다.

iOS, iPadOS, tvOS 및 visionOS 앱에서 적절한 키보드 유형을 표시합니다. 숫자나 URL 등 각기 다른 유형의 입력을 용이하게 하도록 설계된 여러 가지 키보드 유형을 사용할 수 있습니다. 데이터 입력을 간소화하려면 사람들이 입력하는 콘텐츠 유형에 적합한 키보드를 표시하세요. 가이드라인은 가상 키보드(Virtual keyboards)를 참고하세요.

tvOS 및 watchOS 앱에서 텍스트 입력을 최소화합니다. Apple TV 및 Apple Watch에서 길거나 많은 텍스트를 입력하는 것은 불편합니다. 텍스트 입력을 최소화하고 버튼 등을 사용하여 정보를 더 효율적으로 요청하는 방법을 고려해 보세요.

Platform considerations

No additional considerations for tvOS or visionOS.

iOS, iPadOS

텍스트 필드 끝에 전체 삭제 버튼을 제공해 사람들이 입력을 한 번에 지울 수 있도록 합니다. 이 기능이 있으면 사용자가 삭제 키를 계속 누를 필요 없이 이 버튼을 탭 하여 텍스트 필드의 내용을 손쉽게 지울 수 있습니다.

이미지와 버튼을 사용하여 텍스트 필드에 명확성과 기능을 제공하세요. 텍스트 필드의 양쪽 끝에 사용자 지정 이미지를 표시하거나 북마크 버튼과 같은 시스템에서 제공하는 버튼을 추가할 수 있습니다. 일반적으로 텍스트 필드의 앞쪽 끝에는 필드의 용도를 표시하고 뒤쪽 끝에는 북마크와 같은 추가 기능을 제공하는 데 사용합니다.