UI 캔버스 설정하기

모바일 장치는 다양한 화면 크기와 해상도로 제공됩니다 zepeto world에서는 unity의 canvas를 사용하여 ui 요소를 표현하므로 unity는 동일한 제한 사항이 있습니다 다음 가이드는 가능한 많은 장치에 ui를 표시하기 위한 중립적인 설정을 제공합니다 따라서 모든 모바일 장치에 정확히 맞는 ui를 표현하는 것은 불가능하지만, 대부분의 장치에서 ui 요소를 유사한 위치에 배치하는 것을 목표로 합니다 세로 화면 모드에서의 canvas 설정 1\ 세로 화면 모드에 대한 canvas 설정은 아래와 같이 설정됩니다 ui 스케일 모드 화면 크기에 맞게 스케일 기준 해상도 x 750 y 1334 화면 일치 모드 너비 또는 높이에 맞추기 너비 맞추기 2\ safearea 설정 canvas 객체의 자식으로 safearea라는 객체를 생성합니다 inspector 패널에서 add component 버튼을 클릭하여 zepeto screen safe area 컴포넌트를 추가합니다 👍 팁 zepeto screen safe area 컴포넌트는 특정 단말기의 노치 영역과 홈 바에 의해 가려진 ui를 화면 내부로 이동시킵니다 zepeto screen safe area의 영향을 받는 ui 객체는 하위 객체로 포함될 수 있습니다 3\ 오른쪽 상단 버튼 영역 설정 layout group을 통해 요소가 하위 객체로 추가될 때마다 오른쪽 상단의 버튼 영역이 자동으로 왼쪽과 오른쪽에 정렬되도록 설정합니다 safearea 아래에 새 객체를 생성하고 다음 컴포넌트를 설정합니다 직사각형 변환 posx 22, posy 22 수평 레이아웃 그룹 간격 20 자식 정렬 왼쪽 상단 내용 크기 필터 수평 맞춤 기본 크기 4\ 버튼 설정 버튼 영역의 자식으로 버튼 객체를 생성합니다 버튼은 자동으로 정렬되며 다음 설정이 적용됩니다 너비 62 높이 62 5\ 장치에서 확인 이제 월드 를 빌드하고 모바일 장치에서 확인하면, 다음 이미지와 같이 오른쪽 상단에 위치한 버튼을 볼 수 있습니다 ❗️ 주의 왼쪽 홈 버튼과 채팅 버튼은 zepeto 앱의 네이티브 환경에 표시되는 버튼이므로, 정확한 위치와 크기를 canvas를 통해 일치시킬 수 없습니다 6\ 왼쪽 상단 ui 설정 화면의 왼쪽 영역에 ui 요소를 설정하기 위해서는 3단계에서 설정한 오른쪽 영역에서 몇 가지 변경만 필요합니다 변경해야 할 설정은 다음과 같습니다 recttransform posx 22, posy 22 수평 레이아웃 그룹 간격 20 자식 정렬 왼쪽 상단 수평 화면 모드에서의 캔버스 설정입니다 1\ 가로 모드에 대한 캔버스 설정은 아래와 같습니다 ui 스케일 모드 화면 크기에 맞게 조정 기준 해상도 x 750, y 1334 화면 일치 모드 너비 또는 높이에 맞추기 너비 맞추기 2\ 안전 영역 설정입니다 캔버스 객체의 자식으로 safearea라는 객체를 생성합니다 검사기 패널에서 구성 요소 추가 버튼을 클릭하여 zepeto 화면 안전 영역 구성 요소를 추가합니다 👍 팁 zepeto 화면 안전 영역 구성 요소는 특정 단말기의 노치 영역과 홈 바에 의해 가려진 ui를 ios 화면의 내부로 이동시킵니다 zepeto 화면 안전 영역의 영향을 받는 ui 객체는 하위 객체로 포함될 수 있습니다 3\ 오른쪽 상단 버튼 영역 설정 요소가 레이아웃 그룹을 통해 하위 객체로 추가될 때마다 오른쪽 상단의 버튼 영역이 자동으로 왼쪽과 오른쪽에 정렬되도록 설정합니다 safearea 아래에 새 객체를 생성하고 다음 구성 요소를 설정합니다 rect transform posx 22, posy 22 수평 레이아웃 그룹 간격 20 자식 정렬 왼쪽 상단 내용 크기 필터 수평 맞춤 기본 크기 4\ 버튼 설정 버튼 영역의 자식으로 버튼 객체를 생성합니다 버튼은 자동으로 정렬되며 다음 설정이 적용됩니다 너비 62 높이 62 5\ 장치에서 확인 이제 월드 를 구축하고 모바일 장치에서 확인하면, 다음 이미지와 같이 오른쪽 상단에 위치한 버튼을 볼 수 있습니다 ❗️ 주의 왼쪽 홈 버튼과 채팅 버튼은 zepeto 앱의 네이티브 환경에 표시되는 버튼이므로, 정확한 위치와 크기를 canvas를 통해 일치시킬 수 없습니다 6\ 왼쪽 상단 ui 설정 화면의 왼쪽 영역에 ui 요소를 설정하기 위해서는 3단계에서 설정한 오른쪽 영역에서 몇 가지 변경만 필요합니다 변경해야 할 설정은 다음과 같습니다 recttransform posx 22, posy 22 수평 레이아웃 그룹 간격 20 자식 정렬 왼쪽 상단