여러분, 제목을 보고 흠칫하셨나요? 해당 제목은 영화 <타짜>에 출연하신 김응수 배우님의 대사인 “묻고 더블로 가”를 오마주한 것인데요. 제목에서도 알 수 있듯이 오늘의 DT용어집 주제는 UX와 UI입니다. UX로 묻고(ask) UI로 가보자고요!☝🏻 평소에 자주 듣는 용어지만, 둘의 차이점을 잘 모르시는 분도 계실 텐데요.🤔 바로 오늘 UX와 UI의 차이점을 낱낱이 파헤쳐보도록 하죠. (잠깐! 저번 뉴스레터에서 텍스트 크기가 작다고 남겨주신 구독자분이 계셨습니다. 글씨가 작아 보기 불편하신 분은 우측 상단의 ‘💻웹으로 더 크게 보기’를 눌러주세요! 👀)
비전공자를 위한 DT용어 모음.zip 9월의 용어 '사용자 경험(UX)과 사용자 인터페이스(UI)' 같은 듯 다른 듯한 UX와 UI, 확실하게 알아보기!🔎 -에이블런 리사 드림💌 |
💬 UX와 UI가 정확히 뭐야?
사전적 정의📕: 먼저 UX부터 알아볼게요. ‘사용자 경험(User eXperience, UX)’이라는 뜻으로 사용자가 어떤 시스템, 제품, 서비스를 직·간접적으로 이용하면서 느끼고 생각하게 되는 지각과 반응, 행동 등의 총체적 경험을 말해요. 이번엔 UI를 알아볼게요. ‘사용자 인터페이스(User Interface, UI)’라는 뜻으로, 기계 또는 시스템을 사람이 쉽게 이용할 수 있도록 도와주는 구성을 말하죠. (출처: 지식백과)
더 쉽게 말해줘😠: 스마트 워치⌚를 예시로 UX와 UI를 살펴보도록 해요. 스마트 워치에 대한 UX는 무엇일까요? 여러분이 온라인 매장이나 오프라인 매장에서 스마트 워치를 구매하는 행동, 구매한 스마트 워치를 언박싱하는 느낌, 스마트 워치에 설치한 러닝 앱을 사용할 때 느끼는 만족이나 불편 등 사용자가 경험하는 모든 행동, 느낌, 감정 등이 UX에 포함됩니다. 그렇다면 스마트 워치에 대한 UI는 무엇일까요? 가독성이 좋은 채도 및 폰트와 직관적인 아이콘, 간편 검색이 가능한 검색창 뿐만 아니라 홈 탭을 2번 누르면 최근 사용한 앱이 뜨는 반응형 기술 등 기기와 사용자가 서로 상호작용할 수 있도록 연결하는 과정 등이 UI에 포함됩니다.
💬 UX와 UI, 뭐가 달라?
사진 출처 : 이상한 변호사 우영우(ENA)
여러분, 기러기 토마토 스위스 인도인 별똥별 우영우🐳를 아시나요? 위 2장의 사진은 <이상한 변호사 우영우>의 한 장면인데요. 그런데, 갑분우(갑자기 분위기 우영우)?🤷🏻♀️🤷🏻♂️ 우영우에 등장하는 팽나무🌳 이야기로 UX와 UI의 차이점을 쉽게 이해할 수 있기 때문이죠!
우영우를 처음 보시는 분들을 위해 잠깐 드라마 내용을 설명해 볼게요. 어느 한 마을🏡이 반으로 쪼개질 위기에 처하는데요. 수도권과 지방을 연결하기 위해 제작될 ‘행복로’가 마을🏡을 관통할 예정이기 때문이죠. 바로 왼쪽 사진의 빨간 직선처럼요! 그렇다면, ‘행복로’를 건설하기 위해서는 마을을 관통할 수밖에 없는 걸까요? 건축 전문가들🧱은 곡선 도로나 도로 지하화와 같이 충분히 다른 대안이 있다고 말한 반면, 토지 전문가들⌛은 왼쪽 사진의 빨간 직선처럼 마을을 관통하는 도로가 최선의 선택이라고 보았어요. 여기서 잠깐!🖐🏻 바로 이러한 상황을 빗대어 UX와 UI의 차이점을 명확히 이해할 수 있는데요!
먼저, 건축 전문가들🧱의 의견은 UX와 비슷해요. 가장 빠르게 건설 가능하고 비용이 저렴한 빨간 직선 도로 대신, 조금 더 시간이 걸리고 비용이 드는 곡선 도로나 도로 지하화를 선택했어요. 하지만, 마을🏡이 반으로 쪼개지지 않은 덕분에 보물인 팽나무🌳를 보존했고, 마을 사람들의 유대감도 유지할 수 있었죠! (마을의 보물인 팽나무🌳는 상단의 오른쪽 사진에서 확인할 수 있어요) 즉, UX는 사용자의 경험이나 목표를 바탕으로 만족스러운 경험을 제공하는 것을 목표로 합니다.
반면, 토지 전문가들⌛의 의견은 UI와 비슷해요. 조금 더 시간이 걸리고 비용이 드는 곡선 도로나 도로 지하화가 아닌 가장 빠르게 건설 가능하고 비용이 저렴한 마을을 관통하는 빨간 직선 도로를 선택했어요. 사용자의 경험이나 목표보다는 더욱 빠르고 편리하게 도로를 이용할 수 있도록 디자인하는 것에 초점을 맞춘 것이죠. 즉, UI는 사용자가 보편적으로 편하게 사용할 수 있도록 제작하여 그들의 사용에 불편함이 없는 것을 목표로 합니다.
💬 UX와 UI, 무슨 관계야? 👬
UX와 UI는 모두 사용자를 위한 최상의 제품을 제공하기 위해 적용된다는 공통점이 있습니다. 그렇다면, UX와 UI는 무슨 관계일까요? 👬 바로 서로 상호작용을 하는 관계라고 정의할 수 있는데요! 먼저 사용자 경험인 UX를 통해 그들의 경험이나 목표를 파악할 수 있으며, 이러한 목표를 바탕으로 사용자 인터페이스인 UI를 업그레이드 시킬 수 있죠. UI가 업그레이드 된다면, UX에 대한 만족도가 상승하는데요. 이러한 UX 만족도의 상승은 UI의 업그레이드에 영향을 미치게 되죠. 즉, UX로 묻고(ask) UI로 가는 관계인 것이죠☝🏻
💬 UX/UI, 최신 트렌드를 살펴보자!
1. 편리하게 구매할 수 있는 환경을 만들기 위해 UI·UX를 개편한 신라면세점 🏬
신라면세점은 포스트 코로나 시대를 준비해 이용자환경·이용자경험(UI·UX) 측면에서 쇼핑환경을 개선했는데요. 고객의 구매 및 검색 이력을 바탕으로 고객이 선호할 만한 상품을 맞춤 추천하고, 고객의 쇼핑에 편리함을 더해주는 개인화 메시지 기능도 도입했죠. 또한 상품 결제 화면도 간소화했는데요. 한 화면에서 상품 확인부터 적립금 및 혜택 적용, 결제까지 한 번에 진행될 수 있도록 제작했어요.
전문 바로보기: 신라면세점, 인터넷면세점 새단장...'내국인 고객 잡기'
2. 고품질 시청 경험을 제공하기 위해 UI·UX를 개편한 LG헬로비전 📺
LG헬로비전은 클라우드 기반의 UI·UX 적용으로 화질과 속도를 동시에 개선해 모든 시청자에게 고품질의 시청 경험을 제공할 예정인데요. 클라우드∙빅데이터∙AI 등 복잡한 구조는 눈에 띄지 않고, 콘텐츠 중심으로 심플한 UI∙UX를 제공하는 것이 특징입니다. 또한 개인별 취향에 맞춘 콘텐츠 추천 기능과 원하는 콘텐츠와 서비스에 바로 진입 가능한 '브릿지홈' 기능도 확대 되었죠. 뿐만 아니라 직관적인 메뉴 구성으로 리모컨으로 좌우를 이동해야 전체 메뉴 확인이 가능했던 기존 가로형 메뉴에서 주요 서비스와 전체 메뉴를 한 눈에 볼 수 있도록 세로형으로 변경했어요.
전문 바로보기: '콘텐츠 탐색 편리하게'...LG헬로비전, 헬로tv UI·UX 개편
3. 충성 고객을 확보하기 위해 UI·UX 구성한 티몬 🛒
티몬은 새로운 형태의 입점 파트너 채널인 ‘브랜드홈’을 공식 론칭했는데요. 먼저 채널 배경에는 브랜드 철학이 담긴 영상의 반복재생을 지원하고, 주요 메뉴의 색상 역시 브랜드 컬러에 맞춰 조정할 수 있도록 했습니다. 또한 고객 관심이 높은 상품 리뷰를 전면으로 가져왔고, 자사의 상품 구매에 활용할 수 있는 전용 쿠폰을 파트너가 자체 발급할 수 있도록 했습니다.
전문 바로보기: 티몬, 새로운 마켓 플레이스 ‘브랜드홈’ 론칭
이번주 에이블레터 어떠셨나요?
좋았어요😁 아쉬웠어요😕
지난 <DT 용어집> 다시 보기
BI로 데이터 낭비, 이제 그만! ✋🏻
이 뉴스레터 공유해주기💌
교육서비스 경험을 혁신하는 에이블런입니다. 📣
● 비전공자를 위한 데이터 활용교육 > ABLEARN
● 1인 교육담당자를 위한 온라인 교육지원서비스 > &SPACE
여러분, 제목을 보고 흠칫하셨나요? 해당 제목은 영화 <타짜>에 출연하신 김응수 배우님의 대사인 “묻고 더블로 가”를 오마주한 것인데요. 제목에서도 알 수 있듯이 오늘의 DT용어집 주제는 UX와 UI입니다. UX로 묻고(ask) UI로 가보자고요!☝🏻 평소에 자주 듣는 용어지만, 둘의 차이점을 잘 모르시는 분도 계실 텐데요.🤔 바로 오늘 UX와 UI의 차이점을 낱낱이 파헤쳐보도록 하죠. (잠깐! 저번 뉴스레터에서 텍스트 크기가 작다고 남겨주신 구독자분이 계셨습니다. 글씨가 작아 보기 불편하신 분은 우측 상단의 ‘💻웹으로 더 크게 보기’를 눌러주세요! 👀)
비전공자를 위한 DT용어 모음.zip 9월의 용어
'사용자 경험(UX)과 사용자 인터페이스(UI)'
같은 듯 다른 듯한 UX와 UI, 확실하게 알아보기!🔎
-에이블런 리사 드림💌
💬 UX와 UI가 정확히 뭐야?
사전적 정의📕: 먼저 UX부터 알아볼게요. ‘사용자 경험(User eXperience, UX)’이라는 뜻으로 사용자가 어떤 시스템, 제품, 서비스를 직·간접적으로 이용하면서 느끼고 생각하게 되는 지각과 반응, 행동 등의 총체적 경험을 말해요. 이번엔 UI를 알아볼게요. ‘사용자 인터페이스(User Interface, UI)’라는 뜻으로, 기계 또는 시스템을 사람이 쉽게 이용할 수 있도록 도와주는 구성을 말하죠. (출처: 지식백과)
더 쉽게 말해줘😠: 스마트 워치⌚를 예시로 UX와 UI를 살펴보도록 해요. 스마트 워치에 대한 UX는 무엇일까요? 여러분이 온라인 매장이나 오프라인 매장에서 스마트 워치를 구매하는 행동, 구매한 스마트 워치를 언박싱하는 느낌, 스마트 워치에 설치한 러닝 앱을 사용할 때 느끼는 만족이나 불편 등 사용자가 경험하는 모든 행동, 느낌, 감정 등이 UX에 포함됩니다. 그렇다면 스마트 워치에 대한 UI는 무엇일까요? 가독성이 좋은 채도 및 폰트와 직관적인 아이콘, 간편 검색이 가능한 검색창 뿐만 아니라 홈 탭을 2번 누르면 최근 사용한 앱이 뜨는 반응형 기술 등 기기와 사용자가 서로 상호작용할 수 있도록 연결하는 과정 등이 UI에 포함됩니다.
💬 UX와 UI, 뭐가 달라?
사진 출처 : 이상한 변호사 우영우(ENA)
여러분, 기러기 토마토 스위스 인도인 별똥별 우영우🐳를 아시나요? 위 2장의 사진은 <이상한 변호사 우영우>의 한 장면인데요. 그런데, 갑분우(갑자기 분위기 우영우)?🤷🏻♀️🤷🏻♂️ 우영우에 등장하는 팽나무🌳 이야기로 UX와 UI의 차이점을 쉽게 이해할 수 있기 때문이죠!
우영우를 처음 보시는 분들을 위해 잠깐 드라마 내용을 설명해 볼게요. 어느 한 마을🏡이 반으로 쪼개질 위기에 처하는데요. 수도권과 지방을 연결하기 위해 제작될 ‘행복로’가 마을🏡을 관통할 예정이기 때문이죠. 바로 왼쪽 사진의 빨간 직선처럼요! 그렇다면, ‘행복로’를 건설하기 위해서는 마을을 관통할 수밖에 없는 걸까요? 건축 전문가들🧱은 곡선 도로나 도로 지하화와 같이 충분히 다른 대안이 있다고 말한 반면, 토지 전문가들⌛은 왼쪽 사진의 빨간 직선처럼 마을을 관통하는 도로가 최선의 선택이라고 보았어요. 여기서 잠깐!🖐🏻 바로 이러한 상황을 빗대어 UX와 UI의 차이점을 명확히 이해할 수 있는데요!
먼저, 건축 전문가들🧱의 의견은 UX와 비슷해요. 가장 빠르게 건설 가능하고 비용이 저렴한 빨간 직선 도로 대신, 조금 더 시간이 걸리고 비용이 드는 곡선 도로나 도로 지하화를 선택했어요. 하지만, 마을🏡이 반으로 쪼개지지 않은 덕분에 보물인 팽나무🌳를 보존했고, 마을 사람들의 유대감도 유지할 수 있었죠! (마을의 보물인 팽나무🌳는 상단의 오른쪽 사진에서 확인할 수 있어요) 즉, UX는 사용자의 경험이나 목표를 바탕으로 만족스러운 경험을 제공하는 것을 목표로 합니다.
반면, 토지 전문가들⌛의 의견은 UI와 비슷해요. 조금 더 시간이 걸리고 비용이 드는 곡선 도로나 도로 지하화가 아닌 가장 빠르게 건설 가능하고 비용이 저렴한 마을을 관통하는 빨간 직선 도로를 선택했어요. 사용자의 경험이나 목표보다는 더욱 빠르고 편리하게 도로를 이용할 수 있도록 디자인하는 것에 초점을 맞춘 것이죠. 즉, UI는 사용자가 보편적으로 편하게 사용할 수 있도록 제작하여 그들의 사용에 불편함이 없는 것을 목표로 합니다.
💬 UX와 UI, 무슨 관계야? 👬
UX와 UI는 모두 사용자를 위한 최상의 제품을 제공하기 위해 적용된다는 공통점이 있습니다. 그렇다면, UX와 UI는 무슨 관계일까요? 👬 바로 서로 상호작용을 하는 관계라고 정의할 수 있는데요! 먼저 사용자 경험인 UX를 통해 그들의 경험이나 목표를 파악할 수 있으며, 이러한 목표를 바탕으로 사용자 인터페이스인 UI를 업그레이드 시킬 수 있죠. UI가 업그레이드 된다면, UX에 대한 만족도가 상승하는데요. 이러한 UX 만족도의 상승은 UI의 업그레이드에 영향을 미치게 되죠. 즉, UX로 묻고(ask) UI로 가는 관계인 것이죠☝🏻
💬 UX/UI, 최신 트렌드를 살펴보자!
1. 편리하게 구매할 수 있는 환경을 만들기 위해 UI·UX를 개편한 신라면세점 🏬
신라면세점은 포스트 코로나 시대를 준비해 이용자환경·이용자경험(UI·UX) 측면에서 쇼핑환경을 개선했는데요. 고객의 구매 및 검색 이력을 바탕으로 고객이 선호할 만한 상품을 맞춤 추천하고, 고객의 쇼핑에 편리함을 더해주는 개인화 메시지 기능도 도입했죠. 또한 상품 결제 화면도 간소화했는데요. 한 화면에서 상품 확인부터 적립금 및 혜택 적용, 결제까지 한 번에 진행될 수 있도록 제작했어요.
전문 바로보기: 신라면세점, 인터넷면세점 새단장...'내국인 고객 잡기'
2. 고품질 시청 경험을 제공하기 위해 UI·UX를 개편한 LG헬로비전 📺
LG헬로비전은 클라우드 기반의 UI·UX 적용으로 화질과 속도를 동시에 개선해 모든 시청자에게 고품질의 시청 경험을 제공할 예정인데요. 클라우드∙빅데이터∙AI 등 복잡한 구조는 눈에 띄지 않고, 콘텐츠 중심으로 심플한 UI∙UX를 제공하는 것이 특징입니다. 또한 개인별 취향에 맞춘 콘텐츠 추천 기능과 원하는 콘텐츠와 서비스에 바로 진입 가능한 '브릿지홈' 기능도 확대 되었죠. 뿐만 아니라 직관적인 메뉴 구성으로 리모컨으로 좌우를 이동해야 전체 메뉴 확인이 가능했던 기존 가로형 메뉴에서 주요 서비스와 전체 메뉴를 한 눈에 볼 수 있도록 세로형으로 변경했어요.
전문 바로보기: '콘텐츠 탐색 편리하게'...LG헬로비전, 헬로tv UI·UX 개편
3. 충성 고객을 확보하기 위해 UI·UX 구성한 티몬 🛒
티몬은 새로운 형태의 입점 파트너 채널인 ‘브랜드홈’을 공식 론칭했는데요. 먼저 채널 배경에는 브랜드 철학이 담긴 영상의 반복재생을 지원하고, 주요 메뉴의 색상 역시 브랜드 컬러에 맞춰 조정할 수 있도록 했습니다. 또한 고객 관심이 높은 상품 리뷰를 전면으로 가져왔고, 자사의 상품 구매에 활용할 수 있는 전용 쿠폰을 파트너가 자체 발급할 수 있도록 했습니다.
전문 바로보기: 티몬, 새로운 마켓 플레이스 ‘브랜드홈’ 론칭
이번주 에이블레터 어떠셨나요?
좋았어요😁 아쉬웠어요😕
지난 <DT 용어집> 다시 보기
BI로 데이터 낭비, 이제 그만! ✋🏻
이 뉴스레터 공유해주기💌
교육서비스 경험을 혁신하는 에이블런입니다. 📣
● 비전공자를 위한 데이터 활용교육 > ABLEARN
● 1인 교육담당자를 위한 온라인 교육지원서비스 > &SPACE