> For the complete documentation index, see [llms.txt](https://docs.decentraland.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.decentraland.org/creator/content-creator-ko/sdk7/designing-the-experience/ux-ui-guide.md).

# UX 및 UI 가이드

플레이어가 머물고 다시 찾고 싶어 하는 씬을 만드는 팁과 실천 방법!

디센트럴랜드 콘텐츠 제작자들이 창의성을 최대한 발휘해 자유롭게 활용할 수 있는 것은 우리에게 매우 중요합니다. 그래야 디센트럴랜드가 탐험할 가치가 있는 보람찬 장소가 될 수 있기 때문입니다. 하지만 디센트럴랜드의 씬은 매우 다양한 사용자들이 방문하게 될 것이며, 우리는 모든 이가 씬에 접근할 수 있게 해야 한다는 점도 중요합니다. 그렇기 때문에 우리는 통일된 디자인 기준을 마련해야 할 필요성을 무시할 수 없습니다. 이 가이드는 플레이어가 어떤 씬에 있든 일관되게 직관적이고 즐거운 경험을 하게 해 줄 수 있어야 합니다.

이 문서에서는 우리가 인터페이스와 플레이어 경험을 설계할 때 최선의 관행이라고 생각하는 것들을 장려하기 위해 디센트럴랜드의 디자인 가치를 공유합니다. 이러한 기준이 메타버스를 구성하는 씬을 구축하거나 개선하는 출발점이 되기를 바랍니다.

## 디자인 가치

디센트럴랜드의 모든 씬은 다음 가치를 염두에 두고 설계해야 합니다:

* **환영하는**: 플레이어가 따뜻하게 환영받는다고 느낍니다.
* **사용하기 쉬운**: UI는 쉽고 재미있게 사용할 수 있어야 합니다. 바퀴를 다시 발명하지 않도록 하세요
* **배우기 쉬운**: 플레이어가 UI를 익숙하고 직관적으로 느낍니다. 패턴은 씬 전체에서 일관되게 사용되어야 합니다.
* **안내 제공**: 씬이 도움의 손길을 내밉니다. 텍스트, 모션, 사운드, 그래픽이 플레이어를 올바른 방향으로 이끌고 힌트를 줍니다.
* **반응성**: 플레이어의 입력에 대한 명확한 행동-반응이 있습니다.
* **미니멀한**: 적을수록 좋습니다. 플레이어는 중요한 것에 집중할 수 있습니다.
* **흥미로운**: 씬은 디센트럴랜드를 독특하고 방문할 가치가 있게 만드는 요소들을 활용합니다.
* **목적이 분명한**: 플레이어가 다시 돌아올 강한 이유가 있습니다.
* **즐거운**: 플레이어는 보이는 모습, 들리는 소리, 느껴지는 감각을 즐깁니다

## 사용자 경험

### 어디서 시작해야 할까요?

씬의 목표는 무엇인가요? 감상하고 탐험할 아름다운 풍경을 제공하는 것인가요? 박물관인가요? 1인 게임인가요? 경쟁형 게임인가요? 아니면 선형적인 스토리텔링 흐름을 따르나요?

디자인 과정의 모든 단계에서 이 목표를 분명히 인식하는 것이 중요합니다. 이는 방문자의 경험에 큰 영향을 미칠 수 있는 모든 결정을 이끌어야 합니다.

각 단계가 이전 단계에 의존하는 선형 흐름을 따르는 씬의 경우, 플레이어가 잘못된 순서로 요소들을 만나지 않도록 씬을 벽으로 둘러싸고 하나 또는 여러 개의 고정 입구 지점을 마련하는 것을 권장합니다. 참고로, 입구 지점은 플레이어를 환영하고 씬에서의 목표가 무엇인지 설명하는 메시지를 표시하기에 아주 좋은 위치입니다.

<figure><img src="https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-97ebd53471da877dec44f02a12a433af644d458a%2Fux-instructions.png?alt=media" alt="In-world banner" width="800"><figcaption><p>월드 내 지시사항</p></figcaption></figure>

플레이어의 씬 경험이 선형적일 필요는 없지만, 여전히 완전히 즐길 수 있도록 몇 가지 기본 지시를 제공해야 한다면 팝업으로 안내를 보여줄 수 있습니다. 플레이어가 어느 방향에서 들어오든 입장하자마자 화면에 팝업을 표시할 수 있으며, 이를 통해 플레이어가 항상 핵심 사항을 알 수 있게 할 수 있습니다.

<figure><img src="https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-8a74df26bf66f63d5d103d0c9ee5a4cd8323ddd1%2Fux-banner.png?alt=media" alt="Pop-up banner" width="800"><figcaption><p>팝업 안내</p></figcaption></figure>

{% hint style="warning" %}
**📔 참고**: 팝업이 너무 방해가 되지 않도록 하고, 아무 곳이나 클릭하면 쉽게 닫을 수 있게 하세요.
{% endhint %}

환영 메시지는 플레이어에게 다음 내용을 전달해야 합니다:

* 씬 제목
* 플레이어를 환영하기
* 플레이어의 최종 목표 및 동기
* 지시사항/다음 단계
* *(선택 사항)* 조작법. 주로 씬이 전역 버튼 이벤트를 사용하는 경우에 유용합니다. 그렇지 않으면, 항목 자체가 마우스를 올렸을 때 어떻게 사용하는지 알려줍니다.

### 동기 부여

방문자가 씬에 계속 돌아오게 하고 싶을 가능성이 높습니다. 그들이 그렇게 하도록 동기를 부여할 방법을 생각해 보세요! “플레이어가 내 씬에 다시 오고 싶어 하거나 친구에게 추천하고 싶어지게 만드는 것은 무엇일까?”라고 스스로 물어보세요.

예를 들어, 도전 과제를 제시해 여러 번 시도해야 할 만큼 어려운 달성 목표를 줄 수 있습니다. 또한 경쟁형 멀티플레이어 이벤트를 개최할 수도 있는데, 이는 소셜 활동을 하기에도 흥미로운 기회입니다. 플레이어가 시간을 보내는 것을 즐긴다고 느끼는 역동적인 공간으로 씬을 만드세요!

### 피드백과 사운드

사운드는 두 가지 중요한 역할을 하므로, 꼭 활용하세요! 한편으로 사운드는 몰입감을 생성하는 데 필수적입니다. 소리가 없으면 현실감이 떨어지는 많은 요소들이 있습니다. 다른 핵심 역할은 플레이어의 행동에 대한 피드백을 제공하는 것입니다. 시각적 단서만 의존하면 플레이어가 자신의 행동 효과를 보기 위해 올바른 방향을 보고 있는지 확신할 수 없습니다. 사운드를 사용하면 무언가가 일어났음을 플레이어가 인지하게 할 수 있습니다. 시각적 단서와 사운드 단서를 함께 사용하면, 소리를 들은 플레이어가 보지 못했더라도 시각적 단서를 찾아 주변을 둘러보게 됩니다.

일부 플레이어는 사운드를 끈 상태로 플레이할 수 있다는 점을 염두에 두세요. 씬 안내나 게임 메커니즘의 핵심 요소를 사운드로 제공한다면, 같은 방향을 암시하는 시각적 요소도 함께 제공하도록 하세요. 예를 들어 영화의 자막처럼, 이러한 소리를 보조하는 UI 하단의 텍스트를 표시할 수 있습니다.

## 사용자 인터페이스

이 섹션은 플레이어의 주의를 가장 중요한 요소로 이끄는, 씬 디자인을 통해 내러티브를 구성하도록 돕기 위한 것입니다. 여기에 설명된 도구를 잘 활용하면 경험이 훨씬 더 몰입감 있고 성공적으로 될 수 있습니다.

색상, 아이콘, 모션, 크기가 올바른 메시지를 전달하는 데 얼마나 중요한지는 아무리 강조해도 지나치지 않습니다. 씬의 모든 것은 의미를 전달한다는 점을 기억하세요.

### 레이아웃

기본 디센트럴랜드 UI 요소와 겹치는 화면 영역에 UI를 배치할 때는 주의하세요. 데스크톱 클라이언트에서 기본 디센트럴랜드 UI(사이드바, 미니맵, 채팅 등)는 화면의 왼쪽 25%만 차지하도록 설계되어 있습니다(이미지에서 빨간색으로 강조된 부분). 나머지 화면 공간은 콘텐츠 제작자가 자유롭게 사용할 수 있는 안전 영역입니다.

<figure><img src="https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-dd66dfc723550792844114dde7e60be4127d5d64%2FUI-Zones.png?alt=media" alt="Screen regions used by UI" width="800"><figcaption></figcaption></figure>

왼쪽 25% 영역에는 UI 요소를 배치하는 데 제한이 없지만, 탐색기가 지속적으로 디자인을 변경하고 개선하고 있다는 점을 기억하세요. 오늘은 가려지지 않는 공간도 향후 버전에서는 가려질 수 있습니다.

{% hint style="info" %}
**📱 모바일 안전 영역**:  [모바일 클라이언트](/creator/content-creator-ko/build-for-mobile/mobile-client/overview.md) 캔버스의 일부 위에 자체 컨트롤을 표시합니다 — **왼쪽** (채팅, 검색, 프로필, 조이스틱, 이모트), **오른쪽 상단** (프로필 및 카메라 컨트롤), 그리고 **오른쪽 하단** (동작 및 상호작용 버튼). 해당 영역을 직접 재서 측정하지 마세요. 클라이언트가 보고하는 영역 안에 렌더링하고, 다음을 사용하세요: `screenInset: 'interactable'`. 중요한 UI는 화면 중앙 또는 상단 중앙에 두고 다음을 따르세요 [모바일 안전 영역](/creator/content-creator-ko/build-for-mobile/develop/safe-area.md). 사용하세요 [`isMobile()`](/creator/content-creator-ko/build-for-mobile/develop/detect-platform.md) 데스크톱과 모바일 제약이 서로 맞지 않을 때 레이아웃을 전환하는 데
{% endhint %}

{% hint style="warning" %}
**📔 참고**: 씬 및 스마트 웨어러블의 UI 요소는 항상 기본 디센트럴랜드 UI 뒤 레이어에 표시됩니다.
{% endhint %}

항상 그리드를 염두에 두고 UI를 공간적으로 구성할 때 주요 기준으로 사용하세요. HUD가 필요한 씬을 작업 중이라면, 먼저 소모품(예: 화폐, 음식, 생명)을 한곳에 모으고, 다른 쪽에는 도구나 무기 같은 보관형 항목을 배치할 수 있습니다. 그리드의 간격과 패딩은 일관되게 유지하세요. 모든 플레이어 행동에 대한 피드백을 명확하게 하세요.

### 색상

색상 팔레트를 선택하는 것은 중요합니다. 이는 씬에 정체성을 부여하고, 요소 간의 관계와 위계를 나타내기 때문입니다.

색상 팔레트를 구성할 때는 먼저 메인 색상을 선택하고, 필요하다면 보조 색상을 하나 선택하세요. 그런 다음 그 메인 색상과의 관계에서 팔레트를 유사색, 보색, 삼색 조합 등으로 할지 결정해야 합니다.

<figure><img src="https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-90a514428232e163d5b6012aa8ab57371da92782%2Fux-color-wheel2.png?alt=media" alt="Chromatic color palette" width="300"><figcaption><p>유채색 팔레트</p></figcaption></figure>

<figure><img src="https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-a557422ba97313b5ac752e934e90f55206640145%2Fux-color-wheel.png?alt=media" alt="Strategies for combining colors properly" width="300"><figcaption><p>색상을 올바르게 조합하는 전략</p></figcaption></figure>

{% hint style="info" %}
**💡 팁**: 우리가 추천하는 무료 색상 팔레트 생성기: [Coolors](https://coolors.co), [Adobe Color CC](https://color.adobe.com/), [Colour Lovers](http://www.colourlovers.com), [Color Hunt](http://www.colorhunt.co), [Hailpixel의 Color](http://color.hailpixel.com), [Colour Code](http://colourco.de), [Sip](https://sipapp.io/), [Paletton의 Color Scheme Designer](http://paletton.com), [Cohesive Colors](http://javierbyte.github.io/cohesive-colors), [Colr](http://www.colr.org)
{% endhint %}

메인 색상은 UI 구성 요소 전반에서 가장 자주 사용되어야 합니다. 팔레트에 보조 색상이 없다면, 메인 색상과 검정 또는 흰색을 조합해 요소를 강조할 수 있습니다. 보조 색상은 필수는 아니지만, 씬의 UI 요소를 강조하고 구분하는 데 도움이 됩니다. 보조 색상은 하이라이트, 선택 컨트롤(슬라이더와 스위치), 링크, 제목에 가장 잘 어울립니다.

각 색상에는 고유한 표현 특성이 있다는 점을 기억하고, 이를 활용해 색을 통해 메시지를 전달하세요. 예를 들어 빨강은 종종 부정적인 의미와 연관되고, 초록은 긍정적인 의미와 연관됩니다.

<figure><img src="https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-39fa7214733c589571654b3b05067edae03d2353%2Fux-switches.png?alt=media" alt="Colored switches" width="300"><figcaption><p>색을 잘못 사용하면 혼란스러울 수 있습니다</p></figcaption></figure>

색상을 전략적으로 사용해 상태 변화를 나타낼 수도 있습니다. 예를 들어 요소의 색을 바꿔 활성 상태인지 비활성 상태인지 표시할 수 있습니다.

{% hint style="warning" %}
**📔 참고**: 상태는 UI 요소의 상태를 전달합니다. 요소의 상태는 어느 정도 연속성을 유지해야 하지만, 명확한 사용성 단서를 가져야 하고 다른 상태 및 주변 레이아웃과 쉽게 구별되어야 합니다.
{% endhint %}

<figure><img src="https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-ccb8ecfe2c2b624018c96ecb9317c494c44dbeb9%2Fux-active-button.png?alt=media" alt="Active inactive button" width="300"><figcaption><p>버튼 상태에 색상 사용하기</p></figcaption></figure>

경고! 겹쳐서 표시될 색상을 선택할 때는, 함께 사용해도 읽기 쉬운지 특히 주의해야 합니다. 기본 규칙은 이렇습니다: 함께 표시되는 요소들의 색상은 항상 서로 충분한 대비가 있어야 합니다. 일부 플레이어는 최적이 아닌 조명 조건에서 화면을 보고 있을 수 있으므로 읽기 어려워진다는 점을 염두에 두세요.

<figure><img src="https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-febc1a60718f42d58120c40515664253cf09a363%2Fux-icons.png?alt=media" alt="Icon contrast" width="300"><figcaption><p>두 아이콘 모두 구분할 수 있지만, 첫 번째 아이콘이 대비가 더 좋습니다. 더 쉽게 읽히고 이해하는 데 드는 노력도 적습니다.</p></figcaption></figure>

### 타이포그래피 계층

제목, 부제, 본문에 대해 최소 3단계의 크기 체계를 정의해 보세요. 색상과 글꼴 크기 사용에 주의하세요. 모든 글꼴 크기는 12px 이상이어야 합니다.

이미지 위(또는 월드 위)에 표시될 텍스트를 배치하려면, 분명 가독성을 실험해 봐야 합니다. 그런 경우에는 텍스트와 이미지 사이 레이어에 색이 있는 단색 영역을 추가하는 것을 권장합니다. 이렇게 하면 텍스트의 가독성을 확보할 수 있습니다.

<figure><img src="https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-9a277a4a94c7904455781552939bac4bf90c0403%2Fux-text-over-images.png?alt=media" alt="Text over images" width="300"><figcaption><p>가독성을 우선하세요</p></figcaption></figure>

### 아이콘

아이콘은 정보를 압축해 이미지를 통해 행동을 식별하는 데 도움을 줍니다. 아이콘은 텍스트로 항목을 라벨링하는 것보다 훨씬 빠르게 해석할 수 있는 입력을 제공하는 데 매우 강력한 도구입니다. 텍스트 라벨링은 플레이어의 주의와 시간이 더 많이 필요합니다. 아이콘을 텍스트와 함께 표시하는 것도 유용한데, 의미를 더 명확히 구분하는 데 도움이 되기 때문입니다.

<figure><img src="https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-cdcdf8db8cd023d3550881b30f3ab56dc818ac9d%2Fux-icons2.png?alt=media" alt="Icon examples" width="300"><figcaption><p>아이콘을 보편적인 언어로 사용하세요</p></figcaption></figure>

### 이동

필요할 때 피드백을 제공하고 방향을 안내하기 위해 모션을 사용하세요. 모션은 UI가 바뀔 때 플레이어가 주의를 집중하도록 돕고 연속성을 유지하는 데 도움이 됩니다.

<figure><img src="https://3980763956-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-0a13840d235b318e369b3dc11ea4272633b8c0b4%2Fux-glow.png?alt=media" alt="Adding glow" width="300"><figcaption><p>입자, 크기 변화, 페이딩 마진을 사용해 요소를 돋보이게 하세요</p></figcaption></figure>

### 문서 작성과 콘텐츠 구조

UI 텍스트는 인터페이스를 더 쉽게 사용할 수 있게 하고, 플레이어가 자신의 행동에 더 자신감을 갖도록 해줍니다. UI 텍스트는 항상 가능한 한 간결하게 작성하세요. 플레이어는 읽기 위해 있는 것이 아니라 플레이하기 위해 있습니다. 너무 길어 보이는 텍스트는 대부분의 플레이어가 읽지 않을 것입니다.

플레이어를 환영 메시지로 맞이하고 씬의 목표를 알려주세요. 먼저 씬에서의 목표를 분명히 한 다음, 이를 달성하는 데 필요한 행동을 설명하세요. 그다음에는 필요할 때마다 정보를 점진적으로 공개할 수 있습니다. 이렇게 하면 플레이어가 경험 초반부터 압도당하는 느낌을 받지 않습니다. 그래픽 자산과 마찬가지로, UI 기능과 스토리텔링 전반에서 일관된 단어를 사용하도록 하세요.

### 오브젝트 상호작용

어떤 오브젝트가 상호작용 가능하고 어떤 것은 아닌지 플레이어가 구분할 수 있도록 하세요. 엔티티에 버튼 이벤트를 등록하면 SDK는 기본적으로 호버 피드백을 표시합니다. 엔티티의 가장자리 하이라이트와, 상호작용에 사용할 입력을 보여 주는 커서 옆 힌트가 표시되며, 상호작용의 효과를 설명하는 사용자 지정 텍스트도 사용할 수 있습니다. 이를 사용하는 것을 강력히 권장합니다. 씬이 더 자연스럽고 사용하기 쉬워집니다. 다음을 참고하세요 [호버 피드백](/creator/content-creator-ko/sdk7/interactivity/button-events/register-callback.md#hover-feedback).

### 3인칭 카메라

플레이어는 언제든지 ‘V’ 키를 눌러 1인칭과 3인칭 카메라를 전환할 수 있습니다. 상호작용이 두 모드 모두에서 편하게 작동하도록 씬을 설계하세요. 예를 들어 작은 클릭 대상은 3인칭에서 맞히기 더 어렵습니다. 씬은 플레이어의 현재 카메라 모드를 읽거나, 영역 내에서 특정 모드를 강제할 수 있습니다. 다음을 참고하세요 [카메라](/creator/content-creator-ko/sdk7/3d/camera.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.decentraland.org/creator/content-creator-ko/sdk7/designing-the-experience/ux-ui-guide.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.