Following/Follower 목록 기능 추가하기
ZEPETO.Module의 소셜 API를 사용하여 월드 크리에이터는 사용자의 친구 목록을 불러올 수 있습니다.
월드 크리에이터는 새로운 사용자를 팔로우하거나 팔로우한 사용자의 팔로우를 취소할 수도 있습니다.
먼저 Window → Package Manager → ZEPETO.World 패키지 버전 1.21.0 이상을 설치하세요.
그 다음, ZEPETO.Module 패키지를 설치하세요.
ZEPETO.Module 패키지는 팔로우/팔로워 목록을 쉽게 만들 수 있는 UI 프리팹을 제공합니다.
1) 프로젝트 패널에서 Packages > ZEPETO.Module > Social > Runtime > UI > _Resources > Prefab 폴더로 이동합니다.
2) 폴더의 프리팹 중 FollowScrollView.prefab을 씬으로 드래그 앤 드롭합니다.
❗️ 주의 이벤트 시스템 객체가 장면에 존재하지 않으면 이 기능이 제대로 작동하지 않을 수 있습니다. GameObject > UI > EventSystem으로 가서 객체를 추가하세요.
3) 재생 버튼을 클릭하여 친구 목록 팝업이 화면에 나타나는 것을 확인하세요.
- 친구 목록 팝업을 생성하는 FollowScrollView.prefab은 FollowScrollView 구성 요소를 사용하여 화면에 친구 목록과 총 사용자 수를 로드하고 표시합니다.
- FollowScrollView 구성 요소에 구성된 정보는 다음과 같습니다.
1 | 높이 | 스크롤 뷰에서 사용자 정보 셀 간의 수직 거리 값 |
|---|---|---|
2 | 로드 수 | 셀 로드 수: 스크롤 뷰가 스크롤될 때 로드되는 셀 데이터의 수. 이 값에 대해 높은 수를 설정하면 로딩 속도에 영향을 줄 수 있습니다. |
3 | 사용자 정보 프리팹 | 사용자 정보를 표시하기 위한 개별 셀의 UI 프리팹 |
4 | 총 수 프리팹 | 총 사용자 수를 표시하는 프리팹. 텍스트는 자동으로 번역되어 여러 언어로 표시될 수 있습니다. |
5 | 캔버스 스케일러 | 친구 목록 UI의 캔버스 모양을 선택할 수 있습니다. 미리 만들어진 캔버스를 사용할 수 있습니다. |
6 | 수직 | 팔로우 뷰 컨트롤러를 포함한 수직 화면 UI 프리팹을 등록합니다. |
7 | 수평 | 팔로우 뷰 컨트롤러를 포함한 수평 화면 UI 프리팹을 등록합니다. |
8 | 배경 | 친구 목록 UI가 표시될 때 나타나는 반투명 검은 화면 |
친구 목록이 FollowScrollView를 통해 생성될 때, 월드 화면이 가로 모드인 경우 FollowScrollView_Landscape가 적용됩니다.
- 화면이 세로 모드일 때 FollowScrollView_Portrait가 적용됩니다.
- FollowScrollView_Landscape 및 FollowScrollView_Portrait에 적용된 FollowView Controller 구성 요소의 정보는 다음과 같습니다.
1 | 팔로워 탭 | 팔로워 탭 그룹 |
|---|---|---|
2 | 팔로잉 탭 | 팔로잉 탭 그룹 |
3 | 스크롤러 | 친구 목록 스크롤 뷰 |
4 | 빈 이미지 | 친구 목록이 비어 있을 때 표시되는 이미지 |
5 | 로딩 스피너 | 친구 목록이 로딩 중일 때 표시되는 이미지 |
6 | 닫기 버튼 | 친구 목록 팝업을 닫는 버튼 |
7 | 제목 | 친구 목록 팝업의 제목 |
8 | 팔로워 | 팔로워 패널의 활성/숨김 상태를 표시하는 버튼 텍스트 |
9 | 팔로잉 | 팔로잉 패널의 활성/숨김 상태를 표시하는 버튼 텍스트 |
10 | 빈 텍스트 | 친구 목록이 비어 있을 때 표시되는 텍스트입니다. |
11 | 패널 | 전체 UI 패널 |
아래와 같이 친구 정보가 표시되는 셀에는 Follow Cell View와 UserInfo Cell View 구성 요소가 적용되어 있습니다. 각 구성 요소의 정보는 다음과 같습니다.
1 | 보기 이름 | 사용자 이름 텍스트 |
|---|---|---|
2 | 프로필 보기 | 사용자 프로필 이미지 |
3 | 팔로우 버튼 | 사용자 팔로우 버튼 |
4 | 언팔로우 버튼 | 사용자 언팔로우 버튼 |
5 | 배지 보기 | 배지 아이콘 이미지 |
6 | 그리터 배지 보기 | 그리터 아이콘 이미지 |
7 | 팔로우 보기 | 팔로우 버튼 텍스트 |
8 | 팔로우 중 보기 | 언팔로우 버튼 텍스트 |
👍 팁
- ZEPETO 텍스트는 UnityEngine_UI.Text를 상속하며, 월드 내 UI 편의를 위한 몇 가지 추가 기능을 제공합니다. 텍스트는 FollowScrollView Prefab 편집 모드에서 쉽게 편집할 수 있습니다.
- 사용자 이름 옆에 표시되는 배지 아이콘은 ZEPETO 제작자 및 인사 담당자와 같은 특별한 사용자를 표시하는 데 사용되는 아이콘입니다.
UI 요소를 수정하여 친구 목록을 사용자 정의할 수 있습니다.
Packages에서 프리팹을 선택하고 Assets 폴더로 드래그 앤 드롭하여 프리팹을 복사합니다.
👍 팁 프리팹은 Packages 폴더에 있는 동안 수정할 수 없지만, Assets 폴더의 하위 폴더로 복사되면 수정할 수 있습니다.
