표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Skeuomorphism
실제 물리적 객체의 질감과 모양을 디지털 인터페이스에 그대로 모방합니다.
- YEAR
- 2000s
- MOOD
- 레트로 · 따뜻한
- PRIMARY#4A90E2
- SECONDARY#7B68EE
- ACCENT#F5A623
- BG
- SURFACE
취급 표시
- 둥근 모서리
- 가는 테두리
- 종이 바탕
- 보통 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 4단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 4단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 2단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 3단계
- 레트로
- 따뜻한
어디에 쓰나
실제로 쓰는 곳
- 초기 iOS 앱 (iOS 6까지)
- GarageBand (초기 버전)
- Apple iCal 초기
사용 사례
- 고급 모바일 앱 (캘린더, 메모장 등)
- 게임 UI
- 오디오·악기 앱
- 복고 스타일 앱
이런 프로젝트에 맞습니다
- 게임 UI
- 악기·오디오 앱
- 고급 라이프스타일 앱
- 복고 감성 제품
이런 프로젝트에 권합니다
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
Steve Jobs가 디지털 초심자를 위해 물리적 은유를 강조한 결과물. iOS 7 (2013년)의 플랫 전환으로 공식적으로 퇴조.
핵심 원칙
- 현실 세계와의 유사성
- 직관적 인식
- 풍부한 디테일
주요 특징
- 실제 재질 모방 (나무, 가죽 등)
- 그라데이션과 텍스처
- 그림자와 하이라이트
- 3D 효과
- 사실적인 표현
장점과 한계
장점
- 디지털에 익숙하지 않은 사용자도 직관적으로 이해
- 고급스럽고 감성적인 느낌
- 현실 맥락이 명확한 앱에서 몰입감 향상
한계
- 디자인·개발 비용이 매우 높음
- 고해상도 디스플레이에 최적화 어려움
- 현대적 트렌드와 동떨어진 느낌
- 다국어·다문화 환경에서 물리적 은유가 맞지 않을 수 있음
컬러 시스템
현실 소재(나무, 가죽, 금속, 종이)의 색상과 질감을 재현하는 사실적 팔레트
색의 역할
- material-base: 주 소재 색상 — 나무 갈색, 가죽 갈색, 알루미늄 실버 등
- highlight: 광원에 의한 밝은 반사 — 소재 색의 밝은 변형
- shadow: 소재의 어두운 그림자 — 깊이감 표현
- text: 소재 위에서 가독성 확보하는 색
제약
- 현실에 존재하지 않는 색조(neon, vivid gradient) 사용 금지
- 소재 질감과 어울리지 않는 색 금지 (e.g. 나무 텍스처 위 형광색)
- 색상보다 텍스처·그라데이션이 우선 — 색이 단독으로 서 있으면 안 됨
다크모드 — 어두운 소재(검은 가죽, 다크 우드)로 전환. 라이트/다크를 소재 선택 문제로 접근
명도 대비 — 텍스처 배경 위 텍스트 대비 확보 어려움 — text-shadow 또는 별도 레이블 영역 필수
타이포그래피
소재와 어울리는 폰트 — 가죽 노트엔 세리프, 메탈 앱엔 산세리프, 나무 질감엔 슬랩세리프
글꼴은 최대 2종 · 스케일 비율 소재와 UI의 물리적 비율 모방 — 정해진 스케일보다 현실감 우선
- 텍스처 배경 위 폰트는 텍스트 가독성 확보 최우선
- 폰트 크기는 소재 비율에 맞게 — 너무 작으면 질감과 겹쳐 안 보임
설계 제약
반드시 포함
- 소재별 질감 텍스처 (CSS background-image 또는 실제 이미지)
- 다중 레이어 그림자 (현실의 3D 깊이감)
- 반사 하이라이트 (light source 기반)
하지 말 것
- 텍스처 없는 flat 영역 사용 금지 — 모든 영역이 소재를 가져야 함
- 현실에 없는 빛 방향 사용 금지 — 빛은 항상 위(좌상단)에서
- 픽셀 퍼펙트 디테일 포기 금지 — 고밀도 텍스처와 반사 필수
모션 — 현실의 물리법칙 모방. 버튼은 눌리는 느낌(inset shadow). 페이지 넘기기는 curl 애니메이션. spring 물리 기반 모션.
접근성
텍스처와 그라데이션이 저시력 사용자에게 혼란을 줄 수 있음. 충분한 색상 대비 확보 필요.
자주 묻는 질문
Skeuomorphism이란 무엇인가요?
실제 물리적 객체의 질감과 모양을 디지털 인터페이스에 그대로 모방합니다. Steve Jobs가 디지털 초심자를 위해 물리적 은유를 강조한 결과물. iOS 7 (2013년)의 플랫 전환으로 공식적으로 퇴조.
Skeuomorphism의 핵심 디자인 원칙은 무엇인가요?
Skeuomorphism의 핵심 원칙은 현실 세계와의 유사성, 직관적 인식, 풍부한 디테일입니다.
Skeuomorphism은 어떤 프로젝트에 적합한가요?
Skeuomorphism은 고급 모바일 앱 (캘린더, 메모장 등), 게임 UI, 오디오·악기 앱, 복고 스타일 앱, 게임 UI, 악기·오디오 앱, 고급 라이프스타일 앱, 복고 감성 제품 등의 프로젝트에 적합합니다.
Skeuomorphism의 장단점은 무엇인가요?
장점으로는 디지털에 익숙하지 않은 사용자도 직관적으로 이해, 고급스럽고 감성적인 느낌, 현실 맥락이 명확한 앱에서 몰입감 향상이 있습니다. 단점으로는 디자인·개발 비용이 매우 높음, 고해상도 디스플레이에 최적화 어려움, 현대적 트렌드와 동떨어진 느낌, 다국어·다문화 환경에서 물리적 은유가 맞지 않을 수 있음이 있습니다.
Skeuomorphism에서 색상은 어떻게 사용하나요?
현실 소재(나무, 가죽, 금속, 종이)의 색상과 질감을 재현하는 사실적 팔레트 색상 역할은 material-base: 주 소재 색상 — 나무 갈색, 가죽 갈색, 알루미늄 실버 등, highlight: 광원에 의한 밝은 반사 — 소재 색의 밝은 변형, shadow: 소재의 어두운 그림자 — 깊이감 표현입니다. 주의사항: 현실에 존재하지 않는 색조(neon, vivid gradient) 사용 금지, 소재 질감과 어울리지 않는 색 금지 (e.g. 나무 텍스처 위 형광색).
Skeuomorphism에 어울리는 폰트 스타일은 무엇인가요?
Skeuomorphism에는 소재와 어울리는 폰트 — 가죽 노트엔 세리프, 메탈 앱엔 산세리프, 나무 질감엔 슬랩세리프 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 텍스처 배경 위 폰트는 텍스트 가독성 확보 최우선, 폰트 크기는 소재 비율에 맞게 — 너무 작으면 질감과 겹쳐 안 보임.
Skeuomorphism 디자인에서 하면 안 되는 것은 무엇인가요?
Skeuomorphism에서 피해야 할 것: 텍스처 없는 flat 영역 사용 금지 — 모든 영역이 소재를 가져야 함, 현실에 없는 빛 방향 사용 금지 — 빛은 항상 위(좌상단)에서, 픽셀 퍼펙트 디테일 포기 금지 — 고밀도 텍스처와 반사 필수.
Skeuomorphism을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Skeuomorphism을 적용한 대표적인 제품·서비스로는 초기 iOS 앱 (iOS 6까지), GarageBand (초기 버전), Apple iCal 초기 등이 있습니다.