스큐어모피즘

스큐어모피즘은(는) 무엇을 하나요?

사용자가 이미 알고 있는 물리적 물체처럼 보이고 작동하는 화면 컨트롤은 배우기 더 쉽습니다.

가죽, 린넨, 나무, 펠트, 유리, 브러시 메탈 등 실제 사물을 복사한 인터페이스입니다. 위에서 내리쬐는 조명과 그래디언트, 레이어드 그림자가 특징입니다. 1980년대 데스크톱 아이콘에 뿌리를 두고 있으며, iOS 1~6에서 전성기를 누리다가 iOS 7에서 2013년에 대체되었습니다.

기간: 2007~2013 · 시대: 터치스크린 · 도메인: 그래픽 및 UI 디자인 · 다른 이름: 스큐어모픽 UI, iOS 6 스타일, 실제 사물 인터페이스

이 스킬을 로드할 때

사용자가 "skeuomorphic", "skeuomorphism", "ios 6", "real-world textures", "leather texture", "tactile interface", "realistic buttons", "glossy buttons", "wood and linen", "retro ios", "page curl", "stitched leather"라고 요청할 때 로드합니다.

적합한 분야: 음악 및 오디오 앱, 노트 및 저널 앱, 테이블이나 보드를 사용하는 게임, 참신함과 향수를 자극하는 사이트, 스마트폰 초보자 온보딩.

사용하지 말아야 할 경우:

• 제품이 데이터 밀집형이며 모든 크롬 픽셀이 가독성 공간을 차지할 때
• 브랜드가 추상적, 미니멀 또는 소프트웨어 네이티브하게 느껴져야 할 때
• 다양한 밀도에 맞게 확장 가능하고, 5개의 그림자 레이어가 프레임 속도를 저하시키는 저전력 기기에서 실행되어야 할 때

시스템 지시사항

스큐어모피즘으로 UI 또는 그래픽 레이아웃을 생성할 때 다음을 반드시 준수해야 합니다:

1. 각 컨트롤을 알려진 용도가 있는 실제 사물(예: 토글 스위치, 메모장, 책장, 다이얼)을 모델로 하고, 원본의 10% 이내 비율로 유지합니다.
2. 모든 표면을 위에서 90도 각도의 단일 광원으로 비춰 상단 가장자리에 하이라이트가 위치하고 그림자가 아래로 드리워지도록 합니다.
3. 35개의 레이어드 레이어로 깊이를 만듭니다: 1px 밝은 상단 하이라이트, 24px 그래디언트 바디, 1px 어두운 하단 가장자리, 내부 그림자, 외부 드롭 그림자.
4. 큰 표면에는 128256px 크기의 반복 비트맵을 412% 투명도로 텍스처 처리합니다: 린넨, 가죽, 종이, 나뭇결, 펠트.
5. 모든 버튼에 상단에서 하단까지 8~15% 명도 차이가 나는 그래디언트를 제공하고, 버튼이 눌렸을 때 그래디언트를 반전시킵니다.
6. 각 재질 패널에 1px 내부 하이라이트와 1px 외부 그림자가 있는 스티치, 엠보스 또는 데보스 디테일을 하나 추가합니다.
7. 모션으로 실제 세계를 반영합니다: 페이지 컬, 플립 전환, 스프링 로드 스위치는 모방하는 물체의 물리 법칙을 따릅니다.

가드레일

아래 각 줄은 스타일을 깨뜨립니다. 반환하기 전에 출력물을 목록과 비교하여 확인하세요.

• 절대 하지 말 것: 컨트롤에 그래디언트나 그림자가 없는 평평한 단색 채움.
• 절대 하지 말 것: 구성 요소 간에 방향이 변경되는 광원.
• 절대 하지 말 것: 눈에 띄는 이음새가 있거나 64px보다 짧은 반복 주기로 타일링되는 텍스처.
• 절대 하지 말 것: 나무 계산기와 같이 기능과 일치하지 않는 재질 은유.
• 절대 하지 말 것: 채움이 없는 가는 1px 외곽선 아이콘.
• 절대 하지 말 것: 블러 반경이 0px이고 확산이 없는 그림자.
• 절대 하지 말 것: 표면 텍스처가 없는 순수한 흰색 배경.

벡터 프로필

축	점수	1의 의미	5의 의미
장식성	■■■■□ 4/5	순수 미니멀	맥시멀리스트
입체감	■■■■□ 4/5	엄격한 2D	완전 3D / 공간적
그리드 경직성	■■■□□ 3/5	혼돈 / 유기적	엄격한 수학 그리드
스큐어모픽 사실성	■■■■■ 5/5	추상 디지털	포토리얼리스틱 재질
타이포그래픽 표현성	■■■□□ 3/5	중립 / 보이지 않음	실험적 / 설명적

이 점수를 유지하세요. 요청이 축을 2포인트 이상 이동시키면 스타일을 벗어난 것입니다. "계통 대안"으로 이동하세요.

공간 및 그리드 로직

• 그리드 메커니즘: iPhone에서 320x480pt 캔버스, 이후 320x568pt, 44pt 최소 터치 대상; 콘텐츠는 전체 너비 그룹화된 행 또는 10~20pt 여백이 있는 선반에 배치됩니다.
• 여백 비율: 표면의 20~35%는 비어 있습니다. 텍스처와 프레임이 나머지를 채우기 때문입니다. 간격 스케일은 4, 10, 20, 44pt입니다.
• 정렬 규칙: 컨트롤은 객체 은유의 프레임 내부에 배치됩니다. 예: 테이블의 행, 선반의 책, 노트북의 페이지. 텍스트는 버튼에서 중앙 정렬되고 행에서 왼쪽 정렬됩니다.
• 컨테이너 형상: 반경 5~10px의 둥근 사각형, 외부 모서리에 10px 반경의 그룹화된 테이블 셀, 1px 베벨이 있는 44px 높이 막대.

타이포그래피

• 분류: 휴머니스트 산세리프 · 슬랩 세리프 · 스크립트
• 자간: 디스플레이 크기는 0em ~ 0.01em; 본문은 0; 버튼 레이블은 +0.02em.
• 행간: 디스플레이 1.1; 본문 1.3 ~ 1.4; 테이블 행은 단일 17px 라인으로 44px 높이를 유지합니다.
• 계층 규칙:
  • 버튼 및 제목 레이블에는 볼드(700)를 사용하고 본문 텍스트에는 레귤러(400)를 사용합니다.
  • 제목 및 행에는 17px, 보조 레이블에는 14px, 캡션에는 12px로 설정합니다.
  • 어두운 텍스트 아래에 60% 불투명도의 흰색 1px 텍스트 그림자를 추가하거나 밝은 텍스트 위에 60% 불투명도의 검은색 그림자를 추가하여 텍스트가 표면에 각인된 것처럼 보이게 합니다.
  • 객체 바운드 화면의 제목 텍스트는 다른 서체로 설정합니다. 예: 책장에서는 슬랩, 메모장에서는 스크립트.

글꼴 페어링

디스플레이	본문	참고
Roboto Slab	Open Sans	객체 레이블용 슬랩과 휴머니스트 텍스트 서체의 조합으로 iOS 6 노트의 Marker Felt와 Helvetica 혼합에 가깝습니다.
Arvo	Lato	가죽 및 나무 패널용 슬랩과 읽기 쉬운 컨트롤을 위한 둥근 산세리프의 조합.
Caveat	Source Sans 3	노트패드 및 저널 은유를 위한 필기체 서체와 UI 텍스트용 중립 산세리프의 조합.

색상 및 조명

• 팔레트 구조: 35개의 재질 색상으로 표면의 60%가 지배적인 재질을 차지하고, 기본 컨트롤용 광택 파란색 강조색이 표면의 1015%를 차지합니다.
• 대비 규칙: 재질 표면의 텍스트는 최소 4.5:1을 유지합니다. 가죽 갈색 및 펠트 녹색의 밝은 텍스트는 약 8:1, 광택 파란색의 텍스트는 4.5:1에 도달합니다.
• 표면 처리: 사진 텍스처, 50% 하드 분할이 있는 선형 그래디언트(광택용), 3~6% 불투명도의 노이즈; 유리는 상단 절반에 30% 흰색 하이라이트를 사용합니다.
• 빛과 그림자: 위에서 오는 단일 광원; 하이라이트는 상단 가장자리에 4070% 불투명도의 흰색, 그림자는 아래 방향으로 2550% 불투명도의 검은색, 1~3px 오프셋.

팔레트

이름	Hex	역할
Linen	#D8D4CC	배경 텍스처 베이스
Leather Brown	#6B4A2F	패널 표면
Glass Blue	#2F7BE0	기본 컨트롤 그래디언트
Chrome	#C9CDD3	금속 막대 및 베젤
Felt Green	#1E5B3A	테이블 표면
Stamp Ink	#2B2118	밝은 재질의 텍스트

재질감 및 텍스처

• 표면 시뮬레이션: 실제 재질: 스티치가 있는 가죽, 린넨, 종이, 나무, 펠트, 브러시 알루미늄, 유리, 크롬.
• 테두리 규칙: 4060% 검은색의 1px 어두운 외부 가장자리, 4060% 불투명도의 1px 흰색 내부 하이라이트, 가죽의 경우 가장자리에서 4px 안쪽으로 점선 1px 스티치.
• 블러 및 고도: 버튼용 0 1px 2px 40% 검은색 드롭 그림자, 패널용 0 4px 10px 50% 검은색 드롭 그림자; 웰용 inset 0 1px 3px 50% 검은색 내부 그림자; 고도는 3단계를 사용합니다.

장식 및 아이콘

• 아이콘: 57x57px 광택 채움 아이콘, 12px 반경, 높이의 50%를 덮는 상단 광택 하이라이트, 1px 베벨, 아래 반사 그림자.
• 일러스트레이션: 조명이 있는 렌더링된 객체 일러스트레이션(예: 책장, 마이크, 필름 릴, 테이프 데크), 3/4 상단 뷰에서 그려짐.
• 장식 요소: 스티치 · 페이지 컬 · 나무 선반 · 찢어진 종이 가장자리 · 광택 하이라이트 · 크롬 베젤 · 아이콘 아래 반사

모션 및 상호작용성

• 화면에서 탄생: 예
• 전환 물리: 객체 물리: 페이지 컬 및 플립은 400~600ms, 스위치는 20ms 스프링 안정으로 슬라이드, 선반은 관성과 8px 가장자리 바운스로 스크롤.
• 이징: cubic-bezier(0.42, 0, 0.58, 1)
• 지속 시간 (ms): 350
• 호버 및 활성: 누른 상태는 버튼 그래디언트를 반전시키고 외부 그림자를 제거하여 버튼이 표면에 1~2px 눌린 것처럼 보이게 합니다. 터치 디바이스에는 호버가 없습니다.

코드 및 토큰 프라이머

루트 요소에 data-style="skeuomorphism"을 설정하고 토큰을 붙여넣으세요. 파일 tokens.css에는 동일한 토큰과 참조 규칙 세트가 있습니다.

[data-style="skeuomorphism"] {
  --color-bg: #D8D4CC;
  --color-surface: #6B4A2F;
  --color-text: #2B2118;
  --color-muted: #6E6659;
  --color-primary: #2F7BE0;
  --color-accent: #C9A24B;
  --color-border: rgba(0, 0, 0, 0.5);
  --font-sans: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Roboto Slab", Georgia, "Times New Roman", serif;
  --border-radius: 8px;
  --border-width: 1px;
  --shadow-elevation: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 3px rgba(0, 0, 0, 0.35);
  --backdrop-filter: none;
  --space-unit: 4px;
  --ease: cubic-bezier(0.42, 0, 0.58, 1);
  --duration: 350ms;
  --gradient-control: linear-gradient(to bottom, #6FA8F5 0%, #2F7BE0 50%, #1F5FC0 50%, #2C78DC 100%);
  --gradient-bar: linear-gradient(to bottom, #E2E5EA 0%, #C9CDD3 50%, #B6BBC3 100%);
  --text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  --touch-target: 44px;
  --color-on-bg: #2B2118;
  --color-on-surface: #D8D4CC;
  --color-on-primary: #000000;
  --color-on-accent: #2B2118;
  --color-muted-on-bg: #5F574E;
  --color-muted-on-surface: #CDC6BC;
  --color-link: #2B2118;
  --color-link-on-surface: #D8D4CC;
  --display-weight: 700;
  --subhead-weight: 700;
  --body-weight: 400;
  --strong-weight: 700;
  --label-weight: 700;
  --display-tracking: 0em;
  --display-leading: 1.1;
  --display-case: none;
  --body-leading: 1.55;
  --body-size: 16px;
  --icon-stroke: 2;
}

Tailwind 패턴:

요소	클래스
페이지	min-h-screen bg-[#D8D4CC] bg-[url('/textures/linen.png')] font-sans text-[#2B2118] [text-shadow:0_1px_0_rgba(255,255,255,0.6)]
제목	font-serif text-[17px] font-bold leading-tight [text-shadow:0_1px_0_rgba(255,255,255,0.6)]
패널	rounded-lg border border-black/50 bg-[#6B4A2F] bg-[url('/textures/leather.png')] p-5 shadow-[0_4px_10px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.3)]
버튼	h-11 rounded-lg border border-[#1B4F9E] bg-gradient-to-b from-[#6FA8F5] via-[#2F7BE0] to-[#1F5FC0] px-5 text-sm font-bold text-white shadow-[0_1px_2px_rgba(0,0,0,0.4),inset_0_1px_0_rgba(255,255,255,0.5)] active:from-[#1F5FC0] active:to-[#6FA8F5] [text-shadow:0_-1px_0_rgba(0,0,0,0.5)]
입력	h-11 rounded-md border border-black/40 bg-white px-3 text-[17px] shadow-[inset_0_1px_3px_rgba(0,0,0,0.35)]

비주얼 팩

이 스타일의 그림과 아이콘은 파일입니다. 있는 그대로 사용하거나, 사양으로 읽고 동일한 언어로 직접 그리세요.

파일	내용
pack/hero.svg	히로 플레이트, 800x600. 스타일의 시각적 언어로 된 추상적인 그림.
pack/pattern.svg	패턴 타일, 80x80. 양방향으로 반복됩니다.
pack/icons.svg	아이콘 스프라이트: home, search, heart, star, bell, user, mail, calendar, image, bolt, play, check, close, sliders.

• 아이콘: 솔리드, 24px 필드에 stroke 2, 라운드 캡, 라운드 조인, 컨테이너: 둥근 모양. 사용법: <svg class="icon"><use href="pack/icons.svg#home"/></svg>. 아이콘은 currentColor를 사용합니다.
• 아이콘 패밀리: 스프라이트는 Phosphor Icons의 Phosphor (Fill)에서 잘라냈으며, 라이선스 MIT입니다. 이유: 실제 사물의 완전한 솔리드 실루엣. 컨테이너가 재질과 빛을 제공합니다. 데모용 오픈 소스 대체재입니다. 제품의 경우 브랜드의 아이콘 라이브러리를 사용하고 아래 규칙에 따라 패밀리를 선택하세요.
• 디스플레이 타입: weight 700, tracking 0em, leading 1.1, case: none.
• 가중치: display 700, subhead 700, body 400, bold in text 700, labels and buttons 700. 스타일은 2개의 가중치(400, 700)만 사용하며 다른 것은 사용하지 않습니다. 디스플레이는 본문보다 300 더 무겁습니다. 악센트는 가중치입니다. 더 무거운 단어가 악센트이므로 가중치 간의 차이가 명확합니다.
• 본문 유형: 16px, leading 1.55.
• 페이지: 히로 분할, 왼쪽 정렬, 일반 밀도, 악센트 기울기 0°.
• 텍스트 색상: --color-text는 기본 읽기 필드에만 사용됩니다. 각 필드에서 해당 토큰을 사용하세요: --color-on-bg, --color-on-surface, --color-on-primary, --color-on-accent.

아이콘 팩 선택 방법

아이콘 팩은 그림을 위한 서체입니다. 텍스트 서체와 동일한 주의를 기울여 선택하세요. 이 규칙은 오픈 소스 세트와 라이선스 라이브러리 모두에 적용됩니다.

1. 획이 자줏빛과 일치합니다. 텍스트 크기에서 본문 텍스트 옆에 아이콘을 설정합니다. 아이콘의 선과 문자의 굵기(stem)가 동일한 무게를 가집니다.
2. 터미널과 모서리는 반경 토큰을 따릅니다. 버트 캡과 마이터 조인은 반경 0과 함께 사용됩니다. 라운드 캡과 라운드 조인은 부드러운 반경과 함께 사용됩니다.
3. 채움 모드는 시대의 기술을 따릅니다. 인쇄 시대는 솔리드 형태를 자릅니다. 깊이가 있는 화면 시대는 형태를 채우고 음영 처리합니다. 현재 제품 인터페이스는 외곽선을 그립니다.
4. 은유는 스타일보다 젊지 않습니다. 각 그림은 그 시대가 알고 있던 사물입니다. 이후 시대의 은유가 있는 아이콘은 시대를 깨뜨립니다.
5. 하나의 패밀리, 하나의 그리드. 모든 아이콘은 하나의 패밀리와 하나의 변형에서 나오며, 하나의 필드에 그려집니다. 하나의 표면에 여러 패밀리를 혼합하지 마십시오.
6. 패밀리가 제품을 포괄합니다. 커밋하기 전에 제품에 필요한 각 개념을 나열합니다. 그중 하나에 대한 아이콘이 없는 패밀리는 잘못된 패밀리입니다.
7. 색상은 토큰입니다. 아이콘은 currentColor를 사용합니다. 두 번째 톤은 파일이 아닌 토큰에서 비롯됩니다.
8. 라이선스가 사용을 허용합니다. 세트의 라이선스를 읽으십시오. 라이선스에서 요구하는 경우 크레딧을 표시합니다. 브랜드가 있는 제품은 라이선스가 부여된 라이브러리를 사용하고 동일한 규칙을 적용하여 패밀리를 선택합니다.

계통 대안

사용자가 변형을 요청하면 즉흥적으로 하지 마세요. 여기에 명명된 이웃 쪽으로 혼합하고 해당 스킬을 로드하세요.

• 사용자가 더 평평한 것을 요청하면: flat-design(플랫 디자인) 쪽으로 이동합니다. 모든 그래디언트, 텍스처 및 그림자를 제거하고, 솔리드 채움을 설정하며, 색상과 5...

...

[번역을 위해 잘렸습니다]