emart-mall 홈페이지 제작방식을 알아보자!

이마트몰 홈페이지 제작방식을 알아보자!

 

 

[intro]

 

국내 대형 할인점 대표 브랜드 중 하나 이마트

다양한 혜택, 다양한 제품, 수많은 컨테츠를 개발하여

온라인 쇼핑몰 형태의 인터넷 슈퍼마켓으로 탄생한

이마트 몰 홈페이지는 어떤 형태로 홈페이지제작 했는지 살펴볼까요?

 

 

---

​

[Concept]

 

이마트몰 홈페이지는 로고 색상인 yellow를

메인 컬러로 사용하였는데요

전체적으로 파스텔톤의 색감을 사용한 바탕에

이미지와 텍스트를 삽입하여 깔끔하고

알려주고자 하는 이벤트나 상품을 강조하고 있네요.

 

[Main page]

첫 번째로 이마트몰 사이트의 메인페이지는

타 쇼핑사이트들과 다른 구조의 형태로

홈페이지 제작했는데요.

부분 별로 나누어 구조가 어떻게 만들어지고 동작하는지

더 자세히 알아볼까요?

 

 

[Main_top]

​

point1

이마트는 인터넷 mall로 다양한 업태를 운영중인데요

계열사 mall 홈페이지에 유동적으로 접속하고 홍보하기위해

홈페이지 상단에 계열사 사이트 이동 네비게이션이 있네요.

하나의 홈페이지에서 여러 개의 사이트로 빠르게 이동하는 구조가

사용자에게 편리함을 주는 것 같네요.

​

point2

이마트 몰에서는 쓱 배송이라는 배송 시스템을 이용하고 있는데

이는 사용자가 원하는 시간대에 배송을 받을수 있는 시스템인데요.

배송 시간을 확인할 수 있는 메뉴를 메인페이지 오른쪽에 배치하여

해당 시스템을 보여주고 있네요.

이런 시스템에 관련 된 메뉴를 메인페이지에 배치함으로써

사용자의 시선을 유도하여 시스템을 효과적으로

활용할 수 있는 구조인거 같아 좋은 것 같네요.

​

point3

이마트 몰 사이트 메인페이지의 슬라이드 이미지는

해당 메뉴에 마우스를 가져다 대면

해당 메뉴의 컨텐츠 이미지로 바뀌거나

시간이 지나면 바뀌게 홈페이지 제작 됬네요.

컨텐츠들 마다 각자 컨셉에 맞게 컬러가 변경되고

nav 메뉴 버튼에 소소한 효과가 저의 시선을 사로 잡는데

여러분은 어떠신가요?

 

1.

메인페이지의 사이드 메뉴는 이마트 몰의

상품페이지로 이동할 수 있는 nav인데요.

상위 상품 메뉴버튼에 마우스를 가져다 대면

하위 상품 메뉴가 나오네요.

이와 같은 구조는 쇼핑몰에서 흔히 사용하는 구조인데요.

개인적으로 하나 아쉬운 점이 있다면

하위 메뉴박스가 상위메뉴박스 라인에 맞춰 나오면

더 좋을 것 같다는 생각이 드네요.

 

[Main_middle]

​

main page 중반부는

쇼핑몰 홈페이지 답게 상품구매 관련 구조로 제작됬는데요.

쇼핑몰과 같은 사이트는

소비자의 구매욕을 상승 시키기 위해

상품을 홍보를 효과적이고 특별하게 해야합니다.

이를 위한 홈페이지 제작 방법을 고민하고 연구해야겠죠?

 

point1.

이마트몰 사이트에서는 상품을 효과적으로 보여주기 위해

상품에 마우스를 가져다 대면 이미지가 변경되면서

구매할 수 있는 버튼이 하위에 생성되고 있네요.

또, 쓱 배송과 관련된 상품에는 아이콘을 삽입해

해당 시스템을 이용할 수 있도록 유도하네요.

 

point2.

또한 메인페이지에서 다양한 색감으로

홈페이지 접속자의 시선을 사로 잡았다면

상품주문 이미지는 흰색 배경에 정렬된 레이아웃으로

상품 컨텐츠에 집중할 수 있도록 제작한 것이

좋은 것 같습니다.

​

1.

메인페이지에서 스크롤을 계속 하위로 이동하면

새로운 레이아웃구조의 이벤트/전단 페이지가 등장하는데요.

자칫 지루할 수 있는 이미지 나열을

크기와 배치의 이동만으로도 큰 변화를 주고 있네요.

2.

더보기 버튼을 누르면 해당 이벤트/전단 컨텐츠들이

하위로 생성되는데요.

더보기를 누를 때 마다 두 단락씩

나오게 하는 구조로 제작되었네요.

하위로 생성된 메뉴를 접을 수 있는 버튼도 있다면

좋을 것 같다는 개인적인 생각도 듭니다.

​

 

1.

메인 하단은 이미지 회원에게 맞춤형 상품을

제안하여 소비자의 구매욕을 활성화 하는 형태로

홈페이지 제작 되었네요.

구매 생각이 없던 상품도 이미지로 보여줌으로써

소비자에게 구매를 다시 한번

상기시켜주는 효과를 주는 장점인 것 같습니다.

2.

pagenate 버튼을 하단에 삽입하여

다양한 상품을 보여주고 있네요.

이는 쇼핑몰에서 여러 가지 상품을 보여주고 싶으나

하나의 페이지 안에서는 보여 지는 한계가 올 때

많이 사용하는 버튼인데

이마트 몰도 이를 홈페이지 제작 시

적극적으로 활용한 것 같습니다.

​

[sub page]

 

 

point1

이마트몰 홈페이지의 첫 번째 sub page ‘늘사던거‘에서는

소비자가 자주 구매하는 상품이미지를 끌어다가

배치를 하여 홈페이지 사용의 편리함을 강조 했는데요.

소비자 맞춤형 카테고리 페이지를 만들어

자주 구매하는 상품의 페이지 접속 해야될 상황에

편리함을 제공한 이마트 몰의 아이디어가

신선한거 같습니다.

이러한 작은 아이디어가 홈페이지 사용자에게

편리함을 제공하는 점 홈페이지 제작/ 앱 제작 할 때

중요하게 생각해야겠죠?

 

1.

첫 번재 서브페이지에서

스크롤을 내리면 nav bar가 상단에 생기도록

홈페이지 제작했네요.

 

point1

스크롤을 하위로 계속 내리면

보여지는 것과 같이

계란에 해당하는 상품들이 화면에 보여지면

nav bar 에서도 아이콘이 계란에

활성화가 되는데요.

이런 효과도 저에게는 또 신선함으로 다가왔습니다.

하나의 페이지를 제작할 때도

작은 효과와 움직임들로 사용자의

시선을 사로잡고 행위를 유도하는 것은

홈페이지 제작/앱 제작 할 때 중요하다는 것을

또 다시 깨닫게 됩니다:)

 

 

[Content style]

 

이마트 몰 홈페이지의 전반적인 content stlye은

선명한 컬러와 귀엽고 깔끔한 일러스트 아이콘을

활용하여 생기발랄한 분위기를 연출했는데요.

이러한 밝은 느낌은

기분 좋게 쇼핑할 수 있는 환경을 조성해

소비자의 구매욕을 상승시키는 효과가 생긴답니다.

홈페이지 제작 시 어떤 컨텐츠의 홈페이지냐에 따라

분위기 연출이 사용자에게

중요하게 작용한다는 점 잊지 말아야 겠죠?

 

 

[Footerstyle]

point1

이마트몰 홈페이지의 footer는 타 사이트들과 비슷한 형식으로 제작되었는데요.

point1에서 보이는 것과 사용자에게

강조하고 싶은 내용은 빨간색으로 포인트를 주어

시선을 끌고 있는 점보이시나요?

point2

또한 모바일 앱을 홍보하기위해

qr코드를 삽입하여

사용자에게 qr코드를 경험하게 하는

행위를 유도하고있네요.

 

 

마치며

현대사회에서는 수많은 쇼핑몰이 있죠.

그 수많은 쇼핑몰들은 다 각기 다른 컨셉을 보여주고

추구하고자 하는 방향성을 소비자에게 알려주고자 노력합니다.

이마트가 국내 최대 대형 할인점으로 성장하기 위해서

많은 노력을 했겠지만

그 중 하나인 쇼핑 사이트를 구축하는데 있어서도

노력을 게일리 하지 않았다는 것을

오늘의 홈페이지 분석에서 느낄수 있었는데요.

홈페이지 제작 또는 앱 제작 시 다른 기업들과 다른

방향성을 알리기 위해서 컨텐츠에 맞게 분위기를 연출하고

제작해야되는 것을 중점적으로 홈페이지 제작을 해야될것같죠?

저희 소프트랩스도 함께 고민해 나가겠습니다:)