디자이너의 바이브 코딩 2부 : 개발하고 Firebase에 띄우기

1부에서 디자인 가이드(DESIGN.md)를 세우고 Figma를 원본으로 연동해뒀는데요. 색·타이포·간격·컴포넌트 규칙이 한 문서에 다 정리됐다는 건, 말하자면 AI에게 화면을 그리도록 할 기본적인 준비가 마무리됐다는 것과 같습니다. 이제 우리는 이 가이드를 기반으로 와이어프레임을 그리고 최종 디자인을 완성하면 됩니다.

이 글에서는 그 시스템과 디자인을 기준으로 실제 화면을 그리고, 코드로 옮겨 Firebase에 띄우는 과정을 담아보려고 합니다.

이 글을 통틀어 강조하고 싶은 부분이자 중요한 부분입니다. 제작된 DESIGN.md 파일과 PRD를 가지고 AI로 화면의 시안을 뽑아 Figma에 그려둔 뒤 해당 화면을 그대로 쓰기보다는, 결과물을 기반으로 디테일을 잡아주는 과정을 거치게 됩니다.

AI가 뽑아준 초안을 그대로 쓰는 것이 아니라 디자이너의 눈으로 봐야만 보이는 디테일을 잡아가며 화면을 완성하는 것이죠. “어 이건 좀 이상한데?!” 하는 부분을 디테일하게 잡아 수정하는 일은 또 디자이너만 할 수 있으니까요. 서비스를 사용하며 사용자가 느끼는 “신경 써서 만든 느낌”은 작은 디테일에서 온다고 생각합니다. 그리고 이런 것들은 그것을 볼 수 있는 사람의 눈과 손으로 마무리되는 것이죠.

이미지와 같이 AI가 진행한 초안 작업을 기반으로 저는 최종 마무리/업데이트를 진행했습니다. 이렇듯 AI에게 일을 시켰다고 해서 디자이너가 사라지는 게 아니라, 오히려 어디에 손을 댈지 보고 결정하는 안목이 더 중요하다는 걸 이번 작업을 진행하며 다시 한 번 느끼게 되었습니다.

이 작업을 진행하며 다양한 부분에 AI를 활용했지만 로고 디자인 / 스타일 가이드 / OG 이미지 / Favicon 등의 작업은 제가 직접 진행하였는데요. 디자이너로서 AI보다 잘할 수 있고 자신 있는 영역은 직접 진행하고, 그렇지 않은 부분만 맡겼던 것이죠.

사람의 손이 결국 닿는 것이라면 무슨 소용이냐 할 수 있겠지만 여기서 핵심은, 모든 화면이 DESIGN.md에서 정의한 색상 변수와 8px 그리드를 그대로 바인딩했다는 점 입니다. CTA는 Primary/500, 본문 텍스트는 Gray/900, 보조는 Gray/500, 보더는 Gray/200 이렇게 토큰에 묶여 있으니, 전체적인 룩만 조금 손보면 되는 수준의 완성도 있는 초안이 나온것이죠

결국 최종적으로는 제가 디자인을 하게 되더라도 기반이 탄탄한 구조가 나왔기 때문에 빠른 시간 안에 결과물을 만들 수 있었습니다. 이 모든 디자인을 1~2시간 안에 마무리 했다는 것을 생각하면 AI가 작업 속도를 굉장히 향상시켜 준 것입니다. 혼자 작업 했더라면 불가능한 속도였죠

앞에서 디자인을 마무리했으니, 이제 이 화면을 실제로 동작하는 코드로 옮길 차례입니다. 여기서부터가 흔히 말하는 ‘바이브 코딩’의 영역인데요. 저는 이 과정을 “AI에게 통째로 맡기는 일”이 아니라 “잘 정리된 재료를 건네고, 나오는 결과를 계속 확인하며 방향을 잡아주는 일”이라고 생각하며 진행했습니다.

실제 작업은 VS Code에서 이뤄졌습니다. VS Code는 코드를 작성하고, 그 코드가 화면에서 어떻게 보이는지 바로 미리 볼 수 있는 ‘코드 편집기’인데요. 비개발자분들껜 조금 낯설 수 있지만, 디자이너가 Figma에서 화면을 그리듯 개발자는 이 VS Code 안에서 화면을 코드로 만든다고 생각하시면 됩니다. 저는 여기에 Claude를 연동해두고, AI가 직접 파일을 읽고 코드를 수정하도록 하면서 작업했습니다. Figma에서 확정한 화면과 DESIGN.md를 건네주면, AI가 그 맥락을 바탕으로 VS Code 안의 코드를 채워나가는 식이었죠.

핵심은 프롬프트에 ‘맥락’을 충분히 넣어주는 것이었습니다. 앞서 만들어둔 DESIGN.md와 PRD, 그리고 Figma에서 확정한 화면을 AI에게 함께 전달하면, AI가 제멋대로 색이나 간격을 정하는 게 아니라 제가 정해둔 규칙(색상 토큰, 8px 그리드, 컴포넌트 규칙) 안에서 코드를 만들어냅니다. 건네는 재료가 정리돼 있을수록 결과물의 편차가 줄어드는 것이죠.

물론 한 번에 완벽한 코드가 나오지는 않았습니다. VS Code에서 AI가 만든 화면을 바로 띄워보고 → 디자인과 어긋난 부분을 찾고 → “이 버튼은 Primary/500이어야 하는데 색이 다르다”, “여기 간격이 8px 단위에서 벗어났다”처럼 디자이너의 언어로 구체적으로 다시 요청하는 과정을 반복했습니다. 결과를 눈으로 확인하고 곧바로 고쳐달라 할 수 있다는 점이, 디자이너가 개발 과정에 직접 개입할 수 있게 해준 부분이었습니다.

이 단계에서 다시 한 번 느낀 건, AI를 잘 쓰는 일과 디자인을 보는 눈이 따로 있는 게 아니라는 점이었습니다. 무엇이 잘못됐는지 알아야 제대로 된 프롬프트를 쓸 수 있고, 그 판단은 결국 사람이 하는 것이니까요.

디자인 토큰과 개발된 파일이 준비되면 코드를 GitHub에 올리는 과정이 필요합니다. GitHub를 아시는 분들도 있겠지만, 비개발자들이 많이 읽을 것을 고려해서 설명하자면 내가 만든 코드를 관리하는 저장소로 생각해 주시면 좋을 것 같습니다.

작업이 진행될수록 처음 만들어둔 코드에서 수정과 변경이 생기고, 서비스가 클수록 한명이 아닌 다양한 사람이 같이 작업하는 환경이 조성될 텐데요. 개발자들은 작성한 코드를 버전별로 관리하고 함께 작업하기 용이한 환경을 위해 GitHub라는 코드 저장소(버전 관리 플랫폼)에 코드를 올려놓고 관리하게 된 것이죠.

저희도 코드 산출물을 만들었으니 GitHub에 만든 코드를 Push해서 관리해 보는 거죠. 여기서 깃 가입과 레포지토리 생성 등의 내용을 다루기엔 글이 너무 길어지니 관련 링크를 첨부해 두겠습니다.

이렇게 만들어진 프로그램은 내 컴퓨터 즉 [로컬 환경]에서만 돌아가게 됩니다. 이런 서비스를 그냥 놔두기보다는 다른 사람도 쓸 수 있는 서비스로 만들기 위해서는 웹사이트에서 접속 가능하게 만들어야 하는데요. 이렇게 하려면 [배포]라는 과정을 거쳐야 합니다. 저는 Firebase라는 서비스를 사용해서 배포하게 되었고, Vercel·Netlify·GitHub Pages 등 배포 도구는 다양하니 필요에 맞게 사용하시면 되겠습니다.

배포까지 하게 되면 이제 내가 만든 서비스의 주소를 통해 사람들이 사용할 수 있게 됩니다. 그렇게 만들어진 웹사이트를 이렇게 카카오톡 같은 공간에 공유하게 되면 썸네일 이미지 같은 것과 함께 공유되는데요. 이 이미지와 웹사이트 탭 영역에 노출되는 아이콘을 예쁘게 다듬어주면 좋겠죠?

저의 경우 OG 이미지는 카카오톡 기준으로 작업을 진행했고 완성 후 공유해보니 이렇게 이미지가 보이네요. 여기까지 해서 저의 Cotton Bat 서비스 제작은 마무리되었습니다!

만들어진 서비스가 궁금하실 것 같아서 해당 게시글에 서비스 링크를 첨부해 두니 부디 많은 분들의 킹받는 분노를 해소하는 데에 도움이 될 수 있으면 좋겠습니다🥵

AI를 사용하는 것이 선택이 아닌 필수가 되어가는 지금, 이 글을 마무리하며 드리고 싶은 말씀은 AI의 도움을 받아서 프로젝트를 진행하자는 것 입니다. 도움 받는 게 아니라 전체를 통으로 맡겨두고서 그것을 어떻게 하는지조차 모른다면 AI에게 휘둘리는 사람이 되어갈지도 모르겠다는 생각이 들었습니다. AI는 분명 좋은 도구임이 틀림없지만 도구는 도구일 뿐이지 휘두르는 건 사람이 되어야 한다는 생각을 참 많이 하게 되었습니다.

저는 프로젝트를 진행하는 내내 AI에게 시키고 아무것도 하지 않은 게 아니라 분명 AI의 판단을 검수하고 제안하고 변경하고 디자인을 검수하고 최종안을 확정하며 컨펌하는 일을 했습니다. 명령해두고 뚝딱 나오기를 기다리는 것이 바이브 코딩이 아니라는 것이죠.

그럼 저는 이 다음 글에서 또 유익한 것들을 들고 찾아오도록 하겠습니다. 전체적인 플로우를 설명드리기 위한 글이라 이 글에서 못다 한 프롬프팅과 Claude API 연동 등등의 이야기도 많고 앞으로 또 블로그에서 하고 싶은 말들이 많으니까요🙂