바이브코딩 실습 1편 — 첫 세팅: AI에게 컴퓨터를 맡기는 날

오늘 30분 뒤, AI가 만든 웹페이지가 내 브라우저에 뜬다. 코드는 한 줄도 안 친다. 전부 말로 시킨다.

이 글 3줄 요약

• 오늘 만나는 낯선 단어는 Node·터미널·npm·claude 네 개뿐이다. 뜻은 진행하면서 하나씩 알려주고, 지금 다 이해 안 돼도 괜찮다.
• 설치 → 터미널 열기 → Claude Code 설치 → 폴더 만들기 → 로그인 → 첫 명령 → 결과 확인. 명령어는 전부 복사해서 붙여넣기만 하면 된다.
• 마지막엔 이름·직업·취미가 들어간 진짜 웹페이지가 브라우저에 뜬다. 코드는 AI가 짜고, 나는 한국어 문장으로 "무엇을 원하는지"만 말한다.

이 글은 AI 바이브코딩 실습 시리즈(전 9편)의 1편이다. 실습 시리즈는 이론 12부작과 짝을 이룬다. 이론이 "터미널이 뭔지, 경로가 뭔지"를 개념으로 설명했다면, 실습은 그걸 실제로 내 컴퓨터에서 한 번 해보는 자리다. 오늘 하는 세팅의 개념적 배경이 궁금하면 이론 1편과 이론 2편을 함께 보면 좋다. 하지만 안 봤어도 상관없다. 이 글은 컴퓨터를 처음 다루는 사람도 그대로 따라 하면 끝까지 가도록 짰다.

오늘 이걸 만든다 — 30분 뒤의 결과물

먼저 오늘 무엇을 손에 쥐게 되는지부터 보자. 결과물은 내 소개 웹페이지다. 이름, 하는 일, 좋아하는 것 세 가지가 들어간 진짜 웹페이지. 상상 속 화면이 아니라, 더블클릭하면 브라우저에 뜨고 남에게 링크로 보낼 수도 있는 파일이다. 화면으로 그리면 이런 모습이다.

안녕하세요, 김OO입니다
카페를 운영하고 있어요 ☕
─────────────────────
이런 걸 좋아합니다
#커피  #등산  #고양이

중요한 건 이걸 만드는 방식이다. 코드는 한 줄도 안 친다. "이런 페이지 만들어줘"라고 말로 시키면 AI가 대신 만든다. 오늘 우리가 하는 일은 딱 하나로 요약된다. 그 "말로 시킬 수 있는 AI"를 내 컴퓨터에 앉히는 것. 세팅만 끝나면 그다음부터는 대화가 전부다.

시작 전 준비물 — 이 5개면 된다

본격적으로 들어가기 전에 손에 있어야 할 것들이다. 특별한 장비는 없다.

여기서 왕초보가 가장 헷갈리는 지점을 미리 짚자. 무료로 어디까지 되느냐다. 웹이나 앱에서 쓰는 Claude 채팅은 무료다. 하지만 오늘 쓰는 건 그 채팅이 아니라 내 컴퓨터를 직접 다루는 Claude Code다. 이건 AI가 내 컴퓨터에 파일을 만들고 고치는 도구라서 Pro 구독부터 쓸 수 있다. 오늘 유료가 필요한 지점은 이 하나뿐이다. 나머지 설치·가입은 전부 공짜다.

오늘의 지도 — 낯선 단어 4개가 전부다

STEP으로 들어가기 전에 전체 흐름을 한눈에 보자. 오늘 새로 만나는 낯선 단어는 딱 네 개다. Node · 터미널 · npm · claude. 이 네 개만 넘으면 세팅이 끝난다.

STEP 1        STEP 2·3            STEP 4·5         STEP 6·7
Node.js 설치 → Claude Code 설치 →  폴더 만들고 로그인 → 첫 명령·결과 확인
받침대 깔기    터미널에 명령 한 줄   책상 만들고 계정 연결   말로 시키고 브라우저 확인

각 단어의 뜻은 해당 STEP에서 그때그때 풀어준다. 지금 이 네 단어가 다 낯설어도 전혀 괜찮다. 하나씩 만나면서 자연스럽게 익으니, 지금은 "아, 오늘 넘을 산이 네 개구나" 정도만 알고 시작하면 된다.

STEP 1 — Node.js 설치: 받침대 프로그램 먼저 깔기

첫 단추는 Node.js 설치다. 순서는 이렇다.

1. 크롬 주소창에 nodejs.org를 그대로 입력해 접속한다.
2. 초록색 LTS 버튼을 클릭한다. LTS는 "가장 안정적인 버전"이라는 뜻이다. 옆에 최신 버전이 따로 있어도 그건 말고 이 LTS로 받는다.
3. 내려받은 파일을 실행하고 계속 Next를 누른다. 뭘 물어봐도 그냥 Next·동의·Install이다. 기본값이 정답이다.

여기서 "왜 이걸 먼저 하나?" 싶을 수 있다. Claude Code는 Node라는 받침대 위에서 도는 프로그램이다. 세탁기(Claude Code)를 사기 전에 콘센트(Node)부터 꽂아두는 것과 같다. 콘센트가 없으면 세탁기를 놓을 자리가 없다. 그래서 Node를 제일 먼저 깐다.

체크포인트. 설치 마법사 마지막에 "Finish" 버튼이 보이면 성공이다. 눌러서 창을 닫는다.

STEP 2 — 터미널 열기: 까만 화면은 고장이 아니다

이제 명령을 입력할 창을 연다. 이 창을 터미널이라고 부른다.

1. 왼쪽 아래 시작 버튼(Windows 로고)을 클릭한다.
2. **"터미널"**이라고 한글 그대로 검색한다.
3. Windows PowerShell을 클릭해서 연다. "터미널"이 안 뜨면 "PowerShell"로 검색하면 된다.

창을 열면 까만 바탕에 글자만 깜빡인다. 이게 정상이다. 버튼도 메뉴도 없어서 처음엔 당황스럽지만, 고장이 아니다. 이 터미널이 왜 필요하냐면, 클릭은 화면에 '있는 버튼'만 누를 수 있는 반면 터미널은 버튼이 없는 일도 문장으로 시킬 수 있는 창구이기 때문이다. AI에게 일을 시키려면 이 창구가 꼭 있어야 한다.

열리면 대략 이런 화면이다.

Windows PowerShell
(c) Microsoft Corporation.

PS C:\Users\나>

체크포인트. 초록색 PS C:\Users\...> 같은 글자가 보이고 커서가 깜빡이면 준비 완료다.

STEP 3 — Claude Code 설치: 이 한 줄을 복붙한다

터미널이 열렸으면 아래 한 줄을 복사해서 붙여넣는다.

npm install -g @anthropic-ai/claude-code

붙여넣고 Enter를 누르면 글자가 주르륵 지나간다. 정상이다. 1~2분만 기다리면 된다.

여기 처음 나온 단어가 npm이다. npm은 개발 프로그램 전용 앱스토어라고 보면 된다. 스마트폰에서 앱스토어를 열어 앱을 받듯, 이 한 줄은 '앱스토어에서 Claude Code를 다운로드+설치' 버튼을 누르는 것과 같다. 방금 깐 Node가 이 npm을 딸려 오게 했기 때문에 지금 이 명령이 먹힌다.

체크포인트.

STEP 4 — 작업 폴더 만들기: AI에게 내줄 책상 하나

설치가 끝났으면 오늘 작업할 폴더를 만든다. 아래 두 줄을 한 줄씩 복사해서 Enter를 누른다.

mkdir my-first-ai

cd my-first-ai

mkdir은 "폴더 만들기"고, cd는 "그 폴더 안으로 들어가기"다. 그래서 첫 줄로 my-first-ai라는 폴더를 만들고, 둘째 줄로 그 안에 들어가는 것이다.

왜 폴더부터 만들까. AI에게 작업할 책상 하나를 정해주는 것이다. 이걸 안 하면 AI가 파일을 어디에 만들지 몰라 헤맨다. 그리고 이 폴더는 AI가 컴퓨터 아무 데나 손대는 것도 막아주는 울타리 역할을 한다. 책상 위에서만 일하라고 자리를 정해주는 셈이다.

체크포인트. 프롬프트 끝이 ...\my-first-ai>처럼 폴더 이름으로 바뀌어 보이면, 그 폴더 안에 제대로 들어와 있는 것이다.

STEP 5 — claude 실행 + 로그인: AI를 깨우고 계정 연결

이제 AI를 켠다. 마지막 낯선 단어 claude가 여기서 나온다.

claude

1. claude를 입력하고 Enter를 누른다. 방금 설치한 AI를 실행하는 것이다.
2. 잠시 뒤 브라우저 로그인 창이 자동으로 열린다.
3. 내 Claude 계정으로 승인한다. "허용"을 눌러 터미널과 계정을 연결한다.

왜 로그인까지 해야 할까. 지금까지 설치한 건 껍데기일 뿐이다. 내 Claude 계정을 연결해야 AI 두뇌가 붙는다. 넷플릭스 앱을 깔고 로그인해야 영화가 나오는 것과 똑같다. 앱만 있고 로그인이 없으면 빈 화면이다.

성공하면 터미널에 이런 환영 화면이 뜬다.

✻ Welcome to Claude Code

  /help 도움말 · /exit 종료
  cwd: ...\my-first-ai

>

체크포인트. 터미널에 ✻ 로고와 환영 화면이 뜨고 > 프롬프트가 보이면 AI가 켜진 것이다. 이제부터는 여기에 한국어로 말을 걸면 된다.

STEP 6 — 첫 명령: 이제 말로 시킨다 (코드 아님)

드디어 AI에게 첫 일을 시킨다. 아래 문장을 복사해서 터미널의 > 뒤에 붙여넣고 Enter를 누른다.

내 자기소개 웹페이지를 만들어줘. 이름, 하는 일, 좋아하는 것 3가지를 넣고, 파일명은 index.html로.

다시 강조한다. 이건 프로그래밍 코드가 아니라 그냥 한국어 문장이다. 이름·직업·취미는 여러분 걸로 바꿔도 좋다. 여기서 바이브코딩의 핵심이 드러난다. 코드는 AI가 대신 쓴다. 나는 '무엇을 원하는지'만 정확히 말하면 된다. 그게 전부다.

명령을 넣으면 AI가 곧바로 파일을 만들지 않고 "index.html 파일을 만들어도 될까요?"라고 먼저 물어본다. 놀라지 말고 **Yes(허락)**를 누르면 된다. 그러면 AI가 알아서 파일을 뚝딱 만든다. AI가 내 컴퓨터에 뭔가를 만들거나 고치기 전에 항상 이렇게 허락을 구하는 건, 함부로 손대지 않겠다는 안전장치다. 겁내지 말고 허락하면 된다.

STEP 7 — 결과 확인: 오늘의 성공 화면

파일이 만들어졌으면 이제 눈으로 확인할 차례다.

1. 파일 탐색기로 my-first-ai 폴더를 연다. 보통 문서 폴더 안에 있다.
2. index.html을 더블클릭한다. 크롬이 열리며 내 페이지가 뜬다.

브라우저에 이런 화면이 뜨면 오늘의 목표 달성이다.

안녕하세요, 김OO입니다
카페를 운영하고 있어요 ☕
─────────────────────
이런 걸 좋아합니다
#커피  #등산  #고양이

더블클릭하면 왜 페이지가 뜰까. index.html은 브라우저가 읽는 문서 파일이다. 더블클릭은 **'크롬아, 이 문서 좀 열어줘'**라고 부탁하는 것과 같다. 그래서 크롬이 그 문서를 읽어 화면으로 그려준다.

여기서 한 발 더. 다시 터미널로 돌아가 **"배경을 하늘색으로 바꿔줘"**라고 시켜보자. AI가 코드를 고치고, 브라우저를 새로고침하면 색이 바뀌어 있다. 만든 걸 말로 고치는 이 맛보기가, 바로 다음 편에서 본격적으로 다룰 내용이다.

골라서 더 해보기

첫 페이지를 만들었으면 이제 응용이다. 프롬프트를 바꾸면 결과도 바뀐다. 이름·날짜·메뉴를 여러분 걸로 고쳐서 시키기만 하면 된다. 아래 다섯 개는 전부 오늘 배운 것만으로, index.html 하나 더블클릭하면 뜨는 난이도다. 마음에 드는 걸 골라 그대로 복사해서 터미널에 넣어보자.

모임 초대장 — 날짜·장소·참석 버튼이 담긴 초대 페이지.

다음 달 우리 모임 초대장 페이지를 만들어줘. 날짜·장소·지도 링크 자리·참석 여부 버튼 넣고 파스텔톤으로.

D-day 카운터 — 그날까지 며칠 남았는지 크게 보여주는 페이지.

우리 가족 여행까지 며칠 남았는지 보여주는 D-day 페이지 만들어줘. 날짜는 8월 15일.

버킷리스트 — 클릭하면 줄이 그어지는 체크리스트.

올해 버킷리스트 10개를 체크리스트로 만들어줘. 클릭하면 줄이 그어지게.

점심 메뉴 뽑기 — 버튼을 누르면 메뉴 하나를 랜덤으로 뽑아주는 페이지.

점심 메뉴 5개 중 하나를 랜덤으로 뽑아주는 버튼 페이지 만들어줘.

우리 가게(팀) 소개 한 장 — 상호·영업시간·메뉴·전화 걸기 버튼이 담긴 소개 페이지.

우리 가게 소개 페이지를 만들어줘. 가게 이름, 영업시간, 메뉴 3개, 전화 걸기 버튼.

막혔을 때

따라 하다 보면 예상 못 한 화면이 나올 수 있다. 자주 나는 세 가지와 대처법이다. 셋 다 고장이 아니니 놀라지 말자.

그리고 대원칙 하나. 뭐가 안 되면 AI에게 그대로 물어보면 된다. 에러 메시지를 복사해서 "이거 왜 이래?"라고 붙여넣으면 AI가 원인과 해결책을 알려준다. 혼자 끙끙댈 필요가 없다.

오늘 배운 것 — 만진 단어 4개가 전부다

오늘 넘은 산을 정리하자. 새로 만난 단어는 딱 네 개였다.

오늘 한 게 바로 이론 시리즈에서 말한 "말로 시키고 결과로 확인"이었다. 이론 1편의 바이브코딩 개념을 실제로 한 번 해본 것이고, 터미널을 더 깊이 알고 싶으면 이론 2편에서 명령어와 경로를 자세히 다룬다.

숙제는 없다. 단, 오늘 만든 index.html을 한 번 더 열어보고 "배경을 하늘색으로 바꿔줘"까지 시켜봤다면 오늘은 완벽한 성공이다. 다음 편에서는 만든 걸 말로 세 번 고쳐보며 진짜 개발자처럼 다뤄본다. 메뉴 룰렛 미니앱을 만들면서 "말로 만들고 말로 고치기"의 감을 제대로 잡는 자리다.

다음 편 — 바이브코딩 실습 2편