> 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/build-for-mobile/develop/ui-best-practices.md). # UI 모범 사례 모바일에서 잘 작동하는 씬 UI를 설계하기 위한 해야 할 일과 하지 말아야 할 일입니다. Decentraland 모바일 UI에 대해 아직 검증된 단일 공식 레시피는 없습니다 — 플랫폼은 새롭고 우리는 아직 계속 개선 중입니다. 이 페이지의 권장 사항은 실제 씬 작업에서 정리한 현재의 모범 사례입니다. 이를 출발점으로 삼고 실제 기기에서 테스트하세요. {% embed url="" %} ## 권장 사항 * **모바일 전용 UI를 설계하세요**, 또는 화면 크기와 플랫폼에 따라 UI를 다르게 하세요. 사용하세요 [`isMobile()`](/creator/content-creator-ko/build-for-mobile/develop/detect-platform.md) 를 분기 처리에 사용하세요. * **핵심 UI를 다음 안에 유지하세요** [**안전 영역**](/creator/content-creator-ko/build-for-mobile/develop/safe-area.md)**.** 장치의 하드웨어 여백(노치, 상태 표시줄, 홈 인디케이터)은 기본적으로 자동으로 비워집니다 — 단, `screenInset: 'none'`. 클라이언트 자체 컨트롤은 별도의 영역이며, `screenInset: 'interactable'` 는 그 작업의 일부를 맡습니다: 탐색기가 씬 UI용으로 지정한 사각형 안에 UI를 배치합니다. 모바일에서는 왼쪽 컨트롤이 비워지며, 오른쪽 아래의 액션 버튼은 설계상 그 영역 위에 그려지므로, [그 모서리](/creator/content-creator-ko/build-for-mobile/develop/safe-area.md#where-the-client-controls-live) 를 염두에 두세요. `'interactable'` 모바일 클라이언트 필요 `1.12.1` 또는 그 이상 — 이전 클라이언트는 여백이 전혀 없는 것으로 보고하며 UI가 화면 전체를 덮습니다. * **옵션을 최소화하세요.** 플레이어가 지금 당장 필요로 하는 것만 보여주고 나머지는 점진적으로 드러내세요. * **실행 가능한 대화상자는 화면 중앙에 배치하세요** — 플레이어가 읽고 응답해야 하는 곳 어디든. * **실행 가능한 메시지가 아닌 것은 상단 중앙에 배치하세요** — 상태, 알림, 주변 정보. ## 금지 사항 * **가상 화면을 염두에 두지 않고 UI 요소를 픽셀 단위로만 크기 지정하지 마세요.** 픽셀 값은 다음을 기준으로 스케일됩니다 `virtualWidth` / `virtualHeight` 에 설명된 기준 해상도 [화면 UI](/creator/content-creator-ko/sdk7/2d-ui/onscreen-ui.md#screen-virtual-scale) — `1600x720` 모바일에서는 기본값으로, `1920x1080` 데스크톱과 웹에서는. 픽셀 값이 어떤 기준 해상도를 기준으로 작성되었는지 파악하고, 기본값이 아니라면 명시적으로 전달하세요. 그리고 플랫폼 인식 크기 조정과 함께 사용하세요. 가상 화면은 (크기를 `0`) 원시 캔버스 픽셀을 정말로 원할 때만. * **요소를 안전 영역 밖에 배치하지 마세요.** 클라이언트의 컨트롤과 충돌하게 됩니다. * **작은 버튼에 의존하지 마세요.** 작은 대상은 터치스크린에서 탭하기에 신뢰할 수 없습니다. * **핵심 동작을 `IA_ACTION_3`–`IA_ACTION_6`** (데스크톱의 `1`/`2`/`3`/`4` 키보드의 키에 바인딩하지 마세요). 모바일에서는 쉽게 닿을 수 없습니다. 참조 [모바일에서의 입력](/creator/content-creator-ko/build-for-mobile/develop/input-on-mobile.md). ## 크기 조정 옛날의 경험칙 — *데스크톱에서 디자인한 뒤 모바일에서는 UI 크기를 3배로 스케일하라* — 는 두 번의 SDK 변경 이전의 방식이므로 이제는 맹목적으로 적용하면 안 됩니다. 그 3배의 대부분은 이제 자동으로 적용됩니다: * **`devicePixelRatio` 는 UI 레이아웃에 관여하지 않습니다.** 픽셀 크기의 UI는 이제 예전보다 `devicePixelRatio` 배 더 크게 렌더링됩니다 — 일반적으로 **휴대폰에서는 2\~3배**, 그리고 레티나 노트북에서도 마찬가지입니다. 이 설정은 끌 수 없습니다. * **가상 화면은 플랫폼별로 기본값이 다릅니다**, `1600x720` 모바일에서는 `1920x1080` 데스크톱과 웹에서는 따라서 같은 픽셀 값도 휴대폰에서는 이미 화면의 약 1.2배 더 큰 범위를 차지합니다. [모바일에서 미리보기](/creator/content-creator-ko/build-for-mobile/develop/preview-on-mobile.md) 데스크톱 크기를 그대로 시작점으로 삼고, 실제 기기에서 측정하세요 — 참조: [`isMobile()`](/creator/content-creator-ko/build-for-mobile/develop/detect-platform.md) 두 항목이 정말로 달라야 할 때만 ## 관련 * [누락된 기능](/creator/content-creator-ko/build-for-mobile/mobile-client/missing-features.md) * [모바일 안전 영역](/creator/content-creator-ko/build-for-mobile/develop/safe-area.md) * [코드에서 플랫폼 감지](/creator/content-creator-ko/build-for-mobile/develop/detect-platform.md) * [화면 UI](/creator/content-creator-ko/sdk7/2d-ui/onscreen-ui.md) * [UX 및 UI 가이드](/creator/content-creator-ko/sdk7/designing-the-experience/ux-ui-guide.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/build-for-mobile/develop/ui-best-practices.md?ask=&goal= ``` `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.