덕질하다 만든 웹사이트에 49만 명이 방문했다

[바이브코더스] 웹소설 속 회사를 현실로: 바이브 코딩으로 인트라넷 만든 도연희 님 인터뷰

"코딩 몰라도, 좋아하는 마음만 있으면 가능해요"

링크드인 조회수 300만, 웹사이트 방문자 49만 명. 비개발자 대학생이 자신이 좋아하는 웹소설에 등장하는 가상 회사의 인트라넷을 만들어 화제가 됐습니다. 바로 <괴담에 떨어져도 출근을 해야 하는구나(괴담출근)>에 등장하는 ‘백일몽 주식회사’의 인트라넷을 직접 만든 건데요.

Lovable과 Claude Code, Gemini만으로 완성한 이 프로젝트는 결과물만큼이나 과정이 눈길을 끌었습니다. 바로 제작 과정을 노션에 꼼꼼히 기록해 공개하면서 화제가 된 것이죠. 이번 인터뷰에서는 “코딩을 몰라도 아이디어와 열정만 있으면 이런 게 가능하구나”를 몸소 증명한 도연희 님을 만나 이야기를 들어봤습니다.

Part 1. 덕질의 새로운 형태: 웹소설 속 회사 인트라넷을 만들다

Q. 간단한 자기소개 부탁드립니다.

안녕하세요. 취미로 바이브 코딩을 사용해서 이것저것 만들어보는 것을 굉장히 좋아하는 도연희라고 합니다. 대학생으로 소개됐지만, 사실 작년 8월에 졸업했고요. 지금은 헬스테크 스타트업에서 감사하게도 프로덕트 오너(Product Owner)로 일하고 있습니다.

Q. 프로젝트의 근간이 된 소설부터 알아야 할 것 같아요. 어떤 소설이고, 어떤 점에 빠지게 되신 건가요?

제가 보고 있는 소설은 카카오페이지에서 연재 중인 백덕수 작가님의 '괴담에 떨어져도 출근을 해야 하는구나'라는 웹소설이에요. 제목이 길어서 보통 '괴담출근'이라고 부르곤 합니다.

내용을 간단하게 소개하면, 주인공이 본인이 굉장히 좋아하는 공포 장르 현대 판타지의 팝업 이벤트에 갔다가, 우연히 그 작품 속에 끌려 들어가서 어떻게든 집으로 돌아오려고 고군분투하는 내용입니다.

좋아하는 이유는 크게 두 가지예요. 첫째, 캐릭터들이 굉장히 매력적이에요. 주인공은 당연하고 정말 잠깐 스쳐 지나가는 조연들마저도 이름부터 전부 기억에 남을 만큼 굉장히 입체적이어서 주인공이 집에 돌아가는 과정을 진심으로 응원하게 되더라고요. 둘째, 공포 장르인 만큼 여러 괴담이 나오는데요. 작가님이 자연스럽게 스토리텔링으로 잘 엮으셨어요. 게다가 CSS 텍스트 효과를 활용해 글자가 깜빡이는 연출까지 구현돼 있어서 더 실감 나고 재밌었습니다.

Q. 보통 소설을 읽더라도 대부분 "재밌다"에서 그치는데, 어떻게 인트라넷을 만들겠다는 생각까지 하셨나요?

처음부터 이걸 만들려고 했던 건 아니에요. 작년 12월, '2025년이 끝나기 전에 나만의 재미로 무언가를 만들어보자'고 생각했어요. 그냥 만드는 과정에서 재미를 느낄 수 있는 무언가요. 그 찰나에 괴담출근이 생각났고, '이거다' 싶었습니다. 그럼 뭘 만들까 고민했을 때 마침 원작 속에서 주인공이 다니는 회사 인트라넷에 굉장히 자주 접속하는 걸 보여주니까 '아, 이거부터 만들어보자'라고 생각했어요.

Q. 만들겠다고 생각은 하더라도 실행으로 옮기기가 어려웠을 것 같아요. 기존에 개발 경험이 있으셨나요?

아니요. 다만 바이브 코딩 경험은 있었어요. 제가 원래 글을 많이 쓰는데, 그걸 노션 퍼블릭 페이지로 관리하다가 글이 너무 많아져서 아예 따로 웹페이지를 만들었던 거죠. 그때 처음으로 Lovable로 바이브 코딩을 제대로 해봤지만, 처음부터 끝까지 코드를 직접 작성해 본 적은 없었어요.

파이썬은 조금 배워본 적이 있는데, 정작 웹사이트를 만들 때 중요한 HTML이나 CSS, 리액트 같은 건 전혀 다룰 줄 몰랐어요. 그래서 처음엔 깃허브도 제대로 못 다뤄서, 조금 고생했던 기억이 있네요.

Part 2. 도구와 워크플로우: 한 달 만에 완성한 비결

Q. 인트라넷에 접속해 보니 정말 실제 기업에서 사용할 것 같은 퀄리티였어요. 소설에 이만큼 자세히 묘사되어 있지 않았을 텐데, 어떤 걸 기준으로 구현하셨나요?

기획할 때는 두 가지 기준을 세워서 먼저 리스트업하고, 그다음에 섞어서 정리했어요.

• 사내 인트라넷이라면 무조건 있을 법한 것들 - 업무 시스템, 공지사항 등
• '백일몽 주식회사'라서 있을 법한 기능들 - 어둠 매뉴얼, 장비 대여 기능 등

특히 백일몽 인트라넷은 원작에서 주인공이 사용하는 장면이 여러 번 나오거든요. 그래서 그런 기능들은 가능한 한 그대로 구현하는 게 목표였어요.

제가 꼭 구현하고 싶었던 기능 중 하나가 인트라넷에서 '우주쇼핑몰'이라는 외부 웹사이트로 넘어가는 기능이에요. 작품 초반에 과장님 아이디로 로그인해서 뒤로 가기를 다섯 번 연타하면 밑에 아이콘이 뜨고, 이걸 클릭하면 우주쇼핑몰로 넘어갈 수 있는데, 이게 작품 속에 그대로 나와 있어 꼭 만들어 보고 싶었습니다.

Q. 제작 기간을 보면 한 달 남짓으로 짧은 기간 안에 완성하셨는데, 주로 사용한 도구와 워크플로우가 궁금합니다.

주로 사용한 도구는 Lovable과 Claude Code였고, 개발 환경은 Antigravity에서 진행했어요. Antigravity를 선택한 이유는 따로 없고, 제가 이미 Gemini Pro 모델을 유료 구독하고 있었거든요.

제 워크플로우는 이렇게 진행됩니다.

1. 처음 프로젝트를 시작할 때 Gemini랑 대화하면서 기획을 구체화해서 문서를 만듭니다.

2. 그 문서를 Lovable에 넣어서 최초의 MVP를 생성합니다.

3. 깃허브로 연동시킨 다음, Antigravity에서 로컬로 끌고 와서 작업합니다.

4. Antigravity에서는 한쪽에 Claude Code를 켜놓고, 한쪽에 Gemini Pro 모델을 써서 동시에 작업을 진행했습니다.

Q. 실제로 사용한 프롬프트와 답변도 볼 수 있을까요?

이게 재난관리국을 처음 기획했던, 최초의 스레드예요. 처음에는 재난관리국 관련해서 인터넷에서 긁어모은 자료들을 쭉 넣어두고, “이게 재난관리국이야, 이해해”라는 식으로 먼저 설명했어요. 그리고 제가 대충 줄글로 아이디어를 적어서 넘겼고요. Gemini가 최초의 기획안을 만들어 주면, 그걸 계속 읽으면서 "이 부분은 이렇게 할 거야, 저 부분은 저렇게 할 거야"라고 티키타카 하면서 최종 문서를 만들었어요.

그다음 그 문서를 PDF로 다운로드해서 Lovable에 첨부하고, “이 3개의 문서를 바탕으로 만들어줘”라고 요청했습니다. 재난관리국은 정부 기관 콘셉트이다 보니까, 이때는 대한민국 정부 UI/UX 컴포넌트도 같이 활용해 달라고 했죠.

Q. 노션을 보니 단순히 대화만으로 완성한 것이 아니라, 이미지나 숫자를 활용한 경우도 있더라고요. 관련해서 노하우를 알 수 있을까요?

저는 최대한 이미지를 활용하려고 해요. 특히 웹페이지 디자인할 때 어디에 어떤 컴포넌트가 들어가야 하고, 어떤 구성이 돼야 하는지 설명할 때는 레퍼런스를 많이 찾으려고 해요.

Pinterest, Behance 같은 웹사이트에서 레퍼런스를 검색해서 제 마음에 드는 이미지들을 몇 개 저장해서 레퍼런스로 넣어주거나, MVP가 나온 후 수정 사항이 생기면 캡처해서 빨간색 네모로 표시해요. "이 빨간색 네모 안에 있는 걸 이렇게 바꿔줘" 이런 식으로 지시하면 말로 설명하는 것보다 훨씬 잘 알아듣더라고요.

Part 3. 시행착오: AI가 잘하는 것 vs 사람이 해야 하는 것

Q. 프로젝트 이면에는 수많은 시행착오도 있었을 것 같아요. 가장 큰 시행착오나 막혔던 순간이 있다면요?

가장 먼저 떠오르는 건 데이터 관리하는 부분이었어요. 데이터 스키마 짜는 작업이었는데, 특히 초자연재난관리국 웹페이지를 만들 때 각 페르소나별로 데이터가 따로 있었고, 심지어 관계형 데이터였거든요. 누가 누구에게 쪽지를 보냈고, 이 사람들한테는 보여야 하는데 저 사람들한테는 보이면 안 되고 이런 식이었죠.

처음에는 데이터 스키마를 초반에 만들어두고 시작하는 게 좋다는 걸 아예 몰랐어요. 하다 보니 데이터가 쌓이고 쌓여서, 나중에는 도저히 관리가 안 되더라고요. A랑 B한테만 보여야 하는데 A한테는 보이고 B한테는 안 보이고, 데이터를 까보면 둘이 연결은 되어 있는데 막상 빌드하면 화면에는 안 보이고요.

처음엔 하드코딩으로 하나하나 지시했어요. “B도 보이게 코드 한 줄 추가해 줘” 이런 식으로요. 그런데 이렇게 하다가는 도저히 스케일러블(scalable)하지 않겠다는 판단이 서서, 작업을 잠깐 멈추고 스키마를 처음부터 다시 만드는 데만 3~4일을 썼습니다. 그때 뼈저리게 깨달았죠. ‘처음에 이걸 잘 만들어놔야 나중에 추가돼도 관리가 잘 되겠구나’라는 걸요.

Q. 저는 인트라넷에 게스트 모드로 접속했었는데, 그럼 제가 못 본 것도 많았겠네요. 이외에도 노션을 보면 더미 데이터 제작도 시간이 오래 걸렸다고 들었어요.

이건 AI의 능력치 한계인지는 잘 모르겠어요. 제가 생각했을 때 충분히 잘 만들어낼 것 같은데, 콘텍스트를 AI가 제대로 이해하지 못한 이유가 컸던 것 같거든요. 이 작품은 저작권 이슈도 있고 하니까, 당연히 원문을 그대로 넣을 수는 없잖아요. 작품을 읽고 제가 필요한 내용을 제 말로 풀어서 설명하면서 맥락을 먹이는 방식이다 보니, 결과물이 원작에 가까운 느낌을 충분히 내지 못하더라고요.

매뉴얼 같은 건 처음에 다 Gemini한테 만들게 시켰는데, 내용 자체는 맞아도 어투나 단어 선택, 구성 같은 게 계속 마음에 안 들었어요. 그래서 계속 프롬프팅을 하다가 “아, 이러다가는 너무 오래 걸리겠다” 싶어서, Gemini가 초안을 뽑아주면 그걸 보고 제가 처음부터 다시 다 작성했어요. 어쩔 수 없이 오래 걸리는 작업이었죠.

Q. 이스터에그 이야기를 빼놓을 수 없을 것 같아요. 저도 처음 발견했을 때 정말 무서웠는데요. 구현은 어떻게 하신 건가요?

구현하는 과정에서 걱정되는 건 없었어요. AI가 해줄 수 있을 거라고 믿었으니까요. 단지 아이디어들이 조금 지루하지 않았으면 좋겠다는 게 컸어요. 화면을 통해서 보는 거다 보니까 실제보다 공포감이 덜 할 수 있잖아요.

그래서 최대한 예상하지 못할 곳에 예상하지 못할 효과들을 넣는 것, 그리고 효과들이 서로 중복되지 않도록 하는 걸 중요하게 여겼어요. 예를 들어, 쪽지를 누르면 뭔가 튀어 오르는데, 그러면 쪽지에 똑같은 효과를 두 번 넣지 않는 등 효과들을 잘 분산시키려고 노력했어요.

Part 4. 바이럴의 비밀: 노션 기록과 데이터 기반 개선

Q. 완성된 결과물을 봤을 때 기분이 어떠셨나요?

기분이 너무 좋았죠. 제가 생각했던 대로 구현되니까 정말 뿌듯했어요. 처음에는 그냥 재미로 만들려고 시작했다가, 어느 순간 ‘이거를 나만 볼 수 없다’는 생각이 들어서 공유도 하게 됐는데요. 그렇게 공개까지 하고 나니, 머릿속에 있던 게 딱 눈앞에 보여서 그게 제일 뿌듯했던 것 같아요.

Q. 처음 공개했을 때 이렇게 잘될 거라고 예상하셨나요?

기대는 했었는데, 이렇게까지 될 줄은 생각도 못 했어요. 애초에 제가 SNS에서 적극적으로 활동하던 것도 아니었고, 그냥 올리는 것 자체에 의의를 뒀었거든요. ‘누구든 봤으면 좋겠다’는 마음으로 올렸는데, 올리고 바로 반응이 온 것도 아니고요. 한 9~10일쯤 지나서야 반응이 생기기 시작한 거라, 전혀 예상하지 못했어요.

Q. 오늘 인터뷰에서도 언급했는데, 주목받으신 이유 중에 노션을 빼놓을 수 없을 것 같아요. 다 완성하고 작성하신 건지, 과정 중에 작성하신 건가요?

프로젝트 진행하는 과정에서 '아, 이거는 나중에 글로 써야겠다'라고 메모해 놓는 정도로 하고, 끝나고 몰아서 쭉 썼어요. 약간 회고하는 느낌으로요. 기록하면서 깨달은 건, 저는 생각했던 것보다 아이디어가 한 번 생기면 그때 끝을 봐야 하는 사람인 것 같더라고요. 어떤 분들은 아이디어가 생겼을 때 차근차근 쌓아가시잖아요. 근데 저는 한 번 아이디어가 딱 떠오르면, 빨리 기획하고 개발해서 무언가를 보여줘야 하는 사람인 것 같아요.

프로젝트 기간이 길어질수록 흥미가 떨어지는 편이라, 바이브 코딩이라는 도구가 생긴 게 저한테는 정말 다행이죠. 빨리빨리 해야 하는 사람인데, 그걸 가능하게 해주니까요.

Q. 단순히 완성에 그친 것이 아니라, 유입 데이터들을 분석해서 빠르게 개선한 점도 인상 깊었어요.

기존에는 학생이었다 보니까 이런 프로젝트를 제대로 진행해 본 적이 없었는데, 이번에는 실시간으로 반응이 오다 보니까 반응들을 그냥 지나칠 수가 없었어요. 계속 통계치를 보면서 '내가 어떻게 하면 조금 더 많이 제공할 수 있을까' 고민하다 보니까, 자연스럽게 통계치를 보게 됐던 것 같아요.

화면에 보이는 것도 그렇고, 생각보다 로그인에서 어려워하시는 분들이 많구나 하는 걸 계속 느끼고 있었거든요. 그런데 이게 숫자로 딱 보이니까 ‘이건 그냥 넘어가면 안 되겠다. 어떻게든 해결해야겠다’는 생각이 들어서 바로 게스트 모드를 만들었어요.

또 하나 기억에 남는 건, 초자연재난관리국을 처음 배포했을 때 뭔가 조금 부족하다는 느낌이 들었다는 거예요. 반응을 보니까 특히 작품 속 캐릭터들이 서로에게 했던 말들, 서로에게 할 법한 말들, 그리고 그들이 느꼈던 감정이 기록으로 남아 있는 걸 발굴해 내는 걸 굉장히 좋아해 주시더라고요. 그래서 “발굴할 수 있는 창구를 하나 더 열어주자”라고 생각해서, 재난관리국에 특별한 버전을 만들어 연결해 뒀어요. 그걸 발견하신 분들이 안에 있는 쪽지나 공지사항을 보면서 같이 마음 아파하시는 걸 보니, 괜히 뿌듯했던 기억이 있어요.

Q. 피드백도 다앙하게 받아보셨을 것 같아요. 가장 기억에 남는 댓글이 있나요?

다들 과몰입해서 즐겨주셔서 너무 감사했는데요. 제일 기억에 남는 건, 제 프로젝트를 보고 원작을 안 보셨던 분들이 “이거 보고 원작 보러 갔다”라고 하신 댓글이었어요. 제가 작가도 아닌데 괜히 대신 뿌듯하더라고요. 그리고 “작가님이 납치해서 가셨으면 좋겠다” 같은 반응들도 정말 재밌었어요.

Part 5. 바이브 코딩으로 바꾼 것들

Q. 이번 프로젝트로 바이브 코딩이 팬덤 문화나 혹은 덕질 문화를 바꿀 수 있다는 가능성을 보여주신 것 같아요. 이에 대해서는 어떻게 생각하시나요?

저는 사실 ‘덕질’이라는 단어 자체가 ‘질’이라는 말 때문에 뭔가 ‘행위’를 뜻하는 단어가 된 느낌이 있잖아요. 그런데 저는 그 행위가 꼭 필수는 아니라고 생각해요. 가만히 있어도 좋아하는 마음이 있다면, 그 자체만으로도 덕질이라고 보거든요. 그럼에도 확실한 건, 이런 도구들 덕분에 내가 혼자만 알고 있던 ‘좋아하는 마음’을 표현할 수 있는 방법이 정말 많아졌다는 거예요. 남들이랑 같이 즐길 수 있는 방법도 훨씬 많아졌고요.

SNS만 봐도 그렇잖아요. 원래도 남들과 같이 덕질할 수 있게 해주는 기술이자 플랫폼인데, 바이브 코딩도 또 다른 도구이자 플랫폼으로 작용하게 된 것 같아요. 그래서 혼자가 아니라 다 같이 하는 덕질이 더 쉬워진 것 같아요.

Q. 바이브 코딩 입문자들에게 추천하고 싶은 도구나 조언이 있다면요?

요즘 도구가 너무 많이 나와서, 그중에 뭐가 제일 베스트라고 딱 말씀드리기는 조심스러운데요. 저는 Lovable로 입문했고, 처음 사용하시는 분들께 Lovable이 굉장히 쓰기 편한 도구인 건 확실한 것 같아요.

개발 환경에 조금 더 익숙해지고 싶다면 Cursor나 Antigravity로 시작하셔도 좋고요. 요즘 유튜브에 정말 좋은 영상들이 많이 올라와 있잖아요. 저도 그런 영상들을 보면서 도움을 많이 받았어서, 그런 식으로 따라 해 보면서 공부하시면 좋을 것 같습니다.

Q. 최근 취업에 성공하셨는데, 이 프로젝트의 경험이 도움이 되셨나요?

굉장히 많은 도움이 됐어요. 이걸 글로 정리해서 나를 설명할 때 쓸 수 있는 도구 중 하나가 된 거잖아요. 이런 경험이 있다는 게 큰 도움이 됐고, AI를 잘 다루고 그걸 통해서 내가 뭘 할 수 있는지, 무엇을 AI에게 맡길 수 있는지를 구분하는 능력을 가지고 있는 게 중요한 시대가 된 것 같아요. 결국 내가 정말 할 수 있는 게 뭔지 정확히 아는 게 제일 좋은 것 같아요. 그런 차원에서 이것저것 만들어 보시고, 그 과정을 글로도 남겨보시면 많은 도움이 되지 않을까 싶습니다.

Part 6. AI 시대, 실행력이 답이다

Q. 최근 AI의 등장으로 문과와 이과의 경계가 더 많이 흐려졌는데요. 요즘 취준생이나 사회 초년생분들에게 해주고 싶은 말씀이 있을까요?

답변하기 조심스럽긴 하지만, 한편으로는 저에게 해주는 말 같기도 한데요. 요즘은 딱히 문과·이과 구분도, 학과 간 구분도 큰 의미가 없는 것 같아요. 저도 학생 때랑 취업 준비할 때 이런 고민을 정말 많이 했거든요. 사회 초년생들이 설 자리가 없어질 거라는 말도 많이 들렸고, 실제로도 그런 분위기다 보니 고민이 더 커졌던 것 같아요.

결국 AI는 점점 더 똑똑해질 거잖아요. 그래서 그걸 활용해서 ‘뭔가라도 해보는 것’이 정말 중요하다는 걸 많이 느꼈어요. 제 주변에서 경험이 많으신 분들이 제일 많이 해주신 말도 “일단 뭐라도 해봐라”였고요. 그 어느 때보다 실행력이 중요한 시대가 됐다는 뜻이죠. 그래서 지금 고민하고 있는 부분들, ‘내가 이걸 해볼 수 있을까?’ 싶은 것들은 일단 해보자. 그게 제가 드리고 싶은 말이고, 저 자신에게도 계속 해주고 싶은 말인 것 같아요.

Q. 마지막으로 바이브 코딩을 하는 분들에게 하고 싶은 말씀이 있다면요?

바이브 코딩을 하면서 본인의 작업물이나 어려웠던 점들을 공유해 주시는 분들 덕분에, 저도 정말 많은 도움을 얻었어요. 그래서 앞으로 바이브 코딩을 해보고 싶으신 분들은, 시작하신다면 가능하면 과정도 같이 공유해 주셨으면 좋겠어요. 조그만 거라도 배운 게 있으면 정리해서 올려주시고요.

그리고 같이 바이브 코딩하면 정말 좋을 것 같아요. 저도 지금까지 그런 식으로 공유하고, 베풀어 주신 분들에게 많은 도움을 받았거든요. 그래서 이 자리를 빌려 감사하다는 말씀도 드리고 싶고, 새로 시작하시는 분들도 같이 해가면, 좋은 시너지가 나지 않을까 생각합니다.

마치며

이번 인터뷰에서 흥미로웠던 점은, 인터뷰 말미에 꺼낸 도연희 님의 다음 계획이었는데요.

"괴담출근에서 뽑아내고 싶은 아이디어는 전부 뽑아내고 싶어요. 다음은 웹페이지가 아닌 다른 형식의 무언가를 만들어 보고 싶은데... 게임 형태를 생각하고 있습니다."

게임을 해본 적도 없는데, 게임을 만들겠다는 겁니다. 첫 단계부터 고생하고 있어 오래 걸릴 것 같다고 말하면서도, 그 표정에는 걱정보다 기대가 더 많이 담겨 있었습니다. 어쩌면 이게 도연희 님의 가장 큰 무기인지도 모릅니다. ‘할 수 있을까’보다 ‘해보자’가 먼저고, 그걸 실제로 해내는 사람인 것이죠.

결국 태도의 힘이라고 생각하는데요. ‘할 수 있을까’에서 오래 머무르기보다, ‘일단 만들어보자’로 바로 넘어가는 힘 말입니다. 덕심으로 시작했던 인트라넷이 그렇게 탄생했고, 다음은 게임이라고 합니다. 그 결과물이 어떤 모습일지, 벌써부터 기대되지 않나요?

©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.