제발 AI한테 화면 디자인 대충 맡기지 마세요: '양산형 AI 티' 벗겨내는 바이브 코딩 툴킷 5선

[원본 출처 및 레퍼런스]
이 글은 X(구 트위터)의 AI 빌더 Aymen(@aymenpursue)님의 스레드(X 원본 글 보기)에서 소개된 툴킷을 바탕으로 제 실무 관점과 생각을 더해 정리한 노트입니다.

요즘 클로드 코드(Claude Code)나 커서(Cursor)를 켜두고 자연어로 툭툭 명령을 던져서 웹앱을 만드는 '바이브 코딩(Vibe Coding)' 안 해본 분들은 없을 거다. 예전 같으면 DB 설계하고 API 붙이는 데만 몇 주는 족히 걸렸을 작업이, 이제는 주말 오후에 커피 한 잔 마시는 동안 뚝딱 돌아가는 수준이 됐다.

그런데 막상 그렇게 만든 결과물을 띄워놓고 보면 어딘가 모르게 헛웃음이 나올 때가 많다. 기능은 분명히 돌아가는데, 화면을 보자마자 "아, 이거 AI가 대충 찍어낸 거네" 싶은 그 특유의 보라색 그라데이션 버튼과 영혼 없는 테일윈드(Tailwind) 기본 레이아웃이 눈을 찌르기 때문이다. 요즘 업계에서는 이런 걸 두고 'AI 슬롭(AI Slop, 양산형 AI 쓰레기)'이라고 부른다.

결국 지금 시점의 바이브 코딩에서 진짜 실력 차이는 '코드를 얼마나 빨리 뽑느냐'가 아니라, 'AI가 뱉어낸 투박한 결과물을 어떻게 돈 받고 팔 수 있는 수준으로 마감하느냐'에서 갈린다. AI한테 무작정 "예쁘게 만들어줘"라고 빌기보다, 처음부터 제대로 된 디자인 무기를 쥐여주는 게 훨씬 빠르다. 당장 브라우저 북마크에 넣어두고 다음 사이드 프로젝트부터 써먹기 좋은 알짜배기 도구 5가지를 추려봤다.

1. AI의 미적 감각을 강제로 끌어올리는 5가지 무기

사실 LLM은 수많은 코드의 평균값을 알고 있을 뿐, 여백이 주는 안정감이나 버튼이 눌릴 때의 쫀득한 손맛 같은 건 전혀 모른다. 그래서 우리가 직접 레퍼런스와 가이드를 떠먹여 줘야 한다. 프로덕트를 기획해서 최종 런칭하기까지 가장 가려운 곳을 긁어주는 5가지 툴이다.

개인적으로 여기서 제일 조합이 좋다고 느낀 건 Skill-Issue와 VibePrompts를 같이 쓰는 방식이다. 많은 분들이 화면 하나 고치려고 채팅창에서 AI와 스무고개를 하며 토큰을 다 태워 먹는다. 그럴 필요 없이 애초에 Skill-Issue에서 제공하는 프론트엔드 디자인 규칙을 에이전트 설정에 박아두고 시작하면, AI가 알아서 여백과 타이포그래피의 일관성을 지키며 코드를 짠다.

여기에 VibePrompts에서 내 서비스에 맞는 UI 프롬프트를 골라 던져주면 초안 퀄리티가 확 달라진다. 그렇게 뼈대를 잡은 뒤 Transitions.dev에서 스무스한 화면 전환 효과 몇 개만 얹어줘도, 남들이 하루 만에 뚝딱 만든 어설픈 토이 프로젝트와는 차원이 다른 '제대로 만든 앱' 느낌이 난다.

2. 로컬에선 잘 돌아가는데 왜 망할까? 마지막 10%의 디테일

물론 껍데기만 예쁘게 포장한다고 끝이 아니다. 요즘은 클로드 자체의 디자인 생성 능력도 워낙 좋아져서 웬만한 화면은 그럭저럭 뽑아주지만, 정작 서비스를 런칭했을 때 유저들이 도망가는 이유는 따로 있다. 바로 AI가 절대 먼저 챙겨주지 않는 '상용 서비스의 기본기'가 빠져 있기 때문이다.

내 노트북 로컬 환경(localhost)에서 잘 돌아가는 것과 실제 도메인을 달고 트래픽을 받는 건 완전히 다른 이야기다.

• 카톡이나 X에 내 사이트 링크를 공유했는데 썸네일 이미지도 안 뜨고 설명문도 깨져서 나온다거나,
• 모바일 화면에서 접속했더니 버튼이 화면 밖으로 삐져나가서 눌리지도 않는다거나,
• 심지어 프론트엔드 코드에 API 키가 그대로 노출되어 있는 경우도 허다하다.

AI는 우리가 시킨 기능(Happy Path)만 최단 거리로 구현할 뿐, 이런 자잘하고 귀찮은 마감 작업은 알아서 해주지 않는다. 그래서 코딩의 90%를 AI의 속도로 달렸다면, 배포 버튼을 누르기 전 마지막 10%는 반드시 IsReadyForLaunch 같은 검증 툴을 돌려서 구멍을 메워야 한다. 결국 돈이 되는 프로덕트와 버려지는 장난감의 차이는 이 지루한 마지막 10%를 누가 더 꼼꼼하게 챙기느냐에 달려 있다.

💡 Vullean's Insight

누구나 몇 시간이면 그럴듯한 웹 서비스를 찍어낼 수 있는 시대다. 역설적이게도 코드 짜는 비용이 0원에 가까워질수록, 사람들은 대충 만든 'AI 양산형 앱'에 빠르게 피로감을 느끼고 있다. 이제는 기능이 돌아간다는 사실 자체로는 누구도 감동시킬 수 없다.

결국 앞으로의 바이브 코딩은 AI한테 모든 걸 맡기고 기도하는 게 아니라, 내가 총괄 디렉터가 되어 AI의 부족한 미적 감각과 허술한 마감을 시스템적으로 보완해 주는 싸움이 될 거다. 이번 주말에 새로운 사이드 프로젝트를 시작한다면, 다짜고짜 기능 구현 프롬프트부터 치지 말고 오늘 소개한 툴킷들로 에이전트의 디자인 기본기부터 세팅해 보자. 한 끗 차이의 디테일이 내 프로덕트의 몸값을 완전히 바꿔놓을 것이다.