# UIkit 디자인 시스템

## UIkit 디자인 시스템 인터페이스 미리보기

세 가지 세션을 전환하고, 준비 세부 정보를 펼치고, 세션을 선택한 다음 로컬 참석자 계획을 확인하세요.

## UIkit 디자인 시스템 디자인 참조

UIkit 3.25.25 Less 소스 및 컴파일된 기본 CSS. @로 시작하는 이름은 컴파일 시점의 Less 변수이며, 런타임 CSS 사용자 지정 속성이 아닙니다. 미리보기에는 별도로 명시한 화면별 재정의가 추가됩니다.

### 타이포그래피

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| @global-font-family | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | 기본 시스템 글꼴 스택. |
| @global-font-size | 16px | 기본 글자 크기. |
| @global-line-height | 1.5 | 본문 행간. |
| @global-large-font-size | 1.5rem | 큰 텍스트 헬퍼. |
| @global-medium-font-size | 1.25rem | 중간 텍스트 헬퍼. |
| @global-small-font-size | 0.875rem | 작은 텍스트 헬퍼. |
### 색상 역할

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| @global-color | #666 | 기본 텍스트. |
| @global-emphasis-color | #333 | 강조 텍스트와 제목. |
| @global-muted-color | #999 | 기본 보조 텍스트 색상. 미리보기에서는 메타데이터 색상을 #65717a로 재정의합니다. |
| @global-link-color | #1e87f0 | 기본 링크 스타일. |
| @global-background | #fff | 기본 페이지/표면 배경. |
| @global-muted-background | #f8f8f8 | 차분한 타일/표면. |
| @global-primary-background | #1e87f0 | 주요 강조 표면. |
| @global-secondary-background | #222 | 어두운 보조 표면. |
| @global-border | #e5e5e5 | 중립 테두리. |
### 간격 및 컨트롤

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| @global-margin | 20px | 기본 여백 간격. |
| @global-small-margin | 10px | 작은 여백. |
| @global-medium-margin | 40px | 중간 여백. |
| @global-large-margin | 70px | 큰 여백. |
| @global-gutter | 30px | 기본 그리드 거터. |
| @global-small-gutter | 15px | 작은 그리드 거터. |
| @global-medium-gutter | 40px | 중간 그리드 거터. |
| @global-control-height | 40px | 일반 입력/버튼 높이. |
| @global-control-small-height | 30px | 작은 컨트롤 높이입니다. |
| @global-control-large-height | 55px | 큰 컨트롤 높이입니다. |
### 반응형 구간

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| @breakpoint-small | 640px | @s 너비 규칙 시작. |
| @breakpoint-medium | 960px | @m 너비 규칙 시작. 플래너 2열 레이아웃. |
| @breakpoint-large | 1200px | @l 너비 규칙 시작. |
| @breakpoint-xlarge | 1600px | @xl 너비 규칙 시작. |
### 원본 워크숍 개선 사항

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Heading | 42px; 34px below 640px | uk-heading-small의 명시적 로컬 재정의. |
| Card padding | 28px; 20px below 640px | 명시적인 로컬 컴팩트 구성. |
| Metadata color | #65717a | 밝은 표면에서 더 어두운 로컬 메타데이터 텍스트. |
| Focus outline | 3px solid #145ca5, offset 4px | 탭, 아코디언 제목, 버튼에 키보드 포커스 강조 표시를 추가했습니다. |
## UIkit 디자인 시스템 전체 가이드

실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.

완전한 안내와 구현 시작점, 소스 링크.

## UIkit 디자인 시스템: CSS 클래스와 속성 기반 동작

### CSS 클래스와 속성 기반 동작

> UIkit는 CSS 프레임워크와 JavaScript 컴포넌트 계층을 결합합니다. uk-card 클래스는 표면을 스타일링하고, uk-switcher 속성은 인터랙티브 컴포넌트를 초기화합니다. 워크숍 예제에서 이 차이를 확인할 수 있습니다. 카드와 폼 컨트롤은 CSS만으로 렌더링할 수 있지만, 세션 전환과 아코디언 펼치기에는 UIkit JavaScript 번들이 필요합니다.

미리보기는 실제 3.25.25 컴파일 스타일시트와 런타임을 로컬에서 불러옵니다. 세 가지 세션은 길이와 레이아웃이 서로 다르므로, 전환하면 겉보기에 같은 카드의 레이블만 바뀌는 것이 아니라 실제 콘텐츠 동작을 확인할 수 있습니다. 로컬 참석자 계획 스크립트는 UIkit 런타임과 별개이며 전체 코드가 포함되어 있습니다.

지원 사양 읽기

## UIkit 디자인 시스템: Less 변수와 런타임 스타일링

### Less 변수와 런타임 스타일링

@로 시작하는 참조 이름은 Less 변수입니다. 이 변수는 컴파일 중에 해석되므로, 일반 브라우저 스타일시트에 @global-primary-background를 넣어도 런타임 테마는 바뀌지 않습니다. 표에는 설치된 소스에서 확인한 값이 기재되어 있으며, 미리보기는 패키지에 사전 컴파일된 기본 CSS를 사용합니다.

브랜드에 맞는 UIkit 테마를 만들려면 문서화된 Less 가져오기/커스터마이징 파이프라인을 사용해 다시 컴파일하세요. 페이지에 한정된 세부 조정에는 공식 스타일시트 뒤에 일반 CSS를 추가해 클래스에 적용할 수 있습니다. 이 예제에서는 두 번째 방법으로 제목 크기, 카드 패딩, 메타데이터 색상을 조정합니다. 이러한 재정의가 새로운 공식 UIkit 토큰이라고 주장하는 것은 아닙니다.

지원 사양 읽기

## UIkit 디자인 시스템: 텍스트, 색상 및 표면 계층

### 텍스트, 색상 및 표면 계층

기본 전역 글꼴은 16픽셀 크기에 행간 1.5를 적용한 시스템 글꼴 스택입니다. 기본 주요 배경색은 #1e87f0이고, 보조 색상은 어두운 중성색이며, 차분한 표면 색상은 #f8f8f8입니다. 이러한 역할 구분으로 주요 선택 동작은 절제된 설명 타일과 뚜렷이 구별됩니다. 제공된 사양 표에는 장식용 4색 팔레트가 아니라 텍스트 색상과 표면 색상이 모두 포함되어 있습니다.

워크숍에서는 크기를 넉넉하게 설정하되 최대 너비를 제한한 제목, 작은 프로그램 레이블, 각 세션 카드 안의 제목을 사용합니다. 메타데이터 색상은 로컬에서 더 어두운 #65717a로 조정됩니다. 준비 타일에는 직접 지정한 옅은 파란색 표면과 일반적인 어두운 텍스트를 사용합니다. 어두운 배경이라고 해서 자동으로 반전된다고 가정하지 않습니다. 어두운 배경에는 적절한 UIkit 반전 스타일이나 명시적으로 어울리게 지정한 텍스트 스타일이 필요합니다.

지원 사양 읽기

## UIkit 디자인 시스템: 세션 탐색과 콘텐츠 연결

### 세션 탐색과 콘텐츠 연결

탐색 목록에는 connect: #sessions와 fade 애니메이션을 지정한 uk-switcher가 있습니다. 콘텐츠 목록에는 uk-switcher 클래스와 일치하는 ID가 있습니다. 목록 순서에 따라 연결되므로 첫 번째 토글이 첫 번째 콘텐츠 항목을 제어합니다. 세션을 추가하거나 순서를 바꿀 때는 양쪽을 함께 수정해야 합니다. connect 선택자를 명시하여 바로 다음 형제 요소의 위치에 의존하지 않도록 합니다.

탐색에는 시각적 스타일을 위해 uk-tab을 사용합니다. UIkit가 활성 항목 상태와 관련 접근성 동작을 처리합니다. 원래 계획 상태는 의도적으로 이와 분리되어 있으므로, 다른 세션을 살펴봐도 그 세션이 자동으로 선택되지 않습니다. '세션 선택'을 눌렀을 때만 선택 레이블이 바뀌고 참석자 입력란으로 포커스가 이동합니다.

1. 프로토타이핑을 열어 고유한 콘텐츠를 확인하세요.

2. 해당 세션을 선택하고 아래에서 선택된 레이블을 확인하세요.

3. 선택하지 않은 채 시스템 클리닉으로 전환해 보세요. 로컬 계획에는 여전히 프로토타이핑이 표시됩니다.

지원 사양 읽기

## UIkit 디자인 시스템: 반응형 너비와 거터 적용 범위

### 반응형 너비와 거터 적용 범위

세션 콘텐츠는 uk-grid 안에서 uk-width-2-3@m 및 uk-width-1-3@m을 사용합니다. 중간 브레이크포인트인 960px에서는 콘텐츠와 준비 타일이 가로로 나뉩니다. 그보다 좁은 화면에서는 세로로 쌓입니다. 계획 섹션과 준비 섹션에도 같은 브레이크포인트에서 너비를 반씩 나누는 규칙을 적용하여, 작은 화면에서도 논리적인 소스 순서를 유지합니다.

UIkit의 그리드는 그리드 클래스에 맞는 거터 로직을 사용합니다. 예시에서는 주요 섹션에 uk-grid-medium을, 헤더에 uk-grid-small을 적용합니다. 그리드 자식 요소에 임의로 여백을 추가한 뒤 분할 너비의 합이 여전히 정확하다고 가정하지 마세요. 가장자리 여백은 바깥 컨테이너와 패딩으로 확보하고, 모바일에서는 카드 패딩과 제목 크기를 줄여 세부 조정합니다.

지원 사양 읽기

## 네이티브 컴포넌트 상태를 사용하는 UIkit 디자인 시스템 준비 세부 정보

### 네이티브 컴포넌트 상태를 활용한 준비 세부 정보

uk-accordion-default 클래스는 기본 스타일을 적용합니다. uk-accordion 속성에서 multiple: true를 설정하므로 준비 항목 하나를 열어도 다른 항목은 닫히지 않습니다. 각 항목에는 uk-accordion-title과 uk-accordion-content가 포함됩니다. 확장 상태와 콘텐츠 표시 여부는 런타임이 제어하며, CSS 클래스만으로는 이 동작을 구현할 수 없습니다.

두 질문은 서로 다른 실용적인 궁금증에 답합니다. 무엇을 가져와야 하는지, 그리고 현지 플래너가 좌석을 예약하는지에 관한 내용입니다. 두 번째 답변을 명확히 작성하면 외부 행사 예약이 이루어진다고 인터페이스가 암시하는 일을 방지할 수 있습니다. 이 경계는 아코디언 콘텐츠에만 나타나는 것이 아닙니다. 신청 상태에도 좌석이 예약되지 않았다고 표시됩니다.

- multiple: true를 사용하면 두 답변을 모두 열린 상태로 둘 수 있습니다.

- 제목과 콘텐츠는 동일한 아코디언 항목 안에 있어야 합니다.

- 각 제목에서 키보드 포커스 윤곽선이 계속 표시됩니다.

지원 사양 읽기

## UIkit 디자인 시스템에서 라이브러리의 외관과 애플리케이션 검증을 분리하기

### 라이브러리의 외관과 애플리케이션 검증 분리하기

참석자 입력란은 실제 레이블과 설명 텍스트를 포함하는 uk-form-controls 안에 uk-input을 사용합니다. 브라우저의 required 검증은 빈 양식의 제출을 막습니다. 애플리케이션에서는 공백만 입력했는지도 검사하고, 유효하지 않은 이벤트가 발생하면 uk-form-danger와 aria-invalid를 적용해 시각적 상태와 의미상 상태를 일치시킵니다. 입력을 수정하면 이전 오류가 지워집니다.

세션을 선택하면 로컬 선택 항목이 갱신되고 이름 입력란에 포커스가 이동합니다. 제출하면 참석자와 선택한 세션을 포함한 상태 메시지가 표시됩니다. 입력한 마크업이 실행되지 않도록 텍스트는 textContent로 삽입합니다. 이는 백엔드가 없는 로컬 플래너이므로 UIkit 양식에 등록, 저장 또는 알림 기능이 있다고 꾸며내지 않습니다.

지원 사양 읽기

## UIkit 디자인 시스템: CSS, 런타임, 애플리케이션 코드 순서로 불러오기

### CSS, 런타임, 애플리케이션 코드 순으로 로드

uikit@3.25.25를 설치하고 dist에 있는 컴파일된 CSS과 JavaScript를 로컬 에셋으로 복사합니다. 작은 레이아웃 오버라이드보다 먼저 CSS를 불러오고, app.js보다 먼저 uikit.min.js를 불러옵니다. 두 스크립트 모두 defer를 사용하면 파싱이 끝난 뒤에도 소스 순서가 유지됩니다. 본문 예시에 모든 컴포넌트 속성과 콘텐츠가 포함되어 있습니다.

이 페이지에서는 uk-icon을 사용하지 않으므로 아이콘 번들은 선택 사항입니다. 나중에 아이콘을 추가한다면 알맞은 아이콘 런타임을 불러오고, 아이콘만 있는 컨트롤에는 의미가 분명한 레이블을 지정하세요. 파일 이름이 같다는 이유만으로 최신 JavaScript 번들과 오래된 스타일시트를 함께 사용하지 마세요. 컴포넌트 구조와 스타일은 동일한 고정 버전 패키지에서 가져와야 합니다.

지원 사양 읽기

## 콘텐츠가 늘어나도 UIkit 디자인 시스템의 스위처 연결을 안정적으로 유지하세요

### 콘텐츠가 늘어나도 스위처 연결 유지

스위처는 탐색 항목과 콘텐츠 항목을 순서에 따라 연결합니다. 세션을 추가할 때는 양쪽에 같은 위치로 추가해야 하며, connect: #sessions는 명시적인 대상을 지정합니다. 한 페이지에서 서로 독립적인 스위처를 여러 개 사용한다면 대상마다 고유한 ID를 부여하고 초기화 속성에서도 해당 관계를 유지하세요.

선택한 워크숍은 활성 패널과 별도로 유지됩니다. 다른 세션을 둘러보더라도 플래너에서 이미 한 선택을 조용히 덮어쓰지 않아야 합니다. 패널에 긴 콘텐츠를 추가할 때는 새로 활성화된 패널에서 공유 반응형 그리드와 아코디언 콘텐츠를 확인하세요. 최초 패널의 크기만 조정하면 사용자가 전환할 때까지 레이아웃 문제가 드러나지 않을 수 있습니다.

지원 사양 읽기

## UIkit 디자인 시스템 컴포넌트 예시

### 네이티브 UIkit 속성을 사용하는 워크숍 페이지

스위처는 #sessions에 연결되고, 아코디언에서는 여러 섹션을 열 수 있으며, 그리드 너비는 @m에서 활성화됩니다.

```
<main class="uk-container uk-container-small uk-padding"><div class="uk-grid-small uk-flex-middle" uk-grid><div class="uk-width-1-1 uk-width-expand@s"><p class="uk-text-meta uk-text-uppercase">UIkit / Workshop program</p><h1 class="uk-heading-small">One afternoon.<br>Three ways to learn.</h1></div><div><span class="uk-label">Local planner</span></div></div><ul class="uk-tab uk-margin-medium-top" uk-switcher="connect: #sessions; animation: uk-animation-fade"><li><a href="#">Design critique</a></li><li><a href="#">Prototyping</a></li><li><a href="#">Systems clinic</a></li></ul><ul class="uk-switcher" id="sessions"><li><div class="uk-card uk-card-default uk-card-body"><div class="uk-grid-medium" uk-grid><div class="uk-width-2-3@m"><p class="uk-text-meta">13:00–14:00 / STUDIO A</p><h2 class="uk-card-title">A useful critique starts with context.</h2><p>Bring one interface and a question you cannot resolve alone. Practice separating observation, interpretation, and a proposed change.</p><ul class="uk-list uk-list-bullet"><li>Frame the user’s task before discussing style.</li><li>Compare two alternatives against the same goal.</li><li>Leave with one specific next experiment.</li></ul></div><div class="uk-width-1-3@m"><div class="uk-tile uk-tile-muted uk-padding-small"><strong>Bring with you</strong><p>A screenshot, a short task description, and one unresolved decision.</p><button class="uk-button uk-button-primary uk-width-1-1 choose" data-session="Design critique">Choose session</button></div></div></div></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">14:15–15:15 / STUDIO B</p><h2 class="uk-card-title">Prototype the difficult transition.</h2><p>Build a small interaction that covers an empty state, an interrupted action, and recovery. The target is a useful decision, not a polished full product.</p><p>Bring a laptop and a flow with one state transition you need to test.</p><button class="uk-button uk-button-primary choose" data-session="Prototyping">Choose session</button></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">15:30–16:30 / STUDIO A</p><h2 class="uk-card-title">Make the exception explicit.</h2><p>Compare two components that almost match. Decide whether their difference belongs in a token, a variant, a composition, or a one-off exception.</p><p>Bring a component screenshot and its current implementation constraints.</p><button class="uk-button uk-button-primary choose" data-session="Systems clinic">Choose session</button></div></li></ul><div class="uk-grid-medium uk-margin-medium-top" uk-grid><section class="uk-width-1-2@m"><h2 class="uk-h3">Plan details</h2><form class="uk-form-stacked" id="planner"><div class="uk-margin"><label class="uk-form-label" for="attendee">Attendee name</label><div class="uk-form-controls"><input class="uk-input" id="attendee" required placeholder="Your name" aria-describedby="name-help"></div><p id="name-help" class="uk-text-small">Use a name to label this local plan.</p></div><p>Selected: <strong id="chosen">Design critique</strong></p><button class="uk-button uk-button-secondary" type="submit">Add to local plan</button><p id="result" role="status" class="uk-text-small">No plan recorded yet.</p></form></section><section class="uk-width-1-2@m"><h2 class="uk-h3">Before you arrive</h2><ul class="uk-accordion-default" uk-accordion="multiple: true"><li><a class="uk-accordion-title" href="#">What should I prepare?</a><div class="uk-accordion-content"><p>Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.</p></div></li><li><a class="uk-accordion-title" href="#">Does this reserve a seat?</a><div class="uk-accordion-content"><p>No. This preview records a choice only in memory. It is not connected to an event or registration service.</p></div></li></ul></section></div><p class="uk-text-meta uk-margin-medium-top">Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.</p></main>
```

코드 참조

- uk-switcher 속성은 동작을 초기화하고, uk-switcher 클래스는 콘텐츠 컨테이너를 식별합니다.

- 이 구성에는 UIkit 아이콘 팩이 필요하지 않습니다.

### 기존 로컬 플래너 동작

세션 선택과 입력 검증은 네이티브 UIkit 상호작용과 함께 사용하는 애플리케이션 로직입니다.

```
const name=document.getElementById('attendee');const chosen=document.getElementById('chosen');const result=document.getElementById('result');document.querySelectorAll('.choose').forEach(button=>button.addEventListener('click',()=>{chosen.textContent=button.dataset.session;result.textContent='Choice updated. Add it to the local plan when ready.';name.focus()}));name.addEventListener('input',()=>{name.setCustomValidity('');name.classList.remove('uk-form-danger');name.removeAttribute('aria-invalid')});name.addEventListener('invalid',()=>{name.classList.add('uk-form-danger');name.setAttribute('aria-invalid','true')});document.getElementById('planner').addEventListener('submit',event=>{event.preventDefault();if(!name.value.trim()){name.setCustomValidity('Enter a non-empty name.');name.reportValidity();return;}result.textContent=name.value.trim()+' — '+chosen.textContent+' added to this local plan. No seat was reserved.';});
```

코드 참조

- 세션을 선택하면 참석자 입력란에 포커스가 이동합니다.

- 예약 서비스나 알림은 호출되지 않습니다.

### 화면별 세부 조정

UIkit 컴포넌트를 유지하면서 여백과 포커스를 소폭 조정합니다.

```
body{background:#fafafa}.uk-container-small{max-width:1040px}.uk-heading-small{font-size:42px}.uk-card-body{padding:28px}.uk-text-meta{color:#65717a}.uk-button{white-space:normal}.uk-tab{flex-wrap:wrap}.uk-card-title{font-size:24px;line-height:1.3}.uk-tile-muted{background:#edf3f8}.uk-button:focus-visible,.uk-tab a:focus-visible,.uk-accordion-title:focus-visible{outline:3px solid #145ca5;outline-offset:4px}@media(max-width:639px){.uk-padding{padding:20px}.uk-heading-small{font-size:34px}.uk-card-body{padding:20px}.uk-card-title{font-size:22px}}
```

코드 참조

- 이 오버라이드는 공식 기본 토큰 값이 아닙니다.

## UIkit 디자인 시스템 에이전트 설정

### 구현 시작점

제공된 화면별 세부 조정 사항은 style.css로, 로컬 플래너 동작은 app.js로 저장합니다. 스위처와 아코디언은 UIkit가 처리합니다. 이 구성에는 아이콘 번들이 필요하지 않습니다. HTML 래퍼에는 본문 마크업 전체가 포함됩니다. 제공된 상호작용 예시와 CSS 예시는 여기에서 참조하는 파일 이름으로 저장하세요.

```
<!-- npm install uikit@3.25.25
mkdir -p assets
cp node_modules/uikit/dist/css/uikit.min.css assets/
cp node_modules/uikit/dist/js/uikit.min.js assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Workshop planner</title>
<link rel="stylesheet" href="assets/uikit.min.css">
<link rel="stylesheet" href="style.css">
<script src="assets/uikit.min.js" defer></script>
<script src="app.js" defer></script></head>
<body><main class="uk-container uk-container-small uk-padding"><div class="uk-grid-small uk-flex-middle" uk-grid><div class="uk-width-1-1 uk-width-expand@s"><p class="uk-text-meta uk-text-uppercase">UIkit / Workshop program</p><h1 class="uk-heading-small">One afternoon.<br>Three ways to learn.</h1></div><div><span class="uk-label">Local planner</span></div></div><ul class="uk-tab uk-margin-medium-top" uk-switcher="connect: #sessions; animation: uk-animation-fade"><li><a href="#">Design critique</a></li><li><a href="#">Prototyping</a></li><li><a href="#">Systems clinic</a></li></ul><ul class="uk-switcher" id="sessions"><li><div class="uk-card uk-card-default uk-card-body"><div class="uk-grid-medium" uk-grid><div class="uk-width-2-3@m"><p class="uk-text-meta">13:00–14:00 / STUDIO A</p><h2 class="uk-card-title">A useful critique starts with context.</h2><p>Bring one interface and a question you cannot resolve alone. Practice separating observation, interpretation, and a proposed change.</p><ul class="uk-list uk-list-bullet"><li>Frame the user’s task before discussing style.</li><li>Compare two alternatives against the same goal.</li><li>Leave with one specific next experiment.</li></ul></div><div class="uk-width-1-3@m"><div class="uk-tile uk-tile-muted uk-padding-small"><strong>Bring with you</strong><p>A screenshot, a short task description, and one unresolved decision.</p><button class="uk-button uk-button-primary uk-width-1-1 choose" data-session="Design critique">Choose session</button></div></div></div></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">14:15–15:15 / STUDIO B</p><h2 class="uk-card-title">Prototype the difficult transition.</h2><p>Build a small interaction that covers an empty state, an interrupted action, and recovery. The target is a useful decision, not a polished full product.</p><p>Bring a laptop and a flow with one state transition you need to test.</p><button class="uk-button uk-button-primary choose" data-session="Prototyping">Choose session</button></div></li><li><div class="uk-card uk-card-default uk-card-body"><p class="uk-text-meta">15:30–16:30 / STUDIO A</p><h2 class="uk-card-title">Make the exception explicit.</h2><p>Compare two components that almost match. Decide whether their difference belongs in a token, a variant, a composition, or a one-off exception.</p><p>Bring a component screenshot and its current implementation constraints.</p><button class="uk-button uk-button-primary choose" data-session="Systems clinic">Choose session</button></div></li></ul><div class="uk-grid-medium uk-margin-medium-top" uk-grid><section class="uk-width-1-2@m"><h2 class="uk-h3">Plan details</h2><form class="uk-form-stacked" id="planner"><div class="uk-margin"><label class="uk-form-label" for="attendee">Attendee name</label><div class="uk-form-controls"><input class="uk-input" id="attendee" required placeholder="Your name" aria-describedby="name-help"></div><p id="name-help" class="uk-text-small">Use a name to label this local plan.</p></div><p>Selected: <strong id="chosen">Design critique</strong></p><button class="uk-button uk-button-secondary" type="submit">Add to local plan</button><p id="result" role="status" class="uk-text-small">No plan recorded yet.</p></form></section><section class="uk-width-1-2@m"><h2 class="uk-h3">Before you arrive</h2><ul class="uk-accordion-default" uk-accordion="multiple: true"><li><a class="uk-accordion-title" href="#">What should I prepare?</a><div class="uk-accordion-content"><p>Pick one concrete design decision. A small, well-described example is more useful than a whole product tour.</p></div></li><li><a class="uk-accordion-title" href="#">Does this reserve a seat?</a><div class="uk-accordion-content"><p>No. This preview records a choice only in memory. It is not connected to an event or registration service.</p></div></li></ul></section></div><p class="uk-text-meta uk-margin-medium-top">Official UIkit 3.25.25 CSS and JavaScript. Session content and plan behavior are original.</p></main>
</body></html>
```

### 프로젝트를 위한 프롬프트

```
제공된 워크숍 플래너를 확장할 때는 UIkit 3.25.25를 사용하세요. uk-switcher의 명시적 #sessions 연결, 순서가 일치하는 탐색 및 콘텐츠, 반응형 uk-grid 비율, 여러 항목을 열 수 있는 네이티브 아코디언을 유지하세요. 세션을 살펴보는 동작과 세션을 선택하는 동작은 분리해야 합니다. 세션을 선택하면 레이블이 지정된 참석자 입력란에 포커스가 이동해야 하며, 공백만 입력하고 제출하면 uk-form-danger와 aria-invalid가 표시되어야 합니다. 상태 메시지에는 선택한 세션과 참석자를 로컬 플랜으로 명시하고, 좌석이 예약되었다고 주장하지 않아야 합니다. 애플리케이션 스크립트보다 먼저 해당 UIkit 런타임을 불러오세요.
```

## UIkit 디자인 시스템의 출처와 범위

UIkit 3.25.25 네이티브 컴포넌트 참조입니다. Less 값은 컴파일 시 정의되며, 로컬 제목·패딩·포커스 오버라이드는 별도로 작성한 것입니다. 행사 예약은 수행되지 않습니다.

- Less 컴파일 시 적용되는 테마 변수입니다.

- Switcher 내비게이션과 콘텐츠가 연동되는 동작입니다.

- 아코디언 여러 항목 확장 및 구조

- 그리드 반응형 너비와 거터

- Form 입력 및 검증 클래스

- 설치 런타임 및 스타일시트 불러오기

## UIkit 디자인 시스템 관련 리소스

### Vant

Vant 4를 사용해 만든 모바일 주소 선택 흐름입니다. 실제 CSS 변수, 주소 식별 정보 관리, 필드 유효성 검사, 테마 전환, 로컬에만 저장한다는 명시적 안내를 포함합니다.

### Vuestic UI

출처를 확인한 밝은색 및 어두운색 프리셋, 접근성 있는 평점 레이블, 텍스트 영역 유효성 검사, 계산된 평균, 작성한 평가 내용을 보존하는 저장 상태를 갖춘 네이티브 Vuestic 평가 양식입니다.

### Web Awesome

Web Awesome의 실제 시맨틱 토큰을 살펴보세요. 네이티브 커스텀 요소 전반의 토큰과 범위가 지정된 모서리 및 여백 변경, shadow DOM 스타일 지정, 선택 동작, 입력 검증을 확인할 수 있습니다.


- [구현 레퍼런스](https://getuikit.com/docs/switcher)
- [출처](https://getuikit.com/docs/less)
- [출처](https://getuikit.com/docs/utility)
- [지원 사양 읽기](https://getuikit.com/docs/javascript)
- [지원 사양 읽기](https://getuikit.com/docs/less)
- [지원 사양 읽기](https://getuikit.com/docs/card)
- [지원 사양 읽기](https://getuikit.com/docs/switcher)
- [지원 사양 읽기](https://getuikit.com/docs/grid)
- [지원 사양 읽기](https://getuikit.com/docs/accordion)
- [지원 사양 읽기](https://getuikit.com/docs/form)
- [지원 사양 읽기](https://getuikit.com/docs/installation)
- [코드 참조](https://getuikit.com/docs/switcher)
- [코드 참조](https://getuikit.com/docs/form)
- [코드 참조](https://getuikit.com/docs/utility)
- [Less 컴파일 시 적용되는 테마 변수입니다.](https://getuikit.com/docs/less)
- [Switcher 내비게이션과 콘텐츠가 연동되는 동작입니다.](https://getuikit.com/docs/switcher)
- [아코디언 여러 항목 확장 및 구조](https://getuikit.com/docs/accordion)
- [그리드 반응형 너비와 거터](https://getuikit.com/docs/grid)
- [Form 입력 및 검증 클래스](https://getuikit.com/docs/form)
- [설치 런타임 및 스타일시트 불러오기](https://getuikit.com/docs/installation)