# Corporate Memphis

> 플랫한 색상과 단순화된 인체 비율을 특징으로 하는 현대적 일러스트 스타일입니다.

- 층: 스타일 (디자인 스타일)
- ID: corporate-memphis
- 연도: 2017
- 무드 태그: 친근·발랄, 따뜻한
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/corporate-memphis

## 정의

플랫한 색상과 단순화된 인체 비율을 특징으로 하는 현대적 일러스트 스타일입니다.

## 역사·배경

2010년대 후반 실리콘밸리 스타트업을 중심으로 폭발적 확산. Alegra 일러스트레이터에 의해 양식화됨. 지금은 '과포화'로 비판받기도 함.

## 주요 특징

- 과장된 신체 비율
- 단순화된 얼굴 표현
- 밝고 포화도 높은 색상
- 기하학적 형태
- 친근하고 접근하기 쉬운 느낌

## 핵심 원칙

- 포용성과 다양성
- 단순함과 명확성
- 친근함

## 컬러 시스템

파스텔 배경 + 선명한 아웃라인 일러스트. 중간 채도의 부드럽고 친근한 팔레트

### 색상 역할

- background: 크림·라벤더·민트 등 연한 파스텔
- illustration-fill: 피부·의상 색 — 다양한 중채도 파스텔
- illustration-outline: 검정 또는 진한 색 아웃라인
- text: 어두운 회색 또는 네이비

### 색상 제약

- vivid·형광 색 금지 — 파스텔 계열 유지
- 순수 흰색 배경 지양 — 색조 있는 파스텔 배경 권장
- 다양한 피부색·의상색 포용 — 단일 피부색 고정 금지

### 다크모드 전략

Dark Memphis: 배경을 짙은 남색·보라로. 일러스트 아웃라인을 밝게. 파스텔 채우기 색 유지

### 대비 요구사항

텍스트는 파스텔 배경 위에서 WCAG AA 확인 필수 — 파스텔+회색 텍스트 조합은 위험

## 타이포그래피

- 폰트 성격: 둥글고 친근한 산세리프. 딱딱함 없이 conversational한 느낌
- 권장 폰트 수: 최대 2개
- 타입 스케일: 1.25 (Major Third)

### 타이포그래피 제약

- angular·condensed 폰트 금지
- font-weight 400~600 권장 — too bold하면 Memphis 캐릭터 무거워짐
- heading 크게, 친근하게

## 설계 제약

### 하면 안 되는 것

- 사진 이미지 사용 금지 — 일러스트로만 인물·사물 표현
- 딱딱하고 기업적인 느낌 금지
- Memphis 캐릭터 없이 파스텔만 사용 금지

### 반드시 포함할 것

- Memphis 스타일 일러스트 (아웃라인+색채우기+단순화된 인체)
- 둥근 UI 요소 (pill 버튼, rounded card)
- 친근하고 다양성 있는 일러스트 캐릭터

### 모션 가이드

캐릭터 subtle animation (흔들리기, 눈 깜빡임). ease-in-out 부드럽게. 과도한 애니메이션보다 micro-interaction 위주.

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: 0 (여백 −2 ↔ +2 빽빽)
- 온도감: +1 (차가움 −2 ↔ +2 따뜻함)
- 시대감: 0 (레트로 −2 ↔ +2 미래적)
- 격식: 0 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- 온보딩 화면
- 에러 페이지
- 빈 상태(Empty State) UI
- 마케팅 일러스트

## 추천 프로젝트 유형

- SaaS 온보딩
- 에러·빈 상태 페이지
- 마케팅 일러스트
- 다양성 표현

## 장단점

### 장점

- 다양성과 포용성 표현 용이
- 친근하고 접근하기 쉬운 느낌
- 빠른 제작이 가능 (템플릿 풍부)

### 단점·한계

- 남발로 인해 '평범함'의 상징이 됨
- 개성이 없어 보일 수 있음
- 세련된 브랜드 이미지와 충돌

## 실제 사용 제품·서비스

- Slack 온보딩
- Mailchimp
- Asana
- 많은 SaaS 에러 페이지

## 접근성

밝은 색상과 명확한 외곽선으로 기본 가독성 양호. 복잡한 정보 전달엔 텍스트 병행 필요.

## 자주 묻는 질문

### Q1. Corporate Memphis이란 무엇인가요?

플랫한 색상과 단순화된 인체 비율을 특징으로 하는 현대적 일러스트 스타일입니다. 2010년대 후반 실리콘밸리 스타트업을 중심으로 폭발적 확산. Alegra 일러스트레이터에 의해 양식화됨. 지금은 '과포화'로 비판받기도 함.

### Q2. Corporate Memphis의 핵심 디자인 원칙은 무엇인가요?

Corporate Memphis의 핵심 원칙은 포용성과 다양성, 단순함과 명확성, 친근함입니다.

### Q3. Corporate Memphis은 어떤 프로젝트에 적합한가요?

Corporate Memphis은 온보딩 화면, 에러 페이지, 빈 상태(Empty State) UI, 마케팅 일러스트, SaaS 온보딩, 에러·빈 상태 페이지, 마케팅 일러스트, 다양성 표현 등의 프로젝트에 적합합니다.

### Q4. Corporate Memphis의 장단점은 무엇인가요?

장점으로는 다양성과 포용성 표현 용이, 친근하고 접근하기 쉬운 느낌, 빠른 제작이 가능 (템플릿 풍부)이 있습니다. 단점으로는 남발로 인해 '평범함'의 상징이 됨, 개성이 없어 보일 수 있음, 세련된 브랜드 이미지와 충돌이 있습니다.

### Q5. Corporate Memphis에서 색상은 어떻게 사용하나요?

파스텔 배경 + 선명한 아웃라인 일러스트. 중간 채도의 부드럽고 친근한 팔레트 색상 역할은 background: 크림·라벤더·민트 등 연한 파스텔, illustration-fill: 피부·의상 색 — 다양한 중채도 파스텔, illustration-outline: 검정 또는 진한 색 아웃라인입니다. 주의사항: vivid·형광 색 금지 — 파스텔 계열 유지, 순수 흰색 배경 지양 — 색조 있는 파스텔 배경 권장.

### Q6. Corporate Memphis에 어울리는 폰트 스타일은 무엇인가요?

Corporate Memphis에는 둥글고 친근한 산세리프. 딱딱함 없이 conversational한 느낌 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: angular·condensed 폰트 금지, font-weight 400~600 권장 — too bold하면 Memphis 캐릭터 무거워짐.

### Q7. Corporate Memphis 디자인에서 하면 안 되는 것은 무엇인가요?

Corporate Memphis에서 피해야 할 것: 사진 이미지 사용 금지 — 일러스트로만 인물·사물 표현, 딱딱하고 기업적인 느낌 금지, Memphis 캐릭터 없이 파스텔만 사용 금지.

### Q8. Corporate Memphis을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Corporate Memphis을 적용한 대표적인 제품·서비스로는 Slack 온보딩, Mailchimp, Asana, 많은 SaaS 에러 페이지 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #5B4DFF
- secondary: #FF6B6B
- accent: #FFD93D
- background: #FFFEF9
- surface: #F8F7FF
- text: #2D3748
- textSecondary: #718096
- border: #E2E8F0

### 타이포그래피

- fontFamily: Poppins, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0.01em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1.2
- borderRadius: sm 12px / md 20px / lg 32px / full 9999px
- shadow sm: 0 2px 8px rgba(91, 77, 255, 0.1)
- shadow md: 0 4px 16px rgba(91, 77, 255, 0.15)
- shadow lg: 0 8px 32px rgba(91, 77, 255, 0.2)
- border: 2px solid #E2E8F0

### 컴포넌트 형태

- button: pill / hover bounce / text none
- card: elevated / hover bounce
- input: filled / focus ring
- badge: pill / solid
- icon: phosphor / stroke 2 / size 24px
- layout: boxed / section spacious
- animation: 300ms ease-out
- specialEffects: gradientText

## 관련 링크

### 관련 스타일

- [Flat Design](https://ui.buildersgate.com/styles/flat-design)
- [Minimalism](https://ui.buildersgate.com/styles/minimalism)
- [Glassmorphism](https://ui.buildersgate.com/styles/glassmorphism)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/corporate-memphis)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/corporate-memphis)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/corporate-memphis)

### 비교

- [Corporate Memphis vs Flat Design](https://ui.buildersgate.com/compare/corporate-memphis-vs-flat-design)
- [Corporate Memphis vs Glassmorphism](https://ui.buildersgate.com/compare/corporate-memphis-vs-glassmorphism)
- [Corporate Memphis vs Memphis Style](https://ui.buildersgate.com/compare/corporate-memphis-vs-memphis-style)
- [Corporate Memphis vs Minimalism](https://ui.buildersgate.com/compare/corporate-memphis-vs-minimalism)

### 쓰임새별 추천

- [제품 랜딩 페이지](https://ui.buildersgate.com/for/landing-page)
- [기업·공공 사이트](https://ui.buildersgate.com/for/corporate-public)
- [커뮤니티·소셜](https://ui.buildersgate.com/for/community)

---

HTML 버전: https://ui.buildersgate.com/styles/corporate-memphis

이 문서는 https://ui.buildersgate.com/styles/corporate-memphis.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.