체크박스는 저장 버튼을 눌러야 반영되고, 스위치는 켜는 즉시 반영됩니다. 셀렉트는 브라우저 기본 모양을 못 바꾸고, 콤보박스는 직접 만들어야 합니다. 컨트롤 선택이 곧 견적입니다 → 깊게 보기: 어떤 입력 컨트롤을 써야 할까
Form · 입력 양식
"회원가입 폼 만들어주세요" — 입력을 받는 화면 전체를 가리킬 때.
사용자 입력을 받아 제출하는 묶음 전체입니다. 회원가입, 로그인, 주문서, 문의하기 모두 폼입니다.
폼은 입력 칸 개수가 곧 이탈률입니다. "나중에 받아도 되는 정보"를 지금 받으려 하면 가입률이 떨어집니다. 필수/선택 구분을 기획 단계에서 정리하세요.
입력 칸을 줄일 수 없다면 단계를 나누세요. 10개를 한 화면에 두는 것보다 3개씩 3단계로 나누는 편이 완료율이 높습니다.
회원가입 폼을 만들어주세요. 필수는 이메일·비밀번호만 받고 나머지는 가입 후 받게 해주세요. 필수 항목에는 * 표시, 선택 항목에는 "(선택)"을 붙여주세요.
Input · Text Field
"여기 입력칸 하나 넣어주세요" — 가장 기본이 되는 요청.
한 줄 텍스트를 입력하는 칸입니다. 가장 기본이 되는 폼 요소입니다.
입력 칸의 너비가 곧 힌트입니다. 우편번호 칸이 이름 칸만큼 길면 사용자가 헷갈립니다. 받을 내용의 길이에 맞춰 너비를 조절하세요.
입력칸 너비를 받을 내용 길이에 맞춰주세요 — 우편번호는 짧게(90px), 이름은 중간(160px), 주소는 전체 폭으로. 모바일 키보드 타입도 맞춰주세요(숫자 칸은 숫자 키보드).
Textarea
"문의 내용은 여러 줄 쓸 수 있게 해주세요"
여러 줄을 입력하는 칸입니다. 문의 내용, 상세 설명, 리뷰에 씁니다.
글자 수 제한이 있다면 입력하면서 남은 글자 수가 보여야 합니다. 다 쓰고 제출 버튼을 눌렀을 때 "500자를 초과했습니다"가 뜨는 건 최악의 경험입니다.
문의 내용은 텍스트에어리어로 만들고 최대 500자로 제한해주세요. 입력하는 동안 남은 글자 수를 실시간으로 보여주고, 세로로만 크기 조절되게 해주세요.
Label
접근성 검수에서 "라벨이 연결되지 않았습니다"라는 지적을 받을 때.
입력 칸이 무엇을 받는지 알려주는 이름표입니다. 보통 칸 위쪽에 둡니다.
라벨을 클릭하면 해당 입력 칸에 커서가 가야 정상입니다(개발에서 for 연결). 이게 안 되어 있으면 체크박스처럼 작은 요소를 누르기 매우 어려워집니다. 검수 항목에 넣어두세요.
모든 입력칸에 라벨을 붙이고 <code>for</code> 속성으로 연결해주세요. 라벨 글자를 클릭해도 해당 입력칸이 포커스되거나 체크되어야 합니다.
Placeholder
"라벨은 빼고 안에 흐리게만 넣어주세요" — 말려야 하는 요청입니다.
입력 칸 안에 흐리게 들어가 있는 예시 텍스트입니다. 입력을 시작하면 사라집니다.
입력하고 나면 이게 생년월일인지 가입일인지 알 수 없습니다.
무엇을 쓴 건지 언제나 알 수 있습니다.
라벨 대신 플레이스홀더를 쓰면 안 됩니다. 입력을 시작하는 순간 사라져서 "내가 지금 뭘 쓰고 있었지?"가 됩니다. 또 흐린 회색이라 명도 대비가 낮아 접근성 문제도 있습니다. 라벨은 밖에, 플레이스홀더는 예시만.
플레이스홀더를 라벨 대신 쓰지 말아주세요. 라벨은 입력칸 위에 항상 보이게 두고, 플레이스홀더에는 형식 예시만 넣어주세요(예: 010-1234-5678).
Helper Text · 보조 설명
"비밀번호 규칙을 미리 알려주세요" — 오류가 나기 전에 안내할 때.
입력 칸 아래에 붙는 짧은 안내 문구입니다. 형식이나 규칙을 미리 알려줍니다.
"비밀번호는 8자 이상, 숫자 포함"을 오류가 난 뒤에 알려주면 늦습니다. 입력하기 전부터 보여주는 게 헬퍼 텍스트의 목적입니다.
비밀번호 입력칸 아래에 헬퍼 텍스트로 규칙을 미리 보여주세요("영문·숫자 포함 8자 이상"). 오류가 나면 같은 자리에 빨간 오류 문구로 바뀌게 해주세요.
Select · 드롭다운(폼)
"지역 고르는 거 드롭다운으로 해주세요" — 값을 고르는 컨트롤을 말할 때.
정해진 목록에서 하나를 고르는 폼 요소입니다. 눌러야 목록이 보입니다.
눌러보세요. 목록의 모양은 브라우저와 운영체제가 정합니다 — 디자이너가 정할 수 없습니다.
브라우저 기본 셀렉트는 디자인을 거의 바꿀 수 없습니다. 시안에 커스텀 디자인을 그려놓고 "셀렉트로 해주세요"라고 하면, 개발자는 직접 만들어야 하고 이건 별도 공수입니다. 항목이 5개 이하면 라디오 버튼이 더 나은 경우가 많습니다.
기본 셀렉트를 쓰면 모바일에서 OS 기본 UI가 뜹니다. 이게 오히려 사용성이 좋은 경우가 많으니, 디자인을 고집할 이유가 없다면 기본을 쓰세요.
지역 선택은 브라우저 기본 셀렉트를 써주세요. 커스텀 디자인은 필요 없고, 모바일에서 OS 기본 선택 UI가 뜨는 게 오히려 좋습니다.
Combobox
"목록이 너무 길어서 찾기 힘들어요" — 항목이 수십 개 이상일 때.
직접 입력 + 목록 선택이 결합된 요소입니다. 타이핑하면 후보가 좁혀집니다.
"은"이라고 쳐보세요. 후보가 좁혀집니다.
셀렉트와 다릅니다. 항목이 수십 개 이상이면(예: 은행 선택, 국가 선택) 셀렉트로는 찾기 힘드니 콤보박스가 맞습니다. 구현 난도가 셀렉트보다 훨씬 높습니다.
은행 선택은 항목이 20개 이상이니 콤보박스(검색 가능한 선택)로 만들어주세요. 타이핑하면 후보가 좁혀지고, 키보드 위아래로 이동·엔터로 선택 가능해야 합니다.
Autocomplete · 자동완성
"검색어 입력하면 추천 뜨게 해주세요"
입력하는 동안 가능한 후보를 추천해주는 기능입니다.
입력할 때마다 서버에 요청하면 부하가 커지므로, 디바운스(잠깐 멈췄을 때만 요청)를 함께 요청해야 합니다. 이걸 말 안 하면 타이핑 한 글자마다 요청이 나가는 코드가 나옵니다.
검색창에 자동완성을 붙여주세요. 2자 이상 입력 시 0.3초 디바운스 후 최대 5건을 보여주고, 결과가 없으면 "검색 결과가 없습니다"를 표시해주세요.
Checkbox
"약관 동의 체크박스 넣어주세요" — 여러 개를 함께 제출할 때.
여러 개를 동시에 선택할 수 있는 네모 칸입니다.
체크박스는 보통 [저장] 버튼을 눌러야 적용됩니다. 즉시 적용되길 원한다면 스위치를 써야 합니다. 이 차이를 안 정하면 "체크했는데 저장이 안 돼요" 같은 문의가 생깁니다.
약관 동의를 체크박스로 만들고, [가입하기]를 눌렀을 때 한 번에 제출되게 해주세요. "전체 동의" 체크박스도 넣어서 하위 항목이 함께 토글되게 해주세요.
Radio Button
"결제 수단은 하나만 고르게 해주세요"
여러 개 중 딱 하나만 고르는 동그란 선택 버튼입니다. 옛날 라디오의 채널 버튼에서 온 이름입니다.
한 번 선택하면 아무것도 선택 안 한 상태로 되돌릴 수 없는 게 원칙입니다. 취소 가능해야 한다면 "선택 안 함" 항목을 넣거나 셀렉트를 쓰세요. 기본값을 미리 선택해두면 이탈이 줄어듭니다.
결제 수단은 라디오 버튼으로 만들고 첫 번째 항목을 기본 선택해주세요. 항목이 4개라 셀렉트로 접지 말고 전부 펼쳐서 보여주세요.
Toggle · Switch
"알림 설정 켜고 끄게 해주세요" — 즉시 반영되어야 할 때.
켜기/끄기 두 상태를 전환하는 컨트롤입니다. 전등 스위치와 같은 개념입니다.
스위치를 켜는 순간 서버에 저장됩니다. [저장] 버튼이 따로 없습니다.
스위치는 즉시 적용, 체크박스는 저장 후 적용 — 이게 가장 중요한 차이입니다. 알림 설정처럼 바로 반영돼야 하는 건 스위치, 약관 동의처럼 제출과 함께 처리되는 건 체크박스입니다. 실무 QA에서 정말 자주 나오는 이슈입니다.
스위치를 켠 뒤 서버 저장에 실패하면 어떻게 할지 정해야 합니다. 원래 상태로 되돌리고 오류를 알려주는 게 일반적입니다.
알림 설정은 스위치로 만들고 변경 즉시 저장되게 해주세요. 저장 버튼은 없습니다. 서버 저장에 실패하면 스위치를 원래 상태로 되돌리고 오류 메시지를 보여주세요.
Segmented Control
"일간/주간/월간 이렇게 버튼 붙여서 만들어주세요"
붙어 있는 버튼 그룹에서 하나를 고르는 컨트롤입니다. 라디오 버튼의 다른 생김새라고 보면 됩니다.
탭과 생김새가 비슷해서 혼동되는데, 탭은 콘텐츠를 전환하고 세그먼티드는 값을 고릅니다. 항목은 2~4개일 때 적당하고, 글자가 길면 잘립니다.
기간 선택을 세그먼티드 컨트롤로 만들어주세요 — 일간/주간/월간 3개. 탭이 아니라 값을 고르는 컨트롤이고, 선택하면 아래 차트 데이터만 바뀝니다.
Slider
"슬라이더 넣어주세요" — 캐러셀 얘기일 확률이 더 높습니다. 반드시 확인하세요.
손잡이를 드래그해서 값을 조절하는 컨트롤입니다. 볼륨, 밝기, 가격 범위에 씁니다.
이 문장의 크기가 바뀝니다.
한국 실무에서 "슬라이더/슬라이드"는 캐러셀(좌우로 넘기는 배너)을 가리키는 경우가 훨씬 많습니다. "메인 슬라이더 넣어주세요"는 십중팔구 배너 캐러셀 얘기입니다. 반드시 확인하세요.
"슬라이더"가 값을 조절하는 막대인가요, 아니면 메인 배너처럼 좌우로 넘기는 캐러셀인가요? 후자라면 "캐러셀"로 부르는 게 정확합니다.
Range Slider
"가격 범위 필터 넣어주세요"
손잡이가 두 개라서 최소~최대 구간을 지정하는 슬라이더입니다. 가격 필터가 대표적입니다.
기본 제공되는 건 손잡이 1개짜리입니다. 2개짜리는 별도 구현이 필요합니다.
HTML 기본 기능으로는 손잡이가 하나뿐이라, 두 개짜리는 직접 만들거나 라이브러리를 써야 합니다. 간단해 보이지만 공수가 들어가는 요소입니다.
가격 범위 필터를 레인지 슬라이더(손잡이 2개)로 만들어주세요. 기본 HTML로는 손잡이가 하나뿐이라 별도 구현이 필요합니다. 숫자 직접 입력도 함께 가능하게 해주세요.
Number Stepper · 수량 조절
"수량 조절 버튼 넣어주세요" — 장바구니에서.
－ 1 ＋ 형태로 수량을 하나씩 늘리고 줄이는 컨트롤입니다.
이름이 단계 표시 스텝퍼(Step Indicator)와 충돌합니다. 회의에서 "스텝퍼"가 나오면 확인하세요. 그리고 직접 타이핑도 가능해야 합니다 — 수량 50개를 버튼 50번 눌러 넣게 하면 안 됩니다.
장바구니에 수량 스텝퍼(－ 숫자 ＋)를 넣어주세요. 최소 1, 최대는 재고 수량이고, 숫자를 직접 타이핑할 수도 있어야 합니다. 모바일에서는 숫자 키보드가 뜨게 해주세요.
Date Picker · Picker
"날짜 고르는 달력 넣어주세요"
달력에서 날짜를 골라 입력하는 UI입니다. 날짜·시간·색상 등 정해진 값 중에서 고르는 것을 통틀어 픽커(Picker)라고 합니다.
위는 브라우저 기본, 아래는 직접 만든 달력입니다.
기간을 고르는 건 레인지 피커(Range Picker)라고 따로 부릅니다. 브라우저 기본 달력은 디자인을 바꿀 수 없고 모양도 브라우저마다 다릅니다 — 시안대로 나오려면 직접 만들어야 합니다.
방문 예정일은 데이트 피커로 받아주세요. 오늘 이전 날짜는 선택 불가로 막고, 직접 타이핑도 가능하게 해주세요. 시안대로 나와야 하면 브라우저 기본이 아니라 커스텀 달력이 필요합니다.
File Uploader · Dropzone
"파일 첨부 기능 넣어주세요"
파일을 선택하거나 끌어다 놓아서 올리는 영역입니다.
눌러보세요. 파일을 끌어왔을 때의 강조 상태를 흉내 낸 것입니다.
기획서에 허용 확장자·최대 용량·여러 개 가능 여부를 반드시 적어야 합니다. 안 적으면 개발자가 임의로 정하고, 나중에 "10MB 넘는 파일이 안 올라가요" 하는 이슈가 됩니다.
파일 업로더를 넣어주세요. JPG·PNG·PDF만 허용, 개당 최대 10MB, 최대 5개까지입니다. 드래그 앤 드롭과 클릭 선택 둘 다 되게 하고, 업로드 진행률과 삭제 버튼을 넣어주세요.
Chip
"선택한 필터를 위에 표시해주세요"
알약 모양의 작은 인터랙티브 요소입니다. 선택하거나 삭제할 수 있습니다. 필터 칩, 입력 칩 등이 있습니다.
눌러서 켜고 끌 수 있습니다 — 이게 칩입니다.
칩은 누를 수 있고, 태그는 보통 못 누릅니다. 이게 둘의 차이입니다. 필터를 칩으로 만들면 선택 상태가 한눈에 보여서 좋습니다.
필터를 칩 형태로 만들어주세요. 누르면 켜고 꺼지고, 선택된 칩은 색으로 구분해주세요. 선택된 칩들을 한 번에 지우는 "초기화" 버튼도 넣어주세요.
Tag
"해시태그처럼 보여주세요"
콘텐츠의 분류를 나타내는 라벨입니다. 정보 표시가 주 목적입니다.
칩과 생김새가 비슷하지만 태그는 보통 클릭 대상이 아닙니다. 클릭해서 그 태그의 목록으로 이동하게 만들 거라면 그 동작을 설계서에 명시해야 합니다.
상품에 태그를 표시해주세요. 클릭은 안 되는 표시용입니다. (클릭해서 해당 태그 목록으로 이동해야 한다면 그 동작을 알려주세요)
Validation · 유효성 검사
"입력값이 맞는지 확인해주세요" — 검사 시점을 정해야 합니다.
입력값이 규칙에 맞는지 검사하는 것입니다. 이메일 형식, 비밀번호 길이, 필수 입력 여부 등을 봅니다.
언제 검사할지를 정해야 합니다 — ①타이핑하는 동안 ②칸에서 벗어날 때 ③제출 버튼을 눌렀을 때. 타이핑 중에 계속 빨간 오류가 뜨면 짜증나므로, 보통 ②번(칸을 벗어날 때)부터 검사하는 게 무난합니다.
폼 밸리데이션은 입력칸에서 포커스가 벗어날 때(blur) 검사해주세요. 타이핑 중에는 오류를 띄우지 말고, 한 번 오류가 난 칸은 수정하는 즉시 다시 검사해주세요.
Input Masking
"전화번호에 하이픈 자동으로 들어가게 해주세요"
입력하는 동안 형식을 자동으로 잡아주는 처리입니다. 숫자만 치면 010-1234-5678로 하이픈이 저절로 들어갑니다.
사용자는 01012345678, 1250000만 치면 되고 나머지는 화면이 알아서 정리합니다.
사용자에게 "하이픈 없이 입력하세요"라고 요구하는 대신, 어떻게 입력하든 알아서 정리해주는 게 좋은 폼입니다. 전화번호·카드번호·사업자번호·금액에 적용합니다.
전화번호·사업자번호·금액 입력칸에 마스킹을 넣어주세요. 사용자가 숫자만 입력해도 자동으로 하이픈·콤마가 들어가고, 서버로는 숫자만 전송되게 해주세요.
Call To Action · 핵심 행동 버튼
"이 섹션 CTA 뭐예요?" — 외주 미팅에서 매우 자주 나오는 질문.
사용자가 눌러주길 바라는 가장 중요한 버튼입니다. "무료로 시작하기", "구매하기", "상담 신청" 같은 것들입니다.
누르면 무슨 일이 일어나는지 모름
결과가 명확하고 부담이 낮음
외주 소통에서 매우 자주 나오는 단어입니다. "이 섹션의 CTA가 뭐예요?"는 "이 화면에서 사용자가 결국 뭘 하길 원하나요?"라는 뜻입니다. 문구는 "확인"보다 행동을 그대로 적는 것이 전환율이 높습니다.
CTA 버튼 문구를 "확인" 대신 행동이 드러나게 바꿔주세요 — "무료로 시작하기", "상담 신청하기"처럼요. 한 화면에 주요 CTA는 하나만 두고 나머지는 보조 스타일로 해주세요.
Primary · Secondary Button
"버튼이 다 똑같아 보여요" — 위계를 정할 때.
주요 행동과 보조 행동을 시각적으로 구분한 버튼 위계입니다. 프라이머리는 꽉 찬 색, 세컨더리는 테두리만 있는 형태가 일반적입니다.
왼쪽부터 프라이머리 → 세컨더리 → 텍스트 버튼 → 위험(danger) 버튼입니다.
한 화면에 프라이머리는 원칙적으로 하나입니다. 다 중요하다고 전부 진한 색으로 만들면 아무것도 중요하지 않게 됩니다. 위험한 행동(삭제)은 빨강으로 따로 구분합니다.
버튼 위계를 정리해주세요 — 화면당 프라이머리(진한 색) 1개, 나머지는 세컨더리(테두리) 또는 텍스트 버튼, 삭제 같은 위험 행동은 빨간색으로 구분해주세요.
Ghost · Outline · Text Button
디자인 시스템에서 버튼 종류 이름을 정할 때.
배경을 채우지 않은 버튼들의 스타일 종류입니다. 아웃라인은 테두리만, 고스트/텍스트는 글자만 있습니다.
이름이 회사마다 다릅니다. Material은 Outlined/Text, 어떤 팀은 Ghost/Tertiary라고 부릅니다. 정답은 없고, 프로젝트 안에서 하나로 통일하는 게 중요합니다.
버튼 스타일 이름을 프로젝트 안에서 통일해주세요 — Filled(채움) / Outline(테두리) / Text(글자만) 3종으로 정하고, 디자인 시스템 문서에 명시해주세요.
Icon Button
"공간이 좁으니 아이콘만 넣어주세요"
글자 없이 아이콘만 있는 버튼입니다. 공간을 아낄 때 씁니다.
아이콘만으로는 의미가 전달되지 않는 경우가 많습니다. 널리 쓰이는 아이콘(X, 검색, 장바구니)만 글자 없이 쓰고, 나머지는 라벨을 붙이세요. 그리고 화면에 안 보이더라도 스크린리더용 이름은 반드시 넣어야 합니다.
아이콘 버튼에 스크린리더용 이름(aria-label)을 반드시 넣어주세요. 그리고 터치 영역은 아이콘 크기와 무관하게 최소 44×44px을 확보해주세요.