디자인 시안없이 혼자서 랜딩페이지를 만들어보려고 하니 UI가 막막했습니다.
그래서 여러 사이트를 보면서 어떻게 구성했는지 살펴보기로 했습니다.
헤더
우선 최상단에 보이게 되는 헤더부터 살펴보았습니다.
토스
PC
토스 소개 페이지
토스 채용 페이지
토스 페이먼츠
토스 블로그
토스의 서비스 별 페이지 및 블로그를 들어가보니 공통적인 규칙을 발견할 수 있었습니다.
max-width : 1140px
width: 92%
margin: auto
그리고 마우스를 메뉴에 올려놓으면(hover) 해당 메뉴의 디자인이 아래와 같이 보이게 됩니다.
채용 페이지와 페이먼츠 소개 페이지 같은 경우, 메인에 이미지나 영상이 있습니다.
헤더의 배경을 투명하게 만들어 이미지와 영상이 더 잘보이도록 해놓은 것을 확인할 수 있었습니다.
그리고 스크롤을 내리면 헤더의 배경을 흰색으로 지정해주고 있고,
position: fixed 를 이용해 스크롤을 내려도 헤더가 계속 보이도록 해놨습니다.
Mobile
왼쪽에는 동일하게 로고가 있고, 오른쪽에는 햄버거로 메뉴들을 보여주고 있습니다.
Spotify
PC
spotify는 breakpoint마다 max-width 를 지정해놨습니다.
min-width: 1200px 일 때는, max-width: 1170px
min-width: 992px 일 때는, max-width: 970px
992px보다 작을 때는, max-width: 750px 로 지정하고 있습니다.
그리고 hover 효과로는 spotify의 초록색으로 글자색이 바뀌도록 되어 있습니다.
로그인과 회원가입 메뉴는 |를 이용하여 분리시켜놓은걸 확인할 수 있습니다.
Mobile
토스와 똑같이 왼쪽에는 로고가 있고, 오른쪽에는 햄버거로 메뉴들을 보여주고 있습니다.
Netflix
PC
로그인 전에는 왼쪽에는 로고, 오른쪽에는 간단하게 언어선택과 로그인 버튼이 있습니다.
로그인 후에는 왼쪽에 로고, 메뉴, 오른쪽에는 검색과 알림 사용자에 대한 정보를 나타내고 있습니다.
max-width: 1920px 로 비교적 길게 해놨습니다.
Mobile
모바일에선 왼쪽에 햄버거 메뉴와 로고를, 오른쪽에는 검색칸을 두었습니다. (로그인 후)
오늘의집
PC
max-width: 1256px 설정이 되어 있었고,
좌우 padding은 1024px을 기점으로 60px, 40px 나누고 있습니다.
로고 옆에 서비스에 대한 메뉴들이 있었고, 오른쪽에는 검색창, 회원가입 및 고객센터 글쓰기 버튼이 있습니다.
Mobile
왼쪽에 햄버거 메뉴를, 가운데에 로고를 오른쪽에는 검색 아이콘과 장바구니 아이콘을 두어 3분할로 이루어져있습니다.
결론
PC
4개의 사이트를 비교해보고 알게된건 모든 사이트가 max-width를 두었다는 점이었습니다.
그리고 헤더를 2분할로 하여 왼쪽과 오른쪽을 나누고 있었습니다.
왼쪽에 로고만 두는 경우와 로고와 메뉴를 두는 방식이 있었습니다.
보여줄 카테고리가 많다면 로고 옆에 메뉴들을 두는 방식도 괜찮아보였습니다.
오른쪽에는 보편적으로 로그인 버튼이나 유저에 대한 정보가 있었고,
검색 기능이 있다면 검색에 대한 메뉴가 있었습니다.
Mobile
모바일웹 UI에는 전부 햄버거 메뉴를 사용하고 있었습니다.
PC에서 왼쪽에 메뉴가 있었던 사이트들(Netflix, 오늘의집)은 왼쪽에 햄버거 메뉴를 배치했고, 오른쪽에는 검색을 둔 것을 확인할 수 있었습니다.
오른쪽에만 메뉴가 있던 사이트들(토스, Spotify)은 오른쪽에 햄버거 메뉴를 배치해두었습니다.
위의 네 사이트를 비교해보면서 공통적으로 적용되어있던 max-width 설정, 햄버거 메뉴를 따라하기로 정했습니다.
그리고 현재 제가 구현하려는 페이지에는 많은 메뉴를 담고있지 않아 Spotify처럼 오른쪽에 메뉴와 로그인 을 둘 계획입니다!
디자이너분들.. 항상 리스펙합니다 ㅜㅜ
댓글