게임 화면을 꾸밀 UI 시안 세 가지를 만들었습니다. 이 게임에서는 인물과 대화하고, 현장의 물건을 들여다보고, 그 장면을 사진으로 남깁니다. 대화 화면은 위쪽에 메뉴 버튼, 가운데에 인물, 아래쪽에 대화 글과 버튼이 놓입니다. 오늘은 이 UI를 인물 그림과 같은 화풍으로 그렸습니다. 세 시안은 대화 글과 버튼을 담는 재질이 다릅니다. 종이 기록지, 관찰판, 현장 수첩입니다. 그중 한 시안은 대화 글을 얇은 종이에, 버튼을 그 아래 수첩에 나눠 담도록 다듬었습니다. 휴대폰 세로 화면에서 글자가 잘 읽히고 손가락으로 누르기 쉬운지도 확인했습니다.
인물 그림과 같은 화풍으로 게임 화면 시안 세 가지를 만들었습니다
현장을 살피고 사진을 찍고 인물에게 직접 질문하며 사건을 푸는 모바일 추리 게임입니다.이 프로젝트 소개 →뭘 했다
왜
인물과 공간을 보여 주는 화면에 대화와 조사 버튼까지 올리면 금세 비좁아집니다. 실제 그림 작업에 들어가기 전에 어떤 모양이 어울리고 무엇을 어디에 둘지 먼저 정하고 싶었습니다. 그래서 인물이 중심인 다른 게임들이 화면을 어떻게 나누는지도 찾아 정리해 두었습니다.
삽질 포인트
종이와 수첩을 한 화면에 놓아 보니, 둘 다 테두리가 두 줄이라 그 선들이 서로 맞물려 지저분해 보였습니다. 그래서 종이와 수첩 사이를 띄우고, 버튼은 수첩 안 한 줄에 모았습니다. 인물 얼굴이 위쪽 메뉴 버튼 바로 밑에 붙어 화면이 위로 쏠려 보이기도 했습니다. 인물만 아래로 내려서 풀었습니다. 버튼 아이콘도 손봤습니다. 찍어 둔 사진을 상대에게 보여 주는 버튼과 지난 대화를 다시 보는 버튼이 작은 크기에서 잘 구별되지 않았습니다. 앞의 것은 사진 묶음, 뒤의 것은 펼친 노트 모양으로 다시 그렸습니다.
다음 할 것
세 시안 중 하나를 고르고, 그 모양으로 실제 화면 그림을 만들겠습니다.
그 밖의 소식
인물을 처음 소개할 때 쓸 세로 그림 두 장을 만들었습니다. 상반신의 자세와 시선, 소품으로 인물의 성격이 드러나게 했습니다. 그림 속 인물과 뒤 배경은 따로 저장해 두어서, 이 그림을 다른 화면에 쓸 때 배경만 다른 것으로 바꿀 수 있습니다. 커밋 3개
원료 · git log
f316642docs: 인물 중심 게임 UI 사례 조사와 구조 권고 보관
77742f3design: UI 아이콘 의미와 종이 수첩 배치 간격 정리
2f5fd70design: 얇은 기록지와 수첩 받침판을 조합한 UI 시안 개선
4a4adb1design: 대화 화면의 인물 중심 위치를 아래로 조정
6813233design: 캐릭터 화풍의 UI 컨셉 세 안과 분리 소스 제작
a125058design: 세로형 조사 화면 구조와 UI 제작 규격 정리
0f0b581docs: 캐릭터 세로 프로필 제작 기준과 필수 참조 연결
8ae07aaasset: 성격이 드러나는 세로 프로필과 배치 소스 정리
95f3333asset: 세로 프로필과 분리형 배경 소스 보관