UX Guide

피처링 프로덕트의 UX 규칙 — 의사결정 구조, 4단계 상태, 폼, 접근 제어, 데이터 탐색

피처링 프로덕트의 사용자 경험 원칙을 정리한 문서입니다. AI agent가 UX를 설계하거나 변경할 때 이 규칙을 따르면 됩니다.

UX 원칙

원칙 1: 의사결정 공간 분리

중요한 결정은 별도의 레이어(모달, 사이드시트)에서 처리합니다. 결정이 끝나면 원래 맥락으로 돌아옵니다.

모달 / 사이드시트 / 새 페이지 구분

모달: 흐름을 멈추고 한 가지를 결정해야 할 때 (생성, 확인, 선택, 삭제)
사이드시트: 목록을 유지한 채 상세 정보를 열어볼 때
새 페이지: 다른 도메인으로 이동할 때

모달 크기

작은 모달: 단일 결정 (확인, 간단한 선택)
중간 모달: 복잡한 폼 입력
큰 모달: 좌우 패널이 필요한 에디터/도구

액션 버튼 배치

취소는 왼쪽 (기본 동작은 탈출)
주요 액션은 오른쪽
파괴적 액션은 시각적으로 위험을 표시
선택 수를 버튼에 표시: 저장(3)

원칙 2: 4단계 상태 표시

모든 데이터 영역은 Loading → Error → Empty → Success 4단계 상태를 명시적으로 처리합니다.

Loading

스켈레톤 UI로 최종 레이아웃의 뼈대를 먼저 보여줌
pulse 애니메이션 (6초 주기)
버튼 제출 중에는 스피너를 표시하고 중복 제출을 막음

Error

토스트: 시스템 에러(네트워크, 서버 오류)를 알림
인라인: 폼 필드 아래에 해당 필드의 문제를 표시
인라인은 "입력 문제", 토스트는 "시스템 문제"로 역할 구분
에러 표시는 빨간 테두리 (빨간 배경 사용 안 함)

Empty

제목 + 설명 + CTA 버튼 구조
"첫 사용 빈 상태"와 "검색 결과 없음"을 구분해 문구를 다르게 작성
AI 기능 빈 상태: 시도를 유도하는 톤 (~해보세요)

Success

토스트로 간결하게 확인
필요 시 "바로가기" 액션 버튼 제공

원칙 3: 폼 설계

폼은 사용자의 실수를 예방하되 입력을 방해하지 않습니다.

유효성 검증 타이밍

기본: onBlur (필드를 벗어날 때)
글자 수 초과는 즉시 잘라내기 + 에러 표시
서버 검증(중복 확인 등)은 onBlur 시 비동기 호출

에러 표시

인라인 에러: 필드 아래에 충족되지 않은 조건을 명시
서버 에러: 토스트로 시스템 문제 알림
에러 필드는 빨간 테두리로 표시

필수 필드

생성 폼의 필수 필드는 1~2개로 제한
필수 필드에 * 표시
나머지는 생성 이후 편집 가능하게 둠
선택값에 따라 관련 필드만 노출 (조건부)

파괴적 액션

삭제/해지 전 확인 모달 필수
"복구할 수 없습니다" 경고 포함
다중 삭제: 영향 받는 항목 목록을 표시
파괴적 버튼은 시각적으로 위험을 표시

원칙 4: 접근 제어

기능을 차단할 때는 차단 사유와 해제 방법을 함께 안내합니다. 설명 없이 리디렉션하거나 숨기지 않습니다.

게이팅 방식 (권장 순서)

소프트 게이트: 데이터를 흐릿하게 보여주고 구독 CTA를 노출
하드 게이트: 기능 미리보기 + 업그레이드 안내로 대체
비활성 + 설명: 버튼 비활성화 + 툴팁으로 비활성 이유 표시
리디렉션: 설명 없는 리디렉션은 지양 — 최후의 수단

권한별 처리

읽기 전용: 편집 버튼 비활성 + 이유 툴팁
편집 가능: 편집 허용, 관리 기능 비활성
관리자: 전체 기능 노출

원칙 5: 데이터 탐색

대량 데이터 테이블에서 사용자가 현재 위치와 탐색 상태를 잃지 않도록 설계합니다.

테이블

핵심 컬럼(선택, 이름 등)은 좌측 고정, 나머지는 수평 스크롤
행 높이는 넉넉하게 확보
행 선택 시 헤더를 일괄 작업 UI로 전환
정렬/필터 상태는 URL 쿼리로 유지 — 새로고침해도 보존

필터

적용된 필터를 태그로 항상 가시화
태그별 개별 삭제 + 전체 초기화
즉시 반영이 아닌 명시적 "적용" 버튼

사이드시트

목록에서 항목 클릭 시 사이드시트로 상세 표시 (목록 유지)
좌측: 읽기 전용 데이터 / 우측: 편집 가능한 관리 정보
변경사항이 있으면 닫기 전 확인 요청

마이크로카피 원칙

톤

정중하되 직접적: ~해 주세요, ~됩니다
감정 과잉 금지: 성공을 과하게 축하하거나 에러로 패닉을 유발하지 않음
회원님 같은 호칭 없이 바로 행동 안내

에러 메시지

title:       무엇이 실패했는지 (명사형, 간결)
description: 왜 실패했고, 다음에 무엇을 해야 하는지

title과 description에 같은 정보를 반복하지 않음
잠시 후 다시 시도해 주세요로 끝내지 않음 — 재시도 후에도 안 되면 어떻게 할지까지 안내

CTA 레이블

구체적 동사형: 새 그룹 생성하기, 초대 메일 보내기
모호한 확인 지양
선택 수 포함: 저장(3), 삭제(5)
파괴적 액션은 결과를 명시: 영구 삭제, 해지 확인

플레이스홀더

예시형 우선: 홍길동, example@email.com
기술 필드는 실제 예시 필수: smtp.gmail.com
입력해주세요는 레이블과 중복 — 지양

빈 상태 카피

상태 알림만으로 끝내지 않고 다음 행동까지 안내
구조: 제목 + 설명 + CTA
AI 기능: 시도를 유도하는 톤

DO / DON'T

DO

중요한 결정은 모달/사이드시트로 분리하고 결과를 반환받는다
모든 데이터 영역에 Loading / Error / Empty / Success 4단계를 구현한다
빈 상태에 CTA를 포함해 다음 행동을 안내한다
에러 메시지에 왜 + 다음 행동을 함께 포함한다
필터 적용 상태를 태그로 항상 보여준다
테이블 핵심 컬럼을 좌측 고정한다
사이드시트로 목록 맥락을 유지한 채 상세를 표시한다
폼 유효성은 onBlur에서 검증한다
파괴적 액션 전 확인 모달 + 영향 범위를 표시한다
접근 차단 시 왜 + 어떻게 해제하는지를 안내한다

DON'T

접근 차단 시 설명 없이 리디렉션하지 않는다
에러 발생 시 무응답으로 두지 않는다
모달을 3단계 이상 중첩하지 않는다
빈 상태에서 데이터 없음만 표시하고 끝내지 않는다
폼 입력 중(onChange)에 에러 메시지를 바로 띄우지 않는다
토스트 title과 description에 같은 정보를 반복하지 않는다
파괴적 CTA를 단일 단어(삭제)로만 표시하지 않는다
동일 카테고리 모달의 닫기 동작을 다르게 구현하지 않는다

On this page