11번가 앱 UI UX 분석리뷰

​

​

안녕하세요~ 소프트랩스입니다.

​

오늘은 모바일 앱 11번가를 분석해 보겠습니다.

최근에 유튜버 미디어디자이너님께서 모바일 UI UX에 대한 10가지 원칙을 아주 잘 요약해 주셔서

그를 바탕으로 11번가 앱을 분석해 보겠습니다.

​

모바일 레이아웃을 디자인하거나 벤치마킹 할 때는 분석이 가장 중요하죠~!

10가지 모바일 원칙과 함께 알아보겠습니다!!!

​

​

​

​

​

​

​

첫 번째. 폰트 크기

모바일 앱에서 폰트 사이즈는 상당히 중요한데요.

너무 크거나 작으면 웹앱의 가독성이 심하게 떨어진다고 합니다.

그래서 원칙 같은 것을 적어두는데 1rem 기본으로 12px로 맞추고

그보다 작지 않게 디자인하는 것이 중요합니다. 그리고 최대 크기는 그 두 배수인 24px을 넘기지 않는 것이 가장 좋다고 합니다.

11번가는 그에 대답이라도 하듯 딱딱 맞춰져 있군요!!

​

​

​

​

​

두 번째. 버튼의 크기를 키워라

모바일 앱을 만들 때 가장 많이들 실수하는 것이 버튼의 크기를 매우 작게 한다고 합니다.

하지만 버튼 같은 기능적인 요소들은 직관성을 높여야 하며

딱 봤을 때 무슨 용도인지 사용자가 인식하게 하는 것이 가장 중요합니다.

11번가에서는 주요 버튼들은 크기를 키웠고 색상 차이로 중요도를 나타낸 것을 알 수 있습니다.

​

​

​

​

세번째. 아이콘을 통일해라

웹앱의 아이콘은 그 플랫폼의 이미지이자 색깔, 아이덴티티를 나타낸다고 해도 과언이 아닌데요.

아이콘의 숫자가 적으면 통일시키기가 어렵지 않지만,

그 수가 기하급수적으로 늘어난다면 동일한 느낌의 아이콘을 제작하는 것은 어렵다고 할 수 있습니다.

​

​

그를 중심으로 11번가의 아이콘들을 본다면 살짝 의아할 수도 있다고 생각이 듭니다.

아이콘들이 크기나 느낌이 제각각인 느낌을 좀 받는데요.

이런 경우는 11번가나 쿠팡 같이 카테고리가 어마어마하게 많은 플랫폼에서는 흔히 볼 수 있는 현상입니다.

그래도 기능적인 부분이나 상품 카테고리 등 대분류로는 느낌을 통일하려고 한 느낌이 강하게 듭니다.

그 외 아이콘들은 어두운 회색과 포인트로 11번가 특유의 붉은색으로 느낌을 준 부분이 좋았습니다.

​

​

​

​

네 번째. 접근성이 용이한 폰트 컬러

​

폰트는 컬러만으로도 그 목적이 명확하게 전달될 수 있습니다.

그래서 폰트가 가장 중요하다고들 하는 것인가 봅니다.

​

11번가 같은 경우엔 쿠폰등록, 받기 같은 기능적인 경우엔 붉은 계열,

상품 도착 날짜 같은 경우엔 푸른 계열로 가독성을 높이고 직관성을 용이하게 한 부분이 두드러집니다.

​

​

​

다섯 번째. 통일감 있는 레이아웃

​

웹사이트를 처음 들어갈 때 사람들은 본능적으로 안에 있는 콘텐츠보다

그를 구성하는 레이아웃이 가장 먼저 눈에 들어온다고 합니다.

둥근 느낌이면 둥근 느낌, 각진 느낌이면 각진 느낌, 이런 식으로 말이죠.

​

11번가는 각지고 딱딱 떨어지는 레이아웃을 선택한 것으로 보입니다.

그 흔한 border-radius도 보이지 않습니다.

이런 각진 디자인은 플랫폼의 신뢰성을 높이고 일을 잘 해낼 것처럼 느끼게 해주는데요.

잘못하면 디자인엔 신경을 쓰지 않은 것처럼 보이게 할 수도 있지만

11번가는 전자에 해당되게끔 잘 제작한 것 같습니다.

​

​

​

​

여섯 번째. 콘텐츠 안 계층 구조

​

사실 위에서 설명했듯이 각진 디자인은 잘못했다간 디자인엔 신경을 덜 쓴 것처럼 보이게 할 수 있습니다.

이러한 경우에 콘텐츠간의 계층 구조를 표현하여 강약 조절을 하면

뭔가 다채로워 보이고 내용이 가득한 것처럼 보이게 할 수 있는데요.

​

​

11번가에서는 중요한 부분의 폰트 크기를 키우거나 두께를 줘서 주제를 잘 나타내었고,

영역으로도 어찌 보면 심심할 수 있는 흰 바탕 가운데 특별한 부분은

미묘한 강조를 background-color로 해 놓은 것을 알 수 있습니다.

​

​

일곱 번째. 하단 내비게이션 bar

​

​

하단 Nav bar가 원칙 중 하나로 나올 줄은 몰랐습니다.

요즘에 모바일 UI에는 하단 Nav 바가 잘 들어가는 것 같습니다.

상단에 위치한 것만으로는 확실히 부족한 점이 있지요.

​

하단 내비게이션에서 가장 중요한 것은 직관성과 가독성인데요.

아이콘이 주를 이루기 때문에 아이콘 모양만 보고

그 버튼이 어떤 기능을 하는지 사용자는 바로 알아차릴 수 있어야 합니다.

​

그리고 너무 많으면 가독성이 떨어지기 때문에 정말 중요한 부분들을 추려낼 수 있어야 하는데요!

​

11번가 같은 경우는 조금 의아한 부분들이 있었습니다.

햄버거 바(메뉴 버튼), 아마존, 마이페이지 같은 경우에는 아이콘이 무슨 기능을 하는지 바로 알아차릴 수 있었는데

우주패스 광고 버튼이나 본 상품 목록 버튼은 바로 알아차리기엔 어색한 부분이 있었고

nav에 있어야 할까 의문도 살짝 들었는데 여러분들의 생각은 어떠신가요??

​

​

여덟 번째. 콘텐츠간 여백

​

마진이라고 부르죠. 콘텐츠 사이의 간격은 사이트의 가독성을

높여주고 심미적으로도 더 여유로워 보이게 만들어 줍니다.

웹에서면 몰라도 모바일에서는 스크롤 길이는 크게 중요하지 않다고 하는데요.

​

11번가에서는 약간은 여유가 적어 보이는 느낌입니다.

콘텐츠간 간격이 8px 정도인데요.

안에 담는 정보가 많으면 그럴 수도 있을 것 같지만 실제 모바일에서 봤을 때

크게 불편하다는 느낌은 못 받았지만 좀 딱 붙어있다는 느낌은 받았습니다.

​

​

​

아홉 번째. 콘텐츠간 그룹화입니다.

​

콘텐츠간의 그룹화는 카테고리를 대분류 해서 그걸 시각적으로

차별화할 수 있냐는 것이 관건인 부분입니다.

사용하고자 하는 목적을 더 쉽게 찾을 수 있고 사용자가 이용하기에도 불편함이 없는 것이 중요합니다.

​

이 부분에 있어서 11번가는 분류를 아주 잘 해놓았다는 느낌입니다.

글자를 안 읽어도 레이아웃만으로 내가 보고 있는 물건이 어떤 카테고리에 있는지 알 수 있다는 느낌을 받았어요!

​

​

​

열 번째 . 레이아웃

​

모바일은 디바이스가 데스크탑만큼 크지 않습니다.

그래서 앱의 레이아웃을 잡을 때 너무 잘게 쪼개지면 뭔가 복잡해 보이고 눈에 잘 안 들어옵니다.

하나하나 딱 정보가 보이는 게 사용자 경험에도 더 좋겠죠??

​

11번가 같은 경우에는 일단 크게크게 쪼개져 있습니다.

안에 있는 콘텐츠가 눈에 잘 들어와요. 간격은 좀 더 벌려도 될 것 같다는

생각이 들지만 전체적인 짜임새는 탄탄하고 보기 불편하지 않습니다.

​

​

카테고리는 좀 잘게 쪼개져 있지만, 11번가는 카테고리가 어마어마하게 많으니 그럴 수 있겠다 생각이 들어요.

​

어떠셨나요?? 앞으로 저희 소프트랩스는 UI UX 기반의

이론과 벤치마킹을 통해 웹앱을 분석해 리뷰를 올릴 계획입니다.

열심히 올릴 테니 여러분들의 생각을 댓글로 남겨주세요~!

앞으로 사용자가 이용하기 편하고 보기도 좋은 앱들이

많이 생겨나길 바라며 저희 여기서 인사드리겠습니다~! 감사합니다.

​

​

​