Vibe Coding으로 웹사이트 만들 때 꼭 알아야 할 10가지

개요

처음 웹사이트를 만들면서 실수했던 것들이 시간이 지나니 다 패턴처럼 보이기 시작함. 이 글은 Vibe Coding 방식으로 웹사이트를 만들면서 반복적으로 마주친 문제들을 정리한 주의사항. 웹을 직접 만들어보기로 마음먹은 사람들에게 실전에서 꼭 필요한 팁을 정리해주고자 함. 막히는 부분이 비슷하고, '알고 시작했으면' 좋았을 것 같은 것들만 담았음.

내 자신한테 리마인드하려고 적는 주의사항 10가지

1. 욕심부리지 말 것
본인은 웹사이트를 만들면서 너무 많은 기능을 넣고 싶었는데(예를 들어 편집기능, admin 관리자 페이지, 로그인 등), 그러다보니 웹사이트가 무거워지고 로딩 속도가 느려짐. 나중에 가서 지우려고 하니 이미 해당 기능들을 만드는데 필요한 노드모듈도 다 설치되었고, AI한테 지워달라고 플젝이 너무 커졌다 보니 놓치는 게 많았음. 따라서 웹사이트를 만들면서 꼭 필요한 기능만 추가하고, 있으면 좋겠다 싶은 기능은 차후에 천천히 고민해보고 추가할 것.
2. 일관성 유지를 위한 장치를 마련할 것
index.html에 모든 코드를 다 때려넣다 보면 나중에 유지보수가 어려움. css / js / assets 폴더 등 기본 구조를 잘 나누고 시작할 것. 특히 일관성(스타일이든, 컨셉이든, 폴더 구조든)을 유지하기 위한 PRD를 최대한 자세히 만들되, 1번을 명심할 것.
3. 도메인, 서버와 호스팅을 잘 선택할 것
도메인은 왠만하면 호스팅 서비스에서 기본 도메인을 제공해주니, 바로 상업적으로 나설 것이 아니면 우선 기본으로 받는 도메인을 활용하고, 서버는 장단점을 확실히 비교해서 선택할 것. 필자는 호스팅을 대강 했던 곳으로 했다가 차후에 문제를 발견했지만 이미 결제는 끝났고 취소 및 환불이 불가능한 상태였음.
4. 모든 페이지에서 SEO 기본 요소를 신경 쓸 것
제목, 설명(meta), og:image, favicon 등은 단순히 예쁘게 보이는 요소가 아니라 구글 검색과 SNS 공유 시 핵심이 됨.
5. 직접 보는 사람 입장에서 테스트해볼 것(다른 사람에게 피드백 받기)
혼자만 알고 있는 링크, 안 눌리는 버튼, 의도치 않게 흘러가는 UX 등은 실제 사용자 입장에서 확인해봐야 알 수 있음.
6. 배포 전에 웹 호스팅 환경에 맞는 세팅 확인할 것
로컬에서는 되던 코드가 서버에서 안 되는 경우가 많음. relative path, index.html 위치, 기본 포트 등을 꼼꼼히 점검할 것.
7. 완벽하게 만들 생각보다 '완성하고 공개'를 목표로 할 것
완벽주의 때문에 끝없이 수정을 반복하게 되는 경우가 많음. 필자도 간단한 웹사이트 하나 디테일하게 잡다가 한달도 넘게 걸린 경험이 있음. 작게라도 일단 배포하고 큰 문제점들(서버나 로직)을 먼저 해결하는 것이 중요함.
8. 웹사이트 배포 후 주기적으로 확인할 것
웹사이트 배포 후 주기적으로 확인해보면 문제를 빠르게 발견할 수 있음. 워드프레스 같은 경우, form 설정에 보안이 부족해 알 수 없는 plugin들이 막 설치되는 경우가 있었음. 주기적으로 확인하지 않으면 사이트가 다운되도 잘 모르는 경우가 발생했음. 또한 서둘러 조치하지 않으면 더 많은 해킹코드가 심어져서 일이 더 심각해질 수 있음.
9. 가끔은 AI한테 모든걸 맡기는 것보단 직접 해결해보는게 빠를 수 있음
간단한 CSS 작업이나 고치고 싶은 스타일이 있는 경우, F12 개발자 도구를 통해 직접 실험해보고 조정해보는 것이 더 빠를 수 있음. AI는 간단한 수정만 하면 되는 것을 매우 복잡하게 만들어 망치거나 못 찾는 경우도 다반사.
10. 웹하드나 웹트래픽 사용량도 주기적으로 체크해볼 것
그냥 정적 파일만 filezilla나 ftp프로토콜로 업로드 하는 경우엔 큰 문제가 잘 생기지 않지만, 동적 파일이나 노드모듈을 사용하는 경우엔 웹하드나 웹트래픽 사용량이 자신도 모르게 npm 캐시나 기타 다른 캐시들로 인해 빠르게 증가할 수 있음. 주기적으로 체크해보고 만약 급속도로 사용량이 채워진다면, 문제를 서둘러 발견하고 해결해야 웹사이트가 안정적으로 돌아감.

요약

웹사이트를 처음 만들 때는 욕심을 줄이고 구조와 목적에 집중하는 것이 중요함.
배포 후에도 SEO, 보안, 트래픽 등 눈에 안 보이는 요소들을 주기적으로 점검해야 함.
AI의 도움도 좋지만, 직접 수정하고 실험하는 습관이 장기적으로 더 빠르고 안정적임.