1. 처음부터 끝까지 한 번에

10장의 마지막은 실전입니다. 브리프를 쓰고, Code 탭에 맡기고, 검토하고, 다듬고, 명세를 남기는 흐름을 처음부터 끝까지 한 번에 써봅니다. 앞선 책의 3부가 '감귤 주문 서비스 MVP'를 명세서 템플릿으로 다뤘으니, 같은 소재로 이 책의 방식을 보여드리겠습니다.

상황은 이렇습니다. 제주에서 감귤 농장을 하는 분이 매년 겨울 지인들에게 감귤을 팝니다. 지금까지는 카카오톡 메시지로 주문을 받아 수첩에 적었는데, 주문이 100건이 넘어가면서 빠뜨리고 헷갈리는 일이 생겼습니다. 지인에게 링크 하나를 보내면 주문이 표에 쌓이는 페이지가 필요합니다.

이 실습에서 연습하는 것은 페이지 자체가 아니라 순서입니다. 소재를 여러분의 것으로 바꿔도 순서는 같습니다.

2. 폴더와 재료 준비

바탕화면에 mandarin 폴더를 만듭니다. 그 안에 photos 폴더를 만들고 감귤 사진 세 장을 넣습니다. 사진이 없으면 아무 과일 사진이어도 됩니다. 이 실습에서는 사진이 없어도 진행됩니다. 그리고 가격.xlsx를 만듭니다. 엑셀이 없으면 메모장으로 가격.md를 만들어도 됩니다.

종류, 무게, 가격
노지 감귤, 5kg, 18000
노지 감귤, 10kg, 32000
타이벡 감귤, 3kg, 25000

주문이 쌓일 구글 시트도 하나 만듭니다. 구글 드라이브에서 새 스프레드시트를 만들고 이름을 '감귤주문'으로 합니다. 5장에서 구글 시트를 연결하는 방법을 배웠으니, 그때 만든 시트를 써도 됩니다.

3. 브리프

Code 탭에서 mandarin 폴더를 선택하고, 권한 모드는 권한 건너뛰기로 둡니다. 잃을 것이 없는 실습 폴더이기 때문입니다. 그리고 아래 브리프를 붙입니다.

나는 제주에서 감귤 농장을 하는 사람이야. 개발은 전혀 몰라. 매년 겨울 지인들에게 감귤을 파는데, 카카오톡으로 링크를 보내면 지인이 주문을 남기고 그 주문이 내 구글 시트에 쌓이는 페이지를 만들고 싶어.

화면 구성:
- 맨 위에 농장 이름 '한라 감귤 농장'과 짧은 인사 한 줄
- 그 아래 감귤 종류와 가격. 종류마다 사진, 이름, 무게, 가격 순서로
- 주문 칸: 이름, 연락처, 종류(고르기), 수량, 배송지, 요청사항
- 주문하기 버튼. 누르면 '주문이 접수되었습니다'와 함께 주문 내용을 다시 보여줘
- 맨 아래 농장 연락처와 계좌번호

재료:
- 사진은 폴더의 photos 안에 있어. 없으면 사진 자리만 비워둬
- 종류, 무게, 가격은 폴더의 가격.xlsx에 있는 것만 써
- 주문이 쌓일 구글 시트 이름은 '감귤주문'이야

조건:
- 회원가입, 로그인, 결제 없이
- 파일은 index.html 하나로. 필요하면 css, js 파일은 따로 둬도 돼
- 폰에서 봐도 깨지지 않게. 지인들은 거의 폰으로 볼 거야
- 색은 감귤색과 초록을 조금만, 나머지는 흰 바탕
- 내가 알려주지 않은 연락처, 계좌번호, 인사말은 지어내지 말고 [확인 필요]라고 적어둬
- 주문을 구글 시트에 저장하는 방법은 개발을 모르는 사람이 유지보수할 수 있는 가장 단순한 방법으로 골라서, 만들기 전에 방법과 이유를 먼저 알려줘. 내가 구글 쪽에서 해야 하는 클릭이 있으면 그것도 순서대로

Enter를 누릅니다. 이 브리프에는 기술 이름이 하나도 없습니다. 파일 형식(html)과 서비스 이름(구글 시트)뿐입니다.

4. 제안 듣고 진행

마지막 줄 때문에 Claude는 바로 만들지 않고 방법을 먼저 설명합니다. 대체로 5장에서 본 방식, 구글 시트에 Apps Script를 붙여 주소를 하나 만들고 페이지가 그 주소로 주문을 보내는 방식을 제안합니다. 설명을 읽어 보세요. 모르는 단어가 있으면 그 자리에서 묻습니다.

Apps Script가 뭐야? 내가 뭘 잘못하면 시트가 망가질 수 있어?

답을 듣고 납득이 되면 진행합니다.

좋아, 그 방법으로 진행해. 구글 쪽에서 내가 할 클릭은 다 끝난 다음에 '설명서.md'로 따로 정리해줘.

Claude가 파일을 만들기 시작합니다. 몇 분 걸립니다. 그동안 구글 시트 탭을 열어 두세요.

5. 1차 검토

작업이 끝나면 오른쪽 패널에서 폴더를 열고 index.html을 더블클릭합니다. 그리고 10장 3절의 체크리스트대로 갑니다. 아래는 제가 실제로 했을 때의 검토 메모입니다. 여러분의 결과물은 다를 것입니다.

검토 메모 (1차)

눌러 보기:
1. 주문하기를 누르면 '접수되었습니다'는 뜨는데 시트에 안 들어감 → 설명서.md의 구글 쪽 클릭을 아직 안 해서인 듯. 먼저 해보고 다시 확인
좁혀 보기:
2. 폰 폭에서 가격표 세 개가 가로로 눌려서 글자가 겹침
읽어 보기:
3. 인사말이 '달콤한 제주의 겨울을 선물하세요'로 지어져 있음. [확인 필요] 표시 없음
4. 계좌번호 자리에 [확인 필요]는 잘 되어 있음
빠진 것:
5. 요청사항 칸이 없음
망가뜨려 보기:
6. 수량에 0을 넣어도 접수됨
숫자:
7. 가격은 가격.xlsx와 일치

괜찮은 것:
- 사진, 색, 전체 배치

여기서 1번은 제 몫입니다. 설명서.md를 열어 구글 시트 쪽 클릭을 따라 합니다. 확장 프로그램 메뉴에서 Apps Script를 열고, Claude가 만들어 둔 코드를 붙여 넣고, 배포 버튼을 눌러 주소를 받는 순서입니다. 5장에서 한 번 해봤던 것과 같습니다. 받은 주소를 Claude에게 알려줍니다.

구글 쪽 설정 끝났어. 주소는 https://script.google.com/macros/s/xxxx/exec 야. 이걸로 연결해줘.

다시 주문을 보내 봅니다. 시트에 한 줄이 생기면 1번은 해결입니다.

6. 다듬기

나머지를 번호로 한 번에 보냅니다.

검토했어. 아래를 고쳐줘. 사진, 색, 전체 배치는 그대로 둬.

1. 폰 폭에서 가격표 세 개가 가로로 눌려 글자가 겹쳐. 폰에서는 세로로 쌓이게.
2. 인사말 '달콤한 제주의 겨울을 선물하세요'는 내가 준 게 아니야. '올해도 감귤 주문 받습니다. 12월 20일까지 주문 가능합니다.'로 바꿔줘.
3. 주문 칸에 요청사항(선택) 칸을 추가하고, 시트에도 같이 저장되게.
4. 수량은 1 이상만 받고, 0이나 빈칸이면 '수량을 확인해주세요'라고 알려줘.

고쳐진 것을 다시 열어 2차 검토를 합니다. 4번을 확인할 때는 다시 망가뜨려 봅니다. 0, -1, 빈칸, 글자. 이번에는 다 막히면 됩니다.

7. Claude에게도 검토 시키기

/clear로 대화를 비우고 다른 눈으로 검토를 시킵니다.

이 폴더의 index.html은 다른 사람이 만든 거야. 감귤 농장 주인이 지인 주문을 받으려는 페이지이고, 개발을 모르는 사람이 유지보수해. 지인 입장에서 폰으로 주문해 본다고 생각하고 불편한 점, 그리고 이 페이지를 공개했을 때 보안이나 개인정보 면에서 위험한 점을 심각한 순서로 정리해줘. 고치지는 말고.

제 경우에는 두 가지가 나왔습니다. 하나는 배송지를 적는 칸이 한 줄이라 아파트 동호수까지 적기 불편하다는 것, 다른 하나는 script.js에 적힌 구글 스크립트 주소를 아는 사람은 누구나 시트에 아무 내용이나 넣을 수 있다는 것이었습니다. 첫 번째는 바로 고칩니다. 두 번째는 지인 몇십 명에게 보내는 링크라면 감수할 만한 위험이지만, 명세의 '개발자에게 넘길 때 알려줘야 할 것'에 적어 두어야 할 것입니다. 이 판단은 여러분이 합니다.

8. 배포

5장에서 배운 대로 GitHub에 올립니다.

이 폴더를 GitHub에 mandarin-order라는 이름의 저장소로 올리고 GitHub Pages로 배포해줘. 설명서.md와 검토 메모는 올리지 마.

배포된 주소를 폰으로 열어 봅니다. 폰에서 실제로 주문을 하나 보내 봅니다. 시트에 들어가면 끝입니다. 이 주소를 지인 한 명에게 먼저 보내 써 보게 하세요. 여러분이 못 찾은 것을 찾아줄 것입니다.

9. 명세 남기기

이 폴더의 결과물을 보고 `명세.md`를 써줘. 읽는 사람은 개발을 전혀 모르는 나야.
1. 이 페이지가 하는 일 세 줄
2. 파일마다 역할 한 줄씩
3. 주문이 시트까지 가는 길을 머메이드 그림으로
4. 가격, 사진, 인사말, 마감일, 계좌번호를 어디서 고치는지 표로
5. 이번에 넣지 않은 것과 다음에 넣으려면 필요한 것
6. 개발자에게 넘길 때 알려줘야 할 것. 아까 검토에서 나온 스크립트 주소 문제도 여기 넣어줘

그리고 폴더에 brief.md를 만들어 오늘 쓴 브리프와 검토 메모를 날짜와 함께 붙여 둡니다.

10. 이 실습에서 한 것

앞선 책의 3부와 이 실습을 나란히 놓고 보겠습니다.

걸린 시간은 브리프 10분, 만들기 5분, 구글 설정 10분, 검토와 다듬기 30분, 명세 5분이었습니다. 한 시간입니다. 그중 검토와 다듬기가 절반입니다. 이 책이 3부의 제목을 '빠르게 만들고 검토하기'로 정한 이유가 이 시간 배분에 있습니다.

여기까지가 이 책의 본편입니다. 이제 여러분의 것을 만들 차례입니다. 2장 1절의 단계표에서 1단계 프로젝트를 두세 개 만들어 보고, 그 다음 2단계로 가세요. 매번 브리프를 쓰고, 검토하고, 명세를 남기세요. 세 번째 프로젝트쯤에서 첫 결과물이 눈에 띄게 좋아져 있을 것입니다. 그것은 Claude가 좋아진 것이 아니라 여러분의 브리프와 하네스가 좋아진 것입니다.