r/vibecoding•5개월 전•2•16

디자인 작업이 너무 힘드네요 - UI/UX 바이브 코딩. API/데이터/백엔드에 맞는 UI/UX는 어떻게 처리하시나요?

Really struggling to work on designs - Ui/UX vibe coding. How do you handle both UI/UX that fits apis/data/backend?

핵심 요약

AI 도구로 B2B SaaS의 UI/UX를 구현하는 데 어려움을 겪는 사용자가 실무적인 해결책과 도구 추천을 구하는 글입니다.

UI/UX 구현 난관 — 기존 코드에 대시보드와 분석 UI를 입히는 과정에서 AI 도구 사용에 한계를 느낌.
디자인 시스템 일관성 — Figma MCP나 Claude 등을 활용해 일관된 디자인 시스템을 유지하는 것이 가능한지 궁금해함.
분석 마비 현상 — UI 작업이 복잡해지면서 프로젝트 전체가 지연되는 상황에 직면함.
도구 추천 요청 — 코드 없이 빠르게 프로토타이핑하고 수정할 수 있는 효율적인 도구를 찾고 있음.

안녕하세요 여러분, AI 도구를 사용해서 UI/UX 작업을 하는 데 정말 큰 어려움을 겪고 있어요. 저는 리드 폼(lead forms)을 설계하고 관리하는 B2B SaaS 도구를 만들고 있습니다.

이미 존재하는 코드에 대시보드와 분석 UI를 입히는 게 AI 도구로는 가장 어려운 것 같아요. UI 문제를 해결하기 위해 어떤 도구를 사용하시나요? 추천 부탁드립니다.

혹시 Figma MCP, Paper, 혹은 Claude 디자인을 사용해서 일관된 디자인 시스템을 성공적으로 구축하신 분 계신가요?

제발 도와주세요! UI 때문에 분석 마비(analysis paralysis)가 와서 프로젝트 전체가 지연되고 있어요.

원문

커뮤니티 목록

r/vibecoding•5개월 전•2•16

디자인 작업이 너무 힘드네요 - UI/UX 바이브 코딩. API/데이터/백엔드에 맞는 UI/UX는 어떻게 처리하시나요?

Really struggling to work on designs - Ui/UX vibe coding. How do you handle both UI/UX that fits apis/data/backend?

핵심 요약

AI 도구로 B2B SaaS의 UI/UX를 구현하는 데 어려움을 겪는 사용자가 실무적인 해결책과 도구 추천을 구하는 글입니다.

UI/UX 구현 난관 — 기존 코드에 대시보드와 분석 UI를 입히는 과정에서 AI 도구 사용에 한계를 느낌.
디자인 시스템 일관성 — Figma MCP나 Claude 등을 활용해 일관된 디자인 시스템을 유지하는 것이 가능한지 궁금해함.
분석 마비 현상 — UI 작업이 복잡해지면서 프로젝트 전체가 지연되는 상황에 직면함.
도구 추천 요청 — 코드 없이 빠르게 프로토타이핑하고 수정할 수 있는 효율적인 도구를 찾고 있음.

혹시 Figma MCP, Paper, 혹은 Claude 디자인을 사용해서 일관된 디자인 시스템을 성공적으로 구축하신 분 계신가요?

제발 도와주세요! UI 때문에 분석 마비(analysis paralysis)가 와서 프로젝트 전체가 지연되고 있어요.

주요 댓글

r/vibecoding

AI 툴을 활용한 UI/UX 설계의 한계와 복잡한 대시보드 구현에 어려움을 겪는 작성자에게, 컴포넌트 단위의 접근 방식과 기존 바이브 코딩 툴의 한계에 대한 조언이 이어지고 있음.

API 스키마와 필요한 내용을 Mowgli(https://mowgli.ai)에 붙여넣어 보세요. 먼저 UI 사양을 짜주고 스타일을 잡을 수 있는 무드보드도 만들어 줄 거예요. 필요하다면 Figma 가져오기/내보내기도 지원하고요. 다 끝나면 Claude Code로 넘기면 됩니다.

흥미롭네요, 한번 시도해 볼게요. 고마워요.

도움이 될지는 모르겠지만, 본인이 원하는 결과물의 예시를 보여주면 성공 확률이 훨씬 높아질 거예요.

UI 마비가 오는 건 워크플로우가 안정되기도 전에 제품을 '완성'된 것처럼 보이게 하려 해서 그래. 대시보드 UI는 실제 상태, 엣지 케이스, 로딩 동작, 빈 데이터, 권한, 이상한 사용자 행동 같은 거에 엄청 의존하거든. AI 툴은 예쁜 정적 화면 만드는 건 잘하는데, 실제 제품 로직이랑 같이 진화하는 시스템 설계는 훨씬 못해. 전체 페이지를 다듬으려 하지 말고 작은 재사용 가능 컴포넌트 시스템부터 집중하는 게 도움 됐어.

전 바이브 코딩만 할 줄 아는 마케터예요. 코딩은 쉽다지만 UI를 코드에 맞추고 AI 티 안 나게 만드는 게 너무 힘들어요. 특히 대시보드 같은 경우엔 페이지 하나랑 메트릭 카드 세 개 만드는 게 고작이었거든요. 대시보드 전체를 만들거나 디자인 공간(랜딩 페이지 빌더를 만들려고 해요) 같은 복잡한 페이지를 작업할 때, 코드 없이 빠르게 프로토타이핑하고 즉각적으로 수정할 수 있는 도구가 있을까요?

난 바이브 코딩만 할 줄 아는 마케터라 코딩은 쉽다 쳐도, UI를 코드랑 맞물리게 하고 AI 티 안 나게 만드는 게 너무 힘들어. 특히 대시보드는 페이지 하나랑 메트릭 카드 3개 만드는 게 한계였거든. 대시보드 전체를 만들거나 디자인 스페이스 같은 복잡한 페이지를 작업할 때, 코딩 없이 빠르게 프로토타이핑하고 바로바로 수정할 수 있는 툴이 있을까?

확인차 묻는 건데, 어떤 도구를 말씀하시는 거죠?

확인차 묻는 건데, 지금 무슨 툴 말하는 거야?

이런 바이브 코딩 툴들은 네 아이디어를 절대 이해 못 하고, 네 비전을 반영하지도 못하며, 아이디어를 발전시키면서 네가 내린 결정들을 다 까먹는다는 게 명확한 한계지. 창업자들이 이거 만들 수 있게 돕고 있는데, https://oquato.com 여기 한번 보고 솔직한 피드백 좀 줘.

원문r/vibecoding