UX 라이팅

𝗠𝗶𝗻𝗷𝗶 𝗞𝗶𝗺·2025년 6월 12일

🍥 UX/UI 디자인

목록 보기

7/8

UX 라이팅이란?
제품이 사용자와 나누는 대화를 설계하는 것
좋은 문구가 중요한 것이 아니라, 좋은 대화를 하려고 하는 것이 제일 중요⚡️

1️⃣ 온보딩 (Onboarding)

1.1 환영 메시지 (Welcome Message)

목적: 첫인상 형성, 브랜드 톤 설정, 가치 전달
작성 원칙:
∙ 따뜻하고 환영하는 톤
∙ 명확한 가치 제안
∙ 다음 단계 예고
구조: [인사] + [가치 제안] + [다음 행동]

❌ 나쁜 예: "회원가입을 축하합니다"
✅ 좋은 예:
∙ "환영합니다, 김철수님! 🎉
∙ 이제 맞춤형 학습으로 목표를 달성할 수 있어요
∙ 먼저 관심 분야를 선택해볼까요?"

1.2 단계별 안내 (Step-by-Step Guide)

목적: 진행 상황 인지, 기대 관리, 완료 동기부여
작성 원칙:
∙ 현재 위치 명확히 표시
∙ 각 단계의 목적 설명
∙ 진행률 시각화
템플릿:
∙ "[현재 단계] / [전체 단계]: [단계 설명]"
∙ "거의 다 왔어요! [진행률]% 완료"

Step 1/4: 기본 정보
∙ "먼저 당신에 대해 조금 알려주세요 (1분)"
∙ [이름][이메일]

Step 2/4: 관심사 선택
∙ "어떤 것을 배우고 싶으신가요? (복수 선택 가능)"
∙ □ 프로그래밍 □ 디자인 □ 마케팅

Step 3/4: 학습 스타일
∙ "선호하는 학습 방식을 선택해주세요"
∙ ○ 영상 강의 ○ 텍스트 ○ 실습 중심

Step 4/4: 완료!
∙ "훌륭해요! 설정이 완료됐어요 🎯
∙ 이제 첫 강의를 시작해볼까요?"

1.3 첫 사용 도움말 (First-Use Tooltips)

목적: 핵심 기능 소개, 학습 곡선 완화, 탐색 유도
작성 원칙:
∙ 한 번에 하나씩만
∙ 실행 가능한 정보
∙ 건너뛰기 옵션 제공
구조: [기능 설명] + [혜택] + [액션]

예시:
툴팁 1: "여기서 새 프로젝트를 만들 수 있어요
∙ 클릭해서 첫 프로젝트를 시작해보세요! ✨"
∙ [확인][다음 팁]

툴팁 2: "실시간 저장 기능이에요
∙ 작업하시는 모든 내용이 자동으로 저장돼요 💾"
∙ [알겠어요][모든 팁 건너뛰기]

2.1 메뉴 레이블 (Menu Labels)

목적: 명확한 정보 구조, 빠른 탐색, 기대 설정
작성 원칙:
∙ 2-3단어 이내
∙ 명사형 사용
∙ 업계 표준 용어 우선

피해야 할 것:
∙ 창의적이지만 모호한 표현 (“특별한 경험")
∙ 동사형 ("프로젝트 보기" → "프로젝트")
∙ 중복된 의미 ("나의 프로필" → "프로필")

2.2 빵부스러기 (Breadcrumbs)

목적: 현재 위치 표시, 계층 구조 이해, 상위 이동
작성 원칙:
∙ 전체 경로 표시
∙ 클릭 가능한 링크
∙ 현재 페이지는 강조
템플릿:
∙ 홈 > 카테고리 > 하위카테고리 > 현재 페이지

모바일 최적화:
∙ 데스크톱: 홈 > 전자제품 > 노트북 > 게이밍 노트북
∙ 모바일: ... > 게이밍 노트북

2.3 검색 안내 (Search Guidance)

목적: 검색 효율 향상, 기대 관리, 오류 방지

작성 요소:
1. 플레이스홀더
a. "검색어를 입력하세요 (상품명, 브랜드)"

2. 자동완성
a. 나이키 [운동화]
b. 나이키 [에어맥스]
c. 나이키 [조던]

3. 검색 제안:
"나이키 운동화"를 찾으시나요?
∙ 나이키 에어맥스
∙ 나이키 런닝화
∙ 나이키 농구화

4. 결과 없음:
"나이키 수영복'에 대한 결과가 없어요
대신 이런 건 어떠세요?
∙ 아디다스 수영복
∙ 나이키 운동복
[전체 수영복 보기]

3️⃣ 액션 요소 (Action Elements)

3.1 버튼 레이블 (Button Labels)

목적: 명확한 행동 유도, 결과 예측, 전환 촉진
작성 공식:
∙ Primary CTA: [동사] + [목적어] + [가치/결과]
∙ Secondary CTA: [동사] + [목적어]
∙ Tertiary CTA: [동사]

Primary (주요 전환):
∙ "무료로 시작하기"
∙ "지금 구매하고 20% 할인받기"
∙ "30일 무료 체험 시작 (카드 불필요)"

Secondary (보조 액션):
∙ "자세히 보기"
∙ "목록에 추가"
∙ "나중에 결정"

Tertiary (부가 기능):
∙ "취소"
∙ "돌아가기"
∙ "건너뛰기"

Destructive (위험 액션):
∙ "영구 삭제"
∙ "계정 탈퇴"
∙ "모두 초기화"

3.2 링크 텍스트 (Link Text)

목적: 목적지 예고, 클릭 유도, SEO 최적화
작성 원칙:
∙ 목적지를 명확히 설명
∙ "여기" "클릭" 사용 금지
∙ 컨텍스트 독립적

예시:
∙ ❌ "자세한 내용은 여기를 클릭하세요"
✅ "배송 정책 자세히 보기"
∙ ❌ "더 보기"
✅ "나머지 리뷰 23개 더 보기"
∙ ❌ "다운로드"
✅ "사용 설명서 다운로드 (PDF, 2.3MB)"

3.3 CTA 문구 (Call-to-Action Copy)

목적: 즉각적 행동 유도, 가치 전달, 전환 최적화

고전환율 CTA 패턴:
1. 가치 중심형
∙ "2분 만에 견적받기"
∙ "첫 달 무료로 이용하기"

2. 긴급성 생성형
∙ "오늘만 50% 할인"
∙ "남은 자리 3개"

3. 불안 해소형
∙ "무료 체험 (카드 등록 불필요)"
∙ "언제든 취소 가능"

4. 개인화형
∙ "나만의 플랜 찾기"
∙ "내 스타일 추천받기"

5. 사회적 증거형
∙ "10만 명이 선택한 플랜 시작하기"
∙ "베스트셀러 구매하기"

CTA 작성의 4원칙

1. 행동의 결과를 명확히
∙ ❌ "제출"
∙ ✅ "리뷰 등록하기"

2. 사용자의 불안 해소
∙ ❌ "결제하기"
∙ ✅ "안전하게 결제하기"

3. 가치 제안 포함
∙ ❌ "시작하기"
∙ ✅ "무료로 시작하기"

4. 긴급성은 적절히
∙ ❌ "지금 당장 구매하세요!!!"
∙ ✅ "오늘 주문 시 내일 도착"

4️⃣ 피드백 (Feedback)

4.1 에러 메시지 (Error Messages)

목적: 문제 인지, 해결 방법 제시, 불안 해소
4단계 구조:
∙ 공감/인정: "앗, 문제가 생겼네요"
∙ 설명: "무엇이 잘못됐는지"
∙ 해결: "어떻게 고치는지"
∙ 예방: "다음에 피하는 방법"

에러 메시지 프레임워크:
Level 1: Acknowledgment (인정)
∙ "문제가 발생했습니다" → 기본
Level 2: Humanization (인간화)
∙ "앗, 뭔가 잘못됐네요" → 공감
Level 3: Explanation (설명)
∙ "입력하신 이메일을 찾을 수 없어요" → 이해
Level 4: Solution (해결)
∙ "이메일을 다시 확인하거나 새로 가입하세요" → 행동
Level 5: Prevention (예방)
∙ "💡 @gmail.com 형식인지 확인해보세요" → 학습

4.2 성공 메시지 (Success Messages)

목적: 완료 확인, 다음 단계 안내, 긍정적 강화
작성 원칙:
∙ 구체적 성과 명시
∙ 다음 액션 제안
∙ 적절한 축하

작업 저장: "저장 완료! ✓"

구매 완료:
∙ 주문이 완료됐어요! 🎉
∙ 주문번호: #A123456
∙ 예상 배송일: 10월 25일 (수)
∙ [주문 추적하기][쇼핑 계속하기]

프로필 업데이트:
∙ 프로필이 업데이트됐어요 ✨
∙ 이제 더 나은 추천을 받으실 수 있어요!

목표 달성:
∙ 축하해요! 이번 주 목표를 달성했어요! 🏆
∙ 완료한 작업: 15개
∙ 연속 달성: 3주째
∙ [다음 주 목표 설정][성과 공유하기]

4.3 경고/알림 (Warnings/Alerts)

목적: 주의 환기, 예방, 중요 정보 전달

심각도별 작성:
∙ 정보성 (Info): 💡 "새로운 기능이 추가됐어요"
∙ 주의 (Warning): ⚠️ "저장하지 않은 변경사항이 있어요"
∙ 경고 (Alert): 🚨 "30일 후 요금이 인상됩니다"
∙ 위험 (Danger): ❌ "이 작업은 되돌릴 수 없습니다"

4.4 진행 상황 (Progress Indicators)

목적: 대기 시간 관리, 기대치 설정, 이탈 방지

시간대별 전략:
0-2초: 시각적 표시만
∙ "로딩 중..."

2-5초: 상태 설명
∙ "데이터를 가져오는 중..."

5-10초: 구체적 정보
∙ "파일 업로드 중... 60%"

10초+: 상황 설명 + 대안
∙ 평소보다 시간이 걸리고 있어요 😅
∙ 대용량 파일 처리 중... 75%
∙ [백그라운드에서 계속][취소]

5️⃣ 입력 요소 (Input Elements)

5.1 플레이스홀더 (Placeholder Text)

목적: 입력 형식 안내, 예시 제공, 공간 활용
작성 원칙:
∙ 실제 예시 사용
∙ 형식 명시
∙ 레이블 대체 금지

올바른 사용:
∙ 이메일: "your.name@example.com"
∙ 전화번호: "010-1234-5678"
∙ 생년월일: "YYYY-MM-DD"
∙ 검색: "찾고 싶은 상품명 입력"

5.2 힌트/툴팁 (Hints/Tooltips)

목적: 추가 설명, 입력 도움, 오류 예방
작성 가이드:
∙ 위치: 입력 필드 아래 또는 (?) 아이콘
∙ 길이: 1-2문장
∙ 톤: 도움이 되는, 친절한

예시:
∙ 비밀번호: "8자 이상, 영문/숫자/특수문자 중 2가지 조합"
∙ 닉네임: "다른 사용자에게 보여질 이름이에요"
∙ 카드번호: "하이픈(-) 없이 숫자만 입력하세요"

5.3 검증 메시지 (Validation Messages)

목적: 실시간 피드백, 오류 수정, 올바른 입력 유도

실시간 검증 패턴:
입력 중:
"6자 더 입력하세요..."

조건 충족:
"✓ 안전한 비밀번호예요!"

조건 미충족:
"✗ 특수문자를 포함해주세요"

중복 검사:
"확인 중..."
"✓ 사용 가능한 아이디예요"
"✗ 이미 사용 중인 이메일이에요"

5.4 도움말 (Help Text)

목적: 상세 설명, 정책 안내, 신뢰 구축

배치와 내용:
∙ 개인정보 수집:
"왜 필요한가요?"
→ "본인 확인과 계정 보안을 위해 필요해요"

∙ 선택 항목:
"필수 아님"
→ "더 나은 서비스를 위한 선택사항이에요"

∙ 민감 정보:
"🔒 안전하게 보호됩니다"
→ "256비트 암호화로 안전하게 저장돼요"

6️⃣ 콘텐츠 (Content)

6.1 빈 상태 (Empty States)

목적: 방향 제시, 온보딩, 기능 소개

상황별 전략:
첫 사용:
∙ 아직 프로젝트가 없네요! 🎨
∙ 첫 프로젝트를 만들어 보세요
∙ 아이디어를 현실로 만드는 여정이 시작됩니다
∙ [+ 새 프로젝트][튜토리얼 보기]

검색 결과 없음:
∙ "{키워드}'에 대한 결과가 없어요 🔍
∙ 다른 검색어를 시도해보세요
∙ 철자를 확인해보세요
∙ 더 일반적인 용어를 사용해보세요

작업 완료:
∙ 모든 할 일을 끝냈어요! 🎉
∙ 오늘도 생산적인 하루였네요
∙ [내일 할 일 추가][오늘의 성과 보기]

6.2 확인 메시지 (Confirmation Messages)

목적: 중요 액션 재확인, 실수 방지, 결과 예고

위험도별 작성:
낮은 위험:
∙ "로그아웃 하시겠어요?"
∙ [로그아웃][취소]

중간 위험:
∙ 정말 삭제하시겠어요?
∙ 삭제된 항목은 30일 동안 휴지통에 보관됩니다
∙ [삭제][취소]

높은 위험:
∙ ⚠️ 주의: 영구 삭제
∙ 이 작업은 되돌릴 수 없습니다
∙ '프로젝트A'의 모든 데이터가 영구 삭제됩니다
∙ 정말 삭제하시겠어요?
∙ [취소][영구 삭제]

6.3 이용약관 (Terms and Conditions)

목적: 법적 요구사항 충족, 신뢰 구축, 투명성

사용자 친화적 접근:
요약 제공:
∙ (📋 주요 내용 요약)
∙ 개인정보는 서비스 제공에만 사용됩니다
∙ 언제든 탈퇴할 수 있습니다
∙ 콘텐츠 소유권은 사용자에게 있습니다
∙ [전문 보기]

섹션별 구성:
∙ 1. 우리가 수집하는 정보
∙ 2. 정보를 사용하는 방법
∙ 3. 여러분의 권리
∙ 4. 문의 방법

6.4 설명 텍스트 (Explanatory Text)

목적: 기능 설명, 개념 이해, 가치 전달

복잡성 단계별 설명:
Level 1 (핵심만): "자동 저장: 모든 변경사항이 실시간 저장됩니다"

Level 2 (기본 설명):
∙ 자동 저장 기능 🔄
∙ 입력하시는 모든 내용이 자동으로 저장되어 실수로 창을 닫아도 안전합니다

Level 3 (상세 설명):
∙ 자동 저장이 작동하는 방식:
∙ 5초마다 변경사항 확인
∙ 변경 시 즉시 클라우드 저장
∙ 오프라인에서도 로컬 저장
∙ 온라인 복귀 시 자동 동기화
∙ [설정에서 조정하기]

7️⃣ 커뮤니케이션 (Communication)

7.1 푸시 알림 (Push Notifications)

목적: 재참여 유도, 중요 정보 전달, 가치 리마인드
효과적인 구조:
∙ [앱 이름]: [핵심 메시지]
∙ [부가 정보 또는 CTA]

타이밍별 전략:
∙ 즉시 알림: "토스: 15,000원 입금됐어요"
∙ 리마인더: "듀오링고: 3일 연속 학습 중! 오늘도 5분만 투자하세요 🔥"
∙ 재참여: "넷플릭스: '오징어게임2' 새 에피소드가 기다리고 있어요"
∙ 프로모션: "쿠팡: 관심상품 20% 할인 중! 6시간 남았어요"

7.2 이메일 (Email)

목적: 상세 정보 전달, 관계 구축, 행동 유도

이메일 타입별 작성:
환영 이메일:
∙ 제목: "환영합니다, {이름}님! 시작하는 방법 🚀"
∙ 내용: 개인화된 인사, 3가지 핵심 기능 소개, 명확한 CTA

거래 이메일:
∙ 제목: "주문 확인: #{주문번호}"
∙ 내용: 주문 요약, 배송 정보, 다음 단계

리텐션 이메일:
∙ 제목: "{이름}님을 위한 이번 주 추천 📚"
∙ 내용: 개인화된 콘텐츠, 사용 통계, 새로운 기능

7.3 SMS

목적: 긴급 알림, 인증, 간단한 정보

글자 수 최적화:
∙ 인증: "[서비스명] 인증번호: 123456 (5분간 유효)"
∙ 배송: "[쿠팡] 상품이 배송 시작됐어요. 내일 도착 예정 tracking.kr/abc123"
∙ 알림: "[토스] 카드값 123,450원 내일 출금돼요. 잔액을 확인해주세요"

7.4 인앱 메시지 (In-App Messages)

목적: 맥락적 정보, 기능 소개, 프로모션

타입별 작성:
툴팁:
∙ "새로운 기능!
∙ 이제 음성으로도 검색할 수 있어요 🎤"

배너: "🎁 첫 구매 10% 할인 쿠폰이 도착했어요!"

모달:
∙ 업데이트 완료! ✨
∙ 새로운 기능:

다크모드 지원
성능 개선
버그 수정

∙ [확인]

슬라이드업: "방금 저장했어요 ✓"

✅ 모바일 UX 라이팅 원칙

모바일은 더 극단적이다

데스크톱 → 모바일 텍스트 변환:

∙ 설명적 → 필수적:
"사용자 프로필 설정 페이지" → "프로필"
∙ 문장 → 단어:
"검색어를 입력하세요" → "검색"
∙ 안내 → 직관:
"여기를 클릭하여 시작" → [시작] 버튼만
∙ 에러 설명 → 즉각 해결:
"네트워크 오류 발생..." → "다시 시도 ↻"

그룹 과제