2016년 11번가 리뉴얼 UI 파헤치기!! 더 넓어진 width값

11번가 리뉴얼하다

쇼핑몰 회사에 다니다 보니 최신 쇼핑트렌드도 민감하고 특히 대기업 쇼핑몰의 리뉴얼에는 큰 관심이 있습니다. 3년동안 변화한 모습들을 캡쳐하다가 이번에 11번가가 리뉴얼되면서 어느부분이 변경되었고 어떤 전략이 있을시 나름대로 준비를 해봐야겠다 생각해서..글을 남기게 되었네요 ^_^ 

자.. 일단 11번가 메인에 대해서 집어보도록 할까요? 아래 화면은 2016년 12월 중순경에 캡쳐한 화면입니다.

---

1. 로고센터정렬

2. 카테고리 재정렬

3. 인기검색어의 메인 등장

4. TOP BANNER의 위치변화

5. 카드디자인 레이아웃 적용

6. 1200px 와이드값 적용

위 체크한 것처럼 많은 항목이 변화가 되었습니다. 그냥 크게 눈에 띄는 건

카드디자인과 넓은 해상도를 제공하게끔 변경된 부분입니다. 넓은 해상도에 솔직히 좀 놀랐습니다.

11번가는 내부에서도 꾸준히 부분부분을 리뉴얼하는 것은 알고 있었는데 이런 파격적인 변신을 할 줄은...

그럼 리뉴얼전과 후의 전략은 어떻게 되는지 잠깐 살펴볼까요? 

리뉴얼전

리뉴얼전에는 [편리+즐거움]이 중심이 되는 고객 맞춤형 큐레이션 쇼핑을 메인쪽에 전면 배치하였습니다.

이 시기에는 쇼셜커머스가 규모가 커져서 종합쇼핑몰이나 오픈마켓의 메인이 쇼셜커머스에서의 큰 상품위주로 변경되고 있었고...반대로 쇼셜커머스는 단순한 상품구성에서 상품군이 늘어남에 따라 다양한 서비스를 제공하였죠.

리뉴얼후

원래 가지고 있던 컨텐츠들을 메인쪽에 많이 뽑아냈습니다. 검색기능의 강화와 O2O생활플러스 서비스에 백화점들과의 제휴로 타사 제품들도 검색할수 있게 컨텐츠들이 많아졌습니다.  이런 저런 기사들을 많이 찾아보니

생활형 포탈 / 유통포탈 이라는 내용이 꽤 있더라고요. 그래서 11번가는 쇼핑포탈이라는 전략을 가지고 접근을 한게 아닐까 생각됩니다. 포탈사이트에서 가장 중요한 게 무엇일까요? 바로 [검색]이죠. 정확하고 세밀한 검색이 제일 중요합니다. 

다시 본론으로 돌아와서 각 변경된 항목별로 살펴보도록 하겠습니다.

---

1. 로고센터정렬

2. 카테고리 재정렬

3. 인기검색어의 메인 등장

4. TOP BANNER의 위치변화

5. 카드디자인 레이아웃 적용

6. 1200px 와이드값 적용

2016년 3월당시 상단 GNB

2016년 3월에는 아직 로고도 개편전이고 전통적인 쇼핑몰의 형태를 띄고 있습니다. 로고는 왼쪽 검색은 센터. 우측영역은 광고로...타 쇼핑몰과 별반 차이점은 없습니다. 

2016년 7월당시 상단 GNB

2016년 7월에는 로고가 개편이 됩니다. 그동안 모바일에서 11번가 로고는 가독성이 그리 좋지 않았습니다. 기본 컨셉인 표지판이라는 건 그대로 두면서 검색영역까지 한번에 껴안는 독특한 형태의 결과물이 나왔습니다. 

현재 11번가 상단 GNB

현재 리뉴얼될 상단GNB의 모습입니다. 기존에 있던 정보들이 다 있으면서도 영역성이 확보되어 가독성이 좋아보입니다. 한가지 아쉬운 점은 BI+검색형태의 로고이기 때문에 저 부분에서 검색을 할 수 있을까에 대한 약간의 아쉬움은 남습니다만...훌륭합니다 +0+

---

1. 로고센터정렬

2. 카테고리 재정렬

3. 인기검색어의 메인 등장

4. TOP BANNER의 위치변화

5. 카드디자인 레이아웃 적용

6. 1200px 와이드값 적용

11번가 카테고리 변천사

11번가는 기존부터 쭉 아이콘+이미지폰트로 카테고리를 표현하고 있었습니다. 타 쇼핑몰들도 대부분 이런곳이 많습니다. 현재는 우측이미지처럼 시스템폰트로만 카테고리가 써져 있는데요.. 10개 카테고리가 13개로 변경되면서 아이콘이 붙을경우 오히려 더 복잡해져 빠진것 같아요. 

카테고리도 이번에 13개로 개편되면서 대분류는 167개로 오히려 더 늘어났습니다. 의류/잡화는 항시 매출이 높은 카테고리이니 분류가 되었고 출산/육아도 모바일에서의 매출이 많습니다. 

통계청 2016.12월 자료

통계청 자료에 따르면 2016년 11월 온라인 쇼핑 거래상품은 의복이 32%로 가장많고, 음식료품과 화장품, 생활-자동차용품, 그리고 여행과 예약서비스 등의 순으로 집계됐습니다.모바일 상품을 보면, 아동과 유아용품이 71%로 가장 많고, 신발과 의복, 가방 등의 순으로 조사됐습니다.

---

1. 로고센터정렬

2. 카테고리 재정렬

3. 인기검색어의 메인 등장

4. TOP BANNER의 위치변화

5. 카드디자인 레이아웃 적용

6. 1200px 와이드값 적용

우측상단 인기검색어

메인에 인기검색어란 컨텐츠가 제공되고 있습니다. 11번가가 검색강화에 주력을 하고 있다는 게 느껴집니다. 

일단 검색어가 왜 메인에 나오게 되었는지 설명하려면 아래 개념부터 설명을 해 줘야 할것 같습니다.

[ZEC] 제로 에포트 커머스 : 

이베이에서 제시한 개념으로 최소한의 시간과 노력으로 제품을 구매하는 쇼핑 방식을 의미합니다. 여기서 최소한의 시간과 노력으로 제품을 구매하는 방식은 바로 [검색]이 되겠죠.

아래에 관련한 2016년 11월 기사를 찾았습니다.

이상호 SK플래닛 CTO

SK플래닛 "검색·추천·챗봇이 커머스 핵심"...11번가, `이미지` 검색 서비스 개발

TV 속 유명 연예인이 착용한 패션 소품을 스마트폰으로 촬영해 간편하게 구매할 수 있게 됐다. SK플래닛 11번가가 이미지 파일을 자동으로 인식해 관련 상품을 찾아주는 `유사 스타일 검색 서비스`를 선보였다. SK플래닛은 미래 전자상거래 시장 주도권을 확보하기 위해 검색·추천·챗봇(Chat-bot) 기술 경쟁력을 확보하는데 주력한다. 

SK플래닛은 17일 서울 삼성동 코엑스에서 글로벌 유통·정보기술(IT) 콘퍼런스 `테크 플래닛 2016`을 개최했다. 기조연설에 나선 이상호 SK플래닛 최고기술책임자(CTO)는 “불과 20여년 전만 해도 소비자 경험을 오프라인에서 온라인으로 옮기지 못했다”면서 “온·오프라인 커머스 경계가 허물어진 현재는 `제로 에퍼트 커머스(ZEC)`를 준비할 시대”라고 강조했다.

그는 고객 쇼핑 경험을 개선해 ZEC를 구현할 수 있는 대표 기술로 △검색 △추천 △챗봇을 각각 꼽았다. ZEC는 최소 시간과 노력으로 상품을 구매하는 쇼핑 형태다. SK플래닛은 앞으로 빅데이터와 인공지능(AI)을 기반으로 해당 3개 기술 수준을 향상하는데 집중할 계획이다.

이날 SK플래닛은 이르면 이달 말 11번가 모바일 애플리케이션에 이미지로 관련 상품을 찾을 수 있는 새로운 검색 서비스를 도입한다고 밝혔다. 의류, 액세서리 등 문자로 표현하기 어려운 상품을 찍어 올리면 유사 상품을 추천하는 형태다. 

최근 수년간 취급 상품 수가 수천만개로 증가한 오픈마켓에서 가장 빠르게 고객이 원하는 상품을 제안하기 위한 조치다. 현재 11번가 취급 상품 수는 총 5600만여개다. 11번가는 향후 음성 검색 서비스도 선보일 계획이다.

[SK플래닛 "검색·추천·챗봇이 커머스 핵심" 11번가, `이미지` 검색 서비스 개발]

http://www.etnews.com/20161017000255 

이렇기에 검색강화로 모바일과 PC쪽에 이미 적용을 했으니 그 관련 컨텐츠가 메인에 나오는건 어찌보면 너무나 당연한 결과라고 생각되어 집니다. 저도 11번가의 검색을 써봤는데 일단 UI적으로 필요항목이 잘 그룹핑이 되어 있고 세부적으로도 다양한 조정을 할 수 있어 편리하게 이용이 가능합니다.

---

1. 로고센터정렬

2. 카테고리 재정렬

3. 인기검색어의 메인 등장

4. TOP BANNER의 위치변화

5. 카드디자인 레이아웃 적용

6. 1200px 와이드값 적용

2016년 12월 이전 TOPBANNER 위치

2016년 12월 이전에는 TOPBANNER는 탑에 있었습니다. 영역성이 보장되기 때문에 누르는데 불편하거나 하지는 않습니다. 보기 싫을뿐이지 =.=;; 사이트의 전체 컨셉을 방해하는 TOP BANNER는 없어져야 한다고 생각하지만...마케팅 광고 영역으로 활용하고 있으니 뭐..어쩔수 없으려나요. 

2016년 12월 리뉴얼 현재

현재는 그 TOP BANNER가 뜬금없게도...메인빌보드 배너 아래쪽에 그것도 딱 붙어서 존재하고 있습니다. 

일단 사용성의 불편. 배너Type의 단일성 등 장점보다는 단점이 많아 보이는 위치라고 생각됩니다. 제가 이 글을  12월 말에 작성했는데 2017년 1월 현재 배너는 메인빌보드 배너와 떨어져 있습니다. 적어도 사용성에서는 불편하게 하지 않겠다는 생각인것이죠..ㅎㅎ 

11번가가 리뉴얼후 한번 더 변경이 되었어요...이유는 내부적으로도 이슈가 있다정도는 생각이 됩니다.

---

1. 로고센터정렬

2. 카테고리 재정렬

3. 인기검색어의 메인 등장

4. TOP BANNER의 위치변화

5. 카드디자인 레이아웃 적용

6. 1200px 와이드값 적용

11번가 메인의 카드디자인 레이아웃

11번가가 와이드값을 넓게 적용하면서 카드디자인으로 각 컨텐츠들을 나누고 있는데요. 네이버에서 이미 했던 것이지만 네이버보다 더 진화된 느낌이 듭니다. 훨씬 그룹핑이 잘 되어 있고 각각의 카드가 집중도가 있기 때문이지요. 

왜 카드디자인일까가 아니라 왜 많은 컨텐츠들을 메인에 뿌려놨을까?

신세계 정용진 부회장이 이런 이야기를 했답니다. 

제품을 파는 시대는 저물고 있다. 경험,기억,시간이 유통 핵심단어가 되고 있다.
 경험하게 하고, 기억을 남겨줌으로써 시간을 잡을 수 있는 기업이 미래 유통의 승자가 될 것이다.

시간을 잡을수 있다는건 거기에서 놀고 즐기다는 의미일 겁니다. 그건 컨텐츠가 많이 있어서 끊임없이 내용을 본다는 것이겠죠... 그럼 어떤 컨텐츠를 어떻게 보여줄거냐에 대해서 궁금해 지기 시작합니다. 

요새 무슨무슨 족들이 정말 많은데 1인가구가 증가하고 고령화되고 핀테크시대가 오고 온.오프라인의 경계가 무너지고 쇼셜 네트워크가 강화됨에 따라...나를 위한 가치있는 투자를 하는 포미족이 생겨났습니다. 물론 다른 족들도 많겠지만요. 포미족은 [건강 : For health] [싱글족:One] [여가:Recration][편의:More convenient][고가:Expensive]의 앞에 약자를 따서 [FORME]라고 지은 겁니다. 

기존 쇼핑의 형태도 유지하면서 하단 컨텐츠들을 보면 위 내용과 11번가의 컨텐츠는 아주 잘 맞아 떨어지는것 같습니다. 이번 리뉴얼로 건강 카테고리가 늘었고요.  싱글족을 위해 [온마트]라는 컨텐츠가 있고요. 여행/레저 카테고리도 세분화되었고 편의를 위해 O2O생활 오픈마켓 플랫폼으로 변하고 백화점 및 브랜드들의 입점으로 고가제품도 판매하게 되었습니다. 아 물론 이번 개편에 생겨난건 아니고 기존에 있던 컨텐츠들이긴 합니다. 그러므로 차근차근 컨텐츠 준비를 해 왔다는 생각이 듭니다.

11번가 대분류 카테고리 개편

11번가가 업계 최초로 하고 있는것이 온.오프라인 경계를 허무는 생활형 O2O 오픈마켓 서비스입니다. 기존에는 각 서비스당 한두개 업체만 들어왔다면 지금은 무한경계으로 업체들이 입점할 수 있게 된 것이죠. 현재 업체수도 50여개 정도에서 점점 더 많이 입점할것으로 생각됩니다. 무엇보다 요기요 같은 배달 서비스가 입점한게 눈에 띄네요 ^^

속성이 다른 컨텐츠를 담을 수 있는 포탈서비스의 형태로 진화

이렇게 많은 컨텐츠들을 다 보여줘야 겠는데 여기서 적합한 레이아웃을 뭘까?로 디자이너들은 다양한 것들을 제시했을 테고...카드레이아웃이 심미성과 기능성을 모두 잡을 수 있는 방법이라고 판단 한 듯 싶습니다. 

카드 레이아웃은 이미지+텍스트 형태로 된 박스고요. 박스형태도 제공되기 때문에 집중력이 상당히 좋습니다.

또한 이질감 있는 컨텐츠들을 통일시켜 줄 수 있는 강력한 레이아웃이기도 하고요.

카드 레이아웃의 장.단점

물론 카드레이아웃도 단점들이 있습니다만..11번가는 정말 장.단점을 잘 보완하면서 UI를 구성했다고 생각되어집니다. 기존 11번가가 가지고 있던 쇼핑요소는 그대로 두면서 컨텐츠를 쉽고 재밌게 즐길수 있는 카드레이아웃을 사용하되 지루하지 않게 쉴수 있는 공간과 다른 크기의 카드레이아웃을 두어서 보기에 불편하지 않습니다. 처음 오픈당시에는 다른 레이아웃에 의아했지만 곧 익숙해 졌고 편해졌습니다. 

한달에 30~40만원 정도는 인터넷쇼핑으로 물건을 구입하는데 11번가에서 가장 많이 구입합니다. 

그만큼 편리하다는 거겠죠.

네이버 쇼핑 카드 레이아웃

이쯤에서 네이버쇼핑을 이야기 안 할 수 없겠죠. 네이버도 컨텐츠의 속성이 다르기 때문에 그리고 본인만의 그리드 시스템과 다양한 활용성. 확장성을 위해서 카드디자인을 적극 적용하고 있었는데요. 네이버는 카드디자인 뿐만 아니라 미리 준비된 시스템으로 매출이 3년만에 6.7배나 증가하였습니다. 

검색최강자 네이버에서 쇼핑관련 검색비율이 40%나 된다고 합니다. 하루 300만건 쇼핑검색이므로 최강의 검색조건을 갖추었다고 볼수 있고 자연스럽게 네이버쇼핑으로 넘어와서 결제는 비밀번호만 입력하면 바로 결제가 되는 네이버페이로 주문후에 CS나 교환.반품은 네이버톡톡에서 지원이 되니 매출이 오를 수 밖에 없었겠지요.

이에 맞서 11번가도 검색강화뿐만 아니라 생활+ O2O서비스로 네이버와 같으면서도 차별화를 꾀했다고 보여집니다. 누가 이길지는 모르겠으나 둘 다 무서운 속도로 더 성장할것이라고 생각해요.

---

1. 로고센터정렬

2. 카테고리 재정렬

3. 인기검색어의 메인 등장

4. TOP BANNER의 위치변화

5. 카드디자인 레이아웃 적용

6. 1200px 와이드값 적용

국내 모니터 해상도 변화 - 2016.12월 

자료출처 : 스탯카운트

11번가는 리뉴얼하면서 1200px이라는 넓은 해상도로 제작이 되었습니다. 일단 먼저 국내의 모니터 해상도 비율을 찾아 봐야겠습니다. 1280px이 가장 작은 해상도며 최대 2560px까지 사용하고 있습니다. 1024px은 어디갔을까요? 아예 안 쓰지는 않는데요. 그건 [Other]항목인 19.25%안에 포함이 되어 있습니다. 

다만 1920x1200사용자 2.34%보다 작은 퍼센테지로 들어가 있겠죠. 그만큼 1024 해상도를 사용하는 유저는 줄어들었습니다. 그럼 각 쇼핑몰들은 어떤 와이드값을 가지고 있는지 볼까요?

대표 쇼핑몰 사이트들의 와이드값

대부분 1024 해상도를 지킨 것을 볼 수 있습니다. [G9]와 [신세계] [네이버쇼핑]등이 넓은 해상도를 지원하고 있는데 작은 해상도로 변경하면 그것도 같이 지원이 됩니다. 근데 왜 11번가는 1024해상도에 대응을 안 했을까요? 그 이유는...

저도 몰라요~!!

분명 내부적인 이유가 있거나 어떤 데이터에 근거해서...지원을 안 할것 같다고 생각이 되는데...

그럼 외국유저들의 모니터 해상도는 어떻게 될까요?

중국 모니터 해상도 2016년 12월

해외는 대부분 비슷한데 요새 중국이 뜨고 있으니 중국을 기준으로 보여드리면..1024 해상도를 6.1%나 사용하고 있네요. 10억 인구의 6%만 잡아도...어마어마 하니(사실은 10억기준이 아님) 실로 무시할수 없는 숫자라고 볼 수 있겠어요. 그럼 국내유저도 친숙한 해외 사이트 몇개만 와이드값을 확인해 볼까요?

해외 사이트 와이드값

[타오바오] [아마존][이베이][알리] 모두 넓은 해상도를 제공하면서 1024 해상도까지 배려하고 있는걸 볼수 있습니다. 이베이 사이트에서 확인하기가 좀 어려웠는데 모니터 설정에서 제 해상도를 1024로 줄이고 새창을 여니 1024버전을 제공한다는걸 확인 할 수 있었습니다. 

11번가가 왜 1200px을 사용했을까? 

는 잘 모르겠지만 카드레이아웃과 연관이 있을것이라 생각이 되고요. 카드레이아웃 한개는 285px이라는 값을 사용합니다.

 각 카드사이의 gutter(공간값)은 20px이므로 

(285x4) + (20x3) = 1200이 되는거죠. 서서히 개편하면서 양 사이드의 날개배너들은 사라졌습니다. 

하단 영역을 잘 활용하고 있지요. 

11번가 메인에서의 그리도 하나의 넓이

서브페이지에서는 딱히 그리드를 잘 지키지는 않았지만 6개 컨텐츠를 사용하고 있습니다. 그리고 각 하나의 컨텐츠는 180px로 되어 있고요...그리드로 정확히 나눈게 아니라 큰 의미는 없습니다. 

11번가 서브페이지중 한곳

1200px이라는 숫자는 2,4,5,6 grid 위주로 사용하기 쉽다

사실 1024해상도에서는 960 grid system이란 값을 사용했습니다. 그 확장버전이 1200 grid system입니다만 1200grid는 1200px은 아닙니다. 이 부분은 설명하면 좀 길어서 짧게 이야기 하면 grid system을 사용하면 표준화된 영역을 얻을수 있는 장점이 있습니다. 메인이든 서브든 장바구니든 내가 사용한 컨텐츠를 활용하는데 넓이값이 같아 적용이 편리하죠.

1200grid는 1200px은 아니다

이걸 보면 알수 있는데 grid는 1개의 column과 2개로 쪼개어진 gutter로 이우러져 있습니다. 

위에 이미지대로라면 80px이 하나의 grid가 되는것이지요. 이걸 쭉 연결하면 1200 grid에서 15컬럼으로 나누었을때 80px을 하나의 그리드로 사용하면 1180px이라는 숫자가 나옵니다. 

1180px은 여러모로 다양한 활용이 좋습니다. 항목을 2,3,4,5,6 등등 다양한 그리드로 나눠지기 때문입니다.

한예로 3개의 컨텐츠를 나눈다고 했을때 아래를 보시면

1200 grid를 사용하는 1180px 와이드값

컬럼의 와이드는 380px / 컬럼수는 3개 / gutter값은 20 / 이라고 나누면 1180이 만들어집니다. 

이걸 컬럼을 4개 5개 6개 다 쉽게 나눠진다는 뜻입니다. 

1200px일대는 3개 나누는게 어떨까요?

1200px 와이드값을 사용시

1200px일때는 어느 한 부분이 넘쳐나기 때문에 1201px이 되거나 모자릅니다. 

이건 쇼핑몰 디자인 해본 분들이라면 딱 나눠지지 않아서 여러번 숫자 계산을 경험했을리라 봅니다. 

그럼에도 11번가가 1200px을 썼다는건 장점이 있다는 것이고요. 

본인만의 그리드를 가지고 있다면 큰 문제는 없을거라고 판단됩니다. 

aliexpress 메인

알리 익스프레스의 경우도 각 그리드당 200px을 사용하고 있고 6개 컬럼으로 나누어 집니다.

1200px의 와이드값을 사용하고 있지요.

TAOBAO 메인

타오바오도 똑같이 그리도당 200px이고 6개 칼럼으로 나누어 져서 1200px의 와이드값을 사용합니다.

11번가와 해외쇼핑몰 와이드값 비교

11번가와 그 외 해외 쇼핑몰을 보면 다 1200px을 사용하는데 모니터 해상도가 더 커지고 모니터 크기도 커지기에 넓은 해상도로 갈것이라 예상할수 있습니다만 1024에 대응하는 부분은 좀 아쉽습니다. 

물론 2차오픈으로 1024 대응버전을 11번가가 현재 제작중일수도 있고요~ 

이상으로 11번가 리뉴얼에 대해서 좀 분석을 해 보았습니다. 정말 긴 글이지요...

객관적인 자료와 주관이 섞여 있어서 제 글이 어떻게 보일 지 모르겠습니다만 11번가는 현재 디자인 뿐만 아니라 다양한 시스템에서도 쇼핑쪽을 선두하고 있는 업체중 하나임에는 틀림없습니다. 

제가 온라인 쇼핑을 전혀 하지 않다가 옥션과 지마켓을 많이 이용한 적도 있었고 쇼셜쇼핑도 많이 이용했지만 어느순간 11번가에서 제일 많은 쇼핑과 시간을 보내고 있더라고요. 그만큼 자연스럽게 비교우위에 있는 11번가라서 애착과 관심이 있기에 이번 리뉴얼에 대해서 더 알고 싶었던 거였죠 ^^

이제 끝으로 결론인데...

사실 쇼핑몰 디자인은 논리적인 디자인이라고 생각합니다. 어느 하나 어느곳 그냥 디자인 되지 않고 왜 그 컨텐츠가 거기에 있는지 디자이너도 생각해야 제대로 된 화면을 구성할 수 있다고 생각됩니다. 

핵심전략을 파악하고 기획에 따라 디자인도 변경된다고 봅니다. 그래서 이쁘기마한 디자인은 성공할 수 없으며 기획파트와 함께 전체 전략을 이해하고 거기에 맞는 컨텐츠 전략 / UI전략을 짜야 성공할 수 있다고 생각합니다. 

드디어 다 썼네요..후후

긴 글 읽으시느라 고생 많으셨습니다. 첫글부터 아주 질리네요 =,.=;;;