한 줄 아이디어를 동작하는 화면으로 만들기

아무도 저한테 이걸 하라고 시키지 않았어요.

세계일보 워크샵 3차를 진행 중이었는데, 문득 이런 생각이 들더라고요. 이 분들이 자기 아이디어가 실제로 동작하는 걸 미리 보면 어떨까.

AI 쓰다 보면 이런 순간 한 번쯤 오지 않나요. 예전 같으면 시간 없어서, 귀찮아서 그냥 넘겼을 일이 갑자기 해볼 만해 보이는 순간. 저한텐 이게 그랬어요. 그래서 9개를 전부 클릭되는 데모 화면으로 만들어버렸습니다. 손으로 만든 게 아니라 Claude Code로 파이프라인을 짜서요. 9개를 사람이 직접 만들면 며칠짜리라, AI가 아니었으면 욕심도 안 냈을 일이거든요.

ALT

한국 전자상거래 방문 페이지 템플릿

왜 굳이 데모까지 만들었나

누구 가르쳐 봤거나, 후배한테 일 넘겨 본 적 있으면 아실 거예요. 말로 아무리 설명해도 상대가 직접 눈으로 보기 전엔 잘 안 움직인다는 거. 비개발자 왕초보한테 글 피드백은 특히 더 그래요. 범위를 좁히라고 말로 들으면 머리로는 끄덕여도 손이 안 나갑니다. 자기 아이디어가 실제로 어떻게 생기는지 한 번도 본 적이 없으니까요.

그래서 차라리 9명 것을 전부 동작 데모로 만들어서 보여주자 싶었어요. 문제는 사람이 손으로 9개를 만드는 건 사실상 불가능하다는 거였죠. 한 명당 반나절만 잡아도 며칠이고, 9명 아이디어가 다 다른 결이라 재활용도 안 되거든요. 그래서 AI에 맡기되, 닥스가 바뀔 때마다 다시 돌릴 수 있게 파이프라인으로 짰습니다.

테크닉 1. 큰 문서는 통째로 안 읽고, 조각만 떠오게 시켰어요

참가자 아이디어는 구글닥스 한 곳에 모여 있었는데, 문서가 너무 커서 통째로 읽으면 토큰 한도를 넘겨 버렸습니다. 그냥 읽기를 시키면 이렇게 터졌어요.

전체 닥스가 커서 한 번에 못 읽음. 토큰 초과로 내용이 파일로 빠짐.

처음엔 이게 막힌 벽처럼 보였는데, 우회하는 방식이 오히려 핵심 노하우가 됐어요. 메인 작업창이 닥스 원문을 다 들고 있을 필요가 없거든요. 그래서 서브에이전트한테 따로 시켰습니다.

이 닥스에서 3차 탭만 봐. 제출자별로 이름 / 조 / 아이디어 제목 / 제출 전문만
추려서 표로 돌려줘. 나머지는 가져오지 마.

서브에이전트가 9명분 깔끔한 표만 돌려주니, 메인 작업창은 원문 수천 줄에 안 잠기고 필요한 것만 받습니다. 큰 입력을 다룰 때 통째로 들이밀지 말고, 보조 일꾼한테 필요한 조각만 가져오게 하는 것. 이게 첫 번째예요.

테크닉 2. 9개를 9번 안 시켰어요

데모 9개를 하나씩 순서대로 만들면, 1번 끝나야 2번 시작하고, 9번까지 가는 데 9배 시간이 걸립니다. 9명 아이디어는 서로 독립적이라 굳이 줄 세울 이유가 없었어요.

그래서 에이전트 팀을 띄워서 동시에 만들게 했습니다. 각자 한 명씩 맡아 데모를 만들고, 저는 결과만 받았어요.

테크닉 3. 매번 전부 다시 안 만들어요

워크샵 참가자는 구글 닥스에 본인 아이디어를 계속 고칩니다. 갱신될 때마다 9개를 통째로 다시 만들면 시간도 토큰도 매번 9배예요.

ALT

한국어 텍스트가 포함된 웹사이트 스크린샷

그래서 직전 상태를 저장해뒀다가 새 닥스랑 비교해서, 내용이 실제로 바뀐 사람만 다시 만들었어요.

• 새로 들어온 사람: 데모와 코칭 카드 새로 생성

• 아이디어를 고친 사람: 그 사람 것만 다시 생성

• 그대로인 사람: 손도 안 댐

이렇게 해두니 운영이 명령 한 줄로 줄었습니다. 제가 업뎃해줘라고 하면 닥스 다시 읽고, 바뀐 사람 추려서, 그 사람만 다시 만들고, 갤러리에 배포하고, 상태를 저장하는 것까지 한 번에 돌아가요. AI를 한 번 쓰고 버리는 생성기가 아니라, 트리거 한 마디로 다시 도는 파이프라인으로 만든 거죠.

결론

ALT

한국어 웹사이트 스크린샷

무튼 참가자 반응이 가장 좋았습니다.

글로 "범위를 좁히세요"라고 할 때는 안 움직이던 분들이, 자기 아이디어가 화면에서 실제로 클릭되는 걸 보자 태도가 달라졌어요. "어 이게 되네"가 먼저 오고, 그제서야 "그럼 여기는 이렇게 바꾸고 싶다"는 말이 나옵니다. 만드는 법을 가르치기 전에 완성된 결과물을 먼저 보여주니, 학습 동기가 알아서 따라온 거예요.

비개발자 왕초보한테는 가르치는 순서를 뒤집는 게 먹힙니다. 방법부터 가르치면 겁먹지만, 네 아이디어가 이렇게 생긴다를 먼저 보여주면 그다음은 본인이 끌고 가요.

결과

AI 활용 팁!

• 큰 자료를 다룰 때 통째로 읽히지 마세요. 보조(서브에이전트)한테 필요한 조각만 표로 돌려달라고 하면 작업창이 안 잠깁니다. 회의록 50페이지에서 결정사항만, 엑셀 수천 줄에서 특정 조건만 뽑을 때 똑같이 써요.

• 독립적인 결과물 여러 개는 한 번에 펼치게 하세요. 카드 10장, 상세페이지 5개처럼 서로 안 엮인 건 줄 세울 이유가 없습니다.

• 반복되는 작업은 매번 새로 시키지 말고, 원본 하나를 정해두고 바뀐 것만 다시 돌리는 구조로 짜세요. 한 번 만들어두면 갱신이 명령 한 줄이 됩니다.

바로 쓸 수 있는 프롬프트

아래 [아이디어 텍스트]를 동작하는 데모로 만들어줘. 단일 HTML 한 파일, 외부 서버 호출 없이 샘플 데이터는 파일 안에 넣어서 더블클릭하면 바로 열리게. 비개발자가 봐도 뭘 하는 건지 한눈에 들어오게. [아이디어 텍스트]에 본인 아이디어 한 문단을 넣으세요.