Forms

폼은 설정을 바꾸거나 이슈를 만드는 것처럼 사용자가 정보를 입력하고 제출해야 할 때 써요. 폼이 길고 복잡할수록 사람들은 중간에 포기해요. 꼭 필요한 것만 묻고, 무엇을 어떻게 입력해야 하는지 처음부터 분명히 보여주는 것이 핵심이에요.

구성Copy Anchor Link

1. 제목 — 폼이 하는 일을 짧게 써요. 동사가 들어가면 제출 버튼에도 같은 동사를 써요. (예: "이슈 만들기" → 버튼 "만들기")
2. 설명 (선택) — 폼의 목적이나 결과를 한두 문장으로 설명해요.
3. 필수 항목 안내 — 필수 필드가 있다면 설명 아래에 "* 표시는 필수 항목이에요" 를 적어요.
4. 필드 — 라벨, 입력, 도움말(선택), 글자 수(선택), 검증 메시지.
5. 섹션 (선택) — 관련 있는 필드를 묶고 소제목을 붙여요.
6. 푸터 — 제출 버튼과 보조 액션.

사용하는 컴포넌트: Form, Textfield, Textarea, Select, Checkbox, Radio, Toggle, Datetime picker, Button.

레이아웃Copy Anchor Link

• 한 열로 배치해요. 위에서 아래로 따라가기 쉽고, 화면 확대기를 쓰는 사람이 두 번째 열을 놓치지 않아요.
• 폼 너비는 담기는 곳(페이지, Modal dialog, Drawer)에 맞춰요.
• 필드 너비는 예상되는 입력 길이에 맞춰요. 우편번호에 긴 입력칸을 주면 오히려 헷갈려요.

라벨Copy Anchor Link

• 라벨은 명사로 짧게 써요. "이름을 입력하세요" 대신 "이름".
• 유일한 예외는 검색 필드예요. 돋보기 아이콘, 보이지 않는 접근성 라벨, 플레이스홀더가 함께 있으면 라벨을 생략할 수 있어요.
• 필수 필드는 라벨 뒤에 빨간 별표(*)를 붙여요. 대부분이 필수라면 선택 필드에 "(선택)" 을 붙이는 편이 더 깔끔해요.

도움말과 검증 메시지Copy Anchor Link

필드 아래에는 세 종류의 메시지가 올 수 있어요.

검증 시점Copy Anchor Link

• 필드를 벗어날 때(blur) 검증해요. 입력하는 도중에 오류를 띄우면 사용자를 재촉하는 느낌을 줘요.
• 한 번 오류가 난 필드는 입력할 때마다 다시 검사해서, 고치는 즉시 오류가 사라지게 해요.
• 서버에서만 알 수 있는 오류(중복된 이름, 권한 없음)는 제출할 때 검증하고, 해당 필드 아래에 보여줘요.
• 제출했을 때 오류가 있으면 첫 번째 오류 필드로 포커스를 옮겨요.

오류 문구Copy Anchor Link

• 무엇이 잘못됐는지보다 어떻게 고치면 되는지를 써요. "잘못된 값" 대신 "4자 이상 입력해 주세요".
• 사용자를 탓하지 않아요. "입력을 잘못했어요" 대신 상황을 담담하게 설명해요.
• 색만으로 오류를 알리지 않아요. 아이콘과 문구를 함께 보여줘요.

버튼Copy Anchor Link

• 제출 버튼은 하나의 primary 로 두고, 보조 액션은 최대 하나만 둬요.
• 취소는 subtle 버튼으로 낮춰요.
• 페이지 폼은 왼쪽 정렬, 모달 안의 폼은 오른쪽 정렬로 버튼을 놓아요. 순서는 보조 액션 → 주 액션이에요.
• 필드가 덜 채워졌다고 제출 버튼을 비활성화하지 않아요. 왜 눌리지 않는지 알 수 없어요. 대신 누르면 빠진 필드를 알려줘요.
• 제출 중에는 버튼에 isLoading 을 줘서 두 번 제출하지 않게 해요.

더 좋은 폼을 위해Copy Anchor Link

• 첫 번째 필드에 자동으로 포커스를 줘요. (모달이 열릴 때 특히)
• 묻는 필드 수를 줄여요. 선택 필드는 정말 필요한지 다시 생각해요.
• 근거 있는 기본값을 채워 둬요. (예: 담당자 = 나, 우선순위 = 보통)
• autocomplete 속성(email, name, organization …)을 지정해서 브라우저 자동 완성을 살려요.
• 새로고침하거나 실수로 닫아도 입력한 내용이 남도록 임시 저장해요.
• 모바일에서는 type="email", inputMode="numeric" 처럼 입력에 맞는 키보드를 띄워요.