파티게임 사이트 모바일 UX 설계하면서 고민한 것들

제시어는 세로 화면 중앙에 크게

몸으로 말해요 게임 중에는 폰을 들고 제시어를 혼자 확인해야 한다. 초기에는 일반 카드 컴포넌트를 재사용했는데, 게임하면서 보니 글씨가 작아서 확인하기가 불편했다.

게임 진행 화면은 따로 레이아웃을 잡았다. 제시어를 화면 전체에 크게 띄우고, 정답/패스 버튼은 하단에 고정했다.

// 게임 중 레이아웃
<div className="min-h-screen flex flex-col">
  {/* 상단: 타이머, 팀 정보 */}
  <header className="p-4 flex justify-between items-center">
    <span>{currentTeam}</span>
    <Timer seconds={timeLeft} />
  </header>

  {/* 중앙: 제시어 */}
  <main className="flex-1 flex items-center justify-center px-6">
    <p className="text-5xl font-bold text-center">{currentWord}</p>
  </main>

  {/* 하단: 버튼 */}
  <footer className="p-6 flex gap-4">
    <button className="flex-1 py-4 text-xl">패스</button>
    <button className="flex-1 py-4 text-xl bg-green-500">정답!</button>
  </footer>
</div>

버튼을 크게 만든 이유도 있다. 게임 중에 흥분한 상태에서 빠르게 누르다 보면 작은 버튼은 잘못 눌리는 경우가 생긴다.

화면 꺼짐 방지

게임 중에 화면이 꺼지면 제시어가 안 보인다. 특히 타이머가 돌아가는 상황에서 화면이 꺼지면 게임이 끊긴다. Wake Lock API로 화면 꺼짐을 막았다.

async function requestWakeLock() {
  try {
    if ('wakeLock' in navigator) {
      const wakeLock = await navigator.wakeLock.request('screen')
      return wakeLock
    }
  } catch (e) {
    // Wake Lock 지원 안 하는 브라우저는 그냥 넘어감
    console.warn('Wake Lock 미지원:', e)
  }
  return null
}

게임 시작 시 활성화하고, 게임 종료 또는 컴포넌트 언마운트 시 해제하도록 처리했다. 모든 브라우저가 지원하는 건 아니라서 지원 안 하는 경우는 조용히 넘어가게 했다.

라이어 게임 역할 확인 화면

라이어 게임에서 각자 자기 역할을 확인할 때 옆 사람 화면이 안 보여야 한다. 처음엔 그냥 순서대로 보여줬는데, 한 명이 확인하고 폰을 넘길 때 다음 사람이 이미 내용을 보는 경우가 생겼다.

"확인 완료" 버튼을 누르면 화면이 가려지고, 다음 사람이 "내 역할 확인하기" 버튼을 눌러야만 내용이 보이는 방식으로 바꿨다.

const [revealed, setRevealed] = useState(false)

return (
  <div>
    {!revealed ? (
      <button onClick={() => setRevealed(true)}>
        {player.name}님의 역할 확인하기
      </button>
    ) : (
      <div>
        <p>{player.isLiar ? '라이어입니다' : `제시어: ${word}`}</p>
        <button onClick={() => { setRevealed(false); onNext() }}>
          확인 완료
        </button>
      </div>
    )}
  </div>
)

작은 UX 디테일인데 실제로 게임할 때 꽤 차이가 났다.

실제로 써보면서 고친 것들

개발하면서 혼자 시뮬레이션할 때는 문제 없어 보였던 것들이 실제로 여러 명이 쓰다 보면 드러났다.

타이머 남은 시간이 적어질 때 색깔이 바뀌는 것도 처음엔 없었다가 추가했다. 시간이 얼마 남았는지 숫자를 읽기보다 색으로 직관적으로 알 수 있어야 한다는 피드백이 있었다. 빨간색으로 바뀌는 시점을 10초로 잡았는데, 이것도 몇 번 해보면서 조정했다.