배달의 민족 랜딩페이지 디자인 분석

 

이 포스트는 유명 랜딩페이지 디자인 분석 에서 학습한 기준점에 따라 배달의 민족 랜딩페이지를 분석한 글이다. 

유명 랜딩페이지 디자인 분석

 

배달의 민족 랜딩페이지: https://www.baemin.com/

대한민국 1등 배달앱, 배달의민족

 

배달의 민족 랜딩페이지 섹션별 디자인:

 

1.비주얼 컨셉

- CSS의 관점에서

브랜드 이미지를 각인시키기 위해 전체적으로 배달의 민족 앱 아이콘 색인 CMYK 65:0:29:0 (민트색) 으로 디자인하였다. 

색감을 최소한으로 사용함으로써 깔끔한 브랜드 이미지를 각인시켰다. 

자체제작한 폰트를 사용해 브랜드의 독창성을 강조하고, 일관된 헤더 사이즈와 왼쪽에 위치한 글의 구조로 깔끔함을 더했다. 전체적인 색감은 메인 로고와의 통일성을 잘 지켰다. 

 

또한 중간 하단에 '스크롤' 이라는 문자를 손글씨로 명시함으로써 더 많은 정보를 볼 수 있도록 친근하게 유도했다. 

오른쪽 중단에는 섹션(페이지) 의 총 갯수를 점으로 표현해 섹션의 이동에 따라 페이지의 위치를 시각적으로 알 수 있게끔 하고있다. 

 

상단 header는 sticky로 고정해 어느 section으로 이동해도 다운로드 버튼 (랜딩페이지의 궁극적 목표) 을 누를 수 있도록 만들었다. 

 

첫 섹션에선 다른 섹션들과 다르게 음식사진을 배경으로 함으로써 식욕을 자극, 사진 바로 하단에 다운로드 qr코드를 배치하면서 앱 사용을 유도했다. 

Catching phrase '공복에 떡볶이가 그리울 때' 또한 유저의 공감을 이끌어낸다.

 

글을 최대한 짧게 쓴 점 또한 가독성을 높인다.

 

2. UI 디자인적 완성도

전체 background 색상을 배달의 민족 상징색으로 설정했고, 그 위에 배달의 민족 자체 제작 폰트로 텍스트를 올린 형태이다. 큼지막한 헤딩의 크기는 적절하게 사용되었지만 부가설명을 위해 헤딩 밑이 작은 글씨로 쓰여진 글의 가독성이 떨어지는 단점이 있다. 

 

각 섹션마다 배민의 주요 기능들을 하나씩 소개하는 맥락으로 제작하였다. 

깔끔함을 위해서인지, 사용한 UI 컴포넌트가 많이 없다. 

CTA 목적 하나만 달성하기 위해서 애니메이션도 많이 넣지 않았다. 

 

반응형 웹 기법을 사용하였다. 어떤 창의 크기라도 디자인이 일관되게 깔끔하게 배치된다. 

컴퓨터보다는 폰으로 접속을 더 많이 한다고 판단한것 같다. 반응형 디자인이 폰 사이즈에 맞춰져있다. 

 

앱 다운로드나 클릭할수 있는 버튼들에 hover 기능을 붙였으면 더 좋았을 수도 있는데 붙이지 않은 모습이 보인다. 

왜인지 모르겠다. 

이건 공부해봐야할거같다. hover을 굳이 쓰지 않은 이유가 있나?

썼다면 유저 인터렉션 효과도 좋았을텐데 싶은 디자인이다. 사실 뭐가 버튼인지 모르겠다.

숨긴 버튼 찾기 이런건가...? 노린걸까...?

 

3. 컨텐츠의 내용과 맥락

딱 필요한 양의 컨텐츠만 담고있다. 

배달의민족 앱의 주요 성능들을 설명하였는데, 각 성능을 필요로 하는 사람들이 많이 모일거같다. 

하지만 앱 기능의 설명을 보충해주는 사진등이 있었다면 더 효과적이였을거 같다. 

 

전체적으로 사용자의 개별 체이지들에 대한 체류시간을 최소화할수 있게 만든 디자인이였다. 

이해하기 쉬운 깔끔한 레이아웃에 짧은 문구들이 효과적이였다. 

하지만 스크롤 시간은 생각보다 많이 걸렸다. 

스크롤을 내렸을때 바로 내려가지 않고 0.5초 정도의 딜레이가 있어보였다. 

다소 유저 입장에서는 답답함을 느낄 수도 있을거같다.