UX Guide

이 문서는 피처링의 사용자 경험 원칙입니다. AI agent는 이 원칙을 따라 피처링 브랜드에 맞는 UX를 설계할 수 있습니다.

핵심 UX 성격

"안내하되 강요하지 않는, 관대한 전문가 도구"

피처링은 인플루언서 마케팅의 복잡한 워크플로를 다루는 B2B SaaS다. 사용자는 브랜드 마케터, 대행사, 유통사 — 데이터에 기반한 의사결정을 하는 전문가들이다. 우리 UX는 이들의 판단을 존중하면서, 필요한 순간에 조용히 길을 안내한다.

UX 원칙

원칙 1: 비동기 의사결정 (Async Decision Making)

기능적 측면

사용자의 모든 중요한 결정은 별도의 공간(모달, 사이드시트)에서 이루어진다. 모달은 "질문을 던지고 답을 기다리는" 구조다. 사용자가 결정을 내리면 그 결과가 원래 맥락으로 돌아온다. 이 패턴은 복잡한 다단계 의사결정을 자연스럽게 표현한다.

감성적 측면

사용자는 **"내가 제어하고 있다"**고 느낀다. 시스템이 일방적으로 변경하지 않고, 항상 동의를 구한다.

적용 기준

모달 vs 사이드시트 vs 새 페이지:

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

모달 크기의 의미:

• 작은 모달: "한 가지만 결정해주세요" — 확인, 간단한 선택
• 중간 모달: "여러 정보를 입력해주세요" — 복잡한 폼
• 큰 모달: "도구를 사용해주세요" — 좌우 패널 분리, 설정 에디터

액션 버튼 배치:

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

원칙 2: 4단계 상태 표시 (Four-State Feedback)

기능적 측면

모든 데이터 영역은 동일한 4단계 상태 진행을 따른다: Loading → Error → Empty → Success. 각 상태에서 사용자는 "지금 무슨 일이 일어나고 있는지" 항상 알 수 있다.

감성적 측면

사용자는 **"시스템이 나를 방치하지 않는다"**고 느낀다. 로딩 중에도, 에러가 나도, 데이터가 없어도 항상 다음 행동을 알 수 있다.

적용 기준

Loading:

• 스켈레톤 UI로 최종 레이아웃의 뼈대를 미리 보여줌
• 부드러운 pulse 애니메이션 — 시스템이 살아 있다는 고요한 호흡
• 버튼에 로딩 스피너 — 중복 제출 방지

Error:

• 토스트: 무엇이 실패했고(title), 다음에 무엇을 해야 하는지(description)
• 인라인: 폼 필드 아래에 해당 필드의 문제를 표시
• 인라인은 "입력 문제", 토스트는 "시스템 문제" — 역할이 다르다
• 에러 보더는 빨간 배경이 아닌 빨간 테두리

Empty:

• 반드시 다음 행동을 안내한다 — "데이터 없음"만 표시하고 끝내지 않는다
• 이상적 구조: 제목 + 설명 + CTA 버튼
• 첫 사용 빈 상태 vs 검색 결과 없음을 구분한다
• AI 기능의 빈 상태: 초대형(invitational) 어조 — "해보세요"

Success:

• 토스트로 간결하게 확인
• 일부 경우 "바로가기" 액션 버튼 제공

원칙 3: 관대한 폼 (Forgiving Forms)

기능적 측면

폼은 사용자의 실수를 예방하되, 완성을 강요하지 않는다. 필수 필드를 최소화하고, 선택 필드는 자유롭게 비워둘 수 있다. 유효성 검증은 입력 중이 아니라 필드를 벗어날 때 발생한다 — 입력하는 동안 방해하지 않는다.

감성적 측면

사용자는 **"실수해도 괜찮다"**고 느낀다. 폼이 사용자를 시험하는 것이 아니라, 올바른 입력을 도와주는 가이드.

적용 기준

유효성 검증 타이밍:

• 기본: 필드를 벗어날 때(onBlur) — 입력 중 방해 최소화
• 예외: 글자 수 초과는 즉시 잘라내기 + 에러 표시
• 서버 검증(중복 확인 등): 필드를 벗어날 때 비동기 호출

에러 표시:

• 인라인: 해당 필드 아래에 "어떤 조건이 충족되지 않았는지" 표시
• 서버 에러: 토스트로 "시스템 문제"를 알림
• 빨간 배경이 아닌 빨간 보더로 에러 필드 표시

필수 필드 최소화:

• 생성 폼의 필수 필드는 가능한 한 1~2개로 제한
• 필수에 별표(*) 표시, 나머지는 나중에 편집 가능
• 조건부 필드: 선택에 따라 관련 필드만 노출 (점진적 공개)

파괴적 액션 보호:

• 삭제/해지 전 반드시 확인 모달
• "복구할 수 없습니다" 경고 포함
• 다중 삭제 시 영향 범위(삭제될 항목 목록) 표시
• 파괴적 버튼은 시각적으로 위험을 표시

원칙 4: 투명한 접근 제어 (Transparent Access Control)

기능적 측면

기능을 차단할 때, 왜 차단되었고 어떻게 해제하는지 항상 안내한다. 설명 없이 리디렉션하거나 기능을 완전히 숨기지 않는다. 가치를 미리 보여주되, 접근을 자연스럽게 유도한다.

감성적 측면

사용자는 **"이 기능이 존재하고, 내가 접근할 수 있는 방법이 있다"**고 느낀다. 벽이 아니라 문 — 열 수 있는 방법이 보인다.

적용 기준

게이팅 방식 (투명한 순서대로):

1. 소프트 게이트: 데이터를 흐릿하게 보여줌(blur) + 구독 CTA — "있지만 아직 볼 수 없다"
2. 하드 게이트: 기능을 미리보기 + 업그레이드 안내로 대체 — "이런 것이 가능하다"
3. 비활성 + 설명: 버튼 비활성화 + "왜" 비활성인지 툴팁 — "권한이 필요하다"
4. 리디렉션 (지양): 설명 없이 다른 페이지로 보내기 — 최후의 수단

권한별 경험:

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

원칙 5: 맥락을 유지하는 데이터 탐색 (Contextual Data Exploration)

기능적 측면

데이터 테이블은 피처링의 핵심 인터페이스다. 사용자가 대량의 인플루언서/캠페인 데이터를 탐색할 때, 현재 맥락을 잃지 않도록 설계한다. 핵심 식별 컬럼은 좌측에 고정하고, 상세 정보는 사이드시트로 열어 목록을 유지하며, 필터 상태는 태그로 항상 가시화한다.

감성적 측면

사용자는 **"내가 어디에 있고, 무엇을 보고 있는지 항상 안다"**고 느낀다. 복잡한 데이터 속에서도 길을 잃지 않는다.

적용 기준

테이블:

• 핵심 컬럼(선택, 이름) 좌측 고정, 나머지 수평 스크롤
• 행 높이는 넉넉하게 — 데이터가 숨을 쉰다
• 행 선택 시 헤더가 일괄 작업 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를 단일 단어("삭제")로만 표시하지 않는다
• 동일 카테고리 모달의 닫기 동작을 다르게 하지 않는다

피처링 UX의 감정 키워드

안내하는  ·  관대한  ·  투명한  ·  점진적인
예측 가능한  ·  조용한  ·  맥락을 유지하는  ·  행동을 유도하는