# Ionic Framework 디자인 시스템 ## Ionic Framework 디자인 시스템 인터페이스 미리보기 서체를 전환하고, 키보드로 글자 크기를 바꾸고, 따뜻한 종이 색상을 켜고, 로컬 설정 스냅샷을 저장해 보세요. ## Ionic Framework 디자인 시스템 설계 참고 자료 Ionic Vue/Core 9.0.6을 확인했습니다. Core 색상은 설치된 core.css에서 가져옵니다. 데모에서 iOS 모드를 명시적으로 선택합니다. 읽기용 타이포그래피, 종이 색상, 주변 여백은 Ionic 기본값이 아닌 애플리케이션 고유 설정입니다. ### 기본 밝은 시맨틱 색상 역할 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --ion-color-primary | #0054e9 | 네이티브 기본 컨트롤입니다. | | --ion-color-primary-rgb | 0, 84, 233 | 불투명도 기반 계산에 사용하는 RGB 채널입니다. | | --ion-color-primary-contrast | #fff | 기본 색상 위에 표시되는 텍스트와 아이콘의 대비 색상입니다. | | --ion-color-primary-shade | #004acd | 어두운 기본 색상 변형입니다. | | --ion-color-primary-tint | #1a65eb | 밝은 기본 색상 변형입니다. | | --ion-color-secondary | #0163aa | 보조 역할입니다. | | --ion-color-tertiary | #6030ff | 3차 색상 역할입니다. | | --ion-color-success | #2dd55b | 성공 역할. | | --ion-color-warning | #ffc409 | 경고 역할입니다. | | --ion-color-danger | #c5000f | 위험 역할입니다. | ### 모드별 네이티브 범위 컨트롤 기하 설정 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | iOS --bar-height | 4px | 컴파일된 iOS 범위 컨트롤 기본값입니다. | | iOS --knob-size | 26px | 컴파일된 iOS 썸 크기입니다. | | MD --bar-height | 2px | 컴파일된 Material Design 모드 기본값입니다. | | MD --knob-size | 18px | 컴파일된 Material Design 썸 크기입니다. | | Application min / max / step | 16 / 26 / 1 | 정수형 읽기 글꼴 크기이며 실제 범위 컨트롤 속성입니다. | | snaps / ticks / pin | true / true / true | 표시되는 단계와 형식이 지정된 크기 피드백입니다. | ### 독창적인 읽기 및 레이아웃 비율 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | Reading font | Georgia, serif OR system-ui, sans-serif | 네이티브 세그먼트로 제어하며 기기에 이미 설치된 글꼴을 사용합니다. | | Reading size | 16–26px; default 18px | 문서에 직접 적용됩니다. | | Reading line-height | 1.65 | 독창적으로 설정한 편안한 본문 폭입니다. | | Article heading | 1.9em / 1.15; 1.6em below 360px | 독자가 선택한 본문 글자 크기에 따라 조정됩니다. | | Control/body font | system-ui, sans-serif | 애플리케이션에서 명시적으로 선택한 글꼴입니다. | | Spacing | 10 / 12 / 14 / 16 / 20 / 22 / 24 / 28 / 32px | Ionic의 스케일이라고 주장하는 값이 아닌, 구체적이고 독창적인 스타일시트 값입니다. | | Layout | 300px settings + flexible article; stack at 760px | 두 열 모두 min-width:0을 사용합니다. | | Paper roles | #fff9eb warm; #ffffff white; #24362e ink | 네이티브 컨트롤 역할과 별개로 설정한 독창적인 콘텐츠 색상입니다. | | Card radius | 16px | 주변 패널의 독창적인 기하 설정입니다. | ## Ionic Framework 디자인 시스템 전체 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드. 완전한 안내와 구현 시작점, 소스 링크. ## Ionic Framework 디자인 시스템: 렌더링 모드를 신중하게 선택하기 ### 렌더링 모드를 신중하게 선택하기 > Ionic은 프레임워크 통합을 통해 웹 컴포넌트를 제공합니다. 이 샘플은 Ionic Vue 9.0.6을 사용하며 IonicVue 설정에서 mode를 ios로 지정합니다. 따라서 페이지를 확인하는 데스크톱 브라우저와 관계없이 세그먼트, 토글, 범위 컨트롤, 버튼에 일관된 플랫폼 스타일이 적용됩니다. 모드는 컴포넌트 렌더링 방식에 대한 설정이며 페이지를 네이티브 모바일 애플리케이션으로 바꾸지는 않습니다. 이 예제는 의도적으로 전체 화면 IonApp/IonContent 셸 대신 일반 main 요소를 사용합니다. 덕분에 컴포넌트 견본이 임베드된 리소스 페이지 안에서 콘텐츠에 맞게 표시됩니다. 실제 라우팅이 적용된 Ionic 애플리케이션은 전환에 필요한 IonPage를 포함해 프레임워크의 페이지 및 라우터 구조를 따라야 합니다. 지원 사양 읽기 ## Ionic Framework 디자인 시스템: Ionic 색상은 서로 연관된 변수군입니다 ### Ionic 색상은 서로 연관된 변수군입니다 설치된 코어 스타일시트에서 기본 색상은 #0054e9로 정의되며, 별도의 RGB 채널, 대비 색상, 명도 변화 색상, 틴트 값이 함께 제공됩니다. 컴포넌트는 상태에 따라 이와 연관된 값을 각각 사용할 수 있습니다. 기본 16진수 색상만 바꾸면 다른 상태의 색상과 일관성이 깨질 수 있으므로, 사용자 지정 브랜드 색상에는 전체 색상군을 정의해야 합니다. 이 견본은 네이티브 컨트롤에 기본 색상을 유지합니다. 따뜻한 종이 색상은 #fff9eb로 지정한 별도의 애플리케이션 표면이며, 문서 텍스트는 #24362e를 유지합니다. 페이지를 흰색으로 바꾸면 읽기 표면만 변경됩니다. 컨트롤 팔레트가 조용히 바뀌거나 Ionic의 전체 다크 팔레트를 구현했다고 주장하지 않습니다. 지원 사양 읽기 ## Ionic Framework 디자인 시스템: 독자의 글꼴 선택이 실제로 반영되도록 하기 ### 독자의 글꼴 선택이 실제로 반영되도록 하기 세그먼트를 사용하면 문서의 글꼴을 Georgia와 system-ui 사이에서 전환할 수 있습니다. 컨트롤 자체에는 계속 system-ui를 사용하므로, 레이블과 컨트롤 크기를 예상치 않게 바꾸지 않고 의도한 읽기 콘텐츠에만 선택 사항을 적용합니다. 외부 글꼴은 요청하지 않으며, 해당하는 로컬 글꼴 스택을 사용합니다. 텍스트 크기는 16~26픽셀의 정수입니다. 문서 제목은 이 크기에 비례하고 줄 높이는 1.65로 유지됩니다. 너비가 360px 미만이면 좁게 임베드된 열에서도 가장 큰 크기를 읽기 쉽도록 제목 비율을 1.6em으로 낮춥니다. 이는 Ionic 컴포넌트 기본값과 명확히 구분되는 애플리케이션 고유 값입니다. 지원 사양 읽기 ## Ionic Framework 디자인 시스템: 선택 상태를 제어하고 네이티브 시맨틱을 갖춘 세그먼트 ### 선택 상태를 제어하고 네이티브 시맨틱을 갖춘 세그먼트 IonSegment는 현재 face 값을 받고 두 개의 IonSegmentButton 자식 요소를 사용합니다. ionChange 이벤트에서 event.detail.value를 가져와 모델을 업데이트합니다. 각 버튼은 serif 또는 sans라는 고유하고 안정적인 값을 가지며, 표시 레이블로 선택 항목을 설명합니다. aria-labelledby를 사용해 전체 컨트롤에 문단 레이블을 지정합니다. 실제 접근성 트리에는 일반 버튼 그룹이 아닌 선택된 탭이 있는 tablist가 노출됩니다. 따라서 로컬 상호작용 테스트에서는 네이티브 Sans 탭을 대상으로 삼고 읽기 글꼴이 바뀌는지 확인합니다. 버튼 두 개를 세그먼트처럼 보이도록 꾸미는 것만으로는 동일한 선택 동작을 구현할 수 없습니다. 지원 사양 읽기 ## Ionic Framework 디자인 시스템: 범위 이벤트와 제약 조건을 하나의 계약으로 다루기 ### 범위 이벤트와 제약 조건을 하나의 계약으로 다루기 IonRange에서 min, max, step을 명시적으로 설정합니다. 기본 0~100 범위에 의존하면 유용한 글자 크기 조절을 표현할 수 없습니다. 스냅과 눈금으로 선택 가능한 단계를 보여 주고, 핀 포맷터는 조작 중 표시되는 값 뒤에 px를 붙입니다. 컨트롤 아래에 표시되는 글자 크기 레이블은 드래그를 멈춘 뒤에도 읽을 수 있습니다. 핸들러는 ionChange를 사용하고 값을 숫자로 변환합니다. 단일 노브에는 적절하지만, 노브가 두 개인 범위에서는 반환되는 값의 형태가 달라 별도의 처리가 필요합니다. 컴파일된 iOS 범위에서는 노브 크기가 26px, 막대 두께가 4px이고, Material 모드에서는 각각 18px와 2px입니다. 이러한 차이는 근거 없이 하나의 Ionic 토큰으로 통일하지 않고 그대로 기록합니다. 1. 텍스트 크기 슬라이더에 초점을 맞춘 다음 오른쪽 화살표를 여덟 번 눌러 26px로 설정합니다. 2. Sans를 선택하고 따뜻한 종이 배경을 끕니다. 3. 환경설정을 저장하고 서체, 크기, 종이 배경 스냅샷이 정확한지 확인합니다. 지원 사양 읽기 ## Ionic Framework 디자인 시스템 종이 배경 옵션을 켜고 끄면 표면에 즉시 반영하기 ### 종이 색상 선택에 따라 표면을 즉시 업데이트하기 IonToggle은 따뜻한 종이 배경 모델의 checked 값을 전달받습니다. 이벤트의 detail.checked 값을 해당 불리언 상태에 바로 할당합니다. 표시되는 ‘따뜻한 종이 배경’ 레이블은 네이티브 스위치에 포함되어 있고, 옆의 설명은 이 옵션이 글의 표면을 바꾼다는 점을 알려 줍니다. 따뜻한 배경 클래스는 테두리를 없애거나 글의 내용을 바꾸지 않고 글 영역의 배경색만 변경합니다. 덕분에 의미 있는 비교가 가능합니다. 또한 종이 색조 환경설정을 플랫폼 수준의 라이트/다크 설정과 혼동하지 않도록 합니다. 플랫폼 설정을 바꾸려면 더 많은 Ionic 표면 및 텍스트 변수를 조정해야 합니다. 지원 사양 읽기 ## Ionic Framework 디자인 시스템 저장된 스냅샷과 적용 중인 환경설정을 분리하기 ### 적용된 설정과 저장된 스냅샷 구분하기 각 설정은 글에 즉시 적용됩니다. ‘환경설정 저장’은 읽을 수 있는 스냅샷을 로컬 반응형 상태에 기록하고, 스냅샷이 현재 상태와 일치하는 동안 버튼을 비활성화합니다. 세 모델을 모두 감시하는 watcher는 설정이 하나라도 바뀌면 메시지를 지웁니다. 따라서 이전 확인 메시지가 새 조합을 설명하는 것처럼 보이지 않습니다. ‘기본값 복원’을 누르면 서체는 serif, 크기는 18px, 종이 배경은 따뜻한 색으로 설정되고 저장 메시지는 지워집니다. 상태 메시지는 이 환경설정이 미리보기에만 적용된다는 점을 분명히 알립니다. 이 동작에는 localStorage 저장, 계정 설정 또는 네이티브 환경설정 플러그인이 없으며, 페이지를 새로 불러오면 기본값으로 시작합니다. 지원 사양 읽기 ## Ionic Framework 디자인 시스템 네이티브 Shadow DOM 컨트롤을 유지하면서 구성 스타일 적용하기 ### 네이티브 Shadow DOM 컨트롤을 유지하면서 구성 스타일 적용하기 범위 컨트롤에는 ‘텍스트 크기’라는 레이블이 표시되고, 토글에는 자체 텍스트 레이블이 포함되며, 세그먼트에는 ‘서체’라는 레이블이 연결됩니다. 원본 일러스트에는 aria-hidden이 적용됩니다. 저장 피드백에는 role=status를 사용하고, 글은 일반적인 의미 구조를 갖춘 HTML로 유지하여 제목과 문단을 독자의 일반적인 문서 탐색 흐름에 따르게 합니다. Ionic 컴포넌트는 shadow DOM 안에 내부 마크업을 캡슐화합니다. 이 예제는 내부 비공개 클래스를 조회하지 않고 공개 속성, 이벤트, 문서화된 CSS 사용자 지정 속성을 사용합니다. 주변 페이지는 콘텐츠 높이를 사용하고 최소 너비를 0으로 설정합니다. 280px 너비에서 확인하면 독립형 휴대전화 스크린샷만으로는 놓칠 수 있는 임베드 너비 문제를 발견할 수 있습니다. - 네이티브 컴포넌트의 레이블 연결을 유지합니다. - shadow DOM 내부를 변경하지 말고 공개 속성과 이벤트를 사용합니다. - 키보드로 크기를 변경하면서 글에 반영되는지 함께 확인합니다. 지원 사양 읽기 ## Ionic Framework 디자인 시스템 Vue 통합을 설치하고 핵심 CSS 포함하기 ### Vue 통합을 설치하고 Core CSS 포함하기 완성된 진입점은 IonicVue를 등록하고 원본 스타일시트보다 먼저 @ionic/vue/css/core.css를 가져옵니다. 설치된 Vue 패키지는 vue-router도 가져오므로, 이 임베드 예제에서 내비게이션을 설정하지 않더라도 재현 가능한 의존성 명령에 vue-router를 포함합니다. 이 피어 의존성을 누락하면 로컬 번들에서 모듈을 찾지 못해 빌드가 실패했습니다. 두 가지 완성 예제에는 App.vue와 style.css가 포함됩니다. 표준 Vite Vue 프로젝트는 SFC와 네이티브 컴포넌트 가져오기를 컴파일합니다. 독립형 리소스 미리보기는 컴파일 결과인 JavaScript와 CSS을 컴포넌트 구현을 포함해 로컬에서 번들링하므로, 컨트롤을 변경해도 외부 CDN 요청이 필요하지 않습니다. 지원 사양 읽기 ## Ionic Framework 디자인 시스템 컴포넌트 예제 ### 완성된 읽기 환경설정 SFC 네이티브 IonSegment, IonRange, IonToggle, IonButton으로 새로 작성한 짧은 글을 조작합니다. ``` ``` 코드 참조 - 범위 값은 ionChange를 통해 커밋되며, e.detail.value는 숫자로 변환됩니다. - 환경설정을 하나라도 변경하면 저장된 스냅샷이 지워집니다. - 저장은 로컬 반응형 상태로 처리되며, 기기 저장소나 서버 요청을 사용하지 않습니다. ### 완성된 원본 레이아웃 스타일시트 콘텐츠 높이에 맞춘 임베드, 좁은 화면에서 세로로 쌓이는 레이아웃, 컴포넌트 shadow root에 접근하지 않고 독자가 선택한 타이포그래피를 적용합니다. ``` html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{font-family:system-ui,sans-serif;color:#24362e;background:#f2f5f3}.reader-shell{max-width:1120px;margin:auto;padding:32px}.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:700;color:#52695c}h1{font-size:34px;line-height:1.15;max-width:660px;margin:12px 0}header>p:last-child{font-size:15px;line-height:1.6;max-width:660px;color:#56675e}.reader-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;margin-top:28px}.preferences{background:white;border:1px solid #dbe3de;border-radius:16px;padding:22px;align-self:start;min-width:0}.preferences h2{font-size:19px;margin:0 0 22px}.label{font-size:14px;font-weight:600;margin-bottom:10px}ion-segment{margin-bottom:20px}ion-range{padding:12px 0 0;--bar-height:4px}.scale{display:flex;justify-content:space-between;font-size:12px;color:#52695c;margin:0 0 24px}.paper-toggle{border-top:1px solid #e4e9e6;padding-top:20px;margin-bottom:20px}.paper-toggle ion-toggle{width:100%;font-size:14px}.paper-toggle p{font-size:12px;line-height:1.6;color:#5a6b61}.save-result{font-size:12px;line-height:1.6;color:#46614f;min-height:38px}.reading-paper{background:white;border:1px solid #dce3dd;border-radius:16px;padding:28px;line-height:1.65;min-width:0;overflow-wrap:anywhere;transition:background .2s}.reading-paper.warm{background:#fff9eb}.reading-paper h2{font-size:1.9em;line-height:1.15;margin:14px 0 24px;font-weight:400}.reading-paper p{margin:0 0 1.2em}.article-kicker{font-family:system-ui,sans-serif;font-size:10px;letter-spacing:.15em}.paper-art{height:112px;background:#dce8d9;border-radius:8px;position:relative;overflow:hidden;margin-bottom:24px}.paper-art span{position:absolute;width:150px;height:150px;background:#a4baa2;border-radius:50%;right:15%;top:35px}.paper-art i{position:absolute;width:130px;height:70px;background:#f3e0a8;border-radius:50% 50% 0 0;right:25%;top:48px}.paper-art b{position:absolute;width:60px;height:130px;transform:rotate(24deg);background:#64816b;left:15%;top:38px;border-radius:50% 50% 0 0}.reading-paper footer{font:11px/1.6 system-ui,sans-serif;border-top:1px solid #deded3;padding-top:18px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}.reading-paper ion-chip{font-size:11px;margin:0}@media(max-width:760px){.reader-shell{padding:20px}.reader-layout{grid-template-columns:minmax(0,1fr)}h1{font-size:29px}}@media(max-width:360px){.reader-shell{padding:14px}.preferences,.reading-paper{padding:16px}.reader-layout{gap:18px}.reading-paper h2{font-size:1.6em}} ``` 코드 참조 - 범위 컨트롤에는 문서화된 --bar-height 사용자 지정 속성을 사용합니다. - 글에 포함된 모든 일러스트는 독창적으로 제작한 CSS이며 장식용으로 표시됩니다. ## Ionic Framework 디자인 시스템 AI 에이전트 설정 ### 구현 시작점 Ionic Vue/Core 9.0.6을 확인했습니다. 완성된 SFC와 스타일시트는 위에 있으며, 미리보기에는 라우팅된 페이지가 없지만 통합 의존성으로 vue-router를 설치합니다. ``` // Start with: npm create vite@latest ionic-reader -- --template vue // cd ionic-reader && npm install // npm install @ionic/vue@9.0.6 @ionic/core@9.0.6 vue-router@4 // Save the complete examples as src/App.vue and src/style.css. // src/main.js: import {createApp} from 'vue'; import {IonicVue} from '@ionic/vue'; import '@ionic/vue/css/core.css'; import './style.css'; import App from './App.vue'; createApp(App).use(IonicVue, {mode:'ios'}).mount('#app'); // The Vite index.html must contain: //
// Run: npm run dev ``` ### 프로젝트를 위한 프롬프트 ``` 제공된 읽기 환경설정 예제를 Ionic Vue/Core 9.0.6의 명시적인 iOS 모드에서 구현합니다. 글꼴 선택에는 네이티브 Segment, 텍스트 크기에는 Range, 종이 배경에는 Toggle, 작업에는 Button을 사용하고 실제 글 스타일과 연결합니다. 크기 범위 16~26px를 유지하고 변경 사항을 로컬 저장 환경설정 스냅샷에 반영합니다. IonicVue 설정, 필수 CSS 및 vue-router 피어 의존성을 포함합니다. 임베드 안에 전체 화면 셸을 추가하지 말고 콘텐츠 높이에 맞춘 구성을 유지합니다. 검사 결과는 업로드되지 않으며 원격 계정도 변경하지 않습니다. ``` ## Ionic Framework 디자인 시스템 출처 및 범위 Ionic Vue/Core 9.0.6, iOS 모드. 글, 일러스트, 읽기 크기, 따뜻한 종이 배경 색상은 직접 제작했습니다. 저장은 로컬 반응형 상태로 처리되며 페이지를 새로 불러와도 유지되지 않습니다. 이 임베드 컴포넌트 예제는 라우팅을 포함한 완전한 앱이나 네이티브 기기용 Ionic 앱이 아닙니다. - Vue 통합 플러그인, 컴포넌트 가져오기, 전체 애플리케이션 구조입니다. - 색상 계열 기본, 대비, 음영, 색조, RGB 역할입니다. - CSS 변수 전역 및 컴포넌트 사용자 지정 속성입니다. - 세그먼트 선택 모델 및 세그먼트 이벤트입니다. - 범위 입력 레이블, 단계, 눈금, 핀, 이벤트 값 형식입니다. - 토글 선택됨 상태 및 변경 이벤트. - Button 확장, 채우기 및 비활성화 상태. - Shadow parts 스타일을 적용할 수 있는 범위. ## Ionic Framework 디자인 시스템 관련 리소스 ### Kobalte Kobalte는 Solid용 헤드리스 컴포넌트를 제공합니다. 여기에는 입력값과 서식이 적용된 값이 분리된 숫자 필드, 구조가 명확한 복합 체크박스, 눌림 상태를 지원하는 버튼이 포함됩니다. 이 가이드에서는 파생 수량과 초기화 가능한 재료 선택 항목을 갖춘 레시피 배율 조정기를 통해 이러한 기본 요소를 Solid 시그널과 연결합니다. ### Mantine 기본 참가자 표와 일정 관리 드로어를 중심으로 구성한 Mantine 9 참조입니다. 실제 테마 스케일을 살펴보고, useForm을 TextInput, Select, Checkbox, DatePickerInput에 연결한 뒤 로컬 레코드를 추가하기 전에 유효성 검사를 시험해 보세요. ### Melt UI Melt UI의 스토어/액션 빌더는 사용자가 소유한 Svelte 마크업에 접근성 동작을 연결합니다. 이 가이드에서는 @melt-ui/svelte 0.86.6을 사용해 속성, 액션, 쓰기 가능한 스토어를 통해 라디오, 슬라이더, 스위치 빌더를 연결합니다. 이는 최신 runes API와는 별개입니다. - [구현 레퍼런스](https://ionicframework.com/docs/vue/quickstart) - [출처](https://ionicframework.com/docs/theming/colors) - [출처](https://ionicframework.com/docs/api/range) - [출처](https://ionicframework.com/docs/theming/css-variables) - [지원 사양 읽기](https://ionicframework.com/docs/vue/quickstart) - [지원 사양 읽기](https://ionicframework.com/docs/theming/colors) - [지원 사양 읽기](https://ionicframework.com/docs/theming/css-variables) - [지원 사양 읽기](https://ionicframework.com/docs/api/segment) - [지원 사양 읽기](https://ionicframework.com/docs/api/range) - [지원 사양 읽기](https://ionicframework.com/docs/api/toggle) - [지원 사양 읽기](https://ionicframework.com/docs/api/button) - [지원 사양 읽기](https://ionicframework.com/docs/theming/css-shadow-parts) - [코드 참조](https://ionicframework.com/docs/api/range) - [코드 참조](https://ionicframework.com/docs/theming/css-variables) - [Vue 통합 플러그인, 컴포넌트 가져오기, 전체 애플리케이션 구조입니다.](https://ionicframework.com/docs/vue/quickstart) - [색상 계열 기본, 대비, 음영, 색조, RGB 역할입니다.](https://ionicframework.com/docs/theming/colors) - [CSS 변수 전역 및 컴포넌트 사용자 지정 속성입니다.](https://ionicframework.com/docs/theming/css-variables) - [세그먼트 선택 모델 및 세그먼트 이벤트입니다.](https://ionicframework.com/docs/api/segment) - [범위 입력 레이블, 단계, 눈금, 핀, 이벤트 값 형식입니다.](https://ionicframework.com/docs/api/range) - [토글 선택됨 상태 및 변경 이벤트.](https://ionicframework.com/docs/api/toggle) - [Button 확장, 채우기 및 비활성화 상태.](https://ionicframework.com/docs/api/button) - [Shadow parts 스타일을 적용할 수 있는 범위.](https://ionicframework.com/docs/theming/css-shadow-parts)