현업 개발자의 바이브코딩 디자인 개선법

디자인을 한 번도 손보지 않은 운동 기록 앱(모핏)을, AI가 저를 인터뷰하고 레퍼런스마다 "좋다·싫다"를 받아 가며 다듬게 한 6시간짜리 라이브예요.

이 노트를 읽고 나면 할 수 있는 것

1. 디자인 개선을 시키기 전에, AI가 비전문가인 나를 인터뷰해서 문제부터 끌어내게 하는 프롬프트를 쓸 수 있어요.
2. 클로드 아티팩트로 레퍼런스 보드를 만들게 하고, 카드마다 단 한 줄 평가로 내 디자인 취향을 규칙 문서로 바꿀 수 있어요.
3. AI가 나에게 결정이나 잡일을 넘길 때 선을 긋고, 결정은 다시 AI에게 돌려줄 수 있어요.

다시보기: https://youtu.be/I_qJ4BiLuww (6시간 14분. 앞 40분은 디자인 전 코드 정리이고, 디자인 작업 사이사이에 채팅 답변이 끼어 있어요)

목차

• 지난 대화에서 규칙부터 건지기 ▶ 0:05:52
• 리팩토링은 내 설명을 AI 말로 되돌려 받고 시작해요 ▶ 0:34:17
• 디자인은 목표부터, 목표는 레퍼런스로 ▶ 0:39:24
• 커서가 헤맨 이유: 문제 정의를 건너뛰었어요 ▶ 1:20:31
• 레퍼런스 보드에 좋다·싫다를 달아요 ▶ 2:04:03
• 2차 보드: 나란히 놓으면 순위가 바뀌어요 ▶ 2:33:42
• 시안은 이미지로 먼저, 의견은 AI가 먼저 ▶ 3:43:40
• AI에게 넘길 것과 내가 쥘 것 ▶ 4:11:26
• 캘린더 화면에서 나온 결과 ▶ 5:17:18
• Q&A ▶ 0:57:37
• 오늘 해볼 것 ▶ 3:56:49

지난 대화에서 규칙부터 건지기 ▶ 0:05:52

이날 도구는 커서(Cursor)였어요. 디자인에 들어가기 전에, 이 프로젝트에서 그동안 제가 커서에게 했던 피드백부터 정리했어요. 같은 지적을 세션마다 반복하지 않으려면 그걸 규칙 파일에 남겨야 하거든요.

좋아, 그럼 내가, 그, 너의 작업에 대해서, 지난 대화들에서 피드백했던 내용 중에... 좀 이후 다른 세션들에도, 지속적으로 참고하면 좋을 만한 것들이 있을까? 있는지 한번 지난 대화들을 분석해서 뽑아봐줘.

좋아. 그러면은, 이렇게 추출한 인사이트들 중에서, 룰이나 클로드닷 엠디 같은 곳에 영속화하면 좋을 것들이 무엇이 있을까? 영속화될 내용을 정확하게 포함해서, 한번 브리핑해줘봐. 반영하지는 말고, 내가 그것들을 검토하고, 어떻게 수정해서 반영할지, 또는 반영하지 않을지, 같은 의견을 너한테 줄 거야.

핵심은 "반영하지 말고 브리핑만"이에요. 바로 규칙 파일에 쓰게 하면 검토할 기회가 사라져요. 브리핑이 오자 "너무 길게 한 건 아닌지 검토해 봐"라고 한 번 더 물었고, 커서는 줄이기보다 붙는 범위를 좁히는 게 맞다고 답했어요. ▶ 0:12:13

채팅에서 "커서 룰이 클로드 스킬과 같은 개념이냐"는 질문이 와서 커서에게 공식 문서 기준으로 물었어요. ▶ 0:22:48 룰(Rule)은 매 대화에 항상 들어가고, 스킬(Skill)은 관련 있을 때만 불려요. 항상 알아야 되는 것만 룰에다가 넣어라. ▶ 0:26:32

이 대화는 에포트 레벨(모델이 답하기 전에 고민하는 양)을 로우로 두고 했는데도 일을 잘했어요. 지시를 내가 디테일하게 줄 거라면 높은 에포트는 토큰과 시간만 버려요. ▶ 0:20:42

앱을 직접 눌러 보니 종목 데이터가 비어 있었어요. 시딩(기본 데이터 넣기)을 시키면서 검색의 사용자 실수도 같이 막게 했어요.

목표까지 시딩하지 말고, 종목 데이터만 넣자. 종목은 네가 추천해 준 대로 하는 게 좋은 것 같아. 그래서 이대로 시딩 구현해 보고, 그다음으로 점검해 주면 좋겠는 게, 트레이너가 종목 추가할 때 검색하는 로직이거든? 이게, 종목 이름에 공백이 들어 있더라도 트레이너가, 공백 없이 검색창에 입력할 수도 있잖아? 그런 상황에서도, 알아서 잘... 데이터가 검색되면 좋겠고, 이거 외에도 사용자가 할 만한 실수들이, 최대한, 방지될 수 있으면 좋을 것 같아. 그리고 내가 알기로, 부분 문자열로 검색 데이터를 만약에 잡으면은, 이 한 한글의 경우에 한 글자를 구성하는 받침이라던가 그런 것들을 아직 미완한 상태면은 검색 데이터가 안 잡히는 문제가 있단 말이야. 예를 들면 벤치프레스에 벤에 니은을 아직 입력하지 않은 상태면 문자를 비교로는 검색이 안 되는 거지. 이런 것도 해결해 보는 게 좋을지 너가 고민해 봐 주면 좋겠어. 만약 너무 복잡하면은 스킵하는 게 맞을 거고 기술적으로 대응이 과하게 복잡하지 않다면 이번에 대응하는 게 좋을 거고 한번 고민해 봐 줘.

"너무 복잡하면 스킵"이라는 탈출구를 같이 준 게 포인트예요. ▶ 0:19:47