UX 디자인을 위한 7가지 원칙 - DIGITAL iNSIGHT 디지털 인사이트
Know-how, UX & Design

UX 디자인을 위한 7가지 원칙

UX 디자인은 알면 알수록 재미있지만 한편으론 알면 알수록 어렵다. 

열 길 물속은 알아도 한 길 사람 속은 모른다.”

열 명의 사람에겐 열 가지 생각이, 백 명의 사람에겐 백 가지 생각이 존재한다. UX 디자이너는 사람들의 마음과 생각을 이해하고 파악해 디자인해야 하는 사람이다. 하지만 내 마음도 잘 모르는데 남의 마음을 아는 게 어디 쉬운 일인가? 그 마음을 이해하고 파악해 그들이 지갑을 열기까지는 그야말로 산 넘어 산이다.

UX 디자인을 심미적인 측면에서만 접근한다면 당신은 UX 디자인의 기본을 다시 터득해야 할 필요가 있다. UX 디자인은 공부하면 공부할수록 디자인 감각만 있는 사람보다 디자인 감각을 가진 수학자, 물리학자 혹은 심리학자, 작가, 건축가에게 더 적합한 직종이라는 생각이 든다. UX 디자이너는 자신이 디자인한 화면에 대한 합당한 이유와 화면 흐름을 논리적으로 설명할 수 있어야 한다. UX 디자이너는 디자인 요소, 아이콘 요소 하나하나의 존재 이유, 치수까지 자신이 세운 가설을 토대로 디자인적으로 구현해야 하는 사람이다.

사실 UX 디자이너와 UI 디자이너는 엄연히 다른 역할을 하는 사람들이다.

대학원에 다닐 때 ‘노년층’을 대상으로 한 연구를 진행했다. 노년층의 삶을 향상하기 위한 공간을 위한 디자인 가이드라인을 주로 연구했고 그들의 육체적, 심리적 변화에 대한 리서치를 진행했다.

그 당시에는 노년층을 대상으로 하는 연구 주제가 마음에 들지 않았다. 남들처럼 반짝거리는 뭔가를 디자인하고 싶었고 누구나 “우와”하고 감탄할 만한 연구 주제를 진행하고 싶었다. 그렇게 석사, 박사 과정이 끝났을 때만 해도 연구 주제나 연구 대상에 대한 애착이 많지 않았다. 그래서 수년간 공부했던 시간을 잠시 접어 둔 채 디자인 리서처의 길이 아닌 다른 길을 기웃거렸다. 다른 길을 간 것을 후회하지는 않지만 시간이 지날수록 오랫동안 공부했던 것들에 대한 미련이 생기기 시작했다. 그제야 나는 처음부터 다시 시작한다는 마음으로 UX 디자인 공부를 하기 시작했다. 

실제로 (모바일을 기반으로 하는) UX 디자인 분야는 모바일 기기가 발전하는 속도만큼 디자인 트렌드의 속도도 빠르게 변화한다. 새로운 툴이 계속 생겨나고 디자인 트렌드는 해마다 바뀐다. 현업에 있는 사람들도 꾸준히 공부하지 않으면 금세 뒤쳐지는 분야가 UX 디자인 분야다. 때문에 나는 거의 처음부터 다시 배우는 마음으로 UX 디자인을 공부했다. 내가 가진 지식 외에 배워야 할 것들이 많았다. 그렇게 UX 디자인을 다시 공부하기 시작하면서 깨닫게 된 것은 오래 전 노년층을 대상으로 했던 연구가 디자인 철학에 큰 디딤돌이 되고 있다는 것이었다.

관련이 없는 점들 속에서 새로운 가능성을 찾을 수 있다.
(이미지출처: https://www.saysamyang.com/212)

과거 진행했던 노년층에 대한 연구는 공간과 사람에 집중했지만 노년층의 육체적, 심리적, 정신적 상태에 대한 리서치는 공간을 넘어 모바일 기기까지 연결됐고 모바일 기기에 익숙하지 않은 계층을 이해하는 데 큰 도움이 됐다.

내가 만난 노년층의 대부분은 지각 수용자 그룹 중에서도 가장 늦게 수용하는 사용자가 많았다.

전반적으로 봤을 때 노년층은 기계 습득이 느리거나 대부분의 테크놀로지를 가장 마지막에 받아들이는 계층에 속한다. 노년층을 대상으로 한 스마트폰 설문조사 결과를 살펴보면 그들의 활동능력을 살펴볼 수 있다. 아래의 그래프에서 볼 수 있듯 노년층은 기본적인 스마트폰 활용 능력(전화 걸기, 문자 보내기, 사진 찍기 등)을 제외한 부가 기능에 대한 습득 능력은 상대적으로 느린 것을 알 수 있다.

새로운 기계 혹은 기능을 익히는 것은 노년층에게는 또 다른 스트레스이자 어려움으로 다가온다. 나이에 따라서 변화하는 인지적인 반응도 있지만 개인적인 실수로 개인 정보나 금전이 유출이 되는 등 실질적인 피해를 입을 수 있다는 막연한 두려움도 분명 있다.

이미지출처: https://www.idaegu.co.kr/news/articleView.html?idxno=298302

실제로 필자가 엄마(만 65세 이상)와 스마트폰에 앱 하나를 설치하기 위해선 아래와 같은 대화가 오고 간다.

나: 엄마, 앱스토어에서 ‘상호명’ 앱 깔면 돼.
엄마: 앱스토어가 어딘데?
나: (앱스토어의 링크를 복사해서 카톡 대화창에 공유한 후) 엄마, 그냥 이거 눌러서 설치하면 돼.
엄마: (앱을 설치하면서도) 이거 설치하면 돈 빠져나가고 개인 정보 유출되는 거 아니니?
나: 그런 거 아니야. 그냥 클릭해서 설치하면 돼.
엄마: 설치는 다 했는데 어떻게 열면 되니?
나: 그냥 앱을 누르면 돼.
엄마: 아이디와 비밀번호를 입력하라는데 뭘 눌러야 돼?
나:………..

이런 대화가 비단 우리 엄마에게만 해당되는 대화는 아닐 것이다. 스마트폰에 익숙하지 않고 한 번도 앱을 설치해보지 않은 노년층 혹은 사용자라면 충분히 발생할 수 있는 문제다.

대학원에서 만난 노년층, 그리고 내 주변의 노년층 혹은 모바일 기기에 익숙하지 않은 사용자들과 이야기를 나누고 그들의 행동을 관찰하면서 앞으로 UX 디자인을 할 때 어떤 철학을 가지고 디자인을 해야 하는지 고민하게 됐다. 인터넷을 조금만 검색해 봐도 UX 디자인의 원칙들은 쉽게 찾아볼 수 있지만 필자의 학문적인 경험, 개인적인 경험을 토대로 필자가 추구하는 UX 디자인의 7가지 원칙은 다음과 같다.

1. 단순해야 한다
2. 직관적이어야 한다
3. 쉽고 간결한 언어를 구사한다
4. One thing per page
5. 시각적 일관성을 유지한다
6. 친절하고 또 친절하게 반응하자
7. 에러 메시지를 정확하게 전달한다

1. 단순해야 한다

디자인하다 보면 필요 이상으로 디자인 할 때가 있다. 글을 쓸 때도 마찬가지다. 분량이 많아야 글을 좀 쓴 것 같고 아는 게 많은 것 같아서 내용보다 분량에 집중할 때가 많다(대학교 레포트를 쓸 때 장평과 폰트 크기를 키워봤던 경험이 있는 사람들이라면 이 의미를 알 것이다).

초창기 앱이나 웹사이트 대표 화면은 그 회사가 제공하는 서비스를 최대한 많이 보여주는 것을 목표로 했다. 다양한 사람들이 들어오는 장소인 만큼 다양성을 존중한다는 취지에서 최대한 많은 서비스를 넣어 소비자의 필요를 충족시켰다.

그런 회사에 반기를 든 대표적인 회사가 구글이다. 구글은 검색을 하는 사용자의 니즈 하나에 집중했고 검색 기능을 제외한 모든 기능을 제거했다. 처음에 사용자는 아무것도 없는 허허벌판이 어색하게 느껴졌지만 이내 단순하게 검색에만 집중한 구글의 검색창을 이용하기 시작했다.

검색에만 집중할 수 있게 디자인 된 구글 검색창

모든 회사가 구글 검색창처럼 핵심 상품을 하나만 보여주고 판매하기는 힘들다. 여기서 강조하고 싶은 것이 있다. 앱 디자인은 한 번에 많은 서비스를 보여주기보단 때로는 그 기업이 전달하고 싶은 핵심 ‘가치’를 한두 가지만 효과적으로 전달해도 소비자들은 그 기업을 선택하게 된다는 것이다.

2. 직관적이어야 한다

해외 모바일앱 디자인 사례를 분석할 때 가장 많이 언급되는 단어 중 하나가 ‘직관적(intuitive)’이라는 단어이다.

모바일앱 디자인에서 직관적 디자인은 어떤 것을 의미할까? 사전적 의미를 살펴보면 ‘판단이나 추리 따위의 사유 작용을 거치지 않고 대상을 직접적으로 파악하는 것’(출처: 표준국어대사전)으로 나와 있다. 영어의 사전적 의미는 ‘Using or based on what one feels to be true even without conscious reasoning’ 정도로 해석이 된다. 한 마디로 직관적인 기능은 그 기능을 보는 순간 설명하지 않아도 바로 알아차리는 것이라 할 수 있겠다.

하지만 직관적인 디자인을 할 때 조심해야 하는 것이 있다. 바로 직관적 디자인이 디자인의 목표가 되어서는 안 된다. 이 말은 ‘직관적’이라는 단어는 사람들마다 다른 의미로 다가올 수 있다는 것이다. 즉, 10대에게 ‘직관적’이라고 생각한 제품이 60대에겐 ‘직관적’이지 않을 수 있다.

위의 필자의 예처럼 필자에게 앱스토어 아이콘은 직관적인 아이콘으로 다가오지만 60대 엄마에게는 직관적이지 않고 앱스토어에서 앱을 사서 설치한다는 개념부터 익숙하지 않았다.

직관적인 디자인은 사용하는 나이, 성별, 문화적 차이, 문화적 배경에 따라서 달라질 수 있기 때문에 디자이너 입장에서는 사용하기 쉬워야 한다는 개념만 적용해서는 안 된다. 내가 디자인하려는 제품의 대상을 철저히 이해하고 디자인할 필요가 있다.

사용하는 세대층이 넓은 앱일 경우, 각 아이콘에 대한 문자적 설명을 넣어주는 것이 바람직하다.

3. 쉽고 간결한 언어를 구사한다

누구나 쉽게 읽을 수 있는 글을 쓰는 것은 중요하다. 나 혼자 보는 글이 아니라면 같은 글을 여러 번 고치고 고쳐서 쉽게 쓰는 연습을 해야 한다.

마크 트웨인(Mark Twain)은 ‘톰 소년의 모험’을 쓴 미국의 유명한 소설가다. 글쓰기에서 필요 없는 군더더기를 제거하는 것의 중요성을 설명할 때 그의 인용어를 종종 사용한다.

I apologize for such a long letter – I didn’t have time to write a short one.
(바빠서) 긴 편지를 보내서 죄송합니다.

평소에 자주 사용하지 않은 단어와 어려운 한자를 섞어 사용하는 글은 스스로 글쓰기 실력을 쌓는 데는 도움 될지는 몰라도 대상이 정해진 글쓰기에서는 바람직하지 않다. UX 디자인의 글쓰기는 철저히 사용자에게 맞춰야 한다. 사용자 중에서도 모바일에 익숙하지 않은 사용자에게 맞춰야 한다. 실제로 대중을 위한 글쓰기 난이도는 중학교 2학년 수준의 글쓰기로 유지하는 것이 좋다는 말도 있다.

호흡이 긴 문장보다는 간결한 문장을, 어려운 단어보다는 쉬운 단어로 모두가 이해할 수 있는 글을 쓰는 능력은 UX 디자이너에게도 반드시 필요한 능력이다.

4. One thing per page

모바일이라는 작은 화면 안에서 사용자에게 한꺼번에 너무 많은 정보를 강요할 때 사용자는 쉽게 이탈해 버리거나 두려움을 느낀다. 따라서 한 화면에 한 가지 행동만 집중하게 하는 디자인은 매우 단순하지만 강력하다.

개인적으로 한 페이지에서 한 가지 행동에 집중하게 해주는 One thing per page 원칙을 선호한다. 모바일에 익숙하지 않은 사용자로 하여금 행동에 확신을 얻을 수 있고 앱을 사용하는데 편안함을 느낄 수 있게 해주는 것이 중요하기 때문이다.

영국의 모바일 뱅킹 회사인 레볼루트(Revolut)의 회원 등록 과정

One thing per page 원칙은 금융과 관련된 모바일앱에서 쉽게 발견할 수 있다. 그중 UX 디자인이 정말 깔끔하다고 생각했던 앱이 있는데, 영국의 대표적인 모바일뱅킹 앱인 레볼루트(Revolut)의 개인 등록 정보 절차 과정이었다.

최근 대부분의 앱이 소셜 로그인을 유도하는 것과 달리 모바일 뱅킹은 회원가입부터 개인의 상세한 정보가 들어가야 하는 앱 중의 하나다. 따라서 회원가입 시 사용자의 이탈률을 막는 것이 중요한 이슈다.

레볼루트 앱의 회원 가입 과정은 약 열네 단계로 이뤄져 있다. 숫자로만 보면 매우 긴 과정으로 보이지만 One thing per page 원칙을 적용해 쉬운 회원가입을 유도한다.

<그림 8-1>, <그림 8-2>, <그림 8-3>

우선 고객 스스로 입력해야 하는 항목을 최소화하기 위해 자동으로 제공되는 정보들이 많았다. 개인 전화번호를 입력한 후 6 digit code를 입력할 땐 자동으로 번호가 제공되어 왔고(그림 8-1), 집 주소를 적을 땐 전화번호를 기반으로 현재 국가가 자동으로 표시된다(그림 8-2), 이메일을 입력해야 하는 항목 역시 휴대폰에 입력된 이메일 주소가 제공돼 별다른 수고 없이 이메일 입력이 가능하다(그림 8-3).

화면 상단의 바를 통해 회원 가입 절차 진행 과정을 볼 수 있었기 때문에 사용자들은 회원가입 여정을 눈으로 식별할 수 있었다. 필요하지만 건너뛸 수 있는 정보들 역시 한 화면에 하나씩 이해하기 쉽게 전달함으로써 사용자의 이탈을 막기 위해 신경쓰고 있었다.

모든 모바일앱에서 One thing per page 법칙을 적용하기는 힘들다. 적어도 결제 프로세스가 들어가는 과정이나 회원가입을 해야 하거나 개인의 최소한의 정보를 얻어야 하는 상황에선 한 페이지에 한 가지의 행동에 집중하는 것이 필요하며 이런 디자인은 사용자의 이탈률을 낮추거나 결제 구매율을 높이는 좋은 수단이 될 수 있다. 또한 모바일앱에 익숙하지 않은 노년층을 대상으로 하는 앱이라면 더욱더One thing per page원칙을 세우는 것이 좋다.

5. 시각적 일관성을 유지한다

처음 디자인을 할 때 쉽게 하는 실수 중 하나가 디자이너의 욕심을 과하게 반영하는 것이다. 대표적으로 폰트와 색상 디자인을 꼽을 수 있다. 하나의 폰트만 사용하는 것은 너무 밋밋해 보여서 강조할 수 있는 곳에 새로운 폰트를 추가하고 또 추가한다. 하나의 색상만 사용하는 것 또한 디자이너의 손길이 들어간 느낌이 없어서 색을 더하고 또 더한다. 사용할 때는 모든 것이 필요해 보이지만 막상 모든 것을 한 곳에 모아 놓았을 때 매치되기란 쉽지 않다.

옷을 입을 때를 생각해보자. 옷을 잡 입고 못 입는 사람들의 차이는 어떻게 구별할 수 있을까? 나름 패셔너블하다는 사람들의 패션은 한 가지 주제로 통일을 하되 그 속에 포인트를 살리는 패션을 연출하는 사람이 많다. 반대로 옷을 잘 입지 못하는 사람들의 경우, 마음에 드는 모든 패션을 머리부터 발끝까지 장착한다. 나는 잘 느끼지 못하지만 남들은 확연히 느끼게 되는 그런 패션 스타일을 선호하는 사람들. 내 주변에도 그런 사람이 있는가?

모바일앱의 성격에 따라서 다양한 폰트 디자인과 사이즈, 색상이 어울리는 앱이 있을 수 있다. 하지만 내 모바일의 성격이 정보 전달 혹은 일관성을 유지해야 하는 내용을 다룬다면 폰트는 두 개 이상을 넘기지 않는 것이 좋다. 화면을 디자인할 때도 멋진 그래픽을 구현하기 이전에 내 디자인이 얼마나 시각적으로 일관성이 있는지를 고민하고 따져봐야 한다.

6. 친절하고 또 친절하게 반응하자

사용자에게 친절한 앱은 어떤 앱일까? 사용하기 쉬운 앱일 수도 있지만 필요한 상황에 적절한 반응을 보여주는 앱이라고 생각한다. 사용자와 실시간으로 피드백을 주고 받아야 한다.

그 시작은 회원가입에서부터 시작된다. 회원가입을 할 때 내가 등록한 이메일이 올바른 이메일인지, 미리 등록된 이메일이 아닌지를 설명해주는 것은 기본이다. 비밀번호를 생성할 때도 실컷 다 만들어 놓은 비밀번호를 평가해주기보단 실시간으로 비밀번호가 제대로 만들어지고 있다는 것을 알려주는 것이 좋다.

비밀번호를 입력할 때 실시간 반응을 보여주는 것이 필요하다.

물건을 장바구니에 담았을 때 담았다는 신호를 보내거나, 결제를 완료했을 때 완료했다는 신호를 주는 것, 로딩하는 과정에서 로딩 시간을 보여주는 것 역시 사용자 입장에서는 친절한 디자인으로 느낄 수 있다.

7. 에러 메시지를 정확하게 전달한다

우리가 생각하는 UX 디자인은 물 위에 떠 있는 빙산의 모습일 것이다. 하지만 물속에 더 큰 빙산이 있다는 것은 디자인을 마친 후 출시와 운영을 해 본 사람만 느낄 수 있는 세계가 아닐까?

처음 디자인을 할 때는 간과하게 되는 부분 중 하나가 문제가 발생했을 때 대처하는 에러 메시지 디자인이다. 만드는 입장에서는 실수에 대한 생각을 잘하지 못한다. 수개월 동안 디자인했기 때문에 디자인이 완벽해 보이지만 세상에 완벽한 디자인은 없다. 예상치 못하는 순간에 사용자는 실수를 하고 에러 메시지를 경험한다. 그런 순간에 ‘얼마나 적절한 조치를 위트 있게 전달하느냐’는 좋은 디자인을 하는 것보다 중요하다.

OS X의 Human Interface Guideline에서 알림(alert)는 다음과 같이 설명하고 있다.

상황을 명확하고 간결하게 설명할 것.

‘에러가 발생했습니다.’와 같은 알림 메시지는 사용자를 혼란스럽게 만들고 짜증스럽게 만들 수 있다. 결과에 대해서 상세하게 설명하는 유익한 텍스트를 쓰고, 가능한 해결책이나 대안을 제시해야 한다. 왜 사용자가 해당 상황에 대해 신경을 써야 하는지를 설명하기 위해 필요한 정보를 제공해야 한다. 유익한 텍스트는 문제 해결을 위한 선택지를 함께 제공하는 것이 가장 좋다. 모든 것을 사용자의 언어로 표현해야 한다.

많은 회사에서 경고 메시지, 에러 메시지는 프로덕트 매니저나 UX 디자이너, 개발자가 주로 카피를 작성한다. 하지만 구글이나 페이스북, 애플과 같은 글로벌 회사에서는 에러 메시지만 전문적으로 쓰는 UX 라이터가 존재하고 더 많은 기업에서 전문 UX 라이터를 채용하고 있다.

점점 더 많은 회사에서 UX 라이터를 고용하고 있다.

UX 디자이너가 에러 메시지까지 써야 하는 상황이라면 문제에 대해서 최대한 이해하기 쉽고 간결한 메시지를 전달할 수 있어야 한다.

Thomas Fuchs가 쓴 ‘How to write a great error message’에 따르면 에러 메시지를 쓸 때 주의해야 하는 사항은 다음과 같다.

1. 불필요한 정보에 알림 창을 무분별하게 사용하지 말라.
(Don’t abuse alerts for upselling or showing superfluous information. People will stop reading the messages that are actually important.)

2. 사용자가 메시지의 내용을 알고 있다고 섣불리 가정하지 말라. 사용자가 이해하기에 충분한 정보를 항상 포함하라.
(Don’t just assume people know about the context of a message. They might toggle between apps and see your message days after it happened. Always include enough information for users to make sense of it.)

3. 친근하고 비기술적이며 위협적이지 않은 목소리를 사용하라.
(Use a friendly, non-technical, non-threatening tone of voice.)

마치며

지금까지 필자가 추구하는 UX 디자인 원칙을 나눠 소개했다. 위에 언급된 원칙들은 이미 UX 디자인에서 많이 사용되고 있다. 특별할 것도 특이할 것도 없다. 위에 언급된 원칙 외에도 더 많은 UX 원칙이 UX 디자인에 적용된다.

모두가 아는 원칙을 한 번 더 설명을 하는 첫 번째 이유는 나 자신을 위해서다. UX 디자인을 할 때 원칙을 생각하면서 디자인해야 한다는 스스로를 위한 다짐이 크다. 두 번째 이유는 UX 디자인 세계에 입문하는 사람들을 위한 당부이자 부탁의 메시지다. 처음 UX 디자인을 시작하는 디자이너라면 UX 디자인의 ‘디자인’에 집중하기보다는 ‘UX(user centred)-사용자 중심’에 집중해 사용자의 마음을 헤아리고 이해하는 UX 디자이너가 될 수 있기를 바란다.

Author
김현지

김현지

UX 리서처&디자이너. 여행과 글쓰기를 좋아해 3권의 책을 출간하였습니다. 시니어 세대를 위한 직관적인 UI 디자인과 사용자 중심 글쓰기(UX writing)를 좋아합니다. hailey.hjkim2@gmail.com

Comments
© DIGITAL iNSIGHT 디지털 인사이트. 무단전재 및 재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

Related Posts