바이브코딩 워크쓰루 1-1 AI 대화로 자기소개 페이지 만들기

ChatGPT | Claude | VS Code 다운로드

시작 전에 꼭 읽어주세요

이 글은 바이브코딩 워크쓰루 시리즈1의 첫 번째 글입니다.

앞의 과목들을 완료한 후 진행하시면 더 이해하기 쉽습니다.

VS Code 설치(0-2)가 반드시 되어 있어야 합니다.

이 글에서 사용하는 AI 도구는 ChatGPT 또는 Claude 웹 버전입니다.

앞에서 도구를 골랐고, 작업 환경을 세팅했고, GitHub 계정을 만들었고, Cloudflare Pages도 알아봤습니다. 준비는 끝났습니다. 이제 진짜 뭔가를 만들어볼 차례입니다.

이번 글에서 만들 것은 자기소개 웹페이지 입니다. “안녕하세요, 저는 누구입니다”라는 간단한 페이지를 AI에게 요청해서 만들겠습니다. 코드를 한 줄도 직접 쓰지 않습니다. AI에게 말로 설명하면 AI가 터미널에 바로 붙여넣을 수 있는 형태로 코드를 만들어줍니다. 그것을 터미널에 붙여넣고, 브라우저에서 확인하는 것이 전부입니다.

완성하면 여러분의 컴퓨터에서 동작하는 진짜 웹페이지가 생깁니다. 아직 인터넷에 공개하는 것은 아니고, 내 컴퓨터에서만 볼 수 있는 상태입니다. 인터넷에 공개하는 것은 다음 글(1-2)에서 다룹니다.

먼저 알아야 할 최소 개념-중요

코드를 직접 쓰지 않더라도, AI가 만들어주는 코드가 대충 뭔지는 알아야 대화가 됩니다. 딱 세 가지만 알면 됩니다.

HTML 은 웹페이지의 뼈대입니다. “여기에 제목을 넣고, 그 아래에 사진을 넣고, 그 아래에 소개 글을 넣는다”처럼 내용의 구조를 잡는 역할을 합니다. 집을 지을 때 철골 구조를 세우는 것과 비슷합니다.

CSS 는 웹페이지의 옷입니다. “제목은 파란색에 크게, 배경은 흰색에 깔끔하게, 사진은 둥글게”처럼 모양과 스타일을 정하는 역할을 합니다. 철골 위에 페인트칠을 하고 인테리어를 하는 것과 비슷합니다.

이 두 가지가 합쳐져서 하나의 웹페이지가 만들어집니다. AI에게 “자기소개 웹페이지 만들어줘”라고 하면 AI가 알아서 HTML과 CSS를 모두 포함한 코드를 줍니다. 결과물에서 HTML과 CSS라는 단어가 나올 때 “이게 뭐지?” 하고 당황하지 않기 위해 미리 알아두는 것입니다.

cat EOF 는 터미널에서 파일을 만드는 명령어입니다. 이것만 알면 AI가 만들어준 코드를 복사해서 터미널에 붙여넣기만 해도 파일이 자동으로 생깁니다. 형태는 이렇습니다.

cat << ‘EOF’ > 파일이름

(파일에 들어갈 내용)

EOF

한 줄씩 풀어서 설명하겠습니다. 첫 줄의 cat 은 내용을 파일에 써주는 명령어입니다. << ‘EOF’ 는 “지금부터 EOF라는 단어가 나올 때까지의 모든 내용을”이라는 뜻입니다. > 파일이름 은 “이 파일에 저장해라”라는 뜻입니다. 그리고 마지막 줄에 혼자 적힌 EOF 는 “여기서 끝”이라는 종료 신호입니다.

비유하자면 이렇습니다. 친구에게 편지를 대신 써달라고 부탁하면서 “지금부터 내가 말하는 것을 종이에 적어줘. 내가 ‘끝’이라고 하면 거기서 멈춰”라고 하는 것과 같습니다. cat은 대필해주는 친구이고, EOF가 바로 “끝”이라는 신호입니다.

이 방식의 장점은 터미널에 한 번 붙여넣기만 하면 파일이 즉시 생성 된다는 것입니다. 이번 글에서는 AI에게 처음부터 이 형식으로 코드를 만들어달라고 요청할 것입니다. 그러면 AI가 준 결과를 터미널에 그대로 붙여넣기만 하면 끝입니다.

프로젝트 폴더 만들기

웹페이지를 만들기 전에 파일을 담을 폴더를 먼저 만들겠습니다.

1단계 VS Code를 실행합니다.

2단계 상단 메뉴에서 터미널 → 새 터미널 을 클릭합니다.

3단계 터미널에 아래 명령어를 그대로 복사해서 붙여넣고 엔터를 누릅니다.

mkdir -p ~/my-first-website && cd ~/my-first-website

이 명령어는 홈 폴더에 “my-first-website”라는 폴더를 만들고, 그 폴더 안으로 이동하는 것입니다. mkdir은 “make directory”의 줄임말로 폴더를 만드는 명령어이고, cd는 “change directory”의 줄임말로 폴더를 이동하는 명령어입니다. -p는 폴더가 이미 있어도 에러 없이 넘어가라는 옵션입니다.

4단계 VS Code 상단 메뉴에서 파일 → 폴더 열기 를 클릭하고, 방금 만든 my-first-website 폴더를 선택합니다. 왼쪽 사이드바에 빈 폴더가 표시되면 성공입니다.

위의 과정도 AI에게 요청할 수 있습니다. my-first-website라는 폴더를 만들 수 있게 터미널에 넣을 코드를 알려줘. 하면 그 코드를 vs code 터미널에서 실행하면 됩니다.

AI에게 자기소개 페이지 요청하기

이제 AI에게 자기소개 웹페이지를 만들어달라고 요청합니다. 브라우저에 ChatGPT 또는 Claude를 열어두세요.

여기서 핵심이 있습니다. AI에게 코드만 달라고 하면 나중에 그 코드를 파일로 옮기는 과정이 번거롭습니다. 그래서 처음부터 “cat EOF 형식으로 만들어줘” 라고 요청합니다. 그러면 AI가 터미널에 바로 붙여넣을 수 있는 완성된 형태로 코드를 줍니다.

5단계 AI에게 다음과 같이 요청합니다. 아래 내용을 그대로 복사해서 AI 대화창에 붙여넣으세요. 이름, 직업, 취미, 한줄 소개 부분만 본인 정보로 바꾸면 됩니다.

자기소개 웹페이지를 만들어줘.

한 개의 HTML 파일로 만들어줘. CSS는 HTML 파일 안에 포함시켜줘.

내 정보는 다음과 같아.

이름: 홍길동

직업: 회사원

취미: 등산, 독서, 커피

한줄 소개: 새로운 것을 배우는 것을 좋아합니다.

디자인은 깔끔하고 모던한 느낌으로 해줘.

가운데 정렬이고, 배경은 밝은 색으로 해줘.

결과를 cat << ‘EOF’ > index.html 형식으로 감싸서 줘. 터미널에 바로 붙여넣으면 파일이 생성되게 해줘.

마지막 두 줄이 핵심입니다. 이렇게 요청하면 AI가 아래와 같은 형태로 코드를 줍니다.

cat << ‘EOF’ > index.html

… (AI가 생성한 전체 코드) …

EOF

AI가 준 이 결과물을 통째로 복사하면 됩니다. 코드 블록 오른쪽 상단에 복사 버튼이 있으니 클릭하세요.

터미널에 붙여넣어 파일 만들기

6단계 VS Code 터미널이 my-first-website 폴더에 있는지 확인합니다. 터미널에 아래를 입력하고 엔터를 누르세요.

pwd

경로 끝이 /my-first-website로 끝나면 됩니다. 만약 다른 경로가 나온다면 아래를 붙여넣어 이동합니다.

cd ~/my-first-website

7단계 5단계에서 AI가 만들어준 결과물을 터미널에 그대로 붙여넣고 엔터를 누릅니다.

그것으로 끝입니다. 붙여넣는 즉시 index.html 파일이 생성됩니다. VS Code 왼쪽 사이드바에 index.html이 나타나면 성공입니다.

왜 파일 이름이 index.html이냐면, 웹 세계에서 index.html은 “첫 페이지”를 의미하는 약속된 이름입니다. 웹사이트에 접속했을 때 가장 먼저 보여주는 파일입니다.

cat EOF로 감싼 코드를 터미널에서 실행하면 위의 이미지에서와 같이 index.html이 생성된 것을 확인할 수 있습니다.

브라우저에서 확인하기

8단계 선수과목 0-2에서 설치한 Live Server 확장 프로그램을 사용합니다. VS Code 왼쪽 사이드바에서 index.html 파일을 클릭해서 열고, 에디터 영역에서 마우스 오른쪽 버튼을 클릭한 뒤 Open with Live Server 를 선택합니다.

웹 브라우저가 자동으로 열리면서 여러분의 자기소개 페이지가 나타납니다. 축하합니다. 여러분이 AI와의 대화만으로 만든 첫 번째 웹페이지입니다.

주소창에 http://127.0.0.1:5500/index.html 과 비슷한 주소가 보일 것입니다. 이 주소는 내 컴퓨터 안에서만 작동하는 임시 주소입니다. 다른 사람은 이 주소로 접속할 수 없습니다.

AI에게 수정 요청하기

페이지가 마음에 들 수도 있고, 아닐 수도 있습니다. 마음에 들지 않는 부분이 있으면 AI에게 수정을 요청합니다. 이것이 바이브코딩의 핵심입니다. 한 번에 완벽한 결과를 기대하는 것이 아니라, AI와 대화하면서 점진적으로 다듬어 나가는 것입니다.

9단계 수정하고 싶은 부분을 AI에게 요청합니다. 이때도 마지막에 cat EOF 형식을 요청하는 것을 잊지 마세요. 몇 가지 예시를 보여드립니다.

배경색을 연한 회색(#f5f5f5)으로 바꿔줘. 수정된 전체 코드를 cat << ‘EOF’ > index.html 형식으로 줘.

이름 위에 동그란 프로필 이미지 자리를 추가해줘. 이미지는 아직 없으니까 회색 원으로 표시해줘. cat EOF 형식으로 줘.

취미를 가로로 나란히 배치된 카드 형태로 바꿔줘. 각 카드에 그림자 효과도 넣어줘. cat EOF 형식으로 줘.

10단계 AI가 수정된 코드를 cat EOF 형식으로 주면, 그대로 복사해서 터미널에 붙여넣습니다.

같은 파일 이름(index.html)으로 다시 만들면 기존 파일을 자동으로 덮어씁니다. 따로 삭제할 필요가 없습니다. Live Server가 자동으로 브라우저를 새로고침하므로 바로 결과를 확인할 수 있습니다.

이 과정을 반복합니다. 요청하고, 붙여넣고, 확인하고, 다시 요청하고. 마음에 들 때까지 계속하면 됩니다.

효과적인 수정 요청 팁

AI에게 수정을 요청할 때 몇 가지 팁이 있습니다.

한 번에 하나씩 요청하세요. “배경색도 바꾸고, 폰트도 바꾸고, 레이아웃도 바꿔줘”라고 한꺼번에 요청하면 결과가 엉뚱하게 나올 수 있습니다. “배경색을 바꿔줘”로 시작해서, 결과를 확인한 후 “폰트를 바꿔줘”로 이어가는 것이 안전합니다.

구체적으로 설명하세요. “더 예쁘게 해줘”보다는 “배경색을 연한 파란색으로, 제목 글씨 크기를 더 크게”처럼 구체적으로 요청하면 원하는 결과에 가까워집니다.

마음에 드는 사이트가 있으면 참고하세요. “링크드인 프로필 페이지 같은 느낌으로 만들어줘”처럼 참고할 대상을 알려주면 AI가 그 스타일을 반영합니다.

항상 전체 코드를 cat EOF로 달라고 하세요. AI가 변경된 부분만 알려주면 어디에 넣어야 할지 헷갈립니다. “수정된 전체 코드를 cat EOF 형식으로 줘”라고 요청하면 터미널에 붙여넣기 한 번으로 끝납니다. 이것을 습관으로 만드세요.

완성된 페이지 살펴보기

수정을 몇 번 거치면 꽤 그럴듯한 자기소개 페이지가 만들어집니다. 파일은 딱 하나, index.html뿐입니다. 이 파일 안에 HTML(구조)과 CSS(스타일)가 모두 들어있습니다.

이 시점에서 VS Code에서 파일을 클릭해보면 코드가 꽤 길어져 있을 것입니다. 코드 내용을 이해할 필요는 없습니다. 다만 파일 상단에 로 시작하는 부분이 HTML이고,

정리

이번 글에서 한 일을 되짚어보겠습니다. AI에게 자기소개 웹페이지를 만들어달라고 요청했고, cat EOF 형식으로 받은 결과를 터미널에 붙여넣어 파일을 만들었고, 브라우저에서 확인한 뒤 마음에 안 드는 부분을 다시 요청해서 고쳤습니다. 코드를 한 줄도 직접 작성하지 않았습니다.

기억해둘 것은 세 가지입니다. HTML은 웹페이지의 뼈대이고 CSS는 옷이라는 것. AI에게 요청할 때 “cat EOF 형식으로 줘”를 붙이면 터미널에 바로 붙여넣을 수 있다는 것. 수정은 한 번에 하나씩 구체적으로 요청하는 것이 좋다는 것입니다.

지금은 내 컴퓨터에서만 볼 수 있는 상태입니다. 다음 글에서 이 페이지를 GitHub에 올리고, Cloudflare Pages로 배포해서 인터넷의 누구나 볼 수 있게 만들겠습니다.

다음 글 예고

1-2. 깃허브 올리고 배포하기 - 만든 페이지를 인터넷에 공개합니다. 빌드, 푸쉬, 배포를 직접 경험합니다.

#바이브코딩 #자기소개페이지 #HTML #CSS #웹페이지만들기 #AI코딩 #입문프로젝트 #워크쓰루

🎵 바이브코딩 워크쓰루 내비게이션

순서	제목	링크
0-1	코딩용 AI 뭘 써야 할까	바로가기
0-2	VS Code와 터미널, 왜 쓰는가	바로가기
0-3	깃허브 가입하고 레포 만들기	바로가기
0-4	Cloudflare Pages 무료 배포	바로가기
1-1	AI 대화로 자기소개 페이지 만들기	지금 읽은 글
1-2	깃허브 올리고 배포하기	바로가기
1-3	도메인 연결하고 내 주소 갖기	바로가기