✨ 말로 만드는 프로그램
바이브 코딩

전통적인 개발과 무엇이 다른가

한 사이클은 이렇게 돈다

회사를 나와 회사를 만들다

Anthropic은 2021년에 세워졌다. OpenAI에서 일하던 연구자들이 함께 나와 만든 회사로, 다리오 아모데이(Dario Amodei)가 대표를, 그의 동생 다니엘라 아모데이(Daniela Amodei)가 사장을 맡고 있다. 기계가 무엇을 어떻게 판단하는지 들여다보는 연구로 알려진 크리스 올라(Chris Olah), 물리학자 출신 제러드 캐플런(Jared Kaplan) 등도 함께했다.

이들이 따로 나온 배경으로는 AI 안전(AI safety)을 더 무겁게 다뤄야 한다는 생각이 알려져 있다. 성능을 올리는 일과 그 시스템을 믿을 수 있게 만드는 일을 같은 무게로 놓겠다는 뜻이다.

‘Anthropic’ — 인간의, 인류의

anthropic은 “인간의, 인류의”라는 뜻의 영어 낱말이다. 그리스어 anthropos(사람) 에서 왔고, 우리가 아는 다른 낱말들과 뿌리가 같다.

anthropology 인류학anthropic principle 인류 원리philanthropy 자선

기술의 이름에 사람을 넣은 회사가, 회사의 목적에도 인류의 이익을 적어 두었다. 이름과 목적이 같은 곳을 가리키고 있는 셈이다.

‘Claude’ — 정보이론의 아버지에게서

AI의 이름 Claude는 클로드 섀넌(Claude Shannon, 1916~2001)에게서 왔다고 널리 알려져 있다. 섀넌은 정보이론(Information Theory)을 세운 미국의 수학자·공학자로, 정보의 양을 재는 단위인 비트(bit)를 세상에 알린 사람이다.

정보를 어떻게 재고, 줄이고, 잡음 속에서도 정확히 보낼 수 있는지를 수학으로 밝힌 그의 연구 위에 오늘날의 컴퓨터·통신·압축이 서 있다. AI 역시 결국 정보를 다루는 기술이라는 점에서, 이 이름은 그 뿌리를 가리킨다.

Claude는 언제부터 있었나

지금 우리가 쓰는 모델은 이 줄기의 가장 최근 세대다. 새 모델은 계속 나오므로, 이름과 번호보다 “무엇을 할 수 있는 도구인가”를 보는 편이 오래 간다.

어디서 쓰나

• 웹 · claude.ai 에서 계정을 만들고 바로 대화한다. 학교 컴퓨터에서도 브라우저로 쓸 수 있다.
• 휴대폰 앱 · 같은 계정으로 이어서 쓴다. 대화 기록이 같이 보인다.
• Claude Code · 터미널에서 쓰는 방식으로, 내 컴퓨터의 파일을 직접 읽고 고친다. 여러 파일짜리 프로그램을 만들 때 쓴다(6단원).

데스크톱 앱 설치하기

브라우저로도 충분하지만, 컴퓨터에 앱으로 설치해 두면 세 가지가 달라진다.

• 창을 따로 띄워 둔다 · 브라우저 탭 사이를 오가지 않는다. 작업하는 화면 옆에 나란히 붙여 두고, 막힐 때마다 바로 물어본다.
• 파일을 끌어다 놓는다 · 사진·표(csv·xlsx)·문서를 창 안으로 던져 넣으면 바로 읽는다. 화면을 캡처해 Ctrl+V 로 붙여 넣는 것도 된다.
• 내 컴퓨터의 폴더를 열어 줄 수 있다 · 파일을 하나씩 건네주는 대신 폴더 하나를 통째로 맡긴다. Claude가 그 안의 파일을 직접 읽고 고치고 새로 만든다.

1. 다운로드 페이지를 연다 주소창에 claude.com/download 를 친다.
2. 내 컴퓨터에 맞는 것을 고른다 Windows(x64·arm64), macOS(애플 실리콘·인텔), Linux(우분투·데비안, 베타)를 지원한다. 휴대폰용 iOS·안드로이드 앱도 같은 곳에 있다.
3. 설치하고 로그인한다 웹에서 쓰던 계정으로 로그인하면 그동안의 대화가 그대로 이어진다. 계정이 없으면 이 화면에서 만든다.
4. 창을 띄워 둔다 수업이나 작업 중에 바로 물어볼 수 있게, 브라우저와 별도로 열어 두고 쓴다.

내 폴더를 열어 주기

앱을 열면 위쪽에 탭이 세 개 있다. 이 가운데 내 컴퓨터의 파일을 직접 다루는 것은 Code 탭이다.

1. Code 탭을 누른다 앱 위쪽 가운데에 있다.
2. Local 을 고른다 내 컴퓨터에서 돌린다는 뜻이다.
3. Select folder 로 폴더를 고른다 작품을 담아 둘 폴더 하나를 고른다. Claude는 여기서 고른 폴더 안에서만 파일을 읽고 쓴다 — 바탕화면이나 다른 폴더는 건드리지 못한다.
4. 고칠 때 물어볼지 정한다 보내기 단추 옆의 모드 선택기에서 고른다(아래 표). 한 번 고르면 그 폴더에서는 그대로 기억된다.

앱에서 처음 해 볼 것 네 가지

크롬 확장 프로그램에 추가 — Claude for Chrome

Claude 앱이 내 파일을 다룰 수 있다면, Claude for Chrome은 Chrome 웹 브라우저를 보고 제어할 수 있는 권한을 Claude에게 제공한다. 캡처해 붙여 넣을 필요 없이 “이 페이지에서 …”라고 말하면 된다. 만든 웹사이트를 직접 열어 눌러 보고 고치는 단계까지 갈 때 특히 쓸모가 있다.

설치

1. 크롬 웹스토어를 연다 크롬에서 chromewebstore.google.com 에 들어가 Claude를 검색한다. 제공자가 Anthropic인지 확인하고 고른다(이름이 비슷한 다른 확장이 많다).
2. Chrome에 추가를 누른다 크롬만 된다. 엣지·웨일에서는 안 되거나 제한된다.
3. 고정한다 주소창 오른쪽 퍼즐 모양(확장) 아이콘 → Claude 옆 압정을 눌러 항상 보이게 둔다.
4. 로그인한다 웹·앱에서 쓰던 같은 계정으로 로그인한다. 유료 요금제에서 쓸 수 있다(무료 계정은 제한되거나 사용 불가).
5. 사이트별 권한을 켠다 확장을 열고 지금 사이트에 대한 접근을 허용한다. 권한은 사이트마다 따로 주는 방식이라, 필요한 곳에서만 켜면 된다.

무엇이 좋아지나

조심할 것

• 보는 만큼 권한을 준다 · 켜 둔 사이트의 화면 내용을 Claude가 본다. 성적·개인정보·메일함이 열린 탭에서는 켜지 않는다(8단원 ②).
• 누르는 것은 되돌릴 수 없다 · 글 올리기, 결제, 삭제처럼 한 번 누르면 끝인 버튼은 사람이 직접 누른다.
• 웹페이지의 글을 명령으로 착각하지 않게 · 나쁜 마음을 먹은 페이지에 “이렇게 하라”는 문장을 숨겨 두는 수법이 있다. 낯선 사이트에서는 권한을 켜지 않는 것이 안전하다.
• 학교 컴퓨터 · 확장 설치가 막힌 경우가 많다. 그럴 때는 캡처해서 붙여 넣는 방법(5단원)으로 충분하다.

모델 고르기

Claude는 성격이 다른 여러 모델이 있다. 대화창 위쪽에서 고른다.

위로 갈수록 똑똑하지만 느리고, 요금제에 따라 쓸 수 있는 양이 적다. 실습은 Sonnet으로 시작해 막힐 때만 한 칸씩 위로 올려 보는 편이 좋다. 무료 요금제에서는 맨 윗줄을 아예 못 쓸 수도 있다.

대화창에서 눈여겨볼 것

• 아티팩트(Artifacts) · 웹페이지나 앱을 만들어 달라고 하면 답변 옆에 따로 창이 열리고 결과가 바로 실행된다. 버튼을 눌러 보고, 마음에 안 들면 그 자리에서 고쳐 달라고 하면 된다. 이 교재의 실습은 대부분 여기서 이뤄진다.
• 파일 첨부 · 사진, 표(csv·xlsx), 문서를 올려 “이 자료를 이렇게 정리해 줘”라고 할 수 있다.
• 프로젝트(Projects) · 관련 있는 대화와 자료를 한 곳에 모아 둔다. 며칠에 걸쳐 만드는 작업에 쓴다.
• 대화 이어가기 · 같은 대화창 안에서는 앞의 내용을 기억한다. 새 대화를 열면 처음부터라는 점을 기억한다.

체크리스트 다섯 가지

1. 무엇을 만드는가 — 한 문장으로
2. 누가 쓰는가 — 학생, 선생님, 나 혼자
3. 자료는 어떻게 생겼는가 — 예시 한 줄을 그대로 보여 준다
4. 화면은 어떤 느낌인가 — 단순하게, 글씨 크게, 색은 차분하게
5. 조건은 무엇인가 — 설치 없이 브라우저만, 인터넷 없이도, 휴대폰에서도

“가능한가”부터 묻는 습관

바로 “만들어 줘”라고 하기 전에, 먼저 되는지·어떤 방법이 있는지를 묻는 편이 훨씬 빠르다. 잘못된 길로 한참 간 뒤에 되돌아오는 일을 막아 준다.

고칠 때의 네 가지 원칙

• 한 번에 하나씩 · 다섯 군데를 한꺼번에 고쳐 달라고 하면, 고쳐진 곳과 망가진 곳이 섞여 무엇 때문인지 알 수 없게 된다.
• 어디인지 짚어 준다 · “위쪽 파란 버튼”, “표의 세 번째 칸”처럼 보이는 대로 말하면 된다. 코드 용어를 몰라도 된다.
• 오류는 그대로 붙여 넣는다 · 빨간 글씨를 요약하지 말고 통째로 복사한다. 줄 번호와 파일 이름이 단서다.
• 잘 되던 지점을 남겨 둔다 · 마음에 드는 버전이 나오면 코드를 따로 저장해 둔다. 고치다 더 나빠지면 돌아갈 곳이 생긴다.

이렇게 말하면 잘 통한다

화면을 찍어서 보여 준다 — 캡처 방법

“위쪽 버튼이 이상해”보다 화면 그림 한 장이 훨씬 정확하다. Claude는 이미지를 읽으므로, 캡처해서 대화창에 붙여 넣고 “이렇게 보여. 오른쪽 표가 잘려”처럼 한 줄만 덧붙이면 된다. 오류 문구도 글자로 복사가 안 될 때는 캡처로 대신할 수 있다.

• 문제가 되는 부분만 잘라 찍는다. 화면 전체를 올리면 어디를 봐야 하는지 Claude도 헤맨다.
• 개발자 도구의 빨간 글씨(오류)는 F12 → Console 탭을 열어 그 부분을 찍는다. 3단원의 오류 붙여넣기와 같은 효과다.
• “이렇게 되고 싶다”도 그림으로 · 종이에 그린 스케치나 마음에 드는 다른 사이트의 화면을 찍어 “이런 느낌으로”라고 하면 말보다 빠르다.
• 개인정보 확인 · 캡처에 이름·학번·다른 사람 얼굴이 들어가 있지 않은지 보고 올린다(8단원 ②).

1단계 — 뼈대부터 (10분)

처음부터 다 넣으려 하면 코드가 길어져 고치기 어렵다. 움직이고 쏘는 것까지만 먼저 만든다.

1. 실행해 본다 아티팩트 창에서 화살표와 스페이스바를 직접 눌러 본다. 손맛이 어떤지 느껴 본다.
2. 한 가지만 고친다 "총알이 너무 느려. 두 배 빠르게 해 줘" 또는 "우주선이 너무 빨라. 조금 천천히".
3. 잘 되는 버전을 저장한다 마음에 들면 코드를 복사해 galaga_1.html로 따로 저장해 둔다. 5단원의 "돌아갈 곳"이다.

2단계 — 게임답게 만들기

여기서부터가 진짜 실습이다. 아래 중 하나씩 골라 요청하고, 될 때마다 실행해 본다. 한꺼번에 다섯 개를 시키면 무엇이 망가졌는지 알 수 없다.

3단계 — 내 게임으로 바꾸기

여기까지 오면 남과 똑같은 갤러그다. 이제 나만의 것으로 만든다. 이 단계가 한마당 심사에서 가장 눈에 띄는 부분이다.

• 주제를 바꾼다 · “우주선 대신 우리 학교 마스코트로, 적은 시험지로 바꿔 줘”처럼 이야기를 입힌다.
• 그림을 바꾼다 · “우주선을 네모 대신 삼각형으로 그리고 불꽃을 달아 줘”, 또는 직접 그린 그림을 캡처해 “이렇게 생기게 해 줘”(5단원 캡처 방법).
• 규칙을 하나 더한다 · “10초마다 아이템이 떨어지고, 먹으면 5초 동안 총알이 두 줄로 나가게”처럼 내 아이디어를 넣는다.
• 설명을 요청한다 · “적이 움직이는 부분 코드를 한 줄씩 설명해 줘.” 이 습관이 실력을 만든다(5단원).

완성했다면

• 친구에게 시켜 본다 · 설명 없이 혼자 해 보게 두고, 어디서 막히는지 본다. 그게 다음에 고칠 곳이다.
• 인터넷에 올린다 · 6단원의 GitHub Pages로 올리면 주소가 생긴다. 바이브 코딩 한마당에 낼 작품 URL이 바로 이것이다.
• 만든 과정을 남긴다 · 어떤 프롬프트로 어떻게 고쳐 왔는지가 결과물만큼 중요하다. 대화 화면을 몇 장 캡처해 둔다.

프로젝트에 자료를 모아 둔다

프로젝트(Projects)를 만들고 자주 쓰는 자료(명단 양식, 규칙 문서, 지금까지의 코드)를 올려 두면, 그 안에서 새 대화를 열어도 매번 다시 설명하지 않아도 된다. “우리 반은 28명이고 번호는 1번부터”처럼 매번 반복되는 배경을 여기 적어 둔다.

Claude Code — 내 컴퓨터의 파일을 직접 고친다

웹 대화창은 코드를 보여 줄 뿐이라, 내가 복사해서 붙여 넣어야 한다. 파일이 열 개쯤 되면 이 과정이 더 힘들어진다. Claude Code는 터미널에서 실행하며 내 컴퓨터의 파일을 직접 읽고 고친다.

# 설치 후, 만들고 있는 폴더에서 실행한다
claude

# 그 다음에는 그냥 말로 시킨다
> 이 폴더의 index.html에서 로그인 부분만 따로 파일로 분리해 줘

• 이럴 때 쓴다 · 파일이 여러 개다 / 고칠 곳이 여기저기 흩어져 있다 / 만든 것을 계속 이어서 관리한다
• 주의 · 내 파일을 실제로 바꾸므로, 중요한 폴더에서는 반드시 사본을 두고 시작한다.

GitHub에 올려 웹 서비스로 공개하기 — GitHub Pages

지금까지 만든 것은 내 컴퓨터에서만 열린다. 친구에게 주소를 보내 주고, 바이브 코딩 한마당에 작품 URL을 내려면 인터넷에 올려야 한다. 가장 쉬운 방법이 GitHub이다. GitHub은 전 세계 개발자가 코드를 보관하고 나누는 곳인데, GitHub Pages라는 기능으로 index.html이 있는 저장소를 무료 웹사이트로 바꿔 준다. 서버도, 돈도, 설치도 필요 없다.

방법 A — 브라우저만으로 (설치 없음, 10분)

1. 가입한다 github.com에서 Sign up. 학교 구글 계정으로도 되고, 아이디는 나중에 주소에 그대로 들어가므로 부끄럽지 않은 것으로 정한다.
2. 저장소를 만든다 오른쪽 위 + → New repository. 이름은 영문·소문자(예: exam-dday), Public을 고르고 Create.
3. 파일을 올린다 Add file → Upload files에 만든 index.html(그림·CSS 파일이 있으면 함께)을 끌어다 놓고 아래 Commit changes.
4. Pages를 켠다 저장소의 Settings → Pages → Branch를 main, 폴더를 / (root)로 두고 Save.
5. 주소를 받는다 1~2분 뒤 같은 화면 위쪽에 https://아이디.github.io/exam-dday/ 가 뜬다. 이것이 내 웹 서비스 주소다. 휴대폰에서도 열린다.

고칠 때는 3번처럼 같은 이름의 파일을 다시 올리면(덮어쓰기) 1~2분 뒤 자동으로 바뀐다. 저장소 안의 파일을 클릭하고 연필 아이콘으로 바로 고쳐도 된다.

방법 B — Claude Code에게 시킨다 (여러 파일일 때)

파일이 많거나 자주 고친다면 위의 Claude Code로 올리는 일까지 맡긴다. 처음 한 번만 GitHub 명령줄 도구 gh를 설치하고 gh auth login으로 로그인해 둔다(브라우저가 열리며 승인만 누르면 된다). 그 다음부터는 말로 한다.

올리기 전에 꼭 확인

• Public = 전 세계에 공개 · 코드 안의 비밀번호, API 키, 친구 이름·전화번호·사진은 올리기 전에 지운다. 한 번 올라간 것은 지워도 기록에 남는다(8단원 ②·④).
• index.html이 맨 위에 · 폴더 안에 넣으면 주소가 …/폴더이름/이 된다. 헷갈리면 Claude에게 "index.html을 최상위로 옮겨 줘".
• DB·로그인은 안 된다 · Pages는 파일을 보여 주기만 한다. 자료 저장은 브라우저 localStorage로, 서버가 꼭 필요하면 그때 다른 방법(Vercel·Netlify·직접 서버)을 찾는다.
• 주소가 곧 포트폴리오 · 저장소 이름과 첫 화면을 신경 쓴다. 한마당 심사도 이 주소로 들어온다.

작품에 DB 붙이기 — Firebase Firestore

GitHub Pages는 파일을 보여 주기만 한다. 그래서 순위표를 만들어도 그 브라우저에만 남고, 친구가 열면 텅 비어 있다. 여러 사람의 기록을 한곳에 모으려면 DB가 필요하다. 구글이 무료로 주는 Firebase Firestore를 쓰면 서버를 만들지 않고도 된다.

저장하는 곳은 세 단계가 있다

Firestore 무료 한도 (Spark 요금제)

• 저장 용량 1GiB · 하루 읽기 5만 번, 쓰기 2만 번, 삭제 2만 번
• 카드 등록이 필요 없다. 한도를 넘으면 요금이 나오는 게 아니라 그날은 더 안 된다 — 학생 작품에 안전하다.
• 순위표라면 하루 수천 명이 들어와도 한도 안쪽이다.

준비 — 한 번만 하면 된다 (실제 화면으로)

아래는 galaga-rank 프로젝트를 실제로 만들면서 찍은 화면이다. 빨간 네모가 눌러야 할 곳이다. 콘솔 화면은 가끔 바뀌니 글자를 보고 찾으면 된다.

① 프로젝트 만들기

console.firebase.google.com 에 구글 계정으로 로그인 → 프로젝트 만들기.

1프로젝트 이름은 영문 소문자로. 입력하면 아래에 galaga-rank 같은 프로젝트 ID가 자동으로 붙는데, 나중에 코드에 들어가는 값이다.

2Google 애널리틱스는 꺼도 된다. 순위표에는 필요 없다.

330초쯤 기다리면 준비 완료 → 계속.

② 웹 앱 등록하고 설정값 받기

4프로젝트 이름 아래 ＋ 앱 추가.

5플랫폼 중 </> (웹) 선택.

6앱 닉네임을 적고 앱 등록. Firebase 호스팅 체크는 해제한다 — 우리는 GitHub Pages를 쓰기 때문이다.

7여기 나오는 firebaseConfig 를 통째로 복사해 둔다. 회색으로 가린 값은 프로젝트마다 다르다. 이 값들은 비밀번호가 아니라 주소표라서 코드에 넣어 공개해도 된다(⚠️ 아래 설명 참고).

③ Firestore 데이터베이스 만들기

8왼쪽 데이터베이스 및 스토리지 → Firestore. (Realtime Database가 아니다)

9버전은 Standard 그대로 두고 다음.

10위치는 asia-northeast3 (Seoul). 나중에 바꿀 수 없으니 신중히.

11테스트 모드에서 시작 → 만들기. 화면 경고대로 이 상태는 누구나 지울 수 있으니, 바로 다음 단계에서 규칙을 바꾼다.

④ 보안 규칙 게시 — 여기가 진짜 중요한 단계

12규칙 탭 → 내용을 모두 지우고 아래 프롬프트로 받은 규칙을 붙여 넣기 → 게시. 게시해야 적용된다.

확인하는 방법

• 콘솔에서 눈으로 · Firestore Database → 데이터 탭에 방금 넣은 기록이 줄줄이 쌓이는 것이 보인다. 엑셀 표를 보는 느낌이다.
• 다른 기기에서 · 휴대폰으로 같은 주소를 열어 순위표에 내 기록이 보이면 성공이다. 여기서부터 진짜 웹 서비스다.
• 안 될 때 · 브라우저 F12 → Console의 빨간 글씨를 그대로 Claude에게 붙여 넣는다. permission-denied 는 보안 규칙 문제, Failed to fetch 는 설정값 오타인 경우가 많다.

학생 작품에서 꼭 지킬 것

• 실명·학번·연락처를 저장하지 않는다 · 닉네임이면 충분하다. DB에 한 번 들어간 개인정보는 지우기 번거롭다(8단원 ②).
• 지우는 권한은 나만 · 위 규칙처럼 삭제를 막아 두고, 관리가 필요하면 콘솔에서 직접 지운다.
• 욕설·장난 입력을 염두에 둔다 · 글자 수 제한, 금지어 걸러 내기를 함께 요청한다.
• 한도를 지켜본다 · 콘솔 사용량 화면에서 하루 읽기/쓰기 수를 볼 수 있다. 화면을 열 때마다 전체를 읽지 말고 20개만 읽도록 만든 이유가 이것이다.

앱처럼 설치하기 — PWA

여기까지 오면 주소를 눌러 여는 웹사이트다. 여기에 파일 두 개만 더하면 휴대폰 홈 화면에 아이콘이 생기고, 주소창 없는 전체 화면으로 열리며, 인터넷이 끊겨도 실행되는 앱이 된다. 이것을 PWA(Progressive Web App)라고 한다. 앱 스토어에 올리지 않아도 되고, 심사도 비용도 없다.

설치해 보기

• 안드로이드·PC 크롬 · 사이트에 들어가면 주소창 오른쪽에 설치 아이콘이 생긴다. 위 프롬프트대로 만들었다면 화면의 '앱으로 설치' 버튼으로도 된다.
• 아이폰 · 사파리로 열고 공유 → 홈 화면에 추가. (아이폰은 설치 버튼이 뜨지 않는다)
• 확인 · 설치한 아이콘으로 열었을 때 주소창이 사라지면 성공이다. 비행기 모드로 켜 보면 오프라인 동작도 확인할 수 있다.

어떤 순서로 대화했나

1. 한 단락으로 적었다 무엇을 관리하고, 자료는 어디에 두고, 화면은 어떤 느낌인지.
2. “가능한가”부터 물었다 구글 시트를 데이터베이스처럼 써도 되는지, 더 나은 방법은 없는지.
3. 설계를 먼저 받았다 파일을 어떻게 나눌지, 자료를 어떤 표로 만들지 읽고 승인했다.
4. 기능 하나씩 받았다 명부 → 시간표 → 진도 → 출결 순서로, 하나가 돌아가면 다음으로.
5. 쓰면서 고쳤다 실제 수업에서 써 보고 불편한 곳을 “이 부분만” 식으로 고쳐 나갔다.

이 사례에서 배울 점

바이브 코딩에서 사람이 맡는 몫이 바로 여기다. 내가 잘 아는 일에서 시작하면, 프로그래밍을 오래 배운 사람보다 더 쓸모 있는 것을 만들 수 있다.

① AI는 자신 있게 틀린다

그럴듯한 코드와 설명을 내놓지만 실제로는 돌아가지 않거나, 없는 기능을 있는 것처럼 말하기도 한다. 반드시 실행해서 눈으로 확인한다. 확인하지 않은 결과를 남에게 건네지 않는다.

② 남의 개인정보를 올리지 않는다

친구의 이름·연락처·사진, 학생 명단 같은 자료를 대화창에 그대로 올리지 않는다. 연습할 때는 가짜 자료를 쓴다.

③ 학교 과제에는 규칙이 있다

과제나 수행평가에 AI를 써도 되는지는 선생님의 안내를 먼저 확인한다. 허용되는 경우에도 보통 어디에 어떻게 썼는지 밝히는 것이 조건이다. 만든 결과를 내가 이해하지 못한 채 제출하는 것은, 규칙 이전에 나에게 남는 것이 없다.

④ 만든 것을 공개할 때

인터넷에 올릴 때는 다른 사람의 사진·글꼴·음악을 함부로 쓰지 않는다. AI가 가져다 쓴 자료도 마찬가지이므로, 출처와 사용 조건을 물어보고 확인한다.

GitHub에 올리면 코드가 전 세계에 공개된다. 올리기 전에 비밀번호·연락처·친구 이름·학번이 코드나 화면 문구에 남아 있지 않은지 본다. 한 번 올라간 것은 지워도 기록에 남는다.

DB(Firestore)를 붙였다면 남이 넣은 내용도 내 사이트에 뜬다. 닉네임 글자 수를 제한하고, 욕설이 올라오면 콘솔에서 지울 수 있게 해 둔다. 실명·학번은 애초에 받지 않는다.

자주 만나는 문제

배운 것 확인하기

• 바이브 코딩에서 사람이 맡는 몫을 두 가지로 말할 수 있다
• 요구사항 체크리스트 다섯 가지를 보지 않고 떠올릴 수 있다
• 아티팩트로 웹페이지를 하나 만들어 두 번 이상 고쳐 보았다
• 오류가 났을 때 무엇을 복사해 붙여야 하는지 안다
• 대화창에 올리면 안 되는 것 세 가지를 말할 수 있다
• 게임처럼 긴 작품을 단계로 쪼개어 한 번에 하나씩 요청해 보았다
• 만든 것을 GitHub Pages로 올려 내 주소를 하나 갖고 있다
• 브라우저에만 남는 저장(localStorage)과 모두가 보는 저장(DB)의 차이를 말할 수 있다
• 내 작품을 앱처럼 설치해 홈 화면에서 열어 보았다