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

한 줄 핵심

Cursor와 Claude를 활용해 비전문가의 취향을 인터뷰·레퍼런스 비교·아티팩트 피드백으로 구조화하면, 디자이너 없이도 바이브 코딩 UI를 실사용 수준까지 끌어올릴 수 있다.

시간별 요약

1. 0:00
   디자인 개선 작업 시작 기존 운동 서비스의 디자인을 점검하기 위해 Cursor를 실행하고, 먼저 앱이 정상적으로 뜨는지와 현재 상태를 확인하는 데서 작업을 시작한다. 단순한 실행·점검 단계에서는 고성능 모델보다 빠른 응답과 가벼운 모델 운용이 더 유리하다는 판단이 드러난다.
2. 5:08
   세션 기록과 모델 선택 지난 대화 내용을 불러와 현재 작업의 맥락을 복원하고, 세션 간 유지해야 할 피드백을 구조화하려는 흐름이 잡힌다. Cursor의 빠른 응답, 자연스러운 설명, 넉넉한 사용량이 바이브 코딩 메인 도구로 선택되는 이유로 정리된다.
3. 11:01
   초기 버그와 데이터 시딩 문제 운동 종목이 비어 있거나 최근 운동 목록이 안 보이는 등 초기 상태 데이터와 화면 반영에 여러 문제가 드러난다. 트레이너가 종목을 추가할 때 시딩되지 않은 데이터 때문에 막히는 구조가 확인되며, 디자인 이전에 기본 사용자 흐름부터 안정화해야 한다는 점이 강조된다.
4. 16:02
   모델·프롬프트 운용 전략 Cursor Grok 4.6 High와 Medium, Fast의 조합처럼 작업 난이도에 따라 모델과 속도를 조절하는 방식이 제시된다. 프롬프트가 명확하면 낮은 effort로도 충분하지만, 모호한 요청에는 더 높은 effort가 필요하다는 실무 기준이 제시된다.
5. 22:02
   규칙과 스킬의 역할 분리 Cursor Rule과 Claude Skill의 차이를 확인하며, 항상 참조해야 하는 내용은 규칙에 두고 상황별로만 필요한 내용은 스킬로 분리하는 원칙이 정리된다. 일관되지 않은 규칙 적용은 코드베이스를 복잡하게 만들 수 있어, 구조적 단순성이 중요하다는 관점이 나온다.
6. 28:00
   홈 화면과 입력 UX의 문제 종목 추가 후 홈 반영이 늦고, 단백질 목표 입력이나 취소 버튼 같은 기본 기능도 불완전한 상태가 드러난다. 상단바와 모달이 겹쳐 클릭이 막히는 문제는 디자인 이전에 실제 조작성과 레이아웃 우선순위부터 바로잡아야 함을 보여준다.
7. 34:19
   React Query 구조 점검 React Query를 쓸 때는 커스텀 훅에 쿼리 키를 함께 묶어 두고, 뮤테이션에서 무효화 대상을 명확히 관리하는 패턴이 검토된다. 코드 구조가 지켜지지 않는 지점을 발견하면, 폴더 구조와 아키텍처까지 함께 재설계해야 유지보수가 쉬워진다.
8. 39:02
   디자인 목표를 먼저 정의 디자인은 예쁘게 만드는 일이 아니라 사용자의 생산성을 높이는 일이라고 정의하고, 성공 기준을 만들기 위해 목표를 먼저 정해야 한다는 원칙이 강조된다. 가장 쉬운 출발점은 비슷한 서비스의 레퍼런스를 모아 무엇이 좋고 나쁜지 구체적으로 판별하는 것이다.
9. 45:06
   작업 범위와 컨텍스트 관리 개선 범위가 넓어질수록 어떤 순서로 처리할지, 테스트를 어디에 깔지, 컨텍스트를 어떻게 아낄지부터 고민해야 한다. 서브에이전트는 컨텍스트를 새로 소비하는 비용이 있으므로, 메인 세션과 분업의 균형을 신중히 잡아야 한다.
10. 55:01
    인터뷰와 레퍼런스 조사 설계 비전문가가 직접 디자인 방향을 정하는 대신, AI가 질문을 설계해 취향과 문제를 끌어내는 인터뷰가 필요하다. 레퍼런스 조사 전에 무엇을 먼저 고정해야 하는지까지 정리해야, 이후 비교가 무의미한 감상평으로 흐르지 않는다.
11. 1:03:04
    실사용 맥락에 맞는 UX 우선순위 운동 기록은 세트 사이마다 빠르게 입력해야 하므로, 클릭 수를 줄이고 입력 속도를 높이는 UX가 핵심으로 잡힌다. 수업 시작 전에 종목을 미리 넣을 수 있더라도 실제 입력 시점의 속도와 피로도를 우선적으로 고려해야 한다.
12. 1:13:00
    국내 서비스 취향에 맞춘 무드 선택 해외 앱보다 토스, 당근 같은 국내 서비스의 위계감과 친화적 카피를 더 참고해야 한다는 판단이 나온다. 기능 단위가 아니라 전체적인 무드와 정보 강조 위계가 맞는지 보는 방식이 더 효율적이다.
13. 1:23:05
    인터뷰 질문의 난이도 조절 디자인 문제를 비전문가에게 묻더라도, 어려운 용어 대신 답하기 쉬운 질문으로 문제를 끌어내야 정확도가 올라간다. 지금 필요한 것은 화면을 먼저 그리는 일이 아니라, 무엇이 문제인지 인터뷰로 선명하게 만드는 과정이다.
14. 1:37:01
    레퍼런스 피드백으로 취향 추출 고평점 스킬보다 실제 레퍼런스를 비교하며 피드백하는 과정이 더 효과적이라는 결론이 나온다. 강조 위계, 정보 밀도, 카드형 리스트의 자연스러움 같은 구체 기준이 사용자의 취향을 추출하는 데 핵심으로 작동한다.
15. 1:56:03
    작업 방식의 재정의 이 프로젝트의 핵심은 디자인을 직접 만드는 것이 아니라, 문제 정의→레퍼런스 조사→취향 추출→AI 구현의 순서로 프로세스를 짜는 데 있다. 한국 사용자 대상 서비스라는 점을 반영해 국내 스타일을 우선적으로 참고하는 방향도 고정된다.
16. 2:06:02
    실제 레퍼런스 비교와 선호 판단 번핏, 플랜핏, 뱅크샐러드 같은 서비스들을 보며 무엇이 덜 투박하고 어떤 위계가 읽히는지 하나씩 판단한다. 색감, 정보량, 강조 방식, 카드 구조가 각각의 UX 인상을 좌우하며, 그 결과 선호 기준이 점점 구체화된다.
17. 2:30:02
    정보 위계와 미감 기준 정리 가장 중요한 정보만 강하게 드러나고 나머지는 배경으로 물러나야 뇌 빼고 쓸 수 있는 서비스가 된다는 기준이 확립된다. 토스의 핵심은 색보다 위계라는 판단처럼, 디자인의 본질은 색감보다 정보 구조와 인지 피로도 감소에 있다.
18. 2:55:00
    휴식 타이머와 기능 경계 세트 기록 중 휴식 타이머는 유용하지만, 별도 휴식일 기능은 당장 필수는 아니라는 판단이 내려진다. 제품은 타깃 페르소나의 실제 상황에 맞춰 최소 기능으로 먼저 가야 하며, 필요해지면 그때 확장하는 쪽이 낫다.
19. 3:41:00
    아티팩트 기반 반복 피드백 이미지와 시안을 바탕으로 아티팩트에서 바로 피드백을 주고받는 방식이 실제로 높은 품질을 만든다. 섹션 간 거리, 굵기 배분, 카드 밀도, 캘린더 표현 등 세부 요소가 정리되면서 화면의 완성도가 눈에 띄게 올라간다.
20. 5:32:00
    결과 검증과 워크플로우 고정 최종 결과가 예상보다 훨씬 좋아졌고, 디자인이 잘 나오지 않았던 이유는 기술 부족보다 맥락 부족에 가깝다는 결론에 도달한다. 앞으로도 인터뷰·레퍼런스 비교·아티팩트 피드백 중심의 워크플로우를 공식 방식으로 가져가려는 방향이 굳어진다.

실무 인사이트

• 디자인 개선은 바로 시안 작업에 들어가기보다, 문제 정의와 인터뷰 질문 설계를 먼저 고정할 때 품질과 속도가 함께 올라간다.
• 비전문가가 AI와 협업할 때는 ‘결정은 AI, 취향과 제약은 사람’으로 역할을 나누고, 사람은 선택지 평가에 집중하는 편이 가장 효율적이다.
• AI 디자인 품질은 미감 자체보다도 컨텍스트, 레퍼런스, 정보 위계, 반복 피드백 구조에 크게 좌우되므로, 이 네 가지를 문서화해 다음 세션에 재사용하는 것이 중요하다.