tangmyy/apple-ui-design

Apple UI 디자인

Apple에서 영감을 받은 깔끔하고 미니멀하며 프리미엄한 UI 디자인 시스템입니다.

사용 시기

• 뛰어난 UX가 필요한 현대적인 인터페이스 구축
• 깔끔하고 미니멀한 미학 창출
• Apple 스타일의 세련미와 애니메이션 구현
• 프리미엄 사용자 경험 디자인
• 디자인 품질을 위한 UI/UX 검토

워크플로우

1단계: 타이포그래피 시스템 적용

SF Pro Display를 적절한 계층 구조(히어로, 제목, 본문, 캡션)와 함께 사용하세요.

2단계: 색상 철학 적용

적절한 대비를 가진 라이트/다크 모드 변수를 사용하세요.

3단계: 간격 시스템 적용

4/8/16/24/48/96px 간격 리듬을 따르세요.

4단계: 체크리스트 확인

터치 대상, 대비, 애니메이션이 기준을 충족하는지 확인하세요.

---

핵심 원칙

1. 명확성 - 내용이 핵심이며, UI는 사라집니다.
2. 순응 - UI는 내용을 따르며, 결코 경쟁하지 않습니다.
3. 깊이 - 레이어링이 계층을 만듭니다.

타이포그래피

font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;

/* 계층 구조 */
--text-hero: 600 48px/1.1;      /* 대담한 진술 */
--text-title: 600 32px/1.2;     /* 섹션 제목 */
--text-body: 400 17px/1.5;      /* 읽기 쉬운 내용 */
--text-caption: 400 13px/1.4;   /* 보조 정보 */

색상 철학

/* 라이트 모드 */
--bg-primary: #ffffff;
--bg-secondary: #f5f5f7;
--text-primary: #1d1d1f;
--text-secondary: #86868b;
--accent: #0071e3;

/* 다크 모드 */
--bg-primary: #000000;
--bg-secondary: #1d1d1f;
--text-primary: #f5f5f7;

간격 시스템

--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
--space-2xl: 96px;   /* 섹션 간격 */

주요 패턴

카드

.card {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

버튼

.btn-primary {
  background: var(--accent);
  color: white;
  padding: 12px 24px;
  border-radius: 980px;  /* 필 모양 */
  font-weight: 500;
  transition: all 0.2s ease;
}
.btn-primary:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}

미묘한 애니메이션

/* 마이크로 인터랙션 */
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);

/* 페이지 요소 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

UX 규칙

Do	Don't
넉넉한 여백	좁은 레이아웃
하나의 기본 동작	여러 개의 경쟁 CTA
점진적 공개	모든 것을 한 번에 표시
미묘한 피드백	거슬리는 애니메이션
시스템 폰트	장식용 폰트

체크리스트

• 터치 대상 ≥ 44px
• 대비 비율 ≥ 4.5:1
• 최대 콘텐츠 너비 ~680px
• 일관된 간격 리듬
• 다크 모드 지원
• 부드러운 60fps 애니메이션