제가 만든 버튼이 버튼처럼 안 보인다고요?

유료 웹툰 서비스의 경우, 버튼에 대한 고민이 매우 필요한 부분이 있습니다. 바로 작품 페이지입니다. 그 이유는 3가지가 있는데요, 첫 번째는 웹툰 서비스 사용자들이 작품을 감상하기 전에 대부분 거쳐가는 페이지이기 때문입니다. 작품 페이지가 제공하는 경험은 사용자가 해당 작품을 감상하는데 큰 영향을 줍니다. 두 번째는 그림체, 작가 정보, 연재 요일 정보, 에피소드 개수 정보 등 많은 정보를 제공하는 곳이기 때문입니다. 많은 정보의 제공은 어떤 정보가 버튼처럼 눌러야 확인할 수 있는 정보인지 아닌지 헷갈리게 만드는 계기를 제공합니다. 세 번째는 작품 감상하기, 이어 보기, 즐겨찾기, 작품 구매 등 많은 기능들이 있는 곳이기 때문입니다. 이와 같은 기능들은 대부분 버튼들로 처리를 해야 하는데 모든 기능들을 버튼으로 노출시키면 버튼의 수가 많아져서 사용자들이 원하는 기능을 사용하기까지 시간이 걸릴 수 있습니다. 작품 페이지의 디자인은 이런 이유들 때문에 사용자들이 필요한 버튼을 빠르게 찾을 수 있도록 고민이 필요합니다.

이런 이슈를 발견한 뒤 저는 지인들을 상대로 제가 만든 앱의 작품 페이지에 대한 사용성 테스트를 해보았습니다. 그 과정에서 놀라운 피드백을 받았는데요, 제가 제작한 버튼이 버튼처럼 보이지 않는다는 것이었습니다. '아니, 제 눈에는 아무리 봐도 버튼 같은데 어떻게 그런 말을 할 수 있는 거죠?!'라고 말하고 싶었으나 그래서는 절대 안 됩니다. 저는 UX 디자이너고 사용자의 입장을 알 수 없는 입장이니까요. 

버튼은 사용자들이 원하는 명령을 실행하도록 만들어 주는 중요한 UI 요소입니다. 버튼이 눈에 잘 띄지 않을 순 있어도 버튼처럼 보이지 않는다는 것은 좀 심각한 문제였습니다. 사용자들의 행동을 방해하는 원인이 될 수 있으니까요. 대체 뭐가 문제였을까요? 그래서 원인을 분석해보았습니다.

버튼 디자인을 위한 가이드라인 소개

피드백을 뒤끝 없이 쿨하게 받아들인 다음 버튼에 대한 디자인 시스템과 버튼과 관련된 서적들을 살펴보았는데요, 분명히 오래전에 읽었으나 세월 따라 기억의 저편으로 사라져 버린 다양한 지침사항들을 발견할 수 있었습니다. 그 많은 지침사항들 중에서 당장 저에게 필요한 정보 위주로 정리해보았습니다.

1. 버튼이 주변 UI 요소들로부터 명확하게 버튼으로 구분되어 보이는가?

버튼이 다른 요소들로부터 명확하게 인지되지 위해서는 다음과 같은 면들을 살펴봐야 합니다. 첫 번째, 사용자들에게 친숙한 형태의 버튼인가? 두 번째, 버튼의 컬러가 주변 UI 요소들과 구분이 되는 컬러를 사용했는가? 세 번째, 버튼의 레이블에 사용된 폰트 스타일이 버튼 주변에 사용한 폰트 스타일과 비교했을 때 구분이 되는가? 이 앞의 3 가지 질문에 대해서 손을 심장에 얹고 당당하게 '네!'라고 대답할 수 없다면 시작부터 잘못됐다고 할 수 있습니다.

2. 사용자들이 기대하는 장소에 버튼이 위치되어 있는가?

앞의 단계를 거쳐 버튼을 겨우 버튼처럼 보이게 만들었습니다. 하지만 어렵게 만든 버튼이 사용자들이 기대하는 장소에 없다면 사용자들에게 기쁨이 아닌 혼돈을 선물하게되는 수가 있습니다. 예를 들어 로그인 페이지의 경우, 로그인 버튼은 반드시 아이디와 비밀번호 입력칸 근처에 있어야합니다. 그곳이 사용자들이 예상하는 버튼의 위치니까요. 이를 무시하고 로그인 버튼을 입력칸과 태평양만큼 떨어진 곳에 놓았다? 사용자들이 버튼을 찾다 지쳐 떨어져나가는 수가 있습니다.

3. 버튼의 갯수가 많지는 않은가?

겨우 올바른 디자인의 버튼을 올바른 위치에 놓았습니다. 여기서 해당 버튼 주위로 다양한 버튼들이 모여 동물의 숲을 이루고 있진 않은가 살펴봐야 합니다. 너무 많은 버튼들은 사용자들에게 큰 고민을 선물합니다. 우리 모두 31가지 아이스크림 집에서 그 고민을 경험해본 적이 있습니다. 정말로 필요한 버튼이 아니라면 덜 중요한 버튼들은 없애거나 숨겨야 합니다.

4. 버튼이 2개 이상일 경우 중요도 순으로 서열 정리가 되어있는가?

버튼들의 수를 최대한 줄이는 데 성공했습니다. 그래도 꼭 필요한 버튼들이 손가락 개수만큼 남아있을 수 있습니다. 하지만 사용자들에게 혼돈을 줄까 걱정하기에는 아직 이릅니다. 버튼들 사이의 위계 서열 정리를 해준다면 사용자들의 혼돈을 줄일 수 있으니까요. 이때 디자이너는 버튼들의 서열을 사심 없이 냉정하게 정해줘야 합니다. 오직 사용자들이 원하는 것이 무엇인지에만 집중한다면 정답은 쉽게 나올 것입니다. 버튼들 사이의 서열을 정리해주었다면 각 중요도에 맞춰서 버튼의 크기, 컬러의 면적, 컬러의 선택, 버튼의 형태, 버튼 그림자의 유무 등을 통해서 시각적으로 서열을 표현해주도록 합시다.

5. 버튼의 사이즈는 사용자의 손가락 크기를 고려한 사이즈인가?

거의 다 왔습니다. 마지막으로 어렵게 디자인한 버튼들의 사이즈가 사용자들이 손가락으로 터치/탭 하기 알맞은지 확인해보셨나요? 이걸 놓치셨다면 1단계부터 다시 시작하셔야 합니다. 아무리 위의 지침사항들을 잘 따라왔어도 버튼의 사이즈가 너무 작으면 버튼이 작동되지도 않을뿐더러 엉뚱한 버튼이 작동되는 수가 있기 때문입니다. 이런 일이 발생하지 않도록 애플과 구글에서는 각각 버튼의 최소 크기를 연구하여 권장하는 사이즈가 있습니다. 애플에서는 44pt, 구글에서는 48dp를 최소 버튼 사이즈 단위로 지정하고 있습니다. 이 점을 꼭 버튼 디자인에 반영하여 사용자들을 분노의 초사이어인으로 각성시키는 일이 없도록 합시다.

이외에도 더 살펴봐야 할 요소들이 있지만 자세한 것은 GS shop UI/UX 디자이너 최철호 님의 브런치 링크에서 참고 바랍니다. (보러가기)

이제까지 작품 페이지 내의 버튼이 버튼처럼 보이도록 만들기 위한 최소한의 가이드라인을 살펴보았습니다. 위의 가이드라인을 참고한 뒤 각 웹툰 서비스가 처한 상황에 맞게 활용한다면 창의적인 해결책이 나올 것이라 생각해봅니다. 사용자들이 더 편하게 웹툰 서비스를 사용하는데 도움이 되길 바라며 글을 마칩니다. 감사합니다.

[참고자료]

-Material Design, material.io/components/buttons#shaping-material

-iOS Human interface Guidelines, developer.apple.com/design/human-interface-guidelines/ios/controls/buttons/

-Nick Babich, 7 Basic Rules for Button Design, uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4

-최철호, 모바일 디자인 기본요소 - 버튼, brunch.co.kr/@chulhochoiucj0/23