본문으로 건너뛰기
AI 바이브코딩 입문 · 1회차

도구를 준비하고, AI에게 말로 시켜서 첫 결과물을 내 손으로 만든다.

AI 도구 세팅과 첫 결과물 만들기

  • 프롬프트 9
  • 개념 7
  • 링크 4
내 진행 0/9

시작 전에 — 준비물

  • 인터넷에 연결된 노트북
  • Claude를 쓸 수 있는 계정
  • 결과물을 모아 둘 빈 폴더 하나
  • 만들고 싶은 것에 대한 짧은 메모 (예: 내 소개 페이지, 우리 가게 안내 페이지)
STEP 010/3

AI 도구와 작업 환경 준비

AI에게 일을 맡기려면 무엇을 먼저 알려 주어야 할까요?

AI는 내가 누구이고 무엇을 하려는지 모른 채 시작합니다. 첫 대화에서 직무, 목표, 수준을 알려 주면 이후 답이 훨씬 맞아집니다.

코딩 도구의 설치 방법은 시기에 따라 바뀝니다. 공식 문서의 설치 안내를 따라 설치하고, 막히는 곳은 화면 그대로 AI에게 물어봅니다.

  • Claude에 로그인해 대화를 시작했다
  • 결과물을 모을 폴더를 만들었다
  • 공식 문서를 열어 설치 안내를 확인했다
P1

나를 소개하고 목표 전하기

첫 대화에서 AI가 내 상황을 이해하게 만듭니다.

나는 [직무]를 맡고 있고, 코딩은 해 본 적이 [없어 / 조금 있어]. 이번 4주 동안 AI로 [만들고 싶은 것]을 만들어 보려고 해. 내 수준에 맞춰 쉬운 말로 설명해 줘. 모르는 용어가 나오면 한 줄로 풀어서 알려 줘.
P2

작업 폴더 정하기

결과물을 둘 폴더 이름과 구조를 정합니다.

AI로 만든 결과물을 한곳에 모으려고 해. 폴더 이름은 영어 소문자와 하이픈만 써서 정하고 싶어. [만들고 싶은 것]에 어울리는 폴더 이름 후보를 3개 알려 주고, 폴더를 어디에 만들면 나중에 찾기 쉬운지도 설명해 줘.
P3

막힌 화면 물어보기

설치나 실행 중 나온 메시지를 AI에게 그대로 보여 주고 해결 방법을 묻습니다.

[도구 이름]을 설치하다가 아래 메시지가 나왔어. 무슨 뜻인지 쉬운 말로 설명하고, 내가 확인해야 할 것을 순서대로 알려 줘. 확신이 없는 부분은 공식 문서에서 확인하라고 말해 줘.

[화면에 나온 메시지를 그대로 붙여넣기]

AI에게 먼저 상황을 알려 주면 이후의 모든 답이 달라집니다.

STEP 020/3

첫 결과물 만들기

한 문장으로 시킨 일이 화면으로 나오려면 무엇을 적어야 할까요?

처음에는 완성도보다 결과가 눈에 보이는 것이 중요합니다. 한 장짜리 웹 페이지처럼 브라우저에서 바로 열리는 결과물이 좋습니다.

무엇을, 누구에게, 어떤 느낌으로 보여 줄지를 적으면 AI가 빈칸을 덜 추측합니다.

P4

만들 것 정하기

첫 결과물의 범위를 작게 좁힙니다.

나는 [직무]이고 [만들고 싶은 것]을 만들어 보고 싶어. 코딩을 모르는 사람이 오늘 안에 끝낼 수 있는 크기로 줄여 줘. 선택지를 3개 주고, 각각 만드는 데 걸리는 대략의 시간과 결과 모습을 한 줄씩 적어 줘.
P5

한 장짜리 페이지 만들기

브라우저에서 열어 볼 수 있는 첫 페이지를 만듭니다.

[주제]를 소개하는 한 장짜리 웹 페이지를 index.html 파일 하나로 만들어 줘. 제목, 두세 문장의 소개, 연락 방법을 넣어 줘. 글자는 읽기 편한 크기로 하고, 색은 [차분한 / 밝은] 느낌으로 맞춰 줘. 만든 뒤에 파일을 어떻게 열어 보는지도 알려 줘.
  • 내용만 바꿔 다시 요청
    같은 구조는 두고 소개 문장과 연락 방법만 아래 내용으로 바꿔 줘.
    
    [새로 넣을 내용]
산출물 · index.html
P6

만들어진 파일 설명 듣기

AI가 만든 결과물이 무엇으로 이뤄졌는지 이해합니다.

방금 만든 파일의 구조를 코딩을 모르는 사람에게 설명하듯 알려 줘. 제목, 본문, 색을 바꾸고 싶을 때 파일의 어느 부분을 고치면 되는지 짚어 줘.

산출물 · index.html

작게 시작한 결과물이 이후 모든 수정의 출발점이 됩니다.

STEP 030/3

고치고 되돌리기

마음에 들지 않는 부분을 어떻게 말해야 정확히 고쳐질까요?

한 번에 하나씩 고치도록 요청하면 무엇이 바뀌었는지 확인하기 쉽습니다.

결과가 나빠졌다면 되돌리면 됩니다. 수정하기 전에 파일을 복사해 두면 안심하고 시도할 수 있습니다.

P7

한 가지씩 수정 요청

바뀐 부분을 확인하며 결과물을 다듬습니다.

방금 만든 [파일 이름]에서 [바꾸고 싶은 부분] 하나만 바꿔 줘. 다른 부분은 그대로 두고, 무엇을 어떻게 바꿨는지 한두 줄로 알려 줘.
P8

되돌리기 준비

수정 전 상태를 남겨 두는 방법을 배웁니다.

[파일 이름]을 고치기 전에 지금 상태를 남겨 두고 싶어. 코딩을 모르는 사람도 할 수 있는 가장 쉬운 방법을 알려 줘. 나중에 원래대로 돌리는 방법도 같이 알려 줘.
P9

오늘 작업 정리

배운 것과 다음 주에 할 일을 기록으로 남깁니다.

오늘 우리가 한 작업을 notes.md 파일로 정리해 줘. 만든 파일 이름, 내가 쓴 지시 중 잘 먹힌 것, 막혔던 점, 다음 주에 해 보고 싶은 것을 항목별로 적어 줘.
산출물 · notes.md

산출물 · notes.md

한 번에 하나씩 고치고, 수정 전 상태를 남겨 둡니다.

개념·이론

프롬프트AI에게 하는 지시문

AI에게 전달하는 질문이나 지시 전체를 말합니다. 무엇을 원하는지, 어떤 형식으로 받고 싶은지를 구체적으로 적을수록 원하는 결과에 가까워집니다.

컨텍스트AI가 참고하는 배경 정보

AI가 답을 만들 때 참고하는 대화 내용과 자료를 말합니다. 내 직무와 목표를 먼저 알려 주면 같은 질문에도 더 알맞은 답이 나옵니다. 대화가 길어지면 앞부분을 놓칠 수 있어 중요한 조건은 다시 적어 줍니다.

바이브 코딩말로 지시해 만드는 방식

코드를 직접 쓰는 대신 원하는 결과를 자연어로 설명하고, AI가 만든 코드를 실행해 보며 다듬어 가는 작업 방식입니다. 결과를 확인하고 고쳐 달라고 말하는 일은 사람이 맡습니다.

AI 에이전트스스로 여러 단계를 수행하는 AI

질문에 답하는 데서 그치지 않고, 파일을 읽고 만들고 실행하는 등 여러 단계를 이어서 수행하는 AI를 말합니다. 하는 일의 범위가 넓은 만큼 무엇을 허용할지 사람이 확인해야 합니다.

터미널글자로 컴퓨터에 명령하는 창

마우스 대신 글자로 컴퓨터에 명령을 내리는 프로그램입니다. 코딩용 AI 도구는 이 창 안에서 동작하기도 합니다. 어려워 보여도 AI가 알려 주는 명령을 하나씩 확인하며 쓰면 됩니다.

폴더와 파일 경로파일이 놓인 위치를 가리키는 주소

파일이 어느 폴더 안에 있는지 나타내는 주소입니다. 작업 폴더를 정해 두면 AI와 나 모두 같은 위치에서 파일을 찾을 수 있습니다. 폴더 이름은 영어 소문자와 하이픈을 쓰면 문제가 적습니다.

반복 개선만들고 확인하고 고치기를 되풀이

한 번에 완성하려 하지 않고 결과를 보고 고쳐 달라고 요청하는 과정을 되풀이하는 것입니다. 한 번에 한 가지만 바꾸면 무엇이 효과가 있었는지 알 수 있습니다.

1회차 자료실

자료 준비 중입니다. 교육을 진행한 뒤 이곳에 올립니다.