목차
  1. 00이 책은 무엇을 약속하는가
  2. 01설치, 한 시간이면 끝난다
  3. 02첫 대화, 그리고 권한 창
  4. 03AI에도 종류가 있다
  5. 04챗봇과 무엇이 다른가
  6. 05작업 공간 만들기, CLAUDE.md와 Skill 🔒
  7. 06지도, 왜 코드보다 설계가 먼저인가 🔒
  8. 07무엇을 만들고, 무엇을 안 만들까 🔒
  9. 08모으고, 견주고, 갈림길을 고른다 🔒
  10. 09PRD, 설계 문서로 굳히기 🔒
  11. 10화면 시안 고르기, 웹 넷 앱 넷 🔒
  12. 11PRD 고쳐 쓰기, 왜 바뀌었는지 남긴다 🔒
  13. 12지도, 오늘 진짜로 만드는 것은 설계 문서 🔒
  14. 13설계 문서 완성하기, 이것만 보고 만들 수 있게 🔒
  15. 14만들 자리, 개발 환경과 빈 화면 🔒
  16. 15웹 첫 화면, 네 바퀴 — 문서 먼저 화면 나중 🔒
  17. 16웹 둘째 화면과 간판 시안 🔒
  18. 17앱을 내 폰에 띄우기 🔒
  19. 18앱 화면과 간판, 문서대로 하나씩 🔒
  20. 19갈림길, 저장되게 만들기 또는 화면 더 🔒
  21. 20GitHub 가입, 열쇠부터 만든다
  22. 21Supabase, 데이터를 둘 창고 만들기
  23. 22웹과 앱을 창고에 잇기 🔒
  24. 23설계 문서 고쳐 쓰기, 누가 만들어도 똑같이 🔒
  25. 24올리기 전에, Vercel 가입
  26. 25인터넷에 올리기, GitHub 창고와 Vercel 주소 🔒
  27. 26빠진 것 마저 만들기, 한 바퀴에 하나씩 🔒
  28. 27메뉴 더하기, 문서에 없던 것을 넣는 순서 🔒
  29. 28앱 회원 로그인, 이메일로 받은 코드 🔒
  30. 29구글 플레이에 올리기, 비공개 테스트까지 🔒

Claude Code 권한 창 · 웹 · 앱 만들기용

0부 — 준비 · 02장 · 약 9분

첫 대화, 그리고 권한 창

Claude Code 권한 창을 처음 만나는 장. 작업 폴더를 열고 첫 마디를 건네고, 권한 창 읽는 법과 쓰기 · 실행 · 되돌리기까지 직접 해 본다.

만들고, 올린다 — Claude로 웹 · 앱을 만들어 올리는 책30장 중 02장 · 공개 8장은 무료로 읽어요 · 가이드북 전체 보기

2.1 Claude는 폴더 하나를 본다

1장 마지막에 폴더를 하나 열고 “이 폴더 뭐 있어?” 라고 물었습니다. 그게 우연이 아닙니다. Claude Code는 반드시 폴더 하나를 열어놓고 시작합니다.

📖 작업 폴더(working directory)

Claude가 들여다볼 수 있는 범위. VS Code에서 연 그 폴더 하나와, 그 안의 하위 폴더들이 전부입니다.

회사로 치면 배정받은 책상입니다. 그 책상 위 서류는 마음대로 보지만, 옆 팀 책상은 못 봅니다.

초보자가 가장 자주 겪는 두 가지 증상이 전부 여기서 나옵니다.

증상진짜 원인
“그 파일 없다는데요?”그 파일이 작업 폴더 밖에 있습니다
“엉뚱한 파일을 고쳤어요”폴더를 너무 넓게 열었습니다

그래서 규칙이 하나 생깁니다.

만들 것 하나에 폴더 하나.

바탕화면 전체나 C:\ 전체를 열지 마세요. 범위가 넓으면 Claude가 헤매고, 엉뚱한 걸 건드립니다.

2기 1단계가 새 폴더를 작업 공간으로 꾸미는 일로 시작하는 이유가 이것입니다. 폴더를 열어주는 것이 곧 “여기서 일해라” 라는 뜻이기 때문입니다.


2.2 첫 마디는 인사부터

상자를 붙여넣는 수업

2기 강의는 여러분이 문장을 지어내게 하지 않습니다. 준비된 상자를 복사해서 붙여넣게 합니다. 강의 자료 제작prompt.md 에 📋 표시가 붙은 상자들이 있고, 그걸 순서대로 붙여넣으며 진행합니다.

📖 프롬프트(prompt)

AI에게 보내는 요청 글. 입력창에 치는 문장 하나하나가 전부 프롬프트입니다. 강의 자료 이름의 setup-prompt, 제작prompt 가 “미리 써둔 요청 글” 이라는 뜻입니다.

붙여넣는 법은 이렇습니다.

붙여넣는 곳은 Claude Code 화면 맨 아래 입력칸, 붙여넣기는 Ctrl + V(맥은 ⌘ + V), 보내기는 엔터붙여넣고 보내기

0단계 — 말이 통하는지 확인하기

1단계 첫 상자는 인사입니다.

아래 문장을 Claude에 입력하세요.

안녕? 나 오늘 처음 왔어.
이 폴더에 지침서.md 가 있을 거야. 그거 먼저 읽고,
내가 지금 어떤 폴더에 있는지 알려주면서 한 줄로 인사해줘.

Claude가 폴더 이름을 한 줄로 알려주고, 짧게 인사하고, 다음 상자를 붙여넣으라고 안내하면 성공입니다. 30초면 끝납니다.

그런데 이 짧은 상자 안에 Claude에게 파일을 읽으라는 요청이 들어 있습니다. 지침서.md 먼저 읽고. 그래서 여기서 화면에 창이 하나 뜹니다. 잠깐 멈추고 2.4절로 갑니다.

💡 왜 직접 쓰지 않고 상자를 붙여넣나

지침서.md 는 수강생이 읽는 문서가 아닙니다. Claude가 읽고 따르는 진행 규칙입니다. 질문 문구, 보기, 답변별 처리, 저장 위치가 전부 거기 정해져 있습니다.

목적은 하나 — 수강생이 어떤 답을 하든 강사 화면과 같은 결과가 나오게. 여덟 명이 각자 다르게 물으면 여덟 개의 다른 대화가 됩니다. 두 시간 안에 같이 끝까지 가려면, 요청 글을 맞춰 두는 게 제일 확실합니다.


2.3 Claude가 하는 일은 세 가지뿐이다

앞으로 뭘 시키든, Claude가 실제로 하는 동작은 세 가지 중 하나입니다.

   ① 읽기 (read)    파일을 열어 내용을 본다
   ② 쓰기 (write)   파일을 만들거나 고친다
   ③ 실행 (run)     프로그램을 돌린다

2기 4주 동안 할 일을 이 셋으로 뜯어보면 이렇습니다.

할 일뜯어보면
지침서를 따라 진행하기읽기
정한 것을 브레인스토밍.md 로 정리쓰기
화면 시안을 만들어 브라우저로 열기쓰기 → 실행
2단계에서 앱을 내 폰에 띄우기쓰기 → 실행

“웹사이트 만들어줘” 도, “앱 만들어줘” 도, 뜯어보면 이 셋의 조합입니다.


2.4 그 창의 이름은 권한 창이다

왜 뜨는가

이유는 아주 단순합니다.

Claude가 지금 내 컴퓨터의 파일을 건드리려 하기 때문입니다.

ChatGPT나 웹 Claude에는 이 창이 없습니다. 건드릴 파일이 없으니까요. 글자만 주고받습니다. 그런데 Claude Code는 진짜로 내 파일을 엽니다. 그러니 묻고 시작합니다.

📖 권한 창 / 권한 모드(permission mode)

Claude가 파일을 읽거나·쓰거나·실행하기 직전에 멈춰서 허락을 구하는 장치. 무엇을 하려는지 보여주고, 사용자가 허용(Allow) 또는 거부(Deny) 를 고릅니다.

어디까지 묻고 어디부터 자동으로 넘어갈지를 정해둔 설정을 권한 모드라고 부릅니다.

무엇을 보고 눌러야 하나

창에서 볼 것은 두 가지입니다.

볼 것확인할 내용
동작읽기인가, 쓰기인가, 실행인가
대상어느 파일인가

읽기는 마음 편히 허용해도 됩니다. 파일이 바뀌지 않으니까요. 주의해야 할 건 쓰기와 실행입니다.

⚠️ 파일 이름을 꼭 보세요

내가 방금 만들라고 한 파일인가요? 아니면 이미 있던 파일을 덮어쓰려는 건가요? 원본을 날리는 사고는 거의 전부 여기서 납니다. 이름만 한 번 읽으면 막을 수 있습니다.

왜 이렇게 귀찮게 만들었나

처음에는 짜증납니다. 몇 번이고 계속 물으니까요. 그런데 이게 불편이 아니라 실수 방지 장치입니다.

AI는 틀립니다(3장). 그 틀림이 내 파일에 그대로 반영되기 전에 사람이 한 번 끼어드는 자리가 권한 창입니다.

권한 모드는 네 가지다

얼마나 자주 물을지는 입력칸 오른쪽 아래 버튼에서 고릅니다. 누르면 목록이 뜨고, Shift + Tab 을 누를 때마다 차례로 바뀝니다.

그림 2-1: 권한 모드 고르기. ① 입력칸 오른쪽 아래의 모드 버튼(지금은 Auto) ② 네 가지 모드 — Manual · Edit automatically · Plan · Auto ③ Shift+Tab 으로도 바꿀 수 있다는 안내

모드쉽게 말하면
Manual고치기 전마다 매번 묻는다. 처음 연습할 때
Edit automatically파일 고치기는 묻지 않는다
Plan둘러본 뒤 손대기 전에 “이렇게 하겠다” 계획부터
Auto안전해 보이는 건 알아서, 위험할 때만 멈추고 묻는다

⚠️ 권한 창이 안 뜨는데요?

요즘 Claude Code는 Auto 가 기본으로 켜져 있을 수 있습니다. 그러면 읽기처럼 위험하지 않은 동작은 창 없이 바로 지나갑니다. 고장이 아닙니다.

이 장에서 권한 창을 직접 보고 누르는 연습을 하려면 모드를 Manual 로 바꾸세요. 익숙해진 뒤에 Auto로 돌아가면 됩니다.

지금은 Manual로 두고, 다 읽고 누르는 연습을 하세요.

자, 0단계 인사에서 뜬 창을 보세요. 동작은 읽기, 대상은 지침서.md 일 겁니다. 허용을 누르세요.

그림 2-2: 권한 창. ① 무엇에 대한 허락인지 — 여기서는 「이 bash 명령을 허용할까요?」, 곧 실행입니다 ② 정확히 무엇을 하려는지 — 명령 내용과 한 줄 설명(설정 파일을 확인한다) ③ 1 Yes · 2 No


2.5 쓰기와 실행 — 파일 하나 만들어 열어보기

이번엔 Claude에게 파일을 만들고, 열라고 시켜 봅니다. 연습이라 결과물은 버려도 됩니다.

아래 문장을 Claude에 입력하세요.

이 폴더에 hello.html 이라는 파일을 만들어줘.
화면 가운데에 '안녕하세요' 라고 크게 나오는 페이지면 돼.

권한 창이 또 뜹니다. 이번엔 쓰기입니다. 만들려는 파일 이름이 hello.html 로 적혀 있는지 보고 허용하세요.

허용하면 VS Code 왼쪽 파일 목록에 hello.html 이 새로 생깁니다.

잠깐 이 장면을 보세요. 방금 AI가 내 컴퓨터에 파일을 만들었습니다. 웹 챗봇이라면 “아래 코드를 복사해서 hello.html 로 저장하세요” 라고 했을 자리입니다. 복사도, 붙여넣기도, 저장도 없었습니다.

이어서 칩니다.

아래 문장을 Claude에 입력하세요.

방금 만든 hello.html 을 브라우저로 열어줘

권한 창이 세 번째로 뜹니다. 실행입니다. 허용하면 브라우저에 “안녕하세요” 가 뜹니다.

그림 2-3: 쓰기와 실행. ① 쓰기 — 작업 폴더에 hello.html 이 새로 생긴다 ② 실행 — "브라우저로 열어줘" 한마디에 그 파일이 브라우저에 열려 「안녕하세요」 가 뜬다. 복사도 붙여넣기도 저장도 없었다

이게 화면 시안 만들기의 축소판입니다. 시안을 만들 때 Claude는 화면 시안을 만들어 아티팩트라는 링크로 띄우고, 그게 안 되면 HTML 파일로 만들어 브라우저로 열어 줍니다. 방금 한 일과 같습니다. 크기만 다릅니다.


2.6 되돌리기 — 알아야 과감하게 시킨다

왜 지금 배우나

초보자가 Claude에게 과감하게 못 시키는 이유는 대부분 하나입니다. “망가지면 어떡하지.”

💡 되돌릴 수 있다는 걸 알아야 과감하게 시킨다

되돌리는 법을 모르면 요청이 소심해집니다. “조금만 바꿔줘” 만 반복하다 시간이 갑니다. 되돌릴 줄 알면 “완전히 다르게 해봐” 가 가능해집니다. 마음에 안 들면 돌아오면 되니까요.

2기 강의 소개에 “망쳤을 때 되돌리는 법” 이 들어 있는 이유입니다.

말로 되돌리기

제일 간단합니다. 바로 다음 요청에서 이렇게 말하세요.

아래 문장을 Claude에 입력하세요.

방금 건 취소하고 다시 하자

Claude는 방금 뭘 바꿨는지 기억하고 있습니다. 다만 오래 지나면 안 됩니다. 스무 번쯤 주고받은 뒤에 “처음 거로 돌려줘” 하면 잘 안 됩니다. 왜 그런지는 3장 「AI가 기억하는 양에는 끝이 있다」 에서 봅니다. 규칙은 하나 — 되돌리려면 바로 다음에.

VS Code로 되돌리기

Claude가 파일을 고친 직후라면, 그 파일을 열어두고 Ctrl + Z(Mac: Cmd + Z)가 먹힙니다.

진짜 안전장치 — 사본 떠두기

가장 확실한 방법은 촌스럽지만 이겁니다. 마음에 드는 상태가 나오면, 그때 사본을 하나 떠두세요.

아래 문장을 Claude에 입력하세요.

지금 hello.html 을 hello_백업1.html 로 복사해줘

이 일을 프로그램이 자동으로, 매번 해주는 것이 Git(깃)입니다. 3단계에서 만든 것을 인터넷에 올릴 때 같이 만납니다. 그때까지는 손으로 합니다.


2.7 막혔을 때 — 그대로 치세요

1단계 자료 제작prompt.md 맨 끝에 있는 표입니다. 2기 1단계에서 실제로 쓰는 문장들입니다.

이런 일이 생기면이렇게 치세요
질문을 한꺼번에 여러 개 한다한 번에 하나씩만 물어봐
답이 너무 길어서 못 읽겠다짧게
자꾸 코드를 짜려고 한다아직 코드 쓰지 마
무슨 말인지 모르겠다그게 무슨 뜻이야? 쉽게 설명해줘
뭘 해야 할지 모르겠다내가 지금 뭘 하면 돼?
되돌리고 싶다방금 건 취소하고 다시 하자
시안이 두 개 다 마음에 든다둘 다 좋은데 합칠 수 있어?
시안이 다 별로다셋 다 별로야. 다시 만들어줘

그리고 하나 더.

  • 오타 나도 괜찮습니다. 말하듯이 쓰시면 알아듣습니다
  • 모르면 모르겠어 라고 답해도 됩니다
  • 잘못 말해도 안 망가집니다. 다시 말하면 고쳐 줍니다

표에 없는 문제는 그냥 물어보세요. 이거 왜 이래? 도 충분한 질문입니다.


2.8 안 될 때

메시지를 보냈는데 아무 반응이 없다

  1. 패널에 입력칸이 보이나요? 로그인 방식을 고르는 화면이 떠 있으면 로그인이 풀린 겁니다 → Claude.ai Subscription 으로 다시 로그인
  2. 인터넷 연결을 확인하세요
  3. VS Code를 껐다 켜세요. 정말로 이걸로 자주 해결됩니다

“지침서.md 가 없다” 고 한다

2.1절입니다. 지침서.md 가 작업 폴더 밖에 있습니다. 강의 자료 압축을 푼 파일들이 지금 연 폴더 안에 있는지 보세요. 제작prompt.md 와 지침서.md 는 같은 폴더에 둡니다.

권한 창에서 실수로 거부를 눌렀다

아무 일도 안 일어납니다. 그냥 다시 시키면 됩니다. 거부는 되돌릴 수 없는 사고가 아닙니다. 오히려 애매하면 거부하는 게 맞습니다.

인사만 하라고 했는데 자꾸 뭘 만들자고 한다

지침서.md 를 안 읽었을 가능성이 큽니다. 지침서.md 먼저 읽고 0단계만 해줘 라고 다시 치세요. 그래도 앞서가면 내가 다음 상자 붙여넣을 때까지 기다려 라고 하세요.


2.9 정리

오늘 한 일은 세 줄입니다.

  • 파일을 읽게 했다 — 지침서.md
  • 파일을 쓰게 했다 — hello.html
  • 실행하게 했다 — 브라우저로 열기

그때마다 권한 창이 떴고, 이제 그게 뭔지 압니다. 그리고 망쳐도 되돌릴 수 있다는 것도 압니다.

다음 장은 잠깐 손을 쉽니다. 지금까지 “Claude” 라고 불러온 이것이 대체 무엇인지, 왜 틀리는지, 왜 어떤 건 잘하고 어떤 건 못하는지 — 짧게 짚고 갑니다.