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

만든 결과물을 웹에 올려 링크로 공유하고, 막혔을 때 AI에게 묻는 법까지 익힌다.

내 결과물 공유하고 마무리

  • 프롬프트 8
  • 개념 6
  • 링크 5
내 진행 0/8

시작 전에 — 준비물

  • 1~3주 차에 만든 결과물이 들어 있는 폴더
  • 공개해도 되는 내용인지 확인한 결과물 하나
  • 웹에 올릴 때 쓸 서비스의 계정 (공식 문서에서 가입 방법 확인)
STEP 010/2

결과물 점검과 정리

남에게 보여 줘도 괜찮은 상태인지 확인했나요?

공개하기 전에 개인정보, 비밀번호, 내부 자료가 파일에 들어 있지 않은지 확인합니다. 한 번 올라간 내용은 되돌리기 어렵습니다.

설명 문서를 하나 남겨 두면 나중에 나도 다른 사람도 무엇을 만든 것인지 알 수 있습니다.

  • 파일에 개인정보나 비밀번호가 없다
  • 링크를 받을 사람이 누구인지 정했다
P1

공개 전 점검

올리면 곤란한 내용이 없는지 AI와 함께 훑어봅니다.

이 폴더의 파일을 웹에 공개하려고 해. 이름, 연락처, 비밀번호, 내부 자료처럼 공개하면 곤란한 내용이 들어 있는지 파일별로 점검해 줘. 발견하면 어느 파일 어느 부분인지 알려 주고, 고치기 전에 나에게 먼저 물어봐 줘.
P2

설명 문서 만들기

무엇을 만들었는지 다른 사람이 알 수 있게 남깁니다.

이 폴더의 결과물을 처음 보는 사람에게 설명하는 README.md를 만들어 줘. 무엇을 하는 결과물인지, 어떤 파일이 있는지, 어떻게 열어 보는지를 짧게 적어 줘.
산출물 · README.md

산출물 · README.md

올리기 전에 확인하는 습관이 가장 중요한 안전장치입니다.

STEP 020/3

웹에 올리고 링크 공유

내 파일이 어떻게 모두가 열 수 있는 주소가 될까요?

정적 웹사이트는 파일을 호스팅 서비스에 올리면 주소가 생깁니다. 서비스마다 올리는 방법이 다르므로 공식 문서의 안내를 따릅니다.

올린 뒤에는 시크릿 창이나 다른 기기에서 열어 내 컴퓨터가 아니어도 보이는지 확인합니다.

P3

올릴 곳 고르기

내 결과물에 맞는 호스팅 방법을 비교합니다.

내 결과물은 [HTML 파일 하나 / 여러 파일로 된 정적 사이트]야. 코딩을 모르는 사람이 웹에 올려 링크를 만들 수 있는 방법을 두세 가지 비교해 줘. 각각 어떤 사람에게 맞는지 적고, 구체적인 메뉴 이름이나 명령은 지어내지 말고 공식 문서를 찾아보라고 말해 줘.
P4

올리는 순서 안내받기

고른 방법의 흐름을 순서대로 이해합니다.

[선택한 서비스]에 내 폴더를 올려 링크를 만들려고 해. 큰 흐름을 단계로 설명해 줘. 내 화면과 설명이 다르면 화면 그대로 알려 줄 테니 그때 다시 안내해 줘. 확실하지 않은 부분은 공식 문서에서 확인하라고 알려 줘.
P5

올린 뒤 점검

공유 전에 링크가 제대로 열리는지 확인합니다.

웹에 올린 링크를 다른 사람에게 보내기 전에 확인할 목록을 만들어 줘. 다른 기기에서 열리는지, 휴대폰에서 글자가 잘 보이는지, 링크를 눌렀을 때 오류가 없는지를 포함해 줘.

링크를 보내기 전에 다른 기기에서 먼저 열어 봅니다.

STEP 030/3

AI에게 묻는 법과 다음 단계

막혔을 때 어떻게 물어야 답이 빨리 나올까요?

질문에는 하려던 일, 실제로 일어난 일, 이미 해 본 것을 함께 적습니다. 오류 메시지는 요약하지 말고 그대로 붙입니다.

4주 동안 효과가 좋았던 프롬프트는 모아 두면 다음 프로젝트의 출발점이 됩니다.

P6

막혔을 때 질문하기

문제 상황을 AI가 이해하기 쉬운 틀로 전달합니다.

하려던 일: [하려던 일]
실제로 일어난 일: [일어난 일]
이미 해 본 것: [해 본 것]
화면 또는 오류 메시지: [그대로 붙여넣기]
원인 후보를 가능성이 높은 순서로 알려 주고, 내가 먼저 확인할 것을 한 가지씩 알려 줘.
P7

내 프롬프트 모음 만들기

4주 동안 잘 먹힌 지시를 한 파일로 모읍니다.

우리가 이 대화에서 쓴 지시 중 결과가 좋았던 것을 prompts.md로 모아 줘. 각 지시마다 언제 쓰는지 한 줄 설명을 달고, 상황에 따라 바뀌는 부분은 [대괄호] 빈칸으로 바꿔 줘.
산출물 · prompts.md
P8

다음 프로젝트 정하기

배운 것을 이어 갈 다음 만들 것을 고릅니다.

나는 [직무]이고 4주 동안 [만든 것]을 만들었어. 이 경험을 바탕으로 다음에 해 볼 만한 프로젝트를 세 가지 제안해 줘. 각각 만드는 데 필요한 것, 예상되는 어려움, 첫 번째로 할 일을 적어 줘.

산출물 · prompts.md

잘 먹힌 프롬프트를 모아 두면 다음 결과물이 빨라집니다.

개념·이론

저장소(Git)파일의 변경 이력을 기록하는 공간

Git은 파일이 언제 어떻게 바뀌었는지 기록해 두는 도구이고, 저장소는 그 기록을 담은 폴더입니다. 실수했을 때 이전 상태로 돌아갈 수 있고, 여러 사람이 함께 작업하기 쉬워집니다.

커밋변경 내용을 기록으로 남기는 저장 지점

저장소에 현재 상태를 하나의 기록으로 남기는 것입니다. 무엇을 바꿨는지 짧은 설명과 함께 남기며, 나중에 그 시점으로 돌아갈 수 있습니다.

배포만든 결과물을 다른 사람이 쓸 수 있게 올리는 일

내 컴퓨터에 있는 결과물을 인터넷의 서버에 올려 누구나 주소로 열 수 있게 하는 일입니다. 올리기 전에 공개해도 되는 내용인지 확인합니다.

정적 웹사이트만들어 둔 파일을 그대로 보여 주는 사이트

HTML, CSS, 이미지처럼 미리 만들어 둔 파일을 그대로 보여 주는 웹사이트입니다. 서버에서 계산하거나 저장하는 기능이 없어 올리기 쉽고, 입문 단계의 결과물에 알맞습니다.

API프로그램끼리 정보를 주고받는 약속

한 프로그램이 다른 프로그램에 기능이나 정보를 요청하고 받는 방식을 정해 둔 약속입니다. 날씨나 지도 같은 외부 기능을 내 결과물에 붙일 때 쓰며, 다음 단계에서 다루게 됩니다.

환각(hallucination)AI가 사실이 아닌 내용을 그럴듯하게 말하는 현상

AI가 없는 서비스 이름이나 메뉴를 지어내 알려 줄 수 있습니다. 설치와 배포처럼 정확해야 하는 안내는 공식 문서와 대조해 확인합니다.

4회차 자료실

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