<주간 UIUX 디자인 : ui ux 차이>

사례를 통해 쉽게 알아보는 ui ux 뜻과 차이점

제로베이스 UIUX 디자인 스쿨

ui ux는 무엇일까요? ui ux 차이는 어떻게 설명할 수 있을까요? 막연하게 알고는 있지만 막상 답변하자면 쉽게 떠오르지 않죠. 지난 시간 ui ux 디자인 아티클에서도 개념을 간략하게 소개해드렸는데요. 오늘은 누가 ui ux 차이에 대해 물어보면 자신있게 대답해 줄 수 있도록, ui ux 차이에 대해 더 집중해보는 시간을 가져보려고 해요. ui ux 디자이너를 준비한다면 필수로 알아야 할 기본 중의 기본, ui ux 차이! 지금 바로 만나러 가볼까요?

잠깐, UIUX 디자인 스쿨이 궁금하다면? 자세히보러가기 >

최근 각광 받고 있는 ui ux 디자이너

한국고용정보원이 공개한 ‘2020 한국의 직업정보’ 보고서에 의하면 537개 직업에 종사 중인 재직자 1만6244명 중 38.9%는 ‘현재 수행하는 업무가 기계나 장비로 대체될 수 없다’고 답했다고 하는데요. 특히 기술이 발달해도 기계나 장비로 업무가 대체될 수 없는 직업 1위로 ‘ui ux 디자이너’가 꼽혔다고 합니다. ui ux 디자이너는 제품이나 기능을 사용자가 쉽고 편리하게 사용하도록 디자인하는 직업인데요.

모든게 디지털화되고 있는 4차 산업혁명 시대, ui ux 디자이너의 역할이 더 중요해지고 있습니다. 웹사이트부터 앱, 플랫폼까지 다양한 산업군에서 필요한 역할이기 때문이죠. 콘텐츠의 홍수 속에서 아무리 좋은 정보를 갖고 있더라도 접했을 때 사용자가 이용하기 너무 어렵고 헷갈리면 가치가 떨어질 수밖에 없기 때문에, ui ux 디자이너의 직업적 전망은 앞으로도 밝을 것으로 예상됩니다.

본문 출처: AI?로봇에도 안 뺏긴다는 ‘이 직업’ 정체는?, 조선일보, 22.04.19.
기사 원문 보러가기

UI 디자인과 UX 디자인 뜻은 무엇일까요?

UI 예시 / ⓒ Unsplash의charlesdeluvio

UI 디자인(ui design)은 사용자 인터페이스 디자인(User Interface Design)의 약자입니다. 웹 사이트나 앱과 같은 디지털 화면의 시각적 요소와 레이아웃을 만드는 데 중점을 둔 디자인이죠. UI 디자인에는 색상, 타이포그래피, 아이콘, 버튼 및 기타 그래픽 요소를 선택하여 미적으로 쾌적하고 사용자 친화적인 인터페이스를 만듭니다.

여기서 인터페이스란 사용자가 디지털 제품과 대화할 수 있는 방법을 의미하는데요, 명령을 입력하고 출력 또는 피드백을 수신하는 매개체 역할을 합니다.

UX 예시 / ⓒ Unsplash의Alvaro Reyes

UX Design은 사용자 경험 디자인(User Experience Design)의 약자입니다. 디지털 제품과 상호 작용하는 동안, 사용자가 경험하는 전반적인 환경을 개선하는 데 중점을 두는 디자인 입니다. UX 디자인은 사용자의 요구를 이해하고, 제품을 직관적이고 사용하기 쉽게 만들며, 나아가 즐길 수 있도록 솔루션을 만드는 것까지 포함합니다. 정보 아키텍처, 사용자 흐름, 와이어프레임 및 프로토타이핑과 같은 작업을 포함하여 사용자의 원활한 활동을 보장합니다.

간단히 말해서, UI 디자인은 시각적으로 매력적이고, 체계적으로 보이게 하는 것에 관한 것이고, UX 디자인은 원활하고 만족스러운 사용자 경험을 만드는 것에 관한 것이라고 정리할 수 있습니다.

ui ux 차이, 비유를 통해 간단 정리!

ui ux 개념에 대해 익혀보았는데요. 인테리어에 비유하여 좀 더 쉽게 ui ux 차이를 알아볼게요!

위 거실 인테리어 이미지를 보면 전체적으로 화이트톤 가구를 사용했고 일자로 배치하여 굉장히 정돈되고 깔끔한 느낌을 주고 있죠. 이처럼 실제 사용자가 시각적으로 접하게 되는 부분을 디자인이라는 것이 UI 디자인이라고 볼 수 있습니다.

UX 디자인은 주방 인테리어에 비유를 하면 좀 더 쉽게 이해하실 수 있을 것 같아요. 주방에서는 인테리어를 할 때 요리하는 동선에 신경을 많이 쓰죠! 냉장고와 조리대의 거리라든지, 조리한 음식을 편하게 바로 옮길 수 있도록 식탁의 위치를 배치한다든지 등. 요리하는 사람, 즉 사용자가 겪을 관점으로 구성하고 설계하는 것을 UX 디자인이라고 할 수 있습니다.

사례로 더 자세히 알아보는 ui ux 차이

이번에는 직접 일상에서 우리가 자주 보는 앱, 배달의 민족과 요기요의 화면을 비교하며 ui ux 차이를 느껴볼게요.

💡 첫 화면_UI 비교

우선 두 앱의 첫 화면입니다. 배달의 민족은 메뉴가 바로 보이지 않고 배민1, 포장, B마트 등의 다양한 카테고리가 가장 먼저 눈에 보이게 해두었습니다. 많은 카테고리를 아이콘과 함께 카드로 분류해서 정돈된 느낌을 줍니다. 배달 카테고리에 들어가면 요기요의 첫 화면과 유사한화면이 나오지만, 음식 아이콘도 배달의 민족 브랜드 이미지처럼 재치있는 그림으로 표현했습니다.

요기요는 포장, 요마트와 같은 카테고리를, 배달의 민족처럼 페이지를 나누지 않고 한 화면에 모두 표시해 두었습니다. 카테고리 카드의 사이즈가 음식 아이콘과 비슷하게 되어있어 해당 카테고리가 강조되는 느낌은 아닙니다. 음식 아이콘은 배달의 민족과 달리 실사에 가까운 클레이 형태의 그림을 사용하고 있네요!

시각적으로 각 브랜드가 강조하는게 무엇인지, 이미지는 어떠한지 UI에 드러나는 것 같죠?

💡 첫 화면_UX 비교

배달의 민족은 메인화면에서 배달 카테고리로 들어와야 메뉴를 확인할 수 있는데요. 바로 메뉴 확인이 가능한 요기요와 달리 한 단계를 거쳐야 합니다. 이 부분으로 인해 배달의 민족이 진행하는 서비스에 대한 인지는 높아질 수 있을 것 같지만, 불편함을 느끼는 사용자도 있을 것 같아요.

아주 디테일한 부분에서도 사용자 경험이 일어날 수 있다는 점이 느껴집니다.

💡 가게 화면_UI 비교

가게들을 살펴볼 수 있는 화면으로 두 앱을 한 번 더 비교해 볼게요! 두 앱 모두 스크롤을 내려서 어떤 음식점이 있는지 살펴볼 수 있고, 카테고리 별로도 확인해볼 수 있다는 점에선 큰 차이가 없는데요. 요기요에서는 브랜드 컬러를 사용해 ‘익스프레스’라는 빠른 배송을 조금 강조하고 있는 듯 합니다.

💡 가게 화면_UX 비교

배달의 민족은 쭉 스크롤을 내려보는 형식인 반면 요기요는 스크롤을 내리는 중간에 ‘오늘의 할인’ 코너를 마련했습니다. 크게 끌리는 음식이 없다면 계속 스크롤 내리지 말고 할인되는 음식을 먹는 건 어떨지 사용자에게 추천해주는 느낌이 들었습니다. 가게를 살펴보는 화면에서도 비슷해보지만 이러한 UX의 차이가 발생하고 있네요.

이렇게 실제 앱 화면을 비교해보며 ui ux 차이에 대해 알아보았습니다. 생각보다 우리 일상 가까이에 UI/UX 디자인이 활용되고 있는 점을 느끼셨으면 좋겠습니다.

ui ux 디자이너 관심이 생긴다면?

4차 산업혁명 시대의 필수 직업 ui ux 디자이너. 이 아티클을 통해 관심이 생기셨다면, 한 번 도전해 보시는 건 어떨까요? ui ux 차이에 대해 이제야 알았어도 괜찮습니다. UIUX 디자인 스쿨에서는 단 ‘4개월’만에 취업할 수 있도록 기초부터 제대로 알려드리니까요. 대체 불가능한 UIUX 디자인 스쿨 실무 강의로, 대체 불가능한 직업, ui ux 디자이너가 되어보세요!

UIUX 디자인 스쿨은 '취업'까지 단 4개월,
새로운 여정을 함께할 분들을 기다립니다.

추천 컨텐츠