광장 화면에서 큰 메뉴를 걷어내기

정보를 줄이기보다 넓은 배경부터 걷어냈습니다

오후의 틈의 상단과 대화창, 하단 배경이 광장을 크게 가리고 있었습니다. 기능을 없애기보다 넓은 배경과 클릭 차단을 제거하고, 평소에는 작은 메뉴·상태와 대화 입력줄만 남기도록 했습니다.

대화는 왼쪽 아래 360px 입력줄과 투명한 기록으로 구성하고, 기록만 접을 수 있게 했습니다. 상세 기능은 필요할 때 오른쪽 420×543px 창으로 엽니다. 배치와 문구, 버튼 이벤트는 씬과 Inspector에서 편집할 수 있도록 유지했습니다.

변경 전에는 상단·대화·하단의 큰 배경이 광장을 가렸습니다.

같은 1920×1080 해상도와 시점에서 확인한 변경 후 화면입니다.

사람을 선택한 자리에서 필요한 기능을 보여 줍니다

상대를 클릭하거나 방문자 목록에서 고르면 주황색 지면 링과 작은 선택 바가 나타납니다. 프로필, 따라가기, 해제를 이 바에서 선택하도록 했습니다. 가까운 이름표는 16px로 유지하고, 말풍선도 작게 정렬했습니다.

따라가기는 기존 PlayerController·Movement와 NavMesh 경로를 사용합니다. 기본 정지 거리는 1.6m, 경로 갱신 간격은 0.5초이며 3초간 정체되면 중단합니다. 새로운 이동 체계를 붙이기보다 기존 이동과 연결한 구성입니다.

따라가기의 종료 조건도 함께 정했습니다

수동 이동, 채팅, 모달 창, 착석, 탭 이탈, 차단, 대상 비활성 또는 경로 없음에서도 따라가기를 중단합니다. Esc나 바닥 클릭은 선택도 해제합니다. 시작 버튼이 동작하는 것뿐 아니라 사용자가 다른 행동을 하려는 순간 제어를 돌려주는 것이 필요했습니다.

실제 조작과 검사 범위

Unity Play 검사 555개에서 입장·채팅·상태·좌석과 기존 동작을 확인했습니다. 실제 마우스로도 상대 선택, 따라가기, 거리 유지, 해제 순서를 확인했습니다. 경로 이동과 각 중단 조건, 상세 패널이 화면 안에 들어오는지도 검사했습니다.

검증 환경은 1920×1080 Unity Editor입니다. 새 웹 빌드, 다른 화면 비율, 장시간 브라우저 성능과 물리 키보드·IME 입력은 이번 범위에 포함하지 않았습니다. 화면을 덜 가리도록 바꾼 결과와 모든 기기에서의 사용성 확인은 별도로 남깁니다.

작은 선택 바 뒤에 남긴 제어 규칙

아래는 보고서의 선택과 이동 조건을 요약한 도표입니다. UI가 작아져도 선택 상태와 이동 상태는 따로 관리해야 합니다. 따라가기를 멈추는 것과 상대 선택까지 해제하는 동작이 다르기 때문입니다.

flowchart LR
  A["상대 클릭 또는 방문자 목록"] --> B["선택 링과 선택 바"]
  B --> C["따라가기"]
  C --> D["거리 유지"]
  D --> E["중단 조건 확인"]
  B --> F["Esc 또는 바닥 클릭"]
  F --> G["선택 해제"]

따라가는 동안 카메라는 이동 방향으로 정렬하지만 우클릭 조작을 우선합니다. 자동 이동을 켜더라도 사용자의 시점 조작까지 빼앗지 않으려는 구성입니다. 555개 검사에 애니메이션 샘플 회귀가 포함됐다는 사실도 전체 동작 길이의 미술 품질을 보장하지는 않습니다. 검사 개수와 실제로 확인한 범위를 함께 남겼습니다.

작업 근거

• 개발 기록 원문