> 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/2d-ui/ui-positioning.md). # UI 배치 UI 엔티티의 위치, 크기, 패딩 및 기타 속성을 설정하세요. 모든 종류의 UI 콘텐츠에는 다음을 사용하세요 `uiTransform` 엔티티의 정렬과 관련된 크기, 위치 및 기타 속성을 설정하려면 구성 요소를 사용하세요. 그 `uiTransform` 구성 요소는 화면의 2D 공간에서 다음과 매우 비슷하게 작동합니다. `Transform` 구성 요소는 장면의 3D 공간에서 작동합니다. ***ui.tsx 파일:*** ```ts import { UiEntity, ReactEcs } from '@dcl/sdk/react-ecs' import { Color4 } from '@dcl/sdk/math' export const uiMenu = () => ( ) ``` ***index.ts 파일:*** ```ts import { ReactEcsRenderer } from '@dcl/sdk/react-ecs' import { uiMenu } from './ui' export function main() { ReactEcsRenderer.setUiRenderer(uiMenu) } ``` {% hint style="warning" %} **📔 참고**: 이 페이지의 다음 모든 스니펫은 여러분이 `.ts` 와 유사한 `ReactEcsRenderer.setUiRenderer()` 함수를 실행 중이라고 가정합니다. {% endhint %} ## 위치 지정 속성 UI 엔티티의 정렬은 Flexbox 정렬 모델을 기반으로 합니다. 이는 크기가 달라질 수 있는 모달 내부의 중첩 엔티티를 동적으로 구성하는 데 매우 강력한 모델입니다. {% hint style="info" %} **💡 팁**: Decentraland의 UI 구현은 다음을 기반으로 합니다. [Yoga](https://yogalayout.com/docs/). 읽어보세요 [이 글은](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/) Flexbox에서 제공되는 속성들을 매우 쉽게 이해할 수 있고 깊이 있게 다룬 내용을 보려면. {% endhint %} ### 엔티티 크기 사용: `width` 및 `height` 엔티티의 크기를 설정하려면 다음을 사용하세요. * `auto`: 크기가 콘텐츠에 맞게 조정됩니다. 길이가 달라질 수 있는 텍스트에 매우 유용합니다. 값을 "auto"로 작성하세요. * **백분율**: 부모의 측정값의 백분율입니다. 값은 "%"로 끝나는 문자열로 작성하세요. 예를 들면 `10 %`. * **픽셀**: 값을 숫자로 작성하세요. * **화면 너비 또는 높이**: vw(뷰 너비)와 vh(뷰 높이)를 사용하면 Decentraland를 실행하는 창의 전체 크기에 대한 일부를 나타낼 수 있습니다. 예를 들면 `10vw` 는 창 너비의 10%를 의미합니다, `25vh` 는 창 높이의 25%를 의미합니다. 이러한 속성은 다음에 영향을 미친다는 점에 유의하세요. **default** 크기, 즉 flex grow 및 flex shrink 계산이 수행되기 전의 항목 크기에 영향을 줍니다. 최종 크기는 부모 엔티티의 크기와 설정된 Flexbox 속성에 따라 다르게 해석될 수 있습니다. {% hint style="warning" %} **📔 참고**: 숫자와 문자열을 모두 지원하는 속성에서는 값을 픽셀로 설정하려면 숫자를 작성하세요. 이러한 필드를 부모의 측정값의 백분율로 설정하려면 값이 "%"로 끝나는 문자열로 작성하세요. 예를 들면 `10 %`. 픽셀 값을 문자열로 설정하려면 문자열 끝에 다음을 붙여서 픽셀 값을 문자열로도 설정할 수 있습니다. `px`, 예를 들면 `200px`. * 값이 백분율로 표현될 때는 항상 부모 컨테이너를 기준으로 합니다. UI의 최상위 엔티티에도 부모가 있습니다. 렌더러는 기본적으로 이를 다음이 선택한 영역 안에 배치합니다. [`screenInset`](/creator/content-creator-ko/sdk7/2d-ui/onscreen-ui.md#screen-inset-area), 기본값은 디바이스의 안전 영역입니다. 따라서 루트 수준의 `100%` 는 해당 영역의 100%입니다 — 휴대폰에서는 화면보다 더 좁고, 데스크톱에서는 둘이 일치합니다. 다음을 전달하세요. `screenInset: 'none'` 전체 화면을 기준으로 한 백분율이 필요하다면. * 값이 픽셀 단위로 표현되면 부모의 배율 영향을 받지 않지만, 다음에서 파생된 UI 배율 계수도 **아닙니다** 원시 화면 픽셀 역시 아닙니다: 기본적으로 활성화되어 있는 다음에서 파생된 UI 배율 계수로 곱해집니다. A [가상 화면](/creator/content-creator-ko/sdk7/2d-ui/onscreen-ui.md#screen-virtual-scale), `width: 200` 는 "가상 화면 크기와 같은 화면에서 200px"을 의미하며, 다른 화면에서는 비례하여 커지거나 줄어듭니다. * 값이 다음으로 표현되면 `vh` 또는 `vw`전체 창의 백분율이며, 부모의 배율이나 가상 화면, 또는 다음의 영향을 받지 않습니다. `screenInset`. 에서 `auto` width/height가 작동하려면 다음 규칙이 적용됩니다: * width/height를 “auto”로 사용하는 UiTransform은 다음을 가져야 합니다. `alignSelf`: `“center”`/`“flex-start”`/`“flex-end”` 또는 `positionType: “absolute”` * 자식의 UiTransform이 다음을 사용하면 `positionType: “absolute”`부모는 해당 크기/위치에 맞게 조정되지 않습니다 * 자식의 UiTransform이 위치 재정의를 사용하면 부모는 해당 크기/위치에 맞게 조정되지 않습니다 {% endhint %} 크기를 더 고급 방식으로 조정할 수 있도록 다음의 다른 속성들도 사용할 수 있습니다: * `maxWidth` 및 `maxHeight`: *number* 또는 문자열(예: height와 width). 엔티티가 가질 수 있는 최대 크기입니다. * `minWidth` 및 `minHeight`: *number* 또는 문자열(예: height와 width). 엔티티가 가질 수 있는 최소 크기입니다. 부모가 엔티티의 최소 크기를 담기에는 너무 작으면, 자식은 부모 밖으로 넘쳐 보이게 됩니다. * `flexBasis`: 이는 주 축을 따라 항목의 기본 크기를 축과 무관하게 제공하는 방법입니다. 자식의 flex basis를 설정하는 것은 부모가 flex direction: row인 컨테이너일 때 그 자식의 width를 설정하는 것과 비슷하며, 부모가 flex direction: column인 컨테이너일 때 그 자식의 height를 설정하는 것과 비슷합니다. ```ts import { UiEntity, ReactEcs } from '@dcl/sdk/react-ecs' import { Color4 } from '@dcl/sdk/math' export const uiMenu = () => ( ) ``` ### 자식 엔티티 배치 기본적으로 자식 엔티티는 부모의 왼쪽 위 모서리를 기준으로 배치됩니다. 다음과 같은 속성을 사용하여 `justifyContent` 및 `alignItems` 이 동작을 변경할 수 있습니다. {% hint style="info" %} **💡 팁**: 다음을 참조하는 모든 속성은 *콘텐츠* 주 축을 따라 있는 엔티티를 가리킵니다(다음에 의해 결정됨 `flexDirection`). 다음을 참조하는 모든 속성은 {% endhint %} * `flexDirection`: Flex direction은 노드의 자식이 어떤 방향으로 배치되는지를 제어합니다. 이는 주 축이라고도 합니다. 주 축은 자식이 배치되는 방향입니다. 교차 축은 주 축에 수직인 축, 또는 줄 바꿈된 행이 배치되는 축입니다. 값은 다음에서 가져옵니다. `FlexDirectionType` 유형. 사용 가능한 옵션은 다음과 같습니다: * `row` (기본값) * `row-reverse` * `column` * `column-reverse` * `justifyContent`: 이 속성은 컨테이너의 주 축 안에서 자식을 어떻게 정렬할지를 설명합니다. 예를 들어, 이 속성을 사용하면 다음이 설정된 컨테이너 안에서 자식을 가로로 중앙 정렬할 수 있습니다. `flexDirection` row로 설정되었거나, 다음이 설정된 컨테이너 안에서 세로로 중앙 정렬할 수 있습니다. `flexDirection` column으로 설정되었을 때. 이 속성의 값은 다음에서 가져와야 합니다. `JustifyType` 유형. 가능한 값은 다음과 같습니다: * `flex-start` (기본값): 컨테이너의 자식을 컨테이너 주 축의 시작 부분에 정렬합니다. * `flex-end`: 컨테이너의 자식을 컨테이너 주 축의 끝에 정렬합니다. * `중심`: 컨테이너의 자식을 컨테이너 주 축의 중앙에 정렬합니다. * `space-between`: 컨테이너의 주 축 전체에 자식을 균등하게 배치하고, 남는 공간을 자식들 사이에 분배합니다. * `space-around`: 컨테이너의 주 축 전체에 자식을 균등하게 배치하고, 남는 공간을 자식들 주위에 분배합니다. space between과 비교하면 space around를 사용했을 때 첫 번째 자식의 시작 부분과 마지막 자식의 끝 부분에도 공간이 분배됩니다. * `space-evenly`: 컨테이너의 주 축 전체에 자식을 균등하게 배치하고, 남는 공간을 분배하여 자식 사이의 간격과 자식과 컨테이너 가장자리 사이의 간격이 모두 같아지도록 합니다. * `alignItems`: 자식이 컨테이너의 교차 축을 따라 어떻게 정렬되는지 설명합니다. Align items는 justify content와 매우 비슷하지만, 주 축이 아니라 교차 축에 적용된다는 점이 다릅니다. 이 속성에는 다음에서 가져온 값이 필요합니다. `AlignType` 유형. 사용 가능한 옵션은 다음과 같습니다: * `stretch`: (기본값) 컨테이너의 교차 축 높이에 맞도록 컨테이너의 자식을 늘립니다. * `flex-start`: 컨테이너의 자식을 컨테이너 교차 축의 시작 부분에 정렬합니다. * `flex-end`: 컨테이너의 자식을 컨테이너 교차 축의 끝에 정렬합니다. * `중심`: 컨테이너의 자식을 컨테이너 교차 축의 중앙에 정렬합니다. * `baseline`: 컨테이너의 자식을 공통 기준선에 따라 정렬합니다. 개별 자식은 부모의 참조 기준선으로 설정할 수 있습니다. * `alignSelf`: Align self는 다음과 동일한 옵션과 효과를 가집니다. `alignItems` 하지만 컨테이너 내부의 자식들에 영향을 주는 대신, 이 속성을 개별 자식에 적용하여 부모 안에서의 정렬을 변경할 수 있습니다. align self는 부모가 align items로 설정한 모든 옵션을 덮어씁니다. 값은 다음에서 가져옵니다. `AlignType`, 자세한 내용은 `alignItems` 위의 옵션에 대한 자세한 내용은 여기를 참조하세요. * `alignContent`: Align content는 교차 축을 따라 줄의 분포를 정의합니다. 이는 다음을 사용하여 항목이 여러 줄로 감싸질 때만 효과가 있습니다. `flexWrap`. 값은 다음에서 가져옵니다. `AlignType` 유형. 사용 가능한 옵션은 다음과 같습니다: * `flex-start`: (기본값) 감긴 줄을 컨테이너 교차 축의 시작 부분에 정렬합니다. * `flex-end`: 감긴 줄을 컨테이너 교차 축의 끝에 정렬합니다. * `stretch`: 감긴 줄을 컨테이너 교차 축의 높이에 맞게 늘립니다. * `중심`: 감긴 줄을 컨테이너 교차 축의 중앙에 정렬합니다. * `space-between`: 컨테이너 주 축 전체에 감긴 줄을 균등하게 배치하고, 남는 공간을 줄 사이에 분배합니다. * `space-around`: 컨테이너의 주 축 전체에 감긴 줄을 균등하게 배치하고, 남는 공간을 줄 주위에 분배합니다. space between과 비교하면 space around를 사용했을 때 첫 번째 줄의 시작 부분과 마지막 줄의 끝 부분에도 공간이 분배됩니다. * `flexGrow`: 이는 컨테이너 안의 공간이 주 축을 따라 자식들에게 어떻게 분배되어야 하는지를 설명합니다. 자식을 배치한 후, 컨테이너는 자식들이 지정한 flex grow 값에 따라 남은 공간을 분배합니다. Flex grow는 0 이상의 모든 floating point 값을 허용하며, 기본값은 0입니다. 컨테이너는 남은 공간을 자식의 flex grow 값에 따라 가중치를 두어 자식들에게 분배합니다. * `flexShrink`: 주 축에서 자식들의 총 크기가 컨테이너의 주 축 크기를 초과하는 경우, 자식들을 어떻게 줄일지 설명합니다. flex shrink는 flex grow와 매우 비슷하며, 넘치는 크기를 음수 남은 공간으로 간주하면 같은 방식으로 생각할 수 있습니다. 이 두 속성은 자식이 필요에 따라 늘어나고 줄어들 수 있게 해 함께 잘 동작합니다. Flex shrink는 0 이상의 모든 floating point 값을 허용하며, 기본값은 1입니다. 컨테이너는 자식의 flex shrink 값에 따라 가중치를 두어 자식들을 줄입니다. * `overflow`: 엔티티의 자식 크기가 부모를 초과할 때 어떤 일이 일어나는지 결정합니다. 값은 다음에서 가져옵니다. `OverflowType` 타입으로 해석할 수 있습니다. * `hidden`: 넘친 엔티티는 보이지 않게 됩니다. * `visible`: 넘친 엔티티는 부모의 여백 밖으로 나옵니다. * `scroll`: 영역이 스크롤 가능해져 플레이어가 넘친 콘텐츠를 스크롤할 수 있습니다. 다음을 참조하세요. [스크롤 가능한 컨테이너](#scrollable-containers) 를 참고하세요. * `flexWrap`: flex wrap 속성은 컨테이너에 설정되며, 자식이 컨테이너의 주 축 크기를 초과할 때 어떤 일이 일어나는지를 제어합니다. 기본적으로 필요한 경우 자식은 주 축을 따라 여러 줄로 감싸집니다. 다음으로 줄 바꿈이 비활성화되면 `nowrap`, 자식은 한 줄로 강제 배치됩니다(이로 인해 엔티티가 줄어들 수 있습니다). wrap reverse는 wrap과 동일하게 동작하지만, 줄의 순서가 반전됩니다. 이 속성은 값으로 다음을 사용합니다. `FlexWrapType` 타입으로 해석할 수 있습니다. * `wrap` * `nowrap` * `wrap-reverse` ### 여백과 패딩 * `margin`: 이 속성은 노드 바깥쪽 주변의 간격에 영향을 줍니다. margin이 있는 노드는 부모의 경계에서 자신을 띄우며, 동시에 형제의 위치도 조정합니다. 부모가 자동 크기 조정 상태이면 노드의 margin은 부모의 전체 크기에 기여합니다. 엔티티와 부모의 여백 사이의 공간을 설정합니다. 예상 값은 다음 속성을 포함하는 객체입니다. `상단`, `left`, `하단`, 그리고 `right`. * `padding`: 이 속성은 적용된 노드의 크기에 영향을 줍니다. Yoga의 padding은 box-sizing: border-box;가 설정된 것처럼 동작합니다. 즉, 명시적 크기가 설정된 엔티티에서는 padding이 전체 크기에 더해지지 않습니다. 자동 크기 노드의 경우 padding은 노드의 크기를 증가시키고 자식의 위치도 조정합니다. 예상 값은 다음 속성을 포함하는 객체입니다. `상단`, `left`, `하단`, 그리고 `right`. ### 위치 미세 조정 Flexbox에서는 엔티티의 위치가 주로 부모 관계와 부모와 자식에 설정된 배치 속성에 의해 결정됩니다. 따라서 보통은 `위치` 속성을 전혀 설정할 필요가 없습니다. 하지만 이를 조정하거나 Flexbox의 일반 흐름을 완전히 덮어쓰고 절대 위치를 설정하려면 다음과 같은 관련 속성이 있습니다. * `positionType`: 엔티티가 어떻게 배치되는지 정의합니다. 값은 다음에서 가져옵니다. `PositionType` 열거형입니다. * `relative`: (기본값) 기본적으로 엔티티는 상대적으로 배치됩니다. 이는 엔티티가 레이아웃의 일반 흐름에 따라 배치된 다음, 다음의 값에 따라 그 위치를 기준으로 오프셋된다는 뜻입니다. `상단`, `right`, `하단`, 그리고 `left`. 오프셋은 다른 형제 또는 부모 엔티티의 위치에 영향을 주지 않습니다. * `absolute`: 절대적으로 배치되면 엔티티는 일반 레이아웃 흐름에 참여하지 않습니다. 대신 형제와 독립적으로 배치됩니다. 위치는 다음을 기준으로 결정됩니다. `상단`, `right`, `하단`, 그리고 `left` 값. * `위치`: 위치 값 `상단`, `right`, `하단`, 그리고 `left` 다음에 따라 다르게 동작합니다. `positionType`. 상대 엔티티의 경우 지정된 방향으로 엔티티의 위치를 오프셋합니다. 그러나 절대 엔티티의 경우 이러한 속성은 엔티티의 해당 변이 부모의 동일한 변에서 얼마나 떨어져 있는지를 지정합니다. 예상 값은 다음 속성을 포함하는 객체입니다. `상단`, `left`, `하단`, 그리고 `right`. {% hint style="warning" %} **📔 참고** : 다음의 양수 값은 `상단` 또는 `left` 부모의 같은 가장자리로부터 안쪽으로의 거리를 측정합니다. 예: 상단과 왼쪽에서 부모 기준으로 20픽셀의 여백을 두고 구성 요소를 배치하려면 `위치` 를 `{ top: 20, left: 20 }`. {% endhint %} ### 가시성 * `display`: 엔티티가 보이는지 여부를 결정합니다. 엔티티를 보이지 않게 하려면 다음을 설정하세요. `display` 를 `none`. ### Z Index 그 `zIndex` 속성 of a `UiEntity` 엔티티의 렌더링 순서를 결정합니다. 더 높은 `zIndex` 를 가진 엔티티는 더 낮은 `zIndex`를 가진 엔티티보다 위에 렌더링됩니다. `zIndex` 기본값 ```ts import { UiEntity, ReactEcs } from '@dcl/sdk/react-ecs' import { Color4 } from '@dcl/sdk/math' export const uiMenu = () => ( ) ``` {% hint style="warning" %} **📔 참고** : `zIndex` 속성은 직접 형제 요소들 간의 순서만 정하며, 다른 레이아웃 트리 부분 위에 엔티티를 렌더링하는 데 사용할 수 없습니다. HTML/CSS 용어로는 모든 DCL UI 요소가 새로운 [스태킹 컨텍스트](https://web.dev/learn/css/z-index#stacking_context). 지도, 채팅 등을 포함한 기본 Decentraland UI는 항상 다른 모든 UI 요소 위에 렌더링됩니다. {% endhint %} ## 스크롤 가능한 컨테이너 UI 엔티티에 할당된 크기보다 더 많은 콘텐츠가 있을 때, 다음을 설정하여 영역을 스크롤 가능하게 만들 수 있습니다. `overflow` 를 `scroll` 엔티티의 `uiTransform`. 그러면 플레이어는 드래그하거나 마우스 휠을 사용하여 콘텐츠를 스크롤할 수 있습니다. 스크롤 가능한 컨테이너를 만들려면 부모 엔티티가 고정 크기여야 하며(다음을 사용하여 `width` 및 `height`), 자식이 그 크기를 초과해야 합니다. ```ts import { UiEntity, Label, ReactEcs } from '@dcl/sdk/react-ecs' import { Color4 } from '@dcl/sdk/math' export const scrollableMenu = () => ( {/* 이러한 자식들은 부모의 400px 높이를 초과하여 영역을 스크롤 가능하게 만듭니다 */} ) ``` 이것은 긴 목록, 인벤토리, 채팅 로그, 순위표 또는 콘텐츠가 화면에 들어가는 양을 초과할 수 있는 모든 패널을 만드는 데 유용합니다. 다른 UI 레이아웃 안에 스크롤 가능한 컨테이너를 중첩할 수도 있습니다. 예를 들어, 고정 헤더와 스크롤 가능한 본문이 있는 대화상자 모달: ```ts import { UiEntity, Label, ReactEcs } from '@dcl/sdk/react-ecs' import { Color4 } from '@dcl/sdk/math' export const dialogWithScroll = () => ( {/* 고정 헤더 */} ) ``` {% hint style="info" %} **💡 팁**: 다음을 사용하세요 `flexGrow: 1` 스크롤 가능한 엔티티에서 이를 사용하면 부모의 남은 공간을 채우게 되어, 다른 형제 요소(예: 헤더 또는 푸터)가 크기를 바꿔도 자동으로 적응합니다. {% endhint %} ## 반응형 UI 크기 화면 크기가 다른 플레이어는 UI 레이아웃을 다르게 볼 수 있습니다. 픽셀 값은 다음을 기준으로 스케일됩니다. [가상 화면](/creator/content-creator-ko/sdk7/2d-ui/onscreen-ui.md#screen-virtual-scale) 당신을 위해, 그래서 같은 UI가 해상도 전반에서 비율을 유지합니다 — **자체적으로 배율 계수를 계산할 필요가 없습니다**, 그렇게 하면 배율이 두 번 적용됩니다. {% hint style="warning" %} **📔 참고**: `devicePixelRatio` UI 레이아웃에는 전혀 관여하지 않습니다. 이는 디스플레이 밀도에 대한 힌트로서, 1x, 2x 또는 3x 텍스처 버전을 선택할 때 유용할 뿐입니다. 장면의 크기를 이전 SDK 버전에서 맞췄다면, 픽셀 크기의 UI가 고밀도(레티나 및 모바일) 화면에서 최대 2\~3배 더 크게 렌더링될 수 있으니, 수동으로 조정한 부분은 다시 확인하세요. {% endhint %} {% hint style="danger" %} **📔 자체 배율 계수를 제거하세요.** 장면이 크기를 다음에서 계산한 계수로 곱하고 있다면 `UiCanvasInformation` — 일반적으로 `Math.min(width / 1920, height / 1080)` — 그 배율 곱셈을 제거하세요. 이는 SDK가 이제 기본적으로 적용하는 것과 동일한 계수이므로, 둘 다 유지하면 UI가 화면 크기에 따라 제곱으로 커집니다. 자체 계수를 유일한 배율로 유지하고 싶다면 다음으로 가상 화면을 비활성화하세요. `setUiRenderer(ui, { virtualWidth: 0, virtualHeight: 0 })`. {% endhint %} `UiCanvasInformation`, 장면의 루트 엔티티에 기본적으로 추가되는 이 값은 배율로는 표현할 수 없는 레이아웃 결정을 위한 올바른 도구이기도 합니다. 예를 들어 좁은 화면에서 다른 대화상자 배치를 선택하거나, 다음에서 텍스처 해상도를 고르거나 `devicePixelRatio`, 또는 안전 영역을 직접 읽어오는 경우입니다. 크기 조정에는 적합하지 않습니다. 그 `UiCanvasInformation` 구성 요소는 다음 정보를 보유합니다: * `height`: 캔버스 높이(픽셀) * `width`: 캔버스 너비(픽셀) * `devicePixelRatio`: 장치의 물리적 픽셀 해상도와 캔버스의 픽셀 간 비율입니다. 1x, 2x 또는 3x 텍스처 버전 중에서 선택하는 데 유용한 디스플레이 밀도 힌트로 쓸 수 있습니다. * `interactableArea`: `BorderRect` 객체로, 씬 UI 요소가 지정된 영역을 자세히 설명합니다. 이 객체에는 다음 값이 포함됩니다. `상단`, `하단`, `left` 및 `right`, 각 값은 탐색기 UI가 차지하는 화면의 해당 여백 픽셀 수입니다. * `screenInsetArea`: `BorderRect` 객체로, 기기 또는 플랫폼 UI에 의해 예약된 화면 인셋 영역(안전 여백)을 자세히 설명합니다. 예를 들어 모바일의 노치, 상태 표시줄, 홈 인디케이터 또는 둥근 모서리 등이 이에 해당합니다. 이 객체에는 다음 값이 포함됩니다. `상단`, `하단`, `left` 및 `right`, 각 값은 화면의 해당 가장자리에 예약된 픽셀 수입니다. 데스크톱에서는 일반적으로 `0` 모든 측면에서 {% hint style="warning" %} **📔 참고** 입니다. {% endhint %} ```ts import { engine, UiCanvasInformation } from "@dcl/sdk/ecs" export function Main() { const canvas = UiCanvasInformation.getOrNull(engine.RootEntity) if (!canvas) return console.log("캔버스 크기: ", canvas.width, canvas.height) } ``` UI 크기에 관한 몇 가지 추가 모범 사례: * UI 요소의 너비나 높이가 동적이라면, 다음도 함께 사용하는 것이 좋습니다. `maxWidth`, `minWidth`, `maxHeight`, 그리고 `minHeight` 매개변수로 값이 합리적인 범위에 머무르도록 하세요. * 숫자 폰트 크기는 다른 것과 마찬가지로 스케일되는 가상 픽셀 값입니다. 대신 캔버스를 기준으로 크기를 측정하여 가상 화면과 무관하게 유지하고 싶다면, 다음을 전달하세요. `vw`/`vh` 문자열 — 다음을 참조하세요 [반응형 텍스트 크기](/creator/content-creator-ko/sdk7/2d-ui/ui_text.md#responsive-text-size) {% hint style="info" %} **💡 팁**: UI 크기 조정의 실제 예는 다음을 참조하세요. [`81,-2-ui-screen-inset-area`](https://github.com/decentraland/sdk7-test-scenes/tree/main/scenes/81,-2-ui-screen-inset-area) 테스트 장면을 보세요. 이 장면은 세 가지 `screenInset` 모드(`'none'`, `'device'`, `'interactable'`)를 세 개의 공존하는 렌더러로 실행하고 실시간 `screenInsetArea` 및 `interactableArea` 값과 [`76,-10-UiCanvasInformation`](https://github.com/decentraland/sdk7-test-scenes/tree/main/scenes/76,-10-UiCanvasInformation), `UiCanvasInformation` 매 프레임 읽어 UI 크기를 반응형으로 조정합니다. {% endhint %} --- # 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/2d-ui/ui-positioning.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.