코딩 몰랐던 UXUI 디자이너의 바이브코딩 내부 사이트 제작기 1편

이 회사에 근무하면서 가장 반복적이고 번거로운 고충은 히스토리 파악을 위한 커뮤니케이션이었다. 히스토리 관리가 전혀 되어있지 않은 상황에서 구두나 챗으로만 내용이 전달되다 보니 정리가 안 됐고, 그 챗들을 직접 캡처해두며 혼자 아카이빙하는 정도에 그쳤다.

Jira를 사용하고 싶었지만 나 개인이 원한다고 전사 적용이 되는 건 아니었다.

 

어떻게 정리하면 좋을까 고민하던 차에 바이브코딩을 떠올렸고, 직접 만들어보기로 했다.

 

1편: 히스토리가 사라지는 팀에서 바이브코딩을 시작한 이유
2편: GitHub로 배포하는 방법

---

코딩 몰랐던 디자이너가 바이브코딩을 익힌 방법

클로드로 바이브코딩을 한다는 말을 처음 들었을 때, 솔직히 잘 그려지지 않았다. 코드를 아예 모르는 것도 아니고, 그렇다고 뭔가를 직접 만들 수 있는 것도 아닌 애매한 수준이었다. UI 컴포넌트 간격이나 패딩 수치 정도는 읽을 수 있었지만 그게 전부였다.

직접 뭔가를 만드는 건 완전히 다른 영역이었기 때문에 유튜브에서 바이브코딩 영상을 찾아봤고, 회사에 도서 신청을 해서 책도 읽었다.

 

개념은 조금씩 잡혔는데 한 가지가 계속 걸렸다.

"그래서 만든 걸 어떻게 배포하는 건데?" 팀원들이 실제로 접속할 수 있어야 의미가 있었다. 이 부분이 제일 막막했다. 유튜브로는 내가 궁금한 걸 바로 물어볼 수 없었다. 지인 개발자한테 직접 물어보면서 저장소 만들기부터 Pages 설정, 브랜치를 메인으로 바꾸는 것까지 깃허브가 어떻게 돌아가는지 파악할 수 있었다. 직접 파일을 올리고 수정해보면서 배포까지 완료했다.

 

막막함을 없애준 건 완벽한 이해가 아니라 일단 해본 경험이었다.

 

5W1H로 PRD 쓰기

PRD 일부

5W1H를 자세하게 쓸수록 AI가 내가 원하는 사이트를 잘 파악하고 요구사항을 잘 들어준다고 해서 하나씩 쓰기 시작했다. 그게 PRD의 초안이 됐고, PRD 자체도 AI의 도움을 받아 작성했다.

결국 AI에게 잘 부탁하는 것도 UX 리서치처럼 맥락을 얼마나 잘 정의하느냐의 문제였다.

 

배경 문제가 가장 중요했다. 이 사이트를 왜 만드는지 근거가 명확해야 이후 기능 정의도 흔들리지 않았다. 그다음은 정보 구조에 따른 기능들이었다. 아카이빙 사이트라 복잡한 개발 기능은 없었지만, 코딩을 수정할 때마다 레이아웃이 틀어지는 게 문제였다. 그래서 폼이 변경되지 않도록 가이드를 따로 만들었고, 그 기준에 맞춰 프롬프트를 입력하기 시작했다. 전보다 오류가 덜 났고, 수정 횟수도 줄었다.

 

데이터 구조 분리하기

처음엔 CSS, JS, 데이터까지 전부 index.html 하나에 넣었다. 파일 이름이야 들어본 적 있었지만, 각각 뭘 다르게 하는지는 사실 잘 몰랐다. 구조를 모르니 일단 한 곳에 다 담았고, GitHub에 업로드하려니 파일이 너무 무거워서 올라가지도 않았다.

Claude한테 물어보고 나서야 데이터를 GNB 메뉴별로 JS 파일로 나눠보게 됐다. data_메뉴명.js 형태로 분리하고, 이미지와 기타 파일도 폴더별로 정리하니 구조가 한눈에 들어왔다.

그 이후로는 index.html을 건드릴 일이 거의 없어졌다. 수정이 필요하면 해당 JS 파일만 열면 됐고, 파일도 가벼워지면서 어떤 파일에 어떤 데이터가 있는지 바로 파악할 수 있게 됐다.

 

GA로 실제로 쓰이는지 확인하기

GA Analytics

어느정도 사이트가 정돈이 되고 전사와 팀장 공유 전 팀원에게 배포해 개선할 부분이 있는지 혹은 추가했으면 하는 것은 없는지 먼저 파악했다. 내부에 배포했을 때 이 사이트가 정말 유의미한지 궁금해서 GA를 입혀보기로 했다.

디자인 팀 7명 데이터를 먼저 확인했고, 실제로 어떤 페이지가 가장 많이 쓰이는지 파악할 수 있었다. 전사 공유 전 개선 포인트를 찾기 위한 첫 번째 확인이었다.

9일간 이벤트 수 60회, 총 사용자 4명, 사용자당 평균 15회 인터랙션이 발생했다. 7명 중 4명이 접속했고, 사이트가 실제로 쓰이고 있다는 걸 수치로 확인할 수 있었다.

 

다음 단계 — GitHub로 배포하는 방법

깃허브 계정 만들기부터 파일 올리고 배포하는 것까지 직접 해보며 정리한 내용은 다음 글에서 확인할 수 있다.

바이브코딩을 처음 시작하는 분들께 도움이 될 것 같다.

 

➡️ 다음 글 읽기