2013 UX Design Trend Report Part 3_SYS4U I&C

2013 UX Design Trend Report

Part 3

2013.02.01
UI/UX팀
마영희 주임

© 2013 SYS4U I&C All rights reserved.

목차
I. 쇼핑몰 트랜드 분석
II. 결론


I. 쇼핑몰 트랜드 분석
I. 각 쇼핑몰 웹사이트의 장단점
II. 각 쇼핑몰 모바일 사이트의 장단점


I. 각 쇼핑몰 웹사이트의 장단점
I. 롯데아이몰
II. 롯데닷컴
III. 롯데백화점
IV. 롯데슈퍼
V. CJ Mall
VI. AK Mall
VII. GS Shop
VIII. H Mall
IX. 신세계
X. 이마트


1. 롯데아이몰
1. Top/Main 영역

장점
롯데 아이몰은 롯데 고유의 레드 컬러로 포인트를 주었다. 최 상단에 배너는 유저의 시선을 한번에 사로잡아 구매
력을 높일 수 있을 것으로 기대된다. 이 사이트의 독특한 점은 메인 바의 구성이다. 고유영역 마다 컬러를 다르게
사용하여 구분을 더 쉽게 하여 유저의 혼란을 방지하였다. 또한 구분이 잘됨과 동시에 조화로운 컬러를 사용함에
따라 전체적인 밸런스도 잘 맞는다.


1. 롯데아이몰
2. Middle영역

장점
이 영역에도 역시 사이트 전체의 색 밸런스를 유지하면서 각각의 컨텐츠를 배치하였다.
단점
메인 비주얼 영역에서 상품의 전환속도가 너무 빨라서 하나의 상품에 집중할 수 없다. 보여줄 상품이 영역에 비해
많아서 인 것 같지만 유저에게는 다소 산만에 보일 수 있다는 단점이 있다.


2. 롯데닷컴
1. Top/Main 영역

장점
롯데 닷컴은 고유의 계열의 컬러를 사용하여 사이트 전체를 구성하였다. 강조할 부분만 블루를 사용하고 나머지는
그레이 톤을 사용하여 컨텐츠의 집중도를 높였다. 사람의 시선흐름을 고려하여 상단과 왼쪽부터 강한 색을 사용하
였다.
단점
블루 계열의 컬러가 그레이톤과 잘 어울리긴 하지만 다소 밋밋해 보이는 경향이 있다.

2. 롯데닷컴
2. Middle 영역

장점
이 영역에서는 아이콘을 사용함으로써 컨텐츠 별 차별성을 강조 하였다. 소비자의 시선을 잡기 위한 다양한 아이콘
이 많이 사용되었다.


3. 롯데백화점
1. Top/Main 영역

장점
롯데백화점 사이트는 백화점 사이트답게 전체적으로 고급스러운 분위기의 컬러로 구성되어있다. 브라운 계열의
컬러를 사용해서 가벼워 보이지 않고 또한 로고의 아이덴티티를 그대로 사이트에 잘 나타내었다.
다른 사이트와의 차이점은 bg에 사용된 패턴이다. 다소 심심할 수도 있는 bg에 패턴을 사용함으로써 전체적인 사
이트의 분위기를 반전시켰다. 또한 각진 형태의 구성이 아닌 물결무늬를 사용한 컨텐츠는 구성도 흥미롭다.


3. 롯데백화점
2. Middle 영역

장점
전체적인 깔끔한 구성이 돋보인다. 컨텐츠 영역간에도 여백을 주어 쇼핑몰의 답답함을 해소시켰고, 영역구분도 한
눈에 잘 된다.
퀵 메뉴 에도 메인 영역에 사용된 물결무늬를 그대로 사용하면서 통일감을 잘 살렸다.


4. 롯데슈퍼
1. Top/Main 영역

장점
식품을 주 상품으로 하는 롯데 슈퍼는 식품의 신선함과 안전함을 강조하기 위한 색 구성이 돋보인다. 채소의 색깔
과 유사하고 신선함을 잘 나타낼 수 있는 그린계열의 컬러를 메인 으로 사용하였다. 또한 깨끗하고 깔끔한 이미지
를 많이 사용하여 소비자가 직접 눈으로 보고 상품을 구매하는 것과 같은 효과를 주었다.

단점
너무 과도한 컨텐츠로 인해 시선이 많이 분산 되는 경향이 있다.

4. 롯데슈퍼
2. Middle 영역

장점
유저의 시선을 메인으로 집중시키기 위해 메인 영역 보다는 차분하게 구성되어 있다. 깔끔한 이미지와 폰트 하나
만을 사용하여 그리드 구성이 조화롭게 되어있다.


5. AK mall
1. Top/Main 영역

장점
AK몰은 고유의 컬러를 사용하여 전체적인 메뉴와 컨텐츠를 구성하였다.

단점
깔끔한 형식의 그리드를 사용하였지만 다소 밋밋한 느낌이 있다. 또한 강조되는 특별한 부분이 없어서 시선이 많이
분산된다. 메인 비주얼 영역이 다소 작아서 집중되지 않는다.


5. AK mall
2. Middle 영역

장점
설 이벤트영역에 다른 영역보다 집중도 높은 컬러를 사용하여 유저의 시선을 잡았다. 그로 인해 소비자의 구매력을
높였다.


6. CJ mall
1. Top/Main 영역

장점
CJ Mall의 독특한 점은 우측 영역이다. 우측에 가장 크게 이미지 영역을 배치하면서 다른 사이트와의 차별성을 두
었다. 또한 이 영역은 사이드 바 형식이어서 접고 펼칠 수가 있다. 조금 잘린 듯이 영역을 보여주어 유저로 하여금
궁금증을 유발 시켰다.

단점
우측의 사이드 바가 독특하긴 하지만 처음 방문한 유저에게는 다소 생소할 수 있다.


6. CJ mall
2. Middle 영역

단점
디자인적으로 특별한 점이 없고 다소 심심한 구성이어서 유저의 시선을 잡지는 못하는 영역 같다.


7. GS Shop
1. Top/Main 영역

장점
GS shop의 독특한 점은 다른 쇼핑몰사이트와는 다르게 레프트메뉴가 메인 영역에 없다는 점이다. 그로 인해 메
인 영역을 크게 가져가서 많은 컨텐츠를 구성하여 보여줄 수 있었다. 전체적인 컬러도 고유의 색인 그린을 사용하
여 조화롭게 구성하였다. 또한 TV쇼핑 영역이 따로 존재하여 인터넷과 TV쇼핑이 자연스럽게 연동되었다.

단점
레프트 영역의 실종은 영역을 크게 쓸 수 있다는 장점이 있지만 오히려 유저에게 혼동을 야기시킬 수 있다는 단점
도 있다.

7. GS Shop
2. Middle 영역

단점
메인 에서 없어진 레프트 영역이 이 부분에 존재한다. 이로 인해 유저들에게는 많은 혼동을 줄 수 있다.


8. 현대 H Mall
1. Top/Main 영역

장점
현대 H mall은 GS Shop과 마찬가지도 TV 방송영역이 존재하여 인터넷에서도 TV에 나왔던 물건은 쉽게 구매할 수
있다.

단점
전체적으로 비비드 톤의 컬러를 많이 사용하여 밋밋한 경향이 많고 집중되는 컬러가 없어서 컨텐츠에 시선이 고정
되지 않는다.

8. 현대 H Mall
2. Middle 영역

장점
백화점 상품을 전시영역이 존재하여 백화점 상품에 쉽게 접근이 가능하다. 영역마다 여백을 많이 주어서 답답함을
해소 시켰다.


9. 신세계
1. Top/Main 영역

장점
신세계 몰은 레드와 브라운을 조화 시켜 고급스러움을 한껏 강조 하였다. 레프트 영역을 레드 컬러로 사용하여 시
선을 집중시켰으며, 검색 바를 강조하여 유저의 검색편의성을 도왔다. 또한 최 상단에 배너 영역을 크게 배치하여
중요한 상품영역에 이목을 집중시켰다.
우측에는 백화점 영역이 존재하여 각 점마다 상품을 구분해서 볼 수 있도록 했다.


9. 신세계
2. Middle 영역

장점
전체적으로 차분한 컬러를 많이 사용하여 깔끔함이 돋보인다. 좌측에는 HOT KEYWORD 영역이 존재하여 상품순
위에 따라 접근할 수 있도록 도왔다.

단점
각 영역별로 구분이 명확하지 않아 다소 산만한 느낌을 받는다.


10. 이마트
1. Top/Main 영역

장점
식품을 판매하는 사이트답게 전체적으로 밝은 느낌의 컬러를 많이 사용하였다. 특유의 옐로우 컬러로 Top 메뉴를
구성하여 시선을 집중시킨다. 또한 메인바의 색다른 폰트를 사용함으로써 다소 딱딱할 수 있는 사이트를 친근한 분
위기로 전환 시켰다. 메인 비주얼 영역의 크게 이미지를 사용하여 상품을 강조 하였다. 컨텐츠와 다르게 bg 컬러는
차분하게 사용하여 컨텐츠를 한층 강조 하였다.


10. 이마트
2. Middle 영역

장점
이 영역은 전체적으로 깔끔하고 깨끗함이 돋보인다. 이미지와 폰트만을 간단하게 사용하여 여백을 많이 주고
가독성을 높여 상품에만 집중할 수 있도록 했다. 또한 강조될 부분 이외에는 그레이톤을 사용하였다.


I. 각 쇼핑몰 모바일사이트의 장단점
I. 롯데아이몰
II. 롯데닷컴
III. 롯데백화점
IV. CJ Mall
V. AK Mall
VI. GS Shop
VII. H Mall
VIII. 신세계
IX. 이마트


1. 롯데아이몰 모바일
1. Main 영역

장점
롯데 아이몰 웹과 마찬가지로 레드계열의 컬러를 사용하
여 포인트를 주었다.
전체적으로 모바일 사이트답게 간단하고 터치가 쉬운 메
뉴 구성이 돋보인다.


2. 롯데닷컴 모바일
1. Main 영역

장점
메인 바에 고유의 블루 컬러만을 사용하고 전체적으로 간
단하게 구성하였다.
단점
전체적으로 돋보이는 컨텐츠가 없어서 상품이 눈에 잘 띄
지 않는 단점이 있다.


3. 롯데백화점 모바일
1. Main 영역

장점
롯데 백화점 웹사이트와 흡사한 사이트 구성이 돋보인다.
고유의 물결무늬도 사용되어 통일감을 강조하였다.
메인에 추천상품영역에 아이콘을 적절히 사용하여 가독
성이 좋다.


4. CJ Mall 모바일
1. Main 영역

장점
전체적으로 여백이 많아 터치가 수월한 장점이 있다.

단점
전체적인 컬러가 다소 밋밋하여 사이트가 단조로운 느낌
이 강하다.


5. AK Mall 모바일
1. Main 영역

장점
메인비주얼 영역에 이미지를 크게 배치하면서 사용자를
주목시켰다.

단점
각각의 영역마다 색이 비슷하여 구분이 쉽지 않다.


6. GS SHOP 모바일
1. Main 영역

단점
전체적으로 그레이톤으로 구성되어 주목되는 영역이 없
다. 또한 고유의 컬러도 적용이 안되어서 gs의 이미지가
잘 나타나지 않았다.


7. 현대 H Mall 모바일
1. Main 영역

단점
그리드 구성이 혼란스럽다. 정리된 느낌이 덜해서 컨텐츠
에 집중하기에 어려움이 있다.


8. 신세계 모바일
1. Main 영역

장점
전체적으로 구성이 깔끔하고 웹을 적절하게 옮겨 왔다.
전체적인 컬러 밸런스가 좋아서 작은 화면으로 보기에도
불편함이 없다.

강조될 부분과 아닌 부분을 컬러로 적절하게 나타낸 것
같다.
단점
컨텐츠간의 여백이 부족하여 터치할 때 불편함이 있을 수
있다.


9. 이마트몰 모바일
1. Main 영역

장점
깔끔한 구성이 돋보인다. 가독성이 높은 글씨와 이미지로
상품의 분류가 쉽다.
컨텐츠 영역이 커서 접근하기가 쉽다.


II. 결론
I. 결론


1. 결론

1. 최 상단 배너의 강조
거의 대부분의 사이트에서 최 상단에 배너를 사용하여 소비자의 집중도를 메인으로 이끌고 있다.

2. 다양한 그리드 구성
사람의 시선흐름을 고려한 그리드 구성이 주류를 이루고, 각 사이트 별로 자신만의 차별성을
강조한 그리드 구성이 많아졌다.

3. 편집디자인
각각의 컨텐츠를 편집디자인 형식으로 깔끔하게 구성한다.

각 사이트는 대부분 로고컬러를 메인 컬러로 사용하고 그와 어울리는 컬러를 부수
적으로 사용하여 사이트를 구성하는 경향이 강했으며, 최 상단의 배너를 대부분
사용 하였고, 메인에 대한 강조를 가장 중요시 했습니다.
메인비주얼 영역의 크기가 많이 줄어든 대신에 더 많은 컨텐츠를 넣기 위한 그리
드의 세분화가 이루어졌습니다.
또한, 기존사이트와는 다르게 그리드를 구성하여 차별성을 강조 하는 곳도 많았습
니다.


2013 UX Design Trend Report Part 3_SYS4U I&C

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

More from sys4u

More from sys4u (11)

2013 UX Design Trend Report Part 3_SYS4U I&C