디자인 레퍼런스 사이트

7개 · 2026년 10월 17일 갱신

랜딩, 앱 화면, 소셜 포스트를 볼 때 여는 갤러리예요. 무엇을 모아 둔 곳인지, 언제 열면 좋은지 적어 뒀어요.

디자인영감
랜딩페이지
레퍼런스
웹디자인
갤러리
템플릿
animation
web-design
3d
마케팅
발표카드
브랜딩

posts.design
체험
posts.design — 소셜 포스트 디자인 영감 라이브러리
860개 이상의 브랜드가 실제로 소셜에 올린 포스트, 헤더, OG 이미지를 매일 모아 보여줘요. 제품 업데이트, 런칭, 발표 카드 같은 유형별로 나눠 볼 수 있어요.
소셜 포스트나 OG 이미지 디자인의 레퍼런스를 브랜드별, 유형별로 찾아보고 싶을 때 써요.
주의: 가입 후 이용하는 기능이 있을 수 있고, 각 이미지의 저작권은 원 브랜드에 있어요.
60fps.design
체험
60fps - UI/UX 애니메이션 영감 모음
유명 iOS 앱과 웹 앱의 애니메이션과 인터랙션 디테일을 2천 개 넘게 모아 둔 큐레이션 사이트예요. 앱별, 유형별로 필터링해 볼 수 있고 모션, 스니펫, MCP 같은 부가 자료도 있어요.
버튼, 탭 전환, 로딩 같은 UI 모션을 설계하기 전에 실제 앱의 레퍼런스를 찾아보고 싶을 때 써요.
주의: 전체 필터는 PRO(좌석당 월 15달러)이고, MCP는 PRO와 별도 구독이에요. 샷 영상의 재사용 조건은 확인되지 않았어요.
details.so
체험
Details.so – 웹 디자인 영감 라이브러리
실제 웹사이트의 히어로, 푸터, 프리로더, 페이지 전환, 스크롤 애니메이션 같은 디테일을 매주 골라서 보여줘요. 필터와 자연어 검색으로 원하는 섹션 사례를 빠르게 찾을 수 있어요.
랜딩 페이지나 포트폴리오를 만들면서 섹션별 디자인과 인터랙션 레퍼런스가 필요할 때 써요.
주의: 코드와 전체 라이브러리, MCP는 유료 플랜이에요. 같은 사이트 안에서 플랜 이름과 가격이 서로 달라 정확한 요금은 결제 화면에서 다시 확인하세요.
land-book.com
Landbook - website design inspiration gallery
매일 업데이트되는 웹사이트 디자인 큐레이션 갤러리예요. 랜딩, 포트폴리오, 이커머스 등 유형과 스타일, 업종별로 필터링해서 볼 수 있어요.
새 웹사이트나 랜딩 페이지를 기획하면서 참고할 디자인 레퍼런스를 찾을 때 써요.
주의: 무료 플랜은 카테고리, 필터, 검색 결과가 제한되고 일부 기능은 PRO 구독이 필요해요.
onepagelove.com
One Page Love
2008년부터 직접 골라 모은 원페이지 웹사이트 9천여 개와 섹션 예시 9천여 개를 보여주는 갤러리예요. 카테고리, 스타일, 플랫폼, 기술 스택별로 필터링할 수 있고 템플릿과 OG 이미지 생성 같은 도구도 있어요.
랜딩 페이지나 포트폴리오를 만들기 전에 비슷한 디자인 레퍼런스와 섹션 구성 예시를 찾고 싶을 때 써요.
주의: 일부 항목은 스폰서 광고이고 템플릿 중에는 유료가 많아요.
styles.refero.design
Refero Styles – Website Styles & DESIGN.md Library
실제 제품 웹사이트 2,000개 이상의 스타일을 색상, 타이포그래피, 간격, 컴포넌트와 함께 AI가 읽을 수 있는 DESIGN.md로 정리해 둔 라이브러리예요. Cursor, Claude Code, Codex, v0, Lovable 같은 도구에 붙여 원하는 디자인 방향을 바로 적용할 수 있어요.
AI 코딩 도구로 UI를 만들 때 참고할 디자인 시스템이나 DESIGN.md 예시를 찾고 싶을 때 써요.
주의: 2,000개 이상은 사이트가 밝힌 수치예요. 스타일별 사용 조건은 확인되지 않았어요. 파일이 저장소에 있는 VoltAgent/awesome-design-md가 에이전트용으로는 더 안정적이에요.
getlayers.ai
GetLayers AI
웹 템플릿, 3D WebGL 씬, 애니메이션 배경, 그라디언트를 프롬프트 하나로 복사해 AI에 붙여넣을 수 있는 라이브러리예요. MCP와 Figma 연동, 텍스트 애니메이션이나 커스텀 커서 같은 디자인 도구도 함께 제공해요.
AI로 만든 사이트가 밋밋해 보여서 시네마틱한 3D나 모션 디자인을 프롬프트로 입히고 싶을 때 써요.
주의: 전체 프롬프트와 상업 라이선스는 Unlimited 플랜, 소스와 3D, MCP는 Full Stack 플랜이에요. 계정 없이 복사되는 무료 레이어도 있어요. 성능 수치는 제작자 주장이에요.