AI 활용 - 바이브코딩

디자이너의 나만의 블로그 만들기

Gatsby로 시작한 블로그 만들기 여정, 바이브 코딩으로 완성하기.

2025년 6월 6일 view

마음속 멘토 나나산님에게 개인 블로그를 포트폴리오로 활용해보라는 조언을 들은 이후로, 블로그 만들기에 시간을 쏟은 지 2주가 지났다.

구현하기 쉬우며, 확장성이 좋고 검색 엔진 최적화를 제공하는 Gatsby를 활용하여 초기 블로그를 만들기로 했고,
퇴근 시간마다 인프런 무료 강의와 개발 블로그, 유튜브 등을 보며 구현해봤지만, 진도가 너무 더뎠다.

정작 목적인 글쓰기는 뒷전인 상황…
게으른 완벽주의자인 나는 견디다 못해 손을 놓기 직전이었다.

그때 사이드프로젝트를 함께 진행하던 개발자에게 추천받은 방법이 바이브 코딩이었다.

"블로그 정도는 직접 하는 것보다 빠를 거야."

이미 사이드프로젝트에서 Cursor 에이전트를 써보며 계속되는 오류와 마음처럼 반영되지 않는 디자인으로 고생하던 터라 걱정이 앞섰지만 ‘처음부터 구현하면 다를 거다’라는 말을 믿어보기로 했다.

결과는…
30분 만에 초기 세팅을 마치고, 3시간 만에 1차 배포까지 완료.
디자인만 눈 꼭 감고 넘어가면 바로 블로그로 활용해도 될 정도였다.

짧은 시간에 기본 틀이 완성되니, 레이아웃과 디자인 요소들을 잡는 데 많은 시간을 할애할 수 있었다.
(물론 효율적이진 않은 것 같아. 추후 디자인 시스템 적용이나 컴포넌트 스타일 관리하는 법을 찾아볼까 싶다.)

개발을 잘 모르는 디자이너도 간단한 프로토타입은 물론이고, 간단한 웹 서비스 정도는 배포까지도 가능하지 않을까 하는 생각까지 들었다.

하는 김에 디자이너들 사이에 핫한
Lovable, Windsurf, Google AI 스튜디오 등을 사용해봤는데,
나에게는 VSCode를 써본 경험이 있어서 그런지 IDE 형태의 Cursor가 사용하기도 편하고, 실제 배포까지 생각하면 가장 잘 맞는 듯 보였다.

디지털 월세 목록에 커서를 추가하며, 앞으로 커서와 더욱 친해져볼까 한다.


✅ To-do

  1. 에이전트를 통한 효율적인 디자인 시스템 적용 및 관리법
  2. 피그마에서 UI를 만지는 것과 다른 경험, 새로운 툴에 익숙해지기

댓글을 불러오는 중...
🏠블로그 홈으로 돌아가기

Thin Blog

개발, 디자인, 라이프스타일에 대한 이야기를 공유하는 개인 블로그입니다. 새로운 기술과 경험을 통해 성장하는 과정을 기록하고 있습니다.

© 2026 Thin Blog. All rights reserved.