폼
입력 + 라벨 + 에러 = 세트! label 연결, input 종류, 에러 메시지 패턴, 즉각적 검증 피드백까지 폼 디자인을 배웁니다.
폼 필드 해부학 — label + input + 도움말 + 에러 = 세트
placeholder만으로는 부족해요. label + 도움말 + 에러가 세트로 있어야 완성된 폼이에요.
8자 이상, 영문+숫자 포함
비밀번호는 8자 이상이어야 해요
바이브코딩 팁
AI에게 "모든 입력 필드에 label을 달아줘. placeholder만으로 설명하지 마"
Input 종류 — 용도에 맞는 type을 쓰세요
올바른 input type을 쓰면 모바일 키보드도 최적화돼요.
텍스트 (Text)
가장 기본적인 입력 필드. 이름, 주소, 제목 등 자유로운 텍스트를 입력할 때 사용해요.
text바이브코딩 팁
AI에게 "이메일 입력에는 type='email'을 써줘. 모바일에서 @ 키보드가 자동으로 나와"
에러 메시지 패턴 — 나쁜 에러 vs 좋은 에러
에러 메시지는 뭐가 잘못됐는지 + 어떻게 고치는지를 알려줘야 해요.
필수 항목입니다
이름을 입력해주세요
올바르지 않은 형식
이메일 형식이 올바르지 않아요 (예: name@example.com)
조건 불충족
비밀번호는 8자 이상, 영문+숫자를 포함해야 해요
범위 초과
1~100 사이의 숫자를 입력해주세요
이미 사용 중
이미 사용 중인 이메일이에요. 로그인을 시도해보세요
실시간 검증 데모
바이브코딩 팁
AI에게 "에러 메시지는 '뭐가 잘못됐는지 + 어떻게 고치는지' 두 가지를 포함해줘"
접근성 체크리스트 — 폼 접근성의 3대 규칙
label 연결, aria-describedby, aria-live 3가지만 지켜도 폼 접근성이 크게 좋아져요.
위의 규칙 카드를 클릭하면 예시를 볼 수 있어요
바이브코딩 팁
AI에게 "모든 input에 label의 htmlFor와 input의 id를 연결해줘"
폼 퀴즈 — 결함 있는 폼에서 문제점 찾기
결함이 있는 폼에서 문제점을 찾아보세요.
로그인 폼
문제점을 골라보세요
회원가입 폼
Error
Error
문제점을 골라보세요
동의 폼
텍스트를 클릭해도 체크가 안 돼요
문제점을 골라보세요
바이브코딩 팁
AI에게 "폼을 만들 때 label 연결, 에러 메시지, 접근성 3가지를 꼭 체크해줘"