바이브 코딩 3주차 후기

무엇을 만들었는가?

바로바로 ✨또두리스트💫

보통 투두리스트는 메모장 앱, 타이머 앱과 함께 프론트엔드의 Hello world라고 생각할 정도로 흔한 프로젝트이다. 실제로 본인도 최소 5번은 만들어봤을 만큼 흔한 프로젝트이기도 하다. (React 시작할 때, 동아리 스터디에서, 실사용하기 위해 DB를 연결한 버전, ← 이녀석 업그레이드 버전, ...)

그런데

• 바이브 코딩을 직접 해보고 싶다는 니즈
• 최근 일정 관리가 잘 안 되는 점
• 오프라인 스터디 플래너 관리는 너무 귀찮음
• 하지만 외부 DB에 정보를 저장하고 싶지 않음

이런 이유로 또두리스트를 또! 만들게 되었다.

미리보기

main 페이지에서는 오늘 할 일과 다가오는 일정들을 볼 수 있다.

참고로 모든 일정은 프라이버시를 위해 위장 모드를 적용했습니다..

timetable 페이지는 체크리스트/세션 리스트 탭으로 토글이 가능하다. 이전에 사용하던 플래너가 이렇게 10분 간격으로 일정 기록이 가능했어서, 그런 형식을 넣어봤다.

체크리스트는 일정을 수정/삭제하고, 상태 변경을 하는 뷰이고,

그렇게 기록된 시간(세션)을 세션 목록에서 확인하는 구조다.

기록된 세션 정보는 통계로 볼 수도 있다. 일간/주간/월간 통계를 볼 수 있는데, 주간 통계는 이런 식이다.

schedule 페이지에서는 캘린더 뷰로 일정을 볼 수 있다.

나는 이렇게 블록으로 보는걸 선호하긴 하는데,

가끔 그냥 점으로도 봄

이렇게 카테고리의 일정만 골라서 볼 수도 있고,

완료된 일정/취소된 일정은 안 보기나 일주일의 시작을 일요일로 두는 옵션이 있다.

트래커는 구현은 했는데 어떻게 디벨롭시킬 지 고민되는 부분이다.

첫번째 캘린더의 경우에는 이모지를 자유롭게 등록할 수 있는 타입이고, 두번째 캘린더의 경우에는 기록된 세션 시간을 기반으로 자동 생성되는 타입이다(like GitHub).

색상을 수동으로 등록하거나, 이미지를 직접 등록할 수 있는 타입도 만들어놓긴 했는데 잘 안쓰게되더라.

어떻게 만들었는가?

100% 바이브 코딩은 아니고, 중간에 직접 코드에 손을 대기도 했다. 왜냐하면, 나는 개발자니까

border 1px 말고 2px로 하자!

이런 요청은 굳이 AI에게 맡기는 것보다 빠르고, 토큰도 덜 쓸 수 있음.

또, 코드를 이런 방향으로 고치라고 리팩토링 요청을 하기도 했다. 완성된 프로젝트를 공개할 수도 있다는 걸 염두에 두었는데, 기능이 너무 많이 붙은 지금은 이 꼬라지의 코드를 내 이름으로 공개한다? 음... 잘 모르겠어서 공개 안 하는 쪽으로 마음이 기울었다.

코드에 대해서

정말 코드를 하나도 안 보고 프로젝트를 구현하면 개발자 입장에서는 한숨나오는 코드가 짜진다. 이거 앞으로 유지보수 어떻게 할건데?

하지만 어쨌든 작동은 한다. 뭘 추가하라고 했을 때, 기존 기능을 삭제하는 일은 있었어도 잘 갈구면 신기능까지 잘 돌아가긴 함. 성능은 안 측정해봐서 모르겠음.

디자인에 대해서

클로드의 디자인은 아직 양산형 느낌이 난다고 생각해서 처음에는 디자인 시스템을 직접 구축했다.

그런데 세상에 이렇게 잘 만들어진 디자인 시스템이 있는데 내가 디자인을 해야하나? 싶어서 shadcn/ui로 전환했다. 처음부터 적용했으면 더 좋았을 것 같다는 생각도 든다.

내가 원하는 서비스의 톤이 있다면 그쪽으로 짜달라고 하는것도 좋긴 할텐데, 특별히 원하는 건 없고 깔끔하면 좋겠어서 shadcn이 좋은 답이었던 것 같다. 지금은 거의 모든 부분이 shadcn이고, 아닌 부분을 찾으면 바로 전환할 것.

그래서 느낀건 앞으로는 디자인 시스템 잘 고르는 능력도 중요할 것 같다?