목차
노코드도 어려웠던 제가 바이브코딩을 활용해 생애 첫 홈페이지를 완성하기까지의 과정을 정리합니다. 프롬프트 작성, 시행착오, 배포와 느낀 점까지 문과 시각에서 솔직하게 공유합니다.
처음 홈페이지를 만들어 보고 싶다는 생각은 오래전부터 있었지만, HTML과 CSS 화면을 보는 순간마다 저는 늘 브라우저를 닫았습니다. 알파벳과 특수문자가 빼곡한 코드 화면을 보면, 문과 출신인 제가 괜히 남의 영역을 침범하는 것 같은 느낌이 들었습니다. 그래서 비교적 쉬워 보이는 노코드 도구들을 여러 개 시험해 보기도 했습니다. 하지만 템플릿을 고르고, 블록을 끌어다 놓는 것까지는 할 수 있었지만, 조금만 구조를 바꾸려 하면 어디를 건드려야 할지 몰라 다시 원래 화면으로 되돌리는 일이 반복되었습니다. “역시 나는 코딩과는 인연이 없구나”라는 생각을 하면서 홈페이지 만들기는 늘 버킷리스트의 맨 아래에만 적혀 있었습니다. 그러던 어느 날, 생성형 AI와 함께 코드를 만든다는 ‘바이브코딩’이라는 개념을 알게 되었고, 문과도 할 수 있다는 말에 솔직히 반신반의하면서도 한 번쯤은 제대로 시도해 보고 싶다는 마음이 들었습니다.
노코드도 막막했던 제 첫 홈페이지 도전 배경
제가 처음 홈페이지를 만들고 싶었던 이유는 거창한 창업이 아니라, 제 이름으로 된 작은 소개 페이지를 갖고 싶다는 소박한 욕심 때문이었습니다. 블로그 글을 여러 플랫폼에 나눠서 쓰다 보니, 제 소개와 작업물을 한 번에 정리할 수 있는 공간이 있었으면 좋겠다는 생각이 자주 들었습니다. 그래서 노코드 웹사이트 빌더를 사용해 보았지만, 정해진 템플릿 안에서 색상과 글꼴을 바꾸는 수준을 넘어가기가 쉽지 않았습니다. 메뉴 구조를 조금만 다르게 만들거나, 특정 위치에만 이미지를 넣고 싶어도 어떤 설정을 바꿔야 하는지 찾다가 시간이 다 가는 일이 반복되었습니다. 무엇보다도, 화면에서 보이는 요소와 그 뒤에서 어떤 구조로 동작하는지가 연결되지 않으니, 수정할수록 더 불안해지는 느낌이 들었습니다. “이 버튼을 누르면 왜 이 페이지로 넘어가는지”를 눈으로는 알겠는데, 논리로 이해하지 못하니 홈페이지를 하나 만들어 놓고도 온전히 제 것이라는 생각이 들지 않았습니다. 그 과정에서 저는 단순히 결과 화면만 예쁘게 만드는 것이 아니라, 구조와 흐름을 이해하면서 만드는 방식을 배우고 싶다는 마음이 점점 커졌습니다. 그러던 중 바이브코딩이라는 키워드를 접하고, “어차피 노코드도 어렵다면, 차라리 코드를 이해할 수 있는 방향으로 어려움을 겪어 보자”라는 생각에 첫 홈페이지를 바이브코딩으로 만들어 보기로 결심했습니다.
바이브코딩과의 첫 만남, 기대와 불안이 섞인 시작
바이브코딩을 처음 시도할 때 저는 ‘프롬프트만 잘 쓰면 홈페이지가 저절로 완성된다’는 식의 과장된 기대를 일부 가지고 있었습니다. 동시에 코드를 직접 치지 않아도 된다는 점이 오히려 더 불안하게 느껴지기도 했습니다. 그래서 첫 단계는 최대한 구체적으로 제가 원하는 홈페이지의 모습을 글로 정리하는 일이었습니다. 어떤 색을 기본으로 쓰고 싶은지, 상단에는 어떤 메뉴가 필요하고, 메인 화면에는 어떤 문장을 가장 크게 보여 주고 싶은지, 모바일에서도 자연스럽게 보였으면 좋겠다는 요구까지 모두 문장으로 적었습니다. 그리고 이 요구사항을 바이브코딩에 그대로 입력하면서 “이 내용을 바탕으로 반응형 개인 홈페이지의 기본 골격을 만들어 달라”라고 요청했습니다. 잠시 뒤에 제가 전혀 이해하지 못하던 HTML, CSS, 자바스크립트 코드가 한 번에 생성되는 것을 보면서, 신기함과 동시에 ‘이 코드를 정말 믿고 써도 되는 걸까’라는 의문이 동시에 떠올랐습니다. 그래서 바로 배포하지 않고, 우선은 브라우저에서 열어 보며 화면이 어떻게 나오는지 하나씩 확인해 보기로 했습니다. 기대했던 레이아웃과는 조금 달랐지만, 메뉴가 있고, 소개 문구가 중앙에 보이고, 아래로 스크롤하면 섹션이 나뉘어 있다는 사실만으로도 “이 정도면 분명히 출발은 했다”는 확신을 얻을 수 있었습니다.
프롬프트 한 줄로 화면을 만들며 겪은 시행착오
처음 생성된 코드가 어느 정도 동작하는 것을 확인한 뒤, 저는 본격적으로 바이브코딩을 활용해 홈페이지를 제 취향에 맞게 바꾸는 작업을 시작했습니다. 노코드 도구에서는 클릭과 드래그로 하던 일을, 여기서는 모두 문장으로 설명해야 한다는 점이 가장 큰 차이였습니다. 예를 들어 상단 메뉴의 배경색을 좀 더 어두운 색으로 바꾸고 글자를 흰색으로 바꾸고 싶을 때, “상단 네비게이션 바의 배경을 진한 남색으로, 텍스트를 흰색으로 변경해 달라”라고 구체적으로 요청해야 했습니다. 처음에는 표현이 모호해서인지 제가 의도한 대로 바뀌지 않는 경우도 많았습니다. 그러면 저는 브라우저에서 어떤 점이 마음에 들지 않는지 다시 확인한 뒤, “모든 섹션에 그림자가 생기지 않도록 해 달라”거나 “모바일 화면에서 글자가 화면 밖으로 나가지 않게 여백을 더 넣어 달라”처럼 조금 더 정확한 프롬프트로 다시 요청했습니다. 이런 과정을 반복하다 보니, 단순히 ‘예쁘게 해달라’라고 말하는 것과, 구체적인 요소를 기준으로 수정 요청을 하는 것의 차이를 몸으로 느끼게 되었습니다. 시행착오가 계속되었지만, 한 번 프롬프트를 잘 정리해 두면, 비슷한 구조의 다른 페이지를 만들 때도 그대로 응용할 수 있다는 점이 큰 장점이었습니다. 결국 바이브코딩을 통해 홈페이지를 만든다는 것은, 코드 문법을 외우기보다, 내가 원하는 화면과 행동을 논리적인 문장으로 설명하는 연습을 꾸준히 하는 일에 가깝다는 것을 깨달았습니다.
처음 홈페이지를 완성하며 느낀 바이브코딩의 장점과 한계
여러 차례 수정과 실험을 거쳐 첫 홈페이지를 배포했을 때, 주소창에 제 도메인을 입력하고 직접 만든 화면이 떠오르는 순간은 생각보다 감정이 크게 다가왔습니다. 노코드 도구로 템플릿을 살짝 수정했을 때와는 달리, 바이브코딩으로 만든 홈페이지는 코드 한 줄 한 줄을 제가 직접 쓴 것은 아니지만, 구조와 흐름을 제가 설계했다는 느낌이 분명히 있었습니다. 특히 텍스트와 이미지가 어떤 순서로 배치되고, 버튼을 눌렀을 때 어떤 동작을 하는지에 대해, 프롬프트를 작성하면서 수십 번 고민했던 기억이 떠오르며 스스로에 대한 신뢰도 약간은 생겼습니다. 동시에 바이브코딩이 만능 열쇠는 아니라는 점도 분명히 느꼈습니다. 디자인을 조금 더 섬세하게 다듬고 싶을 때, 색 조합이나 여백 감각은 여전히 제가 스스로 공부해야 할 영역이었습니다. 코드 자체도 겉으로 보기에 잘 동작하지만, 성능이나 보안 측면에서 어느 정도 수준인지까지 판단하기에는 아직 역량이 부족하다는 사실도 인지하게 되었습니다. 그럼에도 불구하고, 노코드도 어려웠던 제가 “홈페이지를 한 번 만들어 봤다”에서 “이제는 두 번째, 세 번째 페이지도 만들어 볼 수 있겠다”라는 생각으로 옮겨 갈 수 있게 된 것은 분명 바이브코딩 덕분이었습니다. 저는 이 경험을 통해, 바이브코딩은 코딩을 완전히 대신해 주는 도구라기보다, 문과와 비전공자가 “직접 만들 수 있다”는 감각을 체험하게 해 주는 출발점에 가깝다는 결론에 이르렀습니다.
결론: 요약 및 정리
노코드 도구도 어렵게 느껴졌던 제가 바이브코딩을 통해 처음 홈페이지를 완성하기까지의 과정은, 화려한 기술 시연이라기보다 사고방식을 바꾸는 여정에 가까웠습니다. 처음에는 “AI가 알아서 다 해 줄 것”이라는 막연한 기대도 있었지만, 실제로는 제가 원하는 구조와 기능을 명확히 설명할수록 더 좋은 결과가 나온다는 사실을 몸소 경험했습니다. 프롬프트 한 줄로 화면이 만들어지는 과정은 분명히 신기했지만, 그만큼 구체적인 요구사항을 정리하는 능력과, 생성된 화면을 비판적으로 바라보는 시선이 동시에 요구되었습니다. 완성된 홈페이지를 보면서 저는 코드를 직접 타이핑하지 않았음에도, 설계와 수정 과정에 충분히 참여했기 때문에 스스로 만든 결과물이라는 자부심을 느낄 수 있었습니다. 물론 디자인 감각과 코드 품질, 보안 같은 부분에서는 여전히 공부해야 할 점이 많다는 한계도 분명히 인식하게 되었습니다. 그럼에도 바이브코딩은 “코딩은 나와 거리가 먼 일”이라고 생각하던 문과·비전공자에게, 작은 홈페이지 하나라도 직접 만들어 볼 수 있다는 현실적인 가능성을 보여 주는 도구였습니다. 앞으로 두 번째, 세 번째 홈페이지를 만들 때 저는 여전히 바이브코딩을 활용하겠지만, 동시에 기본적인 웹 구조와 코딩 개념도 함께 공부하며, AI와 사람이 함께 만드는 개발 방식에 조금씩 더 친숙해지고 싶다는 목표를 갖게 되었습니다.