# Skeuomorphism

> 실제 물리적 객체의 질감과 모양을 디지털 인터페이스에 그대로 모방합니다.

- 층: 스타일 (디자인 스타일)
- ID: skeuomorphism
- 연도: 2000s
- 무드 태그: 레트로, 따뜻한
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/skeuomorphism

## 정의

실제 물리적 객체의 질감과 모양을 디지털 인터페이스에 그대로 모방합니다.

## 역사·배경

Steve Jobs가 디지털 초심자를 위해 물리적 은유를 강조한 결과물. iOS 7 (2013년)의 플랫 전환으로 공식적으로 퇴조.

## 주요 특징

- 실제 재질 모방 (나무, 가죽 등)
- 그라데이션과 텍스처
- 그림자와 하이라이트
- 3D 효과
- 사실적인 표현

## 핵심 원칙

- 현실 세계와의 유사성
- 직관적 인식
- 풍부한 디테일

## 컬러 시스템

현실 소재(나무, 가죽, 금속, 종이)의 색상과 질감을 재현하는 사실적 팔레트

### 색상 역할

- material-base: 주 소재 색상 — 나무 갈색, 가죽 갈색, 알루미늄 실버 등
- highlight: 광원에 의한 밝은 반사 — 소재 색의 밝은 변형
- shadow: 소재의 어두운 그림자 — 깊이감 표현
- text: 소재 위에서 가독성 확보하는 색

### 색상 제약

- 현실에 존재하지 않는 색조(neon, vivid gradient) 사용 금지
- 소재 질감과 어울리지 않는 색 금지 (e.g. 나무 텍스처 위 형광색)
- 색상보다 텍스처·그라데이션이 우선 — 색이 단독으로 서 있으면 안 됨

### 다크모드 전략

어두운 소재(검은 가죽, 다크 우드)로 전환. 라이트/다크를 소재 선택 문제로 접근

### 대비 요구사항

텍스처 배경 위 텍스트 대비 확보 어려움 — text-shadow 또는 별도 레이블 영역 필수

## 타이포그래피

- 폰트 성격: 소재와 어울리는 폰트 — 가죽 노트엔 세리프, 메탈 앱엔 산세리프, 나무 질감엔 슬랩세리프
- 권장 폰트 수: 최대 2개
- 타입 스케일: 소재와 UI의 물리적 비율 모방 — 정해진 스케일보다 현실감 우선

### 타이포그래피 제약

- 텍스처 배경 위 폰트는 텍스트 가독성 확보 최우선
- 폰트 크기는 소재 비율에 맞게 — 너무 작으면 질감과 겹쳐 안 보임

## 설계 제약

### 하면 안 되는 것

- 텍스처 없는 flat 영역 사용 금지 — 모든 영역이 소재를 가져야 함
- 현실에 없는 빛 방향 사용 금지 — 빛은 항상 위(좌상단)에서
- 픽셀 퍼펙트 디테일 포기 금지 — 고밀도 텍스처와 반사 필수

### 반드시 포함할 것

- 소재별 질감 텍스처 (CSS background-image 또는 실제 이미지)
- 다중 레이어 그림자 (현실의 3D 깊이감)
- 반사 하이라이트 (light source 기반)

### 모션 가이드

현실의 물리법칙 모방. 버튼은 눌리는 느낌(inset shadow). 페이지 넘기기는 curl 애니메이션. spring 물리 기반 모션.

## 무드 프로파일

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

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

## 사용 사례

- 고급 모바일 앱 (캘린더, 메모장 등)
- 게임 UI
- 오디오·악기 앱
- 복고 스타일 앱

## 추천 프로젝트 유형

- 게임 UI
- 악기·오디오 앱
- 고급 라이프스타일 앱
- 복고 감성 제품

## 장단점

### 장점

- 디지털에 익숙하지 않은 사용자도 직관적으로 이해
- 고급스럽고 감성적인 느낌
- 현실 맥락이 명확한 앱에서 몰입감 향상

### 단점·한계

- 디자인·개발 비용이 매우 높음
- 고해상도 디스플레이에 최적화 어려움
- 현대적 트렌드와 동떨어진 느낌
- 다국어·다문화 환경에서 물리적 은유가 맞지 않을 수 있음

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

- 초기 iOS 앱 (iOS 6까지)
- GarageBand (초기 버전)
- Apple iCal 초기

## 접근성

텍스처와 그라데이션이 저시력 사용자에게 혼란을 줄 수 있음. 충분한 색상 대비 확보 필요.

## 자주 묻는 질문

### Q1. Skeuomorphism이란 무엇인가요?

실제 물리적 객체의 질감과 모양을 디지털 인터페이스에 그대로 모방합니다. Steve Jobs가 디지털 초심자를 위해 물리적 은유를 강조한 결과물. iOS 7 (2013년)의 플랫 전환으로 공식적으로 퇴조.

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

Skeuomorphism의 핵심 원칙은 현실 세계와의 유사성, 직관적 인식, 풍부한 디테일입니다.

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

Skeuomorphism은 고급 모바일 앱 (캘린더, 메모장 등), 게임 UI, 오디오·악기 앱, 복고 스타일 앱, 게임 UI, 악기·오디오 앱, 고급 라이프스타일 앱, 복고 감성 제품 등의 프로젝트에 적합합니다.

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

장점으로는 디지털에 익숙하지 않은 사용자도 직관적으로 이해, 고급스럽고 감성적인 느낌, 현실 맥락이 명확한 앱에서 몰입감 향상이 있습니다. 단점으로는 디자인·개발 비용이 매우 높음, 고해상도 디스플레이에 최적화 어려움, 현대적 트렌드와 동떨어진 느낌, 다국어·다문화 환경에서 물리적 은유가 맞지 않을 수 있음이 있습니다.

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

현실 소재(나무, 가죽, 금속, 종이)의 색상과 질감을 재현하는 사실적 팔레트 색상 역할은 material-base: 주 소재 색상 — 나무 갈색, 가죽 갈색, 알루미늄 실버 등, highlight: 광원에 의한 밝은 반사 — 소재 색의 밝은 변형, shadow: 소재의 어두운 그림자 — 깊이감 표현입니다. 주의사항: 현실에 존재하지 않는 색조(neon, vivid gradient) 사용 금지, 소재 질감과 어울리지 않는 색 금지 (e.g. 나무 텍스처 위 형광색).

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

Skeuomorphism에는 소재와 어울리는 폰트 — 가죽 노트엔 세리프, 메탈 앱엔 산세리프, 나무 질감엔 슬랩세리프 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 텍스처 배경 위 폰트는 텍스트 가독성 확보 최우선, 폰트 크기는 소재 비율에 맞게 — 너무 작으면 질감과 겹쳐 안 보임.

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

Skeuomorphism에서 피해야 할 것: 텍스처 없는 flat 영역 사용 금지 — 모든 영역이 소재를 가져야 함, 현실에 없는 빛 방향 사용 금지 — 빛은 항상 위(좌상단)에서, 픽셀 퍼펙트 디테일 포기 금지 — 고밀도 텍스처와 반사 필수.

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

Skeuomorphism을 적용한 대표적인 제품·서비스로는 초기 iOS 앱 (iOS 6까지), GarageBand (초기 버전), Apple iCal 초기 등이 있습니다.

## 참고 디자인 토큰

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

### 색상

- primary: #4A90E2
- secondary: #7B68EE
- accent: #F5A623
- background: linear-gradient(180deg, #E8E8E8 0%, #BCBCBC 100%)
- surface: linear-gradient(180deg, #FFFFFF 0%, #E0E0E0 100%)
- text: #333333
- textSecondary: #666666
- border: #999999

### 타이포그래피

- fontFamily: 'Lucida Grande', 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0em

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

- spacing: unit 8px × scale 1
- borderRadius: sm 8px / md 12px / lg 16px / full 9999px
- shadow sm: 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.6)
- shadow md: 0 3px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.6)
- shadow lg: 0 10px 25px rgba(0,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.7)
- border: 1px solid #999999

### 컴포넌트 형태

- button: rounded / hover inset / text none
- card: elevated / hover inset
- input: filled / focus ring
- badge: rounded / solid
- icon: lucide / stroke 2 / size 24px
- layout: boxed / section normal
- animation: 200ms ease
- specialEffects: noise

## 관련 링크

### 관련 스타일

- [Retro & Vintage](https://ui.buildersgate.com/styles/retro-vintage)
- [Claymorphism](https://ui.buildersgate.com/styles/claymorphism)
- [Neumorphism](https://ui.buildersgate.com/styles/neumorphism)

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

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

### 비교

- [Skeuomorphism vs Claymorphism](https://ui.buildersgate.com/compare/claymorphism-vs-skeuomorphism)
- [Skeuomorphism vs Neumorphism](https://ui.buildersgate.com/compare/neumorphism-vs-skeuomorphism)
- [Skeuomorphism vs Retro & Vintage](https://ui.buildersgate.com/compare/retro-vintage-vs-skeuomorphism)

### 쓰임새별 추천

- [게임·엔터테인먼트](https://ui.buildersgate.com/for/game-entertainment)

---

HTML 버전: https://ui.buildersgate.com/styles/skeuomorphism

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