BBoilerplate

실습 노트

AI 코딩 CLI로 첫 홈페이지 만들기: index.html 하나로 시작하는 초보 실습

Codex CLI, Claude Code, Antigravity CLI 중 하나를 사용해 바탕화면 폴더에서 index.html 홈페이지를 만들고 브라우저로 확인하는 초보자용 실습입니다.

정인효AI 코딩 · 홈페이지 제작 · Codex CLI · Claude Code

AI 코딩 CLI를 설치했다면 이제 작은 결과물을 하나 만들어볼 차례입니다.

boilerplate.kr/demo/ondo-coffee
O ONDO COFFEE
소개 메뉴 오시는 길
문의하기
LOCAL CAFE WEBSITE 동네를 닮은
따뜻한 한 잔 매일 아침 직접 내린 커피와 작은 디저트를 준비하는 가상의 동네 카페 홈페이지 예시입니다.
메뉴 보기 위치 확인
오늘의 추천 첫 화면에서 바로 보이는 핵심 정보
핸드드립 커피 6.0
수제 바닐라 라떼 5.5
영업시간 10:00 - 20:00
대표 메뉴 3개 문의 버튼 모바일 대응

오늘 목표는 거창한 서비스 개발이 아닙니다.

바탕화면에 새 폴더를 만들고, AI 코딩 CLI에게 index.html 파일 하나를 만들게 한 뒤, 브라우저에서 열어보는 것입니다.

이 정도만 해도 감이 옵니다.

  • AI가 파일을 어떻게 만드는지
  • 내가 어떤 요청을 해야 하는지
  • 결과물을 어디서 확인하는지
  • 수정 요청을 어떻게 이어가야 하는지

이 글은 아래 글을 본 뒤 이어서 보면 좋습니다.

이번 실습에서 만들 예시

이번에는 제가 임의로 가상의 동네 카페 홈페이지를 만들어보겠습니다.

실제 사업장이 아니라 예시입니다.

이름은 온도커피로 잡고, 아래 내용이 들어간 작은 홈페이지를 만들 겁니다.

  • 첫 화면 큰 문구
  • 매장 소개
  • 대표 메뉴 3개
  • 영업시간
  • 문의 버튼
  • 모바일에서도 보기 좋은 레이아웃

완성 예시는 이런 느낌입니다.

처음부터 완벽한 홈페이지를 만들려고 하면 어렵습니다. 먼저 한 파일짜리 예시를 만들고, 그다음 문구와 색상, 메뉴를 바꾸는 방식이 훨씬 쉽습니다.

준비물

아래 중 하나만 있으면 됩니다.

도구 실행 명령어
Codex CLI codex
Claude Code CLI claude
Antigravity CLI agy

셋 다 설치할 필요는 없습니다.

ChatGPT 계정을 주로 쓰면 Codex, Claude 구독을 쓰면 Claude Code, Google 계정 흐름을 써보고 싶으면 Antigravity부터 시작하면 됩니다.

1단계: 바탕화면에 폴더 만들기

터미널에서 폴더를 만들지 않아도 됩니다.

초보자라면 눈에 보이는 곳에서 직접 만드는 편이 더 쉽습니다.

  1. 바탕화면으로 갑니다.
  2. 빈 곳에서 마우스 오른쪽 버튼을 누릅니다.
  3. 새로 만들기 → 폴더를 누릅니다.
  4. 폴더 이름을 first-homepage로 바꿉니다.

여기서 중요한 점이 있습니다.

AI 코딩 CLI를 바탕화면 전체에서 실행하는 것이 아닙니다. 바탕화면 안에 새로 만든 first-homepage 폴더 안에서 실행하는 겁니다.

2단계: 바탕화면 위치에서 PowerShell 열기

파일 탐색기에서 바탕화면을 엽니다.

그다음 위쪽 주소창을 클릭하고 아래처럼 입력합니다.

powershell

Enter를 누르면 바탕화면 위치에서 PowerShell이 열립니다.

PowerShell 창이 열리면 아래처럼 입력합니다.

cd first-homepage

이제 PowerShell의 현재 위치가 first-homepage 폴더로 바뀐 것입니다.

잘 들어왔는지 확인하고 싶으면 아래 명령어를 입력합니다.

dir

처음 만든 빈 폴더라면 아직 파일이 거의 안 보이는 것이 정상입니다.

3단계: AI 코딩 CLI 실행하기

이제 자신이 설치한 도구 하나만 실행합니다.

Codex CLI를 설치했다면:

codex

Claude Code CLI를 설치했다면:

claude

Antigravity CLI를 설치했다면:

agy

처음 실행하면 로그인, 폴더 신뢰, 파일 수정 승인 같은 화면이 나올 수 있습니다.

first-homepage는 연습용 빈 폴더이므로 큰 부담은 없습니다. 그래도 AI가 어떤 파일을 만들겠다고 하는지는 보고 승인하는 습관을 들이는 것이 좋습니다.

4단계: 그대로 붙여넣을 요청문

AI 코딩 CLI가 열렸다면 아래 문장을 그대로 붙여넣습니다.

너는 초보자를 돕는 웹디자이너이자 프론트엔드 개발자야.

현재 폴더에 index.html 파일 하나만 만들어줘.

예시는 가상의 동네 카페 "온도커피" 홈페이지로 해줘.

조건:
- HTML, CSS, JavaScript를 모두 index.html 안에 작성
- 외부 라이브러리 사용하지 않기
- 모바일에서도 보기 좋게 만들기
- 첫 화면에는 큰 제목, 짧은 소개, 문의 버튼 넣기
- 대표 메뉴 3개, 매장 소개, 영업시간, 오시는 길 영역 넣기
- 색상은 따뜻한 흰색, 짙은 초록, 살구색을 섞어서 사용
- 파일을 만들기 전에 어떤 구조로 만들지 먼저 설명해줘
- 파일을 만든 뒤에는 내가 어떻게 열어보면 되는지 알려줘

이 요청문에서 중요한 부분은 index.html 파일 하나만입니다.

처음부터 여러 파일을 만들면 초보자 입장에서는 어디를 열어야 하는지 헷갈립니다. 첫 실습은 한 파일로 시작하는 것이 좋습니다.

5단계: AI가 파일을 만들겠다고 하면 확인하기

AI가 보통 이런 식으로 말할 겁니다.

index.html 파일을 만들겠습니다.
구성은 헤더, 메인 소개, 메뉴 카드, 영업시간, 문의 영역입니다.

이때 바로 겁낼 필요는 없습니다.

다만 아래를 확인합니다.

  • 파일 이름이 index.html인지
  • 현재 폴더가 first-homepage인지
  • 이상한 설치 명령어나 외부 다운로드를 요구하지 않는지
  • .env, 개인정보, 기존 업무 파일을 건드리겠다고 하지 않는지

이번 실습 폴더는 비어 있으니 index.html 생성만 승인하면 됩니다.

6단계: 브라우저에서 결과 확인하기

파일이 만들어졌다면 폴더 안에 index.html이 생깁니다.

가장 쉬운 확인 방법은 이겁니다.

  1. 바탕화면의 first-homepage 폴더를 엽니다.
  2. index.html 파일을 더블클릭합니다.
  3. Chrome 또는 Edge 브라우저에서 홈페이지가 열리는지 봅니다.

PowerShell에서 열고 싶다면 아래 명령어를 써도 됩니다.

start index.html

화면이 열렸다면 성공입니다.

실제 배포된 홈페이지는 아니지만, 내 PC 안에서는 홈페이지처럼 볼 수 있습니다.

7단계: 결과가 마음에 안 들 때 수정 요청하기

첫 결과물이 바로 마음에 들 가능성은 낮습니다.

그게 정상입니다.

AI 코딩 CLI는 한 번에 끝내는 도구라기보다, 대화하면서 고쳐가는 도구에 가깝습니다.

아래처럼 작게 요청합니다.

전체 분위기를 조금 더 고급스럽게 바꿔줘.
단, index.html 하나만 유지해줘.

버튼 색을 주황색보다 차분한 초록색으로 바꿔줘.

대표 메뉴를 커피, 디저트, 선물세트 3개로 바꿔줘.

휴대폰에서 봤을 때 글자가 너무 크지 않게 조정해줘.

영업시간 아래에 "월요일 휴무" 문구를 추가해줘.

한 번에 “전부 예쁘게 해줘”라고 하면 결과가 흔들립니다.

초보자는 작은 수정 요청을 여러 번 하는 편이 훨씬 좋습니다.

8단계: 내가 원하는 업종으로 바꾸기

카페가 아니라 다른 업종이라면 요청문만 바꾸면 됩니다.

예를 들어 미용실이면:

가상의 1인 미용실 홈페이지로 바꿔줘.
첫 화면에는 예약 문의, 시술 메뉴, 운영시간, 위치 안내를 넣어줘.

학원이면:

초등학생 영어 학원 홈페이지로 바꿔줘.
수업 특징, 커리큘럼, 상담 신청 버튼, 학부모 후기 영역을 넣어줘.

공방이면:

원데이 클래스 공방 홈페이지로 바꿔줘.
클래스 종류, 예약 방법, 수강 후기, 위치 안내를 넣어줘.

이렇게 업종만 바꿔도 첫 결과물이 꽤 달라집니다.

자주 막히는 지점

막히는 지점 해결
cd first-homepage가 안 됨 PowerShell을 바탕화면 위치에서 열었는지 확인
파일이 안 보임 AI가 파일 생성을 실제로 승인받았는지 확인
index.html.txt로 만들어짐 파일 이름이 정확히 index.html인지 확인
한글이 깨짐 AI에게 meta charset="UTF-8"을 넣어달라고 요청
화면이 예전 그대로임 브라우저에서 Ctrl + R로 새로고침
AI가 여러 파일을 만들려고 함 index.html 하나만 유지해줘라고 다시 요청

처음에는 이 정도만 알아도 충분합니다.

개발 지식보다 중요한 것은 작게 만들고, 열어보고, 한 가지씩 고치는 흐름입니다.

초보자에게 추천하는 진행 순서

첫날은 여기까지만 해도 됩니다.

  1. 바탕화면에 first-homepage 폴더 만들기
  2. PowerShell에서 cd first-homepage 입력
  3. codex, claude, agy 중 하나 실행
  4. 위 요청문 붙여넣기
  5. index.html 생성 승인
  6. 파일 더블클릭해서 브라우저 확인
  7. 문구나 색상 하나만 수정 요청

이 흐름이 익숙해지면 그다음에 실제 사업 소개 문구, 사진, 지도 링크, 문의 버튼을 넣어볼 수 있습니다.

실제 업무에 적용할 때는 여기서부터 다릅니다

연습용 홈페이지와 실제 고객이 보는 홈페이지는 다릅니다.

실제 업무에 쓰려면 아래를 더 봐야 합니다.

  • 모바일 화면이 정말 읽기 좋은지
  • 문의 버튼이 실제 연락 수단으로 연결되는지
  • 상호명, 주소, 영업시간이 정확한지
  • 네이버, 구글 검색에서 어떤 문구로 노출될지
  • 개인정보가 들어가는 문의폼을 안전하게 처리하는지
  • 도메인과 호스팅을 어떻게 연결할지

그래서 저는 처음에는 index.html 하나로 감을 잡고, 실제 사업용으로 쓸 때는 구조를 다시 잡는 편을 권합니다.

첫 실습은 “AI가 이런 걸 만들 수 있구나”를 확인하는 단계입니다.

실제 고객이 보는 홈페이지는 브랜드, 문의 흐름, 검색 노출, 유지보수까지 같이 봐야 합니다.

Boilerplate AI 컨설팅

Boilerplate는 단순히 AI 도구 설치만 안내하는 곳이 아니라, 실제 업무에 맞게 AI를 적용하는 AI 업무자동화 컨설팅과 홈페이지 제작 흐름을 함께 설계합니다.

AI 코딩 CLI로 첫 홈페이지를 만들어봤지만 실제 사업 소개 페이지, 문의 페이지, 자동화된 업무 흐름까지 연결하는 단계에서 막힌다면 아래 페이지로 연락주세요.

AI 컨설팅 문의하기