개발 로그 · 게임 개발

탱크 파이터의 UI를 unslop으로 정돈했습니다

원화와 큰 프레임을 유지하고 장착 칸과 수치표를 정돈한 탱크 파이터 격납고
탱크 파이터 · 정돈한 격납고와 장비 인벤토리 · 이박사 · 실제 작업 화면

탱크 파이터의 격납고와 메인, 조종사 선택, 대전 준비, 온라인, 기록실, 설정 메뉴를 정돈했습니다. 이번에는 unslop 스킬의 간격·색·정보 우선순위 점검 방식을 적용했습니다. 전차와 파일럿의 그림, 큰 금속 프레임과 짙은 남색 바탕은 유지하고, 장비를 고를 때 필요한 정보가 먼저 보이도록 다듬었습니다.

선택한 항목이 먼저 보이도록 했습니다

기존 화면에서는 선택하지 않은 탭과 장착 칸의 설명, 기본 성능 수치에도 청록색이 넓게 쓰였습니다. 각각은 잘 보였지만, 한 화면에 모이면 선택 표시와 안내가 비슷한 강도로 느껴졌습니다. 작은 테두리와 보조 글자는 회청색으로 낮추고, 선택한 탭과 장비에는 청록색 선과 조금 밝은 바탕을 남겼습니다. 큰 이미지 테두리와 장비의 픽셀 아이콘은 그대로 사용했습니다.

정돈 전 탱크 파이터 격납고에서 청록색으로 표시된 탭과 성능 수치, 장착 슬롯
정돈 전 격납고 · 이박사 제작 게임의 실제 화면입니다. 글 상단은 정돈 후 화면입니다.

슬롯 간격과 수치 열을 맞췄습니다

부품 장착 칸 사이의 간격을 4px로 맞추고, 아이콘과 이름이 같은 시작선에 놓이도록 정리했습니다. 성능표는 20px 간격의 행과 오른쪽에 정렬한 숫자로 읽도록 바꿨습니다. 수치 옆에서 같은 정보를 반복하던 작은 막대는 덜어 내고, 기본값은 차분한 색으로 표시했습니다. 장비로 좋아지거나 나빠지는 성능은 기존의 색 구분을 유지했습니다.

메뉴 포커스는 가만히 두어도 계속 점멸하던 효과를 없애고 고정된 모서리 표시로 바꿨습니다. 확인할 때의 짧은 반응과 화면 전환은 유지했습니다. 전투의 타격감과 효과, 그림과 음원은 이번 작업에서 바꾸지 않았습니다.

메인·선택·온라인·기록실도 맞췄습니다

메인 메뉴의 항목 간격을 일정하게 맞추고, 화면 아래의 조작 안내는 보조 글자색으로 낮췄습니다. 조종사 선택에서는 초상화 양옆에 반복되던 강조선을 하나로 정리했습니다. 대전 준비는 항목 이름·현재 값·화살표의 위치와 간격을 맞췄습니다. 캐릭터와 전차 그림, 지도 배경은 그대로 사용했습니다.

온라인 메뉴는 랭크·커스텀 설명과 고정된 색 띠가 선택 표시와 경쟁하지 않도록 다듬었습니다. 기록실도 카드 크기와 간격, 테두리와 화살표의 강조를 맞추고 각 카드 안의 그림은 유지했습니다. 음악 감상실과 업적 목록은 행 간격과 선택 표시를 정리했습니다.

음량 이름·슬라이더·수치를 같은 줄에 놓았습니다

설정 화면의 퍼센트 수치가 해당 슬라이더보다 위에 떠 있던 배치를 고쳤습니다. 전체 음량·배경 음악·전투 효과음·준비 안내 음성마다 이름, 슬라이더와 수치가 같은 줄에서 읽히도록 맞췄습니다. 조작 설정, 버튼 배정과 화면·연출 설정도 목록 간격과 버튼 높이를 정돈했습니다.

음량 이름과 슬라이더, 퍼센트 수치를 같은 줄에 정렬한 탱크 파이터 설정 화면
정돈한 설정 화면 · 이박사 제작 게임의 실제 화면입니다.

6개 언어의 메뉴를 확인했습니다

한국어·영어·일본어·중국어 간체·번체·독일어로 528개 메뉴 상태를 검사하고 각 화면에서 이동 가능한 항목이 실제로 등록되는지도 확인했습니다. 검사 중 실행 오류와 계측된 글자 넘침은 0건이었고, 간격을 바꾼 장착 칸 사이의 이동도 확인했습니다. Windows·Mac 베타를 개발 중이며, 이번 변경은 소스 반영과 편집기 검수까지 진행했습니다.

탱크 파이터 소개와 실제 전투 화면도 함께 볼 수 있습니다. 사용한 스킬은 Damir Sokolovsky(@heydamir)의 unslop이며, CC BY 4.0으로 공개되어 있습니다.