웹과 모바일 둘 다에서 흔하게 쓰이는 ‘이전’, ‘다음’ 버튼의 화살표 메타포. 직군을 막론하고 UI 디자인을 경험했다면 한 번 이상은 겪어봤을 이슈, ‘버튼이 있는 줄 몰랐어요.’ 혹은 ‘버튼이 안 보여요.’ 사용자가 호소하는 인지 부족 현상. 비단, 이전과 다음 버튼 뿐만 아니라 페이지 네비게이션이나, 옵셔널한 버튼의 UX에서도 종종 겪는 문제이다. 이와 같은 표현은 GUI 영역으로 넘어가면 *‘버튼처럼 안 생겼어요.’, ‘누를 수 있을 것처럼 안 생겼어요.’*라는 피드백으로 변하기도 한다. 동일한 UX 이슈로서 십여 년의 개발 과정에서 몇 번씩 겪어온 문제인데, 이를 개선하는 과정에서 느껴온 바를 모아 본다.
위와 같은 문제를 그래픽 디자이너가 접할 경우, 대게 최초로 바라보는 것은 버튼의 형태이다. 시각적으로 이해하기에 명확한 모양인지, 적합한 가시성을 띄고 있는지, 터치 또는 클릭 영역이 너무 좁지는 않은지 등. 범용적인 메타포와 대조를 해보기도 하고...
https://m3.material.io/styles/icons/designing-icons#e8ecc220-281c-4004-a839-611ee38db063
그리고 해당 문제가 발생하는 화면 전체 영역에서 버튼의 비중, 시각 정보 간의 우선 순위를 살핀다. 그러다 보면 자주 나오는 의문이, “아이폰(혹은 갤럭시) OS에서도 이런 플랫 아이콘 버튼을 많이 쓰는데요, 뭐가 문제인가요?” 나도 예전에는 같은 궁금증을 품은 적이 있었고 실제로 협업 중에 몇 번 받은 질문이다.
스마트폰이 대중화되었고, 근래 트렌드 속에 사용자들은 이미 플로팅 UI에 익숙해져 있는데 무엇이 문제이냐고. 이와 같은 플랫 아이콘이 사방에서 익히 쓰이고 있지 않느냐고.
아마도 이러한 사고의 흐름은, 아마도 출발점이 그래픽 디자이너이기 때문일 듯 싶다. 사실 원인은 복합적으로 상대적인 것인데, 아무래도 리소스를 제작하는 입장이니 초점이 아이콘에 집중된 것이라 추측한다.
의문이 한참 현재진행형일 때 경험한 것이 있다. iOS의 사파리 브라우저의 버튼 중 하나인데, 많은 사용자가 인식하지 못한 채 ‘보기만’ 하다가 정작 필요한 순간에 ‘사용하지 못하는’ 바로 이 버튼.
직전 모바일 게임 제작 시 앱 배포 및 다운로드를 하기 위해 Hockey App(이하 하키앱)을 사용했었다. 이때 iOS 기기 사용자가 사파리 브라우저로 접근할 경우, 간헐적으로 모바일 기기에서 접속하였음에도 불구하고 PC 상태로 인식하는 경우가 있었다. 모바일 빌드를 받아야 하는데 PC에서 접속 중이니 다운로드할 수 없다는 것. 처음 겪었을 때는 이해가 되지 않아 정말 당황스러웠다.
하키앱 외에도 테스트 등록을 위하여 iOS에서 UDID를 확인하고자 하는 단계에서도 이따금씩 겪었던 문제인데, 최근에는 어떻게 개선되었는지 모르겠다. 이래서 재직 중에 회고 문서를 정리해두었어야 하는데…