Input & Form

이미지 출처: https://www.figma.com/community/file/1127625426899459390/Input-Field-Forms

 

디지털 인사이트 잡지를 보다가 유용한 것 같아 아래와 같이 기록하였다. 나중에 입력폼을 만드는 기회가 생긴다면 참고해야겠다.

 

 

1. 개수

- 수량은 최소화, 목적에 필요한 질문만

- 필수 입력이 아닌 질문이라면, 선택적 질문임을 명확하게 표기하기

 

2. 순서

- 논리적인 대화의 순서에 따라가기 (기본정보에서 어렵거나 민감한 정보 순서로 자연스럽게)

 

3. 그룹화

- 관련 정보를 그룹화하기

- 입력 폼을 섹션으로 나누거나, 페이지(단계)로 나누기

 

4. 배열

- 수직으로 읽을 수 있도록 단일 열 구성으로 배열

 

5. 액션 버튼

- 직관적인 버튼명을 사용

- 양식의 마지막에 오른쪽 정렬된 형태로 배치

- 보조버튼은 기본 버튼과 구별하여 시각적으로 중요도를 낮추기

 

6. 진행사항

- 프로그래스바, 백분율, 단계 카운터를 통해 진행률을 알려주기

 

7. 올바른 컴포넌트 사용

- 단일 텍스트 필드(single line text field): 짧은 응답에 사용, 길어지는 경우 왼쪽으로 스크롤

- 텍스트 영역(text area): 긴 응답에 사용, 길어지는 경우 수직 스크롤

- 드롭 다운 메뉴(drop-down menu): 사용자가 선택할 수 있는 옵션이 여러 개 미리 정의되어 있는 경우(5개 이상)

- 체크박스(checkbox): 사용자가 선택할 수 있는 옵션이 하나 이상 있을 경우(4개 이하) 여러 개 동시 선택

- 라디오버튼(radio buttons): 미리 정의된 옵션이 하나 이상 있을 경우(4개 이하) 하나만 선택

 

8. 구성

1) 높이: 버튼의 높이와 동일하게 맞추기

2) 길이: 동일한 길이로 맞추는 것을 기본으로 하되, 입력 내용의 형식에 따라 길이가 달라질 수 있음

3) 레이블: 짧고 명확하며 두 단어를 넘지 않고 명확하게 설명할 수 있도록

4) 자리표시자(placeholder): 가급적 사용하지 않음(필드가 채워지면 힌트를 더이상 볼 수 없고, 입력 텍스트와 혼동될 수 있고, 자동번역기나 Page Reader 등에 감지되지 않는 경우가 있음)

5) 아이콘

 - 기능은 없고 장식적인 아이콘은 왼쪽에,

 - 기능이 있는 경우 오른쪽에 표기

 - 피드백 아이콘으로 입력의 성공 여부 표시

6) 입력필드의 상태

 - 기본 스타일로 기본값 표현 → 클릭 시 입력필드가 활성화된 것을 보여주기 위해 보더(Border)나 캐럿(Caret)으로 강조 → 필드가 채워지면 다시 기본 색상으로 돌아감

 - 특정 요구 사항 및 제한으로 인해 입력을 읽기만 할 수 있는 경우 상호작용할 수 없음을 나타냄

 

9. 보조

- 사용자가 올바른 값을 입력할 수 있도록 자동으로 서식 지원

- 자동 완성 (특히 주소를 묻는 경우)

- 사용자의 90% 이상이 동일한 답변을 입력할 것 같은 경우 기본값 제공

 

10. 고급

- 사용자가 여러 개의 개별 답변을 입력할 경우 입력이 완료되면 칩으로 표시

- 25개 이상의 옵션이 있는 경우 드롭다운 검색 제공

- 날짜 선택기를 사용하여 단일 날짜, 날짜 범위를 선택

 

---

참고자료

UI 디자인 가이드 1. Input & Form 좋은 입력 양식 설계를 위한 UI 디자인 지침서, 안설희 디자이너, 디지털 인사이트, 2023년 4월호