UI 컴포넌트 라이팅 — KRDS UX Writing 가이드라인

개요

UI 컴포넌트는 시민이 공공 서비스와 직접 상호작용하는 접점입니다. 각 컴포넌트에 최적화된 마이크로카피 공식을 적용하면 오조작·이탈을 줄이고 완료율을 높입니다.

컴포넌트	핵심 원칙
4.1 버튼	[목적어+동사명사] 공식 — 행위를 명시하라
4.2 입력 폼	레이블+플레이스홀더+안내문 3중 구조
4.3 선택지	이중부정 금지, MECE 배타성
4.4 모달·토스트	[원인+해결책] 최단 청크
4.5 아코디언·툴팁	맥락 유지 인라인 헬프
4.6 빈 화면	원인+대안버튼 필수, "내역 없음" 금지
4.7 단계 표시기	"Step N/총N. 섹션명" 형식
4.8 태그·배지	4음절 이내, 상태값 위계 준수
4.9 검색창	구체적 예시 플레이스홀더
4.10 탭	MECE 분류 원칙

4.1 버튼 레이블

버튼은 행위를 명시해야 합니다. "확인"처럼 맥락 없는 레이블은 시민이 다음에 무슨 일이 일어날지 예측할 수 없게 만듭니다.

공식: [목적어 + 동사명사] — 예: 지원금 신청하기 / 서류 다운로드 / 신청 취소

🚫 맥락 없는 레이블

확인
다음
제출
OK

✅ 행위를 명시한 레이블

지원금 신청하기
개인정보 동의 후 다음 단계로
신청서 제출
신청 완료

버튼 레이블 작성 규칙

규칙	🚫 금지	✅ 권장
동사명사형 종결	확인 버튼을 눌러 주세요	확인
목적어 포함	신청	지원금 신청
조사 없음	서류를 제출	서류 제출
단어 수 2~4개	이 양식을 작성하고 제출하기	양식 제출
비가역 행위 경고	삭제	신청 취소 (되돌릴 수 없습니다)

비가역 행위: 삭제·취소·지급처리 등 되돌릴 수 없는 행위의 버튼에는 항상 "(되돌릴 수 없습니다)" 문구를 버튼 아래 또는 모달 내에 병기합니다.

4.2 입력 폼

폼은 레이블·플레이스홀더·안내문 3중 구조로 시민이 무엇을, 어떻게, 왜 입력해야 하는지 인지 부하 없이 전달합니다.

레이블(무엇) + 플레이스홀더(예시) + 안내문(이유·형식)

3중 구조 역할 분담

요소	역할	예시
레이블	명사형, 무엇을 입력하는지	생년월일
플레이스홀더	형식 예시 (입력 후 사라짐)	예: 19900101
안내문	왜 필요한지, 제약 조건	주민등록증과 동일하게 입력해 주세요

🚫 안내 없는 폼

이름 *
홍길동

연락처 *
전화번호

✅ 3중 구조 폼

이름 (필수) *
예: 홍길동
주민등록증과 동일하게 입력해 주세요

휴대전화 번호 *
예: 01012345678
인증 문자가 발송됩니다

플레이스홀더 주의: 플레이스홀더는 입력 후 사라지므로 필수 안내를 담지 마세요. "이름을 입력해 주세요"처럼 레이블 역할을 하는 플레이스홀더는 접근성 위반입니다.

4.3 선택지 (라디오·드롭다운·체크박스)

선택지는 서로 겹치지 않고(MECE), 이중부정을 포함하지 않아야 합니다. 시민이 한 번에 올바른 선택지를 고를 수 있어야 합니다.

MECE 배타성 원칙

🚫 겹치는 선택지

○ 20대
○ 30대
○ 20~30대
○ 40대 이상

✅ 배타적 선택지

○ 20~29세
○ 30~39세
○ 40~49세
○ 50세 이상

이중부정 금지

🚫 이중부정 선택지	✅ 긍정 전환
동의하지 않지 않음	동의함
수신 거부 안 함	수신 동의함
비해당 없음	해당 없음
미선택	선택 안 함

모달과 토스트는 시민의 흐름을 끊습니다. 메시지는 [원인 + 해결책] 최단 청크로 구성합니다.

모달 제목: [상황 요약] | 본문: [원인] + [해결책 또는 선택지]

🚫 맥락 없는 모달

오류
오류가 발생했습니다. 다시 시도해 주세요.

[확인]

✅ 원인+해결책 모달

파일 크기 초과
첨부 파일은 10MB 이하만 올릴 수 있습니다. 파일 크기를 줄이거나 다른 파일을 선택해 주세요.

[다른 파일 선택] [취소]

토스트 작성 기준

상황	🚫 금지	✅ 권장
성공	처리됐습니다	신청서가 제출됐습니다
저장	저장됨	임시 저장됐습니다
복사	Copy	링크가 복사됐습니다
오류	오류	저장하지 못했습니다. 다시 시도해 주세요

4.5 아코디언 · 툴팁

인라인 헬프는 시민이 페이지를 벗어나지 않고 도움을 받을 수 있게 합니다. 맥락에 맞는 도구를 선택합니다.

도구	적합한 상황	레이블 예시
힌트 텍스트	입력 형식이 특수하거나 오류 가능성 높음	주민등록번호 앞 6자리만 입력
툴팁 (i 아이콘)	용어 설명, 간단한 보충 정보	기준 중위소득이란?
아코디언	선택적 상세 정보, FAQ	Q. 서류를 분실했어요
바닥창(Bottom Sheet)	모바일에서 긴 설명, 확인 절차	서류 제출 전 확인 사항

🚫 맥락 없는 툴팁

? 도움말

✅ 질문형 툴팁 레이블

기준 중위소득이란? ⓘ
어떤 서류가 필요한가요? ⓘ

4.6 빈 화면 (Empty State)

빈 화면은 시민이 막다른 길에 부딪힌 순간입니다. 원인을 설명하고 다음 행동을 안내해야 합니다. "내역 없음"은 설명이 아닙니다.

빈 화면 = [왜 비어있는지] + [무엇을 해야 하는지] + [대안 버튼]

🚫 불친절한 빈 화면

내역 없음

(아무 안내 없음)

✅ 안내하는 빈 화면

아직 신청 내역이 없습니다
지원금을 신청하면 처리 현황을 이곳에서 확인할 수 있습니다

[지원금 신청하기 →]

상황	✅ 권장 문구
검색 결과 없음	'청년수당'으로 검색한 결과가 없습니다. 다른 검색어를 시도해 보세요.
알림 없음	새 알림이 없습니다. 신청 현황이 바뀌면 알려드리겠습니다.
즐겨찾기 없음	즐겨찾기한 서비스가 없습니다. 자주 이용하는 서비스를 추가해 보세요.
권한 없는 화면	이 페이지는 로그인 후 이용할 수 있습니다. [로그인하기]

4.7 단계 표시기 (Step Indicator)

단계 표시기는 시민이 전체 여정에서 자신의 위치를 인식하게 합니다. 단계 번호와 섹션 이름을 함께 표시합니다.

Step N/총N. [섹션명] — 예: Step 2/4. 기본 정보 입력

🚫 번호만 있는 단계

1 → 2 → 3 → 4

현재 어느 단계인지, 무엇을 하는지 알 수 없음

✅ 맥락 있는 단계

Step 1/4. 신청 자격 확인
Step 2/4. 기본 정보 입력 ← 현재
Step 3/4. 서류 제출
Step 4/4. 신청 완료

4.8 태그 · 배지

태그와 배지는 상태·분류를 한눈에 전달합니다. 4음절 이내, 상태값은 정해진 위계를 따릅니다.

상태값 위계 (공공 서비스 신청 흐름)
접수 완료 → 심사 중 → 보완 요청 또는 승인 또는 반려

🚫 불명확한 상태값

처리 중
확인 필요
완료됨
N/A

✅ 위계 준수 상태값

심사 중
보완 요청
승인
반려

태그 텍스트는 4음절 이내를 원칙으로 합니다. 긴 상태명은 요약하거나 툴팁으로 보완합니다.

4.9 검색창

검색창 플레이스홀더는 시민이 무엇을 검색할 수 있는지 구체적인 예시로 안내합니다. 추상적 안내는 혼란을 만듭니다.

🚫 추상적 플레이스홀더

검색어를 입력하세요

무엇을 검색할 수 있는지 알 수 없음

✅ 구체적 예시 제공

질병명 또는 병원 이름으로 검색
서비스명, 지원금 이름으로 검색
예: 청년수당, 기초연금

서비스 유형	✅ 권장 플레이스홀더
복지 서비스	지원금 이름 또는 대상으로 검색 (예: 청년, 장애인)
의료·병원	질병명 또는 병원 이름으로 검색
민원·서류	서류명 또는 업무명으로 검색 (예: 주민등록등본)
FAQ	궁금한 내용을 입력하세요 (예: 서류 분실)

4.10 탭 (Tab)

탭은 동일 계층의 정보를 분류합니다. MECE 원칙(상호 배타·전체 포괄)을 지켜야 시민이 올바른 탭을 선택할 수 있습니다.

🚫 겹치는 탭 분류

전체 | 진행 중 | 완료 | 신청완료 | 기타

✅ MECE 탭 분류

전체 | 심사 중 | 승인 | 반려

규칙	설명
상호 배타	각 탭의 항목이 다른 탭에 포함되지 않아야 함
전체 포괄	모든 항목이 적어도 하나의 탭에 속해야 함
탭 수 제한	5개 이하 권장; 그 이상은 드롭다운·필터 검토
레이블 길이	4음절 이내; 긴 레이블은 줄임말 또는 재분류