# 제작 프롬프트 — 2주차 · 진짜로 만들기 > 지난주에 **뭘 만들지**를 정했습니다. 오늘은 **그걸 진짜로 만듭니다.** > > 끝나면 **내 폰에 내가 만든 앱이 깔려 있고**, > 컴퓨터에서 누르면 **폰 화면이 따라 바뀝니다.** 📋 표시가 붙은 상자만 복사해서 붙여넣으세요. 지난주와 똑같습니다. ``` 붙여넣는 곳 → Claude Code 화면 맨 아래, 커서가 깜빡이는 입력칸 붙여넣기 → Ctrl + V (맥은 ⌘ + V) 보내기 → 엔터 ``` - 지난주 폴더를 **그대로** 씁니다. 새로 만들지 마세요. - **크롬**을 씁니다. 화면은 Claude가 띄워서 보여주고, **주소를 알려드리면 열어보시면** 됩니다. - 오늘은 기다리는 시간이 좀 있습니다. **설치가 도는 동안은 그냥 두세요.** - 중간에 빨간 글씨가 지나가도 놀라지 마세요. 대부분 그냥 지나갑니다. --- ## 시작하기 전에 · 오늘 쓸 파일 가져오기 오늘 쓸 파일 **두 개**를 받으셨을 겁니다. 아직 다운로드 폴더에 있습니다. **이 첫 상자는 강사 화면을 보고 따라 치세요.** (파일을 아직 못 열어봤을 테니까요) **지난주에 쓰던 폴더에서** Claude Code를 열고, 아래 상자를 붙여넣으세요. ### 📋 ``` 오늘 쓸 파일 두 개를 다운로드 받았어. 2주차-제작prompt.md 랑 2주차-지침서.md 야. 어디 있는지 찾아서 이 폴더로 가져와줘. 그리고 지침서 먼저 읽어줘. ``` > **탐색기를 열지 마세요. 파일을 끌어다 놓지 마세요.** > 어디에 있는지 찾는 것도, 옮기는 것도, 이름을 고치는 것도 **Claude가 합니다.** > > 오늘 내내 이렇습니다. **파일을 만들고 옮기고 고치는 건 전부 말로 시킵니다.** > 이게 지난주와 제일 크게 달라지는 점입니다. --- # 0부 · 설계 문서 완성하기 > **오늘 제일 중요한 건 화면이 아니라 설계 문서입니다.** > > 코드는 Claude가 씁니다. 여러분이 만드는 건 > **「이것만 있으면 누가 만들어도 똑같이 나오는 설계 문서」** 입니다. > 화면은 그 문서가 맞는지 확인하는 수단이에요. ## 10단계 · 설계 문서를 **이것만 보고 만들 수 있게** 채우기 지난주에 화면을 **골랐지만**, 설계 문서에는 "B를 골랐다" 까지만 적혀 있습니다. 무슨 칸이 있고, 누르면 뭐가 되고, 막히면 뭐라고 뜨는지가 없습니다. 그대로는 못 만듭니다. ### 📋 10-① 화면을 그림으로 ``` 지난주에 고른 화면들이 설계 문서에는 이름만 적혀 있는 것 같아. 지난주에 만든 시안을 다시 찾아보고, 화면마다 뭐가 들어있는지 설계 문서에 그림이랑 표로 옮겨줘. 시안을 다시 안 봐도 만들 수 있게. ``` > 시안이 파일로 없어도 괜찮습니다. **Claude가 찾아옵니다.** ### 📋 10-② 누르면 어떻게 되나 ``` 그림만으로는 누르면 어떻게 되는지 모르겠어. 오늘 만들 화면만, 버튼이나 칸을 누르면 무슨 일이 생기고 화면이 어떻게 바뀌는지 적어줘. 시안에 없어서 정해야 하는 건 나한테 간단하게 물어봐. ``` > **두어 가지만 물어봅니다.** 보기가 붙어 나옵니다. 모르겠으면 `모르겠어` — Claude가 무난한 쪽으로 적어둡니다. > 오늘 안 만드는 화면은 **그 화면 만들 때** 똑같이 합니다. ### 📋 10-③ 화면 말고 나머지 ``` 화면 말고도 만들려면 필요한 게 있을 거야. 색·글씨, 담을 것, 규칙, 넣어둘 데이터, 다 됐는지 확인하는 기준까지 채워줘. 내가 정해야 하는 것만 물어봐. ``` > **몇 가지 물어봅니다.** 보기가 붙어 나옵니다. 모르겠으면 `모르겠어` 도 됩니다. ### 📋 10-④ 완성 검사 ★ ``` 이 설계 문서 하나만 보고 다른 사람이 똑같이 만들 수 있는지 검사해줘. 막히는 데가 있으면 채우고, 내가 정할 건 물어봐. 끝나면 화면 하나만 예로 보여줘. ``` > Claude가 **설계 문서만 읽는 다른 Claude**를 불러 검사합니다. 1~2분 걸립니다. > 여기서 나온 구멍을 채우면 **도면이 완성**됩니다. --- # 1부 · 설계 문서 ↔ 화면 > **오늘은 한 번에 다 만들지 않습니다.** 그리고 **화면부터 고치지 않습니다.** > > ``` > 설계 문서에 적는다 → 화면이 따라간다 → 본다 > ↑ │ > └──── 마음에 안 들면 문서부터 ───────┘ > ``` > > 화면만 고치면, 다음에 설계 문서로 다시 만들었을 때 **고치기 전으로 돌아갑니다.** > 그리고 문서가 바뀔 때마다 맨 아래 **변경 이력**에 **무엇을 · 왜** 바꿨는지 한 줄씩 쌓입니다. Claude가 씁니다. > 그래서 언제나 **문서 먼저, 화면 나중**입니다. 오늘 이걸 네 바퀴 돌면서 몸에 익힙니다. ## 11단계 · 만들 자리 준비하기 ### 📋 11-① ``` 이제 진짜로 만들기 시작할게. 만들기 전에 뭘 정해야 하는지 물어봐 줘. 정하는 것까지만 하고, 만들지는 말고 기다려줘. ``` > 웹을 **무엇으로 만들지 물어봅니다.** 보기 세 개가 나오는데, 모르겠으면 그냥 `추천대로` 라고 하세요. > **이 상자는 고르는 것까지입니다.** 그다음 개발 환경(11-②), 그다음이 설치(11-③)예요. ### 📋 11-② 개발 환경 설정 ★ > **잠깐 — 이게 뭔가요?** > 프로그램을 만들려면 **재료를 받아오고 조립해주는 도구**가 내 PC에 있어야 합니다. > 워드 문서를 쓰려면 워드가 깔려 있어야 하는 것과 같아요. **PC가 알아서 해주지 않습니다.** > 그리고 윈도우는 그 도구를 **기본으로 막아둡니다.** 막힌 걸 풀어주는 것까지가 환경 설정이에요. > **이건 PC에 한 번만** 하면 됩니다 — 다음에 다른 걸 만들 때는 안 하셔도 돼요. ``` 개발 환경부터 맞춰줘. Node 있는지, npm 도는지 확인하고 없으면 깔아줘. 윈도우면 실행 정책도 풀어줘. 맥이면 맥에 맞게 해줘. 다 되면 뭐가 됐는지 한 줄로 알려줘. ``` > 중간에 **「이 명령을 실행할까요」** 하고 물어보는 창이 뜹니다. **허용**을 눌러주세요. > 오늘 처음으로 Claude가 **PC 설정을 바꾸는** 참이라 물어보는 거예요. > > 나중에 혼자 만들다가 **`npm ... cannot be loaded`** 라는 빨간 글씨를 보시면, > **이 단계를 안 한 겁니다.** 그때 이 상자를 그대로 쓰시면 됩니다. ### 📋 11-③ 자리 만들기 · 빈 화면 보기 ``` 이제 만들 자리 만들어줘. 웹이랑 앱 폴더. 다 되면 빈 화면 띄워서 보여줘. ``` > 여기서 **설치가 돕니다. 5분쯤 걸려요.** > 글씨가 주르륵 올라가는데 정상입니다. **아무것도 누르지 마세요.** > > 끝나면 브라우저에 **까만 바탕에 「Next.js」** 글자가 뜹니다. 원래 들어 있는 기본 화면이에요. > 저절로 안 열리면 주소창에 `localhost:3000` 을 쳐주세요 — **주소는 Claude가 알려줍니다.** > 보이면 `보여` 라고만 알려주세요. ### 📋 11-④ 크롬 붙이기 — **Claude가 직접 눌러 보여주게** > 지금 창에서는 Claude가 **화면을 띄워줄 수는 있어도 대신 눌러줄 수는** 없습니다. > 눌러주는 게 되면 훨씬 편해요 — 검색도, 버튼도 Claude가 쳐보고 보여줍니다. > **검은 창을 하나 띄워서** 거기서 이어갑니다. 터미널을 아실 필요 없습니다. Claude가 다 합니다. ``` 크롬을 네가 직접 눌러서 보여줄 수 있게, 터미널 창 띄워줘. 거기서 내가 뭘 하면 되는지도 알려줘. ``` > 검은 창이 뜨면 거기에 **`/chrome`** 이라고 치고, Claude가 주는 문장을 **붙여넣기** 하세요. > **12단계부터는 그 검은 창에서 합니다.** 지금 이 창은 그대로 두세요 — 웹이 거기서 돌고 있습니다. > > **왜 굳이 옮기나** — 12단계는 바퀴마다 **「진짜 되나」 시험**으로 닫습니다. > 시험은 **눌러봐야** 되는데, 지금 창에서는 Claude가 못 누릅니다. > (두 번 해서 안 되면 그냥 진행하셔도 됩니다. 그때는 Claude가 **뭘 눌러보면 되는지** 알려줍니다.) --- ## 12단계 · 웹 첫 화면 — **설계 문서 ↔ 화면, 네 바퀴** ★★ 지난주에 고른 첫 번째 화면을 **네 바퀴**에 걸쳐 완성합니다. 바퀴마다 상자가 세 개 — **ⓐ 설계 문서가 먼저 바뀌고, ⓑ 화면이 따라가고, ⓒ 진짜 되는지 시험합니다.** ``` 1바퀴 만들기 문서 확인 → 화면 만들기 → 시험 2바퀴 기능 붙이기 문서에 적기 → 화면에 붙이기 → 시험 3바퀴 없던 기능 문서에 그리기 → 화면에 만들기 → 시험 4바퀴 마음에 안 드는 곳 문서 고치기 → 화면 고치기 → 시험 ``` > 화면은 **Claude가 띄워서** 보여줍니다. **눌러봐야 아는 건 뭘 눌러보면 되는지 알려줍니다** — 한 번씩만 눌러보시면 됩니다. ### 1바퀴 · 만들기 #### 📋 12-1ⓐ 문서 확인 ``` 첫 번째 화면 만들기 전에, 설계 문서에 그 화면이 어떻게 적혀 있는지 보여줘. ``` #### 📋 12-1ⓑ 화면 만들기 ``` 설계 문서대로 첫 화면 만들어줘. 한 번에 다 말고 제일 큰 덩어리만. 설계 문서에 적은 가짜 데이터로 채워서 화면 띄워 보여줘. ``` > **문서에 그린 그림과 화면을 비교해 보세요.** 같게 나왔으면 문서가 잘 된 겁니다. ### 2바퀴 · 기능 붙이기 — 검색 #### 📋 12-1ⓒ 시험 ``` 설계 문서 9장에 적은 확인 기준대로 이 화면을 시험해줘. 크롬에서 직접 눌러서 해줘. 못 누르면 터미널 창부터 띄우고. 입력한 것, 나온 결과, 9장 몇 번인지 표로 보여줘. ``` > **ⓒ 는 「만들었다」 를 「진짜 된다」 로 바꾸는 자리입니다.** > 설계 문서 9장(확인 기준)에 적은 것을 그대로 쳐보고, **입력한 것 · 결과 · 9장 번호**를 표로 남깁니다. > **Claude가 크롬에서 직접 칩니다.** 못 누르는 창이면 **터미널 창부터 띄웁니다** (11-④). > 그것도 안 되면 **뭘 쳐보면 되는지 알려줍니다** — 한 번씩만 쳐보시고 `맞아` / `이상해` 만 답하세요. > **코드로 대신 돌려 보는 건 시험이 아닙니다.** 화면에서 나온 것만 표에 적습니다. #### 📋 12-2ⓐ 문서에 적기 ``` 이 화면에 이름으로 찾는 검색을 붙이고 싶어. 화면 말고 설계 문서에 먼저 적어줘. 무엇으로 찾는지, 못 찾으면 뭐라고 뜨는지. 변경 이력에도 남겨줘. 모르는 건 나한테 물어봐. ``` > **아직 화면은 안 바뀝니다.** 문서만 바뀝니다. 그게 맞습니다. #### 📋 12-2ⓑ 화면에 붙이기 ``` 설계 문서에 적은 대로 검색 붙여줘. 되는지 보여주고, 내가 뭘 쳐보면 되는지도 알려줘. ``` #### 📋 12-2ⓒ 시험 ``` 검색을 9장 기준대로 크롬에서 직접 쳐서 시험해줘. 없는 값이랑 뒷자리 일부도 쳐봐. 결과를 표로 보여주고, 어긋난 게 있으면 고치고 다시 시험해줘. ``` > **없는 값 · 부분 일치를 꼭 넣습니다.** 여기서 버그가 나옵니다 — > 번호 뒷자리로 찾았는데 **엉뚱한 사람까지 딸려 나오는** 식이에요. ### 3바퀴 · 없던 기능 — 누르면 자세히 #### 📋 12-3ⓐ 문서에 그리기 ``` 명단에서 이름을 누르면 그 사람 정보를 보고 싶어. 설계 문서에 없는 기능이지? 먼저 문서에 그림이랑 표로 그리고, 변경 이력에도 남겨줘. ``` > **처음 생각난 기능은 늘 설계 문서에 없습니다.** 그래서 문서부터 그립니다. > 「안 만드는 것」에 걸리면 Claude가 알려줍니다. 그래도 넣을지는 여러분이 정합니다. #### 📋 12-3ⓑ 화면에 만들기 ``` 그린 대로 만들어줘. 되는지 보여주고, 내가 뭘 눌러보면 되는지 알려줘. ``` #### 📋 12-3ⓒ 시험 ``` 누르면 자세히 뜨는 걸 9장 기준대로 크롬에서 직접 눌러서 시험해줘. 닫기랑 비었을 때도 같이 봐줘. 표로 보여줘. ``` ### 4바퀴 · 마음에 안 드는 곳 고치기 ★ #### 📋 12-4ⓐ 문서 고치기 ``` (화면을 보시고 — 마음에 안 드는 걸 말로) 이름 칸이 좁고, 위쪽 숫자가 너무 작아. 화면 말고 설계 문서부터 고쳐줘. 왜 바꾸는지 변경 이력에도 남겨줘. ``` > 고칠 게 없으면 `그대로 가자` 도 좋은 답입니다. #### 📋 12-4ⓑ 화면 고치기 ``` 고친 문서대로 화면 고쳐줘. ``` #### 📋 12-4ⓒ 시험 — **이 화면 마무리** ``` 설계 문서 9장 확인 기준을 처음부터 끝까지 크롬에서 다시 시험해줘. 표로 보여주고, 다 맞으면 9장에 체크 남겨줘. ``` > 여기까지 오면 **첫 화면은 끝**입니다. 9장에 ✓ 가 찍힌 만큼이 「다 만들었다」의 근거예요. > **이 두 상자가 앞으로 제일 많이 하실 일입니다.** > 마음에 안 들면 → **문서 먼저** → 화면. 다음 주에도, 혼자 하실 때도 똑같습니다. --- ## 13단계 · 웹 둘째 화면 첫 화면과 같은 순서입니다. 이번엔 **문서가 이미 채워져 있으니** 바로 만듭니다. ### 📋 13-① 틀 ``` 설계 문서 순서대로 다음 화면 만들자. 한 번에 다 말고 틀만. 화면으로 보여줘. ``` ### 📋 13-② 눌러지게 ``` 설계 문서대로 빈 칸을 누르면 만들어지게 해줘. 되는지 보여줘. ``` > 지금은 누르면 생기지만 **새로고침하면 사라집니다.** 정상입니다. 저장할 곳을 아직 안 만들었거든요. > 마음에 안 드는 데가 있으면 4바퀴처럼 — `설계 문서부터 고치고, 화면도 고쳐줘.` ### 📋 13-③ 웹 점검 — **앱으로 넘어가기 전에** ``` 앱 만들기 전에 웹 두 화면을 설계 문서의 확인 기준으로 점검해줘. 설계 문서랑 화면이 다른 데 있으면 알려줘. ``` > 다른 데가 있으면 **어느 쪽이 맞는지** 물어봅니다. 화면이 맞으면 문서를, 문서가 맞으면 화면을 고칩니다. > **여기서 웹을 끝냅니다.** 앱이 잘 안 풀리더라도 오늘 만든 게 남습니다. ## 13단계 계속 · **간판 시안 고르기** — 앱 만들기 전에 ★ 앱 첫 화면 맨 위 **간판**은 지난주 시안에 없었습니다. 색칠만 해뒀죠. **없는 화면을 바로 만들지 않습니다.** 지난주에 하신 순서 그대로 갑니다 — **시안을 보고 · 고르고 · 문서에 그리고 · 그다음에 만든다.** ### 📋 13-④ 시안 만들기 ``` 앱 첫 화면 맨 위에 들어갈 간판, 지난주 시안에 없었잖아. 만들기 전에 시안부터 보고 고를게. 몇 가지 만들어서 보여줘. ``` > **사진을 물어봅니다.** 쓰실 사진이 있으면 **이 대화창에 그냥 끌어다 놓으세요.** > 없으셔도 됩니다. 색으로 채운 걸로 보여줍니다. ### 📋 13-⑤ 고르기 ``` (화면을 위에서 아래로 다 보시고, 돌아와서) B로 할게. ``` > `B인데 글씨가 좀 작아` 처럼 **말로 하셔도** 됩니다. > 모르겠으면 `모르겠어` 라고 하셔도 됩니다. ### 📋 13-⑥ 문서에 그리기 ``` 고른 거 설계 문서에 그림이랑 표로 적어줘. 안 고른 것도 왜 안 골랐는지 같이. ``` > **아직 안 만듭니다. 도면만 그린 거예요.** 만드는 건 앱 화면 만들 때 같이 합니다. --- ## 14단계 · 앱을 내 폰에 띄우기 ★ 오늘의 고비입니다. **여기만 넘으면 됩니다.** ### 📋 14-① 준비 확인 ``` 이제 앱 차례야. 시작하기 전에 내가 폰에서 뭘 준비해야 하는지 알려줘. ``` > 폰에 앱 하나를 깝니다. **폰과 컴퓨터가 같은 와이파이**에 있어야 합니다. ### 📋 14-② 띄우기 ``` 준비 다 했어. 폰에 띄워줘. 띄우기 전에 내 가게 이름 한 줄만 넣어줘. 빈 화면 말고. ``` > 처음엔 **10초쯤 하얀 화면**이 보입니다. 정상입니다. > 그다음 **내 가게 이름**이 폰에 뜹니다. 화면은 다음 단계에서 만들어요 — 지금은 **떴다는 게** 중요합니다. ### 📋 14-③ 따라 바뀌는지 보기 ``` 폰에 떴어. 그 이름 글씨 크기나 색 바꿔봐. 폰이 따라 바뀌는지 볼게. ``` > **컴퓨터에서 바꾸면 폰이 바로 바뀝니다.** 내 가게 이름이 눈앞에서 바뀌는 걸 보세요. --- ## 15단계 · 앱 화면 — 문서대로 하나씩 ### 📋 15-① 아래 탭부터 ``` 앱 화면 만들자. 설계 문서대로 맨 아래 탭만 먼저 만들어줘. 안은 비어 있어도 돼. ``` ### 📋 15-② 위쪽부터 ``` 설계 문서에 그린 화면에서 제일 위에 있는 것부터 만들어줘. ``` ### 📋 15-③ 목록 붙이기 ``` 그 아래 목록 붙여줘. 설계 문서에 적은 가짜 데이터로. ``` ### 📋 15-④ 신청 버튼 ``` 신청 버튼 붙여줘. 설계 문서 규칙대로 — 자리가 다 찼으면 누르기 전에 막히게. ``` > 아직 저장은 안 됩니다. 모양만요. ### 📋 15-⑤ 간판 만들기 ``` 아까 설계 문서에 그려둔 간판대로 만들어줘. ``` > 아까 **도면만 그려둔 것**을 이제 진짜로 만듭니다. ### 📋 15-⑥ 폰에서 점검 ``` 폰에서 볼게. 설계 문서 확인 기준대로 점검해주고, 글씨가 잘 읽히는지도 봐줘. ``` > **폰 맨 위에 간판이 생깁니다.** 지난주엔 색면이던 자리예요. > 마음에 안 들면 웹과 똑같이 — `설계 문서부터 고치고, 화면도 고쳐줘.` --- # 2부 · Claude가 알려주는 쪽으로 여기서 **길이 갈립니다.** 남은 시간에 따라 Claude가 정해서 알려줍니다. 아래 상자를 먼저 붙여넣으세요. ### 📋 16-⓪ ``` 여기까지 됐어. 다음은 뭐 할 차례야? ``` > Claude가 **「저장되게 만들기」** 라고 하면 → **A** 로 가세요. > **「화면 더 만들기」** 라고 하면 → **B** 로 가세요. > **둘 다 하지 않습니다.** --- # A · 저장되게 만들기 여기까지는 **가짜 데이터**로 만들었습니다. 웹과 앱이 서로 모릅니다. 이제 둘을 **같은 곳에 연결**합니다. ## 16단계 · 데이터 둘 곳 만들기 ### 📋 16-① ``` 지금은 웹이랑 앱이 각자 가짜 데이터를 들고 있는 것 같아. 둘이 같은 데이터를 보게 하고 싶어. 어떻게 하면 되는지 알려줘. ``` ### 📋 16-② ``` 가입할게. 뭘 눌러야 하는지 하나씩 알려줘. 한 번에 하나씩만. ``` > **10분쯤** 걸립니다. 비밀번호를 하나 정하게 되는데 **어딘가 적어두세요.** > 지역은 **서울**로 고르셔야 합니다. 이건 나중에 못 바꿉니다. ### 📋 16-③ ``` 가입 끝났어. 이제 뭘 복사해서 주면 돼? ``` --- ## 17단계 · 담을 칸 만들기 ### 📋 17-① ``` 설계 문서의 담을 것대로 데이터 담을 자리를 만들어줘. 내가 뭘 복사해서 어디에 붙여야 하는지 알려줘. ``` ### 📋 17-② ``` 했어. 다음 거 줘. ``` > 붙여넣을 게 **두 번** 옵니다. 칸 만드는 것 하나, 데이터 넣는 것 하나. ### 📋 17-③ ``` 들어갔는지 보여줘. ``` --- ## 18단계 · 웹을 연결하기 ### 📋 18-① ``` 웹을 방금 만든 곳에 연결해줘. 가짜 데이터 말고 진짜를 보게. ``` ### 📋 18-② 진짜인지 확인 ``` 화면이 똑같아 보이는데 진짜 바뀐 거 맞아? 어떻게 확인해? ``` > **새로고침(F5)** 해보세요. 아까는 사라지던 게 이제 안 사라집니다. --- ## 19단계 · 앱을 연결하기 — 오늘의 결승선 ★★ ### 📋 19-① ``` 앱도 연결해줘. ``` ### 📋 19-② 웹 → 앱 ``` 웹에서 하나 만들어볼게. 폰에 뜨는지 같이 확인하자. ``` ### 📋 19-③ 앱 → 웹 ``` 이번엔 반대로 폰에서 신청해볼게. 웹에 뜨는지 보자. ``` > **컴퓨터에서 누르면 폰에 뜨고, 폰에서 누르면 컴퓨터에 뜹니다.** > 이게 오늘의 목표였습니다. --- --- # B · 화면 더 만들기 > A로 가신 분은 여기를 건너뛰고 **20단계**로 가세요. ## 16단계 · 화면 하나 더 ### 📋 16-① ``` 설계 문서 순서에서 다음 거 만들자. 문서에 빠진 게 있으면 문서부터 채우고, 화면은 큰 덩어리부터. ``` ### 📋 16-② ``` 다음 기능 하나 붙여줘. 화면으로 보여줘. ``` > 이 상자를 **몇 번 반복**하게 됩니다. 조금씩 쌓이는 게 보이실 거예요. > 마음에 안 들면 — `설계 문서부터 고치고, 화면도 고쳐줘.` ## 17단계 · 오늘 만든 것 훑어보기 ### 📋 17-① ``` 오늘 만든 거 쭉 보여줘. 웹부터 보고 폰도 볼게. ``` > **지금 만든 건 새로고침하면 사라집니다.** 고장 난 게 아니에요. > 저장할 곳을 다음 주에 만듭니다. **화면은 그대로 남아 있습니다.** --- # 마무리 (A·B 둘 다) ## 20단계 · 설계 문서 고쳐 쓰기 — 2주차 마지막 ### 📋 20-① ``` 오늘 만들면서 지난주에 정한 거랑 달라진 게 있을 것 같아. 설계 문서 다시 봐주고, 달라진 거랑 이번에 새로 정해진 걸 반영해줘. 뭐가 왜 바뀌었는지도 남겨줘. ``` ### 📋 20-② 완성 검사 ★ > 검사 전에 **변경 이력**을 한번 보세요. 오늘 문서가 어떻게 자라왔는지가 한 줄씩 남아 있습니다. ``` 오늘 만든 웹이랑 앱을, 이 설계 문서 하나만 보고 똑같이 다시 만들 수 있는지 검사해줘. 빠진 게 있으면 채워줘. ``` > 오늘 **문서 먼저** 고쳐 왔다면 빠진 게 거의 없어야 합니다. 그게 오늘 배운 것의 증거입니다. ### 📋 20-③ ``` 오늘 뭐 만들었는지 정리해서 보여줘. 다음 주에 뭐 하는지도. ``` > 여기까지가 **2주차**입니다. 다음 주에 이걸 **인터넷에 올립니다.** --- ## 막혔을 때 그대로 치시면 됩니다. | 이런 일이 생기면 | 이렇게 치세요 | |---|---| | 뭘 기다리는지 모르겠다 | `지금 뭐 하는 중이야? 얼마나 걸려?` | | 빨간 글씨가 잔뜩 나왔다 | `빨간 글씨 나왔어` (그대로 복사해서 붙여도 됩니다) | | 화면이 안 뜬다 | `화면이 안 떠` | | 폰에 앱이 안 뜬다 | `폰에 안 떠` | | 폰에서 열었는데 하얗다 | `폰이 하얀 화면이야` | | 어디를 눌러야 할지 모르겠다 | `어디를 눌러야 되는지 그림으로 알려줘` | | 아까로 돌아가고 싶다 | `방금 건 취소하고 다시 하자` | | 화면이 설계 문서랑 다르다 | `설계 문서랑 다른데 문서대로 해줘` | | 마음에 안 든다 | `○○가 마음에 안 들어. 설계 문서부터 고치고, 화면도 고쳐줘.` | | 화면이 안 뜬다 | `화면이 안 떠` | | 너무 빨리 지나갔다 | `방금 뭐 한 거야? 쉽게 설명해줘` | | 답이 너무 길다 | `짧게` | | 간판 사진을 바꾸고 싶다 | `간판 사진 바꿔줘` (새 사진을 끌어다 놓으면서) | | 폰에서 글씨가 안 읽힌다 | `폰에서 글씨가 안 보여` | > 여기 없는 문제는 **그냥 물어보세요.** `이거 왜 이래?` 도 충분한 질문입니다. ---