본문으로 건너뛰기
Footer

Footer Design - 완성도 높은 웹사이트 푸터 디자인 레퍼런스 갤러리

웹 디자인푸터 디자인디자인 인스피레이션UI 레퍼런스

유형과 스타일로 분류한 웹사이트 푸터 인스피레이션 라이브러리. 타이포그래피형, 일러스트형부터 그리드, 카드, 모션형 푸터까지 걸러 볼 수 있고, 각 항목에 에디터 추천 표시와 원본 링크가 붙어 있습니다.

★ 9 최근 업데이트: 2026-11-08 footer.design
웹사이트 방문

상세 소개

푸터만 모아 놓은 갤러리

푸터는 보통 디자인 과정에서 가장 마지막에 처리되고, 가장 먼저 무너지는 부분입니다. 링크를 한데 쌓아 두고 저작권 문구를 대충 넣고 끝나기 일쑤죠. Footer Design은 잘 만든 푸터를 한곳에 모아서, 남의 사이트 전체를 한참 내려가며 하단을 찾아 헤매지 않아도 되게 합니다.

사이트는 스스로를 "지구상 유일한 푸터 갤러리"라고 소개합니다. 수록작은 스타일별로 페이지를 넘겨 볼 수 있고, 현재 65페이지 분량입니다. 각 항목에는 썸네일 프리뷰와 원본 링크가 붙어 있어서, 들어가 보면 타이포그래피와 간격, 인터랙션 처리를 온전히 확인할 수 있습니다.

필터 기준

유형과 스타일로 태그를 달아 두었는데, 클라이언트가 요구사항을 설명할 때 쓰는 언어와 꽤 비슷합니다.

  • Typographic, Large Type, Bold: 큰 글자 조판이 중심인 푸터
  • Small Type: 정보가 빽빽한 작은 글자 푸터
  • Illustrative: 일러스트를 얹은 표현형 푸터
  • Grid: 그리드 레이아웃
  • Flat: 장식 없이 평평한 구성
  • Animated: 모션이 들어간 푸터
  • Cards: 카드 형태로 나뉜 블록
  • Bright, Dark: 밝은 쪽과 어두운 쪽, 두 가지 방향
  • Info, Newsletter: 정보형과 구독형

Editor's Choice 선정 구역도 따로 있어서, 여기부터 훑으면 시간을 꽤 아낄 수 있습니다.

어떤 상황에 쓸 만한가

크게 두 경우에 유용합니다. 하나는 새 사이트의 디자인 방향을 잡으면서 푸터가 정보를 얼마나 담을지, 구독 창구를 넣을지를 정해야 할 때입니다. 다른 하나는 기존 사이트를 리뉴얼하면서 층위를 조금 더하고 싶을 때, 비슷한 스타일에서 참고할 만한 조판 구조를 바로 하나 골라 쓰는 경우죠. 디자인 팀과 프론트엔드가 "하단을 어디까지 다듬을 것인가"를 맞추는 데에도 유용합니다.

사이트는 NOOON이 만들었고, 제보도 함께 받고 있습니다.

Navbar Gallery - 방대한 웹사이트 내비게이션 바 디자인 인스피레이션 모음

잘 만든 웹사이트 내비게이션 바 디자인만 모아 둔 인스피레이션 갤러리. 정적, 드롭다운, Mega Menu, 사이드바, 검색 바 같은 유형으로 필터링할 수 있고, 각 항목에서 원본 사이트로 바로 이동해 실제 구현을 볼 수 있습니다.

웹 디자인내비게이션 바디자인 인스피레이션

Scrolltide - 스크롤 기반 시네마틱 웹 템플릿과 디자인 프롬프트 라이브러리

스크롤 기반 웹 템플릿, 컴포넌트, 셰이더를 프롬프트 형태로 모아 둔 라이브러리. 프롬프트 하나를 복사해 AI에 붙여 넣으면 AI가 만든 티가 나지 않는, 실제로 움직이는 웹사이트가 나옵니다.

웹 디자인프롬프트스크롤 애니메이션

shadcn/ui: 컴포넌트 라이브러리 구축

앱에 복사 및 붙여넣기할 수 있는 아름답게 디자인된 컴포넌트. 접근 가능. 맞춤형. 오픈소스.

develop

Variant – 아이디어 한 줄 입력하고 스크롤로 무한한 디자인 시안 만나기

앱이나 웹사이트 아이디어를 한 줄 입력하고 스크롤만 하면 끝없이 다양한 디자인 방향이 펼쳐집니다. 캔버스도, 프롬프트를 반복해서 쓰는 일도 없이 마음에 드는 시안에서 멈추면 그만. HTML과 React 코드로 내보낼 수 있습니다.

AI 디자인UI 생성디자인 영감

Anime.js: 경량 JavaScript 애니메이션 라이브러리

Anime.js는 HTML, SVG, CSS 등 다양한 요소의 애니메이션을 지원하는 효율적인 JavaScript 애니메이션 라이브러리로, 프론트엔드 개발자와 디자이너가 웹 애니메이션 효과를 빠르게 구현하여 사용자 경험을 향상시키는 데 적합합니다.

프론트엔드 개발웹 디자인

Stockimg AI | AI 사진 생성기: 로고, 아트, 스톡 이미지, 일러스트레이션

Stockimg은 AI로 구동되는 올인원 디자인 및 콘텐츠 생성 도구입니다. 로고, 일러스트레이션, 월페이퍼, 포스터 등을 쉽게 생성할 수 있습니다.

ai