Apple식 UI 시스템 프롬프트

제품 아이디어와 사용자, 주요 행동을 넣으면 절제된 레이아웃, 타이포그래피, 색, 컴포넌트, 인터랙션 시스템을 받습니다.

분류	디자인 › 화면·제품 설계
태그	초안작성아이디어템플릿

프롬프트 (영어 본문 · 답은 한국어로 옵니다)

You are a senior product designer operating at Apple-level design standards (2026).

Your task is to transform a given idea into a clean, professional, production-grade UI system.

Avoid generic, AI-generated aesthetics. Prioritize clarity, restraint, hierarchy, and precision.

---

### Design Principles (Strictly Enforce)

- Clarity over decoration  
- Generous whitespace and visual breathing room  
- Minimal color usage (functional, not expressive)  
- Strong typography hierarchy (clear scale, no randomness)  
- Subtle, purposeful interactions (no gimmicks)  
- Pixel-level alignment and consistency  
- Every element must have a reason to exist  

---

### 1. Product Context
- What is the product?
- Who is the user?
- What is the primary action?

---

### 2. Layout Architecture
- Page structure (top → bottom)
- Grid system (columns, spacing rhythm)
- Section hierarchy

---

### 3. Typography System
- Font style (e.g. neutral sans-serif)
- Size scale (H1 → body → caption)
- Weight usage

---

### 4. Color System
- Base palette (neutral-first)
- Accent usage (limited and intentional)
- Functional color roles (success, error, etc.)

---

### 5. Component System
Define core components:
- Buttons (primary, secondary)
- Inputs
- Cards / containers
- Navigation

Ensure consistency and reusability.

---

### 6. Interaction Design
- Hover / active states (subtle)
- Transitions (fast, smooth, minimal)
- Feedback patterns (loading, success, error)

---

### 7. Spacing & Rhythm
- Consistent spacing scale
- Alignment rules
- Visual balance

---

### 8. Output Structure

Provide:

- UI Overview (1–2 paragraphs)
- Layout Breakdown
- Typography System
- Color System
- Component Definitions
- Interaction Notes
- Design Philosophy (why it works)

어떤 프롬프트인가

깔끔하고 생산 준비된 UI 시스템을 구상할 때 쓰기 좋다. 장식보다 명확성, 넉넉한 여백, 제한된 색 사용, 픽셀 수준 정렬을 엄격히 강조한다.

모델 비교

ChatGPT가 완결성·정확성·분량의 균형이 가장 좋다. Gemini는 구체적이나 과장과 장황함이 있고, Claude는 가장 치밀하지만 미완성이라 큰 감점이다.

ChatGPT종합 1위

45/ 50

＋ 요구 항목을 빠짐없이 균형 잡힌 분량으로 실용적으로 정리했다.

－ 안전하고 완성도 높지만 핵심 작성 화면의 고유한 개성이 다소 약하다.

Gemini

41/ 50

＋ 핵심 발행 흐름을 정밀한 수치와 화면 예시로 구체화했다.

－ 가상의 사용자 성향과 ‘Apple 2026 표준’을 사실처럼 단정했다.

Claude

33/ 50

＋ 도메인 컴포넌트와 반응형 동작까지 가장 세밀하게 설계했다.

－ 답변이 중간에 잘려 간격 체계와 디자인 철학을 끝내 제시하지 못했다.

기준	ChatGPT	Claude	Gemini	앞선 모델
지시 준수	9	6	10	Gemini +11%
정확성	9	7	7	ChatGPT +29%
구체성	9	10	10	동점
구성·가독성	9	7	8	ChatGPT +13%
분량 적정성	9	3	6	ChatGPT +50%

gpt-5.6-sol가 모델 이름을 가린 채 1~10점으로 채점했습니다 (2026-09-24). 측정값이 아니라 AI 심사 결과입니다.

답 전문 보기

같은 입력을 세 모델에 넣어 받은 답을 그대로 옮겼습니다. 각 CLI(에이전트 하네스)에서 실행했습니다. ChatGPT·Claude 앱이나 웹에서는 답이 다를 수 있습니다.

넣은 입력

[붙여 넣은 자료]
아이디어: 1인 프리랜서 디자이너를 위한 인보이스 발행 웹앱입니다.
타겟 사용자는 30~40대 프리랜서 디자이너/개발자이고, 지금은 엑셀로 인보이스를 만들어 매번 번거로워합니다.
핵심 행동은 '프로젝트 선택 후 3분 안에 인보이스를 발행하고 클라이언트에게 결제 링크를 전송'하는 것입니다.
데스크톱 웹 우선이고, 추후 모바일 대응도 고려하고 있습니다.

gpt-5.6-luna (codex CLI · 에이전트 하네스) · 실행일 2026-09-24

UI Overview

프리랜서 디자이너와 개발자가 프로젝트를 선택하고, 기존 정보를 자동으로 불러와 3분 안에 인보이스를 발행하는 데스크톱 웹앱입니다. 핵심은 문서 작성 도구가 아니라 “빠르고 정확한 청구 흐름”을 제공하는 것입니다.

메인 화면에서는 진행 중인 프로젝트와 최근 인보이스를 한눈에 보여주고, 사용자는 프로젝트를 선택한 뒤 금액·기한·메모만 확인하여 인보이스를 발행합니다. 발행 직후 결제 링크를 복사하거나 클라이언트에게 전송할 수 있습니다.

레이아웃 Breakdown

전체 구조

고정 사이드바
상단 페이지 헤더
주요 콘텐츠 영역
보조 정보 또는 최근 활동 영역

데스크톱 그리드

전체 최대 너비: 1440px
사이드바: 232px
콘텐츠 좌우 여백: 40~56px
기본 그리드: 12 columns
콘텐츠 간격: 24px
카드 내부 여백: 24px
기본 spacing 단위: 4px

주요 화면

대시보드

상단: “안녕하세요, 지민님”과 새 인보이스 버튼
요약 영역:
- 미수금
- 이번 달 수입
- 발행 예정
본문:
- 최근 프로젝트
- 최근 인보이스
- 결제 상태
우측 또는 하단: 최근 활동 타임라인

인보이스 생성

단계가 많아 보이지 않는 단일 화면 구조를 사용합니다.

프로젝트 선택
클라이언트 정보 자동 입력
청구 항목 확인
발행일·결제 기한 설정
미리보기
인보이스 발행 및 결제 링크 전송

화면은 좌측 입력 패널과 우측 실시간 인보이스 미리보기로 구성합니다.

인보이스 상세

상단: 상태, 인보이스 번호, 발행일
주요 액션:
- 결제 링크 복사
- 클라이언트에게 전송
- PDF 다운로드
- 수정
본문: 인보이스 문서
하단: 활동 내역 및 결제 기록

네비게이션

Dashboard
Projects
Invoices
Clients
Settings

현재 메뉴는 좌측 3px accent bar와 텍스트 색상 변화로만 표시합니다. 아이콘은 보조 수단으로 사용하고, 아이콘만으로 메뉴를 전달하지 않습니다.

Typography System

기본 폰트는 Inter, Pretendard, 또는 시스템 산세리프를 사용합니다.

용도	크기	굵기	사용 예
Display	32px	600	대시보드 주요 제목
H1	24px	600	페이지 제목
H2	18px	600	섹션 제목
Body	14px	400	일반 본문
Body strong	14px	500	금액, 주요 정보
Caption	12px	400	보조 설명
Numeric	28~32px	600	미수금, 총액

제목은 짧고 명확하게 작성합니다.
굵기는 400, 500, 600 세 단계만 사용합니다.
금액과 날짜는 숫자 정렬이 잘 되도록 고정폭 숫자 옵션을 적용합니다.
행간은 본문 1.5, 제목 1.25를 기준으로 합니다.

Color System

중립색을 기본으로 하고, accent는 주요 행동과 상태에만 사용합니다.

Base Palette

Background: #F7F7F5
Surface: #FFFFFF
Primary text: #191919
Secondary text: #6F6F6A
Muted text: #999994
Border: #E5E5E1
Strong border: #D4D4CF

Accent

Primary accent: 짙은 인디고 #3F4B8F
Hover accent: #323D78
Focus ring: rgba(63, 75, 143, 0.22)

강한 색상은 새 인보이스, 결제 링크 전송, 선택된 상태에만 사용합니다.

Functional Colors

Success: #287A52
Success background: #EAF5EE
Warning: #A66A00
Warning background: #FFF4D8
Error: #B33A3A
Error background: #FBECEC

상태는 색상뿐 아니라 텍스트와 아이콘을 함께 사용해 전달합니다.

Component Definitions

Buttons

Primary

배경: Primary accent
텍스트: 흰색
높이: 40px
좌우 패딩: 16px
Radius: 8px
사용 예: 새 인보이스, 인보이스 발행

Secondary

배경: 흰색
테두리: Border
텍스트: Primary text
사용 예: PDF 다운로드, 결제 링크 복사

Tertiary

배경 없음
텍스트: Secondary text
사용 예: 취소, 자세히 보기

버튼은 한 화면에서 Primary를 하나만 두어 행동의 우선순위를 명확하게 합니다.

Inputs

높이: 40px
배경: 흰색
테두리: #D4D4CF
Radius: 7px
Focus: accent border와 부드러운 focus ring
Label은 입력창 위에 배치
Placeholder는 실제 값처럼 보이지 않도록 낮은 대비 사용

오류 메시지는 입력창 아래에 즉시 표시하며, “잘못된 값”보다 “결제 기한을 입력해 주세요”처럼 해결 방법을 안내합니다.

Cards

카드는 모든 영역을 감싸는 용도보다 정보 그룹화가 필요한 경우에만 사용합니다.

배경: Surface
테두리: 1px solid Border
Radius: 12px
내부 여백: 24px
그림자: 기본적으로 사용하지 않음
중요한 팝오버나 모달에만 매우 약한 그림자 적용

Status Badge

예시:

초안
발행됨
열람됨
결제 대기
결제 완료
연체

Badge는 작은 보조 요소로 사용하며, 상태를 설명하는 본문 텍스트를 대체하지 않습니다.

Invoice Preview

실제 발행 문서와 동일한 구조로 표시합니다.

흰색 문서 표면
넉넉한 상하 여백
상단에 발행자, 클라이언트, 인보이스 번호
중앙에 항목 테이블
하단에 합계와 결제 안내
편집 UI와 최종 문서 스타일을 명확히 구분

Interaction Notes

상태 변화

Hover: 배경색을 아주 약하게 변경
Active: 버튼이 1px 안쪽으로 눌리는 정도
Focus: 명확한 focus ring 제공
Selected: accent border와 연한 accent background 조합
Disabled: 대비를 낮추되 상태가 식별 가능해야 함

전환

기본 transition: 120~180ms
페이지 전환: opacity와 짧은 translate 조합
모달: 180~220ms
장식적인 패럴랙스나 과도한 spring animation은 사용하지 않음

피드백

인보이스 생성 중

버튼 텍스트를 발행 중…으로 변경하고 중복 제출을 방지합니다.

발행 완료

화면 상단에 성공 메시지를 표시합니다.

인보이스가 발행되었습니다. 결제 링크를 클라이언트에게 보낼 수 있습니다.

곧바로 결제 링크 복사와 전송하기 액션을 제공합니다.

자동 저장

작성 중인 인보이스는 조용히 자동 저장하고, 상단에 다음처럼 짧게 표시합니다.

10:42에 저장됨

오류

문제의 위치와 해결 방법을 함께 제공합니다.

금액을 입력해 주세요. 항목을 추가하려면 청구 항목 추가를 선택하세요.

Spacing & Rhythm

기본 spacing scale:

4px: 아이콘과 텍스트 간격
8px: 라벨과 입력창, 작은 요소 간격
12px: 행 내부 간격
16px: 관련 정보 그룹 간격
24px: 카드 내부 여백, 섹션 간격
32px: 주요 블록 간격
48px: 페이지 섹션 간격
64px: 대형 페이지 여백

정렬 규칙:

모든 주요 콘텐츠는 동일한 좌측 기준선을 공유합니다.
금액은 우측 정렬합니다.
테이블 열은 숫자와 텍스트를 명확히 분리합니다.
페이지 제목, 주요 액션, 본문 시작점의 수직 리듬을 일정하게 유지합니다.
모바일 대응 시 사이드바는 하단 탭 또는 접이식 메뉴로 전환하고, 인보이스 미리보기는 입력 단계 이후 별도 화면으로 이동합니다.

Design Philosophy

이 제품의 핵심 가치는 표현력이 아니라 신뢰감과 속도입니다. 사용자가 매번 새 문서를 만드는 느낌을 받지 않도록 프로젝트와 클라이언트 정보를 재사용하고, 화면에는 현재 결정에 필요한 정보만 보여줍니다.

중립적인 색상, 제한된 버튼 계층, 넉넉한 여백은 인보이스라는 중요한 업무 문서에 집중하게 합니다. 특히 “프로젝트 선택 → 확인 → 발행 → 전송”이라는 짧은 흐름을 중심으로 설계하면, 기존 엑셀 작업의 반복과 실수를 줄이면서도 전문적인 클라이언트 경험을 만들 수 있습니다.

같은 분류의 프롬프트

7대7 축구 팀 앱 설계 프롬프트
접근성 감사자 역할을 맡기는 프롬프트
접근성 감사자 역할 프롬프트
접근성 전문가 역할 프롬프트
접근성 테스트 워크플로 프롬프트

많이 찾는 것

분류