Rulebook

Claude Rules 관리

문서맵
  • component-design
  • entities-api
  • entities-layer
  • entities-model
  • error-handling
  • features-layer
  • fsd-architecture
  • react-hooks
    1
  • security
  • server-components
  • shared-layer
  • tailwind-css
  • tanstack-query
  • testing
  • views-layer
  • widget-layer
  • changelog
  • development-workflow
  • documentation
  • git-commit
  • marketing-seo
  • marketing-ux
  • naming-convention
  • security
  • typescript-standards
  • ux-copy-and-tone
  • api-design
  • database
  • nest
  • security
  • supabase
  • README
전체 룰 다운로드
common/ux-copy-and-tone
activev12026. 4. 12.

UX Copy & Tone Guidelines

유저가 서비스에 들어왔을 때 매력을 느끼도록, UI 텍스트와 브랜드 톤을 설계하는 가이드라인.

Tone & Voice (브랜드 말투)

원칙

  • 자신감 있되 거만하지 않게 — "최고의 X" 대신 "X를 증명하세요"
  • 간결하고 직관적으로 — 한 문장으로 전달 가능하면 두 문장 쓰지 않기
  • 유저를 주인공으로 — "우리가 만든" 대신 "당신이 만든"
  • 행동을 유도하는 능동형 — "등록 가능합니다" 대신 "지금 등록하세요"

피해야 할 톤

  • 관공서 말투 ("~하시기 바랍니다", "~에 해당됩니다")
  • 과잉 친절 ("정말정말 감사합니다!!! 🎉🎉🎉")
  • 막연한 표현 ("더 나은 경험을 제공합니다")

헤드라인 & 가치 제안

작성 원칙

  • 3초 규칙: 헤드라인만 보고 서비스가 뭔지 알 수 있어야 함
  • 구체적 숫자나 결과: "빠른 서비스" → "3초 만에 결과 확인"
  • 감정 + 기능: 기능 설명만 하지 말고, 유저가 느낄 감정도 담기

패턴

[동사] + [유저가 얻는 것]
예: "증명하세요, 당신의 바이브를"
예: "발견하세요, 다음 사이드 프로젝트를"

[질문형]
예: "AI로 뭘 만들 수 있을까?"

[도발/자신감]
예: "코드 없이 만들었다고? 증명해 봐."

CTA (Call-to-Action) 문구

원칙

  • 행동 동사로 시작: "시작하기", "등록하기", "투표하기"
  • 결과를 암시: "가입하기" → "무료로 시작하기"
  • 긴급성/희소성은 진짜일 때만: 거짓 카운트다운 금지

좋은 예 vs 나쁜 예

❌ "제출"           → ✅ "프로젝트 등록하기"
❌ "확인"           → ✅ "내 순위 확인하기"
❌ "로그인"         → ✅ "Google로 시작하기"
❌ "구매"           → ✅ "광고 시작하기"
❌ "더 보기"        → ✅ "전체 프로젝트 보기"

마이크로카피 (상황별 문구)

빈 상태 (Empty State)

빈 화면은 이탈 포인트가 아니라 행동 유도 기회.

❌ "데이터가 없습니다"
✅ "아직 등록된 프로젝트가 없어요. 첫 번째 주인공이 되어보세요!"

❌ "검색 결과 없음"
✅ "조건에 맞는 프로젝트를 못 찾았어요. 필터를 바꿔볼까요?"

로딩 상태

기다림을 지루하지 않게.

❌ "로딩 중..."
✅ "프로젝트를 불러오고 있어요"
✅ "최고의 바이브를 찾는 중..."  (브랜드 톤에 맞을 때)

성공 피드백

행동에 대한 보상감 제공.

❌ "완료되었습니다"
✅ "투표 완료! 이 프로젝트의 N번째 서포터예요"
✅ "프로젝트가 등록됐어요! 이제 투표를 받아보세요"
✅ "링크가 복사됐어요"

에러 상태

유저 탓이 아닌 것처럼, 다음 행동을 안내.

❌ "오류가 발생했습니다 (Error 500)"
✅ "문제가 생겼어요. 잠시 후 다시 시도해 주세요"

❌ "잘못된 입력입니다"
✅ "URL 형식을 확인해 주세요 (예: https://myapp.com)"

확인/삭제

되돌릴 수 없는 행동은 결과를 명확히.

❌ "삭제하시겠습니까?"
✅ "이 프로젝트를 삭제하면 투표와 댓글도 모두 사라져요. 정말 삭제할까요?"

감성 디테일 (Delight)

유저가 "이 서비스 좋다"라고 느끼는 순간을 의도적으로 설계.

적용 포인트

  • 첫 성공 경험: 첫 프로젝트 등록, 첫 투표 받았을 때 특별한 피드백
  • 숫자로 성취감: "10번째 투표!", "상위 5% 프로젝트"
  • 미묘한 애니메이션: 투표 시 숫자 올라가는 모션, 랭킹 변동 표시
  • 개인화: "OO님의 프로젝트", "OO님이 투표한 프로젝트"

주의사항

  • 과하면 피로감 → 핵심 전환 포인트에만 적용
  • 로딩 성능에 영향 주는 애니메이션은 금지
  • 접근성(a11y)을 해치는 장식은 금지 (prefers-reduced-motion 존중)

다국어(i18n) 카피 작성

  • 한국어와 영어의 뉘앙스를 각각 자연스럽게 — 직역 금지
  • CTA는 각 언어 문화에 맞게 조정 (한국어: "~하기", 영어: 동사 원형)
  • 유머/말장난은 번역이 어려우면 각 언어별로 다른 표현 사용 가능
ko: "바이브를 증명하세요"
en: "Prove Your Vibe"  (직역이 자연스러운 경우)

ko: "지금 시작하기"
en: "Get Started"  (직역하면 어색한 경우)

피드백 0

아직 피드백이 없어요. 첫 번째로 의견을 남겨보세요!

목차

Tone & Voice (브랜드 말투)원칙피해야 할 톤헤드라인 & 가치 제안작성 원칙패턴CTA (Call-to-Action) 문구원칙좋은 예 vs 나쁜 예마이크로카피 (상황별 문구)빈 상태 (Empty State)로딩 상태성공 피드백에러 상태확인/삭제감성 디테일 (Delight)적용 포인트주의사항다국어(i18n) 카피 작성