brunch

라이킷 61 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by imRachel May 23. 2022

도대체 UX랑 UI가 뭐야? - UX 입문자들을 위해

UX 설계 원칙 기본서

브런치에 첫 포스트로 어떤 글을 쓸까 고민하다가

"UX디자인과 방법론"이라는 주제로 시작해 볼까 합니다.

UX는 모바일의 등장으로 그 중요성이 더 화두가 되면서 사용자들이 서비스를 평가하는 가장 중요한 요소로 자리 잡히고 있습니다. 그러나 HCI(Human Computer Interaction)나 디자인, IT 계통을 전공한 사람이 아니라면 대부분의 사람들을 UX에 대해 정확한 대답을 하기 어렵지 않을까 합니다. 최근 방영한 '나는 솔로 6기'에서도 영숙이 UX 디자이너로 소개되었었는데, 패널들이 그녀의 직업을 생소해하는 것을 보며 "아직도 UX 디자이너는 직무에 대한 부연 설명이 필요하구나"라는 것을 느꼈습니다.

[Index]
01. UX란 무엇인가
02. 인지/인간공학 개념 적용 설계
- 작업 기억 Working Memory
- 인지부하 Congnitive Load
- 심성 모형 Mental Model
- 인간 실수 Human Error

01. UX란 무엇인가

UX(User Experience)
서비스의 최종 접점에 있는 사용자들과 소통하는 모든 접점,
사용자가 서비스나 제품을 사용하면서 느끼게 되는 경험의 총칭

UX란 User Experience의 약자로 사용자가 어떤 서비스나 제품을 사용하면서 느끼게 되는 경험의 총칭을 의미합니다. 일반적으로 사용자가 느끼기에 불편하다고 하면 UX가 떨어진다고 표현하고 편하게 느낀다면 UX가 좋다고 표현합니다.

프로젝트 관리의 현실을 설명할 때 나오는 대표적인 그림

위 그림은 UX가 왜 중요한지에 대해 설명할 때 가장 많이 나오는 그림인데요, 이 그림에서는 다양한 이해 관계자들이 고객의 요구를 듣고 완성한 그네가 나옵니다. 첫 번째 그림부터 우측 하단으로 내려가 볼까요?

1. 고객이 설명한 그네

2. 프로젝트 리더가 이해한 그네

3. 분석가가 디자인한 그네

4. 개발자가 이해한 그네

5. 비즈니스 컨설턴트가 설명한 그네

6. 문서화돼있는 그네

7. 개발이 완료된 그네

8. 고객이 지은 그네

9. 여러 사람에게 도움받아서 완성한 그네

10. 고객이 원했던 진짜 그네

결과적으로 다양한 사람들이 여러 가지 도전을 해봤지만 사용자가 진짜 원했던 그네는 나무에 타이어가 하나 달려있는 마지막 그네였습니다. 실제로 고객들은 자신이 뭐가 필요한지 어떤 것이 문제인지도 잘 인지하지 못하고 있고, 자신이 생각하는 것을 설명하고 전달하는 게 어렵다는 것을 보여주는 것이죠.

즉, 사용자를 연구하고, 리서치를 통해 방법을 찾고 정확하게 개발될 수 있게 하는 게 UX의 역할이라고 할 수 있습니다.

UX = 제품에 대한 총체적 경험 / UI = 그것을 기술과 연결시켜 주는 매개체

위 그림은 사용자 경험, 인터페이스, 그리고 콘텐츠와의 관계를 차와 찻잔으로 표현한 그림입니다. 사용자 경험이라는 것은 찻잔에 담긴 차와 같아서 찻잔과 차가 서로 잘 어울려야 한다는 것입니다.

차는 엄청 맛있는데, 찻잔에 균열이 가 있고, 군데군데 이물질이 보인다면 그때 차를 마시는 경험은 ‘좋은 경험’이라고 할 수 없습니다. 또한 따뜻한 차를 마시려는데, 유리컵에 마시는 것 또한 좋은 경험이라고 할 수는 없겠죠.

그래서 적절한 찻잔에 적절한 수준의 차. 이것이 좋은 사용자 경험의 방법이지 않을까 생각합니다.

흔히 사용자 경험의 약자인 UX를 UI(User Interface)와 혼동하는 경향이 있는데, UI가 사람과 시스템의 접점 또는 채널을 의미하는 반면, UX는 사용자가 제품과 서비스, 회사와 상호작용을 하면서 가지게 되는 전체적인 느낌이나 경험을 말합니다.

즉, UX는 이러한 UI를 통해서 사용자가 느끼는 만족이나 감정을 의미합니다.

출처 : dryad consulting

UX를 둘러싸고 있는 요소로는 그 범위가 대체로 넓은 편인데요, 제품의 외적 디자인뿐만 아니라 사용자와 제품/시스템 간의 상호 작용 방법이나 시각적 디자인, 콘텐츠, 사운드 등 다양합니다.

이러한 요인을 다루는 연구 분야로는 인터랙션 디자인, 인터페이스 디자인, 인간공학 등이 있는데요, 이 모든 분야를 UX 디자이너가 다 알면 좋겠지만 그 학문적 깊이가 워낙 깊고 넓어 전부를 다 익히기에는 사실상 불가능해 보이죠.

그래서 UX 관련 직군들이 집중하는 학문들은 각기 다 다릅니다.

디자이너의 경우 시각적인 요소에 치중하며, 공학적 분야의 경우 그림처럼 조금 더 인간 중심적인, 사람의 본질적인 면에 치중할 것입니다. 한편으로 누군가는 사용자에게 직접 제공되는 정보들에 집중해서 설계할 것입니다.

하지만 모든 직군들에서 공통적으로 생각하는 것은 사용성입니다.

어느 분야를 막론하고 사용성은 UX에서 빼놓을 수 없는 요소입니다.

그래서 제품을 기획할 때 기술적인 것과 심미적인 디자인 요소도 중요하지만, 사용성을 가장 먼저 생각해야 하는 것이 UX직군의 역할이라고 할 수 있습니다.

02. 인지/인간공학 개념

인지/인간공학 개념에 들어가기 앞서, 흥미로운 영상 하나를 공유드리려고 합니다.

눈 뜬 장님? 코앞에서 대화하던 사람이 바뀌어도 눈치 못 채는 이유!

출처 : 내셔널지오그래픽 - National Geographic Korea

위 영상의 상황은 사람의 기억과 관련된 영상이었는데요, 뇌는 주변 세계의 모든 것을 정확히 분석하기보다는 가장 유용한 것을 기억하는 경향이 있다는 것을 보여주고 있습니다.

2.1. 작업 기억 Working Memory

* 기억과 작업 기억

기억은 인간의 작업 기억과 관련이 있는데요, 작업 기억은 단기 기억이 확장된 개념으로 인지 행위가 의식적으로 일어나는 처리체계입니다.

보통 30초라는 짧은 기간 지속되며, 적게는 5개 많게는 9개까지 기억합니다. 예를 들면 32*6을 암산할 때 우리의 뇌 속에서 시각화하고 연산하는 과정이 작업 기억의 대표적인 예입니다.

기억 Momory

- Encoding : 기억 시스템에 정보를 넣는 과정
- Learning : 작업 기억으로 인코딩하는 형태
- Training : 작업 기억에서 장기기억으로 인코딩하는 형태
- Retrieve : 기억에서 정보를 성공적으로 회수하는 것

작업 기억 Working Memory

- 주의를 요구하며, 정보들을 일시적으로 보유하는 단기적 기억(저장고)
- 30초라는 짧은 기간 지속, 7±2개의 용량

* 청킹(Chunking)

일반적으로 전화번호 chunk 했을 때, 외우기가 더 쉽다.

Chunk안의 아이템들은 Long-term Memory 내에서 연관성으로 의해 서로 연결되어 있다.

작업기억은 늘리 수 있도록 하는 것이 중요합니다. 그것을 늘리기 위한 방법 중 하나가 청킹입니다.

전화번호를 하이픈으로 구분했을 때 더 외우기가 쉬우며, 단어를 의미 있는 것들을 묶었을 때 장기 기억으로 갈 수도 있습니다.

청킹 Chunking
하위 레벨의 요소들을 의미적으로 연결하여 정보를 리코딩하는 작업

- 작업 기억 내에 정보를 유지하는 데 있어 중요한 기술
- 문자가 숫자보다 Chunking 하는데 더 용이(문자는 의미적으로 서로 조합할 수 있기 때문)

* Spacial Working Memory & Verbal Working Memory

위치 안내 시 말보다 지도를 보여주는 것이 좋다.

ex) "오리역에서 티맥스 제2 연구소까지 어떻게 가나요?"

또한 어떠한 정보냐에 따라 적절한 방법을 제시하는 것이 중요합니다. 사람 머리에는 그림을 담당하는 기억과 언어를 담당하는 기억이 있습니다. "지도 맵에서 오리역에서 티맥스 제2연구소까지 6번 출구로 나가서 직진하고 꺾으세요." 이렇게 설명하는 것보다 비주얼적으로 보여주는 게 더 효과적입니다.

Spacial Working Memory
아날로그적, 공간적 형태의 정보를 다루는 기억

- 공간적 단기 저장소에서는 Spacial, Visual정보를 제공하는 것이 이상적이다.

Verbal Working Memory
언어 형식의 정보를 대표하며 Vocal 정보 등이 해당

- 언어적 단기 저장소에서는 Speech가 이상적이다. (언어 자료가 짧은 간격으로 제시될 때만 해당)

2.2. 인지 부하 Congnitive Load

* 인지 부하

인지 부하 이론에서는 인간의 뇌는 인지 요구량의 한계가 있다고 말합니다.

좌측 상단의 작업 기억에서 처리할 수 있는 정보의 양이 많으면 인지부하에 문제가 생깁니다.

인지 부하 이론 Congnitive Load Theory

- 학습이나 과제 해결 과정에서의 인지적 요구량
- 작업기억 Working Memory 이 처리해 낼 수 있는 정보의 양보다 처리해야 할 정보가 많으면 문제가 생기며 인지부하가 생김

- 내재적 부하 : 학습 내용과 직접 관련되며 Task의 수와 난이도에서 오는 부하
- Germane 부하 : Task를 학습하는 데 있어 드는 정신적 자원에서 오는 부하
- 외재적 부하 : 학습자에게 정보가 제공되는 방식에서 오는 부하

* Hick's Law

힉의 법칙, BAD UX 사례
1) Subway에 가서 주문을 할 때 주어지는 방대한 양의 선택지

인지 부하와 관련된 이론으로 힉의 법칙이 있습니다. 이는 의사 결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해서 늘어난다는 법칙인데요, 실생활에서 볼 수 있는 나쁜 UX의 예로 서브웨이의 메뉴판이 있습니다. 필자도 서브웨이를 처음 방문했을 때 메뉴의 선택지가 너무 많아서 어떻게 주문해야 할지 어려웠던 경험이 있습니다.

2) 플레이스토어 내 "KB" 검색 결과에 나오는 과도한 앱들

다른 예로는 플레이스토어에 KB를 검색했을 때 아주 다양한 검색 결과가 나오는데요, 선택지의 개수가 많다 보니 원하는 앱을 선택하기까지의 시간이 역시 비례하여 늘어날 것으로 보입니다.

힉의 법칙 Hick's Law

- 사용자에게 주어진 선택 가능한 선택지의 숫자에 따라 사용자가 결정하는 데 소요되는 시간이 결정된다는 법칙
- 옵션이 많을수록 결정을 내리는데 소요되는 시간과 노력이 함께 증가함

* Training

인지 부하를 줄이는 방법

1) Support & Error Prevention

- 사용자가 배워야 할 Task에 대해 도움을 주는 방법

모바일 앱 튜토리얼 이미지 등

2) Part Task Training

- 복잡한 Task를 여러 파트로 분할해 부분적으로 훈련하는 방법

연주가 잘 안되는 부분만 골라서 따로 연습하는 것

3) Adaptive Training(적응 훈련)

- RPG 게임 초반 적응 퀘스트 : 포션 먹기 > 몬스터 사냥 > 아이템 강화/전직 등

하지만 인지부하를 줄이는 방법도 있습니다. 첫 번째로는 트레이닝 방법도 인데요, 모바일 앱이나, RPG 게임 등에서 튜토리얼 이미지 등을 제공하는 방법도 있고, 연주가 잘 안되는 특정 부분만 따로따로 연습하고 합치는 것도 인지부하를 줄이는 트레이닝 방법이라 할 수 있습니다.

훈련 Training

- Working Memory에서 Long-term Memory로 Encoding 하는 것
- Training은 인지 부하로 인해 발생하는 문제를 효율적으로 해결해줌

* Affordance

메타포, 선입견을 활용하여 어포던스를 유도하는 방법

미는 문 vs 당기는 문

메타포 아이콘

훈련 없이도 사용자에게 바로 행동 유도를 해주는 방법도 있습니다. 이것은 트레이닝 방법보다 가장 좋고 직관적인 방법인데요, 문에 미시오/당기시오를 써놓는 것이 아니라 애초에 행동을 유도할 수 있도록 디자인하는 것입니다.

이는 '보인대로 작동한다'라는 이상적인 어포던스를 이용하는 방법으로 모바일 앱 아이콘을 디자인할 때, 학습이 필요한 디자인을 사용하는 것보다 메타포와 선입견을 활용하여 디자인하는 것이 효과적입니다.

<적용 사례>

1) 메신저 앱에서 Text 입력 값이 있을 때 전송 Button 활성화되는 Affordance

필자가 설계한 메신저 앱에서도 적용해보았다.

2) 커머스 앱에서 사용자에게 '리뷰 쓰기' 기능을 유도하는 Affordance

어포던스의 사례로 메신저 앱에서 입력된 텍스트가 있을 때, 전송 버튼을 활성화하는 방법이 있습니다.

또한, 쇼핑 앱에서 주문 취소가 아니라, 리뷰 쓰기 등 유도하고 싶은 동작에 어포던스를 적용하는 방법이 그 예입니다.

인지 부하를 줄이는 Affordance

- 어떤 행동을 유도한다는 뜻으로 행동 유도성으로도 불림
- 이상적인 어포던스 = “보이는 대로 작동한다” : 기억할 정보가 적을수록 작업량이 줄어들기 때문

2.3. 심성 모형 Mental Model

멘탈모델(Mental Model)은 도널드 노먼(Donald A. Norman)이 정의한 UX 요소에서 중요한 개념 중 하나입니다. 이는, 특정한 주제에 대한 사용자의 행동의 친화도(혹은 연관성 있는 항목을 모아놓은 도표)이며 사람들이 하는 행동에 대해 그들과 이야기하고, 패턴을 찾고, 그 패턴을 모두 포괄하는 하나의 모델로 정리하는 일을 뜻합니다.

1) Confidence 디자인의 자신감

서비스와 기능을 설계하는 지침이 됨

2) Clarity 방향의 명확성

사용자와 사업 측면에서 올바른 의사결정을 내릴 수 있게 함

3) Continuity 전략의 연속성

비전과 사업 기회가 오래 지속되도록 해줌

* Recall & Recognition

Q) 어디서 많이 들어본 음악 아닌가요?

영화 올드보이의 한 장면, 여기서 음악과 만두는 Cue의 역할!

올드보이라는 영화를 접한 사람은 음악과 만두를 단서로 그 영화를 떠올릴 수 있는데요, 기억을 인출시키는 방식에는 회상과 재인이 있습니다.

회상은 아무런 단서 없이 끄집어내서 기억할 수 있는 것. 즉, 주관식과 같다고 볼 수 있으며, 재인은 단서를 접한 상태에서 그것을 인지했는지를 확인하는 방법으로 쉽게 객관식이라고 생각하시면 됩니다.

회상 Recall : 저장되어 있는 기억에서 정보를 추출하는 것
재인 Recognition : 내가 보거나 들은 것 / 보거나 듣지 못한 것으로 아이템들을 분류하는 것

- 정보를 Recall하지 못하더라도 Recognize 할 수 있음
- “Cue”를 제공해주면 Recall을 보다 쉽게 할 수 있음

회상이 아닌, 재인을 통해라!

카카오톡 UI가 너무 익숙하기 때문에, 새로운 메신저 앱을 써도 “아 이거 아는 UI/어플이야, 사용해본 서비스야”하고 바로 사용할 수 있다.

좌측 : 카카오톡 / 우측 : 카카오워크

일반적으로 사용자에게 정보를 제공할 때 회상보다는 재인의 방법이 더 좋습니다.

예를 들면 2020년에 카카오워크가 출시되었는데, 카카오톡과 매우 유사한 레이아웃, 아이콘, 폰트 등을 사용하고 있었습니다. 이는 대부분의 사람들이 카카오톡이 너무 익숙하기 때문에, 새로운 앱이지만 사용자에게 친숙하게 다가갈 수 있도록 하는 재인을 고려한 디자인을 했다고 볼 수 있습니다.

<적용 사례>

WAPL 메신저의 ‘미리 알림’ 기능

- Recall & Recognition 개념을 활용해 사용자의 편의를 높임

필자가 설계한 Tmax 와플 또한 기존 메신저 UI와 매우 유사하게 디자인 된 것도 회상과 재인 개념을 활용해 사용자의 편의성을 높인 사례라고 할 수 있습니다.

2.4. 인간 실수 Human Error

좌측 그림 : 이렇게 쓰여있길래 당연히 손 소독제인 줄 알고 손에 쭉 짰다. 시럽이었다. 아르바이트생이 기겁을 하고 날 쳐다봤고 난 손 씻고 오는 길이다.

위 그림들은 인간 실수, 휴먼 에러에 대한 예시입니다. 휴먼 에러는 언제나 발생할 수 있는 것이기 때문에 이를 예방할 수 있는 가이드를 제공해주어야 합니다. 위 우측 그림은 파일을 삭제하기 전에 휴지통으로 이동하거나, 복원할 수 없는 경우 사전 확인 팝업을 주는 것이 휴먼에러를 고려한 설계의 예인데요, 개인적으로 좋았던 경험은 구글 드라이브에서 파일을 삭제했을 때 제공해주는 피드백 메시지에서 실행 취소를 할 수 있도록 해주는 것이었습니다. 이를 보고 상당히 친절하고 사용자에게 너그러운 설계라고 생각했던 경험이 있네요.