화이트보드 관리 툴 만들기

바이브 코딩

연휴를 맞아, 바이브 코딩을 해보기로 했다. 바이브 코딩은 AI 한테 코딩을 시키면서 노는 것이다. 이전에 회사 동료분이 아이디어를 주셨던 화이트보드 서비스를 cursor 랑 같이 디벨롭해보기로 했다.

준비

에디터: cursor

프론트엔드 프레임워크 : Next.js

백엔드 프레임워크 : .NET

그 외 패키지 : tldraw sdk, skeleton ui

tldraw 는 웹소켓과 리액트를 사용해 만들어진 캔버스 라이브러리로, sdk 를 내 웹에 붙이면 캔버스 사용이 가능하다. 체감상 끊김이나 지연이 전혀 느껴지지 않아서 마음에 들었다.

기능

새 캔버스 생성하기

기존 캔버스 조회 및 버전관리

캔버스 대시보드

새 캔버스

기존 캔버스 조회

대시보드

cursor와 함께 바이브 코딩

기능명세를 만들고 cursor chat 에 입력했더니, cursor가 필요한 패키지를 설치하더니 백엔드 코드는 c#으로, 프론트엔드 코드는 타입스크립트로 알아서 구현해나갔다. 나는 중간중간 확인하고 엔터만 쳐주었다. 원하면 언제든지 "Restore checkpoint" 버튼을 통해 이전 체크포인트로 돌아갈 수 있어서 마음이 편안했다.

cursor의 아이디어 제안

처음에 대시보드 버전관리 방법이 좀 고민됐다. 그래서 cursor 한테 의견을 구했더니,

_latestRevisions 을 딕셔너리로 관리하는 걸 제안해줬다.

예를 들어 도큐먼트가 두개 있고 각각 버전이 2개, 3개 있으면

_latestRevisions = {1:2, 2:3}

이렇게 되는 것이다. 도큐먼트를 저장할 때마다 리비전 값이 1씩 증가한다. 그리고 도큐먼트를 조회할 때는 _latestRevisions 을 조회해서 해당 도큐먼트의 최신 버전을 가져온다.

DB 에 저장할 때는 key를 id-revision 형태로 저장한다.

바이브 코딩 해보고 느낀 점

이거 왜 안돼? 해결해줘.

바이브 코딩을 하다 보면 모든 걸 cursor에 물어보고 의존하게 된다. 특히 많은 내용을 한꺼번에 건드린 경우에는 cursor 가 짠 코드를 일일이 확인하려고 하면 시간이 정말 오래 걸린다. 그러면 흥이 깨지기 때문에 점차 홀린 듯 엔터를 누르게 된다. 따라서 바이브 코딩은 간단한 토이 프로젝트를 시작할 때 테스트 삼아 해보면 좋을 것 같다. 그 다음에는 그걸 바탕으로 개선하거나, 그걸 참고해서 cursor의 도움 없이 직접 만들어보는 훈련을 하면 좋을 것 같다.

C# 은 cursor 에디터에서는 visual studio 에서 사용 가능한 많은 기능(변수를 참조하는 곳들을 조회하거나 디버깅하는 기능)이 없기 때문에, 당분간은 메인 IDE로 쓸 생각이 없다. visual studio 에서 cursor extension을 쓸 수 있다면 얼마나 좋을까.