Component HIG
OnetheThemeComponent Preview
모든 UI 컴포넌트를 상태별로 확인합니다.
Inputs
States
Button States
Input States
필수 항목입니다.
Feedback
Banner (Alert)
Info
정보 알림 메시지입니다.
Success
작업이 완료되었습니다.
Warning
주의가 필요합니다.
Error
오류가 발생했습니다.
Snackbar
Chip (Badge)
Progress Bar
Spinner
Skeleton Loading
Layout
Card
Elevated Card
카드 설명 텍스트가 들어갑니다.
Filled Card
아이콘이 포함된 피처 카드 스타일.
Tonal Card
톤 배경으로 강조된 카드.
Modal (Dialog)
Modal Title
정말로 이 항목을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
Tabs
Tab 1 패널의 콘텐츠가 여기에 표시됩니다.
Pill Tabs
Drawer
Drawer Menu
Accordion
Accordion Item 1
FAQ: 설치 방법
FAQ: 커스터마이징
FAQ: 브라우저 지원
Tooltip
Button Tooltips
Direction Variants
Color Variants
Search Bar
Default Search
With Suggestions
Filter Tags
Advanced Data Table
Sortable & Filterable Table
| 이름 | 이메일 | 역할 | 상태 | 가입일 | |
|---|---|---|---|---|---|
|
김 김지수 |
jisoo@example.com | 관리자 | Active | 2024-01-15 | |
|
이 이민호 |
minho@example.com | 편집자 | Active | 2024-03-22 | |
|
박 박서연 |
seoyeon@example.com | 뷰어 | Pending | 2024-06-10 | |
|
최 최현우 |
hyunwoo@example.com | 편집자 | Inactive | 2023-11-05 | |
|
정 정수빈 |
subin@example.com | 관리자 | Active | 2024-08-18 | |
|
한 한소희 |
sohee@example.com | 뷰어 | Active | 2024-09-01 | |
|
강 강다니엘 |
daniel@example.com | 편집자 | Active | 2024-05-14 | |
|
윤 윤아름 |
areum@example.com | 관리자 | Active | 2024-02-28 |
Image Gallery
Masonry Grid
Carousel
Image Slider
Aurora Theme
인디고 & 앰버 색상의 모던 테마
Component Pack
12개의 페이지 섹션 컬렉션
UI Kit
18개 개별 UI 컴포넌트 카탈로그
Apple HIG
HIG 디자인 시스템 + 컴포넌트
Rich Text Editor
Full Editor
OnetheTheme
이것은 리치 텍스트 에디터 컴포넌트의 미리보기입니다. 실제 프로젝트에서 contenteditable 또는 전문 에디터 라이브러리를 사용할 수 있습니다.
- 서식 도구 모음 (Bold, Italic, Underline, Strikethrough)
- 정렬 옵션 (왼쪽, 가운데, 양쪽)
- 링크, 이미지, 코드 블록 삽입
- Undo / Redo 지원
에디터에서 자유롭게 텍스트를 입력하고 서식을 적용해보세요.
Preview
컴포넌트들을 조합하여 실제 서비스에서 사용되는 페이지 형태로 구성한 샘플입니다.
Dashboard
통계 카드, 데이터 테이블, 차트 영역을 조합한 관리자 대시보드 레이아웃.
Overview
24,580
+12.5% from last month
$48,290
+8.2% from last month
1,842
-3.1% from last month
3.24%
+0.8% from last month
Revenue Overview
Recent Activity
New order #1284 placed
2 min ago
User "emily_k" registered
15 min ago
Server CPU usage at 89%
32 min ago
Payment failed for #1279
1 hr ago
Recent Orders
| Order | Customer | Amount | Status |
|---|---|---|---|
| #1284 | Kim Minjun | $320.00 | Completed |
| #1283 | Lee Soojin | $185.50 | Pending |
| #1282 | Park Jiwoo | $540.00 | Shipping |
| #1281 | Choi Yuna | $92.00 | Cancelled |
Settings
프로필 편집, 알림 설정, 계정 관리를 포함한 설정 페이지 레이아웃.
Account Settings
Manage your profile, notifications, and preferences.
Profile Information
Jung Kihoon
kihoon@example.com
Notifications
Email Notifications
Receive email updates for new activity
Push Notifications
Get push notifications on your devices
Marketing Emails
Receive tips, product updates, and offers
Danger Zone
Once you delete your account, there is no going back. Please be certain.
Article
Hero, 본문, 이미지 갤러리, 댓글, 관련 글을 포함한 블로그 아티클 레이아웃.
Building Modern UIs with Apple HIG
A comprehensive guide to Apple's Human Interface Guidelines
Song Yerin
Feb 14, 2026 · 8 min read
Apple's Human Interface Guidelines (HIG) represent the gold standard for platform-native design. With its emphasis on clarity, deference, and depth, HIG provides a comprehensive framework for building beautiful, intuitive user interfaces.
Key Principles
The new system is built around three core principles that guide every design decision:
Note
Apple HIG recommends using system colors and SF Symbols for consistent cross-platform experiences across iOS, macOS, and visionOS.
- Clarity — Text is legible, icons are precise, and adornments are subtle
- Deference — Fluid motion and crisp interfaces help people understand content
- Depth — Visual layers and realistic motion convey hierarchy and facilitate understanding
Component Showcase
Here's a quick look at the updated component library:
Button Variants
<button class="px-5 py-2.5 bg-brand text-white
rounded-lg text-sm font-medium">
Filled Button
</button>
The rounded-lg class creates the distinctive rounded rectangle shape that defines HIG buttons, while the system color palette provides consistent, accessible color combinations across all Apple platforms.
Gallery
Comments (3)
Kim Minjun
2 hours ago
Great article! The dynamic color feature is really exciting. Can't wait to try it in my next project.
Lee Hyunee
5 hours ago
The rounded rectangle buttons look so clean. Apple HIG brings a refined, native feel to every element.
Related Articles
System Colors in HIG: A Deep Dive
5 min read
Designing for iOS and macOS with HIG
12 min read
Tailwind + Apple HIG: Best Practices
7 min read
Storybook Component Token
Addon컴포넌트별 디자인 토큰 매핑을 확인합니다. 각 컴포넌트가 사용하는 토큰과 실제 렌더링을 비교할 수 있습니다.