AI로 디자인 만들 때 '예쁘게 해줘'가 망하는 이유 — 바이브코딩부터 토스 디자인 시스템까지
결론부터: AI에게 디자인 감각을 기대하지 말고 지침을 줘야 합니다
요즘 ChatGPT, Cursor, Antigravity 같은 도구로 앱을 만들다 보면 기능은 금방 만드는데, 이상하게 화면이 다 어디서 본 것처럼 나옵니다. 둥근 카드에 파란색 버튼, 그리고 카드 3개 나열되는 그 무난한 스타일 말이에요.
이걸 해결하는 핵심은 단순합니다. “예쁘게 해줘”라고 요청하는 대신, “뭐가 제일 먼저 보여야 하는지”, “어떤 건 하지 마라” 하는 명확한 의사결정 기준을 전달해야 원하는 고퀄리티 디자인이 나옵니다.
오늘 읽은 UI/UX 기사 3편을 바탕으로 배우고 느낀 점들을 저의 언어로 정리해 보았어요.
기술 블로그들과 뉴스들을 종종 읽는데, 이것들이 파편화되고 결국 흩어지는 것이 아쉬워졌어요. 그래서 앞으로, TIR에선 Today I Read 로 게시글을 올려보려 해요! 😊
1. 바이브코딩 UI 디자인이 다 비슷해지는 진짜 이유
가이드가 없으면 AI는 안전빵만 선택해요
처음엔 프롬프트만 길게 쓰면 예쁜 디자인이 나오는 줄 알았는데, 글을 읽어보니 핵심은 레퍼런스와 명확한 가이드라인이었습니다.
AI에게 아무 기준도 주지 않으면, AI는 자기가 아는 것 중 가장 실패 확률이 낮은 익숙한 패턴(둥근 카드, 그라데이션, 카드 나열)만 반복해요. 그래서 모든 서비스가 같은 얼굴이 되는 것이었죠.
프롬프트에 꼭 들어가야 하는 6가지 지침
- 누가 사용하는가
- 무엇을 하기 위한 화면인가
- 어떤 느낌이어야 하는가
- 시각적 위계(뭐가 제일 먼저 보일지)
- 디자인 규칙(Apple Minimal, Bento Grid 등)
- 하지 말아야 할 제약(카드 남용 금지 등)
디자인 시스템 만들기 프롬프트처럼 가이드라인을 제대로 세우고 엮어내는 게 핵심이라는 걸 확실히 느꼈어요. 결국 AI한테 맡기더라도 명확한 가이드와 지침을 제시하는 게 제대로 된 UI를 뽑아내는 비결 같아요.
2. 토스 미니앱 가이드에서 배운 UX 일관성
토스 앱 안에서 이질감을 없애는 법
토스 안에서 실행되는 미니앱 가이드를 읽어보았는데, 사용자가 이질감을 느끼지 않도록 전체 톤과 동선을 맞추는 방식이 매우 인상적이었습니다.
- UX 라이팅: 문구는
해요체+능동형+긍정형으로 통일합니다. - 다크패턴 금지: 진입하자마자 팝업 띄우기, 뒤로가기 차단 같은 사용자를 기만하는 UI를 완전 배제합니다.
- 그래픽 요소: 한 화면에 핵심 그래픽 1개만 배치하여 시선을 분산시키지 않습니다.
토스라는 거대한 생태계 안에서 사용자가 이질감을 느끼지 않도록 일관성을 유지해 주는 설계 방식이 되게 좋았어요. 미니앱이어도 사용자가 본체 토스 앱을 그대로 쓰고 있다고 느끼게 만드는 이런 디테일이 실질적인 사용성 차이를 만들어낸다고 해요.
3. 토스가 수백 개 화면을 빠르게 만드는 비결, 디자인 시스템 (TDS)
레고 블록 조립하듯 만드는 UI
디자인 시스템(TDS)이라는 개념을 이번 기회에 제대로 접했는데 생각할수록 신기하네요! 집을 지을 때 벽돌을 매번 새로 굽지 않고 규격품을 사다 쓰듯, 미리 검증된 부품을 가져다 쓰는 방식입니다.
- 토스 특유의 파란색(Primary Color), 글자 크기 규칙부터 버튼, 카드, 상태 표시 배지(Badge) 등 40개 이상의 컴포넌트가 제공돼요.
- “개발자가 UI 고민에 시간 쓰지 말고 로직에 집중하라”는 철학이 깔려 있고, 완성된 레고 부품을 조립하듯 빠르게 구축할 수 있습니다.
- 토스의 웹 및 앱 프론트엔드는 React와 TypeScript / JavaScript를 기반으로 구축되어 있습니다. 토스 프론트엔드 팀은 기술 생태계에 진심이라 자신들이 쓰는 React용 자체 유틸리티나 오픈소스 라이브러리(
slash,@toss/use-funnel등)도 깃허브에 대거 공개해 두고 있답니다.
내 생각
디자인 시스템이라는 개념을 이번 기회에 처음 알게 됐는데 생각했던 것보다 훨씬 신기하네요! 토스처럼 미리 검증된 컴포넌트들을 만들어두면 저도 나만의 UI 부품을 쉽게 조립하고 관리할 수 있겠구나 싶었습니다. 앞으로 저도 블로그와 프로젝트에 유용한 컴포넌트들을 하나씩 구축해 보며 작업해보려 합니다.
정리하며
결국 좋은 프롬프트 지침 → 브랜드 UX 일관성 → 디자인 시스템 재사용성으로 이어지는 완성도 높은 흐름을 배울 수 있었어요.