유니티 UI 학습을 위해 실습 삼아 이미 서비스중인 게임의 UI 일부를 재현해보기로 했다. 내가 지금 플레이 중인 게임 <뉴럴 클라우드> 의 캐릭터 정보 UI를 모델로 잡고 기획을 시작했다.
모델로 삼은 원본 게임 화면. 캐릭터 수집 게임에서 흔히 볼 수 있는 포맷이다.
우측 상단의 필터 버튼을 누르면 이런 필터 선택 팝업이 뜬다.
핵심 기능
- 대량의 데이터를 가공하여 캐릭터 카드 프리팹에 표시하고, 프리팹을 런타임에서 그리드 레이아웃에 동적으로 출력
- 캐릭터 카드 객체를 오브젝트 풀을 통해 재사용
- 데이터 정렬 및 필터 기능
목표 작업 기간
원래 네트워크 실습도 해보고 싶어서 서버 구현까지 포함하여 6월 5일부터 6월 11일까지 기간을 잡았으나 한 번에 진행하기엔 다루는 분야가 너무 넓다는 생각이 들었다. 그래서 서버 쪽은 나중에 별개 프로젝트로 해보기로 하고 기간을 6월 9일까지로 변경했다.
UI 기획
화면 설계 과정. 게임 전체를 구현하지 않을 것이므로 좌측 상단 버튼들은 껍데기만 만들어둘 생각이다. 기능은 목록 표시, 정렬 및 필터 기능만 구현할 예정이다. 필터 팝업에서 선택 가능한 필터도 간소하게 6개로 줄일 것이다.
NGUI, UGUI, UI Toolkit 중에서 나는 UGUI를 선택했다. 가장 진입장벽이 낮아 보였기 때문이다. NGUI는 레거시가 되었지만 여전히 채용공고에서 많이 보이고 있고, UI Toolkit는 현재 공식에서 밀어주는 것 같아서 추후 다른 UI에 대한 학습도 필요해 보인다.
가장 핵심이 되는 캐릭터 목록은 스크롤 뷰 안에 그리드 레이아웃을 배치하고, 그 안에 개별 캐릭터 카드 프리팹을 동적으로 인스턴스화하여 구현할 것이다. 리소스 절약을 위해 재사용 스크롤뷰 에셋을 쓸 계획인데, 여유가 된다면 재사용 메커니즘을 직접 구현해 보고 싶다.
데이터 기획
데이터는 UI에 노출되는 것만을 최소한도로 만들기로 했다. Character 클래스를 만들어 캐릭터 정보를 담고, 정보 중 개별 캐릭터와 독립적인 스킬, 직업, 역할군은 별도 클래스를 만들어 관리하기로 했다.
원래 데이터를 웹서버에서 HTTP 통신을 통해 JSON 형태로 가져와서 Character 객체로 역직렬화 후 UI 계층에 전달할 계획이었다. 그러나 중간에 계획을 변경하여 네트워크는 생략하고 원래 네트워크 작업을 담당했을 클래스에 더미데이터를 넣어서 불러오는 느낌만 냈다.
