pubuilder 09. 장비창 시각 언어 통일과 드래그 피드백 보강

장비창은 스킬을 슬롯에 꽂아 퍼블리싱 지침을 조립하는 화면이다. 구조는 그대로 두고, 이날은 색과 상태 피드백만 손봤다. 기능을 더 찾아 붙이는 단계에서 마감을 다듬는 단계로 넘어간 작업이었다.

장비창과 주변 도구가 서로 다른 제품처럼 보였다

장비창에는 그림자와 입체 효과가 여기저기 남아 있었고, 그 주변 도구 화면들은 각자 다른 색 규칙을 쓰고 있었다. 한 화면 안에 있는데 붙여놓은 티가 났다.

장비창을 입체 효과가 적은 솔리드 평면 스타일로 정리하고, 주변 도구 화면까지 같은 팔레트로 맞췄다. 초기에 쓰던 앰버 액센트는 블루 #4c8dff로 바꿨다. active와 선택 상태의 대비를 한 색으로 통일하려는 것이었다.

놓을 수 있는지, 무슨 슬롯인지가 안 보였다

스킬을 드래그해 슬롯에 꽂을 수 있는데, 끌고 다니는 동안 어디에 놓을 수 있는지가 화면에 드러나지 않았다. 드롭 대상 슬롯이 가만히 있을 때와 똑같이 보였다.

드래그하는 동안 놓을 수 있는 슬롯에 drag-over 상태를 표시했다. 드래그 중에는 포인터 입력 이벤트가 억제되기 때문에, 이 피드백은 dragenter·dragover·dragleave로 처리했다. 드래그 앤 드롭은 동작을 붙이는 것보다 "지금 여기 놓을 수 있다"를 즉시 보여주는 쪽이 사용성에 더 직접적으로 와닿았다.

스킬함 드로어를 여는 SKILLS 버튼에서는 다른 문제가 걸렸다. 버튼이 활성화된 상태에서 마우스를 올리면 글자가 사라졌다. active 배경색과 hover 텍스트 색이 부딪힌 것이라 상태 조합별 색상 규칙을 다시 잡았다. 색상 토큰은 기본과 hover, active만 볼 게 아니라 active-hover까지 조합해서 확인해야 했다.

GUIDE는 고정 코어에 가까운 안내용 슬롯인데, 상세 설명이 긴 문장으로 이어져 있어 읽다가 흐름을 놓치기 쉬웠다. 슬롯별 역할을 한눈에 보는 종합 레전드를 상세 위에 붙이고, 긴 설명은 문장 단위로 줄을 나눴다. 안내 문구는 내용만이 아니라 줄을 어디서 끊고 무엇끼리 묶느냐도 정보 구조의 일부였다.

막힌 지점과 원인

색만 맞췄는데도 화면이 한 덩어리로 보이기 시작했다. 다만 상태 색을 다시 잡으면서 마우스 기준으로만 확인했다. 키보드 포커스와 고대비 모드에서 같은 색 규칙이 구분되는지는 아직 안 봤다. 스킬이 몇 개 없는 상태로 드로어를 다뤄서 목록이 길어졌을 때 찾을 수 있는지도 확인이 남았고, GUIDE 레전드와 슬롯 상세가 같은 내용을 두 번 말하는 부분도 정리해야 한다.