표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Corporate Memphis
플랫한 색상과 단순화된 인체 비율을 특징으로 하는 현대적 일러스트 스타일입니다.
- YEAR
- 2017
- MOOD
- 친근·발랄 · 따뜻한
- PRIMARY#5B4DFF
- SECONDARY#FF6B6B
- ACCENT#FFD93D
- BG#FFFEF9
- SURFACE#F8F7FF
취급 표시
- 크게 둥근 모서리
- 굵은 테두리
- 보통 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 3단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 4단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 3단계
- 친근·발랄
- 따뜻한
어디에 쓰나
실제로 쓰는 곳
- Slack 온보딩
- Mailchimp
- Asana
- 많은 SaaS 에러 페이지
사용 사례
- 온보딩 화면
- 에러 페이지
- 빈 상태(Empty State) UI
- 마케팅 일러스트
이런 프로젝트에 맞습니다
- SaaS 온보딩
- 에러·빈 상태 페이지
- 마케팅 일러스트
- 다양성 표현
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
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 스타일 일러스트 (아웃라인+색채우기+단순화된 인체)
- 둥근 UI 요소 (pill 버튼, rounded card)
- 친근하고 다양성 있는 일러스트 캐릭터
하지 말 것
- 사진 이미지 사용 금지 — 일러스트로만 인물·사물 표현
- 딱딱하고 기업적인 느낌 금지
- Memphis 캐릭터 없이 파스텔만 사용 금지
모션 — 캐릭터 subtle animation (흔들리기, 눈 깜빡임). ease-in-out 부드럽게. 과도한 애니메이션보다 micro-interaction 위주.
접근성
밝은 색상과 명확한 외곽선으로 기본 가독성 양호. 복잡한 정보 전달엔 텍스트 병행 필요.
자주 묻는 질문
Corporate Memphis이란 무엇인가요?
플랫한 색상과 단순화된 인체 비율을 특징으로 하는 현대적 일러스트 스타일입니다. 2010년대 후반 실리콘밸리 스타트업을 중심으로 폭발적 확산. Alegra 일러스트레이터에 의해 양식화됨. 지금은 '과포화'로 비판받기도 함.
Corporate Memphis의 핵심 디자인 원칙은 무엇인가요?
Corporate Memphis의 핵심 원칙은 포용성과 다양성, 단순함과 명확성, 친근함입니다.
Corporate Memphis은 어떤 프로젝트에 적합한가요?
Corporate Memphis은 온보딩 화면, 에러 페이지, 빈 상태(Empty State) UI, 마케팅 일러스트, SaaS 온보딩, 에러·빈 상태 페이지, 마케팅 일러스트, 다양성 표현 등의 프로젝트에 적합합니다.
Corporate Memphis의 장단점은 무엇인가요?
장점으로는 다양성과 포용성 표현 용이, 친근하고 접근하기 쉬운 느낌, 빠른 제작이 가능 (템플릿 풍부)이 있습니다. 단점으로는 남발로 인해 '평범함'의 상징이 됨, 개성이 없어 보일 수 있음, 세련된 브랜드 이미지와 충돌이 있습니다.
Corporate Memphis에서 색상은 어떻게 사용하나요?
파스텔 배경 + 선명한 아웃라인 일러스트. 중간 채도의 부드럽고 친근한 팔레트 색상 역할은 background: 크림·라벤더·민트 등 연한 파스텔, illustration-fill: 피부·의상 색 — 다양한 중채도 파스텔, illustration-outline: 검정 또는 진한 색 아웃라인입니다. 주의사항: vivid·형광 색 금지 — 파스텔 계열 유지, 순수 흰색 배경 지양 — 색조 있는 파스텔 배경 권장.
Corporate Memphis에 어울리는 폰트 스타일은 무엇인가요?
Corporate Memphis에는 둥글고 친근한 산세리프. 딱딱함 없이 conversational한 느낌 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: angular·condensed 폰트 금지, font-weight 400~600 권장 — too bold하면 Memphis 캐릭터 무거워짐.
Corporate Memphis 디자인에서 하면 안 되는 것은 무엇인가요?
Corporate Memphis에서 피해야 할 것: 사진 이미지 사용 금지 — 일러스트로만 인물·사물 표현, 딱딱하고 기업적인 느낌 금지, Memphis 캐릭터 없이 파스텔만 사용 금지.
Corporate Memphis을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Corporate Memphis을 적용한 대표적인 제품·서비스로는 Slack 온보딩, Mailchimp, Asana, 많은 SaaS 에러 페이지 등이 있습니다.