# Samsung One UI 디자인 시스템

## Samsung One UI 디자인 시스템 인터페이스 미리보기

화면 모양을 전환하고, 200% 읽기 텍스트를 확인한 뒤 초기화를 취소하거나 확정하세요.

## Samsung One UI 디자인 시스템 설계 참고 자료

Samsung의 공개 레이아웃 및 접근성 지침과 원본 CSS 연구용 선택 사항을 구분해 표시합니다. 공개되지 않은 팔레트, 글꼴 또는 컴포넌트 API를 만들어내지 않습니다.

### 공개된 레이아웃 및 접근성 요구 사항

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Side margins | At least 24dp on left and right | 네이티브 레이아웃 참고 자료입니다. dp를 CSS 픽셀로 임의 표기하지 마세요. |
| Viewing and interaction areas | Viewing above; frequently used interaction below | 맥락과 접근 가능한 동작을 의도적으로 배치하세요. 이는 레이아웃 원칙이지 화면 높이의 고정 비율이 아닙니다. |
| Cutout handling | Adapt placement to camera cutouts and orientation | 필수 콘텐츠를 기기 화면의 노치 뒤에 배치하지 마세요. |
| Text resizing | Up to 200% without losing content or function | 공개된 접근성 지침을 따릅니다. 브라우저 연구에서는 명시적인 읽기 크기 컨트롤을 통해 문단 리플로우를 보여줍니다. |
| Target separation | Large enough touch areas with space between them | 공개 문서에는 여기에 적용할 최소 수치가 없습니다. 예제의 48px 컨트롤은 웹 구현을 위한 독자적인 선택입니다. |
### 공개된 상호작용 규칙

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Complex gestures | Provide an alternative action | 작업을 완료하는 유일한 방법으로 드래그나 다중 손가락 동작을 요구하지 마세요. |
| Automatic content | Provide control for moving content over 5 seconds | 이 연구에는 자동 캐러셀이나 일정 시간이 지나면 사라지는 요소가 없습니다. |
| Error recovery | Clear message and focus on the next useful action | 눈에 보이는 텍스트와 명확한 복구 동작을 사용하세요. |
| Screen transitions | Feedback and an explicit way back | 초기화 대화상자에서는 취소 버튼을 제공하고 키보드 Escape 키로 복구할 수 있습니다. |
| Focus blocks | Subdued surfaces for function-focused content | 색상 역할 지침입니다. 공식 토큰 내보내기인 것처럼 수치 팔레트를 만들어내지 않습니다. |
### 브라우저 연구를 위한 독자적 선택 사항 — Samsung 토큰이 아닙니다

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --study-background | #F3F3F6 | 독립형 브라우저 해석을 위해 작성한 값입니다. 이 값은 공식 One UI 디자인 토큰이 아닙니다. |
| --study-card | #FFFFFF | 독립형 브라우저 해석을 위해 작성한 값입니다. 이 값은 공식 One UI 디자인 토큰이 아닙니다. |
| --study-text | #17171C | 독립형 브라우저 해석을 위해 작성한 값입니다. 이 값은 공식 One UI 디자인 토큰이 아닙니다. |
| --study-action | #2557C8 | 독립형 브라우저 해석을 위해 작성한 값입니다. 이 값은 공식 One UI 디자인 토큰이 아닙니다. |
| Card radius | 24px | 독립형 브라우저 해석을 위해 작성한 값입니다. 이 값은 공식 One UI 디자인 토큰이 아닙니다. |
| Minimum control height | 48px | 독립형 브라우저 해석을 위해 작성한 값입니다. 이 값은 공식 One UI 디자인 토큰이 아닙니다. |
| Reading-size options | 100%, 150%, 200% | 독립형 브라우저 해석을 위해 작성한 값입니다. 이 값은 공식 One UI 디자인 토큰이 아닙니다. |
## Samsung One UI 디자인 시스템 전체 가이드

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

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

## Samsung One UI 디자인 시스템 One UI 디자인 지침 및 브라우저 범위

### One UI를 플랫폼 지침으로 다루기

> One UI는 휴대전화, 대화면 기기 및 폴더블을 비롯한 Samsung 기기 전반의 상호작용을 다룹니다. 범용 웹 컴포넌트 패키지가 아닙니다. 제공된 예제는 읽기 환경설정을 살펴보는 독창적인 브라우저 연구입니다. 보기 영역, 하단 상호작용 영역 및 명시적인 복구 방법을 보여주지만 Samsung 컴포넌트를 실행하거나 기기 설정을 변경한다고 주장하지 않습니다.

### 구현 값을 정확하게 설명하기

이 참고 자료는 공개된 요구 사항과 브라우저용으로 작성한 값을 구분합니다. 네이티브 여백 24dp는 원래 단위 그대로 기록하며, 미리보기의 24px 안쪽 여백은 웹 환경에 맞게 의도적으로 해석한 값입니다. 파란색, 회색 배경 표면 및 24px 카드 모서리 반경은 독자적인 연구용 값입니다. 이 구분을 통해 에이전트가 그럴듯해 보이는 CSS 변수를 검증된 Samsung 토큰으로 오인하지 않도록 합니다.

- dp와 CSS px를 구분하세요.

- 독자적으로 정한 팔레트와 모서리 반경을 원본 선택 사항으로 표시하세요.

- 브라우저 미리보기를 Samsung 시스템 설정으로 설명하지 마세요.

## Samsung One UI 디자인 시스템 보기 영역 및 접근 가능한 동작

### 첫 화면 영역에 유용한 역할 부여

상단 영역에는 ‘읽기 환경설정’이라는 제목과 짧은 맥락 설명을 배치합니다. 그 아래에 그룹으로 묶인 설정과 읽기 예시를 두어 작업을 지원합니다. 각 그룹 뒤에는 적용 및 초기화 동작을 배치합니다. 이렇게 구성하면 제목을 쉽게 읽을 수 있고 중요한 동작도 한곳에 모입니다. 장식적인 기기 프레임 주위에 관련 없는 컨트롤을 흩어놓지 않습니다.

### 기기를 흉내 내지 말고 구조를 조정하세요.

브라우저 연구에는 운영체제 상태 표시줄, 카메라 컷아웃 또는 기기 권한이 없습니다. 좁은 레이아웃에서도 모든 설정을 사용할 수 있으며 작업 행은 세로로 쌓일 수 있습니다. 네이티브 구현에서는 실제 안전 영역, 컷아웃, 방향 및 폴더블 기기의 화면 변화를 고려해야 합니다. 반응형 브라우저 스크린샷만으로는 이러한 기기별 동작을 검증할 수 없습니다.

## Samsung One UI 디자인 시스템의 절제된 표면과 명시적 외관 설정

### 배경 블록으로 관련 콘텐츠를 묶으세요

각 설정과 읽기 샘플은 차분한 카드 표면에 놓입니다. 동작 색상은 선택 가능한 항목을 나타내며, 설명 텍스트에는 별도의 은은한 역할 색상을 사용합니다. 어두운 외관에서는 밝은 인터페이스 위에 어두운 오버레이를 덮지 않고 동일한 역할 색상을 변경합니다. 이 모든 CSS 색상은 자체적으로 해석해 정한 값이며, 다운로드 가능한 소스에도 그에 맞게 표시되어 있습니다.

### 외관을 바꿔도 설정을 유지하세요

외관 체크박스는 미리보기 테마에만 영향을 줍니다. 선택한 읽기 크기를 지우지 않으며 Samsung 시스템 설정이 변경되었다는 의미도 아닙니다. 선택 항목이 바뀌면 애플리케이션은 이전 적용 확인 메시지를 지우므로, 상태 메시지가 더 이상 유효하지 않은 설정을 나타내지 않습니다.

## Samsung One UI 디자인 시스템의 읽기 배율과 리플로우

### 200% 설정 사례를 명확하게 보여 주세요

읽기 크기 컨트롤에서 100%, 150%, 200%를 선택할 수 있습니다. 이 컨트롤은 샘플 문단의 글꼴 크기를 바꾸고 카드가 자연스럽게 커지도록 합니다. 텍스트는 잘리지 않고, 주변 컨트롤과 겹치지 않으며, 고정 높이 영역을 추가로 요구하지 않습니다. 이 컨트롤은 읽기 샘플용이며 브라우저나 운영체제의 모든 글꼴 설정을 변경한다고 주장하지 않습니다.

### 단어 전체가 표시되도록 하세요

문단에는 일반 텍스트를 사용하고, 줄 높이는 글자 크기에 따라 조정됩니다. 테스트한 가장 좁은 너비에서도 단어가 카드 안에서 줄바꿈되고 문서 순서대로 콘텐츠를 확인할 수 있습니다. 이는 리플로우 사례 하나를 보여 줍니다. 실제 인터페이스에서는 네이티브 접근성 설정을 적용한 상태에서 모든 레이블, 번역 및 실제 사용자 콘텐츠도 추가로 테스트해야 합니다.

## Samsung One UI 디자인 시스템의 적용, 초기화 및 대화상자 포커스

### 동작에 맞는 확인 문구를 사용하세요

이 미리보기에 적용을 누르면 선택한 외관과 읽기 비율이 표시됩니다. 기기로 전송되는 정보는 없다고 메시지에 명시합니다. 빠르게 사라지는 토스트 대신 상태 메시지를 유지해 사용자가 결과를 살펴볼 시간을 제공합니다. 설정 중 하나를 변경하면 이전 확인 메시지가 지워집니다.

### 초기화를 명시적으로 선택하도록 하세요

초기화를 누르면 계속 유지와 초기화 동작이 있는 네이티브 브라우저 대화상자가 열립니다. 취소하거나 Escape 키를 누르면 현재 선택이 모두 유지됩니다. 초기화를 확인하면 밝은 외관과 기본 크기로 복원한 다음 대화상자를 연 동작으로 포커스를 돌려보냅니다. 명시되지 않은 핸들러로 설명하는 대신 전체 상태 전환을 소스에 구현했습니다.

## Samsung One UI 디자인 시스템 완전한 브라우저 연구와 네이티브 앱으로 전환하기 위한 다음 단계

### 가상의 One UI 의존성 없이 실행

완전한 HTML 문서에는 모든 스타일과 콘텐츠, JavaScript가 포함됩니다. index.html로 저장한 뒤 로컬에서 제공하세요. 외부 글꼴이나 런타임을 요청하지 않으며 Samsung SDK도 필요하지 않습니다. 네이티브 앱으로 옮길 때는 실제 플랫폼 컨트롤, 밀도 단위, 접근성 서비스 및 구성 변경을 위해 공식 One UI 및 Android 리소스를 사용하세요.

1. 제공된 자체 포함 HTML 문서를 저장하세요.

2. 디렉터리를 로컬에서 제공하고 미리보기를 여세요.

3. 읽기 크기 200%와 두 가지 외관 모드를 테스트하세요.

4. 취소, Escape 키 및 초기화 확인을 각각 검증하세요.

### 문제를 찾아내는 순서로 테스트하세요

어두운 외관과 읽기 크기 200%를 선택하고 적용한 다음 확인 메시지를 살펴보세요. 초기화를 열고 취소한 뒤 두 선택 항목이 그대로 유지되는지 확인하세요. Escape 키를 눌러 같은 과정을 반복한 다음 초기화를 확인하고 값과 포커스가 돌아오는지 검증하세요. 데스크톱과 휴대폰 너비에서 확대된 문단을 검토해 단어나 컨트롤이 잘리지 않는지 확인하세요.

## Samsung One UI 디자인 시스템 구성 요소 예시

### index.html — 완전한 읽기 설정 연구

전체 레이아웃, 밝은 모드와 어두운 모드의 역할 색상, 텍스트 크기 컨트롤, 취소 가능한 초기화 대화상자.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Reading preferences study</title><style>
/* Original web-study values, not exported Samsung design tokens. */
:root{--study-background:#f3f3f6;--study-card:#fff;--study-text:#17171c;--study-muted:#5b5b66;--study-action:#2557c8;--study-border:#d9d9e1;--study-text-scale:1}*{box-sizing:border-box}body{margin:0;background:var(--study-background);font-family:Arial,sans-serif;color:var(--study-text)}body.dark{--study-background:#101014;--study-card:#222228;--study-text:#f7f7fb;--study-muted:#bbbbc8;--study-action:#9bbaff;--study-border:#41414c}main{max-width:980px;padding:32px;margin:auto}.context{font-size:13px;line-height:1.6;color:var(--study-muted);max-width:74ch}.phone{max-width:560px;margin:32px auto;background:var(--study-background)}.viewing{padding:40px 24px 32px;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end}.viewing p{font-size:14px;margin:0 0 16px;color:var(--study-muted)}h1{font-size:40px;line-height:1.15;margin:0;letter-spacing:-.025em}h2,.setting-title{font-size:20px;line-height:1.4;margin:0}section.settings{padding:0 24px}.card{border-radius:24px;background:var(--study-card);padding:24px;margin-bottom:16px}.setting{display:flex;gap:24px;justify-content:space-between;align-items:center}.setting p{font-size:14px;line-height:1.5;color:var(--study-muted);margin:8px 0 0}input[type=checkbox]{width:28px;height:28px;accent-color:var(--study-action);flex-shrink:0}label{cursor:pointer}.field{display:grid;gap:12px}select,button{font:inherit}select{width:100%;border:1px solid var(--study-border);border-radius:12px;padding:12px;background:var(--study-card);color:var(--study-text);min-height:48px}.sample{font-size:calc(16px * var(--study-text-scale));line-height:1.55;overflow-wrap:anywhere;margin:16px 0 0}.actions{padding:16px 24px 24px;display:grid;grid-template-columns:1fr 1fr;gap:16px}button{border:0;border-radius:999px;min-height:48px;padding:12px 16px;color:var(--study-action);background:var(--study-card);font-weight:700;cursor:pointer}.primary{background:var(--study-action);color:var(--study-background)}:focus-visible{outline:3px solid var(--study-action);outline-offset:4px}dialog{width:min(440px,calc(100% - 32px));border:0;border-radius:24px;padding:24px;background:var(--study-card);color:var(--study-text)}dialog::backdrop{background:#0008}dialog p{line-height:1.6}dialog .dialog-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}#confirmation{font-size:14px;line-height:1.5;padding:0 24px 16px;color:var(--study-muted)}#confirmation:empty{display:none}@media(max-width:600px){main{padding:16px}.phone{margin:16px auto}.viewing{padding:32px 24px}.card{padding:20px}.actions{grid-template-columns:1fr}.setting{gap:16px}h1{font-size:34px}h2,.setting-title{font-size:18px}}
</style></head><body><main><p class="context">OpenDesign original One UI-inspired web study. This demonstrates viewing and interaction areas, readable settings and explicit recovery. It does not control a Samsung device or run native One UI components.</p><div class="phone"><header class="viewing"><p>Make space to read</p><h1>Reading preferences</h1></header><section class="settings" aria-label="Reading preferences"><div class="card"><label class="setting"><span><strong class="setting-title">Dark appearance</strong><p>Use a darker surface in this preview.</p></span><input type="checkbox" id="dark" aria-label="Dark appearance"></label></div><div class="card"><label class="field" for="size"><strong class="setting-title">Reading size</strong><select id="size"><option value="1">Standard · 100%</option><option value="1.5">Large · 150%</option><option value="2">Extra large · 200%</option></select></label></div><div class="card"><h2>A moment to pause</h2><p class="sample">A clear page gives each idea room to breathe. Keep the words that help the reader decide what to do next.</p></div></section><div class="actions"><button id="reset">Reset preferences</button><button class="primary" id="apply">Apply to this preview</button></div><p id="confirmation" role="status"></p></div><dialog aria-labelledby="reset-title"><h2 id="reset-title">Reset reading preferences?</h2><p>This returns the preview to its light appearance and standard reading size.</p><div class="dialog-actions"><button id="cancel">Keep preferences</button><button id="confirm-reset" class="primary">Reset</button></div></dialog><p class="context">Published references include the 24dp side-margin guidance and text scaling up to 200%. CSS pixels here are an original browser interpretation of the layout; app colors and radii are explicitly original. Reading-size changes affect the sample paragraph so its reflow can be inspected. No preference is saved beyond this page.</p></main><script>
const dark=document.querySelector('#dark'),size=document.querySelector('#size'),confirmation=document.querySelector('#confirmation'),dialog=document.querySelector('dialog');function refresh(){document.body.classList.toggle('dark',dark.checked);document.documentElement.style.setProperty('--study-text-scale',size.value);confirmation.textContent='';}dark.onchange=refresh;size.onchange=refresh;document.querySelector('#apply').onclick=()=>{confirmation.textContent=`Applied to this preview: ${dark.checked?'dark':'light'} appearance, ${Math.round(Number(size.value)*100)}% reading size. Nothing was sent to a device.`};document.querySelector('#reset').onclick=()=>dialog.showModal();document.querySelector('#cancel').onclick=()=>dialog.close();document.querySelector('#confirm-reset').onclick=()=>{dark.checked=false;size.value='1';refresh();dialog.close();confirmation.textContent='Light appearance and standard reading size restored.';};dialog.addEventListener('close',()=>document.querySelector('#reset').focus());
</script></body></html>
```

코드 참조

- study 접두사가 붙은 색상과 크기는 독자적으로 정한 웹 디자인 값입니다.

- 읽기 배율은 샘플 문단에만 적용되며 브라우저나 기기 설정은 변경하지 않습니다.

## Samsung One UI 디자인 시스템 에이전트 설정

### 구현 시작점

이 코드는 독자적으로 만든 브라우저 연구를 실행합니다. 이 예시에는 One UI npm 패키지나 Samsung 네이티브 런타임이 없습니다.

```
# Save the supplied complete example as index.html.
python3 -m http.server 8000
# Open http://localhost:8000/
```

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

```
제공된 One UI 영감의 읽기 연구를 독자적으로 해석한 브라우저 구현으로 만드세요. 보기 및 상호작용 영역, 200%에서의 반응형 텍스트 리플로우, 명시적인 외관 상태, 로컬 전용 확인 메시지, 취소 가능한 초기화 및 포커스 복귀를 유지하세요. 네이티브 dp 요구 사항과 독자적으로 정한 CSS 픽셀 값은 구분하세요.
```

## Samsung One UI 디자인 시스템 출처 및 범위

One UI 원칙을 독자적으로 해석한 OpenDesign 브라우저 구현입니다. 네이티브 One UI 런타임이 아니며 기기 설정을 변경하지 않습니다. 참조 자료에서 공개된 요구 사항과 독자적인 웹 디자인 값을 구분합니다.

- One UI 원칙 보기, 상호작용 및 적응형 사용 경험.

- 그리드 시스템 24dp 여백, 컷아웃 및 기기별 맥락.

- 레이아웃과 타이포그래피 텍스트 200% 확대 및 대상 분리.

- 상호작용 및 컨트롤 복구, 대체 입력 및 명시적 탐색.

- 색상 시스템 차분한 초점 영역과 목적이 분명한 색상 역할.

## Samsung One UI 디자인 시스템 관련 자료

### SAP Fiori

UI5 Web Components를 통해 SAP Fiori의 Horizon 테마를 사용하세요. 실제 테마 매개변수, 명시적인 콘텐츠 밀도, 의미 기반 값 상태, 로컬 유효성 검사를 포함한 구매 요청 구성을 활용하세요.

### SEEK Braid

독창적인 구직 화면 구성을 통해 Braid를 살펴보세요. 테마 범위가 지정된 변수, 네 가지 실제 중단점, 맥락에 맞는 텍스트, 서로 구별되는 버튼 톤, 동작을 비활성화하는 대신 유효성 검사 이유를 설명하는 제어된 필드를 확인할 수 있습니다.

### Segment Evergreen

실제 테마 값, 제어 가능한 태그 입력, 실시간 규칙 매칭, 빈 상태에서의 복구 경로, 네이티브 검토 대화상자가 포함된 Evergreen 참조 자료입니다.


- [구현 레퍼런스](https://developer.samsung.com/one-ui/index.html)
- [출처](https://developer.samsung.com/one-ui/accessibility/layout-and-typo.html)
- [출처](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html)
- [출처](https://developer.samsung.com/one-ui/color/system.html)
- [코드 참조](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html)
- [One UI 원칙 보기, 상호작용 및 적응형 사용 경험.](https://developer.samsung.com/one-ui/index.html)
- [그리드 시스템 24dp 여백, 컷아웃 및 기기별 맥락.](https://developer.samsung.com/one-ui/layout/grid.html)
- [레이아웃과 타이포그래피 텍스트 200% 확대 및 대상 분리.](https://developer.samsung.com/one-ui/accessibility/layout-and-typo.html)
- [상호작용 및 컨트롤 복구, 대체 입력 및 명시적 탐색.](https://developer.samsung.com/one-ui/accessibility/interaction-and-control.html)
- [색상 시스템 차분한 초점 영역과 목적이 분명한 색상 역할.](https://developer.samsung.com/one-ui/color/system.html)