[쿼리도슈팅 개발일지 #01] 게임 UI 기획, 피그마 프로토타입과 컴포넌트로 협업 효율 높이기

이번 주 목표

3월 플레이테스트에서 "UI에서 정보가 한눈에 들어오지 않는다"는 피드백이 반복돼서,

4월 한 달은 쿼리도슈팅의 UI 개선에 집중하기로 했어요.

 

이번 주는 두 가지가 목표였어요.

첫째, 기존 와이어프레임(화면 구성 요소와 배치를 단순한 선과 도형으로 표현한 설계도)과 컴포넌트(반복 사용되는 UI 요소를 하나의 마스터로 관리하는 단위)를 새 디자인으로 교체하기.

둘째, 타 팀이 UI 기획안을 더 명료하게 파악할 수 있도록 피그마(Figma)의 프로토타입 기능을 적극 활용하기.

실제로 한 것

타이틀·메인 메뉴·전투·도감·설정 등 총 12개 화면의 와이어프레임을 제작했어요.

그리고 피그마의 프로토타입 기능(와이어프레임끼리 인터랙션을 연결해서 실제 앱처럼 클릭해볼 수 있게 해주는 기능)을 이용해서, 각 와이어프레임의 어떤 요소를 터치하면 다음 화면으로 넘어가는지를 한눈에 확인할 수 있도록 만들었어요.

스크린샷: 전투 화면에서 적 캐릭터를 탭하면 우측에 상태창이 펼쳐지는 와이어프레임

스크린샷: 도감 화면 - 캐릭터 목록을 선택하면 우측 상세 정보 영역이 갱신되는 흐름

 

 

피그마의 꽃, 컴포넌트 기능도 적극 활용했어요.

마스터 컴포넌트를 수정하면 복사된 모든 인스턴스에 변경 사항이 일괄 적용되는 이점이 있어서,

자주 쓰는 버튼·모달·정보창 등 약 18종을 컴포넌트로 만들어서 관리했어요.

스크린샷: 피그마에서 관리 중인 버튼·모달·정보창 컴포넌트 라이브러리 — 약 18종 항목

 

 

전투 화면의 경우, 기존에 문서화돼 있던 화면 정의서 5종을 프로토타입의 description란에 함께 삽입했어요.

와이어프레임을 보면서 정의서를 동시에 확인할 수 있어서, 타 팀에 별도로 문서를 공유하지 않아도 맥락이 전달됐어요.

스크린샷: 전투 화면 프로토타입 - Flows 하단 description에 화면 정의서가 삽입된 모습

 

 

또 다른 기획 팀원의 화면 연출 기획안을 프로토타입에 반영해서, UI와 화면 연출을 한눈에 볼 수 있게 했어요.

스크린샷: 전투 시작 효과

스크린샷: 전투 승리 효과

 

막힌 부분 또는 변경된 점

사전에 와이어프레임 제작만 생각하고 UI/UX 기획 일정을 짰어서 예상보다 시간이 많이 지체됐어요.

와이어프레임 외에도 컴포넌트 정리와 프로토타입 인터랙션 연결까지 관리하다 보니, 예상했던 2주가 실제로는 약 3.5주로 늘어났어요.

 

이를 보완하려고 우선순위가 가장 높은 와이어프레임부터 먼저 작업했어요.

완성된 화면은 그때그때 타 팀에 전달하고, 진행 과정은 기획 팀원과 공유하는 방식으로 병목을 줄였어요.

 

다음 주 계획

다음 주부터는 전투 외 다른 화면에도 화면 정의서를 작성할 예정이에요.

다만 이번 주의 일정 지연이 재발하지 않도록, 모든 화면을 정의서로 만들지 않고 프로토타입에서 직관적으로 확인하기 어려운 화면 요소 위주로만 작성하려고 해요.

이렇게 범위를 좁혀서 다음 주 안에 마무리하는 게 목표예요.