design-research

design-research

PRD 또는 프로젝트 설명에서 디자인 레퍼런스를 수집하고 분석하는 스킬

Triggers

• "디자인 리서치"
• "레퍼런스 수집"
• "경쟁사 분석"
• "design research"

---

---

실행 단계

Step 1: PRD/프로젝트 설명 분석

PRD 또는 프로젝트 설명에서 다음을 추출한다:

## 추출 항목

### 서비스 카테고리
- 서비스 유형 (예: SaaS, 이커머스, 소셜, 생산성 도구)
- 산업 분야 (예: 뷰티, 금융, 교육, 헬스케어)

### 타겟 사용자
- 주요 사용자 프로필 (나이, 직업, 기술 수준)
- 사용 맥락 (모바일 중심? 데스크톱? 둘 다?)
- 기대하는 분위기 (전문적? 캐주얼? 럭셔리?)

### 핵심 화면
- 랜딩/홈
- 주요 기능 화면 (PRD에서 추출)
- 온보딩/인증 플로우
- 설정/프로필

Step 2: 웹 검색으로 관련 UI 패턴/경쟁사 찾기

추출된 정보를 기반으로 웹 검색을 실행한다:

## 검색 쿼리 전략

### 경쟁사/유사 서비스
- "[서비스 카테고리] app UI design"
- "[산업 분야] best app design 2025 2026"
- "[경쟁사 이름] UI screenshots"

### UI 패턴
- "[핵심 화면 유형] UI pattern best practices"
- "[서비스 유형] dashboard design inspiration"
- "[타겟 사용자] friendly UI examples"

### 디자인 트렌드
- "[서비스 카테고리] design trends 2026"
- "best [산업 분야] app design awards"

검색 결과에서 다음을 정리:

• 경쟁사/유사 서비스 목록 (이름, URL, 특징)
• 주목할 UI 패턴 키워드
• 추천 레퍼런스 사이트별 검색 제안

Step 3: 레퍼런스 수집 요청

사용자에게 직접 레퍼런스를 수집해달라고 요청한다.

아래 사이트들에서 원하는 분위기의 디자인을 찾아
스크린샷을 docs/references/screenshots/ 폴더에 넣어주세요:

📌 추천 레퍼런스 소스:
- mobbin.com — 실제 앱 UI 패턴 (40만+ 스크린)
  → 검색 키워드 제안: "[서비스 카테고리]", "[핵심 화면 유형]"
- dribbble.com — 크리에이티브 컨셉, 색상/타이포 아이디어
  → 검색 키워드 제안: "[서비스 유형] UI", "[분위기] dashboard"
- curated.design — SaaS 랜딩 페이지 영감
- land-book.com — 랜딩 페이지 전문
- refero.design — 웹사이트 디자인 레퍼런스

💡 팁:
- 3~5개 정도면 충분합니다
- 완벽한 디자인이 아니어도 "이 색감", "이 레이아웃"처럼
  부분적으로 마음에 드는 것도 좋아요
- 파일명에 출처를 넣어주시면 분석이 더 정확해져요
  (예: mobbin-todo-app-home.png, dribbble-dark-dashboard.png)
- 스크린샷 대신 채팅으로 "이런 느낌"을 설명해주셔도 돼요

준비되면 알려주세요. 분석을 시작할게요!

사용자가 이미지를 넣거나 채팅으로 설명하면 Step 4로 진행한다.

Step 4: 수집된 레퍼런스 이미지 분석

사용자가 제공한 이미지 또는 설명을 기반으로 분석을 시작한다.

## 이미지 분석 항목

각 이미지에 대해 다음을 추출:

### 색상 분석
- Primary color (hex + 이름)
- Secondary color (hex + 이름)
- Background / Surface colors
- Accent color (CTA, 강조 요소)
- 전체 색상 온도 (warm / cool / neutral)

### 타이포그래피 분석
- 제목 폰트 스타일 추정 (Sans-serif, Serif, Rounded 등)
- 본문 폰트 스타일 추정
- 제목 크기 & 무게 (볼드, 세미볼드 등)
- 본문 크기 & 줄 간격 느낌

### 레이아웃 & 간격
- 전체 구조 (1컬럼, 2컬럼, 사이드바 등)
- 섹션 간 간격 느낌 (넓은 / 보통 / 타이트)
- 카드/컨테이너 처리 (그림자, 보더, 배경색)
- padding / margin 패턴

### 컴포넌트 패턴
- 네비게이션 스타일 (고정 헤더, 사이드바, 탭 등)
- 버튼 스타일 (둥근, 각진, 고스트 등)
- 카드 패턴 (이미지 위치, 정보 밀도)
- 특징적인 컴포넌트 (토스트, 모달, 드로어 등)

### 전체 느낌 한줄 요약
- 예: "깔끔하고 넓은 여백의 미니멀한 SaaS 느낌"
- 예: "따뜻한 색감의 친근한 이커머스 느낌"

Step 5: 분석 결과 저장

## 저장 위치

각 레퍼런스 이미지별 분석 결과:
→ docs/references/{이미지파일명}-analysis.md

## 분석 결과 파일 형식

# {이미지 파일명} 분석

## 출처
- 사이트: {출처 사이트}
- 캡처 일시: {날짜}

## 색상 팔레트
| 역할 | 색상 | Hex |
|------|------|-----|
| Primary | {색상명} | #XXXXXX |
| Secondary | {색상명} | #XXXXXX |
| Background | {색상명} | #XXXXXX |
| Accent | {색상명} | #XXXXXX |

## 타이포그래피
- 제목: {스타일 추정}
- 본문: {스타일 추정}

## 레이아웃
- 구조: {설명}
- 간격: {설명}

## 주목할 패턴
- {패턴 1}
- {패턴 2}

## 한줄 요약
{전체 느낌}

Step 6: design-references.md 업데이트

수집/분석이 완료되면 docs/design-references.md를 자동 업데이트한다.

## 업데이트할 내용

### 경쟁사/유사 서비스 섹션
- 검색에서 발견한 경쟁사 목록 추가
- 각 경쟁사의 디자인 특징 요약

### 수집된 레퍼런스 섹션
- 새로 추가된 스크린샷 목록
- 각 스크린샷의 한줄 요약
- 분석 파일 경로 링크

### 공통 패턴 섹션
- 여러 레퍼런스에서 반복되는 패턴 정리
- 사용자가 선호하는 방향 키워드 추출

---

분석 완료 후 메시지

레퍼런스 분석이 완료되었습니다!

📊 분석 요약:
- 수집된 레퍼런스: {N}개
- 발견된 경쟁사: {경쟁사 목록}
- 공통 키워드: {키워드들}

📁 저장 위치:
- 분석 결과: docs/references/
- 종합 정리: docs/design-references.md

다음 단계:
→ /moodboard 로 3~4가지 디자인 방향 시안을 만들 수 있어요
→ /design-system-gen 으로 바로 디자인 시스템을 만들 수도 있어요

---

레퍼런스 없이 시작하는 경우

사용자가 레퍼런스 이미지 없이 시작하고 싶다면:

레퍼런스 없이도 시작할 수 있어요!
PRD/프로젝트 설명을 기반으로 AI가 추천하는 디자인 방향을 제안합니다.

다만 레퍼런스가 있으면 결과물의 정확도가 훨씬 높아져요.
나중에 /save-reference 로 언제든 추가할 수 있습니다.

바로 /moodboard 로 진행할까요?