프로덕트 디자이너의 생산성 웹앱 만들기 : 오늘할일 제작기
바이브 코딩 왕초보의 클로드로 뚝딱뚝딱 만든 오늘할일 제작기
출발
퇴사 후 제일 그리운 건 사내 커피도 아니고, 내 업무 우선순위를 자동화해놓은 Asana 개인 프로젝트와 데일리스크럼 문화였다.
재직 기간동안 매일 할 일을 파악하고 실행하는 게 습관이 되어 퇴사 후에도 이 습관을 계속 유지하고 싶었다.
미리 알림이나 시중의 태스크 관리 앱을 사용해보거나 개인 슬랙 채널을 만들어 동일한 효과를 내고자 했지만 한계가 있었다.
오늘 하루 할 일을 직관적으로 확인하고 관리할 수 있는 앱이 없을까? 고민하다 그냥 내 입맛에 맞춰 만들기로 했다.
웹을 선택한 이유
회사에서 하던 것처럼 모니터 앞에 앉아서 10분 정도 오늘 할 일을 정리하는 흐름을 유지하고 싶어서 고민없이 웹을 선택했고 앱보다 웹 구현 난이도가 훨씬 낮아서 웹으로 일단 빠르게 배포하고 개선을 진행하려 했다.
진행 과정
PRD 문서 만들기
먼저 대략 내가 그리는 데스크탑 웹앱의 방향과 니즈를 담은 PRD문서를 제작하기 위해 Google AI Studio를 사용했다. Google AI Studio가 프로토타입을 가장 의도와 잘 맞는 형태로 제작해주기 때문이다. 디자인은 다크모드 테마 기반의 Saas 데스크탑 앱 레퍼런스 이미지를 첨부했다.
너는 생산성 데스크탑 웹앱을 제작하는 기획자야.
아래 니즈를 담은 데스크탑 웹앱을 제작하려고 해. PRD 문서를 작성해줘.
생각의 연쇄과정을 통해 제작해줘.
1. 아사나처럼 태스크와 하위 태스크를 추가하는 기능이 있으면 좋겠어요.
2.태스크마다 마감일, 메모를 설정하고 싶어요.
3.홈 화면에는 매일 데일리스크럼을 작성하고 싶어요.
3-1. 웹앱이 미리 설정한 태스크의 하위 태스크를 마감일 순서대로 추천해주고, 추천한 태스크를 마우스로 끌어서 데일리스크럼에 포함하고 싶어요.
3-2. 태스크를 직접 작성하는 기능도 있으면 좋겠어요.
4. 완료한 태스크는 모아볼 수 있는 필터링 기능이 있으면 좋겠어요.
5. 주간 태스크 완료 리포트를 확인할 수 있는 대시보드가 있으면 좋겠어요.
6.디자인은 첨부한 이미지처럼 다크모드 테마면 좋겠어요.
PRD 문서를 작성 후 수정사항을 전달하여 내가 원하는 스펙이 담긴 최종 PRD 문서를 제작했다.
이때 중요한건, MVP 기능의 우선순위를 설정하여 쳐내는 것이다.
내가 원하는 것 이상의 쌩뚱맞은 기능이 기획서에 포함되어 있거나 1차 스펙이 과도하게 커진다면 첫 배포도 못하고 포기할 가능성이 크다.
그래서 MVP(Minimum Viable Product)라는 개념을 이해해야 한다. 니즈와 페인포인트를 해결할 수 있는 핵심 기능 1개를 뾰족하게 만들고 배포하여 시장 반응을 살피는 것이다. 나는 시장이 없으니 MVP로 배포해서 내가 사용자가 되어 3일 간 써보는 것을 목표로 했다.
클로드가 참고할 PRD.md, Design.md 제작하기
개발을 시작하기 전 클로드 코드가 참고할 기획서인 PRD.md 문서와 디자인 시스템 문서인 Design.md를 제작했다.
PRD 문서는 구글 AI 스튜디오의 문서를 복사하여 파일로 만들었고
Design 문서는 PRD 문서에 기재된 Foundation과 UXUI 가이드라인 내용을 조금 다듬어 클로드에게 md 파일 형태로 만들어달라고 지시했다.
그럼 이렇게 Design.md를 잘 뽑아준다.
Skill이나 Claude Design을 사용하지 않은 이유는 토큰이 아까워서(..)
디테일한 디자인 요구사항이 없고 명확한 레퍼런스 이미지가 있는 케이스라 클로드 소네트로도 충분히 의도에 맞는 디자인이 나왔다.
개발은 AI, 지휘자는 디자이너
바이브 코딩으로 나온 결과물은 좋기도 나쁘기도 했다. 구현이 매우 빨랐고 디자인 퀄리티가 나쁘지 않았다. 기본적인 기능도 정상적으로 동작했다. 하지만..
의도하지 않은 기능이 UI만 구현되어 있거나, 플로우가 이상하거나 사용성이 불편한 것들이 많았다. 한편으로는 아, 이래서 프로덕트 디자이너가 AI와 합이 잘 맞겠구나! 라는 생각을 했다. 모두가 MVP를 만들 수 있는 세상에서 MVP가 MLP(Minimal Lovable Product)가 되려면 사용자 경험을 고려한 기능 설계가 매우 중요해진 세상이 된 것이다.
개발은 AI가 다 해준다. 그러나 무엇을 어디까지 만들어야 하는지, 무엇을 더 환상적인 경험으로 만들기 위해서 뭐가 필요한지에 대한 판단은 만드는 사람이 해야한다. 그 역할은 디자이너가 잘할 수 있다. 1차 결과물을 확인한 후 나는 쌩뚱맞은 기능 제거, 오늘 할 일 기능 경험 향상, 사용성 향상에 집중했다.
실무 경험 잘 써먹기
MVP 개발 완료, 그 다음은? 바로 배포? 그러면 큰일난다.
핵심 기능을 사용하는데 지장이 없는지 반드시 확인을 해야한다. QA 단계이다.
어느정도 개발이 완료되고 나면 기능을 전체적으로 돌아볼 수 있는 TC를 작성한다.그리고 TC 문서를 토대로 클로드 코드에게 기능 QA를 진행하라고 지시했다.
이 과정에서 발견한 버그
1. 생성한 할 일이 저장되지 않는 이슈
2. 탭을 누르면 생성한 할 일이 날아가는 이슈
등등.. 실제 프로덕션에서 발생했다면 아주 치명적일 버그가 발견됐다.
보기엔 문제가 없어보여도 QA는 필수 중의 필수다.
배포
서버는 Superbase를, 배포는 Vercel를 사용했다. 아는게 거의 없었지만 이것도 클로드 코드가 잘 알려줬음ㅎㅎ 데이터 저장 및 기기 간 데이터 동기화를 위해 회원가입/로그인 기능도 임시로 생성했다.
배포 이후
배포 이후에도 수정건이 계속 나왔고 클로드 코드로 이어서 수정을 진행했다. 근데 이 친구가 계속 QA를 하기도 전에 계속 프로덕션 서버에 바로 배포하려고 하는 것..🥶 그래서 매번 개발 서버에만 수정 사항을 적용하고 먼저 보여주라는 명령을 하고 있다. 이거 좀 알아서 해주는 스킬 없는지..
이제는 2 phase 작업인 프로젝트 기능을 추가하고 UXUI를 다듬으려고 한다. (지금도 마음에 안드는 구석이 참 많지만 우선순위를 모두 미뤄놓았다)
특히 모바일은 반응형 대응만 해놨지 사용성은 아예 버려놓은 수준이라서.. 오늘할일 써보면서 모바일로도 확인할 일이 많다 싶으면 모바일은 아예 적응형으로 변경하려고 한다.
여기까지 프로덕트 디자이너의 웹앱 제작기였다.
디자이너 여러분, 이제 저희는 지휘자이며 마법의 맛을 내주는 필수 조미료 미원입니다! AI로 더 많은 걸 해보세요 🧚🏻♀️