코드 한 줄 모르는 비개발자의
바이브 코딩 도전기
Ghost 테마, 바이브 코딩으로 바꾸다
2023년부터 Ghost를 활용해 사이드 프로젝트 '그로스스크랩'(https://www.growthscrap.com/)을 운영해오고 있다. 긴 글을 주로 다루는 만큼 독자들에게 편안하고 가독성 높은 읽기 경험을 제공하고 싶었지만, 기본으로 제공되는 Casper 테마로는 한계가 있었다. 줄간격이 너무 좁아 답답하게 느껴졌고, 폰트 선택에서도 아쉬움이 컸다. 메인 레이아웃을 비롯해 본문 페이지 전반에서 완성도가 떨어진다는 생각이 들었다. 마침 퇴사 후 휴식기에 접어들면서 '바이브 코딩'이라는 새로운 목표가 떠올랐다. 보다 깔끔하고 읽기 편한 공간으로 전면 개편하기로 결심했다.
그로스스크랩은 각자의 자리에서 자신만의 커리어 여정을 그려가는 사람들과 만나 나눈 이야기를 기록합니다. 화려한 커리어나 성과보다는 '사람' 자체에 주목하며, 커리어 여정과 일에 대한 관점, 고민, 성장의 흐름을 다룹니다. 우리는 묵묵히 자기 일에 진심을 다하며 일과 삶에서 자신만의 색깔을 만들어가는 사람들을 '그로스스크래퍼(growthscraper)'라고 부릅니다. 이들과 나눈 진솔한 대화가 묵묵히 자신의 길을 걷고 있는 이들에게, 그리고 어느 변곡점에 서있는 이들에게 작은 영감과 응원이 되기를 바랍니다.
문제는 내가 개발 지식이 전혀 없는 비개발자라는 점이었다. 아무리 바이브 코딩이라고 하더라도 어디서부터 어떻게 접근해야 할지 막막했다. 친한 개발자 Hugo의 도움을 받아 기초부터 차근차근 시작했다. 터미널 사용법, brew와 npm 설치, VS Code 환경 설정, 그리고 yarn zip을 통한 테마 적용법까지 약 4시간 정도를 배웠다. 이후 궁금한 점은 코파일럿과 GPT를 활용해 진행했다. (참고로 이 글 역시 GPT와 클로드를 거쳐 다듬었다.)
이번 스터디를 위해 Hugo가 준비해 준 발표 자료는 다음과 같다. 바이브 코딩의 출발점이 되어준 자료로 다시 한번 Hugo에게도 감사와 함께 샤라웃을 보낸다.
(*발표 자료의 저작권은 Hugo에게 있으며, 허락을 받아 게시합니다. 무단 가공 및 재배포는 금합니다.)
본격적인 작업에 앞서 개선 목표를 명확히 정했다. 폰트 교체, 줄간격 조정, 프로그레스바 추가, 태그 기능 추가 등 원하는 기능들을 GPT와 논의하며 난이도에 따른 우선순위를 정리했다. 이러한 준비 과정이 향후 작업과정에서 방향성을 잡는 데 큰 도움이 되었다.
원하는 기능을 구현하는 과정에서도 GPT와 끊임없이 의견을 주고받았다. 적용 가능한 효과나 옵션을 제안받으며, 기능의 방향을 한층 구체화할 수 있었다.
예: (이전 대화 생략) "아티클을 읽을 때 스크롤에 따라 프로그레스바를 넣고 싶어. 어떤 효과를 줄 수 있을까? 그리고 보통 모바일에서도 동일하게 보이는지 궁금해."
작업 준비
주요 작업 환경은 Ghost의 Casper 테마를 베이스로 VS Code에서 코파일럿을 활용하는 방식이었다. 처음 쓰는 툴이었지만 비개발자로서 바이브 코딩에 활용하는 영역이 한정적이었기에 사용하는데 큰 어려움은 없었다.
코파일럿과 함께한 첫 개발 여정
개발 지식이 전혀 없는 입장에서 단순히 자연어로 설명만 해도 원하는 개선을 구현할 수 있다는 건 정말 놀라운 경험이었다. 새로운 기능 요청부터 수정, 오류 원인 및 해결 방안 문의, 이전 버전 복원까지 모든 과정을 자연어로 소통하며 진행할 수 있었다. 특히 초반에는 무료 체험 기간 덕분에 부담 없이 시도해 볼 수 있었던 점도 큰 장점이었다.
직접 써보며 얻은 노하우
1. 단계적으로 시도하기
처음부터 바로 Agent 모드를 사용하는 대신, 먼저 Ask 모드로 방향을 잡고 결과를 확인한 뒤 Agent 모드로 실행하는 방식이 훨씬 도움이 됐다. Ask 모드에서 나온 코드 값을 몰라도 자연어 설명을 통해 잘못된 부분을 파악하고 수정하는 과정을 거쳤다. 물론 이렇게 해도 적용 후에는 여러 차례 수정이 필요했다. 이해가 어려운 부분은 상황에 따라 GPT를 보조 도구로 활용하기도 했다.
2. 수정 범위를 확실히 지정하기
여러 번 작업을 하면서 프롬프트 작성 방식도 자연스럽게 달라졌다. 처음에는 특정 기능만 개선을 요청했는데, 원치 않던 다른 부분까지 함께 변경되는 경우가 있었다. 이런 경험을 겪고 나서는 "A만 수정하고, 다른 부분은 건드리지 말아 줘"처럼 수정 범위를 명확히 지정하는 방식으로 요청했다.
3. 개발자 도구 활용하기
요청을 애매하게 하는 것보다 구체적으로 전달하는 편이 훨씬 효과적이었다. 특히 패딩 값이나 색상처럼 수치가 명확하게 있는 경우에는 개발자 도구를 켜고 직접 조정해 보며 원하는 값을 찾아 입력했다. 이런 과정을 반복하다 보니, 단순한 사이즈 조정 정도는 굳이 Agent에게 맡기기보다 직접 코드를 찾아 수정하는 경우가 많아졌다. 덕분에 비록 아주 기초적인 수준이지만, 바이브 코딩을 통해 스스로 학습하고 이해를 넓혀가는 경험도 할 수 있었다.
예를 들어, 개발자 도구에서 원하는 영역을 찾아 어떤 부분을 수정하면 개선되는지 확인한 뒤 해당 값을 복사해, VS Code에서 동일한 코드를 찾아 기존 값을 새 값으로 교체했다.
직접 해보니 어려웠던 점
작업을 시작하고 나니 예상치 못한 연쇄 문제가 끊임없이 발생했다. 바이브 코딩 전에는 단순히 'a, b, c를 개선하고 싶다' 정도로만 생각했지만, 실제로 적용해 보니 훨씬 넓은 범위를 고려해야 했다. 로컬에서 잘 맞췄던 사이즈가 릴리즈 후 글자 수 차이로 어긋나고, 메인 페이지에서 수정한 태그 레이아웃이 태그 페이지에서는 엉망이 되며, 웹에 맞춘 디자인이 모바일에서 깨지는 경우도 빈번했다. 결과적으로 테마 업로드 후 무한 개선의 늪에 빠지기도 했다.
코드를 이해하지 못하다 보니 원인 파악이 쉽지 않았다. Ask가 제안한 값이나 Agent가 실행한 요소의 의미를 정확히 몰라, 수정이 의도대로 반영되고 있는지 확신하기 어려웠다. 같은 문제를 여러 번 확인하고 고치는 과정이 반복되면서 예상했던 것보다 훨씬 많은 시간이 소요됐다.
바이브 코딩은 겉보기엔 단순해 보여도 수많은 시행착오가 필요했고, 비개발자인 나에게는 분명한 한계도 있었다. 하지만 작은 기능 하나를 추가하거나 레이아웃을 조금만 수정해도 예상치 못한 변수가 잇따른다는 사실 등을 몸소 겪으며, 개발에 대한 이해를 조금은 넓힐 수 있는 계기가 됐다.
수없이 반복한 yarn zip 중 주요 개선 파일만 담아둔 폴더 화면바이브 코딩이 만든 그로스스크랩의 변화
이번 바이브 코딩을 통해 무엇이 달라졌을까? 주요 개선 사항을 주제별로 묶어 정리했다. 각 항목은 한 번에 완성되기보다 수차례의 수정과 테스트를 거쳐 완성됐다.
1. 가독성 향상
전체 폰트를 Pretendard로 변경하고 줄간격을 넓혀 읽기 편한 환경 구현
반응형 타이포그래피 적용으로 모바일에서도 가독성 유지
중요한 문장에 하이라이트를 적용해 시각적 강조
2. 레이아웃 개선
메인 페이지를 카드형 레이아웃으로 변경해 시각적 정보 전달력 강화
모바일 화면에서도 카드 간격과 비율이 자연스럽게 보이도록 조정
3. 탐색 및 기능 개선
다중 태그 기능 추가로 원하는 정보를 빠르게 탐색 가능
태그 섹션에 가이드 문구(더 많은 이야기 만나보기)를 삽입해 탐색 유도
클릭 가능한 항목에 마우스 호버 효과를 적용해 사용성 강화
본문 상단에 스크롤 진행률과 연동된 프로그레스바를 추가해 현재 읽는 위치를 직관적으로 파악 가능
공유 버튼(링크 복사, Facebook, LinkedIn) 추가로 콘텐츠 확산 용이
점진적으로 다듬은 태그 영역 (3)
점진적으로 다듬은 태그 영역 (4, 최종)4. 디자인 일관성 강화
브랜드 컬러 적용
전반적인 색상 조정으로 통일감 있는 디자인 완성
[번외] 배포 첫날, 뜻밖의 화면
바이브 코딩으로 완성한 zip 파일을 드디어 배포하려던 날, 아래 화면이 떴다. 순간 바이브 코딩을 잘못 써서 사이트를 날린 건 아닌가 싶어 초반에 도움을 준 개발자 Hugo에게 급히 연락했다. 알고 보니 하필 그날 고스트 서비스 오류가 발생해서 접근 자체가 불가능했던 것. 얄궂은 타이밍에 안도와 웃음이 함께 터져 나온 아찔했던 에피소드.
끝이 아닌 시작
이번 바이브 코딩 경험은 비개발자인 나에게 새로운 가능성을 열어주었다. 무엇보다 '그냥 배워야지'가 아니라 명확한 개선 목표가 있었던 것이 큰 동기부여가 됐다. 만약 기존 테마 개선이 아닌, 완전히 제로베이스에서 시작했다면 아마 금세 포기했을지도 모른다. 비개발자로서 한계는 여전히 있지만, 사이드 프로젝트에서 사용성을 높이고 오류를 해결하는 데는 앞으로도 충분히 활용할 수 있을 것 같다. 기초적인 개발 지식도 꾸준히 쌓아갈 계획이다.
1차 목표를 달성하고 배포하는 과정에서 새로운 개선 아이디어도 계속 떠올랐다. 콜아웃 텍스트 설정, 단락 여백 조정, Read time 개선, 홈 버튼 추가, 토스트 메시지 적용, 태그 길이 제한 이슈 해결 등 손보고 싶은 부분이 아직 많다. 한 번 경험해 본 만큼, 다음 도전은 훨씬 더 가볍고 즐겁게 맞이할 수 있을 것 같다. :)
바이브 코딩으로 새로워진 그로스스크랩 보러 가기
>> https://www.growthscrap.com/