VIBE DESIGN LAB
Design References

디자인 레퍼런스

언제, 어떤 카테고리를 찾아보면 좋을까요? Awards, Gallery, Showcase, Libraries, 목적에 맞는 19개 사이트를 큐레이션했습니다.

8

Categories

34

Sites

Curated Sites

Awards

퀄리티 기준점을 잡고 싶을 때. 수상작 중심으로 현재 트렌드의 상한선을 파악합니다.

Awwwards

Awwwards

최신 인터랙션 트렌드 파악할 때. 수상작 기준으로 퀄리티 벤치마크 잡기 좋음
CSSDA

CSSDA

기술/UX/UI 점수가 분리되어 있어 특정 영역 강점 사이트를 골라볼 때
CSS Winner

CSS Winner

매일 1개씩 수상, 점수 공개. 꾸준히 트렌드 추이를 추적할 때
Webby Awards

Webby Awards

브랜드·커머스 중심 프로젝트의 상업적 레퍼런스가 필요할 때
The FWA

The FWA

2000년부터 운영, 500명 국제 심사위원단. VR/AR 포함 실험적 디지털 작업까지 수상 대상

Gallery

무드보드를 만들거나 스타일 방향을 탐색할 때. 태그·필터로 원하는 톤의 사이트를 빠르게 수집합니다.

Siteinspire

Siteinspire

분야·스타일 태그 필터가 잘 되어 있어 무드보드 초기 수집할 때
Godly

Godly

스크롤 애니메이션·인터랙션 레퍼런스 찾을 때. GSAP/Three.js 구현 참고
Land-book

Land-book

랜딩 페이지 전체 구조를 참고할 때. 섹션 배치·흐름 파악용
Httpster

Httpster

실험적 레이아웃이나 브루탈리즘 방향을 탐색할 때
Siiimple

Siiimple

미니멀 디자인 방향일 때. 여백·타이포그래피 중심 레퍼런스
Brutalist Websites

Brutalist Websites

네오 브루탈리즘·타이포 실험이 필요할 때. 그리드 파괴 참고용
Lapa Ninja

Lapa Ninja

7,300+ 랜딩 페이지 실사례. 업종·색상·레이아웃 필터로 빠른 무드보드 제작
Savee.it

Savee.it

디자이너 전용 비주얼 북마킹. Pinterest보다 에디토리얼·아트 디렉션 중심, 큐레이션 품질 높음

Showcase

실제 구현된 결과물을 스크린 단위로 분석할 때. 구현 가능성과 플로우를 함께 확인합니다.

Webflow Showcase

Webflow Showcase

노코드로 구현된 인터랙션·모션 패턴 참고할 때. 구현 난이도 가늠용
Framer Gallery

Framer Gallery

에디토리얼·미니멀 랜딩을 빠르게 참고할 때. 클론 가능한 예제 다수
Supahero

Supahero

히어로 섹션 구성을 고민할 때. 카피·레이아웃·CTA 배치 패턴 참고
Mobbin

Mobbin

모바일·웹 UI 흐름 전체를 스크린 단위로 볼 때. 플로우 설계 참고
Screenlane

Screenlane

실제 앱의 컴포넌트별(폼, 카드, 대시보드) 스크린샷 분류. UI 패턴 학습에 최적
Layers

Layers

Dribbble 대안으로 부상 중인 디자이너 커뮤니티. 높은 큐레이션 품질, 피드백 중심

Libraries

인터랙티브 비주얼을 직접 구현할 때. 프롬프트에 라이브러리명을 포함하면 AI가 해당 API로 코드를 생성합니다.

GSAP

GSAP

웹 애니메이션 업계 표준. ScrollTrigger로 스크롤 기반 인터랙션 구현, 타임라인 제어 최강
Motion

Motion

React/Vue 네이티브 애니메이션. Framer Motion 후속, 월 1,600만+ 다운로드, 번들 최소화
Three.js

Three.js

3D 장면·셰이더 효과가 필요할 때. 웹 3D의 표준 라이브러리
p5.js

p5.js

크리에이티브 코딩 프레임워크. 아티스트·디자이너 친화적 API, 제너러티브 아트에 최적
PixiJS

PixiJS

파티클·다층 레이어 등 고성능 2D 연출이 필요할 때
Rough.js

Rough.js

손그림 느낌의 차트·아이콘이 필요할 때. 감성적 비주얼 연출용
Zdog

Zdog

귀엽고 둥근 3D 일러스트가 필요할 때. 가볍고 코드량 적음
Paper.js

Paper.js

복잡한 곡선·벡터 애니메이션이 필요할 때. 베지어 조작에 강점

Typography

서체 선택과 페어링을 결정할 때. 실제 웹사이트에서 어떤 폰트를 어떻게 쓰는지 맥락과 함께 확인합니다.

Typewolf

Typewolf

실제 웹사이트의 서체 사용 사례 큐레이션. 폰트 페어링 룩북, 트렌드 예측까지
Fonts In Use

Fonts In Use

서체별·포맷별·주제별 검색 가능한 타이포그래피 아카이브. 실무 적용 맥락까지 분석

Color

컬러 팔레트를 정하거나 테스트할 때. 생성 도구부터 실제 UI 위에 적용해보는 도구까지.

Realtime Colors

Realtime Colors

실제 UI 레이아웃 위에 팔레트를 실시간 적용. 디자인 시스템 색상 테스트에 최적
Khroma

Khroma

AI가 선호 색상 50개를 학습해 무한 팔레트 생성. 개인화된 컬러 추천

Motion

모션 디자인의 원리와 레퍼런스를 공부할 때. 트렌드 분석부터 타이틀 시퀀스 연출까지.

Motionographer

Motionographer

모션 그래픽 최대 전문 매거진. 비하인드 인터뷰, 어워드, 트렌드 예측까지 아우르는 허브
Art of the Title

Art of the Title

영화/TV 타이틀 시퀀스 전문 분석. 모션 타이포그래피와 내러티브 디자인 학습의 최고 자료

Design Systems

컴포넌트 설계 기준을 잡을 때. 실제 기업의 디자인 시스템을 비교하고 패턴을 학습합니다.

Design Systems Surf

Design Systems Surf

70+ 기업 디자인 시스템을 컴포넌트·토큰·문서 단위로 비교 검색. Adobe, Apple, IBM 등
Component Gallery

Component Gallery

실제 디자인 시스템의 컴포넌트별 구현 사례 모음. 버튼/모달/네비게이션 패턴 비교 연구

디자인과 개발을 잇는 언어를 배웁니다

디자인 사고로 제품을 설계하는 바이브 코딩

온라인 VOD + 커뮤니티 학습

6섹션 · 18챕터

Vibe Design Starter Kit

디자인 사고로 제품을 설계하는 바이브 코딩

01

바이브 디자인: 새로운 사고에 적응하기

02

꼭 필요한 만큼의 디자인 시스템

03

제품으로서의 확장: UX로 로직 제어하기

04

내 프로젝트에 적용해보기 - 챌린지

05

디자인 에이전트: 이성과 감성사이의 파이프라인

06

실전 서비스 운영 시나리오 대응

자세히 보기