7월 28일 화요일
7월 28일 화요일
7월 28일 화요일
Medium · MuzliTech with Eldad
원문 핵심만 빠르게 정리한 AI 요약입니다.
평가에 유리한 조건을 만들지 않고 다섯 도구의 초기 판단력을 그대로 드러낸 실험입니다.
테스트 대상은 오래된 모바일 뱅킹 계좌 화면
낮은 잔액 위계, 빽빽한 거래 목록, 불분명한 주요 행동, 낡은 시각 스타일을 개선 과제로 제시
Flowstep, Google Stitch, v0, Lovable, Figma Make에 같은 화면과 프롬프트를 사용
후속 프롬프트나 여러 결과 중 선별 없이 첫 생성본만 평가
시각적 화려함뿐 아니라 정보 구조, 맥락 이해, 오류 여부를 함께 비교
가장 예쁜 화면보다 제품 맥락을 읽고 다음 작업으로 이어지는 결과에 가까웠습니다.
잔액을 강조하고 송금·입금 행동을 엄지 영역에 배치
프롬프트에 없던 다음 청구일과 금액까지 제안해 금융 화면의 실제 사용 맥락을 보완
거래 내역을 카테고리 아이콘, 정리된 상호명, 색상으로 구분된 금액으로 재구성
첫 생성 이후의 편집과 전달 과정도 한 흐름으로 연결
여러 레이아웃 변형, 직접 편집, 실시간 협업, Figma용 편집 레이어를 지원
React·TypeScript·Tailwind 내보내기와 Cursor·Claude Code·Windsurf용 MCP를 제공
같은 과제에서도 디자인 파일, 코드, 작동하는 앱 중 어디로 이어갈지에 따라 강점이 갈렸습니다.
Google Stitch는 다크 테마와 날짜별 거래 그룹으로 안정적인 초안을 생성
원본의 정보 구조는 잘 지켰지만 새로운 UX 해석은 적고 무료 화면 수에도 제한이 있음
v0는 수입·지출 요약과 명확한 컴포넌트 구조로 가장 엔지니어링 친화적
React 코드로 이어가기 좋지만 익숙한 핀테크 대시보드 패턴에 가까워 개성은 약함
Lovable은 30일 지출 요약처럼 유용한 판단을 더했지만 하단 내비게이션이 화면 밖으로 넘침
작동하는 앱을 빠르게 만들기에는 맞지만 시각·반응형 QA가 필요
Figma Make는 기존 브랜드와 기능을 가장 충실하게 보존
Figma 중심 리디자인에는 편하지만 사용자의 필요를 새로 해석하는 정도는 제한적
첫 화면의 인상보다 수정 비용과 팀 워크플로에 연결되는 방식이 더 오래 남는 기준입니다.
실무 비교에서는 맥락 이해, 편집 가능성, 반응형 안정성, 핸드오프를 함께 확인
Flowstep은 협업과 엔지니어링 전달, v0는 코드베이스, Stitch와 Figma Make는 빠른 탐색에 각각 강점
저자의 종합 평가는 Flowstep이 실제 출시 가능한 화면에 가장 가까웠다는 쪽
프롬프트 밖의 UX 판단과 편집·코드 전달 경로가 함께 작동한 점을 높게 평가
한 번의 프롬프트 결과는 최종 순위가 아니라 후보를 좁히는 신호
화면 복잡도와 반복 횟수에 따라 결과가 달라지므로 실제 프로젝트 화면으로 다시 시험할 필요가 있음
AI 디자인 도구를 동일한 레거시 화면에 묶어두니, 생성 이미지의 취향보다 제품 맥락을 읽고 다음 편집 단계로 이어지는 능력의 차이가 선명해집니다.
읽기 좋은 상황
AI UI 도구를 실제 리디자인 기준으로 비교하고 싶을 때
Figma 편집, 코드 생성, 팀 협업 중 우선할 목적지를 정해야 할 때
가져갈 포인트
결과물의 예쁨과 함께 UX 추론, 수정 가능성, 반응형 오류, 핸드오프 경로를 확인해야 합니다.
첫 생성본은 도구를 확정하는 답보다 자체 화면으로 다시 시험할 후보를 고르는 기준에 가깝습니다.