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