AI로 앱 디자인하기

🔄 Quick Recall: 이전 레슨에서 프로젝트에 맞는 AI 앱 빌더를 선택했어요. 이번에는 그 도구로 만들 앱의 인터페이스를 디자인해요.

AI 디자인 워크플로우

전문 디자이너가 일하는 방식을 AI로 압축해요:

사용자 여정 매핑 — 앱의 핵심 흐름을 먼저 정의
디자인 시스템 정의 — 폰트, 색상, 버튼 스타일 결정
화면을 순서대로 생성 — 흐름 순서에 따라 AI로 생성
반복 수정 — 세부사항을 프롬프트로 조정

사용자 여정 먼저

화면을 만들기 전에 사용자가 앱에서 어떤 경로를 따르는지 정의하세요:

온보딩 → 홈(메인 피드) → 상세 화면 → 액션(주문/저장)
                                                → 확인 화면
홈 → 검색 → 결과 → 상세 화면
홈 → 프로필 → 설정

✅ Quick Check: 왜 사용자 여정을 먼저 정의해야 하나요? AI는 개별 화면 생성은 잘하지만, 화면 간 연결은 여러분이 정의해야 해요. 여정 없이 화면을 생성하면 네비게이션이 끊기고 사용자가 길을 잃어요.

디자인 시스템 템플릿

AI에게 제약을 먼저 알려주세요:

디자인 시스템:
- 폰트: 제목 Pretendard Bold, 본문 시스템 기본
- 기본 색상: #6366F1 (인디고), 보조: #F59E0B (앰버)
- 중립: 흰색 배경, #1F2937 텍스트, #F3F4F6 카드
- 버튼: 둥근 사각형, 기본 색상 배경, 흰색 텍스트
- 아이콘: Lucide 아이콘 세트
- 간격: 8px 기반 그리드

이 제약 안에서 화면을 생성하면 일관된 디자인이 나와요.

AI 디자인 도구

Figma Make: 설명으로 인터랙티브 프로토타입 생성. “피트니스 앱의 운동 기록 화면을 만들어줘"라고 하면 터치 가능한 프로토타입이 나와요.

Uizard: 종이 스케치를 디지털로 변환. 노트에 대충 그린 화면 사진을 업로드하면 깔끔한 디지털 디자인으로 변환해요.

빌더 내장 디자인: Lovable, FlutterFlow, Bolt 모두 자체 디자인 기능이 있어서 별도 도구 없이도 화면을 만들 수 있어요.

핵심 디자인 원칙

여백: 요소 사이에 충분한 공간 — 꽉 찬 화면은 혼란스러워요
화면당 하나의 주요 액션: 사용자가 뭘 해야 하는지 즉시 알 수 있게
일관된 컴포넌트: 같은 버튼, 같은 카드, 같은 네비게이션 패턴
모바일 우선 터치 타겟: 터치 영역 최소 44x44px

✅ Quick Check: “화면당 하나의 주요 액션"이 왜 중요한가요? 선택이 많으면 사용자가 결정을 못 해요(결정 마비). 주문 화면에서 가장 눈에 띄는 건 “주문하기” 버튼이어야 해요 — 프로필 수정, 도움말, 설정은 보조적이어야 해요.

핵심 정리

화면 생성 전에 사용자 여정을 먼저 매핑 — AI는 개별 화면은 잘 만들지만 흐름 연결은 여러분의 역할
디자인 시스템(폰트 2개, 색상 3-5개, 버튼 1-2종)으로 일관성 확보
Figma Make, Uizard 같은 AI 디자인 도구가 디자인 경험 없이도 전문적 결과 생성
핵심 원칙: 충분한 여백, 화면당 하나의 주요 액션, 일관된 컴포넌트, 44px 터치 타겟
반복적 프롬프팅(“버튼을 더 크게”, “색상을 바꿔줘”)으로 세부사항 조정

Up next: 다음 레슨에서 실제로 첫 번째 앱을 만들어요 — 설명에서 작동하는 프로토타입까지.