PRD로 키우는 두 번째 프로그램

이 장은 5장에서 만든 화면을 PRD로 다시 설계해, 내 컴퓨터의 폴더에서 파일로 만들고, 점검한 뒤 주소를 붙이는 과정을 다룹니다. 그 과정에서 화면, 정보, 규칙의 세 층과 주소의 종류 같은 프로그램 구조의 기본 어휘를 함께 익힙니다. 완전 초보자 대상 이틀 과정의 둘째 날 흐름을 옮긴 것입니다.

요청문에서 PRD로

5장의 요청문은 네 칸이었습니다. 쓰는 사람, 목적, 화면, 하지 않을 것입니다. 여기에 "넣을 정보와 규칙"을 더하면 PRD 다섯 칸이 됩니다. 요청문이 자란 모양입니다.

4장의 PRD는 문제, 사용자, 성공 기준, 하지 않을 것, 제약, 화면 여섯 칸이고, 18장의 PRD는 여기에 데이터를 더한 일곱 칸입니다. 이 장의 다섯 칸은 처음 만드는 사람을 위한 줄인 형태입니다. 성공 기준과 제약이 빠져 있으니, 프로그램이 커지면 4장과 18장의 형태로 넓힙니다. 가장 중요한 칸은 여기서도 "하지 않을 것"입니다.

PRD가 필요한 이유는 AI 이전부터 같았습니다. 사람끼리 일할 때도 의뢰인과 개발자가 미팅하고, 요구사항을 정리하고, 글로 확정한 뒤에 코딩을 시작했습니다. 말로 한 약속은 서로 다르게 기억하기 때문입니다. 코딩 전에 만들 것과 안 만들 것을 정하고, 다 만든 뒤에는 맞게 됐는지 확인하는 기준이 됩니다. 개발자 자리에 AI가 와도 같은 이유로 필요합니다.

가상의 예로, 가족 일정표 PRD는 이런 모양입니다.

[쓰는 사람] 우리 가족 네 명이 함께 보는 화면이야.
[해결할 일] 이번 주 누가 언제 어디 가는지 한눈에 보고, 일정이 겹치는 것을 줄이고 싶어.
[화면] 큰 제목 "우리 가족 이번 주 일정", 월~일 7칸, 칸마다 시간 · 누구 · 할 일.
[넣을 정보와 규칙] 정보는 날짜 · 시간 · 누구 · 할 일 · 장소(가상). 같은 시간에 겹치면 빨간 표시, 사람마다 색이 다르다.
[하지 않을 것] 로그인, 알림, 결제, 여러 주 보기, 실제 이름 · 연락처 · 주소.

프로그램은 세 층입니다

프로그램을 고칠 때 "어느 층을 고치는가"를 말하면 요청이 분명해져 AI가 덜 헤맵니다. 층은 세 가지입니다.

가족 일정표에서 화면은 큰 제목과 7칸 달력, 정보는 날짜·시간·누구·할 일, 규칙은 사람마다 색이 다르고 겹치면 빨간 표시가 나오는 것입니다. "글자를 크게"는 화면을 고치는 요청이고, "겹치면 알려 줘"는 규칙을 고치는 요청입니다.

정보를 저장하는 곳 네 가지

정보를 어디에 두는지에 따라 누가 볼 수 있는지가 달라집니다.

내 휴대폰에 넣은 일정이 가족의 휴대폰에는 안 보이는 일이 생깁니다. 브라우저에 저장하는 방식은 기기마다 따로 남기 때문입니다. 여럿이 같은 정보를 보려면 데이터베이스나 구글 시트 같은 공유 저장소가 필요합니다. 18장의 데이터 3단계 사다리가 이 이야기를 이어서 다룹니다. 공유 저장소에 둔 정보는 주소를 아는 누구나 볼 수 있는 구조가 되기 쉬우니 가상의 정보만 넣습니다.

클라이언트와 서버

클라이언트는 요청하는 쪽(휴대폰이나 컴퓨터의 브라우저)이고, 서버는 응답하는 쪽(늘 켜져 있는 컴퓨터)입니다. 식당에 비유하면 손님이 주문하고 주방이 음식을 냅니다. 브라우저에 주소를 입력하면 "이 주소의 화면을 주세요"라는 요청이 가고, 서버가 화면과 정보를 보냅니다. Claude 앱도 Anthropic의 서버에 묻는 클라이언트입니다.

서버를 빌려 늘 켜 두는 것을 호스팅, 만든 것을 서버에 올려 주소로 열 수 있게 하는 일을 배포라고 합니다. 5장의 도구는 브라우저 안에서 만들고 같은 곳에서 올렸고, 이 장에서는 내 컴퓨터에서 만들고 호스팅 서비스에 따로 올립니다.

주소의 네 가지

localhost는 내 컴퓨터를 가리키는 이름이고, 콜론 뒤 숫자(3000)는 한 컴퓨터 안의 문 번호인 포트입니다. 사람은 이름(도메인)을 쓰고, DNS(Domain Name System)가 이름을 번호로 바꿔 찾아갑니다. 전화번호부와 같은 역할입니다. 용어는 부록 C에 정리했습니다.

GUI, CLI, API

화면으로 조작하는 GUI와 글로 조작하는 CLI는 9장에서 설명했습니다. 여기에 API가 하나 더 있습니다. API는 프로그램끼리 요청과 응답을 주고받는 창구입니다. 이 장의 흐름에서 사람은 GUI(앱에 말로 시킴)를 쓰고, AI가 CLI(배포 명령)를 대신 치며, 정보를 저장하는 단계에서는 프로그램끼리 API로 주고받습니다.

작업 폴더에서 PRD 쓰게 하기

이 장의 실습은 파일을 만들 수 있는 도구가 필요합니다. 이 책에서는 Claude Code(9장) 또는 데스크탑 앱의 Code 탭(8장)을 씁니다. 내 컴퓨터의 폴더에서 파일을 만들고 고치고 명령을 실행할 수 있기 때문입니다. 메뉴 이름과 위치는 바뀔 수 있으니 공식 문서(Claude Code 문서)를 함께 봅니다(2026년 11월 기준).

작업 폴더는 바탕화면에 새로 만듭니다. 이름은 영어로, 띄어쓰기 없이 짓습니다(예: myapp). 그 폴더를 도구에서 엽니다. 폴더를 믿을지 묻는 창은 내용을 읽고 허용합니다. 권한은 하는 일마다 먼저 묻는 기본 모드로 둡니다. 모든 것을 허용하는 모드는 쓰지 않습니다. 모델과 사고 강도 같은 설정은 바꾸지 않고 시작해도 충분합니다. 어려운 일을 맡길 때만 올립니다. 올릴수록 오래 생각해 느려지지만 복잡한 일에 강해집니다.

도구 설정에는 입력한 내용을 서비스 개선에 쓰도록 허락하는 항목이 있을 수 있습니다. 처음 세팅할 때 이 항목이 무엇이고 지금 어떤 상태인지 확인합니다. 어떤 정보가 외부로 전송되는지 모른 채 쓰지 않습니다. 이 점은 8장의 처음 세팅 체크리스트에서 이어서 다룹니다.

5장에서 만든 화면과 고치고 싶은 점의 메모를 옆에 두고 아래 프롬프트를 보냅니다.

나는 [가족 일정을 챙기는 일]을 하는 사람이야.
앞서 [우리 가족 이번 주 일정표]를 만들어 봤어. 고치고 싶은 점은 [토요일 칸 글자가 넘치는 것]이야.
이 폴더에 PRD(만들기 전에 쓰는 한 장짜리 설명서)를 PRD.md 파일로 만들려고 해.
먼저 나에게 질문을 5개 이하로 번호를 붙여 한꺼번에 물어봐 줘. 내가 답하기 전에는 파일을 만들지 마.
내 답을 받으면 아래 다섯 칸으로 PRD.md를 써 줘.
[쓰는 사람] [해결할 일] [화면] [넣을 정보와 규칙] [하지 않을 것]
한국어로, 화면 하나로 끝나는 크기로, 실제 이름 · 연락처 · 건강 정보 없이 가상 데이터만 써 줘.

질문에 번호를 붙여 짧게 답하면 폴더에 PRD.md가 생깁니다. md는 마크다운 형식의 글 파일입니다. 파일을 만들겠다는 허락 창이 뜨면 읽고 허용합니다.

PRD를 내가 고칩니다

AI가 쓴 PRD를 그대로 쓰지 않고 다섯 가지를 확인합니다.

1. 화면 하나 크기인가. 여러 화면, 로그인, 결제가 끼어 있지 않은가.
2. 내 말로 읽히는가. 모르는 용어나 내 일과 다른 말은 바꿉니다.
3. 개인정보가 없는가. 실명, 연락처, 건강 정보가 없어야 합니다.
4. 하지 않을 것이 적혀 있는가. 비어 있거나 줄었으면 내가 채웁니다.
5. 규칙이 내 뜻과 같은가. 색, 겹침 같은 규칙을 확인합니다.

고칠 곳은 말로 시킵니다.

PRD.md에서 아래만 고쳐 줘.
- [고칠 점 1: 하지 않을 것에 "여러 주 보기"를 넣어줘]
- [고칠 점 2: 화면을 한 개로 줄여줘]
- [고칠 점 3: 글자를 더 크게 해줘]
나머지는 그대로 두고, 실제 이름이나 연락처는 넣지 마.

PRD를 한 장 그림으로 검수하기

긴 글은 읽다가 빠뜨립니다. 같은 대화에서 PRD를 한 장 그림으로 바꿔 보면 빠졌거나 틀린 칸이 눈에 띕니다.

PRD.md 내용을 한눈에 보는 인포그래픽을 infographic.html 하나로 만들어줘. 다섯 칸을 색으로 나누고 글자는 크게.

폴더에서 infographic.html을 두 번 눌러 브라우저로 엽니다. 틀린 칸은 "PRD.md에서 ○○을 고쳐 줘"라고 말합니다. 부록 B의 인포그래픽 스킬과 같은 발상이며, 여기서는 PRD를 검수하는 용도입니다.

PRD를 열 줄 요청문으로 줄이기

PRD는 사람이 읽는 긴 글이고, 화면을 만들 때는 짧은 요청문이 다루기 편합니다. 이 변환도 AI에게 시킵니다. 긴 문서를 구현용 짧은 요청문으로 압축하는 메타 프롬프팅입니다.

PRD.md를 바탕으로, index.html 하나를 만들 요청문(프롬프트)을 먼저 써서 보여줘. 아직 파일은 만들지 마.
요청문에는 index.html 파일 하나에 모두 넣기, 화면의 모든 글자는 한국어, 휴대폰에서도 보기 좋게, 가상 데이터만, 하지 않을 것을 꼭 넣어줘.
10줄 안팎으로 짧게.

나온 요청문에서 개인정보가 없는지, 하지 않을 것이 들어 있는지, 파일이 index.html 하나인지를 확인합니다. 고칠 곳은 말로 시킵니다.

허락 창을 읽는 법

파일을 만들거나 명령을 실행하려 하면 도구가 허락을 구합니다. 허락 창에는 하려는 일이 한 줄로 보입니다. 눌러 넘기는 습관이 가장 큰 위험입니다(9장). 읽을 때는 이 기준을 씁니다.

수업이라면 모르는 화면에서 손을 들고, 혼자라면 허용하지 않은 채 AI에게 "이 허락 창이 무슨 뜻인지 쉬운 말로 설명해줘"라고 묻습니다.

이제 열 줄 요청문대로 파일을 만들게 합니다. 같은 대화에서 한 번만 보냅니다.

좋아, 이 요청문대로 index.html을 만들어줘.

끝나면 요약이 나옵니다. 요약에 삭제, 내려받기, 내 폴더 밖 이야기가 있으면 멈추고 확인합니다.

결과를 확인하고 되돌리기

일이 끝나면 요약을 읽고, 폴더에서 index.html이 생겼는지 봅니다. 도구에는 바뀐 파일과 줄을 보여 주는 검토 기능이 있을 수 있습니다. 마음에 안 들면 이전 상태로 되돌리거나 말로 고칩니다. 되돌리기 기능은 버전 관리(git)를 쓰는 폴더에서만 되는 경우가 많습니다(20장). 마음에 드는 결과가 나오면 바꾸기 전에 폴더를 통째로 복사해 둡니다.

파일을 브라우저로 열면 주소창에 file:///…/myapp/index.html 같은 경로가 보입니다. 인터넷 주소가 아니라 내 컴퓨터 안의 경로이고, 나만 볼 수 있는 파일입니다. 눌러 보며 이상한 곳을 메모장에 적습니다.

눌러 보고 모아서 고치기

메모를 그대로 붙여 같은 대화에 보냅니다. 새 프로젝트를 만들지 않습니다. 더하고 싶은 것은 하나만 정합니다. 여러 개보다 하나를 제대로 하는 편이 좋습니다.

아래 고칠 점을 index.html에 반영해줘. 말하지 않은 부분은 그대로 둬.
파일은 index.html 하나만 고치고, 실제 이름이나 연락처는 넣지 마.
[메모장에 적은 고칠 점과 더하고 싶은 것]

끝나면 index.html을 새로 고침해 확인합니다.

올리기 전 점검

올리기 전에 사람이 확인할 다섯 가지입니다. AI가 만들었다고 해서 맞는 것은 아닙니다. 확인하고 결정하는 일은 사람이 합니다.

휴대폰 화면은 브라우저 창의 폭을 좁혀서 흉내 낼 수 있고, 주소를 붙인 뒤에는 실제 휴대폰으로 다시 봅니다. 여기에 공개 전 점검을 더합니다. 가상의 연습 내용만 있고 실명과 전화번호가 없는지, 폴더 맨 위에 index.html이 있는지, 연습과 상관없는 파일이 섞이지 않았는지 봅니다. 이 단계에서는 올리지 않습니다. 공개는 별도의 단계입니다.

파일에서 주소로

파일을 메신저로 보내면 받는 사람마다 사본이 생기고 휴대폰에서 잘 열리지 않을 수 있습니다. 주소로 건네면 모두가 같은 한 곳을 봅니다. 5장의 브라우저 도구는 만든 자리에서 주소를 줄 수 있지만, 내 컴퓨터의 파일은 주소를 따로 붙여야 합니다. 호스팅 서비스는 Vercel처럼 여럿이 있고, 올리는 방법은 서비스 공식 문서(Vercel 문서)를 따릅니다(2026년 11월 기준). 이 책은 서비스 하나를 예로 듭니다.

index.html을 만든 같은 대화에서 아래 문장을 보냅니다.

이 폴더의 index.html을 Vercel CLI(Command Line Interface, 명령줄 도구)로 배포해줘.
먼저 vercel whoami로 로그인됐는지 확인하고, 로그인이 필요하면 내가 할 일을 한 단계씩 알려 줘.
끝나면 짧은 프로젝트 주소(○○.vercel.app)만 알려줘.

이 문장에는 두 가지 요령이 들어 있습니다. 하나는 로그인 상태부터 확인하게 하는 것이고, 다른 하나는 로그인이 필요하면 사람이 할 일을 단계별로 알려 달라고 하는 것입니다. 로그인과 승인은 사람의 몫으로 남깁니다.

진행 중에 이런 일이 생깁니다.

1. 명령 실행 허락 창이 뜹니다. 명령을 읽고 이해되면 허용하고, 모르는 설치 명령이면 멈춥니다.
2. 브라우저에 호스팅 서비스의 승인 화면이 열립니다. 5장에서 쓴 계정과 같은 계정으로 로그인합니다. 다른 계정으로 승인하면 빈 계정이 새로 생깁니다. 비밀번호 방식과 소셜 로그인 방식을 섞으면 계정이 꼬이니 하나로 통일합니다.
3. 끝나면 짧은 주소가 나옵니다.

고친 뒤에는 "다시 배포해줘" 한마디면 됩니다. 비밀 값과 환경 변수, 되돌리기는 20장을 봅니다.

올린 주소는 누구나 볼 수 있습니다

주소를 아는 누구나 열 수 있고, 검색에 잡힐 수도 있습니다. 실명, 연락처, 건강 정보, 남의 사진, 남의 글은 올리지 않습니다. 올린 뒤에는 시크릿 창(로그인하지 않은 브라우저 창)에서 열어, 로그인 없이도 보이는지와 보이면 안 되는 것이 없는지 확인합니다. 로그인 화면이 뜨면 공개 범위 설정을 다시 확인합니다. 무료 플랜의 이용 조건은 서비스마다 다르고 개인·비상업 용도로 제한하는 경우가 있으니, 판매나 광고, 대가를 받는 제작에 쓰기 전에 약관을 확인합니다.

휴대폰에서 주소를 직접 입력해 열어 보고, 내 기기가 아닌 곳에서도 열리는지 확인하면 이 장의 도달선입니다.

되는 것과 안 되는 것의 지도

4장의 "잘 되는 일과 어려운 일"을 위치로 표시한 것입니다. 맨 아래 칸은 혼자 AI만 믿고 진행하지 말고 전문가의 검토를 받습니다.

더 해 보고 싶다면: 정보를 저장하기

일정을 저장해 새로 고침해도 남게 하려면 저장소가 필요합니다. 이 책의 기본은 구글 시트입니다(18장). 데이터베이스 서비스를 쓰는 길도 있는데, 어느 쪽이든 지킬 원칙은 같습니다.

• 공개 화면에 넣어도 되는 키만 쓰고, 비밀 키는 코드에 넣지 않습니다.
• 접근 규칙을 켠 상태로 시작합니다. 데이터베이스에는 행 단위로 접근을 제한하는 보안 기능(RLS, Row Level Security)이 있는 경우가 많습니다.
• 카드 입력 창이 나오면 멈춥니다. 연습에는 무료 범위로 충분합니다.
• 주소를 아는 누구나 볼 수 있으니 가상 정보만 넣습니다.

제품마다 키의 이름과 설정 방법이 바뀌므로 공식 문서와 대조합니다.

쓰고 난 뒤 정리하기

공용 노트북이나 더 쓰지 않을 도구는 정리하고 마칩니다.

1. 로그아웃: 앱의 계정 메뉴에서 로그아웃합니다.
2. 배포 서비스 로그아웃: AI에게 "vercel logout 해줘"라고 시킵니다. 내 노트북이 아닐 때 필요합니다.
3. 프로그램 제거: 운영체제의 설치된 앱 목록에서 지웁니다.
4. 남은 파일: 공용 노트북이면 작업 폴더와 앱이 남긴 설정 폴더를 지웁니다.

앱을 지워도 올린 주소는 그대로 열립니다. 폴더를 지우기 전에 복사해 둡니다.

흔한 실수

• PRD의 "하지 않을 것"을 비워 둡니다. 범위가 슬며시 커집니다.
• 허락 창을 읽지 않고 누릅니다. 삭제, 내려받기, 내 폴더 밖 이야기가 나오면 멈춥니다.
• 다른 계정으로 승인합니다. 빈 계정이 새로 생겨 올린 것이 보이지 않습니다.
• 파일을 메신저로 보내 사본을 늘립니다.
• 올리기 전 점검을 건너뜁니다. 휴대폰 화면에서 글자가 잘리는 것은 흔한 문제입니다.
• 브라우저에만 저장하고 가족의 휴대폰에서도 보일 것이라고 기대합니다.

실습

1. PRD 다섯 칸 쓰고 다섯 가지 확인하기

내가 만들고 싶은 작은 화면의 PRD를 위 프롬프트로 만들고, 다섯 가지 확인 중 "하지 않을 것"과 "개인정보"부터 읽어 고칩니다.

2. PRD에서 파일까지

PRD를 열 줄 요청문으로 줄이고, 요청문대로 index.html을 만듭니다. 허락 창에서 읽은 내용을 메모장에 두 줄 적습니다.

방금 허락 창에 나온 명령이 각각 무엇을 하는지 쉬운 말로 설명해줘. 하지 않아야 할 것이 있었는지도 알려줘.

3. 올리기 전 점검과 주소 확인

다섯 가지 확인표로 점검하고 가상 내용만 있는지 본 뒤, 주소를 붙입니다. 시크릿 창과 휴대폰에서 열어 보고 결과를 메모합니다.

정리

• PRD 다섯 칸은 5장의 요청문에 "넣을 정보와 규칙"을 더한 것이며, 가장 중요한 칸은 "하지 않을 것"입니다.
• 프로그램은 화면, 정보, 규칙의 세 층이며, 고칠 때 어느 층인지 말하면 요청이 분명해집니다.
• 주소는 나만 볼 수 있는 것과 누구나 볼 수 있는 것이 있고, 저장하는 곳에 따라 누가 정보를 보는지가 달라집니다.
• 허락 창은 읽고 누르며, 삭제, 내려받기, 내 폴더 밖, 모르는 설치 명령은 멈춥니다.
• 올리기 전에 다섯 가지를 점검하고, 올린 주소는 시크릿 창과 휴대폰에서 확인합니다.