스크린샷 위에 빨간 동그라미 치고 "여기 간격 좀 줄여주세요" 하던 시절이 있었죠. Paper Snapshot은 그 스크린샷 자체를 없앴어요. 라이브 사이트를 통째로 캡처해서 편집 가능한 레이어로 캔버스에 붙여넣거든요.
이게 뭔데?
Paper Snapshot은 Paper 팀이 만든 크롬 익스텐션이에요. 작동 방식은 간단해요. 크롬에서 아무 웹사이트나 열고, 익스텐션을 실행하면 해당 페이지의 섹션을 캡처해서 Paper 캔버스에 편집 가능한 HTML/CSS 레이어로 바로 붙여넣어줘요. 스크린샷이 아니에요. 실제 HTML 구조와 CSS 스타일이 그대로 올라오는 거예요.
Paper를 모르시는 분들을 위해 간단히 설명하면, Radix UI를 만든 Stephen Haney가 2024년에 창업한 디자인 도구예요. Accel 리드로 $4.2M 시드를 받았고, 현재 오픈 알파 상태예요. 핵심 컨셉은 간단해요 — 캔버스 자체가 HTML/CSS로 작동해요. Figma처럼 독자 포맷이 아니라 웹 표준 기반이라, 디자인한 걸 React나 Tailwind로 바로 내보낼 수 있어요.
Snapshot은 이 Paper 캔버스의 기능을 한 단계 확장한 거예요. 기존에는 빈 캔버스에서 디자인을 새로 시작하거나 에이전트에게 만들어달라고 해야 했는데, 이제는 이미 돌아가고 있는 프로덕션 사이트에서 시작할 수 있어요. "시작점을 프로덕션에서 가져온다"는 게 핵심이에요.
Google Stitch와 뭐가 다른가요?
최근 Google이 Stitch라는 AI UI 디자인 도구를 공개했어요. Stitch는 텍스트 프롬프트로 UI를 생성하는 도구고, Paper Snapshot은 이미 존재하는 사이트를 캡처해서 편집하는 도구예요. 방향이 정반대예요 — Stitch는 0→1, Snapshot은 1→1.1이에요.
뭐가 달라지는 건데?
지금까지 라이브 사이트를 디자인에 가져오는 방법은 스크린샷뿐이었어요. 스크린샷을 찍고, Figma에 붙이고, 그 위에 레이어를 올려서 수정 방향을 표시하죠. 문제는 그 스크린샷이 그냥 이미지라는 거예요. 버튼 하나 옮기려면 새로 그려야 해요.
| 스크린샷 방식 | Paper Snapshot | |
|---|---|---|
| 캡처 결과물 | 플랫 이미지 (PNG/JPG) | 편집 가능한 HTML/CSS 레이어 |
| 텍스트 수정 | 불가 (이미지 위에 새로 작성) | 바로 수정 가능 |
| 레이아웃 변경 | 불가 (다시 그려야 함) | 요소 이동·삭제·추가 가능 |
| 코드 내보내기 | 불가 | React / Tailwind로 바로 내보내기 |
| AI 에이전트 연결 | 불가 | MCP로 Cursor, Claude Code 등 연결 |
Paper 공식 로드맵에서도 Snapshot을 이렇게 설명해요 — "No more drawing on screenshots." 스크린샷 위에 그림 그리는 시대가 끝났다는 거예요. 캡처한 사이트의 HTML/CSS가 그대로 Paper 캔버스에 올라오니까, 실제 요소를 직접 조작할 수 있어요.
이게 실무에서 어떤 차이를 만드는지 생각해보면요. 디자이너가 "이 랜딩 페이지의 히어로 섹션 간격을 조정하고 CTA 버튼 색을 바꿔보자"고 할 때, 기존에는 스크린샷 찍고 → Figma에서 비슷하게 다시 그리고 → 수정안 만들고 → 개발자에게 전달했어요. Snapshot이면? 사이트 캡처 → Paper에서 바로 수정 → 에이전트가 코드 반영. 중간 번역 과정이 사라져요.
프로덕션에서 시작해서 프로덕션으로 돌아가는 루프가 완성되는 셈이에요. Paper 팀이 블로그에서 강조한 "양방향 워크플로우" — 라이브 앱의 섹션을 캔버스로 끌어와서 공간적으로 탐색하고, 결정이 끝나면 코드로 다시 밀어넣는 것 — 의 마지막 퍼즐이 Snapshot이에요.
핵심만 정리: 시작하는 법
- Paper Snapshot 크롬 익스텐션 설치
Chrome Web Store에서 Paper Snapshot을 설치해요. 301KB밖에 안 되는 가벼운 익스텐션이에요. - Paper 계정 준비
app.paper.design에서 무료 계정을 만들어요. 데스크톱 앱을 깔면 MCP 연결까지 가능해요. 오픈 알파라 무료예요. - 캡처할 사이트 열기
크롬에서 수정하고 싶은 웹사이트를 열어요. 자기 회사 사이트든, 경쟁사 사이트든, 영감을 준 사이트든 뭐든 돼요. - Snapshot으로 캡처
익스텐션 아이콘을 클릭하고 캡처할 영역을 선택해요. 캡처된 HTML/CSS 레이어가 Paper 캔버스에 바로 붙여넣어져요. - 캔버스에서 편집 → 코드 내보내기
텍스트, 색상, 레이아웃을 자유롭게 수정하고, Copy as React나 Tailwind로 내보내세요. AI 에이전트를 연결했다면 "이 수정사항을 코드에 반영해줘"라고 요청하면 끝이에요.
알아둘 것
Paper는 아직 오픈 알파예요. 팀 협업, 컴포넌트 시스템(슬롯, 프롭스), CSS Grid는 아직 개발 중이에요. Figma 수준의 성숙도를 기대하면 실망할 수 있어요. 하지만 프론트엔드 개발자나 1-2인 팀이 빠르게 프로토타이핑하기엔 지금도 충분히 쓸만해요.
