Ship to Show은(는) 무엇을 하나요?
프로토타입을 포트폴리오 케이스 스터디로 변환하기 위한 7단계 프레임워크입니다.
이 스킬을 사용해야 할 때
- 사용자가 (React, Vue, HTML, Figma 내보내기) 프로토타입을 가지고 있고 이를 문서화하려는 경우
- 사용자가 포트폴리오용 케이스 스터디를 만들고자 하는 경우
- 사용자가 인터페이스 데모 비디오를 제작하려는 경우
- 사용자가 프로토타입 프로젝트를 자신의 웹사이트에 게시하려는 경우
확인해야 할 전제 조건
시작하기 전에 도구가 설치되어 있는지 확인하세요:
node --version && npm --version && ffmpeg -version | head -1 && git --version && gh --version && vercel --version
도구가 누락된 경우 (macOS) 설치 명령어를 알려주세요:
- Node.js:
brew install node - FFmpeg:
brew install ffmpeg - Git:
brew install git - GitHub CLI:
brew install gh후gh auth login - Vercel CLI:
npm i -g vercel
7단계
1. 프레임 → 부문, 사용자, 문제, 디자인 관점 식별
2. 구조화 → 프로토타입을 로컬에서 실행 가능하게 만들기
3. 강화 → 누락된 경로를 추가하여 5개의 비디오 제작
4. 촬영 → Puppeteer + FFmpeg를 통해 비디오 제작
5. 스토리텔링 → 내러티브 구조와 캡션으로 케이스 스터디 작성
6. 패키징 → GitHub, Vercel, 자체 포함된 통합 파일
7. 게시 → 포트폴리오 사이트에 통합
단계를 순차적으로 실행하세요. 각 단계는 다음 단계로 넘어가기 전에 구체적인 결과물을 생성합니다. 단계를 압축하지 마십시오.
1단계: 프레임 (15분)
입력: 코드 파일 또는 프로토타입 출력: case-study.md (v1), CLAUDE.md, 프로젝트 메모리
작업
- 프로토타입의 소스 코드 읽기
- 다음 식별:
- 업종 및 시장 맥락
- 대상 사용자 (역할, 사용 맥락, 압박)
- 해결하려는 문제 (가능하면 핵심 수치 포함)
- 기존 주요 기능
- 디자인 관점 (프로토타입이 테스트하는 가설)
- 내러티브 소제목을 포함한 1500자 분량의 실행 요약 작성
- 프로젝트 포지셔닝이 포함된 CLAUDE.md 생성
- 전체 맥락이 포함된 메모리 파일 생성
체크리스트
- 부문 식별됨
- 사용자 설명 완료 (역할, 맥락, 압박)
- 수치를 포함한 문제 공식화
- 명시적인 디자인 관점
- 실행 요약 작성 완료
- CLAUDE.md 생성 완료
2단계: 구조화 (10분)
입력: 원시 코드 파일 출력: localhost에서 실행되는 프로젝트
작업
- 감지된 종속성과 함께 package.json 생성
- 빌드 도구 구성 (Vite 권장)
- Tailwind CSS 사용 시 구성
- index.html 및 진입점 생성
- npm install
- localhost에서 실행
주의 사항
프로젝트가 네트워크 파일 시스템(Google Drive, Dropbox, OneDrive)에 있는 경우 실행 전에 로컬로 복사하세요. 파일 감시자는 원격 파일 시스템에서 작동하지 않습니다.
체크리스트
- npm install 오류 없음
- npm run dev가 서버 시작
- 브라우저에 프로토타입 표시
- 콘솔 오류 없음
3단계: 강화 (30-45분)
입력: 작동하는 프로토타입 + 프레이밍 출력: 완전한 경로로 촬영 가능한 프로토타입
작업
- 촬영 가능한 5개 경로 식별:
- 개요 / 분류 (받은 편지함, 필터링, 선택)
- 주요 기능 (제품의 핵심 상호 작용)
- 의사 결정 및 피드백 (작업, 확인, 영향)
- 극단적인 경우 (오탐지, 오류, 빠른 사례)
- 전체 흐름 (연속 실행, 세션 메트릭)
- 각 경로에 대해 누락된 상호 작용 나열
- 누락된 상호 작용 구현
- 사례별로 다양한 데이터 추가
- 시뮬레이션된 연결 추가 (Slack, 이메일, CRM, 내보내기)
- 마이크로 상호 작용 추가 (애니메이션, 해당되는 경우 사운드 피드백)
체크리스트
- 5개 경로 식별 및 기능 확인
- 각 경우에 대해 다른 데이터
- 시뮬레이션된 통합 표시
- 각 경로를 10~20초 내에 촬영 가능
4단계: 촬영 (30분)
입력: 정의된 경로 + 작동하는 프로토타입 출력: 5~8개의 MP4 비디오, 5개의 PNG 스크린샷
작업
- 비디오 파이프라인 구조 생성:
video-scenes/
├── capture.js
├── scenes/
│ ├── shared/
│ │ ├── design-tokens.css
│ │ ├── animations.css
│ │ └── components.css
│ ├── 01-scene.html
│ └── ...
└── output/
- 프로토타입에서 디자인 토큰 추출 (색상, 타이포그래피, 여백, 모서리 반경)
- 공유 CSS 애니메이션 생성 (fadeIn, slideUp, scaleIn, stagger, typing)
- 각 장면에 대해 HTML 파일 생성:
- CSS 주석에 타임라인 스토리보드 포함
- 프레임별로 제어 가능한 CSS 애니메이션 타임라인
- 프로토타입 인터페이스를 재현하는 마크업
- capture.js 생성 (Puppeteer + FFmpeg) with Web Animations API를 통한 제어
- 모든 비디오 렌더링
- 실제 프로토타입에서 Retina 스크린샷 5개 캡처
핵심 기술: 프레임별 제어
// 모든 애니메이션 일시 중지
document.getAnimations({ subtree: true }).forEach(a => a.pause());
// 각 프레임마다 시간 진행
document.getAnimations({ subtree: true }).forEach(a => {
a.currentTime = currentTimeMs;
});
비디오 사양
- 1920x1080
- 30fps
- H.264 (MP4) + WebM (선택 사항)
- 검은색 배경 (#0a0a0a)
- Inter 타이포그래피 (Google Fonts)
- 비디오당 8~20초 길이
체크리스트
- 모든 비디오가 MP4로 렌더링됨
- 미리보기 접근 가능 (로컬 HTTP 서버)
- Retina 스크린샷 캡처됨
- 시각적 품질 확인됨
5단계: 스토리텔링 (20분)
입력: 프레이밍 + 비디오 + 경로 출력: case-study.md (프랑스어), case-study-en.md (영어)
작업
-
다음 내러티브 구조로 케이스 스터디 작성:
- 헤더 (제목, 부제목, 카테고리, 작성자)
- 히어로 이미지 (전체 너비)
- 실험 의도 (개인적 맥락, 3단락)
- 기본 통찰력 (수치를 포함한 문제)
- 비디오: 전후 비교 (또는 비교)
- 디자인 질문 (지침 원칙)
- 비디오: 데이터 흐름 / 아키텍처
- 기능별 섹션 (텍스트 + 비디오 + 캡션)
- 학습 내용 (전이 가능한 메커니즘)
- 기술 스택 + 링크
-
각 비디오에는 캡션이 함께 제공됩니다:
- 굵은 제목 (비디오가 보여주는 내용)
- 불편함: 사용자 문제
- 이점: 제공된 가치
-
맥락 없는 비디오 그리드는 사용하지 마십시오. 각 비디오에는 자체 내러티브가 있습니다.
-
프랑스어 및 영어 버전 제작
어조
제품을 홍보하는 판매자가 아니라 실험을 공유하는 실무자. 구체적이고 전문적인 제목 사용 (비공식적인 언어 사용 금지). 가시적인 구조: 문제, 메커니즘, 시사점.
체크리스트
- 완전한 프랑스어 케이스 스터디
- 완전한 영어 케이스 스터디
- 각 비디오에 불편함/이점 캡션 있음
- 전이 가능한 메커니즘이 포함된 학습 섹션
- 내러티브 및 전문적인 섹션 제목
6단계: 패키징 (15분)
입력: 이전 단계의 모든 결과물 출력: GitHub 저장소, Vercel 프로토타입, PORTFOLIO-INTEGRATION.md
작업
- .gitignore 생성 (node_modules, dist, .env, frames)
- git 저장소 초기화, 구조화된 커밋
- GitHub에 푸시 (공개 저장소)
- Vercel에 프로토타입 배포 (프로덕션)
- 자체 포함된 PORTFOLIO-INTEGRATION.md 생성:
- 프로젝트 YAML 메타데이터
- 에셋 복사 명령어
- 섹션별 케이스 스터디 전체 내용
- 에셋 목록 (비디오, 스크린샷, 위치)
- 비디오 형식 (autoplay/loop/muted/playsinline)
- 캡션 형식
- 게시 체크리스트
체크리스트
- GitHub 저장소 생성 및 푸시 완료
- Vercel에 프로토타입 배포 완료
- 자체 포함된 PORTFOLIO-INTEGRATION.md
- 파일이 포트폴리오 프로젝트에 복사됨
7단계: 게시 (가변적)
입력: 포트폴리오 프로젝트 내 PORTFOLIO-INTEGRATION.md 출력: 사이트에 게시된 프로젝트 페이지
작업
이 단계는 포트폴리오 프로젝트 내에서 별도의 세션으로 실행됩니다. 프롬프트:
PORTFOLIO-INTEGRATION.md를 읽고 내 사이트에 프로젝트로 케이스 스터디를 구현하세요.
파일에는 에셋, 콘텐츠, 페이지 구조, 비디오 및 캡션 형식에 대한 모든 지침이 포함되어 있습니다.
체크리스트
- 에셋이 포트폴리오 프로젝트에 복사됨
- 프로젝트 페이지 생성됨
- 비디오가 autoplay/loop/muted로 설정됨
- 각 비디오 아래에 캡션 있음
- og:image 구성됨
- 프랑스어 및 영어 버전
- 프로토타입 및 GitHub 링크 작동
요약
| 단계 | 시간 | 결과물 |
|---|---|---|
| 1. 프레임 | 15분 | case-study v1, CLAUDE.md |
| 2. 구조화 | 10분 | localhost 프로젝트 |
| 3. 강화 | 30-45분 | 촬영 가능한 프로토타입 |
| 4. 촬영 | 30분 | 비디오 + 스크린샷 |
| 5. 스토리텔링 | 20분 | 프랑스어/영어 케이스 스터디 |
| 6. 패키징 | 15분 | GitHub, Vercel, 팩 |
| 7. 게시 | 가변적 | 포트폴리오 페이지 |
| 총계 | ~2시간 30분 | 게시된 완전한 케이스 스터디 |