"다은 님, 이번에 404 에러 페이지에 들어갈 이스터 에그 게임 하나만 만들어 볼까요? 그냥 심플하게 뱀 게임(Snake Game) 정도로요. 근데 평면은 재미없으니까 지구본처럼 둥글게 굴러가는 걸로. 레퍼런스는 이거예요."
기획자분이 툭 던져준 링크 하나. 'Spherical Snake'. 클릭해 보니 까만 화면에 텍스트 몇 줄, 그리고 구(Sphere) 위를 기어 다니는 초록색 뱀 한 마리가 전부였습니다. 솔직히 처음엔 속으로 비웃었습니다. '이 정도면 와이어프레임도 필요 없겠네. 하루면 디자인 끝나겠는데?'
하지만 그 안일한 생각은 개발자와 첫 회의를 하자마자 산산조각 났습니다. "심플해 보인다"는 말은 디자이너에게는 축복이지만, 개발자에게는 가장 무서운 저주라는 걸 그때는 미처 몰랐으니까요. 오늘은 그 '단순함' 뒤에 숨겨진 복잡함 때문에 제가 저질렀던 실수들과, 거기서 배운 UI 디자인의 논리에 대해 이야기해 보려 합니다.
1. "그냥 텍스트만 띄우면 되는 거 아니에요?" (ft. 시각적 계층의 부재)
제가 처음 가져간 시안은 원본 게임과 별반 다르지 않았습니다. 까만 배경에 하얀 글씨. "점수: 0", "다시 플레이하시겠어요?" 같은 텍스트를 그냥 화면 구석에 배치했죠. 심플함이 미덕이라 믿었으니까요.
하지만 개발자분의 질문이 훅 들어왔습니다. "다은 님, 게임 오버 됐을 때 '점수'가 중요한가요, 아니면 '다시 하기' 버튼이 중요한가요? 지금은 폰트 크기랑 굵기가 다 똑같아서 유저가 뭘 눌러야 할지 모를 것 같은데요. 그리고 모바일에서는 이 텍스트 버튼 터치 영역이 너무 좁아서 오터치 날 확률 99%입니다."
머리를 한 대 맞은 것 같았습니다. 저는 '정보의 나열'만 했지, '정보의 위계(Hierarchy)'를 설계하지 않았던 겁니다.
사용자가 게임을 하다가 죽었을 때 가장 먼저 느껴야 할 감정은 '아까움'이고, 가장 먼저 해야 할 행동은 '재시도'입니다. 그렇다면 'GAME OVER' 타이틀보다는 '내 점수'가 더 눈에 띄어야 하고, '다시 플레이' 버튼은 마우스 커서를 정밀하게 조준하지 않아도 누를 수 있는 확실한 CTA(Call To Action) 버튼 형태여야 했습니다.
단순한 텍스트 덩어리를 UX의 관점으로 뜯어보니, 그건 '심플'이 아니라 '불친절'이더군요.
2. 3D 공간에서의 UI는 2D와 다르다 (ft. 뎁스에 대한 무지)
더 큰 문제는 게임 화면 그 자체였습니다. 이 게임은 평면이 아니라 3D 구체 위에서 진행됩니다. 뱀이 구의 뒷면으로 넘어가면 흐릿하게 보이거나 작아져야 하는 원근감이 적용되죠.
저는 습관처럼 평면 아트보드(Figma) 위에 UI를 얹었습니다. 점수판을 화면 좌측 상단에 고정했죠. 그런데 개발 단계에서 테스트해 보니, 뱀이 점수판 뒤로 지나갈 때 시각적 간섭이 일어났습니다. 3D 오브젝트(뱀)와 2D UI(점수판)가 겹칠 때, 사용자의 시선은 움직이는 뱀을 쫓느라 점수판을 '장애물'로 인식하게 됩니다.
"다은 님, 이거 점수판 뒤에 불투명도(Opacity) 깔아달라고 가이드에 안 적혀 있던데요? 그냥 쌩으로 글자만 얹으면 뱀이랑 겹쳐서 가독성 다 깨져요."
결국 저는 부랴부랴 가이드를 수정했습니다.
- UI 배경에 #000000 40% Opacity 적용.
- 3D 렌더링 영역과 UI 레이어의 Z-index 명확히 구분.
- 뱀이 UI 근처에 올 때 UI 투명도를 동적으로 조절할 것인지 개발자와 논의.
화면 위 픽셀만 예쁘게 깎는 게 아니라, 공간감과 레이어의 깊이(Depth)까지 고려해야 진짜 UI 디자이너라는 걸 뼈저리게 느꼈습니다.
3. "화살표 키로 하세요"라는 말의 무책임함
원본 사이트에는 "Play with arrow keys or buttons"라고 적혀 있었습니다. 저는 이걸 그대로 "화살표 키 또는 버튼을 사용하세요"라고 번역해서 넣으려 했죠.
하지만 쏘카에서 일할 때 배웠던 원칙이 떠올랐습니다. "사용자에게 고민하게 만들지 마라." PC 사용자에게는 키보드 화살표가 직관적이지만, 모바일 사용자에게 '버튼'은 어디에 있나요? 화면 하단에 가상 조이패드를 띄울 건가요, 아니면 스와이프 제스처를 쓸 건가요?
원본 게임은 화면 하단에 아주 작은 화살표 버튼 4개를 뒀습니다. 하지만 요즘 모바일 UX 문법에서 하단 영역은 '홈 인디케이터'나 브라우저 툴바 때문에 터치 간섭이 심한 '데드 존(Dead Zone)'에 가깝습니다.
결국 "버튼을 사용하세요"라는 텍스트 한 줄을 지우고, 화면 전체를 스와이프 영역으로 잡거나, 큼직한 반투명 방향키를 엄지손가락 반경(Thumb Zone)에 맞춰 배치하는 시안을 다시 그려야 했습니다. 텍스트로 설명을 때우는 건 디자이너의 직무 유기였습니다.
마치며: 심플함은 치열한 고민의 결과물이다
처음엔 그저 '지구본 위를 기어 다니는 뱀'이 귀여워 보였고, 까만 화면에 글자 몇 개 있는 게 쉬워 보였습니다. 하지만 그 단순해 보이는 결과물을 제대로 만들기 위해 개발자는 3D 라이브러리를 뒤져야 했고, 저는 폰트의 위계와 터치 영역, 레이어의 뎁스를 계산해야 했습니다.
이 작은 프로젝트를 통해 다시 한번 배웁니다. 클라이언트나 기획자가 말하는 "심플하게"는 "대충 만들어도 된다"가 아니라, "복잡한 로직을 사용자가 눈치채지 못하게 우아하게 감쳐달라"는 뜻이라는 것을요.
오늘도 피그마 앞에서 1px을 옮기며 개발자에게 보낼 코멘트를 씁니다. "개발자님, 여기 버튼 터치 영역 44px 밑으로 내려가면 안 됩니다. 왜냐하면..."
이 '왜냐하면'을 채우는 것이, 제가 해야 할 진짜 디자인이니까요.
