GIGA UI: calm, precise, alive은(는) 무엇을 하나요?

이 스킬은 한 줄의 UI 요청을 세련되고 프로덕션 품질의 인터페이스로 바꿔줍니다. 비주얼 언어는 @marcelkargul(Kargul Studio)의 공개 디자인 작업에서 영감을 받았습니다: 조용하고 거의 단색에 가까운 제품 UI, 매우 정교한 타이포그래피, 두꺼운 테두리 대신 부드러운 레이어드 섀도우, 하나의 자신 있는 액센트 컬러, 그리고 장식이 아닌 본연의 목적을 가진 빠르고 물리적인 모션.

모든 코딩 모델 및 모든 스택과 함께 작동합니다. 예제는 React + Tailwind + Motion (motion/react)을 사용하며, 각각은 순수 CSS 대안을 제공합니다.

아래 출처 표기법 사용: [seen] 그의 게시물/이미지에서 직접 관찰하거나 캡션에 명시된 내용. [inferred] 관찰된 내용에서 합리적으로 추론한 내용 (스크린샷 측정 또는 암시된 내용). [expert] Motion 문서, Emil Kowalski, Apple HIG의 일반적인 모션/UX 모범 사례. 그의 게시물에서 비롯된 것이 아님.

1. 디자인 철학

제거할 수 있다면 제거하라. [seen, 캡션: "every screen. every component. every frame. if it doesn't need to be there, it shouldn't be. simple is always hard, but simple always wins."]
타이포그래피가 무거운 짐을 진다. [seen: "just master typography and you can make anything look good."] 한 가지 패밀리(웹에서는 기본 Inter, 선택적으로 Geist; iOS 스타일 모바일용 SF Pro Rounded)를 사용하고 최대 2개의 웨이트 [seen: "sf pro rounded, maximum 2 font weights, keep it simple"].
흰색, 검정색, 그리고 그림자. [seen: "No animations, no gradients, no fancy effects. Just FFFFFF, 000000, and some shadows. This is design at its peak."] 대부분의 팔레트는 중성 회색입니다. 컬러는 상태, 카테고리, 또는 하나의 주요 액션과 같은 의미를 위해 사용됩니다.
깊이는 두꺼운 테두리가 아닌 부드러운 레이어드 섀도우와 헤어라인에서 나온다. [seen: "this button only requires 3 shadows!" 및 §3의 보조 버튼 레시피]
모션은 제품의 일부이지 장식이 아니다. [seen: "micro-interactions throughout", "subtle loading animation. not overdone, just perfect", "every website needs this level of animation", "idea → design → animation"]. 변경 사항을 설명하거나, 액션을 확인하거나, 주의를 유도하기 위해서만 애니메이션을 사용하세요 [expert].
마지막 10%를 수작업으로 다듬어라. [seen: 그의 프로세스는 "design in figma, build with the help of claude, spend hours fixing small details manually and improving code quality"]. §9의 QA 체크리스트가 바로 그 마지막 10%입니다.
깨끗함이 영리함보다 낫다. 그의 캡션은 "clean", "calm", "simple"이라는 단어를 계속해서 강조합니다 (예: "Every task in one calm list"). 데이터가 많더라도 화면은 차분하게 느껴져야 합니다.

2. 관찰된 스타일 (그의 작업이 실제로 어떻게 보이는지)

2.1 타이포그래피

패밀리: Inter (이 스킬의 기본값) 및 Geist (선택적 대안). [seen: "After using 100s of different fonts, I realized nothing beats Inter and Geist."; 농담 게시물: 주니어와 시니어 디자이너 모두 "Inter, Geist" 사용]. 모바일 앱용 SF Pro Rounded [seen, 여러 게시물]. 그는 또한 SF Pro Rounded의 크로스 플랫폼 대안으로 Google Sans Rounded를 추천합니다 [seen, 답변]. 모노스페이스(Geist Mono 유사)는 큰 숫자, 티커, 코드에 사용됩니다 [seen: 암호화폐 앱 잔액, Statsnap KPI 카드, 사이드바 네비게이션 변형]. 브랜드 및 마케팅 작업은 때때로 세리프 디스플레이 서체(에디토리얼 트랜지셔널 세리프, 라이트 웨이트)를 사용합니다 [seen: 핀테크 랜딩 "Every payment protected…", VC 랜딩 페이지].
트래킹 (그의 정확한 수치, Geist로 데모; 그가 -6%로 데모한 Inter에도 동일 적용) [seen]:
- 16px → 0%
- 36px → -3%
- 100px+ → -5% ~ -6%
- "절대 마이너스로 가지 않는 규칙은 본문 텍스트용입니다. 100px+에서는 기본 간격이 느슨해 보입니다."
- SF Pro Rounded: +1% 자간 [seen, 타입 표본].
웨이트: Regular (400) 및 Medium (500)이 거의 모든 제품 UI를 담당합니다. Semibold (600)는 제목과 숫자용입니다. Bold/Black은 큰 디스플레이 헤드라인에만 사용됩니다 [스크린샷에서 추론].
제품 UI의 크기 [스크린샷에서 1×로 측정하여 추론]: 본문 및 표 텍스트 13–14px, 보조/메타 12–13px, 섹션 레이블 11–12px 대문자 또는 작은 대문자 회색 (예: "WORKSPACE", "PINNED TOOLS"), 페이지 제목 18–24px Medium, KPI 숫자 24–32px, 히어로 헤드라인 48–72px 네거티브 트래킹. 버튼은 14px Medium [seen: "Geist/14/Medium"].
텍스트 컬러: 기본은 거의 검은색 (#171717–#1F1F1F), 보조는 중간 회색 (#6B6B6B–#737373), 3차/플레이스홀더 (#A3A3A3). 태그는 채워진 포화 색상에 흰색 텍스트 대신 밝은 색조에 어두운 색조의 텍스트를 사용합니다 [seen: "Do / Don't" 게시물: "Dark text improves overall readability greatly."].

2.2 컬러

스크린샷에서 샘플링 (근사치) [seen/inferred]:

역할	라이트	다크
캔버스 / 페이지	`#FFFFFF`	`#0D0D0D`–`#121212`
미묘한 표면 (사이드바, 패널, 모바일 배경)	`#F7F7F7` / `#F4F4F4` / `#FAFAFA`	`#1A1A1A`–`#1E1E1E`
목업 뒤 프레젠테이션 배경	`#E5E5E5`–`#EDEDED`, 중간 회색 `#8A8A8A`	`#1F1F1F`–`#262626`
헤어라인 테두리	`#ECECEC` / `#EBEBEB`	`rgba(255,255,255,0.08)`
기본 텍스트	`#171717`	`#FAFAFA`
보조 텍스트	`#737373`	`#A1A1A1`

액센트 (제품당 하나, 절대 동시에 여러 개 사용 금지) [seen]:

바이올렛 #7B3AEC (Underlay 가입, 온보딩), 인디고 #5B5BF0 변형도 있음
블루 #255CD1 / iOS 블루 #2F7BF6 (계산기, 캘린더, Statsnap)
오렌지 #FF5A1F / #F97316 (Plunio, Nexora)
틸 #0F766E 계열 (AI 파이프라인, AIData)
라임 #B4F05A (거의 검은색 배경에 사용, 코드 에디터 "Start" 버튼, Soma 브랜드)
코랄/레드 #F2435A (수면 앱)
순수 블랙 #0A0A0A (중립적인 앱의 기본 버튼 색상: 수면 앱, 계산기 "=", "Deploy v13", "New event") [seen]

의미적 색조 [seen]: 녹색 #16A34A 텍스트 on #ECFDF3; 빨간색 #DC2626 on #FEF2F2; 호박색/오렌지 on #FFF4E5; 파란색 on #EEF4FF. 아바타 이니셜은 더 어두운 동일 색조 텍스트와 함께 파스텔 원 위에 배치됩니다 ("SW", "AJ", "MP").

그라디언트: 드물지만 효과적으로 사용됨 [seen: "the art of using gradients"]. 버튼은 미묘한 위에서 아래로의 그라디언트를 얻습니다(보조 버튼의 경우 #FFFFFF → #F7F7F7; 기본 버튼의 경우 약간 더 밝은 상단). 히어로 아트는 Plus-Darker 블렌딩과 노이즈/그레인 오버레이가 포함된 흐린 멀티 컬러 블롭을 사용합니다 [seen: 히어로 일러스트레이션 스레드].

2.3 모양, 간격, 깊이

모서리 반경 [seen 및 추론]: 작은 컨트롤 및 버튼 8–10px [seen: "30px height, 10px radius"]; 입력 필드 10–12px; 카드 12–16px; 모달 및 명령 팔레트 20–24px; 모바일 시트 및 폰 카드 24–32px; 필 및 칩은 완전히 둥글게. 모바일 버튼은 종종 완전한 필 형태입니다 [seen].
간격: 4px 기본 그리드. 일반적인 간격은 4/8/12/16/24/32/48입니다 [추론]. 콘텐츠 주변에 많은 여백; 밀집된 테이블도 약 40–48px 행 높이를 유지합니다 [추론].
컨트롤 높이 [seen/inferred]: 컴팩트 데스크톱 버튼 30–32px, 표준 36–40px, 모바일 기본 CTA 48–56px.
테두리: 매우 밝은 회색의 1px 헤어라인. 종종 테두리는 border 대신 0 블러 1px 확산 그림자로 만들어집니다 [seen: 보조 버튼 레시피].
그림자 [seen]: 보조 버튼 = 0 1px 2px rgba(40,40,40,.08), 0 0 0 1px #ECECEC. 떠 있는 표면(팝오버, 팔레트, 툴팁)은 크고 매우 부드러운 앰비언트 섀도우와 헤어라인을 사용합니다. 다크 툴팁은 라이트 UI 위에 위치합니다 [seen: Statsnap 차트 툴팁, "Task completed · Undo" 토스트].
모바일: 아트보드 430×932 [seen], 상단 표시줄의 둥근 40–44px 아이콘 버튼, 회색 캔버스에 그룹화된 "인셋" 리스트 카드, 떠 있는 필 탭 바 [seen].

2.4 레이아웃 패턴 [seen]

SaaS 앱 셸: 미묘한 회색의 왼쪽 사이드바(220–260px), 작은 대문자 회색 레이블이 있는 그룹화된 네비게이션, 활성 항목 = 흰색 필과 부드러운 그림자 (라이트) 또는 #1E1E1E 채우기 (다크); 주요 콘텐츠는 흰색 바탕에 얇은 상단 표시줄 (이동 경로 Home > Transaction, / 힌트가 있는 검색, 아이콘 버튼). 때로는 슬림한 아이콘 레일(48–56px)이 대신 사용됩니다.
테이블 위 필터 칩 행: Range Last 30 days ▾, Scope All tools ▾. 레이블은 회색이고 값은 어둡습니다.
테이블: 줄무늬 없음, 헤어라인 행 구분선, 작은 회색 헤더 텍스트, 색조가 있는 상태 필, 아바타 + 이름 + 이메일 스택, 오른쪽 정렬 숫자, 표 형식 숫자.
KPI 카드: 레이블, 큰 숫자 (종종 모노스페이스), 델타 필 (▲ +14.7% vs last year).
인증/온보딩: 분할 카드. 왼쪽에 양식 (부드러운 원 안의 로고, 제목, 부제목, Google 버튼, "or" 구분선, 입력, 기본), 오른쪽에 회색 패널의 제품 미리보기와 캐러셀 점 [seen: "just designed the perfect signup page"].
명령 팔레트: 24px 모서리 반경, ESC 키캡이 있는 검색 행, 필터 필, 그룹화된 결과, 키보드 레전드 푸터 [seen].
모바일 온보딩: 분할 진행 표시줄 + "1/5", 중앙 정렬 굵은 질문, 원형 체크 표시가 있는 선택 가능한 옵션 행, 스티키 필 CTA [seen].
랜딩 히어로: 떠 있는 필 네비게이션 바, 작은 "Backed with X" 배지, 짧고 강력한 헤드라인 (때로는 전체 대문자 그로테스크, 때로는 세리프), 어두운 기본 + 흰색 보조 버튼, 아래 큰 일러스트레이션 [seen].

2.5 아이콘그래피 및 일러스트레이션 [seen]

아이콘: 얇은 획 윤곽선 아이콘 (Lucide/Phosphor 스타일, ~1.5px 획, UI에서 16–18px), 기본적으로 회색, 활성화되면 더 어두워짐.
기능 카드 및 카테고리용 작은 컬러 앱 아이콘 타일 (그라디언트와 글리프가 있는 둥근 사각형).
일러스트레이션 스타일: (a) 점선 그리드 위의 등각 투영 선 아트, 단색; (b) 그레인 있는 파스텔 배경 위의 생생한 그라디언트 리본/스트림과 등각 투영 그리드, 떠 있는 컨페티; (c) 친근한 플랫 셰이드 스팟 일러스트레이션과 컨슈머 및 모바일 앱용 3D 느낌의 이모지 아이콘; (d) 스큐어모픽 터치 (카드를 잡고 있는 스티치 가죽 지갑).
그의 애니메이션 파이프라인: "Figma에서 일러스트레이션 그리기 → AE/Rive에서 애니메이션 → AE 사용 시 lottie로 내보내기 → 웹사이트에 구현하기". 한 프로젝트에서는 "Figma… Rive for animation, Next.js + Sanity"를 사용했습니다. 히어로 섹션은 종종 "design + illustration + animation"을 포함합니다 [seen].

2.6 다크 vs 라이트 [seen]

그는 둘 다 사용하며 일치하는 세트를 제공합니다 ("light/dark mode", "figma tokens are so useful!"). 라이트는 생산성 SaaS의 기본값입니다. 다크는 암호화폐/트레이딩, 코드 에디터, 사이드바, 마케팅 배너에 사용됩니다. 다크 표면은 순수한 검은색이 아닌 약 6–10 명도 단계 (#0D0D0D → #121212 → #1A1A1A → #222)로 올라갑니다.

3. 디자인 토큰 (CSS 변수)

이것을 전역 스타일시트에 붙여넣으세요. Tailwind 사용자는 @theme (v4) 또는 theme.extend (v3)에서 이를 매핑할 수 있습니다.

:root {
  /* Type */
  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Geist Mono", "SF Mono", Menlo, monospace;
  --font-rounded: "SF Pro Rounded", ui-rounded, "Google Sans Rounded", var(--font-sans);

  --text-xs: 12px;   --text-sm: 13px;  --text-base: 14px; --text-md: 16px;
  --text-lg: 18px;   --text-xl: 24px;  --text-2xl: 32px;  --text-3xl: 48px;
  --text-4xl: 64px;  --text-5xl: 96px;
  --tracking-body: 0;       /* <= 16px */
  --tracking-tight: -0.01em;/* 18–24px */
  --tracking-title: -0.03em;/* ~36px  (his rule) */
  --tracking-display: -0.055em; /* 100px+ (his rule: -5% to -6%) */
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;

  /* Neutrals (light) */
  --bg: #ffffff;
  --bg-subtle: #f7f7f7;
  --bg-muted: #f0f0f0;
  --bg-backdrop: #e8e8e8;
  --border: #ececec;
  --border-strong: #e0e0e0;
  --fg: #171717;
  --fg-secondary: #737373;
  --fg-tertiary: #a3a3a3;
  --fg-inverse: #ffffff;

  /* Accent: pick ONE per product */
  --accent: #7b3aec;             /* violet; alternatives: #255cd1 blue, #ff5a1f orange, #0a0a0a black */
  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
  --accent-soft: color-mix(in oklab, var(--accent), white 90%);
  --accent-fg: #ffffff;
  --ring: color-mix(in oklab, var(--accent), transparent 65%);

  /* Semantic (dark text on soft tint) */
  --success: #16a34a; --success-soft: #ecfdf3;
  --danger:  #dc2626; --danger-soft:  #fef2f2;
  --warning: #d97706; --warning-soft: #fff7e6;
  --info:    #2563eb; --info-soft:    #eef4ff;

  /* Spacing (4px grid) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-24: 96px;

  /* Radii */
  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-full: 9999px;

  /* Heights */
  --h-control-sm: 30px; --h-control: 36px; --h-control-lg: 44px; --h-cta-mobile: 52px;

  /* Shadows (layered, soft; hairline via spread) */
  --hairline: 0 0 0 1px var(--border);
  --shadow-xs: 0 1px 2px rgb(40 40 40 / 0.08);
  --shadow-btn: 0 1px 2px rgb(40 40 40 / 0.08), 0 0 0 1px #ececec;     /* his secondary button */
  --shadow-btn-primary: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 1px 2px rgb(0 0 0 / 0.16), 0 0 0 1px color-mix(in oklab, var(--accent), black 12%);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 1px var(--border);
  --shadow-pop: 0 0 0 1px rgb(0 0 0 / 0.06), 0 8px 24px -4px rgb(0 0 0 / 0.10), 0 2px 6px rgb(0 0 0 / 0.04);
  --shadow-modal: 0 0 0 1px rgb(0 0 0 / 0.06), 0 24px 64px -12px rgb(0 0 0 / 0.18);
  --shadow-focus: 0 0 0 3px var(--ring);

  /* Motion (see §5) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* strong ease-out (Emil Kowalski) */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* for on-screen movement */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* iOS-like sheet (Vaul) */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-instant: 100ms; --dur-fast: 150ms; --dur-base: 200ms;
  --dur-moderate: 250ms; --dur-slow: 350ms; --dur-page: 500ms;
}

[data-theme="dark"], .dark {
  --bg: #0d0d0d;
  --bg-subtle: #141414;
  --bg-muted: #1c1c1c;
  --bg-backdrop: #0a0a0a;
  --border: rgb(255 255 255 / 0.08);
  --border-strong: rgb(255 255 255 / 0.14);
  --fg: #fafafa;
  --fg-secondary: #a1a1a1;
  --fg-tertiary: #6b6b6b;
  --shadow-btn: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.10);
  --shadow-btn-primary: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 0 0 1px var(--accent);
  --shadow-card: 0 0 0 1px var(--border);
  --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.06), 0 8px 24px -4px rgb(0 0 0 / 0.40), 0 2px 6px rgb(0 0 0 / 0.12);
  --shadow-modal: 0 0 0 1px rgb(255 255 255 / 0.06), 0 24px 64px -12px rgb(0 0 0 / 0.50);
}

4. 컴포넌트 레시피

이 레시피는 그의 게시물 [seen]에서 관찰된 패턴과 [expert] 표준에 대한 우리의 지식을 결합한 것입니다. 각 레시피에는 의도가 포함됩니다.

4.1 버튼

의도: 명확한 계층 구조. 기본 = 하나. 보조 = 안전한 기본값. 고스트 = 컨텍스트가 이미 작업을 암시할 때.

(참조: --shadow-btn, --shadow-btn-primary 변수)

// 기본 버튼 (다크 액센트, 옅은 상단 광택, 전체 둥근, 14px Medium)
<button className="inline-flex items-center justify-center h-[var(--h-control)] px-6 
  rounded-[var(--radius-md)] bg-[var(--accent)] text-[var(--accent-fg)] 
  text-sm font-[var(--weight-medium)] shadow-[var(--shadow-btn-primary)] 
  transition-all duration-[var(--dur-fast)] ease-[var(--ease-out)] 
  hover:brightness-110 active:scale-[0.97]">
  Button
</button>

// 보조 버튼 (흰색/표면, 부드러운 그림자, 헤어라인)
<button className="inline-flex items-center justify-center h-[var(--h-control)] px-6 
  rounded-[var(--radius-md)] bg-[var(--bg)] text-[var(--fg)] 
  text-sm font-[var(--weight-medium)] shadow-[var(--shadow-btn)] 
  transition-all duration-[var(--dur-fast)] ease-[var(--ease-out)] 
  hover:bg-[var(--bg-subtle)] active:scale-[0.97]">
  Button
</button>

// 고스트 버튼 (보더리스, 호버 시 배경색)
<button className="inline-flex items-center justify-center h-[var(--h-control)] px-4 
  rounded-[var(--radius-md)] text-[var(--fg-secondary)] 
  text-sm font-[var(--weight-medium)] 
  transition-all duration-[var(--dur-fast)] ease-[var(--ease-out)] 
  hover:bg-[var(--bg-subtle)] hover:text-[var(--fg)] active:scale-[0.97]">
  Button
</button>

4.2 카드

의도: 부드러운 표면, 헤어라인 경계, 미묘한 그림자. 콘텐츠를 위한 깨끗한 컨테이너.

<div className="rounded-[var(--radius-lg)] bg-[var(--bg)] shadow-[var(--shadow-card)] p-6">
  {/* 카드 콘텐츠 */}
</div>

4.3 입력 필드

의도: 명확한 포커스 상태, 간결한 피드백. 내부 라벨 또는 위에 라벨.

<div className="flex flex-col gap-[var(--space-1)]">
  <label className="text-xs font-[var(--weight-medium)] text-[var(--fg-secondary)] uppercase tracking-wide">
    Email
  </label>
  <input 
    className="h-[var(--h-control)] px-4 rounded-[var(--radius-md)] 
      bg-[var(--bg)] text-[var(--fg)] text-sm 
      shadow-[var(--shadow-xs),var(--hairline)]
      placeholder:text-[var(--fg-tertiary)]
      focus:outline-none focus:shadow-[var(--shadow-focus),var(--hairline)]
      transition-shadow duration-[var(--dur-fast)] ease-[var(--ease-out)]"
    placeholder="[email protected]"
  />
</div>

4.4 모달 / 다이얼로그

의도: 부드러운 백드롭, 떠 있는 질량, 큰 모서리 반경. 진입 시 부드럽게 페이드 인 + 스케일 업.

{/* 백드롭 */}
<div className="fixed inset-0 bg-black/40 backdrop-blur-sm z-50 
  data-[state=open]:animate-in data-[state=closed]:animate-out 
  data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />

{/* 패널 */}
<div className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 
  w-full max-w-md rounded-[var(--radius-3xl)] bg-[var(--bg)] 
  shadow-[var(--shadow-modal)] p-8 z-50
  data-[state=open]:animate-in data-[state=closed]:animate-out 
  data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 
  data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 
  data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2
  data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]">
  {/* 콘텐츠 */}
</div>

5. 모션 시스템

의도: 빠르고, 물리적이며, 설명적입니다. 장식용 애니메이션이 아닙니다. 지속 시간은 짧고(ease-out) 대상 동작을 명확하게 합니다.

5.1 타이밍

호버/액티브: 100ms (--dur-instant). 즉시 느껴져야 합니다.
진입/퇴장: 150ms (--dur-fast). 충분히 빨라서 기다리는 느낌이 들지 않습니다.
내부 상태 변경 (탭, 토글): 200ms (--dur-base).
패널 열기/닫기: 250ms (--dur-moderate).
페이지 전환, 큰 모달: 350–500ms (--dur-slow, --dur-page). 더 큰 이동의 경우 속도가 느려집니다.

5.2 이징

진입: cubic-bezier(0.23, 1, 0.32, 1) (--ease-out). 빠르게 가속하고 부드럽게 감속하는 강력한 ease-out입니다.
퇴장: cubic-bezier(0.77, 0, 0.175, 1) (--ease-in-out). 대칭 반전.
시트/드로어: cubic-bezier(0.32, 0.72, 0, 1) (--ease-drawer). iOS 스타일 스프링 느낌.
표준: cubic-bezier(0.2, 0, 0, 1) (--ease-standard). 대부분의 전환에 대한 좋은 기본값.

5.3 마이크로인터랙션 [seen]

버튼: active:scale-[0.97] (위에서 누르는 느낌).
카드/행: hover:bg-[var(--bg-subtle)] (리스트 항목, 카드, 행).
탭: 선택된 표시기가 부드럽게 슬라이드합니다 (250ms, ease-out).
스켈레톤 로더: 맥동하는 직사각형 (투명도 0.05–0.15, 1.5초 지속 시간, 무한 반복).
토스트/알림: 오른쪽 위에서 슬라이드 인, 페이드 + 스케일 퇴장.
드롭다운/메뉴: 작은 스케일 + 페이드 진입, 페이드 퇴장.

5.4 페이지 전환

레이아웃 간 전환 시 콘텐츠는 일관된 ease-out으로 페이드 인/슬라이드 업되어야 합니다. 레이아웃 변경은 layout prop(Framer Motion)으로 애니메이션화되어 항목이 갑자기 튀는 것을 방지합니다.

6. 스택별 참고 사항

React + Tailwind + Motion (`motion/react`)

motion/react를 임포트하세요 (import { motion, AnimatePresence } from "motion/react").
Tailwind와 motion을 함께 사용하려면 motion.div의 className prop을 사용하세요.
layout prop을 사용하여 레이아웃 변경을 자동으로 애니메이션화하세요.
AnimatePresence로 마운트 해제 애니메이션을 처리하세요.

순수 CSS

@keyframes + animation으로 동일한 효과를 얻을 수 있습니다.
CSS 전환은 transition 속성을 사용합니다 (예: transition: all 150ms var(--ease-out)).

7. 환경별 규칙

웹 (데스크톱 + 태블릿)

최소 너비: 1024px (데스크톱), 768px (태블릿).
사이드바: 240px. 주요 콘텐츠 영역: calc(100vw - 240px).
반응형: 768px 미만에서 모바일 레이아웃으로 전환합니다.

모바일

아트보드: 430×932.
상단 표시줄 높이: 56px. 하단 탭 바: 64px.
모바일 CTA 버튼: 52px 높이, 전체 너비.
입력 필드: 48px 높이 (더 나은 터치 대상).

8. 예제 프롬프트

"거래 내역이 있는 대시보드 페이지를 만들어 줘. KPI 카드, 필터, 표가 있어야 해." "모바일 온보딩 플로우를 디자인해 줘. 진행 표시줄, 질문, 옵션, 하단 버튼." "SaaS 앱용 설정 페이지를 만들어 줘. 왼쪽에 사이드바, 오른쪽에 콘텐츠." "A/B 테스트 결과를 보여주는 랜딩 페이지 히어로 섹션을 만들어 줘."

9. QA 체크리스트 (마지막 10%)

배포/커밋 전에 다음을 확인하세요:

타이포그래피: 하나의 패밀리만 사용되었나요? 최대 2개의 웨이트만? 트래킹 규칙이 적용되었나요?
컬러: 액센트는 하나뿐인가요? 의미적 색상이 올바른가요 (어두운 텍스트, 밝은 배경)?
간격: 4px 그리드를 따르고 있나요? 콘텐츠 주변에 충분한 여백이 있나요?
그림자: 부드럽고 레이어드되어 있나요? 헤어라인을 사용했나요?
모션: 장식용이 아닌가요? 지속 시간이 짧은가요? 이징이 올바른가요?
반응형: 모바일/태블릿/데스크톱에서 잘 보이나요?
접근성: 충분한 대비가 있나요? 포커스 상태가 있나요?
일관성: 모든 컴포넌트가 같은 스타일 가이드를 따르나요?

10. 크레딧 및 출처

디자인 영감: @marcelkargul (Kargul Studio)
관찰 및 추론: 이 SKILL.md 문서는 그의 공개 게시물과 비디오에서 관찰된 패턴을 기반으로 합니다.
모션 원칙: Emil Kowalski, Apple HIG, Framer Motion 문서.
이 스킬은 학습 목적으로 설계되었으며, 디자인 작업의 품질과 일관성을 높이는 데 도움을 줍니다.

GIGA UI: calm, precise, alive