모바일 버전 개발일지 (1) — 앱이 진짜 게임처럼 보이기 시작했어요

안드로이드 앱(새 Rust 엔진)의 첫 개발일지예요. 로비에 게임 클라이언트 같은 왼쪽 메뉴가 생기고, 게임 화면 버튼을 엄지 위치에 맞게 다시 놓았어요. 곡괭이·가방·블록 모양·펫·표정·카메라 줌까지 웹에 있던 것들이 앱으로 옮겨왔어요.

  • 개발일지
  • 모바일
  • 앱
  • 디자인

앱은 아직 스토어에 올라가지 않았어요. 아래 사진은 개발용 안드로이드 에뮬레이터에서 찍었어요.

한눈에 보기

모바일 앱은 웹과 같은 세상을 새 Rust 엔진으로 그려요. 오늘은 "베타 같다"는 느낌을 없애는 데 집중했어요. 버튼을 하나의 디자인으로 통일하고, 모바일 액션 게임처럼 엄지가 닿는 자리에 다시 배치했어요. 웹에만 있던 기능도 많이 옮겨 왔어요.

BEFORE / AFTER

게임 화면이에요. 버튼이 여기저기 흩어져 있고 칸마다 "0"이 붙어 있던 화면이, 왼쪽 위 이름표 · 오른쪽 위 메뉴 줄 · 왼쪽 아래 조이스틱 · 오른쪽 아래 행동 버튼으로 정리됐어요.

게임 화면 BEFORE/AFTER: 위는 버튼이 흩어진 예전 화면, 아래는 엄지 위치에 맞춰 정리된 새 화면

로비도 같은 느낌으로 바꿨어요. 왼쪽에 게임 클라이언트처럼 메뉴 줄이 생겼고, 검은 테두리가 있던 버튼과 카드를 테두리 없는 부드러운 모양으로 바꿨어요.

교육 모드 로비 BEFORE/AFTER: 위는 노란 테두리 프레임, 아래는 왼쪽 메뉴 줄과 테두리 없는 카드

새로 추가 9

  • 왼쪽 메뉴 줄홈 · 교육 · 함께 놀기 · 펫 · 친구 · 설정. 지금 있는 화면에 노란 표시가 붙고, 열린 방 수는 빨간 숫자로 보여요. 친구는 아직 준비 중이에요.
  • 설정 화면그래픽(자동/낮음/보통/높음), 시야 감도, 효과음 크기, 상하 반전, 이름 바꾸기. 바꾸면 바로 적용되고 저장돼요.
  • 펫시바견 · 하얀 고양이 · 아기 코끼리 · 아기 기린 · 판다가 웹과 똑같이 따라다녀요. 로비의 펫 화면이나 게임 속 펫 버튼에서 고를 수 있어요.
  • 가방가진 블록을 종류별로 보고, 핫바 칸을 눌러 원하는 블록을 넣어요.

가방 화면: 종류별 탭과 가진 아이템

  • 곡괭이가방에서 꺼내면 손에 들고 웹과 같은 동작으로 휘둘러요. 돌은 손보다 빨리 캐져요.
  • 블록 모양 6가지네모 · 삼각 · 모서리 · 원기둥 · 반블록 · 계단. 놓기 전에 초록색(놓을 수 있음)·빨간색(못 놓음) 미리보기가 보여요.
  • 표정과 동작(C 버튼)미소 · 활짝 · 윙크 표정, 손 흔들기 · 신나게, 앉기 · 눕기, 캐릭터 HOME/TT 바꾸기. 가만히 있으면 눈도 깜빡여요.

표정·동작 창

TT가 활짝 웃는 표정

  • 카메라 줌두 손가락으로 벌리고 오므려서(PC는 휠) 멀리서 보거나, 끝까지 당기면 1인칭으로 바뀌어요. 1인칭은 마인크래프트처럼 내 눈에서 봐요.
  • 혼자 하기 저장블록 섬에서 캔 것·지은 것·가방이 앱을 닫아도 남아요.

개선 4

  • 버튼 겹침 해결버튼 그림이 실제로 누르는 범위보다 크게 그려져서 옆 버튼과 붙어 보였어요. 이제 모든 둥근 버튼을 누르는 크기 그대로 그리고, 버튼끼리 항상 간격이 남도록 자동으로 검사해요.
  • 핫바가진 게 있을 때만 숫자가 보여요. 휴대폰에서는 의미 없는 키 번호를 숨겼어요.
  • 알림큰 노란 판 대신 위쪽 가운데 작은 남색 알림으로 바꿨어요.
  • 수업에서 함께 보이기앱으로 들어온 친구가 땅을 파거나 블록을 놓으면, 웹에서도 그 동작이 보여요.

알려진 문제 3

  • 친구 기능은 아직 준비 중이에요.
  • 수업에서 다른 친구의 표정은 아직 바뀌지 않아요.
  • 가구 놓기와 섬의 물 흐름은 아직 앱에 없어요.