[UI디자인] 버튼은 하나만 있어야한다. 그리고 항상 작동돼야 한다. - 휴대폰 인증/우편번호 입력
2018년, 처음으로 UI디자이너로 커리어를 시작하면서 정식적으로 네 곳에서 소속되었고, 두 곳에서 프리랜서로 일했습니다. 취미로 했던 프로젝트까지 더한다면 더 많은 번잡한 경험을 했던 것 같네요. 새로운 환경에서 새롭게 일을 시작할 때마다 느끼는 점은 UI디자인이 때로는 굉장히 과학적이고 객관적일 수 있지만, 다른 한편으로는 주관적이며 취향에 의해 결정될 수도 있는 분야라는 점이었습니다. 현재 속해있는 Awair에서도 마찬가지 경험이 있었는데요, PM, UX디자이너, 프론트 개발자와 텍스트필드, 버튼의 작동 구조를 어떻게 할 것인지에 대해 정말 오래 논의했었습니다. 우리의 커리어에서는 종종 사소한 부분에 대한 결정이 더 집요하고 힘들게 다가오는 것 같습니다.
스타벅스 코리아는 정말 좋은 브랜드이지만, 웹/앱의 사용성에서는 그렇지 못한 것 같습니다. 어쩌면 당연하겠죠. 웹/앱 서비스에 특화된 브랜드는 아니니깐요. 스타벅스의 계정은 특히 제가 자주 까먹는 계정 같습니다. 그리고 아이디를 찾기 위해 휴대폰 본인인증을 진행하던 중, 제가 디자인할 때 절대 사용하지 않는 장치를 몇 가지 발견했습니다. 저는 이 글에서 제가 생각하는 좋은 UI디자인 조건에 대해서 이야기할 것인데, 이것은 결코 어디에서나 통용되는 규칙이나 법칙은 아닙니다. 저의 주관적인 생각과 제가 일하는 방식에 더 가깝습니다.
버튼은 되도록 하나만 두어라.
좋은 UI의 조건 중 하나는 공부하지 않고, 읽지 않아도 직관적으로 이해되는 것입니다. 그런데, 버튼 디자인은 중요함을 나타낼 수는 있지만 순서를 나타낼 수는 없습니다. 즉, 순서를 이해하기 위해서 사용자는 반드시 숫자나 텍스트를 읽어야한다는 뜻입니다. 가령 위의 스타벅스의 예시에서는 "인증요청"을 누르고, 인증번호를 입력할 때 나오는 "다음"을 누르고, 그리고 비활성화 상태였던 "다음"을 한 번 더 눌러야 모든 프로세스가 종료되는 방식이죠. 하지만 "인증요청"과 "다음" 중에서 어떤 버튼을 먼저 눌러야하는지는 텍스트를 읽지 않고는 알 수 없습니다.
제가 선택했던 방식은 이랬습니다. "인증요청"에 해당하는 버튼만을 표시합니다. 그리고 입력된 모든 정보에 이상이 없으면, 모달을 활용하여 인증번호를 입력하도록 유도하고 인증을 마치도록 합니다. 모달의 "인증 완료"는 인증 번호 확인과 최종적으로 페이지에서 벗어나도록 하는 기능을 모두 담고 있습니다.
인증 인터페이스에서는 잘못 입력했을 때, 정정할 수 있는 기회를 만드는 것 역시 중요합니다. 하지만 이 제약에 갇혀 디자인하게 된다면 직관적인 디자인은 얻지 못할 것입니다.
버튼은 항상 활성화된 상태로 두어라.
모든 필드가 성공적으로 입력되었을 때만 활성화되는 버튼을 볼 때마다 미국에서 디자인 하던 시절이 떠오릅니다. 당시 저 역시도 버튼을 그렇게 배치했었습니다. 다만, 차이점이 있다면 제가 속해있던 회사는 그렇게 해서는 안된다는 것을 이미 알고 있었고, 저는 그 반대를 무릅쓰고 진행했습니다. UI디자인이 실패했다고 단정짓기는 정말 쉽지 않지만, 그것은 정말로 실패한 디자인이었습니다. 페이지를 완료하는 데에 걸리는 시간도 너무 오래 걸렸고, 이탈률도 매우 높았기 때문이죠. 그리고 버튼을 항상 활성화시킴으로써 이 문제를 해결할 수 있었습니다.
그리고 그 이후부터는 Primary 버튼은 항상 활성화된 상태로 놔둡니다. 그리고 모든 정보가 입력되지 않았을 때의 버튼은 "사용자가 주목하지 못한" 입력하지 않은 인풋을 알려주는 용도로 사용됩니다. 특히 텍스트필드의 플레이스홀더는 사용자가 필요한 정보를 쉽게 입력할 수 있도록 도와주는 역할을 하지만, 때로는 사용자가 입력하지 않았는데도 입력한 것으로 착각하게 만들기도 하거든요.
사용자는 방탈출 게임을 하기 위해서 서비스에 방문한 것이 아닙니다. 힌트를 얻고 고민하고 문제를 푸는 것보다 빨리 페이지를 벗어나고 방문한 목적을 달성하고 싶어하죠. 이때 에러메시지는 사용자가 무엇을 해야하는지 가장 빨리 알려주는 역할을 합니다.
또 다른 예시 우편번호 검색
우편번호 검색 및 주소 입력을 하는 인터페이스도 "버튼은 하나만 두어라."라는 공식을 따르기 힘든 플로우입니다. 왜냐하면, "주소 변경" 내지 "주소 입력"이 주소를 입력하기 전에는 가장 먼저 해야하는 행동이지만, 주소 입력을 마친 후라면 크게 중요하지 않은 행동이기 때문이죠. 그렇다고 주소 입력을 마쳤을 때에 제거할 수도 없습니다. 저는 버튼의 위상이 상황에 따라 역동적으로 바뀌는 것을 선호하지 않는데요, 이 조건을 지키면서 찾았던 방법은 이렇습니다. "주소가 입력되지 않았을 때에는, 주소 검색 화면을 자동으로 띄워라." 오히려 버튼을 누를 필요가 없으니 뎁스(depth)도 당연히 낮아지게 되고, 주소를 입력한 케이스, 입력하지 않은 케이스 역시 모두 고려할 수 있게 되었습니다.
UI디자이너의 역할 중 하나는 사용자에게 힌트를 주어 그들이 달성하려는 목표를 최대한 빨리 접근할 수 있도록 돕는 것입니다. 그리고 이를 위해서는 사용자가 이해할 수 있는 힌트를 만들고, 더 중요한 정보를 돋보이도록 만드는 작업이 필요하죠. 버튼은 언제나 가장 중요한 액션입니다. 버튼의 클릭 없이는 사용자는 다음 화면을 넘어갈 수도 없고, 회사는 사용자로부터 어떤 정보도 받을 수 없기 때문이죠. 버튼은 언제나 눈에 띄게 만들어주세요. 그리고 작동되게 만들어주세요. 이 버튼은 사용자가 빨리 작업을 마치고 우리의 서비스에 들어오도록 하는 역할을 할 것입니다. 버튼은 수가 적고, 서열이 정해져 있을수록 더 높은 성공을 이끕니다. 웹/앱 서비스는 어려울수록 재밌는 방탈출게임이 아닙니다.