웹 디자인·UI 레퍼런스 모음: 인터랙션, 3D, 컴포넌트 갤러리
히어로 섹션, 내비게이션, 모션·3D, UI 컴포넌트와 웹사이트 갤러리를 주제별로 모았습니다. 디자인 영감과 실제 재사용 가능한 코드·에셋은 구분하고 각 사이트의 이용 조건을 확인하세요.
웹사이트 갤러리, 히어로 섹션, 내비게이션, 모션·3D, UI 컴포넌트처럼 디자인 작업 중 참고할 링크를 주제별로 모았습니다. 일부는 아이디어를 살펴보는 갤러리이고 일부는 컴포넌트나 코드를 제공하므로, 실제로 재사용할 수 있는 범위는 서비스별 안내를 확인하세요.
필요한 레퍼런스부터 찾기
페이지 구조나 첫 화면 구성이 필요하면 히어로·웹사이트 갤러리를, 상호작용의 흐름이 필요하면 모션·3D 자료를, 구현 가능한 요소가 필요하면 컴포넌트 라이브러리를 살펴보는 식으로 목적을 좁히면 탐색하기 쉽습니다.
참고와 재사용은 구분하기
화면을 참고할 수 있다는 뜻이 이미지·코드·브랜드 요소를 복사해도 된다는 뜻은 아닙니다. 실제 프로젝트에 적용하기 전에는 라이선스와 출처 표시 조건을 확인하고, 모바일 성능과 키보드 접근성도 별도로 점검하세요.
📌 에디터 추천 플랫폼 상세 가이드 및 특징
01. GetDesign AI
GetDesign AI는 AI 에이전트와 LLM 프롬프트가 즉각 파싱할 수 있도록 구조화된 DESIGN.MD 명세 및 가이드를 생성해 주는 특화 플랫폼입니다. 디자인 토큰, 타이포그래피 규칙, 간격 체계 등을 마크다운 규격으로 정량화하여 Vibe Coding이나 AI 기반 프론트엔드 빌드 워크플로우의 일관성을 크게 끌어올립니다. Cursor, v0, Bolt 등의 생성형 개발 도구에 시스템 프롬프트로 주입하여 개발 초기 단계의 디자인 시스템 불일치 문제를 해결하는 데 매우 적합합니다.
02. Posts Design
Posts Design은 글로벌 테크 기업 및 크리에이티브 브랜드의 고품질 소셜 미디어 그래픽과 오프사이트 마케팅 에셋을 집중 아카이빙하는 플랫폼입니다. X(트위터), 링크드인, 인스타그램 등 채널별 피드에서 유저의 시선을 사로잡는 타이포그래피 배치, 데이터 시각화 카드, 프로모션 배너의 최신 트렌드를 한눈에 조망할 수 있습니다. 마케팅 랜딩 페이지의 오픈그래프(OG) 이미지나 제품 업데이트 공지용 비주얼 에셋을 제작할 때 실질적인 벤치마킹 소스로 활용하기 좋습니다.
03. Loadmore
Loadmore는 과감한 타이포그래피와 혁신적인 레이아웃을 채택한 모바일 웹사이트 및 반응형 인터페이스를 선별해 선보이는 모바일 전문 갤러리입니다. 작은 뷰포트 안에서도 시각적 임팩트를 극대화하는 수직 스크롤 인터랙션과 풀스크린 오버레이, 제스처 기반 UI 패턴을 심도 있게 탐색할 수 있습니다. 모바일 퍼스트 프로덕트를 기획하거나 고정관념에서 벗어난 크리에이티브 모바일 웹 경험을 구현하고자 하는 실무자에게 탁월한 방향성을 제시합니다.
04. Recent Design
Recent Design은 글로벌 디지털 프로덕트와 인터랙티브 웹사이트 중 가장 뛰어난 최신 결과물을 매일 큐레이션하여 제공하는 피드형 아카이브입니다. 실시간으로 변하는 모던 웹 디자인 트렌드, 글래스모피즘, 브루탈리즘, 미니멀리즘의 진화 양상을 일자별로 체계적으로 추적할 수 있어 리서치 시간을 획기적으로 줄여줍니다. 팀 내 주간 디자인 스프린트나 프로젝트 킥오프 시 무드보드를 빠르게 빌드업하는 데 매우 유용한 베이스캠프 역할을 합니다.
05. 60fps Design
60fps Design은 웹 및 모바일 인터페이스의 마이크로 애니메이션, 트랜지션, 정교한 상태 변화 인터랙션만을 프레임 단위로 수집한 모션 특화 라이브러리입니다. 버튼 호버, 모달 전환, 스크롤 트리거, 로딩 인디케이터 등의 유기적인 모션 커브를 직접 확인하며 UI 피드백의 완성도를 높일 수 있습니다. Framer Motion, GSAP, CSS Keyframes를 활용해 인터랙션을 코드로 옮기는 프론트엔드 개발자에게 정확한 가이드라인을 제공합니다.
06. Supahero
Supahero는 SaaS, 커머스, 테크 스타트업 웹사이트의 첫인상을 결정짓는 '히어로 섹션(Hero Section)'만을 집중적으로 수집한 컴포넌트 갤러리입니다. 가치 제안 카피라이팅, 헤드라인과 서브텍스트의 계층 구조, 3D 에셋 및 일러스트레이션의 화면 배치 기법을 비교 분석할 수 있어 랜딩 페이지 이탈률을 낮추는 데 기여합니다. 프로젝트 착수 시 클라이언트 미팅용 와이어프레임 레퍼런스를 수립하거나 A/B 테스트 설계를 준비할 때 강력한 통찰을 지원합니다.
08. CTA Gallery
CTA Gallery는 가입, 결제, 다운로드 등 비즈니스의 최종 목표 달성을 유도하는 고전환율 콜투액션(Call To Action) 영역 패턴을 모아둔 사이트입니다. 시선을 집중시키는 버튼 컬러 대비, 행동 유도 마이크로카피, 입력 폼 필드와 보증 마크(Trust Badge)의 최적 조합 사례를 실증적으로 제공합니다. 그로스 해커와 UI/UX 디자이너가 랜딩 페이지의 CVR(전환율)을 극대화하기 위한 실험 가설을 수립할 때 즉시 적용 가능한 실무 팁을 제공합니다.
09. Inspora
Inspora는 브랜드 아이덴티티, 실험적 디지털 그래픽, 감각적인 웹 레이아웃을 총망라한 현대적 감각의 비주얼 디자인 아카이브입니다. 기존의 정형화된 UI 템플릿의 틀을 깨는 대담한 컬러 팔레트, 3D 비주얼, 타이포그래피 실험을 탐색하여 크리에이티브 시야를 확장할 수 있습니다. 테크 브랜딩 리뉴얼, 디자인 에이전시 쇼케이스, 포트폴리오 제작 등 독창적인 시각 언어가 필요한 프로젝트의 메인 인스피레이션 소스로 추천합니다.
10. Scrolltide
3D 그래픽과 스크롤 기반 인터랙티브 웹사이트 제작을 위한 600개 이상의 수상 경력 프롬프트 및 전체 소스 코드를 제공하는 플랫폼입니다. 원하는 디자인의 프롬프트를 복사하여 Claude, Cursor 또는 Lovable 같은 AI 도구에 붙여넣기만 하면 즉시 라이브 환경에서 실행하고 내 프로젝트에 맞게 편집할 수 있습니다. 복잡한 3D 웹 구현의 진입 장벽을 획기적으로 낮춰주어 빠른 프로토타이핑에 최적화되어 있습니다.
11. Awwwards
전 세계 웹 디자이너와 개발자들의 창의성, 기술력, 사용성을 종합 평가하여 실제로 수상한 최정상급 웹사이트들을 소개하는 글로벌 어워드 플랫폼입니다. 최신 웹 트렌드와 실험적인 레이아웃, 고도화된 인터랙션 사례를 매일 새롭게 탐색할 수 있어 기획 단계에서 강력한 영감을 제공합니다. 사이트별 사용된 기술 스택과 컬러 팔레트, 타이포그래피 정보까지 상세히 분석해 볼 수 있습니다.
12. Godly
웹상에서 가장 혁신적이고 진지한 제작 기술이 집약된 하이엔드 웹사이트들을 엄선하여 큐레이션해 주는 디자인 갤러리입니다. 정적인 이미지가 아닌 실제 사이트의 부드러운 스크롤과 마이크로 인터랙션을 영상 프리뷰 형태로 직관적으로 확인할 수 있습니다. 프레임워크, 산업군, 스타일별로 세밀한 필터링이 가능해 목적에 맞는 고품질 레퍼런스를 빠르게 찾는 데 유용합니다.
13. 21st.dev
전 세계 프론트엔드 커뮤니티에서 검증된 고품질 UI 컴포넌트를 내 프로젝트에 곧바로 복사해 붙여넣을 수 있도록 지원하는 오픈 마켓플레이스입니다. React와 Tailwind CSS 기반의 모던한 디자인 블록들이 다양하게 준비되어 있어 바닥부터 UI를 짜는 시간을 대폭 단축해 줍니다. 실시간 프리뷰를 통해 동작을 미리 테스트하고 필요한 의존성 패키지 설치 명령어까지 원클릭으로 복사할 수 있습니다.
14. Aceternity UI
방문자의 시선을 단숨에 사로잡는 강렬한 시각적 임팩트와 화려한 인터랙션을 가진 애니메이션 컴포넌트 라이브러리입니다. 3D 카드 호버 효과, 빛나는 배경 그라데이션, 역동적인 스크롤 패럴랙스 등 최신 테크 스타트업 웹사이트에서 볼 법한 세련된 UI 요소를 손쉽게 구현할 수 있습니다. Tailwind CSS와 Framer Motion을 기반으로 작성되어 기존 모던 웹 환경에 매끄럽게 통합됩니다.
15. Magic UI
제품의 가치를 돋보이게 만드는 매력적인 랜딩 페이지 구축에 특화된 프론트엔드 애니메이션 컴포넌트 및 템플릿 모음입니다. 벤토 그리드(Bento Grid), 무한 마키(Marquee) 슬라이더, 파티클 효과 등 전환율을 높이는 데 검증된 시각적 장치들을 간단한 코드 복사로 즉시 적용할 수 있습니다. 디자인 엔지니어링에 들어가는 리소스를 아끼면서도 완성도 높은 상업용 웹페이지를 제작할 때 필수적인 도구입니다.
16. Three.js
별도의 플러그인 없이 웹 브라우저 상에서 하드웨어 가속을 활용한 고성능 3D 그래픽을 구현할 수 있도록 이끄는 표준 자바스크립트 엔진입니다. 복잡한 WebGL API를 직관적으로 추상화하여 조명, 그림자, 카메라 제어, 3D 모델 로더 등을 손쉽게 다룰 수 있게 해줍니다. 방대한 공식 예제(Examples)와 활발한 생태계를 갖추고 있어 인터랙티브 웹 아트부터 메타버스, 제품 3D 컨피규레이터 제작까지 폭넓게 활용됩니다.