description: "마케팅·UX 관점 UI 설계 원칙 - 히어로, 소셜 프루프, 카드 프리뷰, 정렬, 피드백 루프, 신뢰 시그널, SEO, CTA 등 사용자 전환과 체류를 높이는 16가지 원칙"
globs:
Marketing & UX Design Principles
UI 작업 시 마케팅·UX 관점을 항상 고려한다. 단순히 데이터를 나열하는 것이 아니라 사용자가 행동하고 싶게 만드는 것이 목표.
1. 히어로 섹션
카탈로그·랜딩·상세 페이지는 히어로 섹션으로 시작한다.
- 아이콘/이모지 + 타이틀 + 1줄 설명 카피
- 상세 페이지는 그라데이션 히어로로 브랜드감 부여
- 히어로 안에 소셜 프루프 수치 배치 (chip, badge 등)
- 히어로 아래에 CTA 가 자연스럽게 이어지도록 구성
2. 소셜 프루프 (Social Proof)
"여기에 콘텐츠가 충분하다"는 인상을 수치로 보여준다.
- 총량 스탯: 전체 개수, 누적 수치, 참여자 수 등
- 위치: 히어로 하단, 카드 footer, 섹션 헤더 옆
- 숫자 포맷은 사용자 로케일에 맞춘다 (한국어:
1만, 350만, 1.2억)
- 값이 0 이거나 무의미하면 표시하지 않는다 (조건부 렌더링)
3. 카드 프리뷰
카탈로그 카드에는 클릭 전에 내부를 엿볼 수 있는 프리뷰를 넣는다.
- 대표 아이템 아바타/썸네일 미리보기 (3개 정도)
- 아이템 이름 나열 + "외 N개" 요약
- 카드 하단에 핵심 스탯 1~2개 (팔로워, 조회수, 멤버 수 등)
- 빈 카드도 "아직 없어요" 상태를 명시
4. 정렬·필터 컨트롤
리스트/그리드가 있는 페이지에는 정렬 옵션을 제공한다.
- 기본 정렬은 가장 임팩트 있는 기준 (인기순, 최신순 등)
- 정렬은 서버 측에서 처리하고 URL query param 으로 반영 (SEO 친화, 공유 가능)
- 기본 정렬일 때는 query param 을 생략해 기본 URL 과 캐시를 공유
- UI 는 탭/pill 컨트롤로 현재 정렬 상태를 시각적으로 표시
5. 빈 상태 (Empty State)
데이터가 없을 때도 페이지가 깨져 보이지 않게 한다.
- 아이콘/이모지 + 짧고 친절한 메시지
- 가능하면 CTA 를 함께 제공 ("새로 만들기", "제안하기" 등)
- 에러와 빈 상태를 구분한다 (빈 상태는 정상, 에러는 재시도 유도)
6. 피드백 루프
사용자가 콘텐츠 개선에 참여할 수 있는 채널을 열어둔다.
- 카탈로그/상세 페이지에 "제안하기" 트리거 배치
- 모달 폼: 필수 필드 최소화 (1~2개), 나머지는 선택
- Honeypot 등 가벼운 스팸 방어 적용
- 제출 후 성공 피드백 + 자동 닫힘으로 완결감
7. 데이터 밀도와 일관성
동일한 엔티티가 여러 페이지에 등장할 때 정보 밀도와 톤을 통일한다.
- 같은 엔티티의 카드는 어디서든 동일한 필드 세트를 보여준다
- 공통 카드 컴포넌트를 추출해 일관성 확보
- 상세 페이지로 갈수록 정보가 점진적으로 풍부해지는 구조 (카탈로그 < 상세)
8. 네이밍 톤
- 사용자 대면 라벨은 서비스 톤에 맞춘다 (전문 용어보다 친근한 표현)
- 설명 카피는 짧고 친근하게 ("~해요", "~볼 수 있어요")
- 숫자에는 사용자 로케일 단위를 사용한다
9. 시각적 위계
- 페이지 내 정보 우선순위: 히어로 > 스탯 > 메인 콘텐츠 > 부가 정보
- 중요한 수치는 크게·볼드로, 보조 정보는 작게·muted 로
- 섹션 간 여백으로 리듬감 유지
- hover/transition 으로 인터랙티브 요소임을 암시
10. 신뢰 시그널 (Trust Signals)
콘텐츠의 신뢰도를 시각적으로 보여준다.
- 공식/인증 마크가 있으면 이름 옆에 배지로 표시 (✓, 공식 등)
- 활성 상태 표시: "HOT", "NEW", "LIVE" 등 시간 기반 배지
- 랭킹·순위 메달 (🥇🥈🥉) 로 상위 아이템 강조
- 마지막 업데이트·활동 시각 표시로 데이터 신선도 전달
11. 점진적 공개 (Progressive Disclosure)
정보를 한꺼번에 쏟아내지 않고 단계별로 보여준다.
- 카탈로그: 핵심 정보만 (이름 + 스탯 + 프리뷰)
- 상세 페이지: 전체 정보 펼침
- 긴 설명은
line-clamp 로 축약 + 상세에서 전문 노출
- 모달/드로워: 부가 액션(피드백, 설정)은 메인 흐름 밖에서 처리
12. SEO·공유 최적화
모든 공개 페이지는 검색과 소셜 공유를 고려한다.
- 페이지별 고유한
title + description 메타데이터
- OG 이미지: 대표 로고/썸네일이 있으면 설정
- URL 구조는 사람이 읽을 수 있게 (slug, 의미 있는 path)
- 정렬·필터 상태가 URL 에 반영되어 공유·북마크 가능
13. 내비게이션·맥락 유지
사용자가 현재 위치를 항상 인지할 수 있게 한다.
- 상세 페이지에는 ← 부모 페이지 백링크 제공
- 부모가 구체적이면 부모 이름 표시 (예: "← 소속사명")
- 부모가 없으면 카탈로그 목록으로 (예: "← 소속사 / 그룹")
- 연관 콘텐츠로의 크로스 링크 (그룹 헤더 → 그룹 상세 등)
14. 중복 데이터 처리
같은 아이템이 여러 분류에 걸칠 수 있을 때 사용자 혼란을 방지한다.
- 통계(총 멤버 수, 총 팔로워 등)는 반드시 dedupe 된 유니크 값 사용
- 시각적 중복 노출 방지: 이미 한 섹션에 보인 아이템은 다른 섹션에서 제외하거나 뱃지로 구분
- 이유를 설명하는 힌트 제공 가능 ("그룹에 속한 직속 멤버는 그룹 섹션에서 확인")
실제 속도보다 느껴지는 속도가 중요하다.
- 서버 컴포넌트로 초기 렌더링 즉시 노출 (SSR 우선)
- 이미지:
loading="lazy" + 작은 placeholder 사이즈
- 성공/전송 모달: 즉시 피드백 → 자동 닫힘 (대기 시간 느낌 최소화)
- 캐시 전략: 불변 데이터는 긴 TTL, 실시간 데이터는 no-store 로 분리
16. CTA (Call-to-Action) 배치
사용자가 다음 행동을 자연스럽게 이어갈 수 있도록 유도한다.
- 히어로 직후 위치가 가장 효과적
- 버튼 라벨은 행동을 명시 ("제안하기", "둘러보기", "더보기")
- 보조 CTA 는 시각적 무게를 낮춤 (outline, ghost 스타일)
- 주요 CTA 는 브랜드 컬러로 강조, 페이지당 1개 주력