만드는 과정과 걸리는 시간

프로킷으로 만들 때 많이 묻는 세 가지에 답해요.

• 어떤 순서로 만드나요? 시작하는 방법 세 가지, 레퍼런스 사이트 리서치부터 하는 과정

• 얼마나 걸리나요? 예시로 보는 시간

• 왜 표시된 시간보다 오래 걸릴 수 있나요? 시간이 어디에 쓰이나요, 고쳐 달라고 할 때마다 더 드는 시간

값은 프리셋을 만든 Claude Code 기록에서 쟀어요(2026-10-08). 만들기는 Opus 5.5, 리서치 에이전트는 Sonnet 5.5였어요. 에이전트가 일한 시간이고, 따로 적은 곳(올곧의 백그라운드 작업 기다림, Nextflix의 로그인 확인 기다림)을 빼고는 10분 넘게 아무 일도 없던 구간을 뺐어요. 내가 결과를 보고 확인하는 시간은 들어 있지 않아요. 튜토리얼 표의 시간 범위를 읽는 법은 시간과 비용 읽는 법에 있어요.

시작하는 방법 세 가지

시작하는 곳만 다르고, 그 뒤는 같은 흐름을 따라요.

flowchart TD
  RS(["레퍼런스 사이트<br/>리서치부터"]) --> R["리서치·수집"] --> N["분석과 정리"] --> P["프리셋 팩"]
  PK(["프리셋 팩으로"]) --> P
  P --> A["기획 확인"]
  CS(["내 컨셉으로<br/>처음부터"]) --> A
  A --> D["디자인"] --> S["모든 페이지"] --> C["검사와 리뷰"] --> F["내 확인과 마무리"]
  F -.->|원할 때| X["내보내기·배포"]

시간은 화면 프리셋 9개를 만들 때의 범위예요. 페이지가 많을수록 길어요. 프리셋마다 값은 예시로 보는 시간에 있어요.

레퍼런스 사이트 리서치부터 하는 과정

클론 튜토리얼(Nextflix, Claudle)과 올곧은 실제 사이트를 둘러보는 것부터 시작했어요. 에이전트가 브라우저로 사이트를 열어 보고 모았어요. Nextflix와 Claudle은 모은 것을 프리셋 팩으로 정리한 뒤 그 팩으로 만들었고, 올곧은 둘러본 결과로 DESIGN.md만 만들어 처음부터 만들었어요(팩은 다 만든 뒤 묶었어요). 아래 표는 팩까지 만든 Claudle과 Nextflix 값이에요.

• 2와 3은 에이전트 여럿이 같은 시간에 나눠 해서, 요청부터 리서치 끝까지는 Claudle 약 1시간 28분, Nextflix 약 1시간 22분이 걸렸어요. 내가 답하거나 로그인해 주는 시간도 그 안에 들어 있어요.

• Nextflix는 처음 만든 프리셋 팩이라 팩 검사 도구, 그림 도구, 배치도 생성기까지 이때 만들어서 오래 걸렸어요. Claudle은 그 도구와 리서치의 화면 계획을 그대로 써서 설계와 팩 만들기가 약 35분에 끝났어요.

본뜰 때 지키는 것

• 배치, 흐름, 분위기는 비슷하게 만들어요.

• 로고, 이름, 문구, 사진은 가져오지 않아요. 이름은 새로 짓고, 문구와 예시 데이터는 새로 쓰고, 그림은 AI로 그려요.

• 색과 서체는 비슷한 계열의 다른 것으로 바꿔요.

• 연습용이고 원래 서비스와 관계없다고 화면에 밝혀요.

조사할 때 지키는 것

• 공개 페이지 위주로 봐요.

• 로그인한 화면은 내 계정으로 보이는 것만 봐요. 설정 바꾸기, 결제, 다른 사람에게 보내기처럼 계정에 남는 일은 하지 않아요. Claudle은 답이 나오는 모습을 재려고 기록이 남지 않는 대화로 메시지 몇 개를 보냈어요. 이런 동작은 내가 허락한 만큼만 해요.

• 그 사이트의 이용약관을 따르고, 페이지를 한꺼번에 많이 여는 자동 수집은 하지 않아요.

직접 해 보려면

작업 폴더에서 가장 쉬운 방법의 프롬프트에 레퍼런스 한 줄을 더해 보내요. 바꿀 곳은 [ ] 안 세 군데(폴더 이름, 서비스, 참고할 서비스 주소)예요.

이 꼴은 프리셋을 만든 요청을 줄인 것이고, 이 프롬프트를 그대로 다시 실행해 확인하지는 않았어요. 로그인한 화면까지 보게 하려면 에이전트가 물을 때 브라우저에 내 계정으로 로그인해 주세요.

시간이 어디에 쓰이나요

Claudle과 올곧을 만들 때 메인 에이전트가 무엇에 시간을 썼는지예요(단위 분). 같은 시간에 따로 일한 다른 에이전트의 시간은 빼고, 메인이 그 에이전트를 기다린 시간만 넣었어요.

pie showData
  title Claudle 만들기, 무엇에 시간이 갔나(분)
  "모든 페이지 확인" : 122
  "생각하고 쓰기" : 109
  "리뷰·디자인 검사 에이전트" : 55
  "구현 에이전트 기다림" : 22
  "브라우저 확인" : 19
  "빌드·내보내기·검사" : 20
  "기타" : 2

pie showData
  title 올곧 만들기, 무엇에 시간이 갔나(분)
  "모든 페이지 확인" : 272
  "생각하고 쓰기" : 120
  "리뷰·디자인 검사 에이전트" : 26
  "구현 에이전트 기다림" : 8
  "브라우저 확인" : 2
  "빌드·내보내기·검사" : 12
  "기타" : 14

• 모든 페이지 확인이 가장 커요. 고친 곳만 보지 않고 링크와 버튼, 여러 너비의 화면, 접근성을 페이지마다 봐요. 페이지가 많을수록 커져서, Claudle은 35%, 페이지가 203개인 올곧은 60%였어요.

• 프로킷은 확인해야 끝나요. 검사를 실제로 돌린 증거가 없으면 끝났다고 하지 않아서 그냥 AI에게 맡길 때보다 시간이 더 들어요. 대신 깨진 링크나 겹친 화면을 내가 찾지 않아도 돼요(그냥 AI에게 맡길 때와 다른 점).

• 생각하고 쓰기는 요청을 읽고 고칠 곳을 찾아 코드를 쓰는 시간이에요. Claudle 31%, 올곧 27%예요.

예시로 보는 시간

프리셋 11개 한눈에

앞 숫자는 순조롭게 한 번에 끝날 때의 최솟값이고, 괄호는 여러 번 고쳐 달라고 할 때예요. 리서치와 팩 만들기는 들어 있지 않아요.

Claudle을 리서치부터 만든 시간

Claudle은 claude.ai를 둘러보는 리서치부터 시작해 프리셋 팩을 만들고, 그 팩으로 프리셋을 만들었어요. 가로축은 시작부터 걸린 시간(시:분)이에요. 라운드(기능 하나를 만들거나 요청한 것을 고치고 확인까지 마치는 작업 묶음) 사이에 내가 확인하느라 기다린 시간은 빼고 이어 그렸어요.

gantt
  title Claudle 풀 사이클(라운드 사이에 기다린 시간은 뺐어요)
  dateFormat HH:mm
  axisFormat %H:%M
  todayMarker off
  section 리서치와 팩
  리서치 : research, 00:00, 88m
  설계와 프리셋 팩 : pack, after research, 35m
  section 만들기
  기획과 디자인 : plan, after pack, 18m
  모든 화면 : screens, after plan, 120m
  검토와 다듬기 : review, after screens, 170m
  공개 전 손보기 : polish, after review, 42m

만들기 네 줄의 토큰은 달러에서 1달러당 약 5.5만(캐시 포함 약 275만)으로 바꾼 값이고, 리서치와 팩 두 줄의 토큰은 기록에서 잰 값이에요. 이 두 줄의 달러는 거꾸로 토큰을 같은 비율로 나눠 어림해서, 표 안에 두 방식이 섞여 있어요. 프리셋 팩으로 시작하면 이 두 줄이 빠져요.

고쳐 달라고 할 때마다 더 드는 시간

결과를 보고 고쳐 달라고 하면 에이전트는 고친 곳만 보지 않아요. 여러 페이지가 함께 쓰는 부품을 고치면 다른 페이지가 깨질 수 있어서, 고칠 때마다 모든 페이지를 다시 확인해요. 그래서 한 번 고칠 때 드는 시간은 이렇게 쌓여요.

한 군데를 고치면

올곧에서 식단표 한 줄을 고칠 때 약 10분이 들었어요. 가로축은 시작부터 걸린 분이고, 옅은 막대 두 개가 모든 페이지 확인이에요.

gantt
  title 올곧 식단표 한 줄 고치기
  dateFormat HH:mm
  axisFormat %M분
  todayMarker off
  요청 읽기 : read, 00:00, 1m
  고치기 전 모든 페이지 확인 : active, before, after read, 2m
  고치기 : fix, after before, 1m
  린트·타입 검사·빌드·내보내기 : build, after fix, 1m
  고친 뒤 모든 페이지 확인 : active, recheck, after build, 4m
  기록과 보고 : report, after recheck, 1m

고치는 일은 1분이었는데, 고치기 전과 뒤에 모든 페이지를 확인하느라 6분이 들었어요. 작은 수정이라 고친 곳에 맞는 검사(배지 줄바꿈 검사를 203쪽 × 6가지 너비로)와 바뀐 쪽 검사만 돌렸어요. 배치를 고치면 모든 검사를 다시 돌려서 아래 두 군데 예처럼 37분까지 늘어요.

두 군데를 고치면

약 28~43분이 들었어요. Claudle에서 공개 전에 두 가지를 손볼 때는 약 28분이 이렇게 들었어요.

올곧에서 두 군데를 고칠 때는 약 43분(모든 페이지 다시 확인 37분, 고치기 5분)이 들었어요. 페이지가 많은 올곧은 모든 페이지 다시 확인이 대부분이에요.

마무리 검토를 한 번 더 하면

다시 디자인하거나 마무리 검토(디자인 리뷰, 리뷰 에이전트, 모든 페이지 다시 확인)를 한 번 더 하면 2~3시간이 더 들어요. 올곧은 약 2시간 20분(모든 페이지 다시 확인 1시간 36분, 리뷰·디자인 검사 에이전트 약 15분, 고치기 19분), Claudle은 약 2시간 48분(모든 페이지 다시 확인 1시간 14분, 리뷰·디자인 검사 에이전트 약 49분, 고치기 34분)이 들었어요.

내가 결과를 보고 확인하는 시간은 이 값에 들어 있지 않아요.

시간을 줄이는 법

1. 1.

   프리셋 팩으로 시작해요. 리서치와 팩 만들기가 빠져서 Claudle 약 2시간 5분, Nextflix 약 3시간 35분이 줄어요. 올곧은 처음부터 만든 뒤 팩을 묶어서, 빠지는 사전 작업은 사이트 조사(약 50분)예요. 팩으로 만들면 처음부터 만들 때보다 기획과 그림도 줄어요(위 표).

2. 2.

   작은 범위로 시작해요. 페이지 5~7개짜리로 먼저 만들고 넓혀요. 모든 페이지 확인은 페이지 수에 비례해요(13쪽 약 5분, 203쪽 약 6~37분).

3. 3.

   고칠 것은 모아서 한 번에 요청해요. 요청할 때마다 모든 페이지 확인을 다시 해서, 한 군데를 따로 고칠 때마다 약 10분이 더 들어요. 모아서 요청하면 확인은 한 번이에요.

4. 4.

   리서치 범위를 정해요. 공개 페이지 몇 개만 보면 약 18분, 웹의 거의 모든 화면을 보면 약 1시간 10분~1시간 45분이 들어요.

5. 5.

   하루에 다 하려고 하지 않아요. 큰 프리셋은 5시간 한도에 걸려요. 올곧을 처음부터 만들면 5시간 한도에 약 4번 걸려요. 나눠서 만들어도 결과는 같아요.

6. 6.

   끊기면 이어서 해요. 멈춘 폴더에서 에이전트를 다시 열고 하던 작업 이어서 해줘라고 보내면 멈춘 곳부터 해요. 처음부터 다시 시키면 같은 일을 두 번 해요.

자주 묻는 질문