2025. 12. 17. 16:56ㆍ작업/바이브 코딩
나는 개발을 잘 모르는 디자이너이다.
그런데 바이브 코딩이 등장하면서 작업에서도 그렇고 나만의 서비스 제작을 위해서라도 알아야겠다는 생각이 들었다.
하지만 어디서부터 어떻게 해야할지 몰랐다. 제대로 공부하는 것인지도 몰랐다.
이런 생각을 가진 채 필요할 때만 쓰던 빌더 툴을 이번에 본격적으로 익히기로 했다.
시작은 AI 커뮤니티에서 빌더 트랙 활동이었다.
처음 시작한 개발은 굉장히 어려웠고 에러가 발생해도 원인 자체를 찾기 어려웠다.
두 번째는 Figma Make를 이용한 간단한 제품 개발이었다.
내가 필요한 것에서 출발했고 그래서인지 속도가 이전보다 빨라졌다. 재미도 느꼈다.
자연어로 작성해도 굉장히 빠르고 자연스러운 제품을 만들어 줬기 때문에 큰 어려움이 없었다.
무엇보다 첫 번째 경험에서 배운 것과 그 사이 발전한 AI의 성능으로 큰 어려움 없이 제작을 완주했다.
https://clay-chisel-99569045.figma.site
컬러시스템 자동 생성기
clay-chisel-99569045.figma.site
(이에 대한 포스팅은 따로 하겠다.)
이렇게 2가지 과정을 진행했지만, 여전히 개발을 몰랐다.
어디서부터 시작해야할 지도 몰랐다.
초보자를 위한 개발 책을 읽는 것부터 시작하고자 했지만 독서 습관이 약해진 현재의 나에겐 그것도 쉽지 않았다.
무엇보다 여러가지 시도와 운동을 하다 보니 언제나 하루가 눈 깜빡하면 끝나버렸다.
그러던 중, 바이브 코딩 랩에 참여하면서 굉장히 차근하게 나아가보기로 했다.
1번째 세션에서는 방향성에 대한 상담이 이뤄졌다.
바이브 코딩을 하면서 모르는 것에 대한 질의 답이 위주인 시간이었지만,
나는 첫번째 시간은 OT로 생각하기로 했다.
이전처럼 꽂히는 대로 했다간 결과가 똑같을 것 같았기 때문이다.
OT였지만 새롭게 알게 된 개념들이 있었고, 이 조차도 모르고 바이브 코딩을 해 보겠다고 했던 게 스스로가 작게 느껴졌다.
하지만 누구나 익숙해지기 전까지는 다 미숙하고 작지 않은가. 게다가 나는 개발을 살면서 해볼 줄은 몰랐던 사람이니 당연했다.
아무튼 내가 익히게 된 개념은 아래와 같다.
- 웹 개발 (웹에서 빌드) : Lovable, Figma make처럼 설치 프로그램 없이 인터넷 사이트에서 코딩이 가능한 개발 환경.
- 로컬 개발 : Cursor 처럼 별도로 설치 후 코딩이 가능한 개발 환경.
-> 로컬 개발은 AI기능을 제공하지만, 개발 지식이 더 필요하기 때문에 웹 개발보다 난도가 있는 편이다.
-> 로컬 개발의 공부가 결국 개발 공부와 일맥상통 한다.
-> 로컬 개발에서는 이전 버전으로 되돌아가는 방법을 익혀야 한다. (웹 개발에서는 흔히 Restore 버튼을 누르기만 하면 된다.)
-> 이전 버전으로 되돌아가는 기술을 '깃(Git)'이라고 한다. (그 유명한 GitHub의 이름의 의미도 알게 됐다.)
- Cursor는 하루 사용량이 적지만 이것저것 다양하게 쓸 수 있는 장점이 있다.
- 클로드 코드와 코덱스는 Cursor의 반대이기 때문에, 자신의 개발 성향이 하루에 몰입해서 장시간 개발을 하는지 아니면 하루에 조금씩 매일 하는지에 따라 사용 프로그램을 선택하는 게 효율적이다.
- CLI : 커맨드 라인 인터페이스의 약자로, 코딩하는 검은색 창을 지칭한다.
- VS Code : 커서처럼 로컬에서 코딩하는 것으로, 커서의 아빠 격이다. 오픈 소스로 AI를 사용하지 않으면 무료로 코딩이 가능하다.
-> Cursor 2.0이 나오면서 Cursor > VS Code가 돼버렸다.
- 깃허브 코파일럿 : 흔히 운전자의 개념이라고 보면 된다.
이러한 개념들에 대한 이야기를 들으며, 앞으로 나의 방향성은 이렇게 정해졌다.
1. 간단한 투두 리스트 서비스 만들기
투두 리스트를 정한 건 나였다. 어디선가 듣기로는 투두 리스트가 가장 기초적인 개발이라고 들었기 때문이다.
2. 웹 개발에서 30~100% 개발 후, 로컬 개발로 넘어가기.
웹 개발의 경험이 있기도 하지만, 로컬 개발을 당장 시작하기엔 무리인 상태라 이렇게 추천을 받았다.
어느 정도 완성도를 갖춘 모습에서 수정이나 디테일을 로컬에서 만지며 익혀나가는 방법이다.
-> DB까지 연결하고 나서 넘어가거나, 완성하고 나서 로컬로 넘어가도 괜찮다.
-> 나의 작업 행태는 클로드 코드나 코덱스가 나을 것 같다고 추천받았다.
3. 과정에서 익히거나 알게 되는 것들을 기록하며 공부하기.
그동안 해 왔던 디자인 공부법과 마찬가지다. 아티클을 읽고 정리 기록하며 해당 내용을 익히고 나의 생각을 덧붙이는 것을
바이브 코딩은 직접 시도해 보고 겪었던 문제와 어떻게 해결했는지를 기록하며 익히는 방법이다.
앞으로 해당 블로그에 과정 기록을 남기고자 한다.
개발을 모르는 프로덕트 디자이너가 어떻게 개발을 익히는지,
바이브 코딩을 진행하는지 관심이 있다면 구독해 주시라!