v0와 커서를 활용한 워드프레스 블로그 임시글 작성 시스템
혹시 사랑하는 사람을 위해 세상에 단 하나 뿐인 특별한 선물을 해주고 싶다는 생각, 해보신 적 있나요?
저는 코딩의 ‘ㅋ’자도 모르던 비개발자이지만, 오직 남자친구 한 사람만을 위한 특별한 AI 서비스를 직접 만들어 선물했습니다. 지금 ai관련 교육을 받으면서 단순히 검색 창 정도로 사용하던 gemini의 쓸모를 알게 되었고 또 여러가지 개발툴을 접하게 되면서 ‘이거 될 것 같은데?’라는 감(Vibe)에 의존해 AI와 함께 개발을 진행했죠. 지금부터 약 1개월 반 동안의 좌충우돌, 하지만 뿌듯함으로 가득했던 저의 비 개발자가 경험해본 바이브 코딩 AI 개발 이야기를 시작합니다.
코딩을 전혀 모르시는 분들도, 혹은 AI로 무언가 만들어보고 싶지만 막연한 두려움을 가졌던 분들이라면 오늘 제 이야기가 작은 용기와 영감이 되길 바랍니다.
1. 세상 단 한 사람 만을 위한 자동화 서비스, 왜 만들게 됐을까?
제 남자친구는 아주 특별한 취미를 가지고 있습니다. 바로 이베이(eBay) 같은 해외 경매 사이트에서 오래된 빈티지 시계 부품을 구해 직접 수리하고, 때로는 새로운 시계로 재탄생 시키는 일이죠. 저는 그 섬세한 과정과 열정이 정말 멋있다고 생각했고, 이 과정을 블로그에 기록해보면 좋겠다고 적극적으로 권유했습니다. 워낙 시계라는 분야가 매니아도 많고 특히나 남자친구는 아마추어지만 홍콩시계박람회에 가서 볼만큼 열정도 관심도 높거든요.
생각보다 빈티지 시계 수리에 관심 있는 분들이 많아서, 분명 좋은 콘텐츠가 될 거라 확신했습니다. 하지만 문제는 남자친구가 글쓰기 자체를 조금 부담스러워하고, 나중에 해외 독자까지 고려해 세팅한 워드프레스(WordPress)의 복잡한 사용법에 금방 지쳐버렸다는 점입니다.
“이거 좋은 건 알겠는데… 포스팅 하나 올리기가 너무 힘들어.”
” 그냥 N이버로 만들면 안되?”
이 말을 듣는 순간, 제 머릿속에 전구가 ‘💡’ 켜졌습니다. ‘그럼 포스팅하는 과정을 내가 편하게 만들어주면 되잖아? AI를 이용해서!’ 이것이 바로 ‘남자친구 맞춤형 AI 블로그 포스팅 자동화 툴’ 개발의 시작이었습니다.
2. 코알못의 좌충우돌 AI 개발 도전기: 사용 기술 스택
개발자분들이 보시면 ‘이게 무슨 조합이야?’ 하실 수도 있겠지만, 저의 목표는 ‘완벽한 코드’가 아닌 ‘어떻게든 돌아가는 서비스’였습니다. 그래서 최신 기술이나 어려운 이론보다는, 지금 당장 저의 아이디어를 가장 빠르고 직관적으로 구현해 줄 도구들을 선택했습니다.
아이디어 스케치: v0 (UI 생성 AI)
가장 먼저 부딪힌 난관은 ‘화면’이었습니다. 어떤 버튼을 어디에 두고, 어떻게 보여줘야 할지 막막했죠. 이때 사용한 것이 바로 v0입니다. v0는 텍스트로 원하는 화면을 설명하면, AI가 그에 맞는 웹페이지 디자인과 코드를 뚝딱 만들어주는 서비스입니다.
랜딩 페이지 제작에 사용한 AI
저는 v0에게 “빈티지 시계 블로그 포스팅을 자동으로 만들어주는 서비스의 랜딩 페이지를 만들어줘. 검색창과 생성 버튼이 있었으면 좋겠어.” 와 같이 정말 단순하게 요청했습니다. 놀랍게도 그럴듯한 화면을 바로 만들어주었고, 저는 이 코드를 기반으로 본격적인 개발을 시작할 수 있었습니다.
프롬프트는 사용자와 주제, 원하는 스타일에 대해 본인이 설명할 수 있는 한 자세히 적어주면 된다.
어렵게 생각하지 말자
코드에 생명 불어넣기: Cursor (AI 코드 에디터)
v0가 만들어준 뼈대에 살을 붙이는 작업은 커서(Cursor) 에디터에서 진행했습니다. 커서는 쉽게 말해 ‘GPT가 내장된 코딩 프로그램’입니다. 코드를 짜다가 막히는 부분이 있으면 바로 옆에 있는 채팅창에 “이 버튼을 누르면 이런 기능이 실행되게 해줘”라고 한글로 물어보면, AI가 코드를 직접 수정해주거나 예시 코드를 알려줍니다.
저처럼 함수의 개념도 희미했던 사람에게는 그야말로 한 줄기 빛과 같은 존재였죠
처음부터 뭘 만들지 기획해서 진행하면 개발도 차근차근 해주기 때문에 ai와 의논해서 개발할 내용을 정리해서 모든작업을 시작하는 부분이 제일 좋은데요 이부분은 다음에 다른 글로 다시한번 설명하겠습니다.
정보 수집 전문가와 글쓰기 마법사: Tavily & Gemini API
서비스의 핵심 기능은 ‘웹 검색을 기반으로 초고 작성’이었습니다. 이를 위해 두 가지 강력한 API를 활용했습니다.
- 정보 수집 (Tavily API): 사용자가 ‘롤렉스 서브마리너 16610 수리’라고 검색하면, Tavily가 웹을 빠르게 검색해서 관련성 높은 정보들을 수집해옵니다.
- 글 작성 (Gemini API): Tavily가 모아온 정보를 바탕으로, 구글의 제미나이(Gemini) AI가 자연스러운 블로그 포스팅 초안을 작성합니다. “다음 정보를 바탕으로 빈티지 시계 수리 과정을 설명하는 블로그 글을 써줘.” 와 같은 명령을 내리는 방식이죠.
API라는 말이 어렵게 들리시나요? 저도 그랬습니다. 하지만 쉽게 생각하면 식당의 키오스크와 같아요. 제가 키오스크(내 코드)에서 ‘불고기버거 세트 주세요’라고 주문(API 요청)하면, 주방(Tavily, Gemini 서버)에서 주문서대로 음식을 만들어 저에게 다시 내어주는(API 응답) 원리랍니다.
3. 비 개발자라서 더 재미있는 바이브 코딩 AI 개발 이야기
제 개발 과정에는 복잡한 설계도나 엄격한 코딩 규칙이 없었습니다. 오직 ‘처음에 무엇을 만들지 철저한 목적과 명확한 사용자가 있었고 그동안 조금씩 배워온 AI 툴에 대한 지식뿐이었죠. 이것이 바로 제가 ‘비 개발자가 경험해본 바이브 코딩 AI 개발 이야기’라고 이름 붙인 이유입니다.
‘바이브 코딩’이란?
바이브 코딩(Vibe Coding)은 인공지능(AI)을 활용하여 자연어(일상 언어) 프롬프트로 소프트웨어 코드를 생성하는 새로운 개발 방식 및 신조어입니다. OpenAI의 공동 창립자인 안드레이 카파시(Andrej Karpathy)가 2025년 초에 처음 사용하며 널리 알려졌습니다.
주요 특징은 다음과 같습니다.
- 직관과 느낌 기반: 사전에 엄밀한 논리나 구체적인 설계를 바탕으로 하기보다, 개발자(또는 비개발자)가 자신의 직감과 아이디어(“바이브”)에 따라 AI와 대화하며 코드를 반복적으로 생성하고 수정해 나갑니다.
- 역할 변화: 프로그래머는 코드를 한 줄 한 줄 직접 타이핑하는 대신, 큰 그림을 그리고 아이디어를 구체화하는 역할에 집중합니다. 구체적인 코드 구현은 AI 도구가 담당합니다.
- 높은 접근성 및 효율성: 프로그래밍 경험이 제한적인 사람도 AI의 도움을 받아 원하는 결과물(예: 랜딩 페이지, 간단한 앱 프로토타입)을 빠르게 만들 수 있으며, 숙련된 개발자의 작업 효율 또한 크게 높여줍니다.
- 반복적인 실험: 코드가 예상대로 작동하지 않으면, 개발자는 코드를 직접 수정하는 대신 AI에게 무엇이 잘못되었는지 설명하고 개선을 요청하며 문제를 해결해 나갑니다.
바이브 코딩은 개발 프로세스를 가속화하고 앱 개발의 진입 장벽을 낮추는 잠재력을 가지고 있지만, 효율적인 활용을 위해서는 여전히 문제 해결 능력과 AI를 적절히 가이드하는 능력이 중요합니다. (gemini 검색답변)
바이브 코딩은 ‘정확한 문법이나 이론보다는, AI와의 대화를 통해 전체적인 흐름과 감을 잡아가며 코드를 완성해나가는 방식’을 의미합니다. 모르는 게 있으면 부끄러워하지 않고 일단 AI에게 물어봅니다.
- 일단 한글로 내가 원하는 기능을 풀어쓴다.
> “워드프레스에 글을 임시로 저장하는 기능을 만들고 싶어. 어떻게 해야 해?” - AI와 함께 해야할 일을 정리한다
- 정리한 내용을 바탕으로 각 AI 의 agent 기능을 활용하여 지시한다.
- 오류가 나면, 오류 메시지를 그대로 복사해서 다시 AI에게 물어본다.
> “이 코드를 실행했는데 이런 오류가 떠. 왜 그런 거야? 어떻게 고쳐?” - 될 때까지 2번과 3번을 반복한다.
이 과정을 반복하다 보면, 신기하게도 어느새 기능이 완성되어 있었습니다. 물론 비효율적일 수 있지만, 저 같은 초보자에게는 포기하지 않고 끝까지 나아갈 수 있는 가장 강력한 동력이었습니다.
한 사람만을 위한 서비스의 장점
이 서비스는 오직 남자친구 한 명만 사용할 것이기 때문에, 불필요한 기능들은 과감히 제외했습니다.
- 로그인 기능? 필요 없습니다. 어차피 남자친구 컴퓨터에서만 쓸 테니까요.
- 데이터베이스(DB)? 글을 저장할 필요 없이 생성 즉시 워드프레스에 임시저장하면 되니 필요 없습니다.
이렇게 목표를 단순화하니 개발 과정이 훨씬 수월해졌고, 핵심 기능에만 집중할 수 있었습니다. 덕분에 개발 지식이 거의 없는 상태에서도 1개월 반이라는 짧은 시간 안에 실제 작동하는 서비스를 만들 수 있었죠. [참고 링크: 워드프레스 REST API 공식 문서]
4. AI자동화 서비스 결과물 그리고 앞으로의 계획
그렇게 완성된 서비스는 아주 단순한 모습을 하고 있습니다. 검색창에 포스팅 주제를 입력하고 버튼을 누르면, 잠시 후 남자친구의 워드프레스 관리자 페이지에 AI가 작성한 초안이 ‘임시글’ 상태로 짠! 하고 저장됩니다.
남자친구는 이제 AI가 잡아준 뼈대에 자신의 실제 수리 경험과 사진만 덧붙이면 되니, 포스팅에 대한 부담이 훨씬 줄었다며 정말 좋아했습니다. 이 모습을 보니 밤새 AI와 씨름했던 시간들이 정말 뿌듯하게 느껴졌습니다.
물론 아직 부족한 점이 많습니다. 앞으로는 검색 기능을 좀 더 고도화하고, 이미지까지 자동으로 찾아주는 기능을 추가해볼 계획입니다. 저의 바이브 코딩은 앞으로도 계속될 것 같네요!
야심차게 시작한 AI교육 중간, 남자친구를 위해 시작한 저의 도전은 ‘사랑’이라는 동기와 ‘AI’라는 강력한 도구가 있었기에 가능했습니다. 이 글을 읽는 여러분도 ‘나는 비개발자라서 안돼’라는 생각 대신, ‘AI와 함께라면 나도 할 수 있어!’라는 자신감을 얻으셨으면 좋겠습니다.
다음 프로젝트는 뭘 해볼까요?
매일매일 ai의 새로운 기능을 배우며 제 삶을 뽀동하게 살찌워줄 궁리를 하는 하랑이었습니다.
정말 멋진 경험이네요! AI를 통해 남자친구만을 위한 서비스를 만들었다니, 감동적이고 대단합니다.