UI 디자인을 위한 UX 원칙 10가지(ver 2.0)
디자인 독학하기 07
UI/UX 디자인 경험을 공유합니다 :)
[Contents]
UI 디자인을 위한 UX 원칙 10가지
01 우리는 사용자가 아니다.
02 각 화면에서 한 가지 행동에만 집중하게 한다.
03 반응을 보여줘야 한다.
04 맥락 있는 흐름을 만든다.
05 시각적 일관성을 유지한다.
06 예상할 수 있어야 한다.
07 의미 있는 움직임만 보여준다.
08 누구나 이해하기 쉬운 글을 제공한다.
09 사용자의 익숙함을 존중한다.
10 필요한 만큼만 단순하게 디자인한다.
작은 앱 프로젝트
많은 기능과 서비스를 갖추고 있는 슈퍼 앱들 사이에서 단순함을 가장 큰 목표로 하는 '작은 앱'이 사람들에게 어떠한 의미로 다가갈지 연구하는 '작은 앱 프로젝트'를 진행하고 있습니다.
UI/UX 디자인은 '선택'의 연속이다. UI/UX 디자이너는 여러 디자인 시안을 고민해보고 사용자에게 가장 좋은 경험을 주는 디자인을 선택해야 한다. 동시에 왜 그런 디자인 시안들이 나왔으며 UI/UX 디자이너로서 선택한 시안은 무엇인지 팀원들에게 설명할 수 있어야 한다.
효율적인 선택, 효율적인 의사결정을 위해서는 팀원들과 합의한 'UX 원칙'이 필요하다. 바쁘게 돌아가는 실무에서 매번 긴 회의를 거쳐서 결정을 내릴 수는 없다. 모두가 합의한 UX 원칙을 바탕으로 효율적인 의사결정을 해야 한다.
나는 최근 10가지 UX 원칙을 만들어 팀원들에게 공유했다. 이 UX 원칙의 핵심은 사용자에 대한 '배려'다. 사용자가 우리 서비스를 쓰면서 불편함이 없도록 배려하는 디자인으로 사용자에게 다가가겠다는 것이다.
UX 디자인은 배려다.
UI 디자인을 위한 UX 원칙 10가지
Designed by 김경환
01 우리는 사용자가 아니다
"저는 이게 더 편하더라고요. 그러니까 이렇게 하는 게 더 좋아보여요."
우리 팀이 무언가를 의논하고 결정할 때 흔히 하는 착각이 '스스로가 사용자라고 생각하는 것'이다. 하지만 항상 명심해야 한다. 우리는 사용자가 아니다.
이런 착각을 하게 되는 건 본인의 경험과 취향을 바탕으로 한 생각이 스스로에게 '아주' 강한 설득력을 갖고 있기 때문이라 생각한다. 팀원들은 저마다 다른 경험과 취향을 갖고 있다. 그로 인해 스스로도 모르게 자신의 경험과 취향 속에 갇혀 생각한다. 하지만, 우리는 사용자가 아니다.
UX 디자이너의 중요한 역할 중 하나는 우리가 사용자가 아니라는 사실을 필요할 때마다 팀에게 일깨워 주는 것이라 생각한다. 사용자에게 좋은 경험을 주기 위한 첫 걸음은 내가 아닌 '사용자의 입장'에서 생각하려는 노력이다. 스스로가 사용자라는 착각을 언제나 경계해야 한다.
사용자의 입장을 객관적으로 살필 수 있는 가장 좋은 방법은 데이터 관찰이다. 데이터는 실제 사용자가 행동한 결과를 바탕으로 나타나기 때문에 논쟁보다 문제 해결에 초점을 맞추도록 도와준다.
데이터 기반 UI/UX 디자인은 단순히 모두가 하기 때문에 하는 시대의 트렌드가 아니다. 데이터를 기반으로 UI/UX 디자인을 하는 이유는 사용자 입장에서 고민해 사용자에게 좋은 경험을 주는 디자인을 하기 위해서다. 좋은 사용자 경험에 대한 보답은 꾸준히 서비스를 이용하는 사용자의 숫자로 돌아온다.
02 각 화면에서 한 가지 행동에만 집중하게 한다
스마트폰 화면은 아주 작다. 따라서 '각 화면에서 한 가지 행동에만 집중하게 한다'는 두 번째 UX 원칙은 스마트폰(모바일)에서 동작하는 UI(사용자 인터페이스, User Interface)를 디자인할 때 특히 중요하다.
나는 사용자가 UI를 쓰면서 망설이거나 혼란스러워해서는 안 된다고 생각한다. 더불어 특별한 경우를 제외하고는 사용자가 UI를 쓰기 위해 학습해야 하는 일이 있어서는 안 된다. 이를 위한 가장 좋은 방법이 바로 2번째 UX 원칙이다. 사용자가 앱에서 어떤 화면을 보고 있을 때 '그 화면에서 해야하는 행동'만 분명하게 알려주면 사용자는 매끄럽게 앱을 쓸 수 있다.
물론 모든 화면에서 한 가지 행동에만 집중하게 하도록 할 수는 없다. 많은 콘텐츠가 종합선물세트처럼 모여있는 화면이 사용자에게 좋은 경험을 주는 상황도 분명히 있다. 하지만 내가 디자인하고 있는 앱처럼 생소한 서비스이거나 사용자에게 꼭 전달해야 하는 특별한 가치에 집중하는 서비스에서는 두 번째 원칙을 철저하게 지키는 게 최고의 경험을 줄 수 있다고 생각한다.
이토록 확신할 수 있는 건 그동안 관찰했던 데이터 덕분이다. 회원가입을 쉽게 만드는 UI/UX와 전환율을 높이는 UI/UX, 최근 새로 서비스하기 시작한 '코디 검색'의 UI/UX를 디자인할 때 2번째 원칙을 극단적으로 지킨 구간의 사용자 흐름을 살핀 결과 평균 전환율 80% 이상이라는 훌륭한 데이터를 볼 수 있었다. 높은 전환율은 사용자들이 끊김없이 매끄럽게 앱을 썼다는 확실한 증거다.
우리 팀이 운영하는 웹 서비스인 '온라인 코디'에서는 다양한 질문을 하는데, 한 화면에 한 가지 행동만 집중하게 한 결과 긴 과정이지만 70~80% 이상의 높은 전환율을 보여준다.03 반응을 보여줘야 한다
터치 스크린을 기반으로 한 스마트폰은 과거에 쓰던 핸드폰처럼 물리적으로 '눌리는' 키가 아닌 '터치'로 동작한다. 따라서 사용자가 스마트폰 화면 상의 버튼 같은 요소를 누르거나 움직이면 반드시 무언가 반응을 보여줘야 한다. 그래야 앱은 사용자와 '소통'한다.
3번째 원칙은 내가 가장 중요하게 생각하는 원칙이다. UI는 말 그대로 사용자 인터페이스(User Interface)로 컴퓨터인 스마트폰과 사람을 이어준다. 스마트폰이든, 태블릿이든, PC든 UI를 디자인한다면 UI를 쓰는 사람과 소통할 수 있게 만들어야 한다. UI가 사람의 행동에 반응이 없다면, 사용자가 건넨 말을 UI가 무시하는 것과 다르지 않다.
1) 로딩
버튼을 눌러 다른 화면으로 이동한다고 해보자. 화면을 이동할 때 앱에서 따로 수행해야 할 계산이나 작업이 없어서 바로 이동하는 경우는 상관 없지만, 만약 서버에서 데이터를 받아오는 등 화면 이동에 시간이 걸린다면 어떤 방식으로든 로딩을 보여주는 게 좋다. 종종 버튼을 눌렀는데 반응이 없어서 '안 눌렸나?' 하는 생각이 들어 같은 행동을 반복하게 만드는 앱을 만나는데, 이는 사용자에게 좋지 않은 경험을 준다.
로딩 방식에는 크게 3가지가 있다. 첫 번째는 버튼을 누른 화면을 어둡게 만들고 로딩 애니메이션을 보여주는 방식이고, 두 번째는 버튼 위에서 로딩 애니메이션을 보여주는 방식, 세 번째는 다음 화면으로 일단 넘어간 뒤 로딩을 보여주는 방식이다. 나는 세 번째 방식을 선호하는데, 사용자에게 앱의 실제 성능보다 더 빠르다는 느낌을 줄 수 있기 때문이다.
아래는 우리 앱에서 검색어를 입력해 검색할 때 거치는 화면의 사용자 흐름(유저 플로우, User Flow)이다. 사용자가 검색어를 입력한 뒤 키패드의 검색 버튼을 누르면 다음 화면으로 넘어간 뒤 로딩 애니메이션이 나타난다. 검색 결과 화면이 나타날 때까지 시간이 걸리더라도 앱이 사용자에게 반응하기 때문에 사용자는 잘 작동하고 있다고 인지할 수 있다.
내가 가장 선호하는 세 번째 방식의 로딩. 버튼을 누르면 화면을 이동하거나, 화면 내에서 반응을 한 뒤 로딩을 보여주고 최종 화면에 도달하기 때문에 빠르다고 느끼게 할 수 있다.물론 가장 중요한 건 화면이 빠르게 나타나도록 앱의 성능을 높이는 것이다. 하지만 이미지 데이터를 대량으로 가져오는 경우에는 빠른 로딩이 힘들 수도 있다. 이때 사용자가 보고 있는 화면 기준으로 20~50여 개 정도의 이미지 데이터만 가져오고 스크롤을 내릴 때마다 조금씩 새로 로딩하면, 앱이 빠르게 동작한다고 느끼게 할 수 있다. 앱이 빠릿빠릿하게 동작하는 건 좋은 사용자 경험을 주기 위해 무척 중요하기 때문에 성능을 끌어올릴 수 있는 방법이나 트릭들을 개발자와 함께 구상하는 게 중요하다.
2) 토스트
사용자가 앱 내에서 어떤 일을 완수했을 때, 제대로 완수했는지 반응을 보여줘야 한다. 나는 '토스트(Toast)'를 적극적으로 활용한다. 토스트는 마치 토스터기에서 토스트가 나오는 것 같다고 해서 붙여진 이름으로, 사용자에게 정보를 주기 위해 잠시 나타났다가 사라지는 안내 메시지다.
아래는 우리 앱에서 사용자가 '보관'이라는 기능을 이용하는 과정이다. 사용자가 해야 할 일은 옷 설명을 입력하고, 사이즈를 고른 뒤 '옷장에 보관' 버튼을 누르는 것이다. 이 일을 완수하면 사용자에게 '옷장에 옷을 등록했습니다'라는 메시지를 토스트로 보여준다. 사용자가 한 일이 잘 끝났다는 걸 알려주는 것이다.
사용자가 작업을 완수하면 토스트로 잘 끝났다는 걸 알려줘야 한다.한 가지 명심할 건 토스트를 써야할 곳에 사용자가 버튼을 눌러야만 꺼지는 팝업을 써서는 안 된다는 것이다. 사용자에게 완료됐다는 사실을 가볍게 인지시키기만 하면 되는데, 굳이 '확인' 버튼을 눌러야 하는 팝업을 보여줘 사용자가 불필요한 행동을 하게 해서는 안 된다. 확인 버튼을 눌러야 하는 팝업은 사용자가 반드시 확인해야 하는 정보를 전달할 때만 써야 한다.
사용자에게 간단히 알리기만 하면 되는 정보에서 '확인'을 요구하는 팝업을 쓰면, 확인 버튼을 눌러야 하는 불필요한 행동을 하게 돼 사용성을 낮춘다.3) 마이크로 인터랙션
'반응을 보여줘야 한다'는 3번째 UX 원칙이 적용되는 디자인의 꽃은 '마이크로 인터랙션(Micro Interactions)'이다. 마이크로 인터랙션 디자인은 쉽게 말해 사용자에게 섬세하게 반응해, 사용자가 도달해야 하는 목표까지 매끄럽게 가도록 돕는 디자인이다.
우리 앱에서 마이크로 인터랙션이 가장 적절하게 들어간 곳은 '회원가입&로그인' 과정이다. 회원가입을 쉽게 만들기 위해, 사용자가 무언가를 입력하면 디자이너가 미리 설계한 피드백을 실시간으로 줘서 사용자가 막힘없이 앱을 이용하게 한 것이다.
아래 이미지는 사용자가 우리 앱에서 이메일로 회원가입을 할 때 비밀번호를 입력하는 화면이다. 우리 앱은 강한 규칙이 필요한 서비스는 아니기 때문에, 강한 규칙으로 사용자에게 스트레스를 주고 회원가입에서 이탈하게 하기보다 '6자리 이상'이라는 약한 규칙으로 회원가입을 쉽게 할 수 있도록 했다. 여기서 중요한 건 강한 규칙이든 약한 규칙이든 사용자가 입력하고 있는 비밀번호가 규칙에 맞는지 실시간으로 '피드백'을 줘야 한다는 것이다. 사용자가 열심히 비밀번호를 입력해 완료 버튼을 눌렀는데, 그제서야 '비밀번호가 약합니다!'라고 팝업을 띄워 다시 비밀번호를 입력하게 한다면 사용자가 회원가입에서 이탈할 확률이 높아진다.
나는 사용자가 첫 번째 텍스트 필드에 비밀번호를 1글자 이상 적는 순간부터 경고의 은유적 색상인 빨간색 글씨로 '아직 6자리가 아니에요'라는 피드백을 줬다. 비밀번호가 조건을 충족했다면 긍정이나 성공의 은유적 색상인 초록색 글씨로 '알맞은 비밀번호입니다 :)'라는 피드백을 줬다.
사용자가 비밀번호 확인 텍스트 필드까지 적는 걸 마쳤는데, 두 비밀번호가 다르다면 '두 비밀번호가 달라요! 확인해 보시겠어요?'라는 피드백을 준다. 입력한 두 비밀번호가 같다면 '계속하기' 버튼이 활성화되고 다음 과정으로 넘어갈 수 있다. 다음으로 넘어갈 수 없는데 계속하기 버튼을 활성화해 놓으면, 사용자가 누를 수 있는 것으로 착각하고 버튼을 눌러 경고 팝업을 보게 되거나 반응이 없는 상황을 맞닥뜨리게 될 수 있다. 좋지 않은 경험이므로 누를 수 없는 버튼은 비활성화하거나 숨겨놓는 게 좋다.
사용자에게 섬세하게 반응해 회원가입을 쉽게 만들었다.이 회원가입 UI/UX를 디자인한 지 8개월 정도가 지난 것 같다. 요즘은 너무 세세하게 반응하면 오히려 사용자의 눈길을 자주 끌게 돼 좋지 않을 수도 있다는 생각이 든다. 없던 글씨가 나타나는 등 어떤 움직임이든 사용자의 눈길을 끌기 때문이다. 답은 없지만, 사용자와 소통하는 좋은 마이크로 인터랙션에 대해서는 꾸준히 고민해볼 계획이다.
04 맥락 있는 흐름을 만든다
좋은 UI/UX 디자인에는 '맥락(Context)'이 있다. 사용자가 UI를 이용하면서 뜬금없다고 느끼는 상황이 없다는 뜻이다. 사용자가 앱에서 경험하게 되는 각각의 흐름에 맞는 맥락이 잘 디자인돼 있어야 매끄럽게 앱을 쓸 수 있다.
최근 맥락 있는 흐름으로 큰 성과를 본 프로젝트가 있다. 새로 런칭한 '코디 검색' 서비스를 중심으로 큰 맥락을 만드는 프로젝트였다. 이 프로젝트에서 우리 팀은 '코디 검색 앱'이라는 광고로 iOS(아이폰) 앱 스토어에 사용자를 도달시킨 뒤, 앱 스토어에서 '코디 검색'이라는 맥락에 맞는 설명과 이미지를 보여줘 앱을 다운받게 하고, 다운받은 앱에서는 바로 코디 검색부터 할 수 있도록 맥락을 디자인했다. 사용자에게 우리 앱에서 얻을 수 있는 핵심 가치인 코디 검색을 확실히 인지시키기 위해 광고와 앱 스토어, 앱을 연결하는 큰 흐름을 만든 것이다.
이런 맥락을 만들기 전까지 광고에서 앱 스토어, 앱까지 이어지는 흐름은 뒤죽박죽이었다. 광고와 앱 스토어, 앱이 각자 다른 말을 하고 있어서 사용자가 앱을 다운받지 않거나, 다운받더라도 금세 이탈하는 경우가 허다했다.
그런데 이런 큰 맥락을 만들자 전환율이 놀라울 정도로 급격히 올랐다. 광고 비용 대비 앱 다운로드 수가 크게 늘어났으며, 앱 내의 21.9%밖에 전환이 이뤄지지 않는 구간의 전환율이 63%로 3배 가량 크게 상승했다. KPI(Key Performance Indicator, 핵심 성과 지표)도 13%에서 20%로 상승했다. 이는 우리 앱을 이해하는 사용자가 늘었다는 뜻이다.
맥락 있는 흐름을 만들자 우리 앱을 이해하는 사용자가 크게 늘었다. 앱 내에서도 꾸준히 맥락 있는 흐름을 만들 계획이다.05 시각적 일관성을 유지한다
앱 안에 다양한 UI 스타일이 있으면 사용자가 '하나'의 앱을 쓴다고 느끼기 어렵다. 시각적 일관성이 있어야 사용자에게 안정감을 준다. 이는 사용자가 무의식적으로 앱을 신뢰하게 만든다. 따라서 시각적 일관성을 유지하는 건 중요하다.
나는 디자인 시스템을 만들어 시각적 일관성을 유지하려고 노력하고 있다. 우리 앱의 디자인 시스템에서 가장 기본이 되는 건 색과 타이포그래피 요소다. 색과 타이포그래피 요소만 잘 정해 써도 시각적 일관성이 생긴다.
우리 앱의 디자인 시스템에서 특이한 건 UI 요소 사이의 간격도 아래처럼 정해놨다는 점이다. 카드와 카드, 버튼과 버튼 등 디자인 요소 사이의 간격도 일관적으로 유지하기 위해서다.
시각적 '형태'는 모두 둥글게 만들었다. 특히 코너의 radius 값은 특수한 경우를 빼고는 모두 12다. 형태를 일관적으로 둥글게 디자인해 사용자에게 '친근하게' 다가가려는 우리 서비스의 시각적 톤앤매너를 만들려고 노력했다.
아직 우리 팀은 고객에게 전달하고자 하는 명확한 핵심 가치가 무엇일지 고민하는 중이라, 그 가치를 시각 언어로 표현한 우리만의 '그래픽 모티프(Graphic Motif)'를 디자인할 수가 없다. 그에 따라 로고나 아이콘 등 시각 요소에 우리만의 일관적인 시각 언어를 담지 못했다. 하지만 이는 우리 팀이 전하고자 하는 핵심 가치가 명확해질수록 자연스럽게 만들 수 있는 부분이다. 멋진 그래픽 모티프보다 더 중요한 건 '시각적 일관성'이 있느냐 없느냐다. 나는 현재 우리 팀의 상황에 맞춰 '둥글다'라는 형태적 요소로 최대한 단순하게 시각적 일관성을 만들려고 노력했다.
실제 디자인 시스템에서 위 디자인 요소는 용도에 따라 나뉘어 있지만, 여기서는 시각적으로 일관성 있는 컴포넌트를 표현하기 위해 Radius가 12인 요소만 모아봤다.디자인 시스템을 구축하면 크게 2가지 장점이 있다. 첫 번째 장점은 효율적으로 개발할 수 있다는 점이다. 효율적인 개발이 되려면 디자인 요소들이 모두 코드로 정리돼야 한다. 이때 코드로 정리하는 디자인 요소에는 색과 타이포그래피 요소, 공통적으로 쓰이는 컴포넌트 등이 있다. 규모가 크지 않은 앱에서는 색과 타이포그래피 요소 정도만 코드로 정리해둬도 충분히 좋은 효과를 볼 수 있다.
두 번째 장점은 시각적 일관성이 생긴다는 점이다. 앱의 규모가 크다면 첫 번째와 두 번째 장점 모두가 크게 작용하지만, 우리 앱처럼 아직 규모가 크지 않은 앱은 두 번째 장점이 훨씬 크게 작용한다.
06 예상할 수 있어야 한다
UI/UX 디자이너는 상황에 따라 사용자에게 보이는 화면을 다르게 디자인할 수 있다. 우리 앱에는 검색어를 입력해 검색하면 '코디'와 '상품(옷)'을 모두 찾아 이를 보여주는 '검색 결과' 화면이 있는데, 검색 결과에 코디가 아예 없거나 상품이 아예 없는 경우가 있다. 둘 다 없는 경우도 있다. 정리하면 이 검색 결과 화면은 아래처럼 4가지로 나뉜다.
검색 결과 화면
1. 코디와 상품 둘 다 있는 경우(기본 화면)
2. 코디만 있는 경우
3. 상품만 있는 경우
4. 둘 다 없는 경우
이 검색 결과 화면을 처음 고민할 때 나는 각 화면을 아래처럼 서로 다르게 디자인했다. 코디와 상품이 모두 있어서 두 결과 모두 볼 수 있는 1번 검색 결과 화면을 기본 화면이라 하고, 코디만 있는 경우에는 코디만 볼 수 있도록 화면을 바꾸고, 상품만 있는 경우에는 상품만 볼 수 있도록 화면을 바꾸고, 둘 다 없는 경우에는 다시 검색어를 입력하기 쉽도록 화면을 바꿨다. 즉 검색 상황에 따라 사용자가 보게 되는 화면을 다르게 디자인한 것이다.
위 디자인에서 핵심은 화면 상단 검색 막대 아래에 '코디'와 '상품' 탭을 검색 상황에 따라 보이게 하거나 보지이 않게 하는 것이다. 이렇게 디자인하면 '사용자는 결과가 없는 화면으로 가는 불필요한 행동을 하지 않게 된다'라는 게 내 생각이었다. 다시 말해 불필요한 행동을 사전에 차단하려는 의도였다.
하지만 이게 정말 사용자에게 좋은 경험을 주는 디자인일까?
이 디자인 시안으로 팀원들과 디자인 리뷰를 하면서 과연 이게 정말 좋은 디자인인지 하는 의문이 들었다. 팀원들의 의견을 들어보니 사용자가 오히려 헷갈릴 수 있겠다는 생각이 들었기 때문이다. 사용자가 가장 많이 보게 될 1번 화면이 아닌, 다른 화면을 보게 됐을 때 '사용자가 기대했던 화면'이 나오지 않으면 혼란스러울 수 있다.
사용자가 코디를 보려고 검색어를 입력해 결과 화면에 도달했다고 해보자. 그런데 사용자가 입력한 검색어는 코디 검색 결과가 없는 검색어였다. 그에 따라 사용자가 도달하는 화면은 코디 검색 결과는 없고 상품 검색 결과만 있는 화면이다. 코디를 찾으려고 검색했는데, 코디를 전혀 볼 수 없다. 앱이 바뀐 건지 키워드를 잘못 입력한 건지 사용자는 알 길이 없다. 사용자의 머릿속에는 '왜 평소처럼 코디가 안 나오지?'라는 생각이 스치고 지나간다. 사용자 입장에서 유쾌하지 않은 경험이다. 기대했던 결과가 아니기 때문이다.
코디를 찾기 위해 검색한 결과 화면에 평소처럼 코디가 없다면 사용자는 혼란스럽다. 좋지 않은 경험이다.이런 생각에 다다르자 나는 검색 결과가 없더라도 없다는 것도 분명히 보여줘야 한다는 사실을 깨달았다. 사용자가 예상할 수 있도록 디자인해야 한다는 인사이트를 얻게 된 것이다. 사용자의 편의를 위해 고안했던 디자인이 되려 사용자에게 좋지 않은 경험을 줄 수 있다는 소중한 깨달음이다.
예상할 수 있어야 한다
새로운 인사이트를 바탕으로 개선한 2, 3, 4번 화면에는 1번 화면과 마찬가지로 상단 탭이 있다. 검색 결과가 없더라도 사용자는 탭을 이동하며 검색 결과가 없다는 걸 확인할 수 있다. 사용자가 언제나 예상한 화면을 만날 수 있게 된 것이다.
나는 여기에 한 가지 아이디어를 보탰다. '검색 결과 없음' 화면에서 사용자의 검색 경험이 끊기지 않도록 '추천 키워드(추천 검색어)'를 제공한 것이다. 검색 결과가 없는 검색어를 입력한 사용자에게 어떤 검색어를 입력해야 좋은 결과가 나오는지 알려주기 위해서다. 혹은 몰랐던 키워드를 알게 해 패션에 대한 지식을 전달하고자 하는 목적도 있다. 이런 배려로 사용자는 자신이 입력한 검색어로 결과가 나오지 않았더라도 추천 키워드 버튼만 누르면 쉽게 다시 검색할 수 있다.
기존 디자인은 상황에 따라 상단 탭을 없애 사용자가 예상하지 못한 결과가 나올 수 있었다. 개선한 디자인에서는 언제나 사용자가 예상한 화면이 나온다. 같은 속성을 지닌 요소에는 같은 색과 모양을 반복적으로 써서 사용자가 그 요소가 무엇인지 무의식 중에 예상할 수 있도록 만들 수도 있다. 우리 앱에서는 캐주얼, 댄디 같은 '코디 스타일' 속성에 같은 모양과 색을 반복적으로 활용해, 사용자가 그 요소가 무엇인지 쉽게 알아볼 수 있도록 했다.
07 의미 있는 움직임만 보여준다
모션(Motion, 움직임)은 사용자의 눈길을 끈다.
사람은 본능적으로 움직이는 무언가가 있는 쪽으로 눈이 간다. 앱에서도 마찬가지다. 사용자가 앱을 쓰면서 움직이는 요소가 보인다면 그쪽으로 시선이 간다. 따라서 사용자가 앱을 쓸 때 불필요한 모션은 불필요한 시선을 끌게 돼 사용자를 방해한다.
모바일 UI 디자인이 고도화되면서 '움직이는 디자인'은 트렌드가 아닌 필수가 되고 있다. 앱이든 웹이든 작은 요소 하나하나에 모션이 들어가 사용자의 눈길을 사로잡는다. 사용자에게 재미를 주는 요소로 작용하기도 한다. 하지만 요소마다 들어가는 멋진 모션들이 과연 좋은 사용자 경험을 만들고 있을지는 고민해봐야 할 문제다. 모션은 좋은 사용자 경험을 위한 도구여야 한다. 멋진 모션 자체가 목적이 되면 안 된다.
한 달 전쯤 이미지를 선택한 뒤 버튼을 눌러 다음 화면으로 넘어가는 화면을 디자인했다. 단순한 화면이지만 조금 더 단순하게 디자인할 수는 없을지 고민하다가 좋은 아이디어가 떠올랐다. 모션을 활용하는 것이다.
기존에 내가 했던대로 디자인한다면 버튼을 비활성화 상태로 뒀다가 사용자가 이미지를 선택했을 때 버튼을 활성화시켰겠지만, 새로운 디자인에서는 버튼을 숨겨놨다가 이미지를 선택하면 아래에서 버튼이 스르륵 나타나도록 했다. 이미지를 선택하지 않았을 때에는 버튼이 없기 때문에 사용자는 더 넓은 화면에서 이미지를 볼 수 있고, 이미지를 선택하면 버튼이 아래에서 스르륵 나타나는 모션을 통해 사용자의 시선을 버튼으로 향하게 만들어 자연스럽게 버튼을 누르는 행동을 유도할 수 있다. 이미지를 선택할 때는 화면을 넓게 볼 수 있게 해주고, 이미지를 선택한 뒤에는 다음 행동을 유도해주는 의미 있는 버튼의 움직임이라 할 수 있다.
사용자는 이런 화면 2개를 거쳐 최종 결과 화면에 도달하는데, 이 두 화면을 거치는 동안 이탈한 사용자는 15.2%밖에 되지 않는다. 전환율이 84.8%라는 뜻이다. 2번째 원칙인 '각 화면에서 한 가지 행동에만 집중하게 한다'와 7번째 원칙 '의미 있는 움직임만 보여준다'를 잘 조합한 디자인으로 좋은 결과를 만들었다.
08 누구나 이해하기 쉬운 글을 제공한다
어떤 글이든 독자가 있다. 일기는 내가 독자고, 기사는 대중이 독자고, 논문은 각 분야의 연구자가 독자고, UI에 담긴 글은 사용자가 독자다. 무슨 글이든 반드시 독자를 생각하며 써야 한다. 독자가 이해할 수 없는 글에는 독자가 없다. 다시 말해 독자를 배려하지 않는 글은 사람들이 읽지 않는다.
나는 UI에서 '짧고 명료하게' 글을 써 사용자가 쉽게 앱을 쓸 수 있도록 노력하고 있다. 우리 앱에서는 다른 곳에서 보기 힘든 특이한 서비스를 제공하고 있기 때문에 사용자들에게 서비스를 설명하는 글을 쓸 때 애를 먹기도 하지만, 한편으로는 새로운 글쓰기 경험이라 즐겁기도 하다.
이런저런 앱을 쓰다 보면 사용자가 눌러야 하는 버튼에 맥락없는 문구가 있는 걸 보곤 한다. 예를 들어, 이커머스 앱에서 찜해놓은 상품을 삭제하려고 한다고 해보자. '삭제하시겠습니까?'라는 메시지와 함께 사용자는 '취소'와 '확인' 버튼을 보게 된다. 여기서 사용자가 하려고 하는 행동이 삭제라면 이 경우 '확인' 버튼을 눌러야 한다. 맥락이 자연스럽지 않다. 삭제를 확인한다니? 이때 '확인'이라는 단어 대신 '삭제'라는 단어를 써서 사용자가 버튼을 눌렀을 때 일어나는 일을 명확히 알려주는 게 좋다.
삭제처럼 되돌릴 수 없는 행동의 경우 팝업을 띄워 삭제할건지 한 번 더 물어봐야 한다.09 사용자의 익숙함을 존중한다
대부분의 사용자는 익숙한 것을 좋아한다.
사용자가 많은 규모가 큰 서비스일수록 급격하게 UI/UX 디자인을 바꾸는 건 경계해야 한다. 대부분의 사용자는 새로운 것을 익히기보다 익숙한 것을 익숙하게 쓰는 걸 좋아하기 때문이다. 이미 익숙해진 앱을 더 좋은 사용자 경험을 줄 거라는 근거 없는 믿음만으로 전면적으로 디자인을 바꿨다가는 많은 사용자를 한꺼번에 잃을 수도 있다.
우리 앱은 아직 사용자가 많지 않아, 이 9번째 원칙을 적극적으로 적용하고 있지는 않다. 하지만 사용자가 늘어나면 늘어날수록 이 원칙은 무척 중요해진다. 나에게는 UI/UX 디자이너로서 지금처럼 사용자가 적을 때 앱을 잘 설계해둬야 한다는 큰 책임이 있다. 사용자가 많아지면 기존 앱에 익숙한 사용자들을 위해 급격한 변화를 줄 수 없기 때문이다.
최근 업데이트한 구글 지도는 '사용자의 익숙함을 존중한다'는 9번째 원칙의 좋은 사례다. 이번 구글 지도 업데이트에서는 상단 검색 막대 왼쪽에 있던 햄버거 버튼(세 줄짜리 버튼)을 없애고, 햄버거 버튼에 있던 기능을 프로필 설정과 하단 탭 바로 옮겼다. 사용자가 익숙하게 쓰던 기능의 위치가 달라져 혼란스러워할 수 있는 큰 변화다.
하지만 구글은 햄버거 버튼 아이콘에 물음표를 추가하고, 이 버튼에 익숙한 기존 사용자들이 평소처럼 햄버거 버튼을 눌렀을 때 어디로 기능이 옮겨갔는지 안내해주는 디자인을 한 달 정도 유지한 뒤, 햄버거 버튼을 완전히 삭제했다. 사용자의 익숙함을 존중하고, 새로운 위치를 자연스럽게 익힐 수 있도록 디자인한 것이다.
10 필요한 만큼만 단순하게 디자인한다
디자인을 하다 보면 팀원들이나 사용자들에게 디자이너로서 무언가(?) 보여줘야 할 것 같은 생각이 들 때가 있다. 그런 생각에 사로잡혀 디자인을 하다 보면 무언가를 자꾸 집어넣으려고 한다. 불필요하다는 걸 알면서도 장식 요소라도 넣어야 하나 고민한다. 하지만 필요한 만큼만 단순하게 디자인하는 게 더 좋다. 더 넣을지보다, 어떻게 하면 필요한 요소만 남길 수 있을지 고민해야 한다.
필요한 만큼만 단순하게 한 디자인은 전달하고자 하는 서비스의 '가치'에 집중한다는 이야기이기도 하다. 서비스에서 전달하고자 하는 가치를 명료하게 전달하는 가장 좋은 방법은 단순하게 디자인하는 것이기 때문이다.
얼마 전까지 우리 앱의 홈 화면은 회의를 거칠 때마다 새로운 요소가 하나씩 늘어나곤 했다. 그로 인해 한 화면 안에 이런저런 기능이 뒤죽박죽 섞이기 시작했고, 사용자가 이탈하기 시작했다. 우리 팀은 불필요한 요소가 많아진 게 문제라 보고, '패션 검색' 서비스라는 우리의 본질에 집중한 디자인으로 홈을 개편하기로 했다. 필요한 만큼만 단순하게 디자인하기로 한 것이다.
우리 앱의 대표적인 패션 검색 서비스는 '코디 검색'과 '사이즈 검색'이다. 코디 검색은 말 그대로 코디를 찾아주는 서비스고, 사이즈 검색은 온라인에 퍼져 있는 상품들 중에서 내 옷의 실제 사이즈와 같은 옷만 찾아주는 서비스다.
먼저 두 검색 서비스를 강조하는 동시에 구분하기 위해, 상단 탭으로 둘을 나눴다. 각 탭에서 각 검색 서비스에만 집중할 수 있도록 불필요한 요소는 모두 뺐다. 또, '검색'이라는 핵심 가치를 더 명확히 인지시키기 위해 하단 탭 바의 첫 번째 탭인 홈 탭의 집 모양 아이콘을 돋보기 모양 검색 아이콘으로 바꿨다.
코디 검색이든 사이즈 검색이든 사용자는 옷 사진을 찍어야 이용할 수 있다. 이 때문에 우리 앱을 처음 이용하는 사용자에게 옷 사진을 찍는 행동을 유도하는 건 아주 중요하다. 옷 사진을 찍고 검색 서비스를 제대로 써봐야 우리 서비스를 이해하고 계속 쓸 가능성이 높아진다. 따라서 첫 사용자에게는 옷 사진을 찍어야 한다는 걸 명확히 알려주기 위해 사용자가 해야 하는 행동인 '사진 찍기'에만 집중할 수 있는 단순한 화면을 보여준다.
'패션 검색'이라는 핵심 가치를 명확히 전달하기 위해, 원래 집 모양 아이콘이었던 하단 탭 바 첫 번째 아이콘을 돋보기 모양 검색 아이콘으로 바꿨다.마치며
UI/UX 디자이너로 일하게 된 지 한 달 정도 지났을 때쯤 UX 원칙 5가지를 만들어 팀에 배포했었습니다. 3달 정도는 잘 보이는 곳에 종이로 출력해 붙여두기도 했었지요. 그 원칙들이 우리 팀이 만드는 앱과 웹에 녹아들게 디자인하려고 노력했습니다.
실무에서 UI/UX 디자인을 한 지 1년이 다 되어 갑니다. 최근 다시 그 원칙 5가지를 정리한 글을 읽어보니 감회가 새롭습니다. 그 당시에는 디자이너로서 실무에서 겪은 경험을 공유할 수 있다는 점이 참 신기했고 실감이 나지 않았던 것 같습니다. 제가 디자이너라는 게 참 좋았습니다.
부족한 경험으로 만들었던 UX 원칙이라 구체적이지 못한 거시적인 원칙이 돼 버렸었지만, 그 덕에 어느 정도 스스로 기준을 잡고 디자인을 할 수 있었던 것 같습니다.
2019년 처음 만들었었던, 미숙했던 UX 원칙 5가지
01 [대원칙] 쉽고, 쉽고, 쉽게
02 단순하게
03 자연스럽게
04 사용자 중심 글쓰기
05 버튼의 원칙
이 글에서 새로 정리한 'UX 원칙 10가지'는 실무에서 바로 적용할 수 있을 정도로 구체적입니다. 사용자 경험(UX)을 디자인하는 디자이너로서 사용자에게 좋은 경험을 주기 위한 깊은 고민의 결과물입니다. 상당히 만족스럽습니다. 꾸준히 경험을 보태 발전시켜 나갈 계획입니다.
새로운 UX 원칙을 만들면서 마음속에 새긴 UX 디자이너로서의 철학은 '배려'입니다. 제가 브런치에 쓰고 있는 글에서는 독자를, 디자인하고 있는 앱과 웹에서는 사용자를 배려해야 독자와 사용자가 좋은 경험을 할 수 있습니다.
UX 디자인은 배려다.
배려는 쉽지 않은 일입니다. 상대방을 위해 나를 희생해야 합니다. 제 글을 읽는 독자가 이해가 되지 않는 부분이 없도록 글을 쓰는 일은 저를 고통스럽게 합니다. UI/UX 디자인도 마찬가지입니다. 하지만 저는 제가 쓴 글을 읽는 사람이, 제가 디자인한 서비스를 쓰는 사람이 좋은 경험을 하기를 바랍니다. 막힘없이 글을 읽고, 서비스를 이용하기를 바랍니다. 비록 저의 그 배려가 진심이 아닌 제 글과 제 디자인에 대한 자존심일 때가 있을지라도, 독자와 사용자에게 좋은 경험을 전할 수 있기를 바랍니다.
이 글에는 UI/UX 디자이너로서 저의 철학과 자존심이 담겨있습니다. 이 글은 제가 앞으로 나아가야 할 방향을 저 스스로에게 지시하고 있습니다. 앞으로 UX 디자인에 대한 저의 철학이 어떻게 성장해 나갈지는 모르겠지만, 이 글이 UI/UX 디자이너로서 크게 성장했다는 걸 증명해주고 있다는 사실에 저를 한 번 크게 칭찬해주고 싶습니다. 디자이너가 될 수 있을지 불안했지만, 하고 싶은 일에 도전했었던 그 시절의 저에게 감사드립니다.
(덧)
종종 제게 UI/UX 디자인에 대한 자문을 구하기 위해 연락을 주시는 분들이 계십니다. 실제로 한 곳은 프로젝트에 참여하기로 했습니다. 그러면서 제 UI/UX 디자인 경험이 우리 팀이 아닌 다른 곳에도 도움이 될 수 있다는 사실을 깨닫게 됐습니다. 우리 서비스를 쓰는 사용자뿐만 아니라 다른 서비스를 쓰는 사용자에게도 제 디자인이 좋은 경험을 줄 수도 있겠구나 하는 사실을 알게 된 거지요. 더 많은 사용자에게 좋은 경험을 줄 수 있는 기회가 생긴 겁니다.
저는 이번 프로젝트 참여를 계기로 더 많은 사람에게 의미 있는 경험을 줄 수 있는 UI/UX 디자이너가 될 수 있다는 새로운 가능성을 발견했습니다. 그리고 그것만큼 UI/UX 디자이너에게 보람된 일이 있을까 하는 생각도 들었습니다.
사실 제게는 UI/UX 디자이너로서 정점에 이르고 싶다는 욕심이 있습니다. 하지만 이번 프로젝트 참여를 계기로 그건 생각보다 의미 없는 일일지도 모르겠다는 생각이 들었습니다. 그보다 더 의미 있는 일은 많은 사람들에게 좋은 영향을 주는 일이 아닐까 하는 생각을 요즘 많이 합니다. UI/UX 디자이너는 그러기에 좋은 직업이기도 하지요. 무엇보다 제 인생 목표와도 닿아있습니다.
2018년 여름, 서울과 프랑스 파리에서 작품 '20대를 남기다'의 전시를 마쳤던 30살의 김경환은 아래와 같은 인생 목표를 세웠습니다.
젊은 세대에게 좋은 영감을 주는 사람으로 나이 들어가기.
20대의 감정과 이야기를 사진과 글로 남기는 '20대를 남기다' 프로젝트를 2017년 5월부터 진행해오면서 제가 어떤 사람에게 좋은 영향을 줄 수 있다는 사실을 깨닫게 됐고, 크게 느낀 바가 있어 그게 제 인생 목표가 됐습니다. 의도치 않게 UX 디자인은 그런 제 인생 목표를 다른 방향으로도 실현시켜줄 수 있는 가능성을 가진 분야가 아닌가 하는 생각이 듭니다. 사용자들에게 좋은 영향을 줄 수 있는 직업이기 때문이지요.
UI/UX 디자이너로 일할 수 있는 지금에 감사하며 살고 있습니다. 가장 뛰어난 UI/UX 디자이너가 아닌 많은 사용자에게 좋은 영향을 줄 수 있는 디자이너, 많은 사람에게 좋은 영감을 줄 수 있는 사람으로 나이 들어갈 수 있도록 새로운 큰 그림을 그려보려 합니다.(끝)
작은 앱 프로젝트
많은 기능과 서비스를 갖추고 있는 슈퍼 앱들 사이에서 단순함을 가장 큰 목표로 하는 '작은 앱'이 사람들에게 어떠한 의미로 다가갈지 연구하는 '작은 앱 프로젝트'를 진행하고 있습니다.
