.png)
홈페이지 제작 시에는 여러모로 신경 써야 하는 부분이 많지만, 궁극적으로는 사이트의 첫인상을 결정짓는 UI와 유저를 편리하게 만드는 UX가 가장 와닿으실 것 같아요~🖥️ 그렇지만 두 개념의 이름이 워낙 비슷하고, 관련 업계가 아니다 보면 익숙한 단어가 아니기에 헷갈리기가 쉬운데요. 오늘은 UI, UX 제가 한 번에 정리해 드리겠습니다😎
마지막에는 짤막하지만 탄탄한 내용의 실제 디자이너 분과의 인터뷰🎙️도 준비되어 있으니 더욱 풍부한 인사이트를 얻어가실 수 있을 거예요! 그럼, 채널 고정📌
🤏UI UX 개념부터 짚고 가요
.png)
🖼️UI (USER INTERFACE)
사용자가 제품/서비스를 사용할 때 마주하는 시각적인 디자인을 말해요. 우리가 어떤 사이트를 들어갔을 때 보이는 창 자체를 일컫는 말이에요.
⚙️UX (USER EXPERIENCE)
사용자가 제품/서비스를 직간접적으로 이용하면서 느끼는 전반적인 경험에 대한 만족감을 뜻해요. 우리는 그 사이트에 머물면서 여러 기능을 찾아보거나 직접 사용할 수도 있는데요. 그때 그 기능의 배치 등이 UX에 해당하는 거예요.
이렇듯 UI와 UX는 비슷하지만 다르고 그만큼 디자이너가 디자인하는 영역에서도 차이를 보인답니다👀 아직 개념이 머리속에 완전히 자리 잡지 못했다면 UI는 전체적인 시각적인 디자인, UX는 경험에 대한 만족감으로 기억해보세요!
🖌️UI UX 디자인 예시를 알아봐요
.png)
글로 개념을 읽는 것 보다 이미지를 통해 직관적으로 이해하는 게 더 쉬울 것 같아서 최근 리뉴얼이 완료된 마케팅 큐레이션 플랫폼 '애드유어' 모바일 버전을 준비했어요~ 그럼 각 하나씩 예시를 살펴볼게요💡
✅UI
첫 번째 이미지는 '메인' 창이에요. 모바일로 애드유어에 처음 접속했을 때 마주하게 되는 화면이죠. 최상단에는 애드유어 로고와 사이트 내에서 이용할 수 있는 메뉴를 각각 볼 수 있고요. 그 밑으로는 강조하고 싶은 콘텐츠가 제한적으로 고정되어 있으며 밑으로는 실시간 인기 콘텐츠, 광고 프로모션, 새로운 콘텐츠, 광고 상품 등 순으로 이어집니다. 두 번째 이미지는 바로 저! 제가 기획했던 콘텐츠를 모아볼 수 있는 '지니 에디터 모아보기' 창이에요. 콘텐츠마다 박스로 처리되어 깔끔하게 나눠지죠.
이처럼 UI 디자인은 사이트를 구성하는 모든 시각적인 요소를 말해요👀 이미지로 본다면, 다음과 같죠.
① 최상단의 애드유어 로고 크기 및 가로형 메뉴
② 강조하고 싶은 콘텐츠 > 실시간 인기 콘텐츠 > 광고 프로모션 등 콘텐츠 배치 순서
③ 콘텐츠별 노출 디자인
- 강조 콘텐츠 : 큰 콘텐츠 크기
- 실시간 콘텐츠 : 박스 처리 및 마우스 호버 효과, 크기
- 광고 프로모션 : 롤링바 형태로 구현 등
이외에도 다양한 요소들이 있지만, 전반적으로 UI가 어떤 걸 의미하는지 이제 감이 잡히시죠? 그럼 이제 UX로 넘어가 보도록 하겠습니다😉
────────────
✅UX
첫 번째 이미지는 콘텐츠를 최신순, 인기순으로 볼 수 있는 기능이에요. 예시로 삽입한 '지니 에디터 모아보기' 창 외에도 해당 기능을 제공하고 있어요. 두 번째는 콘텐츠 클릭 시 이용할 수 있는 공유 기능이에요. 애드유어는 카카오톡 바로 전송과 링크 복사 2가지를 제공하고 있습니다.
UX는 기능적인 부분과 연관되죠⚙️ 예시 이미지를 기준으로, UX 디자인은 다음과 같습니다. UI와의 구분이 쉽도록 뒤에 '기능'을 붙여 정리해 봤어요! 이 기능들이 어디에, 어떻게 배치되느냐가 UX 디자인의 관건이랍니다☝️
① 'CONTENTS' 카테고리 내 '에디터 모아보기' 기능
② 콘텐츠별 최신순, 인기순 노출 기능
③ 콘텐츠 클릭 시 공유 기능
💁UI 디자인 사례 : 코닥 포토프린터
.png)
이루다마케팅은 프리닉스 코닥의 포토프린터 자사몰 리뉴얼 및 상세 페이지를 제작했어요🖥️ 이미지는 포토프린터의 상세 페이지로, 브랜드 톤앤무드에 맞게 제품의 강점 및 USP 등 소구점을 비주얼적으로 잘 전달될 수 있도록 노력했죠✨
'타사 대비 3배 낮은 가격', '촬영부터 출력까지 코닥은 단 1분' 등과 같은 후킹한 멘트는 신제품에 대한 직관적인 설명으로, 이해가 빠르고 기억에도 오래 남는데요💬 멘트뿐만 아니라 가격에는 동전 모양의 아이콘을, 시간 내용에는 시계와 '1min'을 배치함으로써 더욱 주목도를 높였습니다↗️
이번 작업을 통해 코닥은 브랜드 가치와 더불어 고객의 구매욕을 동시에 제고할 수 있었는데요! 이 밖에도 리뉴얼 사이트에서는 제품 영상 및 인플루언서(or 바이럴 협찬) 후기 사진 2차 활용, 슬로건 강조 등을 통해 잠재고객의 이탈을 최소화할 수 있었습니다👍
🎶UX 디자인 사례 : 애드유어
.png)
앞서 UI UX 디자인 개념을 설명할 때 잠깐 다뤘지만, 애드유어는 UI UX 디자인 사례를 동시에 다루기 적합한 채널이에요👍 왜냐하면 이루다마케팅에서 직접 서비스 고도화를 위해 UI UX 모두 보완 및 강화 작업을 거쳤기 때문입니다. 덕분에 애드유어는 UI와 이전에 없었던 기능이 다수 추가되었는데요👏
먼저 UI부터 살펴볼게요. 깔끔하고 각지지 않은 라운드 형태의 부드러운 박스 형태는 어렵게 느껴지기 쉬운 마케팅 주제의 콘텐츠를 보다 편하게 볼 수 있도록 풀어주는 역할을 하고요😌 또 콘텐츠마다 썸네일, 제목, 에디터명(클릭 시 모아보기), 발행일을 함께 노출해 잠재고객이 콘텐츠를 파악하기 쉽게 디자인했어요✔️ 특히, 유행템이나 밈과 관련된 콘텐츠는 시시때때로 변화하기에 날짜가 큰 도움이 되죠!
그리고 UX 디자인으로는 간편한 통합 검색, 콘텐츠 골라보기 등이 있어요. 모두 기능적인 면으로, 사용자가 사이트를 이용하면서 느끼는 편리한 경험을 기반으로 두고 있죠🙆♂️ 이외에도 UX는 태그 모아보기, 푸터 내 패밀리 사이트 바로가기 등이 있답니다~
🎈한 눈에 정리하기!
.png)
영역, 목적, 목표, 방법에 따라 조금씩 차이 나는 UI UX 디자인! 오늘 완벽하게 이해되셨죠?! 이제 진짜 마지막 정리! 아래의 표를 통해 앞으로는 헷갈리지 말고 두 개념을 꼭 기억해 두시길 바라요~
|
구분 |
UI |
UX |
|
디자인 영역 |
시각 디자인 |
인터렉션 |
|
목적 |
브랜딩 |
유저 리서치 |
|
목표 |
선호도 증가 |
사용성 증가 |
|
방법 |
레이아웃 |
내비게이션 |
🎤애드유어 UI UX 디자이너 서비를 소개합니다!
.png)
애드유어 리뉴얼에 큰 도움을 주신 서비 디자이너를 소개합니다🤗 제가 기획하는 콘텐츠 역시 모두 서비 디자이너님이 도맡아 진행해 주고 계신데요! 이번에는 UX 디자인까지👨💻 무탈하게 진행해 주셔서 인터뷰도 함께 준비해 보았습니다💬 향후 UI UX 디자이너를 꿈꾸는 분들께도 좋은 인사이트가 될 듯싶어요!
▼
1. 안녕하세요. 먼저 자기소개와 하시는 업무에 대해 간단히 소개 부탁드려요!
- 안녕하세요. 이루다마케팅 전략기획팀 PR파트에서 자사 온드미디어 채널의 콘텐츠 디자인을 맡고 있는 서비 디자이너입니다🙂 주로 루다 캐릭터를 통해 생동감을 불어넣어 작업하고 있는데요. 이번에는 애드유어 UI · UX 리뉴얼 업무도 함께 진행하게 되었습니다!
2. 애드유어 사이트 리뉴얼 진행 과정은 어떻게 이루어졌나요?
- 독자분들께 좀 더 직관적인 정보를 제공하기 위해서 레이아웃 재설계 및 텍스트 리사이징, 콘텐츠 재배치 등을 통해 유저 플로우를 개선하는 데에 집중했습니다👀
3. 그 과정에서 주로 맡으신 업무를 UI · UX로 나누어 설명 부탁드려요.
- UI 측면에서는 전체적인 시각 디자인, 컬러 스키마, 아이콘 등 일관된 인터페이스 가이드를 사용하였고요. UX 측면에서는 와이어프레임 제작, 프로토타입 테스트 등을 주로 하였습니다👨💻
4. 작업 중 가장 신경 쓰신 부분과 어려웠던 부분이 있다면 어떤 것들이 있을까요?
- 가장 신경 쓴 작업은 사용자가 사이트를 쉽게 탐색하고, 원하는 정보를 빠르게 찾을 수 있도록 내비게이션을 간소화하는 작업이었고요📍 어려웠던 부분은 내비게이션 간소화를 통한 콘텐츠 우선순위 재배치 과정이었습니다🤔
5. 애드유어 리뉴얼을 통해 특별히 느꼈던 점이 있다면 이야기해 주세요!
- 사용자 테스트를 통해 발견되는 문제점을 계속 찾고, 수정하는 과정이 복잡했지만 결과적으로 초기 디자인 보다 레이아웃이 깔끔하고 직관적으로 리뉴얼 되어 사용자 편의성을 개선한 경험을 한 것이 보람찼습니다😀👍
.png)
