by
Jan 16. 2023
[UX 스터디] 실무에서 쓰는 UX/UI 용어 정리
내가 나중에 꺼내보려고 만드는 UX/UI 스터디
들어가는 말.
들어가는 말이 길어지면 괜히 읽기 싫어진다는 걸 알면서도 말이 길어진다. 오늘은 UX/UI의 기초라 할 수 있는 용어들을 정리해보았다. 물론 모든 용어를 다 정리할 순 없고, 강의에서 알려준 것만 정리해보려 한다.
Feature(피처)
제품이나 서비스에서 하나의 기능 단위를 뜻하는 단어로, 핵심이 되는 기능을 키 피처(Key Features)라고 지칭한다.
✍낱선의 코멘트
예를 들면, 카카오뱅크와 신한은행을 비교해보자. 신한은행 전체메뉴에서 제공하는 피처는 총 102개다. 들여다보면 법원업무부터 오늘의 운세까지 별별 피처를 다 제공하고 있다. 그중에서 키 피처는 역시나 계좌관리. 송금/입출금을 관리하는 게 가장 핵심적인 피처다. 그외에도 상품 가입 등이 키 피처라고 할 수 있겠다. [쏠야구]나 [우리동네 구경하기]와 같은 서비스는 메인 피처가 아니다.(이렇게 많은 서비스를 제공하고 있는 이유에 대해선 다음 글에서 알아보도록 하겠다. 너무 길어져)
반면, 카카오뱅크 전체메뉴에서 제공하는 피처는 총 42개로, Sol의 반도 안 된다. 사실 그 출발과 지향점이 다르기 때문에 어쩌면 당연한 결과일지도 모른다. Sol이 신한은행의 모든 앱을 통합하기 위해 등장한 앱, 즉 슈퍼앱을 지향하고 있지만 카카오뱅크는 '복잡한 은행 업무를 앱으로 쉽고 간편하게'가 모토다. 2030이 자주 쓰는 핵심 피처를 중심으로 쉽고 간편하게 앱을 구성하는 데 집중했을 것이다. 실제로 이러한 전략이 먹혀 카카오뱅크는 2022년 기준 가입자 1913만 명에 도달했다. 인터넷전문은행 가입자가 3053만 명이라는 걸 감안했을 때 엄청난 규모다. 현재는 영 맥을 못추는 형세지만 카카오뱅크가 IT은행으로서 갖고 있는 위상은 여전히 존재한다. 결국 피처의 개수 역시 사업이 지향하는 바와 일치해야 한다.
그런 의미에서 토스는 어떨까 확인해보니, 피처 개수가 80개가 넘었다. '어라, 토스는 쉬운 금융을 목표로 하지 않았나?'라는 생각이 들었지만 이내 토스의 리브랜딩이 떠올랐다. 기존 토스의 로고는 '공 던지듯 쉬운 금융'이었지만, 모든 금융을 토스 앱으로 해결할 수 있는 방향으로 가고 있는 지금은 '쉬운 금융'보다는 '모든 금융을 쉽게'에 가깝다. 즉, 금융 슈퍼앱으로 나아가겠다는 것. 따라서 그들의 핵심 가치는 '혁신'으로 옮겨갔다. 카카오뱅크가 2030을 타깃으로 한 심플한 금융앱이라면 토스는 '모두'가 이용 가능한 금융 슈퍼앱이 목표다. 그러니 피처의 개수도 차이가 날 수밖에.
Feasibility
X축: 만드는 데 드는 노력 / Y축: 사용자가 느끼는 가치실현 가능성이란 의미로 디자인 -개발 리소스, 기간, 예산 등을 현실적으로 따져보았을 때 실현 가능성이 있는지를 의미한다. 대개는 아이디어가 선정되거나 프로젝트에서 개발해야 하는 피처를 정할 때 팀이 가지고 있는 리소스는 충분한지, 실현 가능한 일정인지 확인하기 위해 사용한다.
대개는 이런 식이다.
PM: Feasibility를 따져봤을 때 이번 프로젝트에서는 A 피처는 빠지는 게 좋겠어요.
개발자: 그럼 B 피처를 넣어야 하는데 기술적으로 구현 가능한지 확인해볼게요.
PM: 네, 개발 가능한지 Feasibility 체크 부탁드려요.
VOC(Voice of Customers)
고객의 목소리라는 듯으로 고객으로부터 접수된 피드백이나 불만, 리뷰 등을 의미한다. 대개는 CS조직이나 마케팅 조직에서 자주 쓰는 말이지만 UX 조직에서 리서치를 위해 VOC를 이용하는 경우도 적지 않다.
UGC(User Generated Content)
사용자가 생성한 콘텐츠를 의미한다. 사용자는 다양한 콘텐츠의 생산과 소비를 통해 서비스에 적극적으로 참여할 수 있고, 이는 다른 사용자들의 서비스에 대한 신뢰로 이끌 수도 있다. 틱톡 콘텐츠나 스타일쉐어의 코디 등이 UGC에 속한다.
Fidelity
Fidelity는 한글로 '충실도'라는 뜻이다. 디자인의 디테일한 정도나 컬러, 폰트 등이 얼마나 최종 디자인에 가까운지(혹은 얼마나 공수를 많이 들였는지)를 나타내는 말이다. 쉽게 말해 앱을 스케치한다 했을 때 얼마나 자세히 묘사하고 표현했는지 정도를 뜻한다. Low Fidelity(줄여서 Lo-Fi)는 최소한의 구성요소는 갖추고 있는 정도로 그림으로 말하면 '크로키' 정도다. 반대로 High Fidelity(줄여서 Hi-Fi)는 완성에 거의 가까운 형태다.
(왼쪽부터) low fidelity, high fidelityWireframe(와이어프레임)
와이어프레임을 통해 아이디어를 표현하거나 피처가 어떤 흐름을 통해 구현되어야 하는지를 표현할 수 있다. 기획단계에서 주로 제작하며, 각 페이지들의 정보와 UI 요소등에 대한 배치를 표현한다. 와이어프레임에 시나리오, 콘텐츠 설명 등이 첨부되면 스토리보드가 된다.
서비스의 대략적인 모습을 모노톤으로 진행한다. 와이어프레임이 중요한 이유는 화면에서의 배치와 정보의 흐름을 보여줄 수 있기 때문에 UI 디자이너나 개발자들이 이를 보고 피드백을 주기도 하고 와이어프레임을 바탕으로 High Fidelity 디자인으로 넘어가기도 한다. 와이어프레임을 통해 UX와 UI가 연결된다.
✍낱선의 코멘트
쉽게 말해서 앱의 설계 도면이다. 앱의 공간 구조와 용도, 공간의 이동 방향과 흐름을 상상할 수 있게 만드는 게 와이어프레임이다. 이걸 예쁘게 만들기 위해 시간을 많이 쓰면 그거야말로 시간 낭비. 대부분은 손그림이나 도형을 통해서만 구현한다. 어차피 와이어프레임이 한 번에 오케이 되는 일은 없고 그때그때 수정해야 하기 때문에 디자인에 공수를 들일 필요는 없다.
Storyboard(스토리보드)
와이어프레임에 시나리오, 플로우, 설명이 추가되면 스토리보드라고 부른다. 와이어프레임이 방향만 알려주고 있다면 스토리보드는 서비스의 각 페이지 구성요소나 콘텐츠의 설명, 페이지 간의 이동 흐름, 로직 등을 기술한 '문서'다. 줄여서 SB라고 부른다. 종종 와이어프레임과 혼용되어서 쓰기도 한다.
출처: RightBrain 블로그Prototype(프로토타입)
서비스에 대한 기능 및 사용성을 등을 테스트하기 위해 제작한 '움직이는' 디자인 시안. 개발자와 디자이너 사이의 시각적인 커뮤니케이션 툴이 되기도 하고 사용성 테스트에 종종 사용된다.
일반적으로 프로토타이핑에 시간을 많이 할애하진 않으나 비 개발, 비 디자이너 직군이어도 어떤 흐름으로 앱이 구동되는지를 볼 수 있어 많이 쓰는 추세다.
프로토타입 툴 - 굉장히 다양하니 필요에 맞게 쓰자Affordance(행동 유도성)
사용자가 제품 또는 서비스를 사용하고자 했을 때 어떻게 사용해야 하는지 즉각 알거나, 디자이너의 의도대로 행동을 유도하는 걸 의미한다. 가장 대표적인 예가 '밀어서 잠금 해제'다.
이전까지 피처폰에 익숙했던 사람들은 이 네모난 하드웨어를 어떻게 사용해야 할지 아마 막막했을 테다. 열면, 밀면 켜졌던 피처폰과 달리 스마트폰은 버튼을 눌렀다고 해서 바로 켜지는 형태는 아니었으니까. '잠금 화면'이 생소했을 것이다. 애플에서는 이를 해결하기 위해 사용자의 행동을 유도하는 장치를 넣어놨다. 마치 오프라인에 있는 버튼처럼 '밀어서 잠금 해제' UI를 심어놓은 것. 이 덕분에 사람들은 잠금해제 인터랙션에 굉장히 빠르게 적응했고 이제는 이런 UI가 없어도 사람들은 바로 화면을 터치하고 슬라이딩 한다. 스위치를 보면 어떻게 불을 켜는지 너무나 자연스럽게 아는 것처럼, 애플의 UI가 우리에게 내재된 스위치를 만들어 준 것.
IA(Information Architecture)
IA 혹은 정보 구조도라고 하는데 제품, 서비스를 구성하는 정보의 구조와 우선순위, 흐름의 설계 등을 포함한다. 서비스 구축의 가장 기초적인 작업이기도 하다. 이 작업을 하지 않고 바로 와이어프레임부터 짜버리면 불필요하게 시간이 낭비될 수 있다. 예를 들면,
UX/UI 디자이너: 저번에 주신 기획 문서 토대로 와이어프레임 만들었어요.
개발자: 어, 채팅이 생겼어요? 우리 채팅 모듈 없는데? 이거 언제까지 개발해야 해요?
와이어프레임부터 만들지 않고 IA만 간단하게 만들었다면 굳이 안 해도 되는 일을 하지 않았을 테다. 채팅 모듈이 없다는 것도 IA 단계에서 알았을 테고.
스포티파이 IAUT(Usability Testing)
말 그대로 사용성 테스트다. 기획/디자인 된 프로덕트를 실제 사용자(혹은 테스터)가 프로덕트를 사용하는 과정에서 불편함 없이 의도대로 사용하여 목적한 바를 달성할 수 있는지 알아보기 위한 과정이다.
✍낱선의 코멘트
UT를 진행할 때 고려해야 할 것은 아래와 같다.
1️⃣ 테스트 목표는 무엇인가?
: 실험하고 싶은 주제 / 명확한 핵심 가설이 있어야 한다. 그리고 이는 사용성 테스트를 통해 측정이 가능해야 한다. 또한 설정한 목표는 이해하기 쉬워야 하며 테스트 결과를 통해 협업이 가능해야 한다.
2️⃣ 어떤 질문을 할 것인가?
: 단순히 "이 앱 써보니 어떠셨어요?" 따위의 질문을 하면 "좋았어요", "별로였어요" 밖에 답이 안 나온다. 질문 퀄리티에 따라 답변이 달라질 수 있으니 반드시, 꼭, UT시에는 질문에 공을 들여야 한다.
3️⃣ 테스트 방식은 어떤 걸로 할 것인가?
: 비대면 / 대면 / 서면 등 다양한 방식으로 UT가 가능하다. 다만 여건만 된다면 대면 방식을 추천한다. 사용자는 자신이 했던 모든 행동을 기억하지 못한다. 따라서 어떤 부분에서 막혔는지, 자기가 꽂힌 게 아니라면 기억하지 못할 확률이 높다. 그때그때 나오는 반응을 체크하는 게 조금 더 효율적이다.
4️⃣ 테스트 대상은 누구인가?
: 타깃 유저와 최대한 동일해야 한다.
Breadcrumbs
빵가루라는 의미로 사용자가 사이트 내에서 현재 어디에 위치했는지 알려준다. 많은 양의 콘텐츠가 수직 구조나 계층 구조로 이루어져 있는 경우, 사용자의 네비게이션을 돕는다. 논리적 계층구조가 없는 단일 레벨 서비스에서는 유효하지 않다. 카테고리도 많고, 하위 카테고리도 많은 아마존 같은 커머스에서 자주 쓰는 UI다.
