HTML도 몰랐는데 완성했습니다! 첫 웹사이트 제작 과정 공개
처음 웹사이트를 만들려고 하면 HTML, CSS, 자바스크립트라는 낯선 단어부터 부담스럽게 느껴집니다. 코드를 한 줄도 모르는 사람이라면 “내가 정말 웹사이트를 만들 수 있을까?”라는 걱정이 앞설 수 있습니다. 하지만 바이브코딩을 활용하면 모든 문법을 외운 뒤 시작하지 않아도 됩니다.
HTML도 모르던 사람이 웹사이트를 완성하기까지 실제 과정 공개를 통해 아이디어를 정리하는 단계부터 화면 제작, 오류 수정, 배포 전 점검까지 어떤 순서로 진행하면 되는지 살펴보겠습니다. 코딩 경험이 없는 비전공자도 작은 단계를 차례대로 밟으면 충분히 첫 결과물을 완성할 수 있습니다.
1단계, 만들고 싶은 웹사이트를 한 문장으로 정했습니다
처음부터 복잡한 서비스를 만들려고 하지 않았습니다. 선택한 주제는 매일 해야 할 일을 기록하는 간단한 웹사이트였습니다.
처음 정한 목표는 아래와 같았습니다.
“오늘 할 일을 입력하고, 완료 여부를 체크하며, 필요 없는 항목은 삭제할 수 있는 웹사이트를 만든다.”
회원가입, 알림, 통계, 공유 기능은 모두 제외했습니다. 처음에는 아이디어가 많았지만 기능을 늘릴수록 완성하기 어려워진다는 점을 고려했습니다.
첫 웹사이트는 멋진 서비스보다 끝까지 만들 수 있는 작은 목표가 좋습니다.
2단계, AI에게 바로 코드를 요청하지 않았습니다
처음에는 “할 일 관리 웹사이트 만들어 줘”라고 입력하려 했습니다. 하지만 이 문장만으로는 원하는 화면과 기능이 제대로 전달되지 않습니다.
그래서 사용자와 기능, 실행 환경을 먼저 적었습니다.
- 사용자: 개인용으로 사용할 초보자
- 핵심 기능: 할 일 입력, 완료 체크, 삭제
- 실행 환경: 컴퓨터와 휴대전화의 웹브라우저
- 사용 기술: HTML, CSS, 자바스크립트
- 완료 기준: 새로고침해도 기록이 남아 있어야 함
이 내용을 바탕으로 다음과 같이 요청했습니다.
“코딩을 처음 접하는 사람이 관리할 수 있는 할 일 웹사이트를 만들어 줘. HTML, CSS, 자바스크립트를 사용하고 입력, 완료 체크, 삭제 기능을 넣어 줘. 새로고침해도 기록이 유지되게 하고 각 파일의 역할도 쉽게 설명해 줘.”
AI에게 코드를 받기 전에 요구사항을 정리하자 결과가 훨씬 명확해졌습니다.
3단계, HTML·CSS·자바스크립트의 역할부터 확인했습니다
AI가 코드를 만들어 줬지만 처음에는 파일 세 개가 왜 필요한지 알기 어려웠습니다. 그래서 각 파일의 역할을 다시 물었습니다.
- HTML: 화면에 들어갈 제목, 입력창, 버튼의 구조
- CSS: 색상, 크기, 여백, 배치 같은 디자인
- 자바스크립트: 버튼 클릭, 저장, 삭제 같은 동작
집에 비유하면 HTML은 뼈대, CSS는 인테리어, 자바스크립트는 전기와 가전제품처럼 기능을 움직이는 역할입니다.
모든 코드를 외우지는 않았습니다. 대신 어느 파일을 수정하면 화면과 기능이 달라지는지를 이해하는 데 집중했습니다.
4단계, 첫 화면부터 실행해 봤습니다
AI가 제공한 코드를 파일에 저장한 뒤 브라우저에서 HTML 파일을 열었습니다. 처음에는 제목과 입력창, 버튼만 보이는 단순한 화면이었습니다.
디자인이 예쁘지는 않았지만 입력 버튼을 누르면 목록에 할 일이 추가되었습니다. 이때 가장 중요한 첫 성공을 경험했습니다.
처음부터 완성도 높은 디자인을 만들려고 했다면 시작 단계에서 지쳤을 가능성이 큽니다. 버튼 하나라도 정상적으로 작동하는 화면을 먼저 만드는 것이 중요했습니다.
첫 실행에서 확인한 항목은 다음과 같습니다.
- 입력창에 글자가 들어가는가
- 추가 버튼을 누르면 목록이 생기는가
- 완료 표시가 작동하는가
- 삭제 버튼이 작동하는가
5단계, 오류는 메시지와 상황을 함께 전달했습니다
새로고침하자 입력했던 할 일이 모두 사라지는 문제가 생겼습니다. 처음에는 “저장이 안 돼요”라고만 질문하려 했지만, AI가 정확히 분석할 수 있도록 상황을 자세히 적었습니다.
“할 일을 입력하면 화면에는 정상적으로 추가되지만 새로고침하면 목록이 사라집니다. 현재 HTML, CSS, 자바스크립트 파일을 따로 사용하고 있습니다. 기존 디자인과 삭제 기능은 유지하면서 저장 부분만 수정해 주세요.”
AI는 브라우저의 localStorage에 데이터를 저장하는 코드를 제안했습니다. 코드를 적용한 뒤 다시 실행하자 새로고침 후에도 내용이 남았습니다.
오류가 생겼을 때는 기대한 결과, 실제 결과, 유지해야 할 기능을 함께 설명해야 합니다.
6단계, 디자인은 기능이 안정된 뒤 수정했습니다
저장과 삭제 기능이 모두 작동한 뒤 화면 디자인을 다듬었습니다.
한 번에 여러 부분을 바꾸지 않고 아래 순서로 요청했습니다.
- 전체 배경색 변경
- 입력창과 버튼 크기 조정
- 완료된 항목에 취소선 표시
- 휴대전화 화면에 맞게 너비 조정
이 과정에서도 “기능은 바꾸지 말고 CSS만 수정해 달라”고 범위를 분명히 했습니다. 그 결과 잘 작동하던 자바스크립트 코드가 함께 바뀌는 일을 줄일 수 있었습니다.
기능 수정과 디자인 수정을 분리하면 오류를 찾기가 쉬워집니다.
7단계, 예상하지 못한 사용 방법도 테스트했습니다
화면이 보이고 버튼이 작동한다고 바로 완성된 것은 아니었습니다. 실제 사용자가 할 수 있는 실수를 확인했습니다.
- 빈칸으로 추가 버튼 누르기
- 같은 내용을 여러 번 입력하기
- 매우 긴 문장 입력하기
- 완료된 항목 다시 누르기
- 모든 항목 삭제하기
- 휴대전화 크기로 화면 줄이기
빈칸으로 버튼을 누르면 내용 없는 항목이 생기는 문제가 발견되었습니다. AI에게 “입력값이 비어 있으면 추가되지 않고 안내 문구를 보여 달라”고 요청해 수정했습니다.
이처럼 정상적인 사용만 확인하지 않고 잘못된 입력도 시험해야 웹사이트가 안정적으로 작동합니다.
8단계, 완성된 버전을 따로 저장했습니다
기능을 하나 추가할 때마다 이전 파일을 복사해 두었습니다.
예를 들면 아래와 같이 구분했습니다.
- todo_01_기본화면
- todo_02_추가기능
- todo_03_저장기능
- todo_04_모바일디자인
- todo_final
중간에 코드가 망가져도 이전 상태로 돌아갈 수 있어 부담이 줄었습니다. Git을 몰라도 처음에는 폴더를 복사하고 이름을 붙이는 방식으로 충분히 버전을 관리할 수 있습니다.
잘 작동하는 상태를 저장하는 습관은 초보자에게 가장 든든한 안전장치입니다.
첫 웹사이트를 완성하며 알게 된 가장 중요한 점
HTML도 모르던 사람이 웹사이트를 완성할 수 있었던 이유는 AI가 모든 일을 대신해 줬기 때문만은 아닙니다. 프로젝트를 작은 기능으로 나누고, 한 번에 하나씩 요청하며, 매 단계에서 직접 실행하고 확인했기 때문입니다.
처음부터 코드를 완벽하게 이해할 필요는 없습니다. HTML은 구조, CSS는 디자인, 자바스크립트는 동작을 담당한다는 기본 개념부터 알아가면 됩니다. 오류가 발생했을 때 상황을 자세히 설명하고, 수정 범위를 제한하며, 잘 작동하는 버전을 남기는 습관도 큰 도움이 됩니다.
바이브코딩의 목표는 코드를 한 번에 받는 것이 아니라 원하는 결과물을 끝까지 완성하는 것입니다. 작고 단순한 웹사이트 하나를 직접 완성하면 다음 프로젝트에서는 더 구체적인 요구사항을 작성하고, AI가 만든 코드도 조금씩 읽을 수 있게 됩니다.
처음 시작하는 분이라면 오늘 거대한 서비스 대신 입력창과 버튼 하나가 있는 작은 웹사이트부터 만들어 보세요. 첫 화면이 브라우저에 나타나는 순간, 코딩은 어려운 지식이 아니라 아이디어를 실제로 구현하는 도구로 느껴질 것입니다.