바이브코딩으로 만든 앱의 UI가 왜 비슷해 보일까요? ChatGPT, Gemini, Claude Code, Codex, Cursor, v0, Lovable, Bolt에서 활용할 수 있는 UI 디자인 프롬프트와 Design System, Apple 스타일, Bento Grid, Swiss, Bauhaus, 화가의 Design DNA 활용법까지 실제 예제와 함께 정리했습니다.

1. 들어가며

왜 바이브코딩으로 만든 앱은 비슷해 보일까?

요즘 ChatGPT, Claude Code, Codex, Cursor, Gemini, v0, Lovable, Bolt 같은 도구를 이용하면 코딩을 전문적으로 배우지 않아도 꽤 빠르게 웹사이트나 앱을 만들 수 있습니다.

저 역시 바이브코딩을 하면서 예전에는 며칠씩 걸렸을 프로토타입을 몇 시간 만에 만드는 경험을 자주 합니다.

로그인 기능을 만들고, 데이터를 연결하고, 검색 기능을 추가하고, 결과물을 PDF로 출력하는 것까지 AI와 대화하면서 빠르게 구현할 수 있습니다.

그런데 어느 정도 앱을 만들어 보다 보면 한 가지 문제가 눈에 들어오기 시작합니다.

기능은 잘 작동하는데 디자인이 묘하게 비슷합니다.

둥근 카드가 여러 개 배치되고 적당한 그림자가 들어갑니다.

파란색이나 보라색 계열의 포인트 컬러가 사용되고 화면 상단에는 큰 제목이 있습니다.

그 아래에는 설명문과 버튼이 있고, 다시 비슷한 크기의 카드가 3개 또는 4개 정도 배치됩니다.

분명 서로 다른 서비스를 만들었는데 어디선가 본 것 같은 화면이 계속 반복됩니다.

저는 이것을 편의상 ‘AI 기본 디자인’이라고 부르겠습니다.

그렇다면 바이브코딩에서도 전문 디자이너가 만든 것처럼 일관성 있고 완성도 높은 UI를 만들려면 어떻게 해야 할까요?

제가 여러 바이브코딩 도구의 공식 가이드와 실제 활용 방법을 살펴보고 직접 여러 방식으로 테스트해보면서 느낀 원칙은 비교적 명확했습니다.

AI에게 디자인 감각을 요구하지 말고, 디자인 의사결정의 기준을 알려줘야 합니다.

이번 글에서는 여기에서 한 단계 더 나아가겠습니다.

단순히 UI를 정돈하는 프롬프트뿐 아니라,

Apple 스타일, Bento Grid, Swiss Style, Bauhaus, Editorial Design, 화가의 조형 원리처럼 특정 디자인 콘셉트를 AI에게 전달하는 방법까지 실제로 복사해서 사용할 수 있는 프롬프트와 함께 정리해보겠습니다.

2. 바이브코딩 디자인의 기본 원칙

2-1. “예쁘게 만들어줘”가 잘 안 되는 이유

많이 사용하는 요청부터 살펴보겠습니다.

“디자인을 좀 더 예쁘게 바꿔줘.”

“전문적인 느낌으로 만들어줘.”

“세련된 UI로 만들어줘.”

사람끼리 이야기한다면 어느 정도 의미가 전달될 수도 있습니다.

하지만 AI 입장에서는 굉장히 애매한 요청입니다.

‘예쁜 디자인’이 무엇인지 판단할 기준이 없기 때문입니다.

결국 AI는 자신이 알고 있는 수많은 웹사이트와 SaaS 서비스 가운데 비교적 실패 확률이 낮은 익숙한 UI 패턴을 선택합니다.

그래서 둥근 카드, 부드러운 그림자, 적당한 그라데이션, 큰 Hero 제목, 카드 3개 또는 4개의 반복, 아이콘과 설명문, 파란색·보라색 계열의 Accent Color 같은 요소가 자주 등장합니다.

예시 UI 디자인-상당히 깔끔하지만 어디서 많이 본 것 같은 디자인입니다.

각각은 문제가 없는 디자인 요소입니다.

문제는 모든 서비스에 비슷한 방식으로 적용될 때 발생합니다.

디자인을 바꾸고 싶다면 AI에게 단순히 결과를 요구하기보다 판단 기준을 제공해야 합니다.

2-2. 먼저 바꿔야 하는 프롬프트

❌ 좋지 않은 프롬프트

“좀 더 세련되게 만들어줘.”

✅ 개선된 프롬프트

현재 기능은 변경하지 말고 UI만 개선해줘.

전체적으로 차분하고 전문적인 B2B SaaS 제품처럼 보이게 해줘.

정보의 중요도에 따라 시각적 위계를 명확하게 만들고,
모든 내용을 카드로 감싸지 말아줘.

큰 제목 → 핵심 정보 → 보조 정보 순으로
자연스럽게 시선이 이동하도록 구성해줘.

색상은 무채색을 기본으로 하고
핵심 CTA와 중요한 상태 정보에만 브랜드 컬러를 사용해줘.

불필요한 gradient와 과도한 shadow는 사용하지 말고,
spacing과 typography를 이용해 영역을 구분해줘.

지나치게 둥근 card,
의미 없는 icon,
장식 목적의 badge 사용도 최소화해줘.

두 프롬프트의 차이는 단순히 길이가 아닙니다.

두 번째 프롬프트에는 디자인 의사결정의 기준이 들어 있습니다.

2-3. 좋은 디자인 프롬프트에 들어가야 할 6가지

바이브코딩에서 디자인 프롬프트를 작성할 때 저는 다음 6가지를 넣는 것을 추천합니다.

1. 누가 사용하는가

2. 무엇을 하기 위한 화면인가

3. 어떤 느낌이어야 하는가

4. 정보의 우선순위는 무엇인가

5. 어떤 디자인 규칙을 사용할 것인가

6. 무엇을 하지 말아야 하는가

예를 들어 장애인 취업지원 업무를 위한 대시보드를 만든다고 해보겠습니다.

단순히

“장애인 취업지원 대시보드를 만들어줘.”

라고 요청하는 것보다 다음처럼 작성하는 편이 훨씬 좋습니다.

프롬프트 예시 — 업무용 대시보드

장애인 고용지원 담당자가 사용하는 업무 대시보드를 디자인해줘.

주 사용자는 복지기관의 실무자이며
데스크톱 환경에서 하루에도 여러 번 사용한다.

이 화면의 가장 중요한 목적은
담당 이용자의 취업 진행 상황과
오늘 처리해야 할 업무를 빠르게 파악하는 것이다.

디자인 방향은 공공기관 행정시스템처럼 지나치게 딱딱하지 않으면서도
전문적이고 신뢰감 있게 구성한다.

화면의 정보 우선순위는 다음과 같다.

1. 오늘 처리할 업무
2. 취업 진행 현황
3. 지원이 필요한 이용자
4. 최근 상담 기록
5. 전체 통계

모든 정보를 동일한 크기의 카드로 만들지 않는다.

중요한 정보는
크기,
위치,
font weight,
spacing을 이용해 강조한다.

색상은 상태와 의미를 전달할 때만 사용한다.

장식적인 gradient,
과도한 shadow,
지나치게 둥근 card,
불필요한 icon은 최소화한다.

처음 보는 직원도
5초 안에 어디를 확인해야 하는지 이해할 수 있도록
Visual Hierarchy를 설계한다.

실제 위 프롬프트로 만든 UI 디자인

3. 기본 UI 퀄리티를 높이는 프롬프트

3-1. 시각적 위계 개선

좋은 UI를 보면 사용자는 설명서를 읽지 않아도 어디부터 봐야 할지 대략 알 수 있습니다.

이것을 Visual Hierarchy, 시각적 위계라고 합니다.

중요한 정보는 강하게 보이고 덜 중요한 정보는 자연스럽게 뒤로 물러나야 합니다.

프롬프트 — Visual Hierarchy 개선

현재 화면을 Senior UX/UI Designer 관점에서 분석해줘.

먼저 사용자가 이 화면에 들어왔을 때

가장 먼저 봐야 할 정보,
두 번째로 봐야 할 정보,
참고 수준의 정보

를 구분해줘.

그다음 이 우선순위가 화면에서 자연스럽게 드러나도록

font size
font weight
spacing
position
color contrast
group spacing
CTA emphasis

를 조정해줘.

중요하지 않은 요소가
핵심 정보보다 시각적으로 강하게 보이지 않도록 한다.

모든 요소를 강조하지 말고
강조해야 할 요소를 의도적으로 제한한다.

기존 기능과 데이터 구조는 변경하지 않는다.

실제 위에 생성한 디자인에 시각적 위계 개선을 적용한 디자인

3-2. ‘카드 지옥’에서 탈출하기

AI가 만든 대시보드에서 특히 자주 나타나는 것이 모든 것을 카드로 만드는 것입니다.

카드 안에 카드가 있고 그 안에 다시 작은 카드가 들어가기도 합니다.

카드는 좋은 UI Component이지만 모든 정보를 카드로 만들면 정보 구조가 오히려 흐려집니다.

프롬프트 — Card 남용 제거

현재 UI에서 Card Component가 과도하게 사용되고 있는지 검토해줘.

모든 정보를 독립적인 카드로 만들지 말고
서로 관련된 정보는 하나의 Visual Group으로 묶어줘.

다음 원칙으로 수정한다.

- 카드가 반드시 필요한 독립 정보에만 border 또는 background 사용
- 단순한 정보 구분은 whitespace와 typography로 처리
- nested card는 최대한 제거
- 동일한 중요도의 카드가 지나치게 반복되지 않도록 구성
- border와 shadow를 동시에 남용하지 않음
- section → group → item의 계층 구조가 보이도록 구성

기능은 변경하지 말고
정보 구조와 UI만 개선해줘.

3-3. AI가 만든 것 같은 디자인 줄이기

프롬프트 — Anti AI-looking UI

현재 화면에서
AI가 자동 생성한 UI처럼 보이는 디자인 패턴을 찾아줘.

특히 다음 항목을 점검한다.

- 지나치게 많은 rounded card
- 의미 없는 gradient
- 과도한 shadow
- 모든 영역을 box로 구분하는 방식
- 불필요하게 큰 hero 영역
- 지나치게 많은 badge와 pill UI
- 비슷한 크기의 카드가 반복되는 dashboard layout
- 불필요한 icon 사용
- 과도하게 넓은 whitespace
- 지나치게 큰 heading
- 장식 목적의 color 사용

발견된 문제를 먼저 간단히 설명한 다음 수정해줘.

단,
단순히 모든 효과를 제거해서 밋밋하게 만들지는 않는다.

대신

Typography
Spacing
Alignment
Contrast
Information Hierarchy

를 이용해 완성도를 높인다.

기존 기능과 사용자 흐름은 변경하지 않는다.

3-4. Design System 만들기

앱을 계속 수정하다 보면 첫 번째 화면의 버튼과 두 번째 화면의 버튼이 달라지고, 카드의 Radius와 Padding도 제각각 달라질 수 있습니다.

이때 필요한 것이 Design System입니다.

프롬프트 — Design System 구축

코드를 수정하기 전에 
현재 프로젝트의 UI를 분석하고
이 프로젝트에서 사용할 최소한의 Design System을 정의해줘.

다음 항목을 포함한다.

Typography

Display
H1
H2
H3
Body
Caption

Color

Background
Surface
Primary
Secondary
Text Primary
Text Secondary
Border
Success
Warning
Error

Spacing

4px 또는 8px 기반의
consistent spacing scale

Components

Button
Input
Select
Card
Table
Modal
Badge
Navigation

각 Component의

radius
padding
border
shadow
font
hover
focus
disabled

규칙도 통일한다.

앞으로 새로운 UI를 만들 때
임의의 style 값을 계속 추가하지 말고
이 Design System을 우선적으로 재사용한다.

4. AI에게 디자인을 먼저 생각하게 만드는 방법

4-1. AI 디자인 인터뷰

우리가 디자인을 정확하게 설명하기 어렵다면 AI에게 먼저 질문하게 하면 됩니다.

프롬프트 — Design Interview

아직 코드를 작성하지 마.

너는 지금부터
이 프로젝트의 Senior Product Designer 역할을 맡는다.

내가 만들고 있는 앱의 디자인 방향을 결정하기 위해
필요한 질문을 먼저 해줘.

다음 내용을 파악할 수 있도록 질문한다.

- 주요 사용자
- 사용 환경
- 가장 중요한 사용자 행동
- 정보 우선순위
- 원하는 분위기
- 피하고 싶은 디자인
- 브랜드 컬러
- 접근성 요구사항
- Mobile / Desktop 우선순위
- 참고하고 싶은 서비스

질문은 한 번에 너무 많이 하지 말고
디자인 방향을 결정하는 데 중요한 질문부터 해줘.

답변이 끝나면
이를 Design Brief로 정리해줘.

내가 승인한 이후에만 UI를 수정한다.

4-2. 어떤 디자인이 어울릴지 AI에게 제안받기

프롬프트 — Design Direction Generator

아직 코드를 수정하지 마.

너는 Senior Product Designer이자 Art Director다.

현재 프로젝트를 분석해.

먼저 다음을 파악한다.

1. 주요 사용자
2. 서비스 목적
3. 가장 중요한 행동
4. 주요 콘텐츠
5. 정보량
6. 사용 환경
7. 주 사용 기기
8. Accessibility 요구사항

그다음 이 서비스에 적합한
서로 확실히 다른 5개의 Visual Design Direction을 제안해줘.

예:

Apple-inspired Minimal
Swiss Functional
Bento Grid
Bauhaus
Editorial
Neo-Brutalism
Human-centered Warm UI

이 예시에 제한될 필요는 없다.

각 Direction마다 다음을 설명한다.

Design Concept
Visual Keywords
Typography
Color Strategy
Layout System
Spacing
Component Style
Border / Radius / Shadow
Recommended UI Pattern
이 프로젝트에 적합한 이유
단점
주의할 점

그리고 각각을 10점 만점으로 평가한다.

Usability
Accessibility
Visual Identity
Professionalism
Implementation Difficulty

마지막으로
이 프로젝트에 가장 적합한 Design Direction 하나를 추천하고
그 이유를 설명한다.

아직 코드를 수정하지 말고
내가 Design Direction을 선택할 때까지 기다려.

5. 레퍼런스를 이용해 디자인 방향 잡기

5-1. 스크린샷과 레퍼런스 이미지 활용

글만으로 디자인을 전달하는 데는 한계가 있습니다.

마음에 드는 화면을 캡처해서 AI에게 보여주면 훨씬 정확한 결과를 얻을 수 있습니다.

다만 그대로 복제하게 하기보다는 어떤 요소를 참고할지 분리해서 지시하는 것이 좋습니다.

프롬프트 — Reference Image 활용

첨부한 이미지를 그대로 복제하지 마.

다음 Design Principles만 참고해줘.

- 전체적인 정보 밀도
- Typography Hierarchy
- Section 간 Spacing
- Navigation 구조
- CTA를 강조하는 방식
- Card와 Background를 구분하는 방식
- 콘텐츠 정렬 방식

Color,
Logo,
Text,
Brand Identity

는 현재 프로젝트의 것을 유지한다.

Reference의 디자인 원리를
현재 앱의 목적과 사용자에게 맞게 재해석해서 적용해줘.

5-2. 여러 유명 서비스의 장점을 혼합하기

프롬프트 — Linear + Notion + Stripe

현재 서비스를
Modern Productivity SaaS 스타일로 개선해줘.

Linear의 절제된 정보 구조,
Notion의 콘텐츠 가독성,
Stripe Dashboard의 명확한 Data Hierarchy를 참고한다.

하지만 어느 하나의 서비스를 그대로 복제하지 않는다.

세 서비스에서 공통적으로 발견되는 다음 원칙만 적용한다.

- 제한된 color palette
- 명확한 typography hierarchy
- 높은 information density에서도 유지되는 readability
- 일관된 spacing
- 절제된 border와 shadow
- 명확한 interactive state
- 빠르게 이해할 수 있는 navigation

현재 서비스의 정체성과 기능은 유지한다.

6. 디자인 콘셉트별 실전 예시

앞에서 살펴본 것처럼 AI에게 단순히

“세련되게 만들어줘.”

라고 요청하는 것보다 구체적인 Design Direction을 정해주는 것이 훨씬 좋은 결과를 만들 수 있습니다.

그런데 여기서 또 하나의 문제가 생깁니다.

어떤 디자인 콘셉트를 선택해야 할까요?

모든 서비스에 Apple 스타일이 어울리는 것은 아닙니다.

업무용 대시보드라면 Swiss Style처럼 정보 구조가 명확한 디자인이 잘 맞을 수 있고, 교육이나 복지서비스라면 Human-centered Warm UI가 더 적합할 수 있습니다.

사업성과를 소개하는 홈페이지라면 Scrollytelling이 효과적일 수 있고, AI나 기술 프로젝트를 소개한다면 Retrofuturism처럼 조금 더 강한 개성을 주는 방법도 있습니다.

따라서 디자인 콘셉트를 선택할 때는 단순히

“어떤 디자인이 예쁜가?”

보다

“이 서비스를 사용하는 사람과 목적에 어떤 디자인이 가장 적합한가?”

를 먼저 생각하는 것이 좋습니다.

그리고 디자인 이름만 보고 선택하는 것도 생각보다 어렵습니다.

그래서 이번 글에서 소개하는 디자인 콘셉트를 실제 웹페이지에 적용한 모습을 직접 비교해볼 수 있도록 Vibe Coding Design Lab도 함께 만들었습니다.

각 디자인이 실제 웹 인터페이스에서 어떻게 보이는지 확인하고, 마음에 드는 디자인을 선택한 뒤 해당 디자인을 바이브코딩에 적용할 수 있는 프롬프트도 확인할 수 있습니다.

아래에서는 프롬프트 자체보다는 각 디자인이 어떤 특징을 가지고 있고, 어떤 서비스에 사용하면 좋은지​를 중심으로 살펴보겠습니다.

6-1. 정돈되고 전문적인 디자인

업무용 프로그램, 관리자 페이지, 생산성 도구처럼 정보를 빠르고 정확하게 파악하는 것이 중요한 서비스라면 화려한 디자인보다 정보 구조와 가독성이 중요합니다.

이런 경우에는 Apple-inspired Minimal, Swiss International Style, Barely-there UI처럼 시각적인 장식을 줄이고 정보의 우선순위를 명확하게 만드는 방향이 잘 어울립니다.

Progressive Disclosure처럼 복잡한 정보를 단계적으로 보여주는 UX 원칙을 함께 적용하는 것도 효과적입니다.

① Apple-inspired Premium Minimal

Apple 스타일이라고 하면 흔히 흰 배경, 큰 글씨, 넓은 여백, 둥근 버튼 정도를 떠올리기 쉽습니다.

하지만 실제로 참고할 만한 부분은 표면적인 모양보다 중요한 것만 남기고 사용자의 시선을 핵심 콘텐츠에 집중시키는 방식입니다.

Apple-inspired Minimal에서 가장 중요한 디자인 요소는 화려한 장식이 아니라 Typography, Spacing, Alignment, Visual Hierarchy​입니다.

제목은 크고 명확하게 보여주되 설명은 짧게 가져가고, 중요한 CTA만 Accent Color로 강조합니다.

Card, Border, Shadow를 이용해 모든 영역을 구분하기보다 충분한 여백과 정렬을 통해 콘텐츠 간의 관계를 보여줍니다.

특히 화면 전체를 꽉 채우기보다 일부러 비어 있는 공간을 충분히 남기는 Negative Space가 중요한 역할을 합니다.

그래서 제대로 적용하면 일반적인 SaaS Dashboard보다는 하나의 완성도 높은 Consumer Technology Product처럼 느껴집니다.

이런 경우에 잘 어울립니다

제품이나 서비스 자체를 고급스럽게 보여주고 싶을 때 적합합니다.

SaaS, 제품 소개 페이지, 기관 홈페이지, 포트폴리오, 비교적 간결한 업무도구처럼 콘텐츠가 많지 않고 핵심 메시지가 명확한 서비스에 특히 잘 맞습니다.

반대로 한 화면에 수십 개의 데이터와 조작 기능을 동시에 보여줘야 하는 복잡한 관리자 시스템이라면 Apple Minimal만으로 해결하기보다 Swiss Style이나 Progressive Disclosure를 함께 사용하는 편이 좋습니다.

핵심 키워드

Premium · Calm · Precise · Minimal · Focused

② Swiss International Functional UI

정보가 많은 업무 시스템에서는 Swiss International Typographic Style이 상당히 좋은 선택입니다.

Swiss Style의 핵심은 단순히 흰색 배경에 검은 글씨를 사용하는 것이 아닙니다.

가장 중요한 것은 Grid, Typography, Alignment를 이용해 복잡한 정보를 질서 있게 정리하는 것​입니다.

화면의 제목, 표, 숫자, 버튼, 설명문이 모두 하나의 보이지 않는 Grid 위에서 정렬되고, 글자의 크기와 굵기만으로도 정보의 중요도를 구분합니다.

그래서 Card를 많이 사용하지 않아도 정보 구조가 선명하게 보입니다.

또한 제한된 색상을 사용하기 때문에 데이터가 많아져도 화면이 비교적 안정적으로 유지됩니다.

특히 큰 숫자와 짧은 Label을 적극적으로 활용하면 별도의 장식 없이도 상당히 강한 그래픽 효과를 만들 수 있습니다.

예를 들어 단순히 통계 Card 세 개를 만드는 대신,

12,345 / GENERATED

42 / COMMITS

98% / SUCCESS

처럼 Typography 자체를 디자인 요소로 활용할 수 있습니다.

이런 경우에 잘 어울립니다

업무 대시보드, 관리자 시스템, 통계 화면, 이용자 목록, 상담기록, 일정관리, 데이터 테이블처럼 정보량이 많고 정확한 비교와 탐색이 중요한 화면에 강합니다.

특히 공공기관이나 업무시스템을 현대적으로 개선하고 싶지만 지나치게 화려하거나 소비자용 앱처럼 보이게 하고 싶지 않을 때 좋은 선택입니다.

핵심 키워드

Structured · Rational · Precise · Editorial · Functional

③ Barely-there UI

Barely-there UI는 이름 그대로 인터페이스 자체의 존재감을 최대한 줄이는 디자인입니다.

사용자가 버튼이나 Card를 바라보게 만드는 것이 아니라 자신이 작성하고 있는 글, 보고 있는 데이터, 수행하고 있는 작업 자체에 집중하게 만드는 것​이 목표입니다.

따라서 불필요한 Border, Background, Toolbar, Card를 적극적으로 제거합니다.

정보의 구분은 Typography와 Whitespace가 담당하고, 항상 화면에 있을 필요가 없는 기능은 Hover, Focus, Selection처럼 필요한 순간에만 나타날 수 있습니다.

처음 보면 매우 단순해 보이지만 제대로 설계하기는 오히려 어렵습니다.

너무 많은 것을 숨기면 사용자가 기능 자체를 발견하지 못할 수 있기 때문입니다.

그래서 Barely-there UI의 핵심은 단순히 UI를 없애는 것이 아니라 Visual Simplicity와 Discoverability 사이의 균형입니다.

이런 경우에 잘 어울립니다

문서 작성 도구, 메모, 글쓰기 서비스, 생산성 앱, 콘텐츠 관리 도구처럼 사용자가 오랫동안 한 화면에서 작업하는 서비스에 잘 어울립니다.

이미 바이브코딩으로 만든 앱에 Card, Button, Toolbar가 너무 많아 복잡하게 느껴질 때 디자인을 정리하는 방법으로도 유용합니다.

핵심 키워드

Quiet · Invisible · Focused · Efficient · Calm

④ Progressive Disclosure

Progressive Disclosure는 엄밀하게 말하면 Visual Style이라기보다는 정보를 보여주는 UX 전략입니다.

하지만 바이브코딩에서는 상당히 중요한 개념입니다.

AI에게 여러 기능을 추가해달라고 요청하다 보면 어느 순간 모든 정보와 버튼이 한 화면에 펼쳐지는 경우가 많습니다.

Progressive Disclosure는 이를 해결하기 위해 정보를 크게 세 단계로 생각합니다.

Primary는 지금 바로 확인하거나 자주 사용하는 정보,

Secondary는 필요하지만 항상 볼 필요는 없는 정보,

Advanced는 특정 상황에서만 사용하는 전문 기능입니다.

사용자가 처음 화면에 들어왔을 때는 Primary 정보에 집중하도록 하고, Secondary와 Advanced 기능은 Tab, Expand, Detail Panel, Drawer, Advanced Settings 등의 방식으로 단계적으로 접근하게 만듭니다.

중요한 점은 기능을 단순히 숨기는 것이 아닙니다.

사용자가 “더 자세한 기능이 여기에 있다.”​는 것을 알 수 있어야 합니다.

이런 경우에 잘 어울립니다

기능이 많은 업무시스템, 관리자 화면, 복잡한 Form, 설정 페이지, 데이터 분석 도구처럼 기능은 많지만 모든 기능을 항상 보여줄 필요는 없는 서비스에 적합합니다.

특히 Swiss Style + Progressive Disclosure 조합은 정보가 많은 업무용 프로그램을 정리할 때 상당히 효과적입니다.

Swiss Style이 화면의 질서를 만들고 Progressive Disclosure가 정보량을 조절해주기 때문입니다.

핵심 키워드

Clear · Controlled · Focused · Layered · Understandable

6-2. 친근하고 표현력 있는 디자인

모든 서비스가 차분하고 절제되어야 하는 것은 아닙니다.

교육, 복지, 의료, 상담, 생활지원 서비스처럼 사용자가 느끼는 감정과 접근성도 중요한 서비스라면 조금 더 친근하고 표현력 있는 UI가 잘 어울릴 수 있습니다.

① Material 3 Expressive

Material 3 Expressive는 Google의 Material Design에서 발전한 디자인 방향으로, 기존의 정돈된 Material UI보다 Shape, Color, Typography, Motion을 좀 더 적극적으로 활용하는 것이 특징​입니다.

그렇다고 단순히 화면을 화려하게 만드는 것은 아닙니다.

중요한 버튼은 조금 더 눈에 띄는 형태와 크기를 사용하고, 주요 정보와 일반 정보를 시각적으로 확실하게 구분하며, 상태 변화에는 자연스러운 Motion을 사용합니다.

Apple-inspired Minimal이

“불필요한 것을 줄여 중요한 것을 보여준다.”

에 가깝다면,

Material 3 Expressive는

“중요한 것을 더 분명하고 생동감 있게 표현한다.”

라고 생각하면 이해하기 쉽습니다.

또한 모든 Component를 동일한 모양으로 만들기보다 중요도에 따라 Shape과 Scale을 다르게 사용할 수 있다는 것도 특징입니다.

이런 경우에 잘 어울립니다

모바일 앱, 교육서비스, 생활서비스, 복지서비스처럼 다양한 연령과 디지털 숙련도를 가진 일반 사용자가 이용하는 서비스에 잘 어울립니다.

화면이 너무 딱딱하거나 행정시스템처럼 느껴지는 것을 피하면서도 명확한 사용성을 유지하고 싶을 때 좋은 선택입니다.

핵심 키워드

Expressive · Friendly · Dynamic · Clear · Accessible

② Human-centered Warm UI

Human-centered Warm UI는 특정 회사의 디자인 스타일이라기보다 사람에게 편안함과 신뢰감을 주는 것을 목표로 하는 디자인 방향입니다.

특히 복지·교육·의료·상담 분야처럼 서비스 이용자가 긴장하거나 어려움을 느낄 수 있는 환경에서 유용합니다.

핵심은 사용자가 화면을 보고

“멋있다.”

라고 느끼게 하는 것보다

“편안하다.”

“쉽다.”

“어디를 눌러야 할지 알겠다.”

라고 느끼게 하는 것입니다.

Warm Neutral Color, 편안한 Typography, 충분한 여백, 부드러운 Shape을 사용할 수 있지만 어린이용 앱처럼 지나치게 귀엽게 만드는 것은 피합니다.

Illustration과 Icon 역시 단순한 장식보다 이해를 돕는 역할을 해야 합니다.

이런 경우에 잘 어울립니다

복지서비스, 교육서비스, 의료, 상담, 고령자 서비스, 장애인 지원서비스, 공공서비스처럼 사용자의 신뢰와 심리적 편안함이 중요한 서비스에 특히 적합합니다.

핵심 키워드

Friendly · Safe · Calm · Trustworthy · Human

③ Bento Grid

Bento Grid는 도시락 상자처럼 서로 다른 크기의 영역을 조합해 화면을 구성하는 Layout 방식입니다.

최근 웹과 앱에서 워낙 많이 사용되면서 하나의 스타일처럼 느껴지기도 하지만, 실제로는 Information Hierarchy를 표현하는 Layout System으로 이해하는 편이 좋습니다.

가장 중요한 정보는 큰 영역을 차지하고, 부가 정보는 작은 영역에 배치합니다.

이렇게 하면 사용자가 별도의 설명을 읽지 않아도 어떤 정보가 중요한지 영역의 크기만으로 어느 정도 이해할 수 있습니다.

다만 모든 영역에 Gradient, Icon, Shadow를 넣어 화려한 Bento Card를 만들면 오히려 다시 전형적인 AI 생성 UI처럼 보일 수 있습니다.

따라서 Bento의 핵심은 Card가 아니라 서로 다른 크기와 밀도를 이용해 화면에 Rhythm을 만드는 것입니다.

이런 경우에 잘 어울립니다

Dashboard, 서비스 Home, 개인화 화면, 제품 기능 소개, 포트폴리오처럼 한 화면에서 성격이 다른 여러 정보를 동시에 보여줘야 하는 서비스에 적합합니다.

다만 데이터가 매우 많고 반복적인 Table과 List가 중심이라면 Swiss Style이 더 적합할 수 있습니다.

핵심 키워드

Modular · Hierarchical · Visual · Flexible · Scannable

6-3. 강한 개성이 필요한 디자인

모든 서비스가 얌전하고 정돈된 SaaS처럼 보여야 하는 것은 아닙니다.

캠페인, 전시, 행사, AI 프로젝트, 포트폴리오처럼 첫인상과 시각적 정체성이 중요한 서비스라면 조금 더 강한 Design Direction을 선택할 수 있습니다.

① Bauhaus Functional UI

Bauhaus는 기하학적인 도형, 강한 Typography, 제한된 색상, 기능 중심의 구성으로 잘 알려져 있습니다.

하지만 UI에서 활용할 때 화면을 그대로 Bauhaus 포스터처럼 만드는 것은 좋은 접근이 아닙니다.

오히려 참고할 부분은 유명한 원칙인

Form follows function.

즉, 형태는 기능을 따라야 한다는 생각입니다.

Circle, Square, Line 같은 단순한 Geometry와 강한 Grid를 활용하면서도 각각의 시각적 요소가 기능이나 정보의 관계를 설명하도록 만듭니다.

Primary Color 역시 장식처럼 흩뿌리는 것이 아니라 중요한 영역에 제한적으로 사용하면 상당히 강한 Visual Identity를 만들 수 있습니다.

이런 경우에 잘 어울립니다

포트폴리오, 디자인 프로젝트, 문화·예술 서비스, 전시 페이지, 브랜드 사이트처럼 기능성은 유지하면서도 개성 있는 첫인상이 필요한 서비스에 잘 맞습니다.

핵심 키워드

Geometric · Functional · Bold · Rational · Experimental

② Neo-Brutalism

AI가 만드는 전형적인 SaaS UI와 가장 빠르게 다른 인상을 만들 수 있는 디자인 가운데 하나가 Neo-Brutalism입니다.

부드러운 Shadow와 둥근 Card 대신 강한 Border, 높은 Contrast, Bold Typography, 단순한 Geometry​를 적극적으로 사용합니다.

조금 거칠고 직접적으로 보이지만 그만큼 기억에 남습니다.

다만 Brutalism을 너무 극단적으로 적용하면 사용성이 떨어질 수 있기 때문에 실제 서비스에서는 조금 정돈된 Modern Neo-Brutalism으로 적용하는 것이 좋습니다.

이런 경우에 잘 어울립니다

캠페인, 행사, 청년 대상 서비스, 포트폴리오, 브랜드 페이지처럼 다른 사이트와 확실히 구분되는 개성이 필요할 때 유용합니다.

반대로 장시간 사용하는 복잡한 행정 시스템이나 보수적인 기업용 서비스에는 신중하게 사용하는 편이 좋습니다.

핵심 키워드

Bold · Direct · Raw · Memorable · Functional

③ Organic / Anti-grid

AI로 웹사이트를 만들면 모든 요소가 너무 정확하게 Grid에 맞고 완벽하게 대칭적인 경우가 많습니다.

Organic / Anti-grid는 이러한 느낌을 일부러 깨뜨립니다.

비대칭 배치, 곡선, Overlap, 서로 다른 Content Width, 예상하지 못한 Negative Space 등을 사용해 조금 더 인간이 직접 구성한 듯한 Rhythm을 만듭니다.

하지만 이름 그대로 Grid를 완전히 버리는 것은 아닙니다.

본문, Navigation, Form처럼 사용성이 중요한 영역은 여전히 Grid를 유지하고, Hero나 Visual Section에서만 Controlled Asymmetry를 사용하는 것이 좋습니다.

즉,

무질서하게 만드는 것이 아니라 의도적으로 질서를 깨는 디자인입니다.

이런 경우에 잘 어울립니다

Landing Page, 문화·예술 프로젝트, 브랜드 사이트, 캠페인, 포트폴리오처럼 자유로운 시각적 표현이 중요한 서비스에 적합합니다.

핵심 키워드

Organic · Asymmetric · Human · Unexpected · Expressive

④ Tactile / Analog UI

생성형 AI가 만든 화면은 때때로 너무 매끈하고 완벽합니다.

Gradient도 깨끗하고, Border도 정확하고, 모든 Surface가 디지털적으로 완벽하기 때문에 오히려 비슷하게 느껴질 수 있습니다.

Tactile / Analog UI는 여기에 종이, Grain, 인쇄물, 재료의 질감처럼 실제 물성을 연상시키는 요소​를 조금 추가합니다.

미세한 Paper Texture나 Grain, Print-inspired Typography를 사용하면 화면에 조금 더 인간적인 느낌을 줄 수 있습니다.

다만 질감을 과하게 사용하면 오래된 홈페이지나 Scrapbook처럼 보일 수 있기 때문에 Background나 특정 Visual 영역에만 제한적으로 사용하는 것이 중요합니다.

이런 경우에 잘 어울립니다

문화, 교육, 출판, 전시, 콘텐츠, 브랜드 프로젝트처럼 디지털 화면에서도 손으로 만든 듯한 감각이나 정서적 분위기가 필요한 서비스에 잘 맞습니다.

핵심 키워드

Human · Tactile · Warm · Crafted · Imperfect

⑤ Retrofuturism

Retrofuturism은 쉽게 말하면 과거 사람들이 상상했던 미래를 현대적으로 다시 표현하는 디자인입니다.

1970~1990년대의 Computer Interface, Digital Display, Technical Grid, 초기 미래주의 그래픽 등을 현대적인 UI와 결합합니다.

Monochrome Background에 제한적인 Neon Accent, Geometric Typography, Technical Diagram 등을 사용하면 일반적인 AI 서비스와 상당히 다른 분위기를 만들 수 있습니다.

다만 모든 요소에 Glow와 Neon을 사용하면 금방 Cyberpunk 게임 UI처럼 보일 수 있습니다.

따라서 Retro Element는 Hero나 Brand Identity에 집중하고 실제 Navigation과 Content 영역은 현대적인 사용성을 유지하는 것이 좋습니다.

이런 경우에 잘 어울립니다

AI 서비스, 미래기술 프로젝트, 디지털 전환, 기술 전시, 실험적 포트폴리오처럼 Technology 자체가 콘텐츠의 일부인 서비스에 특히 잘 맞습니다.

핵심 키워드

Retro · Technical · Futuristic · Experimental · Optimistic

6-4. 콘텐츠를 돋보이게 만드는 디자인

어떤 서비스에서는 UI 자체보다 글, 사진, 데이터, 이야기​가 주인공이어야 합니다.

뉴스룸, 블로그, 사업성과 페이지, 제품소개, 연구성과처럼 콘텐츠 전달이 중요한 경우에는 다음과 같은 방향을 고려할 수 있습니다.

① Editorial Design

Editorial Design은 잡지와 신문의 편집 디자인 원리를 Web Interface로 가져오는 방식입니다.

가장 중요한 디자인 요소는 Card나 Icon이 아니라 Typography와 Layout Rhythm입니다.

Headline, Lead, Body, Caption을 명확하게 구분하고, 모든 Section을 똑같은 폭으로 만들지 않습니다.

어떤 영역은 넓게, 어떤 영역은 좁게 사용하고 Image와 Text를 비대칭적으로 배치하면서 실제 잡지를 넘기는 것 같은 리듬을 만듭니다.

특히 AI가 자주 만드는

Hero → Card 3개 → Card 3개 → CTA

같은 반복적인 구조에서 벗어나고 싶을 때 상당히 효과적입니다.

이런 경우에 잘 어울립니다

블로그, 뉴스룸, 기관 홈페이지, 연구성과, 사업보고서, 인터뷰, 포트폴리오처럼 읽을거리 자체가 중심인 서비스에 적합합니다.

핵심 키워드

Editorial · Typographic · Narrative · Sophisticated · Content-first

② Kinetic Typography

Kinetic Typography는 이미지보다 글자 자체를 주요 Visual Element로 사용하는 방식입니다.

큰 제목, 예상하지 못한 줄바꿈, Font Weight 변화, Variable Font와 Motion을 조합해 상당히 강한 첫인상을 만들 수 있습니다.

특히 Landing Page Hero에서 잘 사용하면 별도의 3D Graphic이나 화려한 Illustration 없이도 브랜드의 성격을 강하게 보여줄 수 있습니다.

다만 계속 움직이는 글자는 읽기 어렵고 피로감을 줄 수 있습니다.

따라서 Hero나 중요한 Section처럼 범위를 제한해서 사용하는 것이 좋습니다.

이런 경우에 잘 어울립니다

제품 Landing Page, 브랜드 사이트, 캠페인, 행사, 포트폴리오처럼 첫 화면의 메시지가 매우 중요한 서비스에 적합합니다.

Form, Dashboard, 긴 본문 등에는 중심 디자인으로 사용하지 않는 편이 좋습니다.

핵심 키워드

Bold · Typographic · Dynamic · Editorial · Memorable

③ Scrollytelling

Scrollytelling은 Scroll + Storytelling을 결합한 방식입니다.

사용자가 페이지를 아래로 이동하면 내용이 하나씩 등장하면서 하나의 이야기가 자연스럽게 진행됩니다.

예를 들어 어떤 사업의 성과를 소개한다면

문제 → 배경 → 사업 시작 → 진행 과정 → 핵심 데이터 → 참여자의 이야기 → 성과 → 다음 계획

순서로 구성할 수 있습니다.

Text Reveal, Image Transition, Data Visualization 같은 Motion을 함께 사용하면 일반적인 보고서보다 훨씬 몰입감 있게 내용을 전달할 수 있습니다.

중요한 것은 사용자의 Scroll을 억지로 제어하지 않는 것입니다.

사용자가 원하는 속도로 자연스럽게 읽을 수 있어야 하고, Animation이 없어도 전체 내용을 이해할 수 있어야 합니다.

이런 경우에 잘 어울립니다

사업성과 페이지, 제품 소개, 기관 연혁, 연구성과, 프로젝트 소개, 포트폴리오, 발표용 웹페이지처럼 하나의 흐름을 따라 내용을 설명해야 하는 콘텐츠에 매우 적합합니다.

핵심 키워드

Narrative · Immersive · Sequential · Visual · Story-driven

6-5. 사용자 참여를 높이는 디자인

디자인의 역할은 정보를 보여주는 것에서 끝나지 않습니다.

사용자가 자신이 얼마나 진행했는지 이해하고, 다음 행동을 자연스럽게 이어가도록 만드는 것도 중요한 역할입니다.

교육, 훈련, 온보딩처럼 과정과 성취가 중요한 서비스에서는 다음 디자인 방향을 활용할 수 있습니다.

① Gamified UI

Gamification이라고 하면 점수, Badge, Ranking부터 떠올리기 쉽습니다.

하지만 모든 행동을 게임처럼 만드는 것은 오히려 사용자를 피곤하게 할 수 있습니다.

좋은 Gamified UI의 핵심은 경쟁이 아니라 Progress를 보여주는 것입니다.

현재 몇 단계까지 완료했는지,

앞으로 몇 단계가 남았는지,

어떤 Milestone을 달성했는지,

다음 목표는 무엇인지

쉽게 알 수 있도록 만들어줍니다.

Progress Bar, Completion State, Milestone, 작은 Celebration 등을 적절히 사용하면 사용자가 자신의 진행 상황을 더 쉽게 이해할 수 있습니다.

이런 경우에 잘 어울립니다

교육, 직업훈련, 학습관리, 신규 사용자 Onboarding, 자기계발, Habit Tracker처럼 진행 과정 자체가 중요한 서비스에 잘 맞습니다.

반대로 단순 행정 업무나 반복적인 데이터 입력 업무에 무리하게 Badge와 Point를 붙일 필요는 없습니다.

핵심 키워드

Progress · Achievement · Motivation · Feedback · Encouraging

② Purposeful Micro-interactions

모든 앱에 적용해볼 만한 디자인 요소가 하나 있다면 저는 Micro-interaction도 빼놓기 어렵다고 생각합니다.

버튼을 눌렀을 때,

파일이 저장되었을 때,

업로드가 진행될 때,

상태가 바뀌었을 때,

오류가 발생했을 때

작은 Motion이나 Feedback을 통해 사용자가 지금 무슨 일이 일어나고 있는지 알려주는 것입니다.

좋은 Micro-interaction은 단순히 화면을 예쁘게 움직이는 Animation과 다릅니다.

사용자에게 항상 다음 세 가지 중 하나에 답해야 합니다.

무슨 일이 일어났는가?

지금 무엇이 진행되고 있는가?

다음에 무엇을 할 수 있는가?

잘 적용하면 눈에 잘 띄지 않지만 앱을 사용할 때 느껴지는 완성도가 크게 달라집니다.

이런 경우에 잘 어울립니다

사실상 거의 모든 앱에 적용할 수 있습니다.

특히 Form, 업무시스템, 교육서비스, 모바일 앱처럼 클릭·저장·변경·완료 같은 사용자 행동이 많은 서비스에서 효과적입니다.

핵심 키워드

Responsive · Clear · Immediate · Subtle · Reassuring

6-6. 시각 효과로 제한적으로 활용할 디자인

마지막으로 하나의 전체 Design System으로 적용하기보다 특정 영역의 시각적 강조를 위해 사용하는 편이 좋은 디자인 효과도 있습니다.

대표적인 것이 Glassmorphism입니다.

① Glassmorphism

Glassmorphism은 Blur와 Transparency를 이용해 유리 같은 반투명 Surface를 만드는 방식입니다.

잘 사용하면 화면에 깊이와 Layer를 느끼게 할 수 있습니다.

특히 Background 위에 떠 있는 Navigation, Modal, Selected Control처럼 앞뒤 관계가 중요한 UI에 잘 어울립니다.

문제는 AI에게

“Glassmorphism으로 만들어줘.”

라고 요청하면 모든 Card를 반투명하게 만들어버리는 경우가 많다는 점입니다.

이렇게 되면 Text Contrast가 떨어지고 화면이 복잡해지며 데이터가 많은 서비스에서는 가독성도 나빠질 수 있습니다.

따라서 Glassmorphism은 전체 디자인 스타일보다는 Visual Emphasis Technique으로 생각하는 것이 좋습니다.

이런 경우에 잘 어울립니다

Landing Page의 Hero, Floating Navigation, Modal, Media Player, Selected Panel처럼 특정 영역을 Background와 분리해서 보여줘야 할 때 효과적입니다.

Table, 긴 Form, 긴 본문, 데이터가 많은 Dashboard 전체에는 과도하게 적용하지 않는 편이 좋습니다.

핵심 키워드

Layered · Translucent · Atmospheric · Floating · Selective

어떤 디자인 콘셉트를 선택해야 할까?

여기까지 읽으면 오히려

“종류가 너무 많은데 결국 뭘 사용해야 하지?”

라는 생각이 들 수도 있습니다.

가장 쉬운 방법은 먼저 서비스의 목적을 기준으로 선택하는 것입니다.

물론 반드시 하나만 선택해야 하는 것은 아닙니다.

실제 제품에서는 서로 역할이 다른 디자인 원칙을 조합하는 것도 상당히 효과적입니다.

예를 들어 Swiss Style + Progressive Disclosure를 사용하면 정보가 많은 업무시스템을 질서 있게 정리하면서 초기 화면의 복잡성도 낮출 수 있습니다.

Human-centered Warm UI + Material 3 Expressive를 조합하면 복지나 교육서비스를 친근하게 만들면서도 중요한 행동을 명확하게 강조할 수 있습니다.

Editorial + Scrollytelling은 기관의 사업성과나 프로젝트 스토리를 소개할 때 잘 어울립니다.

Apple-inspired Minimal + Purposeful Micro-interactions는 겉으로는 매우 단순하지만 사용할수록 정교함이 느껴지는 서비스를 만드는 데 활용할 수 있습니다.

이처럼 디자인 콘셉트를 고를 때 중요한 것은

“요즘 어떤 디자인이 가장 유행하는가?”

가 아닙니다.

더 중요한 질문은

“이 서비스를 사용하는 사람에게 어떤 방식으로 정보를 보여주는 것이 가장 적합한가?”

입니다.

7. 화가와 미술 사조를 UI로 가져오는 방법

7-1. 화가의 그림을 복제하지 말고 조형 원리를 가져오자

특정 화가의 스타일을 참고하는 것도 꽤 재미있는 방법입니다.

하지만

“몬드리안 스타일로 만들어줘.”

라고 요청하는 것보다 그의 시각적 원리를 UI로 번역하도록 요청하는 편이 좋습니다.

프롬프트 — Mondrian-inspired UI

Piet Mondrian의 조형 원리에서 영감을 받은
현대적인 Web Interface를 디자인해줘.

중요:

몬드리안의 실제 작품을 그대로 복제하거나
그림을 Background처럼 사용하는 것은 원하지 않는다.

그의 Visual Principles를
현대적인 UI Design Language로 재해석해줘.

적용할 원칙:

- strong orthogonal grid
- asymmetric but balanced composition
- clear information zones
- generous negative space
- black / white 중심의 기본 구조
- red / blue / yellow 계열은
  핵심 정보와 CTA에 제한적으로 사용
- 정보의 중요도에 따라 영역 크기를 다르게 구성
- 불필요한 gradient와 shadow 제거
- rounded card 반복 최소화

Artistic Expression보다
Usability와 Readability가 우선되어야 한다.

사용자가 화면을 처음 본 후
5초 안에 정보 구조를 이해할 수 있도록 디자인해줘.

7-2. 가장 추천하는 방법: Design DNA 추출

더 안정적인 방법은 다음과 같습니다.

화가 또는 예술사조 → Design DNA → Design System → UI

프롬프트 — Design DNA Extractor

아직 UI를 만들거나 코드를 수정하지 마.

너는 Senior Product Designer이자 Art Director다.

[화가 또는 디자인 사조]에서
반복적으로 나타나는 Visual Design Principles를 분석해줘.

단순히 대표 색상을 추출하지 말고
다음 요소를 분석한다.

Composition
Balance
Rhythm
Geometry
Color Relationship
Contrast
Negative Space
Visual Hierarchy
Repetition
Emotional Tone

그리고 각각을
현대적인 Web UI 원칙으로 번역해줘.

다음 구조로 설명한다.

Art Principle
→ UI Principle
→ 실제 UI 적용 방법
→ 적용하면 안 되는 부분

그다음 이 원칙을 바탕으로
다음 항목을 포함한 Design System을 만들어줘.

Typography
Color
Spacing
Grid
Border
Radius
Shadow
Button
Card
Navigation
Table
Data Visualization

중요:

작품 자체를 복제하는 것이 목적이 아니다.

해당 작가의 시각적 사고방식을
Modern Digital Interface에 재해석하는 것이 목적이다.

Usability와 Accessibility가
Artistic Expression보다 항상 우선되어야 한다.

아직 코드는 수정하지 않는다.

결과가 마음에 들었다면 다음 단계에서 실제 프로젝트에 적용합니다.

좋아.

지금 정의한 Design System을
현재 프로젝트 전체에 적용해줘.

Function
Data
API
Business Logic
Routing
User Flow

은 변경하지 않는다.

UI와 Design System만 개선해줘.

먼저 변경 계획을 설명한 뒤
단계적으로 적용해.

8. 완성도를 높이는 추가 점검

8-1. 접근성 점검

현재 UI를 Accessibility 관점에서 검토하고 개선해줘.

WCAG의 기본 원칙을 고려하면서
다음을 집중적으로 확인한다.

- 본문과 배경의 충분한 contrast
- 작은 font size 남용 방지
- color만으로 상태를 구분하지 않기
- 충분한 button / touch target
- keyboard navigation
- visible focus state
- form label 명확화
- error message 이해 가능성
- icon-only button의 accessible name
- 모바일 환경의 touch interaction

접근성을 높이면서도
지나치게 투박한 디자인이 되지 않도록
시각적 완성도를 함께 유지한다.

8-2. Responsive Design 점검

Responsive Design은 단순히 PC 화면을 줄이는 작업이 아닙니다.

화면 크기에 따라 정보의 우선순위를 다시 결정해야 합니다.

현재 화면을 Responsive하게 개선해줘.

단순히 Desktop Layout을
Mobile에서 vertical stacking 하지 않는다.

Desktop
Tablet
Mobile

각 환경에서
사용자의 핵심 행동을 고려해
Information Hierarchy를 다시 구성한다.

Mobile에서는

- 부가 정보 축소
- 핵심 CTA 우선 노출
- Table의 모바일 친화적 표현 검토
- Sidebar를 적절한 Navigation으로 변환
- Touch Target 확보
- 긴 Text Wrapping 점검

을 적용한다.

각 Breakpoint에서
Layout이 자연스럽게 재구성되도록 한다.

9. 이미 만든 앱을 개선하는 방법

9-1. UI/UX Audit부터 시작하기

이미 프로젝트가 상당히 진행된 상황이라면 무작정 디자인을 다시 만들기보다 먼저 Audit을 요청하는 것이 좋습니다.

프롬프트 — UI/UX Audit

아직 코드를 수정하지 마.

현재 프로젝트 전체를
Senior Product Designer 관점에서 UI/UX Audit 해줘.

각 화면을 다음 기준으로
10점 만점으로 평가한다.

1. Visual Hierarchy
2. Typography
3. Spacing Consistency
4. Color System
5. Component Consistency
6. Information Density
7. Navigation Clarity
8. Accessibility
9. Responsive Design
10. Overall Visual Polish

문제를

Critical
Major
Minor

세 단계로 분류한다.

마지막으로
디자인 개선 효과가 가장 큰 항목부터
우선순위 Top 10을 제안한다.

아직 코드는 수정하지 않는다.

그다음 이렇게 이어갑니다.

좋아.

Critical Issue부터 하나씩 수정해줘.

한 번에 전체 UI를 다시 만들지 않는다.

각 문제를 수정한 뒤
기존 Function과 User Flow가 정상적으로 유지되는지 확인하고
다음 단계로 진행한다.

10. 가장 추천하는 만능 디자인 개선 프롬프트

여러 프롬프트를 나누어 사용하기 번거롭다면 아래 프롬프트 하나부터 시작해도 좋습니다.

복사해서 사용하는 통합 프롬프트

현재 앱의

기능,
데이터 구조,
API,
Business Logic,
Routing,
User Flow

는 유지하면서
UI/UX Design의 완성도를 높여줘.

너는

Senior Product Designer,
UX Designer,
Design System Engineer

역할을 맡는다.

먼저 현재 UI를 분석하고
바로 코드를 수정하지 않는다.

[User]
누가 이 서비스를 사용하는지 분석한다.

[Context]
어떤 환경과 기기에서 사용하는지 확인한다.

[Primary Task]
사용자가 가장 먼저 수행해야 하는 행동을 정의한다.

[Information Hierarchy]
정보를

Primary
Secondary
Supporting

으로 분류한다.

[Design Direction]
현재 서비스에 적합한
Visual Design Direction을 결정한다.

예:

Apple-inspired Minimal
Swiss Functional
Bento Grid
Bauhaus
Editorial
Human-centered
Neo-Brutalism

필요하면 더 적합한 새로운 방향을 제안해도 된다.

[Visual Hierarchy]
font size
font weight
position
spacing
contrast
alignment

을 이용해 중요도를 표현한다.

[Typography]
제목,
소제목,
본문,
보조정보

의 Hierarchy를 명확하게 만든다.

[Spacing]
일관된 Spacing System을 사용한다.

관련 요소는 가깝게,
다른 그룹은 충분히 떨어뜨린다.

[Color]
Color는 Meaning과 Action을 전달하는 데 우선적으로 사용한다.

장식적인 Color 사용을 줄이고
CTA와 Status에 집중한다.

[Components]
Button
Input
Select
Card
Modal
Table
Badge
Navigation

의 Style을 통일한다.

[Cards]
모든 정보를 Card로 만들지 않는다.

가능하면

Whitespace
Typography
Alignment
Divider

를 이용해 정보를 구조화한다.

[Visual Effects]
과도한

Gradient
Shadow
Glassmorphism
Rounded Corner

를 피한다.

[Anti AI-looking UI]

다음을 점검한다.

excessive rounded cards
nested cards
meaningless gradient
soft shadow everywhere
excessive pill UI
unnecessary icons
giant headings
repetitive dashboard cards
decorative colors
oversized hero section

[Accessibility]

Contrast
Font Size
Keyboard Navigation
Focus State
Touch Target
Label
Error Message

를 확인한다.

[Responsive]

Desktop / Tablet / Mobile에서
각각 Information Hierarchy를 다시 설계한다.

Desktop 화면을
Mobile에서 단순히 Vertical Stacking 하지 않는다.

중요:

기존 기능을 삭제하거나 변경하지 않는다.

기존 Data Logic과 API 동작을 변경하지 않는다.

디자인 개선을 위해
불필요한 Library를 추가하지 않는다.

먼저

Current Design Problems
Recommended Design Direction
Design System
Implementation Plan

을 설명해줘.

내가 확인한 후
실제 코드를 수정한다.

11. 마치며

바이브코딩 디자인의 핵심은 ‘긴 프롬프트’가 아니다

여기까지 읽으면 이런 생각이 들 수도 있습니다.

“결국 프롬프트를 길게 작성해야 하는 것 아닌가?”

꼭 그렇지는 않습니다.

중요한 것은 프롬프트의 길이가 아닙니다.

AI에게 디자인을 판단할 기준을 얼마나 명확하게 전달했느냐가 중요합니다.

“예쁘게 만들어줘.”

보다

누가 사용하는지,

무엇이 가장 중요한지,

어떤 순서로 보여야 하는지,

어떤 분위기를 원하는지,

어떤 디자인 규칙을 적용할지,

어떤 요소를 사용하지 않을지를 알려주는 것이 훨씬 중요합니다.

그리고 여기에서 한 단계 더 나아간다면 Design Concept을 공유할 수 있습니다.

화가의 조형 원리도 좋습니다.

Bauhaus나 Swiss Style 같은 디자인 사조도 좋습니다.

Apple과 같은 제품 디자인 철학도 좋습니다.

Bento Grid나 Editorial처럼 구체적인 Layout System도 좋습니다.

중요한 것은 그대로 복제하게 하는 것이 아닙니다.

그 안에 들어 있는 Design DNA를 UI 규칙으로 번역하게 하는 것입니다.

그래서 저는 바이브코딩 디자인의 핵심을 두 문장으로 정리하고 싶습니다.

디자인 결과를 요구하지 말고, 디자인의 판단 기준을 프롬프트에 넣어라.

그리고

특별한 디자인을 원한다면 스타일을 복제시키지 말고, 그 스타일의 Design DNA를 UI 규칙으로 번역시켜라.

가능하다면

Design Audit → Design Direction → Design System → Layout → Component → Responsive → Accessibility → Final Audit

순서로 작업해보세요.

바이브코딩의 결과물이 단순히 ‘작동하는 앱’에서 ‘사용하고 싶은 앱’으로 달라지는 과정을 훨씬 분명하게 확인할 수 있을 것입니다.