AI로 효율적으로 기획하기

●이 교육 자료를 처음 보는 분께

기획할 때 AI를 어디에 쓰면 좋은지, 그 결과물을 어떻게 팀에 남기는지 정리한 자료입니다.
아래 3가지를 먼저 읽으면 전체 흐름이 바로 잡힙니다.

기획 중 — AI 활용

사전 조사부터 공유까지,
AI가 시간을 줄여준다

벤치마킹, 초안 작성, 화면 정의, 검토 등 기획 각 단계에서 AI를 어떻게 쓰면 더 빠르고 완성도 있게 할 수 있는지 안내합니다.

기획 효율화 — 자동화 도구 활용

반복되는 작업,
팀 도구로 자동화하기

팀에서 이미 만들어 둔 자동화 도구(스킬)를 먼저 써보세요. 익숙해지면 필요한 도구를 직접 만들거나 개선할 수 있습니다. 처음부터 만들 필요는 없습니다.

기획 후 — 팀 자산으로 남기기

내가 쓴 정책서가
다음 사람의 출발점이 된다

완성된 기획서를 위키에 올려두면, 다음에 비슷한 기획을 시작하는 팀원이 Glean으로 찾아서 바로 참고할 수 있습니다. 내 작업이 팀 전체의 자료가 됩니다.

어떤 순서로 읽어야 하나요?
왼쪽 사이드바에 나온 순서대로 읽으면 됩니다. 자동화 도구(스킬) 설치는 교육 전에 미리 해두세요 (사이드바 맨 아래 Appendix > 스킬 설치 방법 참고).

●전체 흐름 한눈에 보기

SPM실에서 쓸 수 있는 AI 도구

CORE TOOL · 실행 자동화

Claude Code

로컬 파일 직접 읽기·쓰기, MCP로 Confluence·GitHub·Figma 직접 조작

›Skill — 반복 작업 명령어 한 줄 배포형 자동화

›CLAUDE.md — 역할·스타일 영구 기억

›MCP — Confluence 직접 업로드, 버전·minorEdit 포함

GPT가 초안을 건네면, Claude Code가 파일로 만들고 위키에 올립니다.

MAIN TOOL · 회사 지식 연동

ChatGPT Enterprise

Glean·Slack·Outlook 연동 검색·요약. Google Docs·Sheets 읽기/생성. 초안 발산에 적합.

사내 통합 검색

Glean

Claude Code MCP 연동 시 AI가 직접 검색

웹 검색 · 일본어

Gemini

시장·경쟁사 조사, 최신 웹 정보

문서 기반 Q&A

NotebookLM

PDF·기획서 업로드 후 출처 추적 Q&A

회의 자동화

Zoom AI

자동 요약·전사·액션아이템 추출

업무 흐름이 이렇게 바뀝니다

정책서 작성

기존 1~2일

→ 약 5분

1

기획서 PDF
폴더에 저장

›

2

/wiki-policy
실행

›

3

Claude가
자동 분석

›

4

정책서
초안 작성

›

완료

Confluence
자동 업로드

프로토타입 제작

기존 2~3일

→ 약 5~10분

1

화면 구성
텍스트로 설명

›

2

/prototype
실행

›

3

Qoo10 디자인
HTML 자동 생성

›

4

/prototype-deploy
실행

›

완료

URL로
바로 공유

●효과적인 프롬프트 작성법

Claude Code를 잘 활용하려면 좋은 프롬프트를 작성하는 것이 핵심입니다. 아래 4가지 요소를 갖추면 결과물의 품질이 크게 달라집니다.

좋은 프롬프트의 4가지 요소 역할(Role) + 맥락(Context) + 형식(Format) + 예시(Example) — 이 4가지를 갖출수록 Claude의 응답이 정확하고 재사용 가능해집니다.

역할 (Role)

어떤 전문가로 행동할지

"당신은 Qoo10 Japan 서비스 기획자입니다"처럼 역할을 명확히 지정합니다.

맥락 (Context)

배경 정보와 제약 조건

서비스 이름, 대상 사용자, 기존 정책 등 필요한 배경 정보를 함께 제공합니다.

형식 (Format)

원하는 출력 형태

"표로 정리", "번호 목록", "슬라이드 1장 분량"처럼 출력 형식을 지정합니다.

예시 (Example)

원하는 결과의 견본

예시를 1~2개 제시하면 Claude가 패턴을 파악하여 일관된 결과를 냅니다.

나쁜 프롬프트 vs 좋은 프롬프트

개선 전

회원가입 화면 만들어줘.

개선 후

당신은 Qoo10 Japan 모바일 앱 기획자입니다.

오프라인 매장용 간편 회원가입 화면을 만들어주세요.

조건:
- 대상: 일본 현지 오프라인 방문 고객
- 입력 항목: 이름, 이메일, 비밀번호만
- 디자인 시스템: GitHub eBay-JapanPM/qoo10-design-system-assets (DESIGN.md 기준)

출력: HTML 파일 1개, 모바일 우선 레이아웃

개선 전

이 화면 분석해줘.

개선 후

      현장 팁: 프롬프트가 길어도 괜찮습니다. 맥락이 풍부할수록 결과물 수정 횟수가 줄어듭니다. 처음에 2~3분 더 쓰면 수정 왕복 3~5번을 줄일 수 있습니다.
    

●스킬 설치 방법

교육 세션 참가 전 미리 완료해두세요.
이 문서는 교육 세션 참가 전 미리 설치를 완료해두시길 권장합니다. 교육에서는 설치된 스킬을 실제 기획 흐름에 어떻게 활용하는지에 집중합니다.

SSH 키가 필요한 이유 팀 마켓플레이스는 사내 GitHub(github.corp.ebay.com)에 호스팅됩니다. Claude Code가 저장소에 접근하려면 비밀번호 대신 SSH 키를 사용합니다. 최초 1회만 설정하면 이후 모든 설치·업데이트가 자동으로 동작합니다.

SSH 키 설정 — 3단계

      Claude Code에게 아래 문장을 붙여넣으면 STEP 1과 3의 터미널 작업을 자동으로 처리해 줍니다.

      직접 해야 하는 것은 STEP 2 GitHub 웹 등록 하나뿐입니다.

STEP 1

Claude에게 요청

문장 붙여넣기
(자동 처리)

→

STEP 2

GitHub 등록

공개키 붙여넣기
(직접 클릭)

→

STEP 3

완료 전달

"됐어" 입력
(연결 확인 자동)

STEP 1 — Claude Code 채팅창에 아래 문장을 그대로 붙여넣기

SSH 키를 만들어서 github.corp.ebay.com에 등록할 수 있도록 공개키를 보여줘. 그리고 https://github.corp.ebay.com/eBay-JapanPM/claude-pm-plugins 플러그인을 설치해줘.

Claude가 키를 생성하고 ssh-ed25519 AAAA... 로 시작하는 공개키를 화면에 출력합니다. 그 텍스트 전체를 복사해 두세요.

STEP 2 — GitHub에 공개키 등록 (웹 클릭)

1github.corp.ebay.com/settings/ssh/new 접속
2Title: 본인 이름 입력 (예: 홍길동-MacBook)
3Key: 복사한 공개키 붙여넣기 → Add SSH key 클릭

STEP 3 — Claude Code로 돌아와서 입력

됐어

Claude가 연결을 확인하고 플러그인 설치를 자동으로 완료합니다.
설치 후 /를 입력했을 때 /wiki-policy, /prototype 등이 뜨면 완료입니다.

플러그인 마켓플레이스에서 스킬 찾기 · 설치하기

달라진 설치 방식 (2026-07) 기존 터미널 명령어(/plugin marketplace add) 방식에서 GUI 기반 Plugins Marketplace로 전환되었습니다. SSH 키 설정 후 아래 4단계로 스킬을 설치할 수 있습니다.

STEP 1

Plugins 열기

상단 메뉴 → Plugins

→

STEP 2

Discover 탭

검색창에 스킬명 입력

→

STEP 3

Install 클릭

스킬 카드 선택

→

STEP 4

/reload-plugins

즉시 활성화

Claude Code Plugins > Marketplaces 탭 — claude-pm-plugins 마켓플레이스에 설치된 스킬 5개 목록

Update marketplace 버튼이 보이면 먼저 클릭하여 최신 목록을 갱신하세요. 스킬이 목록에 없을 경우 팀 마켓플레이스가 아직 등록되지 않은 상태입니다.

설치 완료 후 — 스킬 활성화

# Install 후 반드시 실행 — 세션 재시작 없이 즉시 반영 /reload-plugins # 설치 확인 — 스킬 목록 조회 /skills

설치되는 스킬 목록

스킬	역할
`/prototype`	Qoo10 HTML 프로토타입 자동 생성
`/prototype-deploy`	GitHub Pages 자동 배포
`/spm-pptx`	화면 정의서 PPTX 자동 생성
`/review-spec`	기획서 품질 검증
`/wiki-policy-draft`	정책서 초안 자동 작성
`/wiki-policy`	Confluence 정책서 자동 업로드
`/grill-me`	아이디어 구체화 인터뷰
`/weekly-report`	JP/KR 이커머스 트렌드 리포트

CLAUDE.md — 프로젝트 컨텍스트 파일

CLAUDE.md란? 프로젝트 루트에 두는 마크다운 파일입니다. Claude Code가 대화를 시작할 때 자동으로 읽어 프로젝트 맥락을 파악합니다. "이 프로젝트는 어떤 서비스인가", "내 스타일은 무엇인가"를 적어두면 매번 설명할 필요가 없습니다.

CLAUDE.md 없을 때

매번 "Qoo10 Japan 서비스입니다"라고 설명

응답 스타일이 일정하지 않음

한국어/일본어 혼용 발생

프로젝트 파일 경로를 반복 입력

CLAUDE.md 있을 때

시작부터 맥락 인식 완료

한국어 응답, 간결한 스타일 자동 적용

이모지 없이 표 중심 출력

프로젝트 경로·이메일 자동 참조

CLAUDE.md 기본 템플릿

# ~/.claude/CLAUDE.md 또는 프로젝트 루트에 생성 # 나는 누구인가 - 소속: eBay Japan, Service PM 2팀 - 역할: 서비스 기획 (뷰티, 패션, 회원, 보안, 티켓) - 이메일: jeelim@ebay.com ## 응답 스타일 - 한국어로 응답 - 결과 중심, 간결하게 - 이모지 사용 금지 - 표 기반으로 정보 표현 ## 주요 서비스 - Qoo10 Japan (qoo10.jp) - 사내 도구: Confluence, Glean, GitHub Corp

꿀팁 — 자주 쓰는 명령어

/compact

컨텍스트 압축

대화가 길어져 느려질 때 사용합니다. 지금까지의 대화를 요약하여 새 컨텍스트로 전환합니다. 작업 흐름은 유지됩니다.

#기억

Auto Memory 저장

중요한 내용을 기억하게 하려면 메시지 앞에 #을 붙입니다. Claude가 자동으로 메모리 파일에 저장하여 다음 세션에서도 참조합니다.

/reload-skills

스킬 새로고침

새 스킬을 설치하거나 수정한 후 세션 재시작 없이 즉시 반영합니다. 마켓플레이스 업데이트 후 반드시 실행하세요.

PHASE 1 · 기획 전 사전 작업

기획을 시작하기 전에, 방향과 범위를 결정하는 근거 자료를 확보하는 단계입니다.
경쟁사 벤치마킹 · 아이디어 발산 · 사내 정책 탐색 · 데이터 파악 — AI를 활용하면 각 작업을 1/3 이하의 시간으로 줄일 수 있습니다.

STEP 1 · 벤치마킹

1

벤치마킹: 경쟁사 화면 자동 수집

수동 캡처 1~2일 → 수십 분

Playwright MCP를 사용하면 Claude Code가 브라우저를 직접 조작해 경쟁사 화면을 자동 수집하고, UI 요소 비교표까지 한 번에 만들어 줍니다.

사용 도구: Playwright MCP (브라우저 자동화) — Claude Code에서 바로 사용 가능

기본 사용법

프롬프트 예시 1 — 단일 화면 캡처

브라우저로 아래 URL을 열고 화면을 캡처해줘. https://www.mercari.com/jp/signup/ 캡처 이미지를 ~/Documents/Projects/benchmark/mercari_signup.png 로 저장해줘.

프롬프트 예시 2 — 여러 경쟁사 일괄 수집

아래 URL 목록을 순서대로 열고 각각 캡처해줘. 1. https://www.rakuten.co.jp/login/ → rakuten_login.png 2. https://paypaymall.yahoo.co.jp/signup → yahoo_signup.png 3. https://www.au-paymarket.auone.jp → aupay_top.png ~/Documents/Projects/benchmark/ 폴더에 저장하고 각 화면의 주요 UI 요소(헤더, 입력폼, 버튼, 색상)를 표로 정리해줘.

프롬프트 예시 3 — UI 분석까지 포함

메루카리 회원가입 화면(https://www.mercari.com/jp/signup/)을 열어서: 1. 화면 전체 캡처 2. 입력 필드 목록 (이름, 이메일, 비밀번호 등) 3. 버튼 텍스트와 위치 4. 에러 메시지 표시 방식 (빈 상태로 제출해서 확인) 5. 우리 Qoo10과 비교했을 때 차이점 을 분석해서 표로 정리해줘.

설치 확인

1터미널에서 claude mcp add playwright npx @playwright/mcp@latest 실행
2claude mcp list로 playwright가 목록에 있는지 확인
3Claude Code를 재시작한 후 위 프롬프트를 사용

주의: 로그인이 필요한 서비스는 직접 로그인 후 세션 쿠키를 사용하거나, 로그인 단계를 프롬프트에 포함시켜야 합니다.

실무 사례: Discovery — 리서치 & 경쟁사 분석 — 팀 내 실제 경쟁사 벤치마킹 사례를 확인하세요.

실행 화면

Playwright MCP가 경쟁사 사이트 3~4개를 순차적으로 크롤링하는 터미널/브라우저 화면

Playwright가 경쟁사 사이트 3~4개를 순차적으로 크롤링하는 터미널 화면 + 저장된 PNG 파일 목록

step1-playwright-terminal.png

결과 예시

캡처 완료 후 Claude가 정리한 UI 요소 비교 분석표 (터미널 출력 화면)

step1-benchmark-result.png

이 자리에 실제 작업 스크린샷 또는 프롬프트가 들어갑니다.
콘텐츠는 순차적으로 추가될 예정입니다.

STEP 2

2

아이디어 구상 — /grill-me

막연한 아이디어 → 기획 방향, 30분

Claude Code가 기획자처럼 집요하게 질문하며 아이디어를 구체화합니다. 뭘 물어볼지 몰라도 됩니다.

사용 스킬: /grill-me — 인터뷰 방식으로 기획 방향을 구체화

프롬프트 예시 — 새 기능 아이디어 구체화

/grill-me 오프라인 매장 QR 체크인 기능을 기획하려고 해. 아직 구체적인 그림이 없는 상태야. 질문해줘.

다른 예시 보기 (2개)

예시 2 — 기존 기능 개선 방향 탐색

/grill-me Qoo10 회원가입 전환율을 높이는 방법을 기획하려고 해. 현재 이탈률이 높은 구간은 이메일 인증 단계야. 어떤 방향으로 개선할 수 있을지 질문해서 아이디어를 구체화해줘.

예시 3 — /grill-me 없이 직접 대화 방식

일본 이커머스 앱에서 오프라인 매장 연동 서비스를 기획하려고 해. 아래 내용을 물어봐줘: 1. 사용자 진입 경로 (앱 어디서 접근?) 2. 매장 직원과 사용자 각각 어떤 화면이 필요한지 3. 오프라인-온라인 연동 시 기술적 제약이 있을지 4. 경쟁사는 어떻게 하고 있는지 (알고 있다면)

팁: 대화 후 "지금까지 나온 내용을 기획 방향 요약 + 해결 과제 목록으로 정리해줘"라고 추가 요청하면 사전 기획서 초안이 바로 만들어집니다.

실행 화면

/grill-me 실행 후 Claude Code가 기획 방향에 대해 순차적으로 질문하는 터미널 화면

step2-grill-me-chat.png

결과 예시

"지금까지 나온 내용을 정리해줘" 요청 후 생성된 기획 방향 요약 + 과제 목록

step2-grill-me-result.png

이 자리에 실제 작업 스크린샷 또는 프롬프트가 들어갑니다.
콘텐츠는 순차적으로 추가될 예정입니다.

STEP 3

3

기존 정책 탐색 — Glean

사내 전체 문서를 Claude Code에서 한 번에 검색

Glean MCP가 기본 연결되어 있어 Confluence·Slack·GitHub 문서를 자연어로 한 번에 검색할 수 있습니다.

사용 도구: Glean MCP — Claude Code에 기본 연결됨. 별도 설치 불필요.

프롬프트 예시 — 기존 정책 탐색

Glean에서 "오프라인 매장 회원가입" 관련 문서를 찾아줘. Confluence 문서 위주로 검색하고, 관련 정책 링크와 요약을 표로 정리해줘.

다른 예시 보기 (2개)

예시 2 — 의사결정 이력 탐색

Glean에서 "QR 코드 회원 인증" 또는 "Q커넥트 정책" 관련 Confluence 페이지를 검색해줘. 내용이 있으면 핵심 결정사항을 bullet로 정리해줘.

예시 3 — 유사 사례 탐색

Glean에서 과거에 작성된 "회원가입 UI 개선" 관련 기획서나 정책서를 찾아줘. 작성자, 날짜, 링크, 핵심 내용을 표로 정리해줘.

팁: 탐색 결과가 나오면 이어서 "이번 기획에서 달라지는 점과 이어갈 부분을 정리해줘"라고 요청하면 바로 컨텍스트를 활용할 수 있습니다.

실행 화면

Claude Code에서 Glean 검색을 실행하는 터미널 화면

step3-glean-search.png

결과 예시

Confluence 페이지 목록 + 핵심 내용 요약이 표로 정리된 출력 화면

step3-glean-result.png

이 자리에 실제 작업 스크린샷 또는 프롬프트가 들어갑니다.
콘텐츠는 순차적으로 추가될 예정입니다.

STEP 4

4

데이터 분석 — Claude Code

CSV·Excel → 기획 근거, 즉시 파악

파일을 Claude Code에 경로로 전달하면 이탈률 분석·트렌드·개선 우선순위까지 한 번에 정리해 줍니다.

사용 방법: 스킬 없이 Claude Code 대화로 진행. 데이터 파일을 경로로 알려주기.

프롬프트 예시 — CSV 분석 요청

~/Documents/Projects/data/signup_funnel_2026.csv 파일을 분석해줘. 아래 내용을 알려줘: 1. 각 단계별 이탈률 2. 이탈이 가장 많은 단계 3. 주차별 트렌드 (있다면) 4. 개선이 필요한 단계 우선순위 (이유 포함)

다른 예시 보기 (1개)

예시 2 — 기획 근거 문장 도출

아래 데이터를 보고 이번 기획의 "왜 이걸 해야 하는가"에 대한 근거를 3줄로 정리해줘. - 회원가입 완료율: 42% - 이메일 인증 단계 이탈: 31% - 소셜 로그인 선택 비율: 67% 기획서 서두에 쓸 수 있는 문장 형태로 만들어줘.

실행 화면

CSV 파일 분석 요청 후 Claude Code가 단계별 이탈률·트렌드를 계산하는 터미널 화면

step4-data-analysis.png

결과 예시

이탈률 표 + 주차별 트렌드 + 개선 우선순위가 정리된 출력 화면

step4-analysis-result.png

이 자리에 실제 작업 스크린샷 또는 프롬프트가 들어갑니다.
콘텐츠는 순차적으로 추가될 예정입니다.

PHASE 2 · 기획 작업

플랫폼 범위를 정의하고, AI와 함께 정책 초안 · 화면 구성 · 프로토타입 · 기획서를 빠르게 만드는 단계입니다.

STEP 5

5

플랫폼별 작업 범위

구두 범위 논쟁 → 플랫폼별 작업표, 5분

기획서나 요건 정의서를 Claude Code에 붙여넣으면 QSM·ADMIN·APP 별 신규/기존/제외 항목을 표로 자동 정리합니다.

사용 방법: 스킬 없이 Claude Code 대화로 진행. 기획 내용을 텍스트로 붙여넣으면 됩니다.

프롬프트 예시 — 플랫폼별 작업 범위 표 생성

아래 기획 내용을 바탕으로 플랫폼별 작업 범위를 표로 정리해줘. 플랫폼: QSM, ADMIN, APP 각 플랫폼별로: - 신규 추가 메뉴/화면 - 기존 수정 메뉴/화면 - 검토 후 제외된 항목 (취소선으로 표시) - 각 항목의 작업 내용 (INFO) 형식: 플랫폼 헤더 / MENU 경로 / 신규·기존 구분 / INFO

실제 예시 보기 (샘플하우스 프로젝트)

QSM
MENU		INFO
신규	프로모션 > 샘플하우스 신청관리	신청하기 / 신청이력
신규	메일	승인 관련 신규 템플릿 생성
기존	배송/취소/미수취 > 배송관리	샘플하우스 주문 표시
기존	정산관리 > 판매진행내역	샘플하우스 주문 표시
ADMIN
MENU		INFO
신규	Display > Sample House Management	신청이력관리
기존	Delivery > Shipping Management	샘플하우스 주문 표시 (제외)
기존	CSAdmin > Order Information	샘플하우스 주문 표시

취소선 항목: 범위에서 제외된 메뉴를 남겨두면 "왜 제외했는지"가 기록으로 남아 나중에 유용합니다.

결과 예시

Claude Code가 생성한 플랫폼별(QSM/ADMIN/APP) 작업 범위 표 — 신규·기존·제외 항목 포함

step5-platform-scope.png

이 자리에 실제 작업 스크린샷 또는 프롬프트가 들어갑니다.
콘텐츠는 순차적으로 추가될 예정입니다.

STEP 6

6

정책 초안 작성 — /wiki-policy-draft

기획 배경 → 10개 섹션 정책서 초안, 5분

/wiki-policy-draft는 Glean 사내 문서를 참고해 정책서 구조에 맞는 초안을 자동으로 작성합니다.

사용 스킬: /wiki-policy-draft — 마켓플레이스에서 설치 후 사용

프롬프트 예시

/wiki-policy-draft 오프라인 매장 간편 회원가입 정책서 초안을 작성해줘. 배경: - 스마레지 POS 시스템과 Qoo10 회원 연동 - 매장 방문 고객의 간편 가입 (이름 + 전화번호) - 가입 후 즉시 포인트 적립 가능 Glean에서 기존 회원 정책 문서를 먼저 참고해줘.

결과물: 10개 섹션 구조의 정책서 초안이 자동 생성됩니다. 이후 /wiki-policy로 Confluence에 바로 업로드할 수 있습니다.

실행 화면

/wiki-policy-draft 실행 후 Claude Code가 Glean에서 기존 정책을 검색하는 터미널 화면

step6-policy-draft-run.png

결과 예시

자동 생성된 10개 섹션 정책서 초안 — 배경, 정책 상세, 예외 처리, 미결 사항 테이블 포함

step6-policy-draft-result.png

이 자리에 실제 작업 스크린샷 또는 프롬프트가 들어갑니다.
콘텐츠는 순차적으로 추가될 예정입니다.

STEP 7

7

화면별 구성요소 정의

말로만 있던 화면 → 구성요소 정의표 완성

프로토타입 제작 전 화면별 UI 요소를 표로 정리해두면 /prototype 결과물의 정확도가 크게 올라갑니다.

사용 방법: 스킬 없이 Claude Code 대화로 진행. 플로우 설명을 붙여넣으면 됩니다.

프롬프트 예시 — 화면 구성요소 도출

오프라인 매장 간편 회원가입 플로우에서 필요한 화면 목록과 각 화면의 UI 구성요소를 표로 정리해줘. 예시 포맷: | 화면명 | 주요 UI 요소 | 입력 필드 | 버튼 | 예외 처리 | |--------|-------------|-----------|------|-----------|

다른 예시 보기 (1개)

예시 2 — 특정 화면 상세 정의

"간편 회원가입 Step 1" 화면의 구성요소를 상세하게 정의해줘. 아래 항목을 포함해줘: - 화면 제목과 설명 텍스트 - 입력 필드 목록 (필수/선택 여부, 유효성 조건) - 버튼 텍스트와 활성/비활성 조건 - 에러 메시지 패턴 - 이전/다음 화면 연결

결과 예시

Claude Code가 생성한 화면별 구성요소 정의표 — 화면명·UI 요소·입력 필드·버튼·예외처리 포함

step7-ui-components.png

이 자리에 실제 작업 스크린샷 또는 프롬프트가 들어갑니다.
콘텐츠는 순차적으로 추가될 예정입니다.

●UX 플로우 다이어그램 — /ux-flow

화면 구성요소가 정리된 후 프로토타입 제작 전에 UX 플로우를 시각화합니다. /ux-flow는 이순원님이 개발한 플러그인으로, FigJam 다이어그램과 Mermaid 코드를 동시에 생성합니다.

사용 스킬: /ux-flow — 이순원(soonwlee) 제작, PR #9 머지 완료. 마켓플레이스 설치 후 사용 가능.

기본 사용법

프롬프트 예시 1 — 화면 플로우 생성

/ux-flow 오프라인 매장 간편 회원가입 플로우를 그려줘. - 앱 진입 → QR 스캔 → Step 1 (이름/전화번호) → Step 2 (이메일, 선택) → 가입 완료 → MY QR 발급 - 전화번호 중복 시: 오류 안내 → 로그인 화면으로 이동 - 네트워크 오류 시: 재시도 팝업

프롬프트 예시 2 — Mermaid만 생성

/ux-flow 샘플하우스 예약 플로우를 Mermaid 코드로 만들어줘. 자격 확인 분기(충족/미충족), 예약 가능/불가 분기 포함.

Mermaid 코드 예시

WHAT IS MERMAID

텍스트 코드로 플로우 차트를 그리는 오픈소스 언어입니다. mermaid.live에 붙여넣으면 즉시 시각화되고 PNG/SVG로 다운로드할 수 있습니다.

생성 예시 — 샘플하우스 예약 플로우

flowchart TD A[앱 실행] --> B[샘플하우스 신청 화면] B --> C{자격 확인} C -->|미충족| D[안내 팝업\n자격 조건 표시] C -->|충족| E[날짜 선택] E --> F[타임슬롯 선택] F --> G{예약 가능?} G -->|불가| H[예약 불가 안내] G -->|가능| I[예약 확정] I --> J[MY QR 발급] J --> K[방문 당일 QR 제시]

      mermaid.live에서 위 코드를 붙여넣으면 즉시 플로우 차트로 변환됩니다. Notion의 /mermaid 블록, Confluence의 Mermaid 매크로에도 바로 삽입 가능합니다.
    

노드 색상 규칙 (v2.0)

노드 유형	색상	사용 예
Screen	#4353FF	화면 전환 노드
Decision	#7C3AED	분기 조건 (예약 가능?)
State / Loading	#1BC47D	로딩, 처리 중 상태
Error / Warning	#FF4D4D	오류 안내, 경고 팝업
TOBE 예정 변경	#F97316	향후 개선 예정 화면

Glean 연동: v2.0부터 기존 플로우 문서를 Glean에서 먼저 검색한 뒤 이를 기반으로 다이어그램을 생성합니다. 유사 플로우가 있으면 자동으로 참고합니다.

생성 결과물 활용

1Mermaid 코드 → mermaid.live에 붙여넣기 → PNG/SVG 다운로드
2Notion /mermaid 블록에 코드 삽입 → 바로 시각화
3Confluence Mermaid 매크로에 코드 삽입 → 정책서에 포함
4FigJam 다이어그램은 FigJam AI → Generate diagram으로 600초 내 생성

실무 사례: AI를 사용하여 UX 플로우 자동 생성하기 — 실제 화면 플로우 생성 예시를 확인하세요.

STEP 8 · 프로토타입

8

프로토타입 제작 — /prototype

화면 정의 → 클릭 가능한 프로토타입, 30분

화면 구성요소가 정의되면 /prototype 스킬이 Qoo10 디자인 시스템이 반영된 HTML 프로토타입을 자동 생성합니다. 배포까지 포함해도 한 세션 안에 완료됩니다.

사용 스킬: /prototype + /prototype-deploy — Playwright MCP가 설치되어 있어야 합니다.

기본 패턴

프롬프트 예시 1 — 단일 화면

/prototype 오프라인 매장 간편 회원가입 화면을 만들어줘. 화면 구성: - 헤더: "간편 회원가입" 제목 + 뒤로가기 - 이름 입력 필드 (한자 가능) - 전화번호 입력 필드 (일본 형식 090-XXXX-XXXX) - "다음" 버튼 (미입력 시 비활성) - 하단: "이미 회원이신가요? 로그인" 링크 Qoo10 디자인 가이드에 맞게 만들어줘.

프롬프트 예시 2 — 다중 화면 + 플로우

/prototype 오프라인 회원가입 3단계 플로우를 만들어줘. Step 1: 이름 + 전화번호 입력 Step 2: 이메일 입력 (선택) + 생년월일 (선택) Step 3: 가입 완료 + MY QR 발급 안내 각 Step은 아코디언 방식으로 펼쳐지게 하고, 완료된 Step은 체크 아이콘으로 표시해줘.

프롬프트 예시 3 — 수정 요청

방금 만든 프로토타입에서: 1. "다음" 버튼 색상을 Qoo10 보라색(#7E4DFF)으로 바꿔줘 2. 전화번호 입력 시 자동으로 하이픈이 들어가게 해줘 3. Step 2는 Step 1 완료 후에만 활성화되도록 해줘

배포 (URL 공유)

배포가 필요한 이유

로컬 파일은 본인만 볼 수 있습니다. 배포 = URL 생성 — 팀원이 브라우저에서 바로 확인하고, 수정 후 재배포하면 같은 URL에서 즉시 반영됩니다. Confluence에 링크 삽입, 모바일 직접 확인도 가능합니다.

항목	GitHub Pages (권장)	Cloudflare Pages
접근 범위	사내 VPN 전용	인터넷 전체 공개
설정 난이도	보통 (CLI · 토큰 필요)	쉬움 (브라우저 업로드)
버전 관리	가능 (git 이력 유지)	불가
사용 시기	팀 내 리뷰 · 공식 공유	임시 확인 · 빠른 공유

실무 사례: Delivery — 프로토타입 & 배포 — 실제 프로토타입 제작 및 배포 사례를 확인하세요.

실행 화면

/prototype 명령어를 입력한 Claude Code 화면과 자동 생성 중인 HTML 코드

/prototype 명령어 입력 후 Claude Code가 HTML을 자동 생성하는 터미널 화면

step8-prototype-command.png

결과 예시

생성 완료된 프로토타입 브라우저 화면 — 오프라인 간편 회원가입 3단계 아코디언 UI

step8-prototype-result.png

→

실제 결과물 확인

오프라인 간편 회원가입 프로토타입 (5화면)

›

1차 QA에서 발견한 15개 버그를 개발팀·디자인팀과 공유할 문서로 만들 때, 텍스트 정리본과 스크린샷을 AI에 던져 A4 landscape 슬라이드 리포트를 자동 생성한 사례입니다. 텍스트 원본에서 공유 가능한 프레젠테이션까지 30분 이내 완료.

INPUT — 지연님이 작성한 원본

1. 비로그인 시, 'ログイン後に利用可能です。' 토스트 메시지 노출되나 로그인 페이지로 이동하지 않음

2. 피부진단 팝업 종료 시 노출되는 메시지 ([はい] [いいえ] 버튼 위치 변경 필요)
  • 肌診断を終了しますか？
  • (データは保存されません。)
  • [はい] [いいえ]

3. 얼굴촬영 안내 팝업에서 안드로이드 기기에서 뒤로가기 시 하얀색 화면 노출

4. [신규 수정사항] 약관 동의 팝업은 1회만 뜨도록 해주세요. (지금은 할 때마다 뜨고 있습니다.)
→ 정남님. 로컬 스토리지에 저장시키는 방법으로 하면 될까요?

5. 여전히 전면 카메라 인식율이 낮음 (퍼펙트코프 샘플 SDK와 차이있음), 얼굴을 너무 가까이해야 촬영됨. 얼굴 크기에 맞춰지면 촬영이 되어야 함.

6. 카메라 인식 시 좌측 상단 말풍선 '診断を一時停止できます。' 말풍선 5초 노출 후 사라져야 되는데 안 사라짐
• 잠시 진단을 멈출 수 있어요 버튼 선택 시 메시지 및 팝업 닫히며, 다시 진입할 수 있는 플로팅 버튼 노출되어야 하나 플로팅 버튼 노출 안 됨.

7. 설문문항: 나이 선택 시 '選択, 1925年 ~ 2016年'로 노출되어야 되는데, 18, 19, 20.. 으로 노출되고 있음. 출생년도로 수정 필요
• 설문에 모두 답변하고 [진단 결과보기] 버튼 선택하면 피부결과 노출되기 전 로딩페이지가 노출되어야 되는데, '이전 답변 데이터가 있는 경우 노출되는 팝업'이 노출됨.

8. 이전 답변 데이터 팝업이 노출되는 케이스는 '내 정보'에 피부 정보가 이미 있는 경우에만 노출되어야 함.
  • 현재 내 정보에 피부정보가 있는데도 해당 팝업이 노출되지 않고 설문문항이 노출되고 있음 (수정 필요)
  • 이전 답변 데이터 팝업에서도 나이 '2012년' 출생년도로 표시되어야 함
  • 재작성 버튼 누르면 설문문항 팝업이 노출되어야 되는데 피부진단 결과로 넘어감 (수정 필요)

9. 피부 진단 결과 페이지에서 '피부나이 29세'로 나오고 실제 나이는 20세로 넣었는데 5살 어려보인다고 나오고 있음 (수정 필요)

10. 피부 진단 결과 페이지에서 '자세히보기 버튼'은 하단의 컨텐츠가 펼쳐지는 버튼이 아니라, 플로팅 형태의 버튼이며, 하단의 '오늘의 피부 컨디션은?' 영역으로 스크롤 이동하며 앵커/포커싱 처리가 되는 버튼임
• 버튼이 위아래로 통통 튀는 효과가 있어야 함.
• 모든 결과 페이지는 스크롤되며 한 페이지에 노출이 되어야 함 (펼치기 기능 제거)

11. 피부 진단 결과 페이지에서 '오늘의 피부 컨디션은?' 하단 문구 및 수분, 탄력, 유분, 피부결 데이터 API 반영 안 된 상태로 보임. 점수도 맞지 않는 것 같음 (데이터가 전체적으로 하나도 반영이 안되어 있음)

12. 내 피부, 또래평균 (30대 중후반 여성) 영역 오픈 범위 제외이나 노출되고 있음

13. 고민되는 부분도 살펴보세요. '내 얼굴 촬영 이미지'가 노출되어야 하나 디자인에서 제공한 얼굴 이미지가 노출되고 있음

14. 결과 페이지 하단에 '診断結果を画像で保存' (결과 이미지 저장하기) 버튼 선택 시 '保存が完了しました。' 토스트 문구 노출되나 사라지지 않음. 3초 후 사라지도록 해야 함

15. 결과 페이지 하단에 お肌の変化を確認 (내 피부 변화 보기) 버튼 선택 시 없는 페이지로 이동

OUTPUT — AI가 생성한 QA 리포트

QA 리포트 슬라이드 순차 재생 — 표지, 플로우도 개요, 버그 #1, #4(신규), #10 대표 슬라이드

A4 landscape 슬라이드 17장 (표지 + 플로우도 개요 + 버그 15개)

→ 전체 리포트 보기 (QA_2차_report.html)

PROMPT — 실제 사용한 지시문

QA_2차_bug_list.txt와 스크린샷 폴더(qa_screenshots/)를 참고해서, A4 landscape 슬라이드 형태의 QA 리포트 HTML을 만들어줘. 구성: - 표지 (프로젝트명, 날짜, 총 버그 개수) - 플로우도 개요 슬라이드 (전체 화면 흐름 + 미개발 이슈 하이라이트) - 버그별 슬라이드: 좌측 스크린샷, 우측 버그 번호·제목·현상·원인·해결 방향 - 신규 발견된 이슈는 "[신규]" 배지 추가 - 다크 네이비 표지 + 화이트 본문의 프레젠테이션 톤

이 사례에서 배울 점

스크린샷 파일명을 버그 번호와 매칭시켜 저장해두면 AI가 자동으로 슬라이드에 연결합니다 (예: bug01.png, bug04-new.png)
원본 텍스트에 [신규] 같은 태그를 미리 붙여두면 결과물에도 그대로 배지로 반영됩니다
"A4 landscape" "슬라이드 형태" 같이 최종 출력물 포맷을 구체적으로 명시하면 재작업이 줄어듭니다

STEP 9

9

기획서 초안 — /spm-pptx

프로토타입 → 화면 정의서 PPTX, 자동 생성

프로토타입(HTML/URL/PDF)을 분석해 UI 상태별 슬라이드를 자동 생성합니다. 좌 73% 목업 + 우 27% 구성요소 설명 레이아웃.

사용 스킬: /spm-pptx — 마켓플레이스에서 설치. Playwright MCP 필요.

프롬프트 예시 — 경로 지정 방식

/spm-pptx 프로토타입: ~/Documents/Projects/offline_store/prototype/index.html 정책서: https://wiki.corp.ebay.com/pages/2308604419 위 내용으로 화면정의서 PPTX 만들어줘.

다른 예시 보기 (2개)

예시 2 — 단계별 질문 방식

/spm-pptx # Claude가 단계별로 정보를 질문합니다 (프로젝트명 → 프로토타입 경로 → 정책서)

예시 3 — 생성 후 수정 요청

Step 1 화면의 "다음" 버튼 비활성 상태 슬라이드가 빠진 것 같아. 해당 상태 슬라이드를 추가해줘.

핵심 원칙: UI 상태 변화마다 슬라이드 1장 — 버튼 비활성/활성, 입력 중/완료 등 상태가 달라지면 별도 슬라이드로 분리됩니다.

실행 화면

/spm-pptx 실행 후 프로토타입을 분석하고 PPTX를 생성 중인 터미널 화면

step9-pptx-run.png

결과 예시

생성된 PPTX — 표지·화면 정의서 슬라이드(좌 목업 + 우 구성요소 설명) 레이아웃

step9-pptx-result.png

spm-pptx 마켓플레이스 등록 실전 기록 (PR #19)

플러그인 파일만 추가되고 marketplace.json 등록이 누락된 문제를 분석하고 PR #19로 수정한 사례입니다.

구분	내용
문제	Discover 탭에 spm-pptx가 표시되지 않음
원인	PR #15가 플러그인 파일만 추가, `marketplace.json` 업데이트 누락
해결	`marketplace.json`에 spm-pptx 엔트리 추가 → PR #19 생성
배운 점	main 브랜치 보호 — 브랜치 생성 → push → PR 순서 필수

PHASE 3 · 검토 & 배포 후

기획 완성 후 리스크 검토, Wiki 업로드, QA까지 AI가 도울 수 있는 단계입니다.

STEP 10

10

리스크 검토 — /review-spec

기획서 누락 케이스 → AI가 자동 발견

기획서 리뷰 전에 /review-spec을 사용하면 누락 케이스·모순 조건·기술 리스크를 자동으로 찾아줍니다.

사용 스킬: /review-spec — 기획서 파일 경로 또는 정책 텍스트를 직접 붙여넣어 실행

프롬프트 예시 — 텍스트 기반 검토

/review-spec 아래 정책을 검토해줘: - 오프라인 매장 방문 시 MY QR로 체크인 - 체크인 성공 시 방문 포인트 100P 즉시 적립 - 하루 1회만 적립 가능 - 포인트는 다음날 0시에 사용 가능

다른 예시 보기 (1개)

예시 2 — 파일 기반 검토

/review-spec # ~/Documents/Projects/offline_store/spec_v1.md 파일 기반으로 검토

출력 예시: "포인트 적립 시점과 사용 가능 시점 사이 취소 처리 정책 누락", "하루 1회 기준이 JST/UTC 중 어느 것인지 명시 필요" 등이 나옵니다.

실행 화면

/review-spec 실행 후 Claude Code가 정책 조건을 검토하는 터미널 화면

step10-review-run.png

결과 예시

누락 케이스·모순 조건 목록 출력 화면 (심각도 표시 포함)

step10-review-result.png

이 자리에 실제 작업 스크린샷 또는 프롬프트가 들어갑니다.
콘텐츠는 순차적으로 추가될 예정입니다.

STEP 11

11

정책서 Wiki 업데이트 — /wiki-policy

확정 기획서 → Confluence 정책서, 자동 업로드

/wiki-policy는 로컬 기획서 파일을 읽어 Confluence Storage Format으로 변환 후 자동 업로드합니다.

사용 스킬: /wiki-policy — wiki-server MCP가 연결되어 있어야 합니다.

프롬프트 예시

/wiki-policy ~/Documents/Projects/offline_store/policy_v2.md 파일을 기반으로 Confluence SPMT 스페이스에 정책서를 업로드해줘. 상위 페이지 ID: 2234616899

주의: 업로드 전 반드시 현재 Confluence 페이지 버전을 확인. minorEdit 옵션으로 팀원 알림 없이 업로드합니다.

실행 화면

/wiki-policy 실행 후 Claude Code가 Confluence에 정책서를 업로드하는 터미널 화면

step11-wiki-upload.png

결과 예시

Confluence SPMT 스페이스에 업로드 완료된 정책서 페이지 (브라우저 화면)

step11-wiki-result.png

/weekly-report 스킬에 이메일 발송 단계 추가

위클리 트렌드 리포트 Confluence 업로드 완료 직후 /email-weekly-report를 체이닝해 자동 발송까지 연결한 사례입니다.

핵심 패턴: 스킬에서 또 다른 스킬을 체이닝할 수 있습니다. STEP 완료 시점에 사용자 승인을 받고 다음 스킬을 즉시 호출하는 구조 — 크론잡 없이 작업 흐름 안에서 자동화가 이어집니다.

●일본어 번역 — Glean 번역·검수 에이전트

빠른 접근: Glean > 에이전트 > 일본어 번역 및 검수에서 바로 사용할 수 있습니다. Qoo10 서비스에 맞는 언어 스타일로 번역됩니다. (나카무라 유헤이님 제작)

기획서, 정책서, Wiki 등 문서를 일본어로 번역하거나 검수할 때는 eBay 사내 Glean에서 제공하는 전문 번역·검수 에이전트를 사용합니다. 이 에이전트는 Qoo10 서비스 용어와 사내 맥락을 반영한 번역을 제공합니다.

사용 도구: Glean 일본어 번역 및 검수 에이전트 — 사내 Glean 계정으로 접속 후 사용.

접속 방법

1Glean 에이전트 페이지에 접속 (eBay 계정 로그인 필요)
2에이전트 목록에서 일본어 번역 및 검수 에이전트 선택
3번역할 텍스트 또는 문서 내용을 입력

활용 예시

활용 예시 1 — 정책서 일본어 번역

아래 정책 내용을 일본어로 번역해줘. Qoo10 서비스 용어를 반영해줘. [번역할 한국어 텍스트 붙여넣기]

활용 예시 2 — 기존 일본어 문서 검수

아래 일본어 텍스트의 번역 품질을 검수해줘. 자연스럽지 않은 표현, 서비스 용어 오류, 경어 사용 문제를 지적해줘. [검수할 일본어 텍스트 붙여넣기]

언제 사용하나: 기획서(Step 6) 완성 후, Wiki 업로드(Step 8) 전에 일본어 버전이 필요한 경우, 또는 QA TC 번역 시 활용합니다.

STEP 12

12

QA TC 도출

화면 정의 → QA 테스트 케이스 자동 생성

화면 정의서를 붙여넣으면 경계값·예외값·정상케이스를 포함한 QA TC 표를 자동 생성합니다.

사용 방법: 스킬 없이 Claude Code 대화로 진행. 화면 정의 내용을 텍스트로 붙여넣으면 됩니다.

프롬프트 예시 — TC 자동 생성

아래 화면 정의를 기반으로 QA 테스트 케이스를 만들어줘. 화면: 오프라인 간편 회원가입 Step 1 - 이름 입력 (1~50자, 한자 허용) - 전화번호 입력 (090/080/070 시작, 11자리) - "다음" 버튼: 양쪽 필드 모두 입력 시 활성화 TC는 아래 형식의 표로 만들어줘: | No | 테스트 항목 | 입력값 | 기대 결과 | 분류 | 모든 경계값, 예외값, 정상케이스를 포함해줘.

다른 예시 보기 (1개)

예시 2 — 우선순위 포함

위 TC 목록에서 QA 우선순위(P1/P2/P3)를 추가해줘. P1은 반드시 검증, P3는 시간이 있을 때 검증하는 케이스로 분류해줘.

실무 사례: AI를 사용하여 TC 자동으로 생성하기

결과 예시

TC 표 자동 생성 출력 — No·테스트항목·입력값·기대결과·분류·우선순위 포함

step12-qa-tc.png