लॉगिन
7기 전용공간 (7/27부터 진행)
구독

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

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

트리거 / 입력

•
슬래시 커맨드: /research <브리프>
•
자연어: "톤 잡아줘", "리서치 마스터에 추가해줘" 등
•
입력 방식:
◦
텍스트 브리프 (산업/톤/타겟)
◦
참조 이미지 첨부 가능 (클립보드 붙여넣기 / 드래그앤드롭) — Claude가 이미지 분석해 톤 앵커로 사용
◦
둘 다 비어있을 때만 초반 1회 질문 (산업/톤/타겟)
◦
이후 중간 확인 없이 끝까지 자동 진행

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

1.
researcher | 핀터레스트 검색 결과에서 핀 이미지 URL 일괄 추출 → 원본 다운로드 (20~25장). 보조 소스(Dribbble/Behance) 5~10장. 톤 매트릭스 좌표 + 분석 작성
2.
curator | 후보를 톤 그룹 2~3개로 묶고 그룹별 6~8장 선별. 추천 사유·활용 포인트 정리
3.
figma-librarian | Figma 마스터 파일에 새 페이지 추가. 디자이너가 만든 템플릿 구조(헤더 + 모자이크 이미지 그리드)에 맞춰 톤 그룹 섹션 자동 생성. 이미지는 원본 픽셀 크기 보존

산출물

•
로컬: 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분 대기 → 마스터 파일에 톤 그룹별 무드보드 완성
•
매번 같은 마스터 파일에 누적 — 프로젝트 히스토리가 한곳에 쌓임
Clauders
'Clauders' 구독하기
사이트를 구독하면 새 포스트 등 최신 업데이트를 알림과 메일로 가장 먼저 받아보실 수 있습니다.
Slashpage에 가입하고 'Clauders'을 구독하세요!
구독
👍
चैनल खोलें