홈페이지를 새로 만들 때 가장 오래 걸리는 일은 코드를 쓰는 것보다 어떤 화면을 만들지 결정하는 일일 수 있습니다. 웹디자인 레퍼런스 사이트 추천 목록도 전체 분위기를 고를 때와 버튼 하나를 구현할 때 서로 다른 자료가 필요합니다. 완성된 사이트를 보는 갤러리, AI 코딩용 프롬프트, 복사 가능한 모션 코드, 상업용 무료 이미지까지 구분하면 필요한 자료를 훨씬 빠르게 찾을 수 있습니다. 아래 14곳은 목적이 겹치는 듯해도 실제 쓰임새가 조금씩 다릅니다.
처음부터 14개 탭을 모두 열 필요는 없습니다. 화면 전체의 방향이 막혔으면 웹사이트 갤러리를, 화면은 정했는데 구현이 막혔으면 컴포넌트와 모션 라이브러리를 먼저 보는 편이 낫습니다. 아래 표는 각 자료의 출발점을 고르기 위한 간단한 지도입니다.
| 하고 싶은 일 | 먼저 볼 곳 | 가져올 결과물 |
|---|---|---|
| 랜딩 페이지 분위기 결정 | Minimal Gallery, Kage | 레이아웃과 섹션 구성 |
| 앱 화면과 UI 패턴 비교 | AppShot Gallery, Component Gallery | 화면 표현 방식과 컴포넌트 사례 |
| AI로 페이지 제작 | Refero Styles, DESIGN.md, VibePrompts, 21st.dev | 디자인 규칙과 프롬프트·코드 |
| 움직임과 버튼 효과 | Kinetics, Circle Loaders, Gradient Buttons, Anime.js | CSS·SVG·자바스크립트 구현 |
| 일러스트와 아이콘 배치 | Kitbitz, 3dicons | 프로젝트에 사용할 이미지 자산 |
기업 소개 페이지라면 Minimal Gallery에서 여백과 타이포그래피를 살펴본 뒤 Component Gallery에서 탭 구조를 비교하는 흐름이 자연스럽습니다. 반대로 기존 제품의 관리자 화면을 다듬는 작업이라면 화려한 메인 화면보다 실제 서비스 화면과 기능별 컴포넌트가 더 도움이 됩니다.
Minimal Gallery는 절제된 화면 구성을 찾기에 좋은 웹디자인 갤러리입니다. 포트폴리오, 에이전시, 쇼핑몰, 한 페이지 사이트 등 분야별로 걸러 볼 수 있어 전체적인 화면 밀도와 이미지 배치, 여백의 비율을 정할 때 유용합니다. 멋져 보이는 화면 한 장보다 같은 사이트의 첫 화면과 아래쪽 콘텐츠가 어떻게 연결되는지 함께 살펴보세요.
Kage는 실제 제품 인터페이스를 수집하고 이를 Claude Code, Codex, Cursor 등에 전달할 프롬프트로 연결하는 디자인 참고 서비스입니다. 내비게이션, 메인 소개 영역, 가격표, 후기, 자주 묻는 질문 등 구성 요소로 좁혀 볼 수 있습니다. 스크린샷을 흉내 내기보다 마음에 드는 간격과 정보 구조를 문장으로 설명하고 자신의 콘텐츠로 바꾸는 용도가 적합합니다.
Refero Styles는 2,000개 이상의 AI가 읽을 수 있는 디자인 스타일을 제공한다고 안내합니다. 색상, 글꼴, 간격, 컴포넌트 규칙과 DESIGN.md를 함께 살피는 방식이라 느낌만 전달했을 때 발생하는 디자인 편차를 줄이는 데 쓸 수 있습니다. 특정 브랜드의 고유한 이미지나 외관까지 그대로 옮겨도 된다는 뜻은 아닙니다.
Component Gallery는 60개 컴포넌트와 95개 디자인 시스템, 2,671개 사례를 소개하는 자료실입니다. 캐러셀, 탭, 팝오버, 평점, 아코디언처럼 기능이 뚜렷한 요소를 여러 디자인 시스템에서 비교할 수 있습니다. 단순한 이미지 수집을 넘어 접근성이나 사용 지침이 제시된 원본 디자인 시스템으로 이동할 수 있다는 점도 쓸모가 있습니다.
AppShot Gallery는 모바일 앱의 앱스토어 소개용 스크린샷을 업종별로 살펴보는 사이트입니다. 금융, 생산성, 쇼핑, 여행처럼 카테고리가 나뉘며 앱의 장점을 몇 장의 이미지로 설명하는 방식과 시각적 강조를 참고하기 좋습니다. 앱스토어 홍보 화면은 실제 앱 내부 탐색 흐름과 다를 수 있으니 앱 전체 사용자 경험을 검증하는 근거로 혼동하지 않는 편이 좋습니다.
DESIGN.md는 AI 코딩 도구에 전달할 디자인 시스템을 탐색하는 곳입니다. 디자인을 지시할 때 브랜드색 하나만 적는 대신 기본 글꼴, 제목 크기, 간격, 모서리 모양, 컴포넌트 사용 규칙을 함께 고르면 화면 전체의 통일감을 유지하기가 쉽습니다. 무료로 공개된 예제가 있지만 개별 디자인의 사용 조건까지 모두 동일하다고 단정해서는 안 됩니다.
VibePrompts는 UI 제작용 프롬프트와 Tailwind CSS 패턴을 찾을 수 있는 서비스입니다. 랜딩 페이지의 첫 화면, 대시보드, 가격표, 회원가입 양식, 블로그 콘텐츠 영역처럼 만들려는 구역을 골라 시작할 수 있습니다. 긴 요구사항을 처음부터 쓰기 부담스러운 사람에게 편리하지만 예시 문구와 가상 수치는 서비스의 실제 정보로 바꿔야 합니다.
21st.dev는 React 컴포넌트·템플릿·테마를 탐색하고 코드나 AI용 프롬프트를 활용하는 곳입니다. 공식 안내상 2026년 10월 기준 전체 탐색은 무료이고 무료 계정은 하루 2개의 컴포넌트를 복사할 수 있습니다. 더 많은 복사나 유료 템플릿은 별도 조건이 있으므로 팀 프로젝트라면 필요한 컴포넌트를 먼저 추려 사용하는 편이 효율적입니다.
AI에 전달할 때는 “세련되게 만들어 줘”보다 “모바일에서 한 열로 바뀌는 기능 카드, 충분한 여백, 명확한 주요 버튼, 키보드 탐색이 가능한 메뉴”처럼 결과를 검증할 수 있는 조건을 적는 편이 낫습니다. 참조한 스타일의 분위기와 실제 기능 요구를 분리해서 작성하면 특정 사이트를 그대로 복제하는 실수도 줄어듭니다.
Kinetics는 153가지 스프링 기반 인터랙션을 소개하며 강성과 감쇠를 조절하고 CSS·React 코드 또는 AI 프롬프트를 볼 수 있습니다. 카드가 펼쳐지거나 버튼이 반응하는 작은 움직임을 설계할 때 어울립니다. 장식용 움직임이 화면의 주목적을 가리지 않게 조절하세요.
Circle Loaders는 24종의 원형 로딩 애니메이션을 독립 실행형 SVG로 제공하는 사이트입니다. 어두운 화면과 밝은 화면을 비교하고 SVG 마크업을 살펴볼 수 있습니다. 로딩 아이콘은 작업이 진행 중임을 알려 주는 용도로 좋지만 완료 시간이 긴 작업에서는 상태 설명을 같이 표시해야 혼란을 줄일 수 있습니다.
Gradient Buttons는 그라데이션 버튼의 모양을 미리 보고 CSS를 복사할 수 있는 갤러리입니다. 버튼 색이 예쁘다는 이유만으로 선택하지 말고 배경 대비, 글자 가독성, 마우스 포인터를 올렸을 때의 차이까지 살펴보는 것이 좋습니다. 주요 행동 버튼 한두 개에만 강조색을 주면 화면 전체가 더 차분해 보입니다.
Anime.js는 텍스트, SVG, 타임라인, 스크롤 연동 등 다양한 애니메이션을 구현하는 자바스크립트 라이브러리입니다. 복사할 효과를 찾는 갤러리와 달리 코드로 화면의 움직임을 정교하게 제어할 때 적합합니다. 메뉴 열림이나 콘텐츠 등장처럼 사용자 행동과 연결되는 곳에 제한적으로 적용해 보세요.
Kitbitz는 2,000개 이상의 손그림 스타일 일러스트를 제공하는 자료실입니다. 자연, 우주, 실내, 도시 등 주제별 묶음을 찾아볼 수 있고 SVG·PNG와 피그마 작업 흐름을 지원합니다. 공식 소개에는 CC0에 따른 상업적 사용이 가능하다고 안내되어 있어 친근한 랜딩 페이지의 삽화 후보로 적합합니다.
3dicons는 부드러운 입체 질감의 3D 아이콘을 모아 둔 곳입니다. 공식 사이트는 현재 버전이 CC0이며 개인·상업 프로젝트에서 저작자 표시 없이 사용할 수 있다고 설명합니다. 손그림의 자유로운 느낌이 필요한 프로젝트와 일정한 입체감이 필요한 프로젝트를 구별해 고르면 한 화면에서 표현 방식이 충돌하는 일을 줄일 수 있습니다.
무료라는 말은 다른 회사의 완성된 화면을 복제해도 된다는 뜻이 아닙니다. 리소스 파일 자체의 CC0 여부와 별개로 화면에 함께 등장하는 로고, 사진, 글꼴, 캐릭터, 상표는 서로 다른 권리 대상일 수 있습니다. 다른 서비스의 앱 스크린샷을 자신의 서비스 소개 화면처럼 넣는 일은 피해야 합니다.
웹디자인 레퍼런스 사이트 추천 자료를 많이 저장해도 결과물이 자동으로 좋아지지는 않습니다. 필요한 기능과 시각적 분위기, 제작 방식의 우선순위를 구분해야 합니다. 다음 순서를 따르면 디자인 선택부터 구현 검토까지 연결하기 수월합니다.
작은 온라인 서비스의 첫 화면을 만든다면 넓은 여백의 레퍼런스 하나, 기능 설명 카드 패턴 하나, 주요 버튼 효과 하나면 출발하기 충분합니다. 서로 다른 유명 사이트의 요소를 무작정 섞으면 글자 크기와 간격, 움직임 규칙이 제각각이 되기 쉽습니다.
Q. 웹디자인 레퍼런스 사이트 추천 중 어디서 시작하면 좋나요?
전체 분위기가 정해지지 않았다면 Minimal Gallery나 Kage를 먼저 보고, 만들 섹션이 분명해진 다음 VibePrompts의 프롬프트로 구현을 시작해 보세요. React 기반 프로젝트라면 21st.dev에서 컴포넌트 선택지를 더 찾아볼 수 있습니다.
Q. 웹디자인 레퍼런스에서 본 화면을 그대로 만들어도 되나요?
참고 사이트의 구성 원리를 배우는 것과 스크린샷, 문구, 이미지, 로고, 고유한 표현을 그대로 복제하는 것은 다릅니다. 상업 프로젝트라면 타사의 식별 요소를 제거하고 독자적인 구성과 콘텐츠로 재설계하는 편이 안전합니다.
Q. 21st.dev와 Component Gallery는 같은 종류인가요?
둘 다 UI 구성 요소를 다루지만 쓰임새가 다릅니다. Component Gallery는 여러 디자인 시스템의 패턴을 비교해 판단을 돕는 참고 자료에 가깝고, 21st.dev는 실제 구현을 위한 React 코드와 AI 프롬프트 활용에 초점이 있습니다.
Q. CC0 일러스트를 썼다면 저작권 검토가 끝난 건가요?
그렇지 않습니다. Kitbitz와 3dicons에서 제공한 대상 파일의 조건과 프로젝트에 추가한 폰트·사진·로고의 조건은 따로 봐야 합니다. 사용한 자산의 원본 링크와 라이선스 안내를 작업 기록에 함께 남기면 이후 수정과 인수인계가 쉬워집니다.
2027년 1월로 예정된 세종시교육청의 대규모 인력 확충이 시작되었습니다. 정원 49명을 채우기 위한 제1회 공개채용 공고가…
마곡역 인근 복합쇼핑몰에서 발생한 사고 소식에 어느 건물에서 무슨 일이 있었는지 궁금해하는 사람이 많습니다. 2026년…
행정안전부가 2026년 하반기 비상대비업무담당자 선발시험의 응시번호와 세부 일정을 공식으로 알려 왔습니다. 시험을 준비해서 오늘(2026년 10월…
프로게이머의 꿈은 화려해 보이지만, 2026년 현재 가장 뜨겁게 불거진 이슈는 바로 '연봉의 세금 처리' 문제입니다.…
LA 다저스가 홈에서 잠시 역전했지만 밀워키가 다시 승부를 뒤집었습니다. 밀워키 NLCS 3연승으로 브루어스는 44년 만의…