바이브코딩 3편: VS Code와 Codex로 자기소개 페이지 만들기 ::REFUGE HUB

설치도 끝났고, VS Code 기본 세팅도 해봤고, 터미널이랑 Codex 확장 프로그램까지 열 수 있게 됐다면 이제는 진짜로 손을 움직여볼 차례입니다. 여기서 많은 분들이 바로 “그럼 뭘 만들어봐야 하지?”에서 잠깐 멈추게 됩니다.

이럴 때는 너무 큰 걸 잡지 않는 게 좋습니다. 처음부터 복잡한 서비스를 만들려고 하면, 내가 지금 막히는 이유가 코드 때문인지, 폴더 구조 때문인지, 아니면 단순히 파일 연결이 안 된 건지조차 헷갈리기 쉽기 때문입니다. 그래서 첫 실습은 작고, 결과가 바로 보이고, 파일 구조가 단순한 작업이 가장 잘 맞습니다.

이번 글에서는 index.html과 style.css 두 파일만 써서 아주 간단한 자기소개 페이지를 만들어보겠습니다. 목표는 멋진 결과물을 뽑아내는 데 있지 않습니다. 대신 HTML은 구조를 만들고, CSS는 모양을 다듬는다는 감각, 그리고 VS Code와 Codex를 어떻게 같이 써야 덜 헷갈리는지를 익히는 데 초점을 맞추겠습니다.

왜 첫 실습은 HTML/CSS부터 시작하는 게 좋은가

처음 실습을 할 때 HTML과 CSS부터 시작하는 데는 이유가 있습니다. 이 조합은 결과가 바로 눈에 보입니다. 파일을 저장하고 브라우저를 새로고침하면, 내가 바꾼 내용이 거의 즉시 화면에 반영됩니다. 초보자 입장에서는 이 경험이 꽤 중요합니다. 지금 내가 뭘 바꿨고, 그게 어디에 반영됐는지를 눈으로 확인할 수 있어야 다음 단계로 넘어가기가 수월해지기 때문입니다.

반대로 처음부터 JavaScript나 프레임워크로 들어가면, 화면 구조와 스타일, 동작, 실행 환경이 한꺼번에 섞여 들어옵니다. 그러면 AI가 설명해주는 내용도 머릿속에서 정리가 잘 안 되고, 막혔을 때 어디서부터 확인해야 할지도 흐려지기 쉽습니다.

HTML과 CSS는 역할이 비교적 분명합니다. HTML은 화면에 무엇이 들어갈지를 정하고, CSS는 그걸 어떻게 보이게 할지를 정합니다. 이 둘을 먼저 나눠서 보는 연습을 해두면, 이후에 JavaScript를 붙일 때도 훨씬 이해가 편해집니다.

구분	역할	이번 글에서 다루는지
HTML	제목, 문단, 목록, 구역처럼 내용의 구조를 만든다	다룬다
CSS	색상, 여백, 글자 크기, 카드 모양처럼 화면 표현을 다듬는다	다룬다
JavaScript	클릭, 입력, 반응 같은 동작을 만든다	이번 글에서는 다루지 않는다

첫 실습에서는 “많이 만드는 것” 보다 “내가 무엇을 바꿨는지 스스로 설명할 수 있는 상태”가 더 중요합니다.

오늘 만들 페이지와 준비할 것

이번 실습에서 만들 건 아주 단순한 자기소개 페이지입니다. 이름 한 줄, 짧은 소개 문장, 지금 연습 중인 것 몇 가지 정도만 들어가는 작은 페이지라고 생각하면 됩니다. 내용은 단순하지만, 첫 실습용으로는 이 정도가 오히려 좋습니다. 구조도 눈에 잘 들어오고, CSS를 조금만 바꿔도 화면 차이가 금방 보이기 때문입니다.

지난 글에서 만든 실습 폴더를 그대로 써도 괜찮고, 새 폴더를 하나 만들어도 됩니다. 여기서는 새 폴더를 만드는 흐름으로 가보겠습니다.

cd vibe-lab
mkdir 02-first-page
cd 02-first-page
code .

이제 VS Code에서 폴더가 열렸다면 Explorer에서 파일 두 개를 만듭니다.

02-first-page/
  index.html
  style.css

여기서 너무 어렵게 생각할 필요는 없습니다. 터미널로 파일을 만들어도 되지만, 아직 익숙하지 않다면 그냥 Explorer에서 새 파일 버튼을 눌러 만드는 쪽이 더 편합니다. 처음 실습에서는 속도보다 내가 지금 어떤 파일을 만들고 있는지 눈으로 확인하는 것이 더 중요합니다.

준비물도 많지 않습니다.

VS Code가 설치되어 있어야 합니다.
실습 폴더를 열 수 있어야 합니다.
Codex 확장 프로그램은 설치와 로그인까지 끝난 상태라고 가정하겠습니다.
결과를 확인할 브라우저 하나면 충분합니다.

지금 단계에서는 별도 패키지를 설치하지 않아도 됩니다. 오히려 처음에는 도구를 많이 얹지 않는 편이 흐름을 이해하기에 더 좋습니다.

index.html로 화면의 뼈대 잡기

먼저 HTML 파일부터 만들어보겠습니다. HTML은 화면에 들어갈 내용과 순서를 정하는 파일입니다. 제목은 어디에 둘지, 소개 문장은 어떻게 보여줄지, 목록은 어떤 구조로 넣을지를 여기서 잡습니다.

index.html에는 아래 코드를 넣어보면 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>나의 첫 프로필 페이지</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="card">
    <p class="eyebrow">Vibe Coding Practice</p>
    <h1>홍길동</h1>
    <p class="intro">
      AI와 함께 웹을 배우는 중인 초보자입니다.
      이번 페이지는 HTML과 CSS 두 파일만으로 화면이 어떻게 바뀌는지 확인해보기 위한 첫 실습입니다.
    </p>

    <section class="section">
      <h2>지금 연습하는 것</h2>
      <ul>
        <li>HTML로 내용 구조 만들기</li>
        <li>CSS로 여백과 색상 정리하기</li>
        <li>Codex에게 작은 수정 요청해보기</li>
      </ul>
    </section>

    <section class="section">
      <h2>짧은 메모</h2>
      <p>
        이번 실습의 목표는 대단한 사이트를 만드는 것이 아니라,
        파일을 나눠서 관리하고 수정 결과를 직접 확인하는 흐름을 익히는 데 있습니다.
      </p>
    </section>
  </main>
</body>
</html>

처음 보면 태그가 조금 많아 보여도, 지금 단계에서는 전부 외우려고 하지 않아도 괜찮습니다. 먼저 아래 네 가지만 눈에 익혀두면 충분합니다.

<head> 안에는 화면에 직접 보이지 않는 정보가 들어갑니다.
<link rel="stylesheet" href="style.css">는 CSS 파일을 연결하는 줄입니다.
<main> 안에는 실제 화면에 보여줄 핵심 내용이 들어갑니다.
<section>, <h1>, <p>, <ul> 같은 태그는 내용을 구역별로 나누는 데 쓰입니다.

여기서 특히 한 줄만 꼽자면, CSS를 연결하는 줄은 꼭 눈에 익혀두는 편이 좋습니다. 이 줄이 빠지거나 파일명이 다르면 HTML은 보이는데 CSS만 적용되지 않는 일이 생깁니다. 초보자가 초반에 가장 자주 겪는 실수 중 하나도 바로 이 부분입니다.

HTML은 화면을 “꾸미는 파일”이라기보다, 화면에 들어갈 내용을 “정리하는 파일”에 더 가깝습니다.

style.css로 조금 더 보기 좋게 다듬기

이제 HTML로 뼈대를 만들었으니, CSS로 화면을 조금 다듬어보겠습니다. HTML만 있는 상태에서도 내용은 보입니다. 다만 줄줄이 이어져 보여서 아직은 정리되지 않은 느낌이 강할 수 있습니다. 그건 이상한 게 아니라 자연스러운 상태입니다. HTML은 구조를 만드는 역할이고, 보기 좋은 화면은 CSS가 맡기 때문입니다.

style.css에는 아래 코드를 넣어보겠습니다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  background: #f3f4f6;
  color: #111827;
}

.card {
  width: min(560px, calc(100% - 32px));
  margin: 48px auto;
  padding: 32px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.eyebrow {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #6b7280;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 12px;
  font-size: 32px;
  line-height: 1.2;
}

.intro {
  margin: 0 0 24px;
  line-height: 1.7;
}

.section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}

h2 {
  margin: 0 0 12px;
  font-size: 20px;
}

ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.8;
}

li + li {
  margin-top: 6px;
}

코드가 길어 보여도 너무 겁먹을 필요는 없습니다. 이번 실습에서는 아래 속성 몇 개만 감각적으로 익혀도 충분합니다.

margin은 요소 바깥쪽 여백입니다.
padding은 요소 안쪽 여백입니다.
background는 배경색입니다.
border-radius는 모서리를 둥글게 만듭니다.
box-shadow는 카드 아래 그림자를 만듭니다.
line-height는 줄 간격을 조절합니다.

여기서 중요한 건 CSS 문법을 한 번에 다 이해하는 것이 아닙니다. 오히려 값 하나를 바꾸고 저장했을 때 화면이 어떻게 달라지는지 직접 보는 것이 훨씬 중요합니다. 예를 들어 padding: 32px;를 20px으로 바꾸면 카드 안쪽이 조금 더 좁아지고, 배경색을 바꾸면 페이지 분위기가 꽤 달라집니다.

이런 식으로 작은 변화와 화면 결과를 연결해보는 경험이 쌓이면, 나중에 AI가 CSS를 수정했을 때도 “뭘 바꿨는지 모르겠는데 달라졌네”가 아니라 “아, 여백이랑 제목 크기를 건드렸구나” 정도는 읽히기 시작합니다.

브라우저에서 결과 확인하기

이제 파일 두 개를 만들었으니 결과를 브라우저에서 확인해보면 됩니다. 초보자 입장에서는 이 단계가 생각보다 중요합니다. 저장이 안 된 상태에서 결과가 안 바뀌었는데 코드 문제라고 오해하거나, 다른 폴더의 파일을 열어놓고 왜 수정이 반영되지 않느냐고 헷갈리는 일이 자주 있기 때문입니다.

index.html과 style.css가 모두 저장되었는지 확인합니다.
프로젝트 폴더에서 index.html 파일을 브라우저로 엽니다.
코드를 수정한 뒤에는 저장하고, 브라우저에서 새로고침해서 결과를 다시 확인합니다.

지금 단계에서는 복잡한 개발 서버를 따로 띄우지 않아도 괜찮습니다. HTML과 CSS만 다루는 첫 실습이라면 브라우저에서 파일을 직접 열어 확인하는 방식으로도 충분합니다. 오히려 처음에는 이쪽이 더 단순해서, 내가 지금 어떤 파일을 보고 있는지 파악하기 쉽습니다.

화면은 열리는데 스타일이 전혀 적용되지 않는다면, 먼저 style.css 파일명과 href="style.css"가 정확히 같은지부터 확인해보는 편이 좋습니다.

추가로 아래 정도도 같이 확인해두면 좋습니다.

HTML과 CSS 파일이 정말 같은 폴더 안에 있는지
다른 실습 폴더의 index.html을 열어둔 건 아닌지
수정한 뒤 저장을 빼먹은 건 아닌지
HTML의 클래스 이름과 CSS의 클래스 이름을 다르게 적지는 않았는지

이런 점검이 사소해 보여도, 실제로 초반 시행착오를 많이 줄여줍니다. 바이브코딩을 시작할 때는 코드를 잘 짜는 능력만큼이나, 문제가 생겼을 때 원인을 차분하게 좁혀가는 습관이 중요합니다.

Codex로 작은 수정 요청 해보기

여기서부터는 손으로 한 번 직접 만들어본 결과를 바탕으로, Codex에게 작은 수정 요청을 해보면 좋습니다. 처음부터 “전부 만들어줘”라고 하면 당장은 편해 보일 수 있지만, 초보자 입장에서는 어떤 파일이 왜 바뀌었는지 따라가기가 오히려 더 어렵습니다.

반대로 기본 뼈대를 먼저 만든 뒤 AI에게 범위가 작은 수정을 맡기면, 결과를 읽기도 쉽고 무엇을 배워야 하는지도 분명해집니다. 이 방식이 초반 실습에는 훨씬 잘 맞습니다.

좋은 요청은 대체로 이런 특징을 가집니다.

어느 파일을 기준으로 작업할지 분명합니다.
무엇은 유지하고, 무엇만 바꿀지 드러납니다.
수정 이유나 변경 내용을 함께 설명하게 만듭니다.

조금 아쉬운 요청	왜 아쉬운가	더 나은 요청
예쁘게 만들어줘	범위가 너무 넓어서 무엇이 달라졌는지 추적하기 어렵다	`@style.css 카드 여백을 조금 넓히고 전체 색감은 차분하게 조정해줘`
전부 알아서 고쳐줘	학습보다 결과만 남기 쉬워서 초보자에게는 아쉽다	`@index.html 소개 문장만 더 자연스럽게 다듬고 다른 구조는 유지해줘`
뭔가 이상해	문제 위치가 너무 넓어서 AI도 추측성 답변을 하기 쉽다	`@style.css 모바일에서 h1이 너무 커 보여. 제목 크기만 조정해줘`

실제로는 아래 정도 요청부터 시작하면 무난합니다.

@index.html @style.css
지금 구조는 유지하고, 소개 문장을 조금 더 자연스럽게 다듬어줘.
수정 전에 어떤 부분을 바꿀지 짧게 먼저 설명해줘.

@style.css
카드의 안쪽 여백을 조금 더 여유롭게 하고,
모바일에서 제목 크기만 살짝 줄여줘.
다른 파일은 건드리지 말고, 변경 이유도 같이 알려줘.

@index.html
초보자가 나중에 다시 읽기 쉽도록
section 위에 짧은 주석을 추가해줘.

이때도 너무 급하게 크게 고치게 하기보다, 먼저 Chat 쪽에서 계획을 묻고 괜찮다 싶으면 수정으로 넘어가는 흐름이 입문자에게는 더 편합니다. 바뀐 뒤에는 “무엇이 달라졌는지 다시 설명해줘”라고 한 번 더 물어보는 습관도 꽤 도움이 됩니다.

AI를 잘 쓰는 사람은 거창한 프롬프트를 쓰는 사람이라기보다, 작업 범위를 잘 나누는 사람인 경우가 많습니다.

이번 실습에서 꼭 가져가야 할 감각

이번 글을 마치고 나면, 자기소개 페이지 하나 만들었다는 결과보다 더 중요한 게 남아 있어야 합니다. 바로 아래 감각들입니다.

HTML은 구조를 만들고, CSS는 모양을 다듬는다는 점
파일이 둘 이상이면 서로 연결되는 지점을 확인해야 한다는 점
저장과 새로고침이 아주 기본적이지만 실수를 가장 많이 줄여준다는 점
AI에게는 작고 분명한 요청을 나눠서 맡기는 편이 훨씬 낫다는 점
결과가 마음에 들지 않을 때는 무엇이 바뀌었는지부터 읽어야 한다는 점

이 다섯 가지가 어느 정도 손에 들어오면 다음 단계로 넘어갈 준비가 된 것입니다. 그다음에는 보통 JavaScript를 아주 가볍게 붙여서 버튼 클릭이나 입력 반응처럼 작은 상호작용을 만들어보는 흐름이 자연스럽습니다. 그래야 구조, 모양, 동작이 각각 어떤 역할을 하는지도 더 선명해집니다.

한마디로 정리하면, 이번 실습의 목적은 “페이지 하나 완성” 그 자체에 있지 않습니다. VS Code 안에서 파일을 만들고, 연결하고, 저장하고, 브라우저로 확인하고, Codex에게 작은 수정을 요청하는 흐름을 직접 한 번 경험해보는 데 있습니다. 이 흐름이 잡히면 이후 연재는 훨씬 편하게 따라갈 수 있습니다.

저작자표시 비영리 변경금지 (새창열림)

'바이브코딩 > 실습' 카테고리의 다른 글

바이브코딩 6편: 오류가 났을 때 어디부터 봐야 할까 (0)	2026.03.15
바이브코딩 5편: AI가 고친 코드를 어디부터 읽어야 할까 (0)	2026.03.14
바이브코딩 4편: JavaScript로 버튼 클릭과 입력 반응 붙이기 (0)	2026.03.13
바이브코딩 2편: VS Code 터미널과 Codex 확장, 여기서부터 실습이 시작된다 (0)	2026.03.11
실습용 바이브코딩 환경 만들기: VS Code 설치와 첫 세팅 가이드 (0)	2026.03.10