중구난방인 모바일 스크린을 깔끔한 UI 스타일 가이드로 만들기
정돈되지 않은 모바일 앱 스크린으로부터 간단한 스타터 UI 스타일 가이드를 만듭니다.

프롬프트 개요
추천 AI 파트너
추천 팁
스타터 스타일 가이드는 선택지를 늘리는 것이 아니라 줄이는 것이어야 합니다. 목표는 다음 스크린을 더 디자인하기 쉽게 만들고 일관성을 깨기 어렵게 만드는 것입니다.
운영팀 제공NexusAi Technology해결하는 문제
많은 디자이너와 창업자들이 기본 시각 규칙을 정의하기 전에 여러 스크린을 먼저 만듭니다. 그 결과 각 스크린이 개별적으로는 괜찮아 보일지라도 모바일 앱 전체가 무작위한 느낌을 주게 됩니다. 이 프롬프트는 기존 스크린을 다음 디자인 패스의 기준이 될 수 있는 간단한 스타일 가이드로 전환해 줍니다.
스타터 스타일 가이드
복잡한 UI 방향성을 단순한 시각적 규칙으로 전환합니다.
컴포넌트 친화적인 규칙
버튼, 입력창, 카드 및 타이포그래피를 재사용 가능한 방식으로 정의합니다.
초보자 피그마 체크리스트
빠른 일관성 확보를 위해 피그마에서 가장 먼저 생성해야 할 것들을 보여줍니다.
AI 프롬프트 지침
초기 단계의 창업자와 디자이너가 기존 스크린으로부터 깔끔한 시각 스타일 가이드를 만들 수 있도록 돕는 모바일 앱 UI 디자이너로 활동해 주세요.
제 모바일 앱 스크린을 설명하거나 업로드하겠습니다. 당신의 임무는 너무 복잡하지 않으면서도 앱을 더 일관되게 만들어 주는 경량 UI 스타일 가이드를 만드는 것입니다.
앱 컨텍스트:
- 앱 이름: [앱 이름 입력]
- 앱 유형: [앱 유형 입력]
- 타겟 사용자: [사용자 입력]
- 사용 가능한 스크린: [스크린 목록 입력]
- 현재 스타일: [현재 스타일 설명]
- 원하는 느낌: [프리미엄 / 깔끔한 / 친근한 / 대담한 / 차분한 / 장난스러운 / 전문적인]
- 브랜드 컬러(가능한 경우): [컬러 입력]
다음 섹션이 포함된 간단한 UI 스타일 가이드를 생성해 주세요:
1. 비주얼 방향성
앱이 따라야 할 전반적인 룩앤필을 기술합니다.
2. 컬러 규칙
주요(primary), 보조(secondary), 배경(background), 표면(surface), 테두리(border), 성공(success), 경고(warning), 에러(error) 컬러 사용법을 제안합니다. 단순함을 유지하고 너무 많은 색상을 피합니다.
3. 타이포그래피 규칙
제목, 본문, 라벨, 버튼, 캡션 사용법을 정의합니다.
4. 버튼 및 입력창 규칙
기본 버튼, 보조 버튼, 비활성화 상태, 입력 필드 및 폼 간격 규칙을 정의합니다.
5. 카드 및 레이아웃 규칙
카드 반경, 그림자 사용, 간격 리듬, 섹션 패딩 및 스크린 레이아웃 일관성을 정의합니다.
6. 아이콘 및 일러스트레이션 규칙
아이콘이나 일러스트레이션을 일관되게 사용하는 방법을 설명합니다.
7. Figma 설정 체크리스트
스타일과 재사용 가능한 컴포넌트를 사용하여 피그마에서 스타일 가이드를 만들기 위한 체크리스트를 제공합니다.
가이드는 초보자가 적용하기 쉽도록 단순하고 실용적으로 유지해 주세요.
예상 결과
비주얼 방향성, 컬러 규칙, 타이포그래피 규칙, 버튼/입력창 규칙, 카드/레이아웃 규칙, 아이콘 가이드 및 피그마 설정 체크리스트가 포함된 경량 모바일 UI 스타일 가이드.
실행 과정
ChatGPT, Claude 또는 Gemini에서 스타터 가이드 생성하기
앱 유형, 스크린샷 또는 스크린 설명, 현재 스타일, 원하는 느낌을 포함하여 프롬프트 텍스트(promptText)를 붙여넣습니다. 즉시 적용할 수 있는 간단한 UI 스타일 가이드를 얻을 수 있습니다.
6–10분피그마에서 스타일 및 컴포넌트 만들기
출력 결과를 피그마 컬러 스타일, 텍스트 스타일, 버튼 컴포넌트, 입력 컴포넌트, 카드 컴포넌트 및 레이아웃 간격 규칙으로 전환합니다.
30–60분하나의 스크린에 먼저 가이드 적용해보기
전체 앱을 업데이트하기 전에 기존 스크린 하나에 스타일 가이드를 먼저 적용해 봅니다. 그런 다음 업데이트된 스크린을 원본과 비교하여 스타일이 더 깔끔해지고 반복 재사용하기 수월해졌는지 확인합니다.
20–30분
