데이터 입력
데이터 입력 (Data Entry)
데이터 입력은 객체의 정보를 얻는 중요한 상호작용 방식이에요. 사용자가 정보를 자주 추가, 변경, 삭제하기 때문이죠. 텍스트 입력과 선택 입력의 다양한 방식은 사용자가 상호작용을 더 명확하고 효율적으로 완료하도록 도와줘요. 디자이너는 다음 사항에 주의해야 해요.
출처: 문서
본문
- 초보 사용자나 가끔 방문하는 사용자에게는 직관적인 텍스트를 "Label"로 제공하고, 도메인 전문가에게는 용어(terminology)를 "Label"로 제공해야 해요. 민감한 정보를 사용자가 제공해야 할 때는 힌트를 사용해 시스템이 왜 그렇게 해야 하는지 설명할 수 있어요. 예를 들어 사용자의 신원(ID)이나 전화번호를 얻어야 할 때요.
- 사용자가 맥락을 통해 정보를 얻어 입력을 완료하도록 허용하세요. "좋은 기본값(good default values)", "구조화된 형식(structured formats)", "힌트(hints)", "입력 팁(input tips)" 같은 방식으로 빈 입력에서 사용자가 막연하게 추측하지 않도록 해요.
텍스트 입력 (Text Input Entry)
입력은 데이터 입력의 기본적이고 흔한 방식으로, 사용자에게 텍스트 편집 컴포넌트를 제공해요.
Input (입력)
제한된 길이의 텍스트 입력에 한 줄을 사용해요.
참고: 일부 텍스트(예: 숫자, URL)에는 특정 스타일을 적용할 수 있어요. Input을 참고하세요.
Textarea (텍스트 영역)
단일 긴 텍스트를 위한 여러 줄 텍스트 입력이에요.
팁과 도움 (Tips and helps)
힌트는 보통 Input에 추가되어 사용자의 기억을 도와주며, 데이터 입력 효율을 높일 수 있어요.
참고: Input은 보통 기본적으로 입력의 왼쪽에 있는 label과 함께 작동해요. 텍스트가 너무 길거나 영어 맥락일 때는 위에 올 수도 있어요. 하지만 같은 시스템 안에서는 일관되게 유지해야 해요.
텍스트가 길면 'information' 아이콘이나 팁 도구를 사용할 수 있어요.
짧은 입력 팁(한 문장보다 짧은)은 입력 아래에 둘 수 있어요.
Search (검색)
검색은 사용자가 목표의 범위를 줄이고 방대한 정보 풀에서 필요한 정보를 빠르게 찾도록 도와줘요.
선택 입력 (Selection entry)
사용자가 특정 범위에서 선택하도록 허용해요.
Radio Button (라디오 버튼)
라디오 버튼은 여러 옵션 중에서 하나의 값만 선택할 수 있게 해요. 모든 옵션이 기본적으로 사용자에게 보이므로 비교를 통해 선택할 수 있기 때문에, 라디오 옵션은 너무 많지 않아야 해요.
참고: 라디오 버튼은 옵션이 둘 이상이어야 하고, 보통 다섯 미만이어야 해요.
Checkbox (체크박스)
체크박스는 여러 옵션에서 여러 값을 선택하는 데 사용돼요.
참고:
- 체크박스는 종종 상태를 위해 제출(submit) 동작과 함께 작동해요.
- 단일 체크박스는 두 상태의 전환을 나타낼 수 있어요.
Switch (스위치)
단일 옵션의 상태를 전환하는 데 사용돼요. "Switch"의 인라인 라벨은 명확히 표시되어야 해요. 예: Disable/Enable, Disallow/Allow 등.
'Switch'는 토글이 즉시 적용되므로 버튼과 함께 작동할 필요가 없어요.
참고: 사용자가 "Switch"를 토글하면 상태 변화가 직접 트리거돼요.
Dropdown (드롭다운)
드롭다운은 옵션 수에 더 많은 유연성을 제공해, 사용자가 옵션 목록에서 하나 또는 여러 값을 선택할 수 있게 해요.
참고:
- 옵션이 다섯 개 이상일 때 사용해요.
- 옵션은 논리적 정렬로 나열되고 콘텐츠가 충분히 표시되어야 해요.
Slider (슬라이더)
슬라이더는 연속적 또는 불연속적인 범위에서 앵커를 움직여 적합한 값을 선택할 수 있게 해요. 볼륨, 밝기, 색상 채도 같은 강도나 등급의 옵션을 반영하는 데 더 좋은 선택이에요.
참고: 정확한 값이 필요하지 않을 때 "Slider"를 사용하면 조작이 더 유연하고 편리해요. 정확한 값이 필요할 때는 "NumberInput"을 Slider와 함께 사용할 수 있어요.
Transfer (전송)
두 컬럼 사이에서 요소를 직관적이고 효율적으로 이동해요.
DatePicker (날짜 선택)
DatePicker는 사용자가 날짜나 날짜 범위를 탐색하고 선택할 수 있는 시각적 방법을 제공해요.
업로드 (Upload)
업로드는 정보(로컬 또는 클라우드 저장소에서)를 웹 페이지나 업로드 도구를 통해 원격 서버에 게시하는 과정이에요.
간단한 클릭으로 업로드 (Upload by simple clicks)
보통 미리보기가 필요 없는 단일 파일 업로드에 사용돼요. 버튼을 클릭하면 파일 선택 창이 뜨게 해요.
썸네일 표시 업로드 (Upload by displaying thumbnails)
보통 이미지 업로드에 사용돼요. 사용자가 이미지를 업로드하고 목록에 썸네일을 표시할 수 있어요. 이미지 수가 임계값에 도달하면 업로드 버튼이 사라져요.
드래그 앤 드롭 업로드 (Upload by drag-and-drop)
파일을 특정 영역으로 드래그해 업로드하며, 클릭으로 업로드하는 것도 지원돼요.
참고: 파일 업로드에는 특정 파일 크기와 형식이 필요해요. 예: 5M 이하의 텍스트 파일을 선택하세요(지원: PDF, ZIP, EXL). 업로드 진행 상황이 표시되어야 해요.