[인프런] 게임 데이터 테이블 및 UX/UI 설계

오늘은 인프런 챌린지 게임 시스템 기획 챌린지 3주차 내용을 공부했습니다. 설연휴도 있고 해서 조금 미리 공부했습니다. 

도서는 한빛미디어에서 나온 유리링의 실전 게임 시스템 기획입니다.

공부할 내용은 chapter10 데이터 테이블이란 무엇인가,  chapter11 데이터 테이블 설계,   chapter12 데이터 테이블 사례,   chapter13  UX/UI란 무엇인가,   chapter14 UX/UI 기획을 위한 구성 요소와 표현 기법, chapter15 UX/UI 설계, chapter16 UX/UI 구성요소입니다.

---

Chapter10 데이터 테이블이란 무엇인가

게임 데이터 저장은 1)하드코딩 방식과 2) 데이터테이블 방식으로 구분된다. 

데이터테이블 방식은 아래 5가지면에서 유리하다. 

1)  코드 수정 없이 데이터만 수정할 수 있다.

2) 기획자, 운영자도 직접 수정이 가능하다.

3) 재사용성과 확장성이 높다.

4) 실수 위험을 줄일 수 있다.

5) 자동화 및 도구 연동이 가능하다.

 

데이터 테이블에 관한 오해

1. 데이터 테이블을 정보 전달 및 정리 용도라고 생각한다.

2. 테이블 설계는 기획자의 업무 범위가 아니라고 생각한다.

3. 플레이어 데이터를 기획 데이터 테이블로 관리해야 한다고 생각한다.(플레이어 데이터 VS 기획 데이터)

4. 테이블 설계에 정답이 있다고 생각한다.

5. 테이블 설계는 난이도가 높은 일이아고 생각한다.

 

---

Chapter11 데이터 테이블 설계

관계형 DB의 정규화하는 과정과 유사하게 게임 데이터를 효율적으로 쪼개서 각 테이블의 키를 참조하는 형태로 설계하는 것이 핵심입니다. 예를 들어 교제에는 '출석부 시스템'을 예를 들어 설명했는데, 아래 3가지 테이블로 나누어 구성하고 각각 참조하는 방식으로 설계했습니다.1. 출석부 테이블: 출석부의 이름, 기간, 사진 등 기본 정보를 담고 있음2. 출석 보상 테이블: 출석부 내 회차에 어떤 보상을 주는지 담고 있음3. 아이템 테이블: 보상으로 지급되는 아이템들의 상세 정보를 담고 있음

 

Chapter12 데이터 테이블 사례

테이블 설계를 잘하기 위해선는 '어떤 종류의 데이터를 어떤 구조로 테이블화해야 하는가'에 대한 감각을 길러야 하는데, 이번에는 실무에서 자주 쓰이는 다양한 테이블들을 분야별로 정리하고, 각 테이블이 어떤 데이터를 다루고 어떤 시스템과 연결되는지 구체적으로 나와 있었습니다. 게임 개발 및 기획 경험이 거의 없는 저로서는 사실 관련 실무 수준까지 내용이 잘 이해가 되지 않았습니다. 그냥 적절히 눈에 익히는 수준으로 쭉 읽어나갔습니다. 

1 텍스트 리소스 관리 테이블

- 스트링 테이블

- 다이얼로그 테이블

2.  아이템 & 제작 관리 테이블

- 아이템 테이블

- 장비 테이블

- 제작 테이블

3. 상품 관리 테이블

- 상품 & 상점 테이블

4. 랜덤 확률 관리 테이블

- 랜덤 상점 테이블

- 가챠 테이블

- 랜덤 장비 옵션 테이블

5. 스펙 관리 테이블

- 레벨별 스테이터스 테이블 및 캐릭터 테이블

- 스킬 테이블

6. 성장 관리 테이블

- 필요 경험치 테이블

- 장비 강화 테이블

7. 콘텐츠 관리 테이블

- 퀘스트 테이블

8. 게임 설정 관리 테이블

- 설정 테이블

 

Chapter13 UX/UI란 무엇인가?

UI/UI에 대한 부분은 사실 그렇게 새로운 내용이 있는 것은 아니여서 가볍게 읽어 내려갔습니다.

 

시스템 기획자가 아무리 훌륭한 기느와 구조를 설계하더라도, 그 기능을 사용자가 만나는 첫 지점은 UI다. UI가 불친절하거나 UX가 어색하면, 시스템의 장점은 드러나지 않고 오히려 단점만 부닥된다. 

UI, UX는 단순 조작 수단이 아닌, 기획 의도를 플레이어에게 '설명 없이' 전달하는 가장 강력한 수단이다. 

 

Chapter14 UX/UI 기획을 위한 구성요소와 표현 기법

 

어떤 정보를 화면에 담을 것인가 - 인터페이스의 구성

고려할 요소

경험 최적화, 화면 제약 고려, 노출된 정보 개수 고려, 우선순위 판단

 

어떻게 배치할 것인가- 인터페이스의 배치

 

UI의 깊이- 정보에 도달하는 단계 수를 최소화하라

자주 쓰는 기능은 1~2단계 내에 노출되도록 한다.

 

UI의 상호작용 - 조작 결과가 예상 가능해야 한다.

 

메타포

사용자에게 익숙한 현실의 사물이나 개념을 UI 요소에 차용해 그 의미나 기능을 언어 없이 직관적으로 전달하려는 시도다.

 

인터페이스의 스타일

게임 장르, 테마와 시각적 아이덴티티 통일

일관된 그래픽 톤과 요소 유지

앱 스타일의 차별화

 

Chapter15 UX/UI 설계

UX/UI 구조 설계를 위한 도구

1. 정보구조도(IA): 전체 시스템 구조를 시각적으로 정리해 기능 간 관계를 정의

2. UI 플로차트: 사용자 행동 흐름에 따라 화면 전환과 조건별 분기를 정리

- 플레이어가 어떤 행동을 했을 떄 어떤 화면으로 이동하고, 어떤 선택지를 마주하는지를 흐름도로 정리한 문서이다. 이는 UX의 근간이며, 시스템의 반응과 분기 조건을 정리할 수 있다.

3. 와이어프레임: 기능과 구조만 반영한 화면 레이아웃 설계 도안

 

UX/UI 영역 설계

- 이 UI화면의 이름은 무엇인가?- 어떤 역할을 담당하는가?- 어떤 구성 요소로 이루어져 있는가?- 왜 이런 식으로 배치했는가?

 

UI 구성 요소 설계

UX.UI 설계에서 인터페이스 전체 구조와 배치를 설계하는 것만큼이나 중요한 것이 각 UI 구성요소(버튼, 메뉴, 리스트 등)가 실제로 화면에서 어떤 역할을 하는지 그리고 어떤 방식으로 동작하고 상호 작용하는지를 설계하는 일이다. 

 

설계 시 놓치기 쉬운 포인트

- 정렬규칙

- 기본값

- 저장방식

- 정보 갱신 주기

- 숫자와 시간 표기법

- 문자열 처리 방식(글로벌 서비스 대응)

Chapter16 UX/UI 구성 요소

입력UI

텍스트 입력 필드

드롭다운 & 콤보 박스

스피너 & 슬라이더 & 스태퍼

라디오 버튼 & 체크박스 & 토글 스위치

버튼

햄버거 버튼

 

알림UI

토스트

툴팁

팜업창 & 모달창

배지

인디케이터 & 프로그레스 바

 

탐색UI

스크롤 영역

캐러셀

아코디언 메뉴

 

UX/UI 설계 시 고려해야 할 점

시인성 - 보이지 않으면 없는 것과 같다

직관성 - 사용법을 배우지 않아도 쓰게 하라

일관성- 처음 배운 방식이 반드시 통하게 하라

확장성- 콘텐츠가 늘어나도 UI는 무너지지 않아야 한다.

명확한 피드백- 피드백은 UI의 대화다

감정설계-손은 UI를 기억하고 머리는 UX를 기억한다.

역방향 점검 - UI가 복잡하다면 시스템을 의심하라