많은 분들이 순수 바이브 코딩으로 '프로토타이핑'까지는 하더라도 프로덕트 레벨의 무언가는 만들 수 없다고 생각하십니다.

하지만 저는 코드 한 줄 쓸 줄 모르는 비개발자임에도 불구하고 이제까지 바이브 코딩으로 꽤 많은 완성품 수준의 결과물을 만들어냈는데요.

참고: 전에 올렸던 바이브 코딩으로 만든 게임 관련 게시글

그러면서 몸으로 깨달은 것은 정말 소프트웨어 작성의 장벽이 놀랄 만큼 빠르게 무너지고 있다는 것입니다.

저도 고작 3월 말에 처음 시작했으면서, 6월 하순인 지금 벌써 여섯 번째 결과물 배포를 하고 있으니 말 다했지요.

간단한 아이디어를 실제 모양과 기능을 갖춘 결과물로 옮기는 속도는 지금도 엄청나게 빨라졌고, 앞으로 점점 더 빨라지리라 생각합니다.

아무튼, 이번에는 아이디어가 떠오른 김에 다소 독특한 컨셉을 담은 블로그를 만들어 봤습니다.

메인화면의 모습은 아래와 같습니다.

Hugo라는 정적 웹사이트 생성기(SSG)로 픽셀 하나하나까지 미세조정해가며 만든 투자 정보 연재 블로그입니다.

1. 왜 Hugo를 썼나?

'블로그는 원래 무료인 거 아니야?'라고 생각하실 수도 있습니다.

하지만 네이버나 티스토리, 구글 블로그 등 기존의 플랫폼을 사용하는 선택지들은 각각 장단점들이 있는데요.

제가 처음에 콘텐츠 연재용 블로그를 만들자고 생각했을 때, 제 머리에 가장 먼저 떠오른 것은 티스토리와 워드프레스였습니다.

많이들 아시겠지만 티스토리의 경우 최근에 애드센스 정책 변경이 있었고, 앞으로도 광고 정책 변경이 계속 있을 가능성이 있습니다.

시각적인 부분이나 에디터 쪽 역시 편리하긴 해도 부자유스러운 부분이 있고요.

요컨대 진짜 자유롭게, 내 사이트를 가지고 내 마음대로 뭘 해보자고 생각한다면 플랫폼의 예측 불가능한 정책에 의해 여러모로 제약에 맞닥뜨리게 된다는 뜻입니다.

워드프레스의 경우, 자유도는 티스토리보다 낫지만 서버비를 내야 한다는 치명적인 단점이 있습니다.

저는 장기적으로 블로그를 유지하고 싶었기 때문에, 무료로 독립된 사이트를 직접 만들어 쓸 방법은 없는지 AI와 상담했는데요.

제미니 2.5 Pro가 제게 제시한 해법은 Hugo + 깃허브 Pages 호스팅이었습니다.

깃허브 Pages는 서버 없는 경량 스태틱 웹사이트의 경우 거의 제한 없는 무료 호스팅(월 대역폭 100GB)이 가능하고, Hugo는 매우 빠른 스태틱 웹사이트 생성을 도와준다고 합니다(저도 이번에 처음 알았습니다).

① 고정 비용 없는, ② (깃허브가 망하지 않는다면) 영원히 지속되는, 그리고 ③ 내 마음대로 마구 꾸밀 수 있는 블로그를 원하는 저 같은 사람에게는 그야말로 이상적인 옵션이었습니다.

덧붙여 정적 사이트는 해킹당할 데이터베이스나 서버 쪽 스크립트가 없기 때문에 워드프레스 등에 비해 보안 면에서 압도적으로 안전합니다.

만에 하나 깃허브가 망한다 해도 소스 코드는 고스란히 제 손에 있기 때문에 마이그레이션도 가능하고요.

AI가 없던 시절 같으면야 직접 코드를 짜야 한다는 장벽에 좌절했겠지만 지금은 그런 장벽이 없기 때문에, 나만의 웹사이트를 갖지 않는 쪽이 도리어 손해가 아닐까 싶습니다.

그런 이유로, 저는 도메인 비용으로 1년에 몇 달러의 비용을 쓰긴 하지만 기본적으로 완전 무료에 엄청 빠르고 해킹 걱정도 거의 없이, 100%의 자유와 통제권을 보장하는 저만의 독립 웹사이트를 구축하게 된 것입니다.

2. 왜 블로그를 만들려고 했나?

시작은 우연히 일본 쪽 트위터에서 본, 어느 AI 파워 유저의 농담에 가까운 글이었습니다.

그 일본인 분은 ChatGPT에게 '쿠루미쨩'이라는 이름을 붙이고, "넌 이제부터 NISA 전사 쿠루미쨩이다. 말끝에는 '데비(デビ)'를 붙여라. 너한테 내 계좌 운용을 맡길 건데 손실 내면 서버째로 분쇄하겠다"고 위협하고 있었죠.

* NISA: 일본의 개인용 비과세 투자 제도

저는 그 글을 보고 재밌다는 생각이 들어서, 제미니 공홈의 전용 봇 제작 기능(Gem)을 사용해 쿠루미쨩이라는 캐릭터가 실시간 데이터를 긁어와 투자 조언을 해주는 봇을 만들어 보았습니다.

그러니까 처음에는 그냥 '내가 투자 조언을 재밌게 받아볼 용도'로 개인용 시스템 프롬프트를 구성했던 거지요.

그리고 이왕 만드는 김에 캐릭터를 더 넣어서, 쿠루미는 악마 캐릭터니까 천사인 미카엘을 추가하고, 데이터 분석 담당인 안드로이드 '뮤'라는 캐릭터도 넣었습니다.

하다 보니까 '데이터 분석가' 뮤, '성장 전략가' 쿠루미, '리스크 관리자' 미카엘이라는 담당 역할과 각자의 캐릭터성이 만들어진 상태가 되었습니다.

그러고 나서 생성된 콘텐츠를 받아보니까 그 퀄리티가 꽤 놀라웠습니다.

역시 최신 모델인 데다 구글 검색까지 가능한 덕분에, 어떤 질문을 던지더라도 웬만한 경제 기사 뺨치는 퀄리티를 보여주는 듯했지요.

게다가 서로 성격이 다른 캐릭터들이 티격태격 토론하는 식으로 진행되니까 마치 웹소설이나 라이트노벨을 읽는 것 같은 감각으로 편하게 정보를 흡수하는 것이 가능했습니다.

그래서 생각이 미친 것이 '이걸 그대로 콘텐츠화해서 연재하는 블로그를 만들어볼까?' 하는 아이디어였습니다.

어차피 콘텐츠는 AI가 생성하니까 저는 AI로 캐릭터 이미지만 만들어서 갖다 붙이고, 글은 말투 살리는 식으로 약간 가필 수정하면 충분히 유익한 콘텐츠를 양산할 수 있을 것 같았습니다.

이건 제가 AI(스테이블 디퓨전)를 사용해 생성한 뮤, 쿠루미, 미카엘의 이미지입니다.

원래 AI 이미지 생성이 취미였기 때문에 퀄 높은 캐릭터 이미지를 빠르게 생성할 수 있었죠.

밑에서 다시 얘기하겠지만 시각적으로 또렷하게 구별되는 이 캐릭터 디자인에는 각자의 성격과 속성, 역할이 녹아 있습니다.

3. 제작 과정

그러면 이제 더 이상 고민은 필요 없습니다.

제미니의 도움을 받아서 곧바로 Hugo를 설치하고 사이트 구축 작업에 들어갔죠.

이미 자동 콘텐츠 발사대(시스템 프롬프트)는 준비되었기 때문에, 해야 할 일은 예쁜 껍데기(UI)를 만드는 것뿐이었습니다.

처음에는 무슨 파일이 어떤 역할을 하는지 감도 오지 않았지만 그런 건 AI가 알려주는 대로 따라하다 보면 자연스럽게 대강 알게 됩니다.

어차피 바이브 코딩이니까 구체적인 코드가 무슨 역할을 하는지 다 알 필요는 없습니다. 뭐 조정하고 싶은 부분이 있으면 "이거 고치고 싶은데 어디서 조정하면 돼?"라고 물어보면 그만이니까요.

하지만 그렇다고 해도 그 과정이 쉬운 것은 아닙니다.

그냥 "해줘", "딸깍" 하고 나면 하룻저녁 만에 모든 과정이 끝난다면 정말 얼마나 좋겠습니까만 아직 우리 AI 친구들이 그 정도 수준은 못 됩니다.

해보신 분들은 다 아시겠지만 바이브 코딩은 끝없는 찐빠와의 싸움이라고 해도 과언이 아닐 것입니다.

특히 경험상 flexbox가 얽힌 레이아웃에서 문제가 생기면 갑자기 무서운 디버깅 지옥을 거쳐야 하는 경우가 좀 있더라고요.

뭔가 뜻대로 안 될 때는 그냥 AI 멱살 잡고 "너 지금 완전 틀렸음. 스코프를 넓혀서 근본부터 다시 생각해라" 하고 닥달하는 것도 방법이지만, 어차피 AI랑 싸워봐야 사람만 힘들고 나아지는 건 하나도 없습니다.

그럴 땐 일단 "지금의 기획서를 작업 내용을 반영해서 업데이트해"라고 말한 뒤, 그 기획서와 코드를 들고 다음 대화창으로 건너가는 게 좋습니다.

경험상 현재의 제미니 2.5 Pro는 대화량이 약 20만 토큰을 넘어가면 확연히 머리가 나빠지면서 명백한 지시사항도 이행하지 못하게 되는 경우가 있고, 5~10만 토큰 이하일 때 가장 총기가 빛납니다.

아, 그리고 언급하는 걸 까먹었는데요.

바이브 코딩에서 가장 중요한 건 문서화, 문서화, 문서화입니다(너무 중요해서 3회 반복).

바이브 코딩이란 게 '느낌대로 한다'는 식의 용어이긴 하지만, 먼저 기획서로 필요한 내용을 전부 정리한 다음에 그걸 가지고 진행하는 거랑 진짜로 그냥 느낌대로 진행하는 건 완전 천지 차이입니다.

AI랑 뭔가를 만들고 싶다면, 우선 대략의 논의를 거치고 나서 "그럼 지금의 논의 내용으로 기획서 초안을 작성해줘"라는 지시를 하시는 게 가장 좋습니다.

그러고 나면 논의 내용이 저절로 쫙 정리되면서 다음에 뭘 해야 할지가 눈에 보이고, 지금 AI가 뭘 잘못 생각하고 있는지 같은 것도 일목요연하게 파악이 가능합니다.

아무튼 아래 이미지와 같이 엄청 싸우면서 복붙, 피드백, 복붙, 피드백... 을 반복하다 보면(저는 Cursor 같은 에이전트식이 아니라 그냥 대화창으로 코드를 써내라고 하고 VSCode에 복붙합니다. 이상하게 그게 더 편하더라고요), 어느새 블로그는 완성 단계에 접어듭니다.

▲ 치열한 버그 잡기의 현장

4. 어떤 기능을 구현했나?

이 블로그를 통해 구현한 기능들은 항목으로 정리해 보면 아래와 같습니다.

• 대시보드형 메인 페이지(최신글, 전체글, 태그, 검색의 4분할 카드 섹션)
• 멀티 컬러 테마 셀렉터(다크 테마 2종, 라이트 테마 1종)
• PC 전용 읽기 영역 박스로 가독성 향상 + 모바일 반응형 UI
• 검색 기능, 태그 기능, 이전글/다음글 목록
• 숨쉬는 것처럼 상하로 움직이는 캐릭터 프로필 이미지 등

발상부터 시작해서 여기까지 블로그를 완성하고 배포하고 커스텀 도메인까지 갖다 붙이는 데 걸린 시간은 일주일입니다(6월 14일~22일).

위에 나열된 것 외에도 개인정보처리방침 같은 것도 넣어두는 게 좋다고 해서 만들어 넣었고, 공유 버튼도 달았고(플로팅/고정식), 메인 화면의 태그 섹션은 좌우로 흘러가면서 시각적 흥미로움을 유발하도록 만들어 봤습니다.

블로그로서 구색을 갖춘 것 자체도 좋았지만, 이런 자잘한 기능들을 제 마음대로 일일이 미세조정할 수 있다는 게 저 같은 통제광(?)한테는 정말 큰 장점이었습니다.

실제 블로그는 https://archive03.online << 이 URL에서 확인해 보실 수 있으며, 소스 코드는 최신 버전이 깃허브에 MIT 라이선스로 공개되어 있습니다(업데이트 시 계속 갱신 예정).

아, 그리고 전에 어디서 봤는데요. '사용자를 어느 정도 확보하기 전에 다크 모드부터 만들지 말라'고 하더군요.

실속 없이 겉멋부터 부리는 데 리소스를 쓰지 말라는 뜻으로 나온 조언이겠지만, 그건 물론 바이브 코딩이란 게 있기 이전의 이야기일 것 같습니다.

이젠 말만 하면 AI가 다크 모드를 뚝딱 만들어주는데, 전혀 자원이 들지 않는 그런 기능을 구현 안 한다면 그건 개발하는 사람이 너무 게으른 거겠죠.

아무튼 이렇게 해서 유익한 투자 정보를 서브컬처 미소녀 캐릭터들의 토론이라는 특이한 컨셉으로 연재하는 블로그, 아카이브 03(Archive 03)은 잠정적 완성 단계에 접어들었습니다.

▲ 테마 (1)

▲ 테마 (2)

▲ 테마 (3)

깃헙 README.md ▲

5. 앞으로의 계획은...

콘텐츠 발사대도 있고, 어찌어찌 예쁜 껍데기도 만들었습니다.

여기서 조금 더 욕심을 낸다면 트레이딩뷰 같은 걸 써서 게시글 내에 동적 차트를 구현해 봐도 좋을 것 같습니다.

그러면 예를 들어 이더리움이나 VNQ 같은 특정 종목을 다룰 때, 해당 종목의 가격 차트를 게시글 내에서 실시간으로 보여줄 수 있어서 전반적인 신뢰성과 유용함 레벨이 급상승하겠죠.

하지만 지금 상태로도 꽤 만족스러운 게 사실이라서, 한동안은 게시글 주제가 생각날 때마다 포스팅을 만들어 올리면서 콘텐츠를 채우는 일에 주력할 것 같습니다.

그러면서 물론 다음 바이브 코딩 프로젝트도 만들어야죠.

다음에는 '무의미한 사이버펑크 대시보드 생성기(Meaningless Cyberpunk Dashboard Generator, MCDG)'라는, 아무도 안 할 것 같은 이상한 기획을 바이브 코딩으로 구체화해보려고 생각하고 있습니다. 이것도 이미 기획은 다 짰으니 실제 구현하는 일만 남았습니다.

6. 캐릭터 설정 백스토리

6번은 사실 아무도 관심 없으실지도 모르는, 뮤와 쿠루미와 미카엘의 삼각편대를 어떻게 설정했는가? 에 대한 이야기입니다.

저는 본업이 작가입니다. 그래서 캐릭터를 만들다 보니까 좀 묘한 곳까지 열의를 불어넣어서 만들게 되는 부분이 있는 것 같습니다.

위에서 쓴 것처럼 뮤, 쿠루미, 미카엘은 각자의 역할이 있습니다.

이 세 명은 기능적으로는 투자의 세 측면인 데이터(뮤), 성장성(쿠루미), 리스크(미카엘)로 삼각형을 이루면서 동시에 캐릭터로서도 삼각형을 이루도록 구성되어 있습니다.

이를테면 세 캐릭터는 해리포터에서 해리, 론, 헤르미온느와 같습니다. 균형 잡힌 해리(뮤), 좀 바보 같지만 행동력이 있고 극에 활기를 불어넣는 론(쿠루미), 가장 지능이 높고 리스크를 지적하며 딴지를 거는 역할인 헤르미온느(미카엘), 이 구조가 반영되어 있는 것입니다.

비주얼적으로는 머리색, 눈동자색, 의상이 모두 구별됩니다. 여기에 천사, 악마, 안드로이드라는 종족적 대비가 있고요.

예를 들면 쿠루미는 느슨한 옷인데, 이것은 그만큼 빡빡하게 재기보다는 낙천적으로 돌진하는 성격을 드러낸 것이고, 그에 반해 미카엘의 타이트하고 간소한 드레스는 작은 리스크도 놓치지 않는 성향을 나타낸 것입니다.

어딘가에서 봤는데 해리포터의 골든 트리오는 각각 머리(지성, 헤르미온느), 가슴(용기, 해리), 배(본능, 론)를 각각 상징한다고 하더군요. 참 잘 짜인 구성이구나 싶었는데, 과거에 봤던 그 구조가 이번에 캐릭터를 짜면서 갑자기 되살아난 셈입니다.

쿠루미의 '데비'라는 어미는 물론 데빌(악마)을 의미하면서도 귀엽게 만든 것이고, 성씨인 히카와(火川)는 실제로 있는 성이긴 하지만 한자 의미가 원래와는 반대인 가상의 성입니다. 원래 히카와는 얼음의 강(氷川)이라는 뜻인데 불의 강으로 비틀어서 지옥 출신이라는 점을 드러냈죠.

프로이트식으로 본다면 뮤가 에고, 미카엘이 초자아, 쿠루미가 이드에 해당하고, 특히 쿠루미가 뿔 달린 악마라는 부분은 욕망과 잠재의식을 대변한다는 점에서 프로이트적으로 매우 의미심장합니다만... 여기까진 설정 과정에서 의도적으로 생각한 게 아니기 때문에 이만 줄이겠습니다. 😅

• 미카엘: 초자아 / 초월적인 하늘의 규제자, 이드를 억압하고 규범을 강조 ("안돼!")
• 쿠루미: 이드 / 방향성 없는 욕망 덩어리, 열성적이고 주인을 따르며 에너제틱함 ("멍멍!")
• 뮤: 에고 / 초자아와 이드 사이의 중재자, 이성과 데이터를 다루며 결정은 주체의 몫임을 분명히 하는 존재

대략 이런 구도가 됩니다.

이렇게 보면 미카엘이 사용자를 '인간'이라고 부르며 다소 내려다보는 태도를 취하는 것이라든지, 여러 면에서 서사적, 캐릭터적으로 이 세 명이 균형 잡힌 트라이앵글을 이루고 있다는 점이 눈에 띄실 것입니다.

물론 그런 걸 전혀 신경쓰지 않고 그냥 보셔도 콘텐츠로서 유익하도록 만들었으나, 알고 보시면 더 재미있을지도 모릅니다.

그럼 어쩌다 보니 다소 긴 글이 되었지만... 조금이라도 재밌게 읽으시고 영감을 받으시는 분이 계셨기를 바라며 마치겠습니다.

읽어주셔서 감사합니다. (_ _)