[UI기획] 텍스트 필드 종류 및 정의

텍스트 필드는 사용자가 데이터를 입력할 수 있는 공간으로, 다양한 형태로 존재합니다. 여기에는 몇 가지 주요 텍스트 필드 종류와 정의를 소개합니다.

1. 단일 행 텍스트 필드 (Single-line Text Field):
   사용자가 짧은 텍스트, 예를 들어 이름, 이메일 주소, 또는 비밀번호를 입력할 때 사용하는 필드입니다. 입력하는 텍스트가 한 줄로 표시됩니다.
2. 다중 행 텍스트 필드 (Multi-line Text Field):
   여러 줄의 텍스트를 입력할 수 있는 필드로, 예를 들어 주소, 메모, 또는 댓글을 입력할 때 사용됩니다. 사용자가 입력할 수 있는 텍스트 양이 많으며, 텍스트 상자 크기를 조절할 수 있는 경우도 있습니다.
3. 비밀번호 필드 (Password Field):
   사용자가 비밀번호를 입력할 때 사용되는 텍스트 필드입니다. 보안을 위해 입력한 텍스트가 별표(*) 또는 점(.)으로 표시됩니다.
4. 숫자 텍스트 필드 (Number Field):
   숫자만 입력할 수 있는 필드입니다. 예를 들어, 나이, 전화번호, 또는 수량을 입력할 때 사용됩니다. 이 필드는 일반적으로 숫자 키패드를 활성화하며, 숫자 범위를 설정할 수 있습니다.
5. 검색 필드 (Search Field):
   사용자가 검색어를 입력하고, 웹사이트나 애플리케이션 내에서 검색할 수 있게 하는 필드입니다. 검색어 입력 후 바로 검색 결과가 표시되거나, 사용자가 검색 버튼을 누를 수 있도록 되어 있습니다.
6. 숨겨진 필드 (Hidden Field):
   웹 페이지에서 사용자에게 보이지 않지만, 폼 데이터를 전송할 때 사용되는 필드입니다. 예를 들어, 사용자의 세션 정보나 CSRF 토큰 같은 정보를 저장할 때 사용됩니다.
7. URL 필드 (URL Field):
   웹 주소를 입력할 수 있는 필드입니다. 입력된 텍스트는 URL 형식에 맞게 검증되며, 형식에 맞지 않으면 경고 메시지가 표시될 수 있습니다.
8. 이메일 필드 (Email Field):
   이메일 주소를 입력할 수 있는 필드입니다. 입력된 텍스트가 이메일 형식에 맞는지 검증되며, 잘못된 형식일 경우 경고 메시지가 나타납니다.

각 텍스트 필드는 입력 데이터를 정확히 수집하고, 사용자 경험을 향상시키는 데 중요한 역할을 합니다.

---

[레이블표시 UI]

레이블표시 입력폼

 

레이블 표시 UI는 사용자 인터페이스(UI)에서 텍스트 필드나 버튼 등과 같은 요소에 설명이나 이름을 부여하기 위해 사용하는 중요한 디자인 요소입니다. 레이블은 사용자가 화면에서 요소의 목적을 쉽게 이해하고, 올바른 데이터를 입력하거나 선택할 수 있도록 도와줍니다. 레이블 표시 UI는 다음과 같은 방식으로 구현될 수 있습니다.

 

1. 상단 레이블 (Top Label)

• 위치: 텍스트 필드나 다른 입력 요소의 바로 위에 위치합니다.
• 특징: 입력 필드와 독립적으로 위치하여, 사용자가 입력 필드에 대한 설명을 읽기 쉽습니다.
• 예시:
  • 이름
    [텍스트 필드]

2. 좌측 레이블 (Left Label)

• 위치: 입력 필드의 왼쪽에 위치합니다.
• 특징: 필드와 레이블이 가로로 정렬되어 있어 화면 공간을 효율적으로 사용할 수 있습니다. 다만, 레이블의 길이가 길어지면 UI가 복잡해질 수 있습니다.
• 예시:
  • 이름: [텍스트 필드]

3. 내부 레이블 (Inline Label 또는 Placeholder)

• 위치: 입력 필드 내부에 위치하며, 사용자가 텍스트 필드를 클릭하면 사라집니다.
• 특징: 간결한 디자인이 가능하지만, 레이블이 사라진 후에는 어떤 내용을 입력해야 하는지 명확하지 않을 수 있습니다.
• 예시:
  • [이름 입력]

4. 아이콘 레이블 (Icon Label)

• 위치: 텍스트 레이블 대신 아이콘으로 요소의 의미를 전달합니다.
• 특징: 직관적이고 간결한 UI 디자인을 가능하게 하지만, 아이콘의 의미를 사용자가 이해할 수 있도록 명확히 해야 합니다.
• 예시:
  • 🔍 [검색 필드]

5. 플로팅 레이블 (Floating Label)

• 위치: 기본적으로 입력 필드 내부에 위치하다가 사용자가 필드를 클릭하면 위로 이동합니다.
• 특징: 공간을 효율적으로 사용하면서도 레이블이 항상 표시되어 사용성을 높입니다.
• 예시:
  • [텍스트 필드]
    (클릭 시) 이름 [텍스트 필드]

6. 툴팁 레이블 (Tooltip Label)

• 위치: 사용자가 요소 위에 마우스를 올리거나 클릭하면 나타나는 레이블입니다.
• 특징: 화면 공간을 절약하면서도 필요한 경우 추가 설명을 제공할 수 있습니다.
• 예시:
  • [아이콘]
    (마우스 오버 시) "이것은 검색 아이콘입니다."

레이블 UI는 사용자가 직관적으로 이해하고 조작할 수 있도록 돕는 중요한 요소입니다. 디자인 시 레이블의 위치와 방식은 사용자 경험을 고려하여 선택하는 것이 중요합니다.

 

[자동완성 입력 UI]

자동완성 입력 UI(Autocomplete UI)는 사용자가 입력하는 동안 관련된 제안 항목을 제공하여 입력을 빠르고 정확하게 할 수 있도록 돕는 사용자 인터페이스입니다. 자동완성 UI는 특히 검색창, 주소 입력, 이메일 작성 등 다양한 상황에서 유용하게 사용됩니다. 이 UI는 다음과 같은 특징과 방식으로 구현될 수 있습니다.

자동완성입력UI

 

1. 드롭다운 목록 (Dropdown List)

• 특징: 사용자가 입력 필드에 텍스트를 입력할 때, 하단에 관련된 제안 목록이 드롭다운 형식으로 표시됩니다. 사용자는 제안된 항목을 클릭하거나 키보드의 화살표 키와 엔터 키를 사용해 선택할 수 있습니다.
• 예시:
  • 사용자가 "애"라고 입력하면, "애플", "애니메이션", "애견" 등이 제안 목록에 나타남.

2. 인라인 자동완성 (Inline Autocomplete)

• 특징: 사용자가 입력하는 동안, 입력된 텍스트를 기준으로 첫 번째 제안 항목이 텍스트 필드에 자동으로 채워집니다. 사용자가 타이핑을 계속하면 제안된 부분이 수정될 수 있으며, 탭 키나 엔터 키로 자동완성을 확정할 수 있습니다.
• 예시:
  • 사용자가 "Go"를 입력하면 "Google"이 자동으로 채워지며, 사용자가 추가로 "o"를 입력해 "Google"이 확정됨.

3. 태그 입력 (Tagging Autocomplete)

• 특징: 이메일 주소나 해시태그와 같은 여러 개의 항목을 입력할 때 사용됩니다. 사용자가 입력한 항목이 자동완성되고, 이를 선택하면 태그 형태로 입력 필드에 추가됩니다.
• 예시:
  • 이메일 작성 시, "john"을 입력하면 "john@example.com"이 제안되며, 이를 선택하면 "john@example.com"이 태그 형태로 추가됨.

4. 추천 검색어 (Search Suggestions)

• 특징: 검색 엔진이나 쇼핑몰에서 사용되며, 사용자가 입력할 때 이전 검색 데이터나 인기 검색어를 바탕으로 추천 검색어를 제공합니다. 사용자는 제안된 검색어 중 하나를 선택하여 검색을 수행할 수 있습니다.
• 예시:
  • 사용자가 "스마트"라고 입력하면 "스마트폰", "스마트워치", "스마트홈" 등이 추천 검색어로 나타남.

5. 검색어 하이라이트 (Highlighted Suggestions)

• 특징: 제안된 목록에서 사용자가 입력한 부분이 강조 표시(하이라이트)되어 사용자에게 보다 명확한 선택지를 제공합니다. 일반적으로 입력된 텍스트는 굵게 표시되거나 색상이 변경됩니다.
• 예시:
  • 사용자가 "레스토"를 입력하면 제안 목록에서 "레스토랑", "레스토랑 예약", "레스토랑 추천"과 같은 항목의 "레스토" 부분이 강조됨.

6. 음성 입력 지원 (Voice Input with Autocomplete)

• 특징: 음성으로 입력한 텍스트에 대한 자동완성 제안을 제공하는 UI입니다. 음성 인식 기술과 결합하여 사용자가 보다 편리하게 입력할 수 있습니다.
• 예시:
  • 사용자가 음성으로 "네비게이션"이라고 말하면, 자동으로 "네비게이션" 관련 제안 목록이 나타남.

7. 다중 선택 자동완성 (Multi-select Autocomplete)

• 특징: 사용자가 여러 개의 옵션을 선택할 수 있는 자동완성 UI입니다. 사용자는 제안된 항목 중 하나 이상을 선택하여 입력 필드에 추가할 수 있습니다.
• 예시:
  • 사용자가 "과일"이라고 입력하면 "사과", "바나나", "오렌지" 등이 제안되고, 여러 항목을 선택할 수 있음.

자동완성 UI 구현 시 고려사항

• 응답 속도: 사용자가 입력할 때 지연 없이 빠르게 제안 항목이 나타나야 합니다.
• 정확도: 사용자 입력과 관련성이 높은 제안 항목을 제공해야 합니다.
• 사용성: 제안된 목록에서 선택이 쉽고, 키보드와 마우스 모두로 조작할 수 있어야 합니다.

자동완성 입력 UI는 사용자가 보다 편리하고 효율적으로 데이터를 입력할 수 있게 해주며, 특히 검색 기능에서 유용하게 사용됩니다.

---

도움말 입력 폼

입력에 도움이 되는 단어로 텍스트 필드 하단 좌측에 노출합니다.

저장 버튼 등의 액션이 끝나면 유효성 검사를 위해 나타나는 경우와는 달리 처음의 성공을 위해 입력 시 나타나는 노출 문구라고 생각하시면 됩니다.

도움말입력UI

필수 입력란 입력 폼

받아야 하는 정보 중 필수 항목에 해당 할 경우 레이블 좌측 또는 우측에 * 표시를 제공하고

필수 입력 이 안되었을 경우 다음 단계로 못넘어간다는 의미입니다.

너무도 익숙해진 UI라 많은분들이 아실 것으로 생각됩니다.

필수입력 ui

단어 수 제한 입력 폼

텍스트 필드 하단 우측 또는 텍스트 필드 내 문자 한도 비율을 표시해 줍니다.

(사용된 문자 수 / 최대 문자 제한 수)

단어 수 제한 입력 폼

아이콘이 들어간 입력 폼

너무 흔한 UI 중 하나인 갤린더 필드 입니다.

아이콘만 보아도 어떤 용도인지 직관적으로 이해가 됩니다.

 

아이콘이 있는 입력폼

 

음성 입력 입력 폼

음성 입력도 너무 익숙해진 UI지만 당시에는 획기적이였습니다.

갤린더처럼 아이콘 방식이지만 음성인식 필드라는 것을 아이콘으로 표현했고 사용자들은 바로 이해했습니다.

너무 간단해 보이지만 놀라운 발상이라고 생각했습니다.

음성 입력 입력 폼

 

선택 입력 입력 폼

입력하기 전 사용자 선택이 먼저 필요한 경우하면 Dropdown버튼을 필드와 함께 사용합니다.

선택 입력 입력 폼

지우기 버튼 제공 입력 폼

검색 필드에서 많이 사용되는 UI입니다.

사용자가 어떤 내용을 입력했을 경우 지울 수 있도록 X 버튼을 제공해 줍니다.

지우기 버튼 제공 입력 폼

유형화된 입력 입력 폼

휴대폰 번호, 주민등록번호등의 유형화된 입력에 대해서는 특화된 입력폼을 제공해줍니다.

주민번호입력폼

접두사와 접미사 적용 입력 폼

금액의 단위 표시의 경우 입력 필드 밖 또는 다른 칼라서 입력 필드 내 표시하여 제공해줍니다.

접두사와 접미사 적용 입력 폼

비밀번호 입력 입력 폼

필드내 글자 입력 시 마스킹 처리로 자동 변경되는 기능을 제공하거나

사용자가 어떤 글자를 입력했는지 볼 수 있는 아이콘을 노출해줍니다.

비밀번호 입력 입력 폼

---

 

기획은 검정색입니다.

"졸업 가운의 색이 검정인 이유는 검정이 성취와 권력의 색이기 때문입니다."

 

질문 환영합니다. 댓글 남겨주세요.
thinkhub