10년차 디자이너가 되는 레퍼런스 사이트 20가지 총정리!

바이브코딩 할 때 실제로 쓰게 되는 것만 추렸어요. 거의 다 무료고, 어디에 쓰는지 같이 적어뒀습니다.

순서대로 보시면 돼요. 감 잡고 → 취향 좁히고 → 컴포넌트 얹고 → 움직임 넣는 순서예요.

1. 디자인 기획 단계에서 보면 좋을 곳

감 잡고 화면 구조까지 뜯어보는 곳들이에요. 마음에 드는 걸 골라서 링크나 캡처를 AI한테 던지는 용도입니다.

1. Godly

전 세계에서 제일 잘 빠진 웹사이트만 골라 올리는 갤러리예요. 뭘 만들지 감이 안 올 때 여기서 하나 골라 링크째로 AI한테 던지면 절반은 먹고 들어갑니다.

아쉬운 점은 워낙 하이엔드 위주라 그대로 재현하긴 어렵다는 거예요. 검색도 약해서 구경하다 꽂히는 걸 줍는 방식이 맞습니다.

2. Mobbin

토스, 에어비앤비 같은 실제 서비스 화면을 60만 장 넘게 모아둔 곳이에요. 로그인이니 결제니 하는 특정 화면이 필요할 때 검색해서 캡처 뜨고, AI한테 첨부하면서 "이 구조로 만들어줘" 하면 됩니다.

무료로 볼 수 있는 양이 제한적인 게 아쉽지만, 구조 참고용으로 이만한 게 없어요.

3. Refero Styles

실서비스 화면을 스타일별로 모아 보여줍니다. 다크, 미니멀 같은 스타일이 실제로 어떻게 쓰였는지 확인하고 컬러랑 폰트 스펙까지 뽑을 수 있어서 그대로 AI한테 넘기기 좋아요.

무료 열람에 제한이 있고, 양은 Mobbin보다 적습니다.

4. SaaS Landing Page

SaaS 랜딩페이지만 모아둔 갤러리예요. 히어로, 가격표, 후기 같은 섹션 구성 참고할 때 편하고 공짜입니다.

대신 쇼핑몰이나 포트폴리오처럼 SaaS가 아닌 건 여기서 못 찾아요.

2. 취향이 정해졌을 때 더 보는 곳

"다크로 갈지", "미니멀로 갈지" 방향이 잡힌 다음에 여는 곳들이에요. 위 네 곳보다 좁고 깊습니다.

5. Dark Design

다크모드 디자인만 모아둔 갤러리예요. 테크나 AI 쪽은 어차피 다크로 가는 경우가 많아서 은근 자주 열게 됩니다.

다크 한정이라 밝은 레퍼런스는 없고, 수록량도 많은 편은 아니에요.

6. Minimal Gallery

2013년부터 미니멀 웹만 골라 올려온 갤러리예요. 심플하고 깔끔한 방향으로 갈 거면 여기만 봐도 충분합니다.

취향이 확고한 곳이라 화려한 인터랙션 레퍼런스는 기대하면 안 돼요.

7. Awwwards

웹디자인계의 시상식 같은 곳이에요. 매일 심사 점수로 수상작을 뽑습니다. 모션이나 인터랙션까지 포함한 최상급 레퍼런스가 필요하면 여기예요.

다만 상 받으려고 만든 사이트가 많아서 실용적인 참고용으로는 오버스펙이고, 사이트 자체도 무겁습니다.

8. Behance

어도비가 운영하는 세계 최대 포트폴리오 플랫폼이에요. 웹 말고 로고, 브랜딩, 그래픽까지 다 커버되고, 작업 과정을 통째로 올린 케이스스터디가 많은 게 제일 좋습니다.

양이 많은 만큼 퀄리티 편차가 크고 로그인 유도가 심하게 귀찮아요.

3. 프롬프트 통째로 받기

위 단계를 하나씩 밟는 대신, 완성된 프롬프트를 통째로 복사해서 AI 빌더에 붙여넣는 방식이에요.

9. GetLayers

시네마틱한 랜딩페이지 프롬프트를 모아둔 곳이에요. 마음에 드는 걸 골라 Copy prompt 누르고 Claude나 Lovable에 붙여넣으면 AI티 안 나는 사이트가 나옵니다.

무료로 풀린 것도 있는데, 좋은 건 대부분 유료예요.

4. UI 컴포넌트

완성된 컴포넌트를 가져다 쓰는 곳들이에요. AI한테 컴포넌트 이름만 말하면 알아서 붙여줍니다.

10. React Bits

글자 애니메이션, 3D 배경 같은 움직이는 컴포넌트를 165개 넘게 모아둔 오픈소스. 깃허브 스타가 4만이 넘습니다. 밋밋한 사이트에 뭐 하나 얹고 싶을 때 컴포넌트 이름만 AI한테 말하면 끝이고 전부 무료다.

React 전용이고, 신나서 이것저것 다 넣으면 사이트가 무거워집니다.

11. Kokonut UI

카드, 버튼, AI 채팅창 같은 기본 블록을 예쁘게 모아둔 오픈소스 컴포넌트 모음이에요. shadcn 계열이라 AI 도구들이랑 궁합이 좋습니다.

규모는 큰 라이브러리들보다 작고, 일부는 유료예요.

12. Bklit UI

차트랑 데이터 시각화 전용 컴포넌트예요. 대시보드나 통계 페이지 만들 때 씁니다. Studio에서 차트를 실시간으로 만져보고 코드만 복사하면 되는 게 편해요.

차트 말고 일반 UI는 없습니다.

13. SmoothUI

다이나믹 아일랜드, AI 입력창 같은 요즘 감성 마이크로 인터랙션 모음이에요. 애니메이션 완성도가 좋아서 하나만 넣어도 있어 보입니다. 무료예요.

수량이 적은 편이고 React 전용이에요.

14. Unlumen UI

애니메이션 컴포넌트가 35개쯤 모여 있어요. 위에 있는 라이브러리들에서 원하는 감성을 못 찾았을 때 대안으로 들르면 됩니다.

아직 커뮤니티가 작고 일부는 유료예요.

15. 21st.dev

생김새까지 다 만들어진 화면 조각을 1만 2천 개 모아둔 곳이에요. 조각마다 Copy prompt 버튼이 붙어 있어서, 누르면 나오는 문장을 클로드나 커서에 그대로 붙여넣기만 하면 끝입니다.

무료로는 하루 두 번까지만 복사돼요.

5. 모션 라이브러리

전부 무료예요. 사이트에 움직임을 넣고 싶을 때 AI한테 이름 대고 시키면 됩니다.

16. GSAP

웹 애니메이션의 표준이에요. 수상작급 사이트에서 보이는 스크롤 연출은 거의 다 이걸로 만듭니다. 원래 유료였는데 지금은 전부 무료예요.

개념 공부가 좀 필요한 물건이라, 직접 짜지 말고 AI한테 "GSAP ScrollTrigger로 만들어줘" 하고 시키는 게 정답입니다.

17. Lenis

고급 사이트 특유의 미끄러지는 스크롤을 만들어주는 라이브러리예요. 코드 몇 줄이면 사이트 전체 질감이 달라진다. 가볍고 무료.

스크롤 하나만 담당하는 물건이고, 과하게 쓰면 보는 사람이 멀미해요.

18. Vanta.js

마우스 따라 움직이는 3D 배경을 코드 몇 줄로 넣게 해줍니다. 사이트 자체가 데모라서 효과 골라서 색 바꾸고 복사하면 끝. 히어로 배경 살리는 데 이만한 가성비가 없다.

배경 전용이고, 저사양 기기에선 좀 버벅여요.

19. anime.js

가볍고 문법 쉬운 애니메이션 라이브러리. 요소 등장이나 숫자 카운트업 정도의 가벼운 움직임은 GSAP까지 갈 것 없이 이걸로 충분합니다.

스크롤 연동 같은 고급 연출은 GSAP보다 약해요.

20. Motion

Framer Motion으로 유명했던 그 라이브러리예요. React 쓴다면 페이지 전환이나 제스처 애니메이션은 사실상 이게 표준입니다. AI가 제일 잘 다루는 모션 라이브러리라 바이브코딩 궁합도 최고예요.

React 밖에서는 기능이 제한적이에요.

AI한테 스타일 지시하는 법

"예쁘게 만들어줘"는 AI가 못 알아듣는다. 대신 스타일 이름으로 말하면 결과가 완전히 달라진다.

글래스모피즘 · 브루탈리즘 · 벤토 그리드 · 다크모드 · 3D 이머시브 · 그라디언트 메시 · 에디토리얼 · 레트로 Y2K

정리하면

1. Godly나 Dark Design에서 레퍼런스 골라서 링크째로 던집니다

2. Mobbin에서 화면 구조 캡처해서 첨부합니다

3. React Bits 컴포넌트랑 GSAP, Lenis로 모션을 입힌다

이 순서만 지켜도 AI 결과물이 딴판이 된다.