# [6기]디자인 리서치 자동화

![Image](https://upload.cafenono.com/image/slashpagePost/20260629/141351_Hl081xxfXwXpwwZqIP?q=80&s=1280x180&t=outside&f=webp)

신규 프로젝트 킥오프 단계의 비주얼 톤 리서치를 자동화. 
디자이너가 브리프(+ 참조 이미지)를 던지면 핀터레스트 중심으로 레퍼런스를 모아 Figma 마스터 파일에 톤 그룹별 무드보드로 정리해주는 파이프라인.

## 트리거 / 입력

- 슬래시 커맨드: `/research <브리프>`                   

- 자연어: "톤 잡아줘", "리서치 마스터에 추가해줘" 등

- 입력 방식:

    - 텍스트 브리프 (산업/톤/타겟)

    - **참조 이미지 첨부 가능** (클립보드 붙여넣기 / 드래그앤드롭) — Claude가 이미지 분석해 톤 앵커로 사용

    - 둘 다 비어있을 때만 초반 1회 질문 (산업/톤/타겟)

    - 이후 중간 확인 없이 끝까지 자동 진행

![Image](https://upload.cafenono.com/image/slashpagePost/20260629/142511_rkscpWObZ9ii1p0dgT?q=80&s=1280x180&t=outside&f=webp)

## 처리 흐름 (3개 sub-agent 순차 호출)

1. researcher | 핀터레스트 검색 결과에서 핀 이미지 URL 일괄 추출 → 원본 다운로드 (20~25장). 보조 소스(Dribbble/Behance) 5~10장. 톤 매트릭스 좌표 + 분석 작성

2. curator | 후보를 톤 그룹 2~3개로 묶고 그룹별 6~8장 선별. 추천 사유·활용 포인트 정리

3.  figma-librarian | Figma 마스터 파일에 새 페이지 추가. 디자이너가 만든 템플릿 구조(헤더 + 모자이크 이미지 그리드)에 맞춰 톤 그룹 섹션 자동 생성. 이미지는 원본 픽셀 크기 보존

![Image](https://upload.cafenono.com/image/slashpagePost/20260629/142410_3WliLlmnB5rugdU1Ud?q=80&s=1280x180&t=outside&f=webp)

## 산출물

- **로컬**: `research/<날짜>-<슬러그>/` 아래

    - `00-reference.md` (참조 이미지 분석)

    - `01-brief.md` (톤 매트릭스 + 검색 쿼리)

    - `02-candidates.md` (수집 후보 + URL)

    - `03-analysis.md` (후보별 컬러/타이포/레이아웃 분석)

    - `04-curation.md` (톤 그룹별 큐레이션)

    - `05-figma-link.md` (Figma 페이지 링크)

    - `images/` (다운로드된 원본 이미지)

- **Figma**: 마스터 파일 1개에 프로젝트별 페이지 누적

## 핵심 룰

- **핀터레스트 비중 50% 이상** (디자이너 1순위 소스)

- **이미지는 원본 URL 직접 다운로드** (페이지 전체 캡처 X — 우클릭 "이미지 저장하기"를 자동화한 방식)

- **Figma 카드는 실제 이미지로** (링크/placeholder 금지)

- **원본 종횡비 보존** (강제 리사이즈/왜곡 금지)

- **중간 확인 없음** — 초반 입력 외 질문 X

## 기술 스택 (사용한 도구)

- Claude Code (Anthropic) — 메인 에이전트 + sub-agent 오케스트레이션

- Playwright MCP — 웹 페이지 로드 + 이미지 URL 추출

- Figma MCP — 마스터 파일에 페이지/노드 생성, 이미지 업로드

- 로컬 파일 시스템 — 산출물 마크다운 + 원본 이미지

## 효과

- 수작업: 브리프 정리 → 핀터레스트 검색 → 캡처 → Figma 정렬 → 톤 그룹 코멘트 = 반나절~하루

- 자동화: 브리프 + 이미지 한 장 던지고 5~15분 대기 → 마스터 파일에 톤 그룹별 무드보드 완성

- 매번 같은 마스터 파일에 누적 — 프로젝트 히스토리가 한곳에 쌓임

For the site tree, see the [root Markdown](https://slashpage.com/clauders.md).