교육 개요

이 수업은 전체 교육 과정의 첫 번째 도입 수업이에요. 본격적인 개발 프로세스와 아키텍처를 배우기 전에, 창업자가 작은 화면을 직접 만들고 기술 개념을 실제 결과물과 연결해봐요.

오늘의 학습 목표

1. 바이브코딩이란? 최신 도구와 최소 기술 개념

SESSION 1 · 09:00–11:00 · 120분

창업자의 관점에서 바이브코딩의 쓰임과 한계를 이해하고, 오늘 사용할 도구와 웹서비스의 기본 구조를 연결해요.

1.1 창업자에게 바이브코딩이 필요한 이유

창업자가 모든 코드를 직접 작성할 필요는 없어요. 다만 아이디어를 빠르게 화면으로 확인하고, 작은 홈페이지나 프로토타입을 직접 배포하며, 개발자에게 원하는 기능과 데이터 흐름을 설명할 수 있으면 초기 검증 속도가 빨라져요.

창업자의 작업 흐름

1.2 오늘 사용할 AI 코딩 도구 지도

도구가 많아 보여도 역할은 크게 나뉘어요. 채팅 AI로 아이디어와 조건을 정리하고, Bolt.new로 데이터가 저장되는 웹서비스를 만들며, 배포된 화면을 기준으로 결과를 확인해요.

1.3 여기서 우리는 어디쯤 있을까? — 5단계로 보는 AI 프로토타이핑

비개발자가 AI로 프로토타입을 만드는 방법은 하나가 아니에요. 아래 5단계는 도구가 얼마나 "알아서" 해주는지(자동화)와, 내가 얼마나 직접 다뤄야 하는지(자유도)의 순서예요. 오늘은 이 중 2단계(Bolt.new)를 실습하고, 3·5단계(클로드)는 다른 교안에서 이어서 다뤄요.

3·5단계를 더 자세히 보고 싶다면: 클로드AI에서 클로드 코드까지 사용법 기초

1.4 프론트엔드·백엔드·DB·배포

이 네 가지는 개발자와 소통할 때 가장 먼저 구분해야 하는 개념이에요. 이벤트 신청 페이지에서 사용자가 보는 폼은 프론트엔드, 제출을 처리하는 로직은 백엔드, 신청 내용을 보관하는 곳은 DB, 다른 사람이 접속할 주소를 만드는 과정은 배포예요.

이벤트 신청이 저장되는 구조

2. Bolt.new 이벤트 신청 페이지 제작·배포

SESSION 2 · 14:00–16:00 · 120분

화면만 있는 프로토타입을 넘어 신청 정보가 저장되는 작은 웹서비스를 만들고, 프론트엔드·백엔드·DB·배포를 실제 결과와 연결해요.

2.1 오늘 만들 서비스의 최소 구조

실습 범위는 "행사 소개 → 신청서 입력 → 서버 검증 → DB 저장 → 완료 안내 → 배포 주소 확인"이에요. 실제 개인정보 대신 테스트용 가상 데이터를 사용하고, 로그인·결제·관리자 기능은 이번 수업에서 제외해요.

2.2 Bolt.new에서 신청 페이지 생성

첫 요청에서 화면과 데이터 저장 조건을 함께 설명해요. 생성 후에는 데이터베이스가 실제로 만들어졌는지, 제출 성공과 실패 상태가 구분되는지 확인해요.

기본 프롬프트 — 최소 와이어프레임

심화 프롬프트 — 데이터베이스까지 포함한 풀 버전

1. Bolt.new 시작 화면 입력창에 위 프롬프트를 붙여넣고 생성을 요청해요.
2. 생성이 끝나면 미리보기 화면에서 화면 구성과 반응형 디자인을 확인해요.

2.3 입력·백엔드·DB 확인

화면에 완료 메시지가 보이는 것만으로 저장 성공을 단정하지 않아요. 정상 입력과 빈 입력을 각각 시험하고, Bolt의 데이터베이스 화면에서 테스트 신청이 실제로 저장됐는지 확인해요.

2.4 배포하고 다른 기기에서 확인

미리보기는 제작 중 화면이고, 배포는 외부에서 접속할 주소를 만드는 과정이에요. Bolt의 Publish 기능으로 배포한 뒤 새 브라우저 창이나 휴대전화에서 주소를 열어 신청 흐름을 다시 확인해요.

1. 프로젝트 미리보기 확인을 마친 뒤 화면 오른쪽 위의 Publish 버튼을 선택해요.
2. 공개 안내(Publish your project) 대화상자를 확인하고 Publish를 눌러 외부에서 접속할 수 있는 주소를 생성해요.
3. 배포 완료 메시지와 생성된 주소(bolt.host)를 확인한 뒤 새 브라우저 창이나 다른 기기에서 접속해요.

1. 세 도구의 공통 전제

챗지피티·클로드·제미나이는 화면 구성은 다르지만, 실습에서 다루는 방식의 기본 전제는 같아요.

2. 한눈에 보는 3사 비교표

실습의 핵심은 도구 안에서 바로 보는 미리보기(아티팩트·캔버스·코드블록)예요. 프롬프트를 넣고, 미리보기로 확인하고, 다시 프롬프트로 고치는 반복이 실습의 전부예요. .html 파일 다운로드는 배포·공유가 필요할 때만 추가로 거치는 선택 단계예요.

3. 도구별 사용 절차

각 카드는 핵심(미리보기로 확인하기)과 선택(필요할 때만 .html로 내보내기)을 구분해 표시했어요. 실습은 대부분 핵심 단계 안에서 끝나요. 아래 다이어그램은 실제 화면이 아닌 예시 다이어그램이에요.

4. 실습 흐름 예시 — 챗지피티 기준

채용 플랫폼 데스크탑 화면을 캡처해 프로토타입으로 옮긴 실습 사례를 그대로 재구성했어요. 같은 흐름을 클로드·제미나이에도 적용할 수 있어요.

5. 추가: 다양한 프로토타입 실습

지금까지 배운 방법으로, 실제로 자주 쓰이는 프로토타입 3가지를 직접 만들어봐요. 아래 프롬프트를 그대로 복사해서 채팅AI에 붙여넣으면 돼요.

그리고 아래 문장을 질문 끝에 붙여보세요. 훨씬 근거 있는 답을 들을 수 있어요.

5.1 인터랙티브 데이터 분석 및 보고서 만들기

먼저 예시 매출 데이터 파일을 내려받아서, 채팅창에 파일을 첨부한 뒤 아래 프롬프트들을 순서대로 시도해보세요.

예시 데이터 파일 내려받기: sample_sales_data.xlsx (가상 매출 데이터 — 요약·상품 목록·주간/월간/연간 매출 시트 포함)

1대시보드 만들기 — 파일 첨부

채팅창에 위에서 내려받은 sample_sales_data.xlsx 파일을 첨부하고, 아래 프롬프트를 함께 보내세요.

기본 프롬프트

심화 프롬프트

2디자인 수정 연습 — 그래프 색상·축 변경

기본 프롬프트

심화 프롬프트

3기능 추가 연습 — 검색·필터

기본 프롬프트

심화 프롬프트

4모바일 반응형 디자인 연습

기본 프롬프트

심화 프롬프트

5.2 PM을 위한 프로젝트 TODO 및 체크리스트 만들기

새로고침해도 목록이 사라지지 않는, 내 브라우저에만 저장되는(로컬) TODO 리스트를 만들어봐요.

기본 프롬프트

심화 프롬프트

로컬 저장이 실제로 뭔지 물어보기

"로컬에 저장했다"는 말이 실제로 무슨 뜻인지, 아래 질문들로 AI에게 직접 확인해보세요.

5.3 내장된 AI를 활용한 챗봇 프로토타입

아래 프롬프트를 클로드와 제미나이 두 곳에서 각각 시도해보고, 결과가 어떻게 다른지 비교해보세요.

기본 프롬프트

심화 프롬프트

테스트하면서 이런 걸 살펴보세요

완성된 챗봇에 여러 질문을 던져보면서, 아래 내용을 직접 관찰해보세요.

• 채팅에 질문을 여러 개 던져보세요. 답변에 패턴이 보이나요? (예: 앞부분은 항상 똑같고, 뒷부분에 내가 한 질문이 그대로 붙어서 나오지 않나요?)
• 어떤 질문을 던져도 매번 다른 답변을 만들어내나요?
• "1+1" 같은 계산 질문을 했을 때 정확하게 "2"라고 답하나요?
• "내 이름이 뭔지 알아?"처럼 앞의 대화 맥락을 기억해서 답하나요?
• 아니면 답변에 규칙이 없고 뒤섞여 있는 것처럼 보이나요?

관찰한 내용을 짧게 메모해두면, 다음 질문들의 답과 비교하기 좋아요.

테스트 후 AI에게 물어보기

한 단계 더 — 규칙과 생성으로 고도화하기

규칙기반과 생성형 AI를 섞으면, 자주 나오는 질문은 빠르고 정확하게 답하면서도 예상 못한 질문에는 유연하게 대응할 수 있어요.

PM 관점에서 물어보기

프로토타입이 실제 서비스가 된다면 얼마나 비용이 들지도 미리 가늠해봐요.

6. 피그마 프로토타입, 대체할 수 있을까

수업에서 다룬 평가 5가지예요. 결론은 전부 "가능"이지만, 조건이 붙어요.

7. 실전 사례 — 성공과 실패

같은 과정 수강생들의 실습에서 반복적으로 나온 패턴만 추려 익명화했어요.

8. 디버깅 & 배포 팁

1. 클로드, 어디로 들어가나요? — 웹 방식 vs 터미널 방식

1-1. 왜 두 가지 방법으로 나뉘었나요?

클로드는 원래 사용하는 사람이 서로 달랐기 때문에 두 가지 방식으로 나뉘어 있었어요.

• 웹(claude.ai): 일반 사용자가 브라우저나 앱에서 글로 대화하는 방식이에요. 개발 지식이 없어도 누구나 바로 쓸 수 있어요.
• 터미널(Claude Code): 개발자가 명령어 창에서 실행하는 방식이에요. 내 컴퓨터의 실제 폴더와 파일에 직접 접근해서 코드를 만들고 고치고 실행해요.

우리는 터미널을 직접 열 일이 없어요. 이 문서에서 클로드 코드는 앞으로 나올 2장처럼 클로드 채팅(웹 브라우저) 안에서 쓸 것이기 때문이에요. 터미널 설치 방법은 참고용으로만 아래 1-3에 접어두었으니, 나중에 필요할 때만 펼쳐서 보시면 돼요.

1-2. 웹으로 들어가는 방법

인터넷 브라우저에서 claude.ai에 접속한 뒤, 이메일 또는 구글 계정으로 로그인하면 바로 대화를 시작할 수 있어요. 별도의 설치가 필요 없어요.

1-3. 터미널로 들어가는 방법 (참고용 — 우리는 잘 안 써요)

아래는 터미널을 직접 설치해서 쓰는 방법이에요. 우리는 이 방법을 쓰지 않고, 2장부터 나오는 '채팅 안의 Code 탭'을 사용해요. 혹시 나중에 터미널이 필요해지면 그때 펼쳐서 참고하세요.

2. 웹에서도 이제 터미널처럼 개발자 방식으로 쓸 수 있게 됐어요

실제로 우리가 쓸 부분은 바로 여기부터예요. 1장은 참고용 배경 지식이었고, 지금부터가 본론이에요.

2-1. 예전에는 이렇게 나뉘어 있었어요

1번 목차에서 설명한 것처럼, 예전에는 "클로드 = 웹에서 채팅", "클로드 코드 = 터미널에서 실행"이라고만 이해하면 충분했어요.

2-2. 지금은 왜 바뀌었나요? (Anthropic 입장 포함)

아래는 실제 claude.ai 화면 좌측 상단을 캡처한 화면이에요. 말풍선 모양 아이콘과 </> 모양 아이콘, 두 개가 나란히 있는 것을 볼 수 있어요.

이 중 </> 아이콘을 누르면 Code 모드로 바뀌어요. 즉, 지금은 웹 화면(claude.ai) 안에서도 터미널 없이 클로드 코드를 쓸 수 있게 되었어요. 이것이 2026년 8월 28일 현재 우리가 실제로 쓰게 될 방법이에요.

왜 이렇게 바뀌었을까요? (Anthropic의 실제 입장)

Anthropic은 2025년 10월 20일, 클로드 코드를 웹 브라우저에서도 쓸 수 있게 정식으로 출시했어요. TechCrunch와의 인터뷰에서 Anthropic의 클로드 코드 담당 프로덕트 매니저는, 터미널이 앞으로도 클로드 코드의 "본거지" 역할을 계속하겠지만, 회사는 개발자들이 더 다양한 곳에서 코딩 에이전트를 켤 수 있도록 클로드 코드를 여러 곳에 넣으려 한다고 설명했어요.

비슷한 시기에 Anthropic은 클로드 코드와 같은 에이전트 기술을 개발자가 아닌 사람들도 쓸 수 있게 만드는 데에도 힘을 쏟았어요. 클로드 코드 개발 총괄인 Boris Cherny는 이런 흐름에 대해, "비개발자들도 훨씬 더 쉽게 쓸 수 있게 만들고 싶었다"는 취지로 언론에 밝혔어요. 정리하면, "코드를 직접 다루는 일 = 터미널을 쓸 줄 아는 개발자만 하는 일"이라는 예전 공식이 깨지고, 개발을 배우지 않은 일반 사용자도 어려운 명령어 없이 말(프롬프트)로 코딩을 시키고 싶어 하는 수요가 커진 것이 배경이에요.

이 'Code' 모드가 터미널에서 쓰던 클로드 코드와 완전히 같은 건가요?

같은 점과 다른 점이 함께 있어요.

• 같은 점: Anthropic 공식 문서에 따르면 "Claude Code는 모든 곳에서 동일하게 작동합니다. 변경되는 것은 코드가 실행되는 위치와 로컬 구성을 사용할 수 있는지 여부입니다." 즉, 코드를 읽고 파일을 고치고 명령을 실행하는 핵심 기능 자체는 어디서 접속하든 같아요.

다른 점 1 — 채팅(Code 탭) 안에서도 실행 방식이 두 가지로 나뉩니다

클로드 채팅의 Code 탭을 눌러 작업을 시킬 때, 클로드 코드가 실제로 어디서 돌아가는지에 따라 다시 두 가지로 나뉘어요.

쉽게 말해 ①은 "내 컴퓨터 안에서 바로 끝내는 방식", ②는 "인터넷 저편의 서버에 일을 맡겨두고 나는 다른 일을 하다가 나중에 확인하는 방식"이에요. 오늘 오후 시연(4장)에서는 ②번 방식을 써볼 예정이에요.

다른 점 2 — 시작하는 방법이 다릅니다

①번(로컬)은 내 컴퓨터의 아무 폴더에서나 바로 시작할 수 있어요. 반면 ②번(클라우드)은 GitHub 계정을 연결하고, 작업할 GitHub 저장소(repository)를 지정해야 시작할 수 있어요.

현재 상태: 웹에서의 클로드 코드는 아직 "연구 미리보기(정식 출시 전 시험 제공)" 단계이며, Pro·Max·Team 플랜 사용자 등 일부에게 제공돼요.

2-3. 서비스 이름 정리 (헷갈리지 않도록)

Anthropic이 공식적으로 구분하는 이름은 아래와 같아요. 앞으로 이 문서에서도 아래 이름으로 통일해서 부를게요.

※ 이번에 확인한 화면 캡처에는 Chat과 Code 두 가지 아이콘만 보였어요. Cowork·Design·Science는 계정·플랜 설정에 따라 다른 위치(예: 별도 메뉴)에 나타날 수 있어요.

3. 클로드 무료 계정으로 할 수 있는 것 / 안 되는 것

아래는 2026년 8월 28일 기준 claude.com/ko/pricing 공식 요금제 페이지를 직접 캡처한 화면이에요.

정리하면 이래요. 무료(Free) 플랜은 $0이고, 클로드와 웹·iOS·Android·데스크톱에서 채팅하는 것, 채팅 안에서 간단한 코드 생성이나 데이터 시각화, 파일 생성·실행, 웹 검색, 대화 기억 기능까지는 모두 무료로 돼요. 하지만 지금 우리가 쓰려는 Code(클로드 코드)는 무료 플랜에 포함되어 있지 않아요. 이 문서에서 여러 번 나온 Cowork, Design, Science도 마찬가지로 무료 플랜에는 없고, 모두 Pro 플랜부터 쓸 수 있어요. 방금 실시간으로 확인한 공식 페이지 기준 Pro는 $17, Max는 $100부터로 표시되어 있었는데, 이는 오늘 오전 캡처하신 화면($18, $110)과 조금 달라요 — Anthropic이 결제 주기(월간/연간)나 로그인 여부에 따라 다른 금액을 보여줄 수 있다고 공식 페이지에 안내되어 있으므로, 실제 결제 전에는 로그인한 상태로 claude.com/ko/pricing에서 최종 금액을 한 번 더 확인하시길 권해드려요.

참고: Team 플랜의 시트 가격 (여러 명이 같이 쓰는 플랜)

개인용 Free/Pro/Max와 별도로, 2~150명 팀을 위한 Team 플랜이 있고, 좌석(시트) 종류가 두 가지로 나뉘어요.

※ 교육에서 "팀 플랜 스탠다드 시트는 월 $22"라고 안내받으셨는데, 공식 페이지의 $20과 $2 차이가 있어 별도 확인이 필요해요.

4. 오늘 오후에 해볼 것 — 웹 브라우저로 클로드 코드 써보기

오늘 오후 시연 목표는 터미널을 전혀 쓰지 않고, 비개발자도 웹 브라우저 안에서 클로드 코드를 써보는 것이에요. 앞서 설명한 "다른 점 1"의 ②번(GitHub 연결 후 클라우드 실행) 방식으로 진행해요. GitHub 계정을 만들고 연결하는 것부터 함께 진행해요.

4-1. GitHub 가입하고 로그인하기

GitHub는 클로드 코드가 작업한 파일을 저장해두는 "인터넷 창고" 같은 곳이에요. 계정이 있어야 클로드 코드를 클라우드에서 쓸 수 있어요.

1. 인터넷 브라우저 주소창에 github.com을 입력해서 들어가요.
2. 화면 오른쪽 위에 있는 "Sign up"(가입하기) 글자를 눌러요.
3. 이메일 주소 → 비밀번호 → 사용할 이름(username) 순서로 화면에 나오는 대로 입력해요.
4. 내 이메일로 인증 코드(숫자)가 도착해요. 그 숫자를 화면에 입력하면 가입이 끝나요.
5. 가입이 끝나면 자동으로 로그인된 상태가 돼요. (다음에 다시 들어올 때는 "Sign in" 글자를 눌러서, 아까 만든 이메일과 비밀번호로 로그인하면 돼요.)

4-2. GitHub에서 저장소(repository) 만들기

저장소(repository)는 앞서 말한 "인터넷 창고" 안에 만드는 프로젝트별 폴더 하나라고 생각하면 돼요. 클로드 코드가 작업할 폴더를 미리 하나 만들어둘게요.

1. github.com/new 주소로 들어가요. (또는 github.com에 로그인한 상태에서 화면 오른쪽 위 "+" 버튼 → "New repository"를 눌러도 돼요.)
2. Repository name(저장소 이름) 칸에 원하는 이름을 영어로 입력해요. 띄어쓰기는 안 되고, 대신 -나 _를 써요. (예: my-first-project)
3. 화면 아래쪽에 Public(퍼블릭)과 Private(프라이빗) 중 하나를 고르는 부분이 있어요. 처음이라면 Public을 선택하는 걸 추천해요.
4. 맨 아래 "Create repository" 버튼을 누르면 비어 있는 새 저장소가 만들어져요.

4-3. 클로드에서 설정 → 커넥터 들어가서 GitHub 연결하기

이제 클로드가 방금 만든 GitHub 계정을 볼 수 있도록 "연결"해줘요. Anthropic 공식 도움말에 나온 순서 그대로예요.

1. claude.ai에 로그인한 상태에서, 화면 왼쪽 아래에 있는 내 이름(또는 동그란 아이콘)을 눌러요.
2. 나오는 메뉴에서 "설정(Settings)" 또는 "Customize"를 누른 뒤, "커넥터(Connectors)" 메뉴로 들어가요. (주소창에 직접 claude.ai/customize/connectors를 입력해서 들어가도 돼요.)
3. 커넥터 목록 옆에 있는 "+" 버튼을 눌러요. 여러 서비스 목록이 떠요.
4. 목록에서 "GitHub"를 찾아서 누른 뒤, "Connect"(연결) 버튼을 눌러요.
5. GitHub 로그인 화면이 새 창으로 떠요. 아까 4-1에서 만든 계정으로 로그인해요.
6. "클로드가 어떤 저장소에 접근하게 할지" 물어보는 화면이 나와요. 여기서 "모든 저장소(All repositories)"를 선택해요. (나중에 저장소를 새로 만들어도 클로드가 자동으로 볼 수 있어서 편해요.)
7. 연결이 끝나면 커넥터 목록에 GitHub가 "연결됨"으로 표시돼요.

4-4. 클라우드 환경 만들기 (인터넷에 있는 내 작업 공간)

클로드 채팅에서 </>(Code) 탭을 누르고 저장소를 고르면, 처음 한 번은 "환경 생성(Create environment)"이라는 화면이 나와요. 이 "환경"은 쉽게 말해 클로드 코드가 일할 때 쓰는, 인터넷 위에 있는 작은 컴퓨터(작업 공간)라고 생각하면 돼요. 화면에는 아래 4가지 칸이 순서대로 나와요.

1. 이름(Name) 칸: 이 작업 공간을 부르는 이름을 적는 빈칸이에요. 클로드가 자동으로 이름을 채워주므로, 그냥 그대로 두면 돼요. (나중에 프로젝트를 여러 개 만들 때만 구분하려고 이름을 바꾸면 돼요.)
2. 네트워크 접근(Network access) 칸: 이 작업 공간이 인터넷의 어디까지 들어갈 수 있는지 정하는 부분이에요. 기본값은 "Trusted"라고 적혀 있는데, 이는 "프로그램을 설치할 때 꼭 필요한 몇몇 안전한 사이트에만 들어갈 수 있고, 그 외에는 못 들어간다"는 뜻이에요. 처음에는 이 기본값을 그대로 두세요.
3. 환경 변수(Environment variables) 칸: 비밀번호나 특별한 설정값을 미리 넣어두는 칸이에요. 지금은 필요 없으니 비워둬요.
4. 설정 스크립트(Setup script) 칸: 작업 공간이 만들어지기 전에 미리 실행할 명령어를 적는 칸이에요. 이것도 처음에는 비워둬요.

네 칸을 모두 그대로(비워두거나 기본값 그대로) 두고, 화면 아래쪽에 있는 "환경 생성(Create environment)" 버튼(파란색 또는 진한 색 버튼)을 누르면 끝이에요. Anthropic 공식 문서도 "첫 번째 프로젝트의 경우, 기본값을 유지하고 환경 생성을 클릭하세요"라고 정확히 이렇게 안내하고 있어요. 즉, 이 화면에서는 아무것도 고민하지 말고 버튼만 누르면 돼요.

4-5. 저장소 선택하고 작업 시켜보기

1. 입력창 아래의 저장소 선택기(repository selector)에서, 아까 만든(또는 연결된) 저장소를 선택해요.
2. "클로드가 얼마나 자유롭게 작업해도 되는지" 정하는 항목(권한 모드)이 있어요. 기본값인 "편집 자동 수락(Accept edits)"으로 두면, 클로드가 매번 물어보지 않고 바로 작업해서 결과를 저장해요. 한 단계씩 확인받고 싶다면 "Plan Mode"로 바꿔요.
3. 하고 싶은 작업을 구체적으로 문장으로 적어요. 예시:
   복사

   사용법을 설명하는 README 파일을 새로 만들어줘
4. Enter를 누르면 클로드가 저장소를 복사해서 클라우드 안에서 작업을 시작해요.

4-6. 결과 확인하기

1. 작업이 끝나면 변경된 줄 수(예: +42 -18)가 표시돼요. 이를 눌러 어떤 부분이 바뀌었는지 확인해요.
2. 특정 줄에 마음에 안 드는 부분이 있으면, 그 줄을 클릭하고 의견을 남길 수 있어요.
3. 결과가 마음에 들면 "PR 생성(Create PR)" 버튼을 눌러서, 클로드가 고친 내용을 실제 GitHub 저장소에 반영할 수 있어요. (PR은 "이렇게 바꿔도 될까요?"라고 제안하는 것이라고 생각하면 돼요.)

이 교안에서 배우는 것

준비물

STEP 1. 클로드에게 한 문장으로 요청하기

클로드 코드 채팅창에 아래 문장을 그대로 입력해보세요. 코드를 몰라도 괜찮아요 — 이 문장 하나면 충분히 시작할 수 있어요.

재현 이미지 — 요청을 보내면 왼쪽에 진행 상황 체크리스트가 자동으로 올라와요.

STEP 2. 클로드가 자동으로 한 일 확인하기

클로드가 작업을 마치면 보통 다음과 같은 결과를 알려줘요.

• 인사말이 담긴 index.html 웹페이지 파일 생성
• push할 때마다 자동으로 배포해주는 GitHub Actions 설정 파일 생성
• GitHub 저장소에 커밋 & 푸시 완료

STEP 3. GitHub에서 Pages 켜기

웹사이트를 인터넷에서 볼 수 있게 하려면, GitHub 저장소에서 버튼 하나만 누르면 돼요.

1저장소 페이지로 들어가기

1. 브라우저를 열고 내 GitHub 저장소 주소로 들어가요.
   예) https://github.com/내계정/저장소이름
2. 로그인이 안 되어 있으면 먼저 로그인해요.

이번 실습 저장소로 바로 가기: github.com/loreenkim0301/swy-lecturenote

2"Settings"(설정) 메뉴 찾기

1. 저장소 화면 맨 위쪽 탭들(Code / Issues / Pull requests / Actions / Projects / Settings) 중에서
2. 맨 오른쪽 끝의 Settings 탭을 눌러요. (화면이 좁으면 ... 더보기 안에 숨어있을 수 있어요)

3"Pages" 메뉴 찾기

1. Settings 화면 왼쪽에 세로로 긴 메뉴 목록이 보여요.
2. 아래로 내리다 보면 "Pages"라는 글자가 있어요. ("Code and automation" 그룹 아래)
3. Pages를 눌러요.

4Source(소스)를 "GitHub Actions"로 바꾸기

1. Pages 화면의 "Build and deployment" 아래 "Source" 드롭다운을 눌러요.
2. 지금은 보통 "None" 또는 "Deploy from a branch"로 되어 있어요.
3. 드롭다운에서 "GitHub Actions"를 선택해요. 보통 자동으로 저장돼요.

Pages 설정 화면 바로 가기: github.com/loreenkim0301/swy-lecturenote/settings/pages

STEP 3-1. 저장소를 실수로 Private(비공개)로 만들었다면

Pages 설정 화면에 "이 저장소는 비공개라서 유료 플랜이 필요하다"는 안내나 "Upgrade your plan" / "Make repository public" 문구가 뜬다면, 무료 계정은 비공개 저장소에서 Pages를 쓰려면 유료 플랜이 필요하기 때문이에요.

결제 없이 해결하려면 저장소를 공개(Public)로 바꾸면 돼요.

1. Settings 화면을 맨 아래까지 내려서 "Danger Zone"(위험 구역)을 찾아요.
2. "Change repository visibility" 항목 오른쪽의 "Change visibility" 버튼을 눌러요.
3. 펼쳐지는 메뉴에서 "Change to public"을 선택하고, 안내에 따라 저장소 이름을 입력해 확인해요.

Danger Zone 바로 가기: github.com/loreenkim0301/swy-lecturenote/settings (맨 아래로 스크롤)

재현 이미지 — GitHub 저장소 Settings 맨 아래 Danger Zone 화면

STEP 4. 완성된 페이지 확인하기

Pages 설정을 마쳤으면, 클로드에게 "설정 끝났어"라고 알려주세요. 클로드가 배포를 다시 실행하고 성공 여부를 확인해줘요.

배포가 성공하면 아래와 같은 주소로 내 웹페이지를 열어볼 수 있어요.

재현 이미지 — 완성된 hello 페이지가 실제로 열린 모습

전체 교안 목록 바로 열어보기: loreenkim0301.github.io/swy-lecturenote

정리 & 자주 묻는 질문

오늘 한 일 한눈에 보기

1. 클로드에게 문장 하나로 웹페이지 배포 요청
2. 클로드가 파일 생성 + 자동 배포 설정 + GitHub 업로드까지 처리
3. GitHub Settings → Pages → Source를 "GitHub Actions"로 변경
4. (필요할 때만) 저장소를 Public으로 변경
5. 완성된 웹페이지 주소 접속해서 확인

자주 묻는 질문

Q. 배포가 계속 실패해요.
A. Settings → Pages에서 Source가 "GitHub Actions"로 되어 있는지, 저장소가 Public인지 다시 확인해보세요.

Q. 메뉴를 못 찾겠어요.
A. Ctrl + F(맥은 Command + F)로 원하는 단어를 검색하면 빨리 찾을 수 있어요.

Q. 주소로 들어갔는데 페이지가 안 보여요.
A. 처음 배포된 직후에는 1~2분 정도 걸릴 수 있어요. 잠시 후 새로고침 해보세요.

Q. 저장소(레포지토리) 자체도 클로드한테 만들어달라고 할 순 없나요?
A. 아쉽지만 안 돼요. 클로드 코드 세션에 연결된 GitHub 권한은 보통 미리 지정된 저장소 1개에만 부여되어 있고, 새 저장소를 만드는 권한(Administration: write)은 포함되어 있지 않아서 POST /user/repos → 403 Resource not accessible 같은 오류로 거부돼요. 이 부분은 클로드 쪽에서 우회할 방법이 없어요.
가장 쉬운 방법은 github.com/new에서 원하는 이름으로 저장소를 먼저 직접 만든 뒤, 클로드에게 "이 저장소 이름으로 연결해서 작업해줘"라고 알려주는 거예요. (다른 방법: claude.ai 설정 → 커넥터에서 GitHub 연결 권한 범위를 넓게 다시 인증하기 — 다만 이쪽은 별도 설정이 필요해서 첫 번째 방법이 더 간단해요.)

부록. 이번 실습에서 실제로 입력한 프롬프트 전체

참고용으로, 이 교안을 만드는 동안 클로드 웹 채팅에 실제로 입력했던 문장들을 순서대로 그대로 옮겨두었어요. 그대로 따라 입력해봐도 좋아요.

1웹페이지 배포 요청

2남은 단계 상세 설명 요청

3Ctrl+F 팁 추가 요청

4Private 저장소 관련 내용 추가 + 설정 완료 알림