MODULE 3 · 환경 준비

개발 환경
준비하기

앱을 만들려면 도구가 필요합니다. 다만 모두가 똑같이 준비할 필요는 없습니다. 자기 목표에 맞는 만큼만 준비하면 됩니다. 가장 쉬운 시작부터 안내합니다.

읽는 데 7분 · WOWD.LAB 바이브코딩

딱 필요한 만큼만 준비합니다

아래 5단계 중 지금 필요한 곳까지만 하세요

"개발 환경"이라는 말에 겁먹을 필요 없습니다. 준비는 계단식이에요. 완전 처음이라면 1단계 하나면 충분하고, 더 하고 싶어질 때 한 칸씩 올라가면 됩니다.

데스크탑 앱만 설치

완전 초보자 · 처음 만들어보는 사람 — 여기까지면 충분

VS Code (코드 에디터) 추가

파일을 직접 다루고, 본격적으로 하고 싶은 사람

GitHub (코드 보관·버전 관리)

코드를 안전하게 보관하고, 되돌리기가 필요한 사람

Vercel (배포)

만든 앱을 인터넷 링크로 공유하고 싶은 사람

Supabase (데이터 저장)

여럿이 함께 쓰거나 기록이 남아야 하는 사람

1데스크탑 앱만 설치

가장 쉬운 시작 — 이것만으로 앱을 만들 수 있습니다

가장 간단한 방법은 AI 코딩 도구의 데스크탑 앱을 설치하는 것입니다. 앱을 깔고 로그인하면, 그 안에서 바로 AI와 대화하며 앱을 만들고 화면으로 확인할 수 있어요. 아래 둘 중 하나만 고르면 됩니다.

Claude Code

Anthropic

설치데스크탑 앱 설치 후 로그인

계정Claude 유료 플랜 (Pro 등)

비고앱 안에서 코드·미리보기

Codex

OpenAI

설치데스크탑 앱 설치 후 로그인

계정ChatGPT 유료 플랜 (Plus 등)

비고Windows·macOS 지원

🙂 안심하세요 — 별도 개발 환경이 필요 없습니다

데스크탑 앱으로 시작하면 node.js나 python 같은 프로그램을 따로 설치하지 않아도 됩니다. 앱 하나만 깔면 돼요. 초보자가 가장 많이 막히는 지점이 사라집니다.

단, Windows에서 Claude Code를 쓸 경우 Git 하나만 추가로 설치하면 됩니다. (아래 설치 방법에 포함)

📥 데스크탑 앱 설치 방법 자세히 보기▼

Claude Code 또는 Codex 중 하나를 설치하면 됩니다. 아래에서 고른 쪽만 따라 하세요.

◾ Claude Code (Anthropic)

claude.com/download에서 데스크탑 앱을 내려받아 설치합니다.

앱을 열고 Claude 계정으로 로그인합니다. (코드 탭은 Pro 등 유료 플랜에서 제공)

왼쪽/상단의 코드(Code) 탭을 열면 바로 앱을 만들 준비가 끝납니다.

Claude 데스크탑 앱의 코드 탭. 왼쪽에서 Code를 고르고, 대화하듯 요청하면 오른쪽에 앱이 만들어지고 미리보기로 바로 보입니다. (실제 화면은 버전에 따라 조금 다를 수 있어요)

⚠️ Windows에서 로컬 작업을 하려면 Git이 필요해요. git-scm.com에서 설치(기본값 그대로 Next) 후 앱을 재시작하면 됩니다.

◾ Codex (OpenAI)

openai.com/codex에서 데스크탑 앱을 내려받아 설치합니다. (Windows·macOS 지원)

앱을 열고 ChatGPT 계정으로 로그인합니다. (Plus 등 유료 플랜에 포함)

로그인하면 바로 앱을 만들 준비가 끝납니다.

💡 링크나 화면은 업데이트로 조금씩 달라질 수 있어요. 막히면 각 서비스의 안내 페이지를 확인하세요.

완전 처음이라면 여기까지가 오늘의 준비입니다. 이 상태로 다음 모듈부터 바로 앱을 만들 수 있어요.

완전 초보자는 여기까지 ✓

2VS Code(코드 에디터) 설치하기

AI가 만든 코드를 직접 열어보고 관리하는 작업실

VS Code는 마이크로소프트가 만든 무료 코드 에디터입니다. 쉽게 말하면, 내 앱을 이루는 파일들을 한 화면에서 열어보고 다루는 작업실이에요. 왼쪽에 파일 목록이 있고, 가운데에서 내용을 보고, 아래에서 명령을 실행합니다.

왼쪽에 파일 목록, 가운데에 코드, 아래에 실행 결과. 내 앱의 구조가 한눈에 보입니다.

바이브코딩을 본격적으로 하는 사람들은 대부분 VS Code를 씁니다. AI가 코드를 만들어주더라도, 그 결과물을 직접 열어보고 관리할 작업실이 있으면 훨씬 편하기 때문이에요.

직접 써보니 이런 점이 좋았습니다

여러 프로젝트를 동시에 열어두고 오가며 관리하기 수월하다
배포에 필요한 .env 같은 설정 파일을 직접 열어 입력할 수 있다
어떤 파일이 있고 무엇이 바뀌었는지 눈으로 확인하며 작업할 수 있다

📥 VS Code 설치 + Claude Code 연결 방법 자세히 보기▼

① VS Code 설치

code.visualstudio.com/download에서 자기 운영체제(Windows/Mac) 버튼을 눌러 내려받습니다.

내려받은 파일을 실행하고 모든 설정은 기본값 그대로 "다음 → 설치 → 종료"로 진행합니다.

(선택) 한국어로 쓰려면 왼쪽 Extensions(네모 4개) 아이콘 → korean 검색 → "Korean Language Pack" 설치 → 재시작.

VS Code 시작 화면. 왼쪽 "Open…"으로 내 프로젝트 폴더를 엽니다. 최근 연 폴더는 아래 Recent에 나타나요.

② VS Code에 Claude Code 연결 (두 방법 중 선택)

방법 A · CLI(실습 기준) — 상단 메뉴 "터미널 > 새 터미널"을 열고 claude 입력 → 브라우저에서 로그인. 더 강력해서 실습에서 기준으로 씁니다.

방법 B · 확장팩 — 터미널이 불편하면, 왼쪽 Extensions에서 게시자가 Anthropic인 Claude 확장을 설치 → "Sign in with Claude"로 로그인.

⚠️ npm을 찾을 수 없다는 오류가 나면 아래 "Node.js 설치 방법" 토글을 참고해 설치한 뒤 VS Code를 재시작하세요. / 확장팩은 게시자가 Anthropic인지 반드시 확인(유사 이름의 비공식 확장 주의).

📥 VS Code 설치 + Codex 연결 방법 자세히 보기▼

① VS Code 설치

code.visualstudio.com/download에서 자기 운영체제(Windows/Mac) 버튼을 눌러 내려받습니다.

내려받은 파일을 실행하고 모든 설정은 기본값 그대로 "다음 → 설치 → 종료"로 진행합니다.

(선택) 한국어로 쓰려면 왼쪽 Extensions(네모 4개) 아이콘 → korean 검색 → "Korean Language Pack" 설치 → 재시작.

② VS Code에 Codex 연결 (두 방법 중 선택)

방법 A · CLI — 상단 메뉴 "터미널 > 새 터미널"을 열고 codex 입력 → 브라우저에서 ChatGPT 계정으로 로그인.

방법 B · 확장팩 — 왼쪽 Extensions에서 게시자가 OpenAI인 Codex 확장을 설치 → ChatGPT 계정으로 로그인.

⚠️ codex 명령이 없다는 오류가 나면 아래 "Node.js 설치 방법" 토글을 참고해 Node.js를 설치한 뒤 터미널에서 npm install -g @openai/codex로 설치할 수 있습니다. / 확장팩은 게시자가 OpenAI인지 반드시 확인.

🔧 Node.js 설치 방법 (CLI에서 오류가 날 때만)▼

CLI 방식으로 연결할 때 npm을 찾을 수 없습니다 또는 codex 명령이 없습니다 같은 오류가 나면, Node.js가 설치되어 있지 않아서입니다. 아래 순서대로 설치하세요. (데스크탑 앱만 쓰는 경우에는 필요 없습니다.)

nodejs.org에 접속합니다.

왼쪽의 "LTS" 버튼을 클릭해 내려받습니다. (LTS = 가장 안정적인 버전)

내려받은 파일을 더블클릭 → 모든 설정 기본값 그대로 "Next → Install"로 설치합니다.

설치가 끝나면 VS Code를 완전히 종료했다가 다시 실행합니다. (설치 내용이 반영되려면 재시작이 필요)

터미널을 새로 열고 아까의 명령(claude 또는 codex)을 다시 입력합니다.

💡 제대로 설치됐는지 확인하려면 터미널에 node -v를 입력해보세요. v20.x.x처럼 버전 숫자가 나오면 정상입니다.

📁 폴더에서 시작하세요 — 프로젝트의 출발점

앱 하나는 폴더 하나입니다. 그 안에 파일들이 모여 하나의 앱이 돼요. 그래서 VS Code로 작업할 때는 항상 "폴더 열기(Open Folder)"로 내 프로젝트 폴더를 열고 시작합니다.

폴더를 처음 열면 "이 폴더를 신뢰하시겠습니까(Trust the authors)"라고 물어봐요. 내가 만든 폴더이니 반드시 신뢰(Trust)를 눌러야 정상적으로 작업할 수 있습니다.

※ 데스크탑 앱에서 만든 파일도 그대로 이어서 쓸 수 있어요. 일반 파일(html·js·css)이라 VS Code로 그 폴더를 열면 바로 보입니다. 폴더 위치가 헷갈리면 Claude에게 "지금 작업 중인 폴더 경로를 알려줘"라고 물어보세요.

3코드 보관·버전 관리 (GitHub)

배포에 앞서 — 내 코드를 창고에 안전하게 보관하기

GitHub는 내 앱 코드를 보관하는 창고입니다. 동시에 수정할 때마다 버전을 기록해두는 도구이기도 해요. 배포(다음 단계)를 하려면 먼저 코드가 이 창고에 올라가 있어야 합니다. 그래서 GitHub를 먼저 준비합니다.

GitHub를 쓰면 좋은 이유 — 버전 관리

수정할 때마다 되돌릴 수 있는 저장 지점이 남는다
앱이 갑자기 망가져도 잘 되던 때로 복구할 수 있다
창고에 보관돼 컴퓨터가 바뀌어도 이어서 작업할 수 있다

💾 커밋과 푸시가 뭔가요 — 게임 세이브로 비유하면

구글 드라이브 같은 자동저장은 "지금 이 순간"을 계속 덮어씁니다. 편하지만 "어제 버전으로 돌아가고 싶어"가 안 돼요. 세이브 슬롯이 1개뿐인 셈이죠.

커밋은 내가 원할 때 버전을 찍어두는 것 — 세이브 슬롯이 무한개라, 언제든 원하는 시점으로 돌아갈 수 있습니다. 코드는 한 줄만 잘못 바꿔도 전체가 망가질 수 있어서, "추가했더니 기존 게 안 되네" 싶을 때 이전 버전으로 즉시 복구할 수 있어요.

커밋 = 내 컴퓨터에 버전 저장 / 푸시 = 그 버전을 GitHub 창고에 올림.

📥 GitHub 가입 + GitHub Desktop 설치 방법 자세히 보기▼

① GitHub 계정 만들기

github.com/signup 접속 → "Continue with Google"로 구글 계정 연결이 가장 간편합니다. Username(영문)이 내 저장소 주소가 됩니다.

구글이 막힌 환경이면 이메일+비밀번호로 가입: 비밀번호(8자 이상, 숫자+소문자) → Username(영문) → 이메일로 온 코드 입력. Username·Password는 반드시 메모.

② GitHub Desktop 설치

desktop.github.com에서 "Download for Windows"(또는 Mac) → 파일 실행하면 자동 설치됩니다.

"Sign in to GitHub.com" → 브라우저에서 방금 만든 계정으로 로그인 → "Authorize desktop" → "Finish".

③ 내 앱을 GitHub에 올리기

저장소로 만들기 — GitHub Desktop → File > New repository. 아래 그림처럼 Name(영문, 예: Myapp), Description(선택)을 입력하고, "Initialize this repository with a README"에 체크, Git Ignore는 "Node" 선택 후 "Create Repository".

기존 앱 폴더가 이미 있다면 File > Add local repository로 그 폴더를 선택해도 됩니다.

올리기(Publish) — 상단 "Publish repository" 버튼을 누르면 GitHub.com에 올라갑니다.

이후 수정할 때 — GitHub Desktop에서 Summary에 메모 입력 → "Commit to main" → 상단 "Push origin".

저장소를 만들 때: 이름 입력 → README 체크 → Git Ignore를 Node로 선택 → Create Repository.

GitHub Desktop 커밋 화면 — 수정 후 올릴 때: 왼쪽에 바뀐 파일 목록이 뜹니다. 아래 칸에 메모(예: "버튼 위치 수정")를 쓰고 **"Commit … to main"**을 누른 뒤, 상단 **"Push origin"**까지 하면 GitHub에 올라갑니다.

💡 Git Ignore를 "Node"로 선택하면 올리면 안 되는 파일(.env.local 등)이 자동으로 걸러집니다. 나중에 Supabase 키를 안전하게 보관할 때 꼭 필요한 설정이에요.

4배포하기 (Vercel)

GitHub의 코드를 인터넷에 띄워 주소 만들기

먼저 배포가 무슨 말인지부터. 지금까지 만든 앱은 내 컴퓨터 안에서만 돌아갑니다. 나만 볼 수 있죠. 배포는 이 앱을 인터넷에 올려서, 누구나 주소(URL)로 접속할 수 있게 만드는 일입니다. "내 컴퓨터에서만 되던 걸 세상에 공개하는 것"이라고 보면 돼요.

배포를 맡는 도구가 Vercel입니다. 앞 단계에서 GitHub 창고에 올려둔 코드를 가져와, 인터넷 주소(URL)를 만들어 전 세계에 띄워줍니다. 클릭 몇 번이면 되고, 무료로 시작할 수 있어요.

🔗 한 번 연결하면 — 커밋·푸시만으로 자동 배포

GitHub와 Vercel을 한 번 연결해두면, 이후에는 앱을 고칠 때마다 GitHub Desktop에서 커밋 + 푸시만 하면 Vercel이 자동으로 다시 배포합니다. 매번 배포 버튼을 누를 필요가 없어요. 이것이 GitHub와 Vercel을 함께 쓰는 이유입니다.

📥 Vercel 가입 + 배포 방법 자세히 보기▼

Vercel 가입 — vercel.com/signup에서 "Hobby"(무료) 선택 → "Continue with GitHub"로 연결. (앞 단계의 GitHub 계정으로 로그인)

저장소 가져오기(Import) — Vercel 대시보드 → "Add New > Project" → 목록에서 내 저장소 선택 → "Import". (저장소가 안 보이면 "Adjust GitHub App Permissions" → All repositories → Save)

배포(Deploy) — Framework Preset은 "Other" → 나머지 그대로 → "Deploy" → 30초~1분 대기.

내 앱 URL 확인 🎉 — 배포가 끝나면 Domains에 주소가 생깁니다(예: my-app-abc.vercel.app). 클릭해서 열어보고, 휴대폰으로도 접속해보고, 카톡으로 공유해보세요.

Vercel 배포 성공 화면 — 배포가 끝난 화면. Status가 "Ready"가 되고, Domains에 내 앱 주소가 생깁니다. 이 주소를 누구에게나 공유할 수 있어요.

5데이터 저장하기 (Supabase)

여럿이 쓰거나, 기록이 남아야 한다면

DB(데이터베이스)는 앱이 만든 정보를 모아 보관하는 창고입니다. 왜 필요한지 익숙한 예로 볼게요.

💬 카톡은 어떻게 작동할까요

내가 보낸 메시지가 상대방 휴대폰으로 직접 날아가는 게 아니에요. 먼저 서버(DB)에 저장되고, 상대방이 앱을 열면 그 저장된 내용을 불러와서 보여주는 방식입니다.

그래서 상대가 접속해 있지 않아도 메시지가 남아 있고, 나중에 열어도 대화가 그대로 있는 거예요. 이 "저장하고 불러오는 창고"가 바로 DB입니다.

⚠️ DB가 없으면 무슨 일이 생기나

DB가 없는 앱은 기억을 못 합니다. 입력한 내용이 그 순간 화면에만 있다가, 새로고침하거나 앱을 닫으면 전부 사라져요.

또 내 화면에 입력한 건 나만 보입니다. 다른 사람은 볼 수 없어요. 여럿이 함께 쓰려면 정보가 모이는 공용 창고, 즉 DB가 반드시 필요합니다.

이럴 때 DB가 필요합니다

입력한 내용이 다시 열어도 남아 있어야 할 때
여러 사람이 같은 앱에 접속해 함께 쓸 때
설문·신청처럼 정보를 모아야 할 때

DB를 제공하는 서비스는 여럿인데, 우리는 Supabase를 씁니다. 초보자가 시작하기 쉽고, 무료로 충분히 쓸 수 있으며, 바이브코딩과 잘 맞기 때문이에요. AI에게 "Supabase로 데이터를 저장하게 해줘"라고 하면 연결까지 잘 도와줍니다.

📥 Supabase 가입 + 연결 방법 자세히 보기▼

Supabase 가입 — supabase.com → "Start your project" → "Continue with GitHub"로 연결.

새 프로젝트 만들기 — "New project" → Project name(영문) → Database Password(반드시 메모, 나중에 못 봄) → Region은 "Northeast Asia (Seoul)" → Free 플랜 → 생성.

연결 정보 복사 — Settings > API에서 "Project URL"과 "anon public" 키를 복사해 메모장에 저장. ("service_role" 키는 절대 복사 금지 — anon public만 사용)

테이블 만들기 — Claude에게 "내 앱(prd.md 참고)에 필요한 Supabase 테이블 SQL을 만들어줘"라고 요청 → Supabase의 SQL Editor에 붙여넣고 Run → "Table editor"에서 테이블 확인.

앱에 연결 — Claude에게 ".env.local에 저장한 키로 Supabase를 연결하고, 기존 코드를 교체해줘"라고 요청. (키를 코드에 직접 넣지 말고 환경변수로 불러오게)

동작 확인 & 배포 — 앱에서 데이터를 입력해보고 Supabase Table editor에서 보이면 성공. 마지막으로 Vercel의 Environment Variables에도 같은 키를 등록하고 Redeploy.

anon public만 복사해서 씁니다(브라우저에 담겨도 되는 키). service_role은 관리자 키라 절대 코드나 화면에 노출하면 안 됩니다.

※ Project URL은 프로젝트 Overview 화면 상단에서도 확인할 수 있어요. URL과 anon 키는 앱이 작동하려면 브라우저에 담기는 값이라 그 자체로 비밀은 아니지만, 교육·공유 자료에는 실제 값을 그대로 노출하지 않는 게 안전합니다.

🚨 API 키는 절대 코드에 직접 넣지 마세요. 코드에 넣으면 GitHub에 올리는 순간 전 세계에 공개됩니다. 반드시 .env.local 파일에 보관하고, 커밋·푸시 전에 변경 목록에 .env.local이 없는지 확인하세요. (GitHub 저장소를 Git Ignore "Node"로 만들었다면 자동으로 걸러집니다)

데이터 저장은 모든 앱에 필요한 건 아닙니다. 혼자 쓰는 간단한 도구라면 이 단계는 건너뛰어도 됩니다. 필요해질 때 배우면 돼요.

핵심 요약

환경 준비는 계단식이다. 지금 필요한 칸까지만 하면 된다.
완전 초보자는 데스크탑 앱 하나면 충분하다. node.js·python 불필요.
VS Code는 배포·파일 관리가 필요해질 때 더한다.
GitHub(버전 관리)·Vercel(배포)·Supabase(데이터)는 필요한 사람만 올라가면 된다.

다음 모듈

4. PRD와 4개 문서 만들기 →