NASA 청소부의 마음으로 Footer 만들기 -(2)
핵심은 반응형 웹에 대한 지식을 바탕으로 정보 구조를 짜는 것
안녕하세요 :)
오늘은 Footer에 대해 좀 더 이어서 얘기해보려고 합니다.
이전 글에서 Footer는 살짝 다루긴 했지만 푸터 얘기 보다는 '하찮아 보이는 일에서도 동기부여를 살리는 법'에 대해 포커스를 맞췄었는데요, 이번 글은 보다 더 디자이너스러운 글이 될 것 같아요 ㅎㅎ
동기부여를 원하시는 분들은 이전 글도 살짝 읽고 와주시면 이번 글을 읽는 목적을 찾는 데 더 도움이 될 것 같습니다 :)
https://brunch.co.kr/@designmonkey/3
아니 이 많은 정보들을 대체 어떻게 다 욱여넣으라는 거야?
Footer는 서비스의 페이지 끝까지 스크롤을 내린 유저의 발목을 다시 한번 붙잡고 새로운 흥미를 유도하는 구간인 동시에, 법적으로 반드시 명시해야 하는 회사 정보까지 들어가는 영역입니다.
그래서 푸터에 들어가야 하는 정보량은 많을 수밖에 없어요. 최소 사용성을 지키면서 푸터의 정보 설계를 짜다 보면 정말 청소부가 된 기분이 들 때가 있는데요, 정보의 중요도에 따라 사이즈와 컬러, 레이아웃 조정을 끝없이 하다 보면 Footer는 점점 두꺼운 발이 되어갑니다..^^
특히 모바일로 보는 푸터는 더 두꺼워보여요. 핸드폰 화면에 푸터가 꽉 차 보이거든요.
저는 왠지 푸터는 존재감이 없어야 될 것 같다는 고정관념을 갖고 있었어서, 푸터를 최대한 얇게 만들려고 온갖 애를 썼었어요.
'푸터는 뭔가 띠처럼 보이고 화면을 적게 차지해야 돼'라는 고정관념을 빨리 버렸더라면 고민의 시간을 줄이고 더 빨리 창의적이고 보기 편한 푸터 디자인의 세계로 넘어갈 수 있었을텐데 말이죠.
띠처럼 보이는 푸터는 너비가 높이보다 길다는 뜻인데, 이건 화면의 너비가 768px 이상은 되어야 그나마 조금 가능성이 있어요.
(768px은 아이패드를 세로로 세워서 봤을 때의 대략적인 화면 너비입니다)
핸드폰 화면은 세로로 더 길기 때문에 모바일에서도 띠처럼 보이는 푸터를 만들려면 글자를 아주 작게 넣어야 할 거예요. 그럼 아무도 정보를 읽을 수 없고, 버튼도 누를 수 없는 푸터가 되겠죠.
그러니 모바일 환경에서는 푸터의 형태적 고정관념은 던져버리고 마음 편하게 푸터로 화면 한 바닥 채워도 좋습니다.
하지만 데스크톱 환경에서 화면을 푸터로 꽉 채우면 넓은 화면에 글자가 듬성듬성 있는 것처럼 보여서 굉장히 휑해 보일 거예요. 데스크톱 사이즈에서부턴 우리가 익히 봐왔고 잘 아는 띠 형태의 푸터가 잘 어울리지요.
그렇다면, 똑같은 사이트인데 화면의 사이즈에 따라 푸터가 띠처럼 보였다가, 화면을 꽉 채울 만큼 길어졌다가 해도 되는 걸까요?
네 당연합니다!
그리고 그런 푸터를 만들기 위해서 디자이너가 알아야 할 것이 바로 반응형 웹입니다.
반응형 웹을 한마디로 정리하면, 화면 너비에 맞게 UI가 재배치되고, 리사이징 되는 웹사이트입니다.
화면 너비에 따라 콘텐츠가 세 줄이 되었다가 한 줄이 되었다가 하는 것을 많이 보셨을 거예요.
어떤 웹사이트는 모바일 화면 너비에선 '앱 설치 버튼'이 나오는데 데스크톱 화면 너비에선 '앱 설치 QR'이 나오기도 하고요. 화면 너비에 따라 사용자가 어떤 디바이스로 해당 사이트를 접근했는지 알아내서 그에 맞춘 CTA를 제공하는 경우이지요.
이렇듯 반응형 웹은 웹디자인을 하는 디자이너라면 반드시 거쳐가야 할 세계인데요, 반응형 웹에 대해잘 정리한 글을 공유합니다. 이 두 글을 읽으면 반응형 웹사이트를 쉽고 빠르게 이해하실 수 있을 거예요.
https://brunch.co.kr/@designsystemguy/8
https://brunch.co.kr/@designsystemguy/9
반응형 웹의 포인트는, 화면 너비마다 변화가 발생하는 기준점(Breakpoint)을 잘 잡고, UI 레이아웃과 리사이징 그리고 특정 컴포넌트 등장의 유무까지 제어할 것 입니다.
이 점을 잘 활용해서 만들어진 Footer의 사례들을 몇 가지 소개해볼게요.
반응형 웹 푸터의 교본
Spotify 멤버십 사이트의 푸터
https://www.spotify.com/kr-ko/premium/?checko=1439
개인적으로 참 시원시원하게 잘 디자인되었다고 생각하는 푸터 사례라 맨 처음으로 가져와보았습니다.
이 페이지의 목적은 스포티파이 멤버십 회원 수를 늘리는 것이고, 메인과 메뉴 구성은 멤버십 가입을 유도하고 있어요.
그런데 푸터는 조금 다른 목소리를 내고 있습니다.
이 페이지에서 푸터는 스포티파이라는 회사에 대해서 이야기하고 있어요.
스포티파이 멤버십을 가입하려고 해당 페이지에 접근한 유저는 스포티파이의 푸터를 보고 이 서비스의 커뮤니티는 어떻게 형성되어 있는지, 역사는 어떻게 되는지에 대한 정보를 얻을 수 있어요.
그냥 사람들이 많이 쓰는 서비스인 줄 알고 들어왔는데 생각보다 더 풍부한 리소스를 가진 서비스라는 걸 알게 되면 그전보다 더 큰 매력을 느낄 가능성이 높아지지 않을까요?
화면 너비가 1024px 일 때의 푸터
푸터의 정보구성 다음으로 눈여겨볼 것은 화면너비에 따라 달라지는 레이아웃이에요.
1024px과 768px은 화면의 기본 마진값도 다르고 grid 개수도 달라져요. 1 grid가 차지하는 너비도 다르고요.
360px로 가면 1 column으로 레이아웃이 바뀌었어요. 1024px때는 SNS 버튼들이 다른 카테고리 탭과 동일한 위계처럼 보였었는데 360px에서는 확실하게 서열정리가 되었죠.
이 사이트의 푸터는 너비 767px 까진 1 column으로 유지했다가 768px 이 되는 순간부터 3 column으로 바뀌고, 992px 이 되는 순간 5 column으로 grid 가 늘어납니다. 992px 이후부터는 사이트의 기본 margin 값이 늘어나고 푸터의 콘텐츠 영역 너비는 고정입니다. 보여주고 싶은 정보의 양에 맞춰 화면구간 기준으로 가변적인 영역과 고정적인 영역을 잘 설계한 훌륭한 반응형 웹의 푸터이지요.
이 많은 걸 다 정리해 냅니다
패스트캠퍼스의 푸터
국내 푸터의 저력을 말하고자 할 때 고개를 들어 패스트캠퍼스를 봅니다.
패스트캠퍼스의 푸터 디자인이 존경스러운 이유는 정말 모든 정보를 푸터에 다 넣었음에도 보기에 깔끔하단 점이에요.
이 푸터를 처음 보자마자 푸터 맨 위 탭 버튼이 보였었는데요, 패스트캠퍼스의 핵심 서비스는 아니지만 무시할 수 없는 중요한 기타 서비스들은 푸터 맨 상단에 배치함으로써 '탭 버튼에 올라가는 정보와 기능들은 그 밑의 정보들과는 결이 다르고, 더 자주 찾을 기능들이다'라는 메시지를 전달하고 있습니다.
할 말은 다 하지만 컬러는 그레이계열로 맞춰서 푸터의 존재감이 과하지 않게 디자인했어요. 그래서 이 푸터는 디자인이 세련되지는 않았지만 페이지의 마지막을 든든하게 지키는 수문장 같은 녀석이라고 생각합니다.
화면 너비가 1024px 일 때의 푸터
이 푸터가 다른 푸터에 비해 모바일 사이즈에서도 왠지 띠 형태의 푸터 느낌이 나는 이유는 정보 생략을 잘했기 때문입니다.
768, 360px의 예시 화면을 보시면 회사명 옆에 삼각형 모양의 버튼이 있어요. 이 버튼은 대표이사와 개인정보책임관리자 등등 유저 입장에서는 몰라도 서비스 이용에 크게 상관없는 정보들을 숨기는 버튼입니다. 화면 구간에 맞춰서 UI가 추가되고 적절한 정보 양을 조절해 준 사례입니다.
모바일이지만 2 column이 하고 싶어
Plursight의 푸터
모바일 사이즈에서는 1 column이 대세지만 그럼에도 꿋꿋하게 2 Column을 밀고 가는 뚝심 있는 푸터를 소개합니다.
이 푸터는 '뉴스레터'를 강조하고 있는데요, 좀 어색해 보이더라도 뉴스레터 카테고리의 영역을 넉넉하게 잡아주기 위해 다른 카테고리끼리의 grid 너비를 들쭉날쭉으로 잡아놓았습니다.
뉴스레터 강조는 360px에서 더 강하게 드러나고 있죠. 다른 카테고리들은 2 column이지만 뉴스레터 혼자 1 column을 쓰고 있습니다.
만약 푸터에서 제공하고 싶은 탭이 아주 많이 있는데, 너무 많은 공간을 차지하게 하고 싶지 않다면 이렇게 2 column으로 만드는 것도 좋은 방법이라고 생각해요.
서랍 속을 굳이 다 보여줄 필요 있을까?
Spotify 채용사이트의 푸터
패스트캠퍼스 푸터가 회사 정보만큼은 모바일 화면에서 숨겨놓았다면, 모든 카테고리의 탭 버튼을 숨겨놓은 푸터 사례를 소개합니다. 바로 Spotify 채용사이트의 푸터예요. 푸터에는 정보를 최대한 숨기지 말아야 한다는 제 고정관념을 깨 주었습니다.
1024px의 푸터
우리가 어떤 물건을 찾을 때 무작정 모든 서랍을 다 열지는 않잖아요. 내가 찾는 물건이 있을 것 같은 서랍을 먼저 열어보지요.
어질러진 방보다 정돈된 방에서 물건을 더 쉽게 찾을 수 있듯이, 이 방식도 화면의 심플함을 살리면서 푸터의 역할을 다 하는 좋은 답안이 된다고 생각합니다. 단, 서랍의 레이블링을 아주 잘 해야되지만요!
글을 마치며
이 글만으로는 푸터를 만드는 데 필요한 모든 정보를 다 얻어가실 수는 없을 거예요.
화면 구간에 따라 어떤 레이아웃 규칙을 갖고 있는지, 버튼과 텍스트 사이즈는 어떻게 바뀌는지 두루두루 살피기 위해 여러 사이트를 돌면서 직접 푸터를 뜯어보시게 될 겁니다.
하지만 100개의 레퍼런스를 본다고 해도 똑같은 반응형 규칙과 답을 제시하는 푸터만 본다면 결국 그건 레퍼런스를 한 개만 본 것과 같잖아요.
그래서 이번 글을 통해 푸터를 좀 색다르게 푼 4개의 사례를 소개하게 되었습니다. 이 예시들을 리서치 기준점으로 삼으셔서 리서치 시간과 노력을 절약하시고 해피디자인을 하시길 바라는 마음으로 꾹꾹 적었습니다.ㅎㅎㅎ
모든 디자이너분들 파이팅입니다!
.
푸터의 중요도에 대해서는 이전 글에서 짧게 다뤘는데 제 생각을 저보다 먼저 더 잘 정리해 주신 글을 찾아서 공유합니다! 데이터 관점에서 바라본 글이라 흥미로웠어요.
