Footer (PC/MO)

푸터는 화면을 구성하는 가장 마지막 요소로 헤더와 본문에서 원하는 정보를 찾지 못하였거나 사이트 구조 탐색 중에 길을 잃은 사용자들이 대면하게 되는 정보이다.

따라서 푸터에는 사용자가 서비스를 탐색할 수 있는 추가적인 수단, 문제를 해결하는 데 참고할 수 있는 유용한 링크가 제공되어야 한다.

주로 회사정보, 개인정보 정책, 소셜 미디어 정보 등이 포함된다.

Footer - Type2

PC

고객센터

000-0000-0000

  • 상호명비엔시스템
  • 대표자명엄요한
  • 주소서울특별시 노원구 화랑로 419-7, 에스에스 빌딩 3층
  • 사업자등록번호000-00-00000
  • 대표전화000-0000-0000
  • E-MAILbnsystem@email.com
  • FAX000-0000-0000

© COPYRIGHT ALL RIGHT RESERVED.

Mobile

<footer class="footer"> <div class="footer__inner"> <div class="footer_content top"> <ul class="footer_navigation"> <li class="navigation"><a href="#">회사소개</a></li> <li class="navigation navi-privacy"><a href="#">개인정보처리방침</a></li> <li class="navigation"><a href="#">이용약관</a></li> <li class="navigation"><a href="#">고객센터</a></li> </ul> <div class="footer_icons"> <a href="#" class="footer_icon icon-blog"></a> <a href="#" class="footer_icon icon-kakao"></a> <a href="#" class="footer_icon icon-facebook"></a> <a href="#" class="footer_icon icon-instagram"></a> <a href="#" class="footer_icon icon-youtube"></a> </div> </div> <div class="footer_content bottom"> <div class="footer_logo_center"> <div class="footer_logo"> <img src="../_img/common/logo.png" alt="" height="40"> </div> <div class="footer_center"> <h5>고객센터</h5> <p class="telNo">000-0000-0000</p> </div> </div> <div class="footer_company_info"> <ul class="company_info"> <li><span class="company_info_title">상호명</span>비엔시스템</li> <li><span class="company_info_title">대표자명</span>엄요한</li> </ul> <ul class="company_info"> <li><span class="company_info_title">주소</span>서울특별시 노원구 화랑로 419-7, 에스에스 빌딩 3층</li> <li><span class="company_info_title">사업자등록번호</span>000-00-00000</li> </ul> <ul class="company_info"> <li><span class="company_info_title">대표전화</span>000-0000-0000</li> <li><span class="company_info_title">E-MAIL</span>bnsystem@email.com</li> <li><span class="company_info_title">FAX</span>000-0000-0000</li> </ul> </div> <p class="copyright">&copy; COPYRIGHT ALL RIGHT RESERVED.</p> </div> </div> </footer>

사용성 가이드라인

  • 모든 페이지에 푸터를 일관된 위치에 제공해야 한다.

    -푸터는 페이지의 마지막 요소이므로 본문 하단에 배치해야 한다. 본문의 높이가 뷰포트 높이보다 짧은 경우 푸터가 뷰포트 하단에 고정되어 있는지 확인한다.

    footer CSS로 하단 고정

  • 개인 정보 처리 방침을 반드시 표시한다.

    -개인 정보 처리의 투명성 등을 알리기 위한 개인 정보 처리 방침은 반드시 웹사이트에 공개해야 하고, 변경된 경우 그 사항을 반영해야 한다. 또한 폰트 웨이트(Font weight)를 다른 정책링크보다 진하게 준다.

  • 전자상거래가 포함된 경우 이용약관을 반드시 표시한다.

    -인터넷쇼핑몰 등 전자상거래가 포함된 경우, 소비자가 안전하게 거래할 수 있도록 사업자의 신원, 거래 약관 등을 푸터에서 제공해야 한다.

공통 레이아웃

모든 푸터 섹션의 정보는 일관된 순서로 제공한다. 또한 화면너비가 줄어 병렬배치에서 수직배치로 변경되더라도 순서는 변하지 않도록한다.

  • A : 컨테이너 - 푸터가 제공되는 영역
  • B : 정책링크 - 웹 접근성, 개인 정보 처리 방침과 같은 각종 정책 링크가 제공됨. 폰트 사이즈 20px로 제작
  • C : 서비스 로고 - 기관/서비스 로고를 통해 디지털 서비스 운영 주체의 정체성을 전달하는 요소. 높이 40px로 제작
  • D : 회사정보 - 회사,대표자명 / 주소,사업자등록번호 / 문의방법 순으로 작성
  • E : 저작권 정보 - 회사 저작권을 명시한 텍스트
  • F : SNS 링크 아이콘 - 아이콘을 클릭하면 회사가 운영하는 SNS 계정으로 이동할 수 있음. 아이콘은 40px로 제작
  • G : 고객센터 정보 - 고객센터 운영시간, 번호 등 고객센터 정보를 제공하는 부분

디테일

모든 푸터 섹션의 정보는 일관된 순서로 제공한다. 또한 화면너비가 줄어 병렬배치에서 수직배치로 변경되더라도 순서는 변하지 않도록한다.

  • A : - 영역별 간격은 20px로 지정함
  • B : - ‘회사정보’ 구역의 폰트 사이즈(font size)는 14px로 지정함. 내용 사이 간격은 4px로 지정함
  • C : - 구별 선의 높이는 8px로 지정함
  • D : - 푸터의 위아래 여백은 40px로 지정함