AI와 함께 회사 홈페이지를 만든 과정 — 바이브코딩 실전 워크플로와 사람이 꼭 해야 할 일

"AI로 코딩하면 정말 빨라지나요?" 요즘 가장 많이 받는 질문입니다. 답은 "네, 하지만 무엇을 맡기고 무엇을 직접 할지 알 때만" 입니다.

지금 보고 계신 Springuptech 홈페이지는 AI 코딩 도구와 함께 만들었습니다. 첫날 기획부터 실제 배포까지 마쳤고, 이후 일주일 동안 실제로 써 보면서 다듬었습니다. 이 글에서는 그 과정을 순서대로 보여 드리고, 그 과정에서 AI가 놓친 것과 사람이 잡아낸 것을 솔직하게 정리하겠습니다.

바이브코딩이란?

바이브코딩(Vibe Coding)은 사람이 원하는 것을 자연어로 설명하고, AI가 코드를 작성하는 개발 방식을 가리키는 말입니다. 사람은 "무엇을, 왜" 만들지를 정하고, AI는 "어떻게"를 빠르게 구현합니다.

중요한 점은 AI가 결과물에 책임을 지지 않는다는 것입니다. 코드가 그럴듯해 보여도 실제로 동작하는지, 고객에게 오해를 주지 않는지, 보안상 문제가 없는지는 결국 사람이 확인해야 합니다.

1단계. 두서없는 요청을 정리된 요구사항으로 바꾸기

시작은 아주 짧은 메모였습니다. "회사 홈페이지를 만들고 싶다, 다크·라이트 모드가 있으면 좋겠다, 경력을 보여 주고 싶다, 이메일로 문의를 받고 싶다, 계약은 전자계약으로 하고 싶다."

AI에게 바로 코드를 쓰게 하지 않고, 먼저 "내 의도를 이해했는지 설명해 달라" 고 요청했습니다. 그러자 AI는 요구사항을 정리하고, 메뉴 구조를 제안하고, 결정이 필요한 질문을 되물었습니다.

• 기술 스택과 배포 방식은 무엇으로 할지
• 사이트 언어는 한국어만인지, 영어도 필요한지
• 전자계약은 외부 서비스를 연동할지, 직접 만들지

이 단계가 가장 중요합니다. 요구사항이 흐릿하면 AI는 그럴듯하지만 엉뚱한 것을 매우 빠르게 만듭니다.

2단계. 사람이 반드시 판단해야 했던 것: 경력 표기

AI가 처음 받은 요청 중에는 "대기업 경력을 협력사로 표기하면 어떨까"라는 아이디어가 있었습니다. 대표 개발자가 하청이나 프리랜서로 참여한 프로젝트였기 때문에, 그대로 "협력사"라고 쓰면 회사 간 직접 계약으로 오해받을 수 있었습니다.

그래서 "최종 고객사(End Client) 기준"으로 표기하고, 참여 형태를 고지 문구로 밝히는 방식을 택했습니다. 로고도 쓰지 않았습니다. 이런 결정은 기술 문제가 아니라 신뢰와 법적 책임의 문제입니다. AI는 선택지를 제시할 수 있지만, 최종 판단은 사람이 해야 합니다.

3단계. 구현: AI가 특히 잘하는 일

구조가 정해지자 구현은 정말 빨랐습니다. 특히 다음 작업에서 AI의 속도가 빛났습니다.

• 반복적인 화면 작성: 서비스 카드, 프로젝트 카드, 진행 단계처럼 비슷한 구성 요소
• 다국어 문구: 한국어 문구를 바탕으로 자연스러운 영어 버전 작성
• 데이터 정리: 이력서의 프로젝트 24건을 최종 고객사, 기간, 기술 스택으로 구조화
• 설정 작업: 다크 모드, 사이트맵, 검색엔진용 robots.txt, 링크 미리보기 이미지

사람이 직접 했다면 며칠 걸렸을 반복 작업이 몇 시간 만에 끝났습니다.

4단계. 실제로 테스트해서 찾은 버그들

AI가 만든 코드는 빌드도 통과했고 화면도 멀쩡해 보였습니다. 하지만 실제 브라우저에서 사용자처럼 조작해 보니 문제가 나왔습니다.

① 입력한 내용이 사라지는 문의 양식 최신 React에서는 폼 제출이 끝나면 입력값이 자동으로 비워집니다. 그래서 고객이 전화번호를 잘못 입력해 오류가 나면, 정성껏 쓴 프로젝트 설명까지 전부 사라졌습니다. 오류 상황을 일부러 만들어 보지 않았다면 고객이 먼저 겪었을 문제입니다.

② 서버와 브라우저가 다르게 표시한 나라 이름 전화번호 국가 선택 목록에서 서버는 "홍콩(중국 특별행정구)", 브라우저는 "홍콩"이라고 표시해 화면 오류가 났습니다. 개발자 도구 콘솔을 열어 봐야만 보이는 문제였습니다.

③ 휴대폰에서만 회색으로 보이는 화면 휴대폰 브라우저의 '강제 다크 모드'가 밝은 테마를 회색으로 칠하고 있었습니다. 사이트가 자체 다크 모드를 지원한다는 선언(color-scheme)을 추가해 대부분의 경우를 해결했습니다.

세 가지 모두 "빌드 성공"만 보고 넘어갔다면 놓쳤을 문제입니다.

5단계. 배포 후 실제 사용에서 나온 개선

배포한 뒤 실제로 써 보면서 나온 의견이 오히려 가장 가치 있었습니다.

• "mailto 링크를 일반인이 얼마나 쓸까?" → 이메일 주소를 누르면 복사되는 버튼으로 변경
• "고객 전화번호도 받고 싶다, 해외 고객도 있을 수 있다" → 국가 선택이 있는 연락처 입력란 추가
• "메일이 안 온다" → 확인해 보니 정크 메일함. 발신 도메인 인증과 DMARC 설정으로 신뢰도 개선

AI는 사용자가 실제로 불편해하는 지점을 스스로 알지 못합니다. 써 보는 사람의 감각이 제품을 완성합니다.

AI에게 맡길 일, 사람이 할 일

AI에게 맡기기 좋은 일	사람이 반드시 해야 할 일
반복적인 코드와 화면 작성	무엇을 만들지, 왜 만들지 결정
다국어 번역 초안	법적·윤리적 표현 검토
설정 파일, 문서 초안	실제 사용자 흐름으로 테스트
오류 메시지 분석과 수정안 제시	비밀키·개인정보 등 보안 판단
선택지 비교 정리	최종 선택과 책임

마치며

AI는 개발 속도를 확실히 바꿨습니다. 하지만 속도가 빨라진 만큼 검증의 중요성은 더 커졌습니다. 빠르게 만든 결과물을 고객이 믿고 쓸 수 있게 만드는 것, 그것이 경험 많은 개발자의 역할이라고 생각합니다.

Springuptech는 이런 방식으로 일합니다. AI로 빠르게 만들고, 22년의 실무 경험으로 꼼꼼하게 검증합니다. 아이디어가 있다면 편하게 문의해 주세요.