비개발자가 도구 모음 사이트를 만들기까지 : 바이브코딩 기록

 

안녕하세요. 데이브스톤입니다.

 

오늘 소개하는 UtiliZest는 2일만에 완성해 놓고도 공개를 미뤘습니다. 기능은 다 됐는데, 화면이 영 마음에 안 들었거든요. 그 이야기를 포함해서, 무료 온라인 도구 모음 사이트 'UtiliZest'(utilizest.work)를 기획하고 런칭하기까지의 과정을 솔직하게 적어보려 합니다.

UtiliZest

 

저는 마케터입니다. 그런데도 32개의 도구가 들어간 사이트 하나를 처음부터 끝까지 만들었습니다. 어떻게 가능했는지, 비개발자의 시선에서 풀어보겠습니다.

 

시작은 '귀찮음'이었습니다.

'QR code generator' 검색 결과

 

마케팅 업무를 하다 보면 이런저런 도구를 하루에도 몇 개씩 씁니다. 카피 분량을 맞추려고 글자 수를 세고, QR 코드를 만들고, 썸네일 이미지 크기를 줄이고, 브랜드 색상 코드를 뽑아내고, 링크에 추적 코드를 붙이려고 URL을 인코딩하고...

문제는 이걸 할 때마다 매번 다른 사이트에 들어가야 했다는 겁니다. 그리고 그렇게 들어간 사이트들은 대체로 비슷했습니다. 광고가 화면을 마구 덮고 있고, 로딩이 느리고, 어떤 곳은 회원가입을 요구하고, 또 어떤 곳은 내가 입력한 내용이 서버로 넘어가는지조차 알 수 없었습니다.

 

어느 날 문득 이런 생각이 들었습니다. "사람들이 자주 쓰는 도구는 어차피 정해져 있는데, 그걸 빠르고 깔끔하게 한곳에 모아두면 매번 검색하는 수고를 덜 수 있지 않을까?"

 

마케터의 직업병이라면, 불편한 지점을 보면 '이걸로 뭔가 될 것 같은데' 하고 자꾸 계산기를 두드리게 된다는 겁니다. 사람들이 매일 검색하는 도구라면 꾸준한 방문자가 모일 테고, 그러면 광고로 운영도 가능하겠다 싶었습니다. 그렇게 UtiliZest가 시작됐습니다.

 

코드를 못 짜는 대신, 설계도를 정확히 그렸습니다.

저는 코드를 못 짭니다. 그래서 제가 할 수 있는 일에 시간을 몰아넣기로 했습니다. 바로 '무엇을 만들 것인가'를 최대한 또렷하게 정리하는 일이었습니다.

 

바이브코딩, 그러니까 AI와 대화하며 코드를 만들어가는 방식에서 결과물의 품질은 결국 '얼마나 정확하게 요구했는가'에 달려 있습니다. 그래서 저는 도구 목록, 화면 배치, 사용자 동선, 광고 위치, 검색 노출 방법까지 담은 긴 설계 문서를 먼저 썼습니다. 이 문서가 작업을 마무리할 때까지의 기준점이 됐습니다.

 

이 단계에서 세운 원칙이 세 가지 있었습니다.

 

첫째 | 입력한 내용은 절대 서버로 보내지 않는다.

모든 계산과 변환을 사용자 브라우저 안에서만 처리하게 했습니다. 운영자인 저도 사용자가 무엇을 입력했는지 알 수 없습니다. 개인정보 측면에서 이게 가장 떳떳한 방식이라고 봤습니다.

 

둘째 | 도구 하나를 그냥 기능이 아니라 '독립된 검색 페이지'로 취급한다.

'QR 코드 생성기'를 검색한 사람과 '글자 수 세기'를 검색한 사람은 완전히 다른 손님이니, 32개 도구가 각각 별도의 입구를 갖게 했습니다.

 

셋째 | 도구가 주인공이고 광고는 조연이다.

광고는 넣되, 도구를 가리지 않는 자리에만 둔다는 원칙이었습니다. 도구는 개발자용, 텍스트, 변환, 유틸리티 네 갈래로 묶었습니다. 무엇을 넣고 뺄지 고르는 건 코딩이 아니라 '사람들이 실제로 뭘 검색하는가'를 읽는 일이었고, 다행히 그건 제가 평소에 하던 일이었습니다.

 

 

32개를 만든 비결은 '틀'이었습니다.

본격적인 제작은 AI에게 설계 문서를 보여주며 대화하듯 진행했습니다. "이런 도구를 만들어줘", "여기에 복사 버튼을 넣고, 누르면 결과가 클립보드에 들어가게 해줘" 하고 말로 요청하면 화면이 만들어지고, 저는 그걸 직접 눌러보며 어색한 곳을 다시 고쳐달라고 하는 식이었습니다.

 

32개나 되는 도구를 빠르게 만든 비결은 단순합니다. 처음에 '입력 → 처리 → 출력'이라는 공통 골격을 단단히 짜두고, 그 틀 위에 도구만 하나씩 갈아 끼웠습니다. 글자 수 세기처럼 쉬운 것부터 시작해, 두 문서의 차이를 비교해주는 도구처럼 까다로운 것으로 차차 넘어갔습니다. 틀이 있으니 한 개를 만든 경험이 그대로 쌓였습니다.

 

쉽지만은 않았습니다. 영어와 한국어를 함께 지원하게 만드는 과정에서, 한국어로 들어온 방문자가 링크를 누르면 자꾸 영어 페이지로 튕겨 나가는 문제로 몇시간을 씨름했습니다. 원인이 뭔지 저로서는 짐작도 안 갔지만, AI에게 증상을 최대한 구체적으로 설명하고 스크린샷을 붙여 넣어가며 결국 해결했습니다.

 

가장 오래 붙든 건 기능이 아니라 '디자인'이었습니다.

UtiliZest 디자인 초기 버전

 

AI로 만든 서비스는 AI 특유의 '티'가 납니다. 어디서 본 듯한 보라색 그라데이션, 둥근 카드, 과하게 번들거리는 반투명 효과. 처음 나온 UtiliZest도 딱 그랬습니다. 기능은 멀쩡한데, 화면을 보는 순간 '아, 이거 자동으로 찍어낸 거구나' 싶은 인상이 가시질 않았습니다. 사용자는 디자인을 신뢰도로 연결합니다. 그래서 공개를 미뤘습니다.

흔한 보라색을 걷어내고, 어두운 배경에 네온 그린을 포인트로 쓰는 하나의 색 정체성을 정했습니다. 버튼 모양, 글자 크기, 여백 간격을 도구 32개 전체에서 똑같이 맞췄습니다. 마우스를 올렸을 때의 반응, 복사했을 때 잠깐 뜨는 안내, 모바일에서 광고가 자리 잡는 방식 같은 작은 디테일을 하나하나 손봤습니다.

 

AI에게도 "더 차분하게", "여백을 더", "이 버튼은 덜 튀게"처럼 디자이너에게 주문하듯 끝까지 요구했습니다.

UtiliZest 최종 버전

기능을 만드는 데 든 시간보다, 'AI가 만든 티'를 지우고 완성도를 끌어올리는 데 든 시간이 더 길었습니다. 하지만 저는 이 구간이 비개발자가 만든 결과물과 그냥 '뽑아낸' 결과물을 가르는 지점이라고 생각합니다. 도구의 성능은 비슷하게 따라 만들 수 있어도, 끝까지 다듬은 인상은 쉽게 흉내 나지 않으니까요.

 

Github와 Vercel : 비개발자를 구해준 두 도구

깃허브(GitHub)

 

내 컴퓨터에서만 작동하는 서비스를 인터넷에 띄우는 일도 비개발자에겐 막막한 영역입니다. 이 부분은 깃허브(GitHub)와 Vercel이라는 두 도구가 거의 다 해결해줬습니다.

깃허브는 쉽게 말해 작업물을 차곡차곡 쌓아두는 창고이자, 모든 변경 이력을 기록해두는 저장소입니다. 저에게 가장 고마웠던 건 '되돌리기'였습니다. AI와 화면을 고치다 보면 멀쩡하던 게 갑자기 망가지는 순간이 옵니다. 그럴 때 직전에 저장해둔 상태로 통째로 돌아갈 수 있다는 안전망이 있으니, 겁 없이 이것저것 시도해볼 수 있었습니다.

 

Vercel

Vercel은 그 창고와 사이트를 연결해주는 다리였습니다. 한번 연동해두니, 깃허브에 바뀐 내용을 올리기만 하면 몇십 초 안에 실제 사이트에 그대로 반영됐습니다. 복잡한 서버 설정이나 비용 없이, 무료로 utilizest.work(도메인은 namecheap에서 저렴하게 구입) 도메인까지 연결할 수 있었고요. "고친다 → 올린다 → 사이트에 뜬다"가 거의 자동으로 돌아가니, 저는 오로지 무엇을 고칠지에만 집중하면 됐습니다. 코드를 모르는 사람에게 이 자동화는 생각보다 훨씬 큰 힘이었습니다.

 

마치며

UtiliZest는 utilizest.work에서 지금 바로 쓰실 수 있습니다. 무료고, 가입도 없습니다. 자주 쓰는 온라인 도구가 있다면 한번 들러보시고 피드백까지 주시면 감사하겠습니다.

이번 작업으로 제가 가장 또렷하게 느낀 건, 비개발자에게 부족한 건 코딩 실력이지 만들 능력이 아니라는 점이었습니다. 무엇이 왜 필요한지를 설명하는 힘, 사람들이 뭘 검색하는지 읽는 감각, 그리고 'AI가 만든 티'에서 멈추지 않고 끝까지 다듬는 끈기. 이 세 가지가 받쳐주면, 코드는 AI와 함께 채워나갈 수 있습니다.

 

저는 이렇게 아이디어를 검증하고, 설계도를 그리고, 바이브코딩으로 형태를 만들고, 검색과 광고로 굴러가게 만드는 일련의 과정을 좋아합니다. 비어 보이는 자리를 발견하셨는데 시작점을 못 찾고 계신 분이라면, 이 기록이 작은 힌트가 됐으면 합니다. 읽어주셔서 감사합니다.

 

UtiliZest | Free Online Developer Tools

 

오늘의 삽질은 내일의 근육이 됩니다.

 

맥 키보드 적응 서비스 'MacKeys' 바이브코딩 제작 스토리