04. UI설계에 필요한 용어들-1
Prologue
실무자들간의 빠르고 스무스한 소통을 위해서, 회의 시 오가는 대화를 한 번에 알아듣고 정리하기 위해서, 아이디어 향상을 위해서 웹/앱 UI 설계 시 사용되는 용어들을 (아는 선에서) 총정리 해보려 한다.
01. UX/UI/GUI
02. 서비스의 시작. 스플래시/튜토리얼/온보딩/코치마크...
03. 적응형/ 반응형
01. UX/UI/GUI
UX: User Experience 사용자 경험
UI: User Interface 사용자(가 마주하는) 화면
GUI: Graphical User Interface 사용자(가 마주하는) 화면의 그래픽요소
CX: Costomer Experience 고객 경험
UXUI 디자이너 또는 프로덕트 디자이너라고 하면 UX,UI,GUI 모두를 아우를 수 있는 직군이긴 하다. 큰 규모의 회사인 경우 세부적으로 인력을 따로 배치할테지만 나같은 스타트업이나 인력이 부족한 경우 보통 경계없이 다 하는 경우가 부지기수이다...
출처 본인UX는 User Experience, 즉 사용자가 이 프로덕트에 대해 겪는 모든 경험이고 UX 디자이너는 이 사용자 경험을 설계하고 사용성을 개선하는 사람이다. UX는 소프트웨어 시스템 뿐만 아니라 제품 디자인에도 적용되는 개념이다. 고객이 우리 서비스나 제품을 이용하는 동안 부정적인 경험을 겪지 않도록 고객의 피드백을 수집해 분석하고 개선해서 서비스를 발전시키는 일을 한다.
예를 들면 넷플릭스에서 콘텐츠를 고르지 못하고 방황하는 시간이 늘어나는 '넷플릭스 증후군'이 생기자 서비스 내에 랜덤 콘텐츠를 지정해주는 기능을 추가한 경우나, 실내에서 향초를 태우는 동안 연기가 발생해 기관지에 해롭다는 문제가 발견되자 향초브랜드에서 연기가 발생하지 않도록 열로 향초를 녹이는 '캔들워머'를 함께 판매하는 경우 등, 모든 브랜드 발전의 시초는 해당 제품의 UX를 담당하는 누군가의 결과물이다.
UI는 User Interface, 사용자가 시각적으로 마주하는 시스템의 외형이나 레이아웃, 구조 등이다.
IT분야에서 UX와 UI는 뗄레야 뗄 수 없는 관계이다. 그래서 보통 둘을 붙여 'UXUI'라고 부른다. 사용자 경험(UX)을 개선하려면 그 전에 사용자가 마주하는 인터페이스(UI)를 개선해야 경험에 변화가 생기기 때문이다. 넷플릭스에서 랜덤콘텐츠 화면을 추가하거나 향초브랜드에서 라이터나 성냥 대신 워머로 도구를 변경한 경우에는 추가된 화면디자인과 캔들워머가 UI가 되는 것이다.
UI설계에는 '왜?'가 중요하다. 내가 이 요소를 왜 이 공간에 이런 방식으로, 이런 경로로 배치했는지 사용성을 근거로 타당하게 설명할 수 있어야 한다. ("그냥요...", "다들 그렇게 하던데요...?" 를 이유로 들지는 않기를 바란다.) 따라서 UI를 기획하려면 UX 기획이 전제조건이 되어야 한다. 근거에 의해 와이어프레임과 프로토타입을 설계하는 일까지 UI디자이너의 업무이다.
GUI는 브랜딩과 깊게 연관되어 있다. UX/UI에 비해 상대적으로 기능이나 사용성 보다는 심미성이 중요한 포인트이다.
'CTA버튼은 R12정도로 둥글게', '이 콘텐츠는 좌측정렬로, 폰트는 Noto sans로' 등 UI를 브랜드 이미지에 맞게, 보기좋게 다듬고 꾸미는 작업을 의미한다. 일반적으로 상상할 수 있는 앱/웹 디자인에 해당한다.
서비스의 디자인 가이드를 구축하는 것 뿐만 아니라 서비스에서 사용되는 배너나 썸네일 등 그래픽 요소를 통해 룩앤필(look&feel)을 정립하는 것까지 아우르는 개념이다.
02. 서비스의 시작
스플래시: 모바일 앱 실행 시 나타나는 첫 화면. 주로 앱/브랜드 소개나 로고 또는 로딩 진행율을 담는다.
워크쓰루/온보딩: 앱 초기 진입 시 몇 단계를 걸쳐 상세한 도움말을 제공하는 것
코치마크: 신규 사용자를 위해 화면 위에 반투명한 레이어를 덮어 메뉴를 설명하는 것
튜토리얼: 신규 사용자를 위해 사용방법을 화면에 심어놓아 체험을 통해 학습시키는 것
스플래시는 앱을 켜자마자 나타나는 첫 화면이다.
앱이 로딩되는 동안 기본 로딩화면을 대체하는 용도로 쓰이며, 대부분 로고나 브랜드 컨셉이미지, 자체 디자인된 로딩 진행율 등이 제공된다.
네트워크 환경이 원활한 경우 노출되는 시간이 1~2초 내지로 짧긴 하지만 앱의 첫인상을 좌우하는 위치에 있기 때문에 쉬이 넘길 수도 없는 영역이다. 로딩되는 시간 내내 스플래시 화면을 노출시킨 뒤 완전히 로딩된 홈 화면으로 진입하는 서비스도 있고, 스플래시 화면은 아주 짧게 넘기거나 생략한 뒤 플레이스 홀더로 대체하여 로딩하는 서비스(유튜브 등)도 있다. 어떤 방식이 좋고 나쁜 게 아니기 때문에 필요에 따라 다르게 선택하면 되지만 개인적으로는 첫인상을 인상적으로 남기기 위해 스플래시 화면을 활용하는 것을 선호한다.
서비스의 특징과 정체성을 압축적으로 표현하는 공간이기도 하기 때문에, UI 디자인이 완료된 마지막 단계에서 스플래시 화면을 다시 한 번 점검하는 것을 추천한다.
워크쓰루/온보딩은 상세한 설명이 필요할 때 사용되는 도움말이다.
' 온보딩' 이라는 단어는 신입사원이 새로운 직장에 적응 할 수 있도록 돕는다는 뜻이다. 고로 UI에서는 새로운 사용자가 새로운 서비스에 적응할 수 있도록 돕는 역할을 한다는 것을 의미한다. 워크쓰루는 온보딩보다 작은 범위로 포함되는 개념이며, 온보딩 방법 중 여러 페이지에 사용방법을 적어 안내하는 방식을 의미한다. 워크쓰루가 가장 널리 사용되는 방법이지만 그 외에도 샘플 파일을 제공(워드, 프로크리에이터 등) 하는 방법 등 서비스 특성에 따라 다르게 사용된다. 개념 상으로는 튜토리얼과 코치마크도 온보딩에 속한다고 볼 수 있지만 실무에서는 거의 워크쓰루와 온보딩이 동일시되는 듯 하다.
'콴다'의 코치마크 화면코치마크는 신규 사용자를 위해 화면 위에 반투명한 레이어를 덮어 메뉴를 설명하는 방식이다.
한 문장으로 설명할 수 있는 간단한 내용으로 메뉴의 기능이나 위치를 안내하는 역할을 한다. 생소한 아이콘이 사용되거나 사용자가 버튼의 위치를 빠르게 찾기 어려울 것이라고 판단될 때 사용된다. 하지만 베스트는 이런 코치마크를 사용하지 않고도 사용자가 기능을 인식할 수 있도록 UI를 설계하는 것이 가장 좋다. 뭐든 설명이 과하면 촌스럽다.
튜토리얼은 게임에서 많이 사용되는 방식인데, 신규 사용자가 직접 기능을 체험하면서 배우도록 설명하는 방식이다.
보통 복잡한 기능을 요하는 디자인 툴이나 게임에서, 간단한 설명만으로는 사용자를 이해시키기 어려울 때 사용된다. 튜토리얼은 사용자에게 '우리 서비스 공부하세요' 하는 느낌이 강하기 때문에 '학습'에 치중하게 되면 이탈율이 증가할 수 있다. 따라서 이 단계를 긍정적인 경험으로 인식시키는 것이 중요하다. 튜토리얼을 완료한 사용자에게 클리어 보상을 제공한다던지 (보상이 필요없는 서비스라면 칭찬이라도...) 사용자가 중간에 길을 잃고 혼자 남겨진 기분이 들지 않도록 자연스러운 동선과 흐름을 쉬운 언어로 제공하는 방법 등이 있다.
튜토리얼과 관련하여 재미있는 가설 검증 사례를 발견하여 함께 공유한다.
03. 반응형과 적응형
반응형: 하나의 디자인으로 모바일/태블릿/데스크탑에 모두 적용할 수 있는 방식
적응형: 모바일/태블릿/데스크탑 별로 독립적인 디자인이 필요한 방식
반응형은 같은 디자인으로 모든 기기에 대응할 수 있는 웹 형식이다. 다양한 디바이스에서 동일한 경험을 줄 수 있다. 모든 해상도에 대응해야 하기 때문에 초기 설계 단계과정에서 시간이 오래 소요되며 디자인/개발 작업 시에는 절대적인 수치인 px이 아니라 상대적 수치인 em,rem,% 를 사용해야 한다. 지금 이 글을 PC로 읽고 있다면 반응형웹인 구글과 샌드박스 사이트를 들어가 브라우저 창 크기를 조절해보자. 사용자가 늘렸다가 줄였다가 조절하는 대로 화면 잘림없이 레이아웃이 조정되는 모습을 확인할 수 있을 것이다.
반면 적응형은 모바일/태블릿/데스크탑 별로 별개의 디자인 작업이 필요하다. 모든 해상도 별로 디자인할 필요까지는 없고 흔히 브레이크 포인트를 잡아서 3가지(모바일/태블릿/데스크탑)로 작업한다. 브레이크 포인트는 모바일에서 태블릿으로 전환되는 기점(768px~), 태블릿에서 데스크탑으로 전환되는 기점(1280px~)의 해상도 기준을 의미한다. 적응형 사이트 중 흔히 알고 있는 곳이 네이버이다. 이런 적응형 웹은 각각의 디자인에 맞는 링크가 독립적으로 만들어져 있기 때문에 모바일로 전환되었을 경우에는 'm.naver.com', 데스크탑으로 전환되었을 경우에는 'www.naver.com' 로 url이 변경되는 모습을 확인할 수 있다.
<브레이크 포인트>
Mobile S – 320px
Mobile M – 375px
Mobile L – 425px
Tablet – 768px
Laptop – 1024px
Laptop L – 1440px
4K – 2560px
이쯤되면 '그럼 무조건 디자인을 한 번만 해도 되는 반응형으로 해야겠네.' 라고 생각할 수도 있다.
그건 또 아니다.
반응형과 적응형은 결정적으로 로딩속도에서 차이가 난다. 반응형의 경우 모바일로 진입하든, 태블릿으로 진입하든, PC로 진입하든 상관없이 모든 경우에 필요한 리소스를 한 번에 다운받는다. 때문에 로딩 속도가 느리다. 반대로 적응형은 사용자가 진입한 디바이스에 맞는 리소스만 그 때 그 때 다운로드된다. PC사이즈로 진입하면 해당 버전에 필요한 콘텐츠만 다운받고, 창 크기가 줄어들면서 다른 디바이스로 감지되면 모바일에 필요한 리소스만 추가로 다운받는 식이다. 반응형보다 1회당 로딩속도가 빠를 수 밖에 없다. 네이버는 포털사이트이기 때문에 한 페이지에 많은 리소스가 요구된다. 따라서 로딩속도가 빠른 적응형 웹을 선택한 것으로 보인다.
서비스 특성에 맞춰 선택하면 된다.
*2년차 신입디자이너의 지식을 바탕으로 작성되었습니다.
