바이브코딩 디자인 레퍼런스 사이트 5곳, AI한테 보여 주면 결과가 달라집니다 (Inspora·21st.dev·affectUI·Best Free Fonts·Launch Library)

바이브코딩(코드를 직접 짜지 않고 AI에게 말로 시켜서 서비스를 만드는 방식)으로 웹페이지를 몇 번 만들어 보면 비슷한 벽에 부딪힙니다. 기능은 돌아가는데 화면이 어딘가 밋밋합니다. 그래서 "좀 더 예쁘게 해 줘"라고 다시 말해 보지만 색만 조금 바뀌고 크게 달라지지 않습니다. 저는 이게 AI 실력 문제라기보다 보여 준 게 없어서 생기는 일이라고 봅니다. 디자이너에게 일을 맡길 때도 "예쁘게요" 한마디보다 "이런 느낌으로요" 하고 사진 몇 장을 보여 주는 쪽이 훨씬 빠릅니다. AI도 똑같습니다.

이번 글에서는 최근 짧은 영상으로 소개한 디자인 레퍼런스 사이트 다섯 곳(Inspora, 21st.dev, affectUI, Best Free Fonts, Launch Library)을 하나씩 열어서 무엇을 주는 곳인지, 바이브코딩할 때 어떻게 쓰면 되는지, 어디까지 무료인지를 정리하겠습니다. 영상은 한 사이트에 10초 남짓이라 쓰는 법을 다 담지 못했습니다. 그리고 소개만 하면 와닿지 않을 것 같아서 "레퍼런스를 보여 주면 정말 달라지나?"를 작은 실험으로 직접 확인해 봤습니다.

(작성일 2026-10-14 기준입니다. 개수·가격은 이날 오후 2시 무렵 다섯 사이트를 다시 열어 확인했고 자주 바뀌는 숫자라 지금 보시면 다를 수 있습니다.)

레퍼런스 없이 만든 드롭다운

먼저 실험부터 보여 드리겠습니다. 드롭다운 메뉴(누르면 아래로 선택지가 펼쳐지는 버튼) 하나를 AI에게 두 번 만들게 했습니다.

• A. 한 줄만: "드롭다운 메뉴 예쁘게 만들어 줘"
• B. 레퍼런스 같이: 아래에서 소개할 Inspora에서 고른 글 하나의 설명, 태그, 화면 캡처 4장을 붙여서 "이 레퍼런스처럼 드롭다운 만들어 줘"

B에 실제로 넣은 요청 원문은 다음과 같습니다. 영어 부분은 Inspora 글에 적혀 있던 문장과 태그를 그대로 복사한 것입니다.

이 레퍼런스처럼 드롭다운 만들어 줘. 레퍼런스 설명: A smooth dropdown menu that opens and closes with colorful 4px pixel tiles flying into place. Colors: Blue · Green · Dark Styles: Minimal · Pixel animation (첨부: 레퍼런스 애니메이션 캡처 4장)

(번역) 레퍼런스 설명: 열리고 닫힐 때 4px짜리 알록달록한 픽셀 타일이 날아와 제자리에 박히는 부드러운 드롭다운 메뉴. 색: 파랑·초록·어두운색 / 스타일: 미니멀·픽셀 애니메이션

조건은 최대한 똑같이 맞췄습니다. 같은 모델(Claude Sonnet)을 Claude Code에서 각각 새 대화로 한 번씩 돌렸고 결과물은 손대지 않고 그대로 브라우저에서 열어 눌러 봤습니다.

왼쪽(A)은 연보라와 분홍이 섞인 그라데이션 배경에 이모지 아이콘, 둥근 카드, 체크 표시가 붙었습니다. 깔끔하긴 한데 AI로 만든 화면에서 자주 보던 모습입니다. 틀린 데가 없어서 오히려 기억에 남지 않습니다.

오른쪽(B)은 분위기가 완전히 다릅니다. 흰 바탕에 얇은 알약 모양 버튼, 선택지 옆의 작은 파랑·초록·검정 네모, 그리고 열고 닫을 때 픽셀 점이 흩어졌다 모이는 움직임까지 레퍼런스의 특징을 거의 다 가져왔습니다. 고른 항목 색에 따라 픽셀 색이 바뀌는 것도 따로 시키지 않았는데 들어가 있었습니다.

물론 원작과 똑같지는 않습니다. 원작은 픽셀이 메뉴 모양으로 정확히 날아와 박히는데, B는 픽셀이 메뉴보다 넓게 구름처럼 퍼졌다가 사라지는 느낌이라 조금 거칩니다. 그리고 선택지 이름은 바꾸라고 했지만 버튼 앞의 "Vibe"라는 글자는 레퍼런스에서 그대로 따라왔습니다. 남의 작업을 레퍼런스로 줄 때는 결과물에 원작 글자나 이름이 묻어 나오지 않았는지 한 번 보는 게 좋을 것 같습니다.

그래도 한 번에 이 정도 차이가 났다는 게 이 글의 출발점입니다. 아래 다섯 사이트는 결국 "AI에게 무엇을 보여 줄지"를 찾는 곳입니다.

분위기 레퍼런스: Inspora

Inspora는 디자인 레퍼런스를 모아 두는 사이트입니다. 화면 오른쪽 위에 "Updated hourly"라고 적혀 있는데, 말 그대로 매시간 새 작업이 올라옵니다. 분류는 All, Web, Branding, Product, Motion, Illustration, 3D, Print 여덟 개이고 로그인 없이 볼 수 있습니다.

카드 대부분이 정지 이미지가 아니라 움직이는 미리보기입니다. 버튼이 눌릴 때 어떻게 반응하는지, 화면이 어떻게 넘어가는지 같은 "움직임"은 말로 설명하기가 정말 어려운데, 이걸 눈으로 보고 고를 수 있다는 게 이 사이트의 장점인 것 같습니다.

제가 바이브코딩에 쓸 만하다고 본 이유는 카드를 눌렀을 때 나오는 상세 페이지 때문입니다. 위 실험에 쓴 "flying dropdown menu" 글을 열어 보면 이렇게 생겼습니다.

오른쪽 패널을 보면 설명 한 문장 아래에 Industries(업종), Colors(색), Styles(스타일) 태그가 붙어 있습니다. 이 태그가 핵심입니다. 디자인 용어를 몰라도 "Minimal", "Pixel animation" 같은 단어를 그대로 복사해서 AI에게 주면 되기 때문입니다. "View original" 버튼을 누르면 원작자의 원래 게시물로 갑니다.

쓰는 순서는 간단합니다.

1. 홈에서 만들고 싶은 화면과 비슷한 카드를 고릅니다 (움직임이 중요하면 Motion 탭).
2. 상세 페이지의 설명 문장과 Colors·Styles 태그를 복사합니다.
3. 화면을 캡처해서(움직이는 거면 몇 장) 코딩 에이전트(Claude Code, Cursor처럼 코드를 대신 짜 주는 AI 도구)에 같이 붙입니다.
4. "이 레퍼런스처럼 ○○ 만들어 줘"라고 요청합니다.

아쉬운 점도 있습니다. Inspora는 보기만 하는 곳이라 코드는 주지 않습니다. 올라온 작업은 각 원작자의 것이라, 분위기를 참고하는 것과 그대로 베끼는 것은 구분해야 합니다.

화면 부품: 21st.dev와 affectUI

Inspora가 "이런 느낌"을 주는 곳이라면, 이 두 사이트는 컴포넌트(component, 화면 부품)를 주는 곳입니다. 컴포넌트는 버튼, 입력창, 카드처럼 화면을 이루는 조각 하나하나를 말합니다. 레고 블록을 떠올리시면 됩니다. 완성된 블록을 가져다 끼우면 처음부터 깎는 것보다 빠르고 모양도 좋습니다.

1. 21st.dev

21st.dev는 첫 화면에 "The living library of interfaces"라고 적어 둔 부품 모음입니다. 소개 문구 그대로 옮기면 "12,000+ crafted React components, templates, and shadcn themes. Built by real design engineers."입니다. 실제 디자인 엔지니어들이 만든 리액트(React, 웹 화면을 만드는 데 가장 많이 쓰는 도구) 부품이 1만 2천 개 넘게 있다는 뜻입니다. 같은 화면에 마케팅용 블록 2,000개+, 일반 UI 부품 2,100개+로 나뉘어 있었습니다.

홈 아래쪽에 "Copy the prompt. Paste it anywhere"라는 문구가 있습니다. 이 사이트의 쓰는 법이 이 한 줄에 다 들어 있습니다. 부품마다 Copy prompt 버튼이 있고 이걸 눌러 복사한 프롬프트를 Claude Code나 Cursor 같은 코딩 에이전트에 붙이면 에이전트가 그 부품을 내 프로젝트 모양에 맞게 다시 짜 줍니다. 코드를 이해하지 못해도 복사·붙여넣기 두 번이면 되는 구조입니다.

부품 하나를 열어 보면 이렇습니다. 아래는 Caio Bonato가 만든 Liquid Metal Hero(액체 금속 느낌의 첫 화면) 페이지입니다.

그런데 직접 눌러 보니 바로 복사되지 않았습니다. 로그인하지 않은 상태에서 Copy prompt를 누르면 아래처럼 무료 계정을 만들라는 창이 뜹니다.

그러니까 구경은 무료, 프롬프트를 가져오려면 무료 가입이 필요합니다. 홈페이지 안내 기준으로 무료 계정은 하루에 2개까지 복사할 수 있고 멤버십이면 제한이 없다고 합니다. (가입 창에는 "10,000+"라고 적혀 있고 홈에는 "12,000+"로 적혀 있어서, 숫자는 홈 기준으로 썼습니다.)

2. affectUI

affectUI는 범위를 좁힌 부품 모음입니다. 첫 화면 문구가 "Agent-ready UI for AI products", 즉 AI 서비스 전용 화면 부품입니다. 챗봇 입력창, AI가 생각 중일 때 뜨는 표시, 답변 카드, 도구 실행 카드처럼 AI 서비스를 만들 때만 필요한 부품이 모여 있습니다.

작성일 기준 구성은 부품(Components) 44개, 완성 화면(Screens) 12개, 블록(Blocks) 11개, 일러스트 22개, 모션 8개입니다. 부품 목록을 열면 AI Answer, Chat Composer(채팅 입력창), Thinking State(생각 중 표시), Voice Orb, Tool Call Card, Approval Card 같은 이름이 줄지어 있습니다.

이 사이트가 AI에게 넘기기 좋은 이유는 사이트 스스로 적어 둔 "one file each, no dependencies" 때문입니다. 부품 하나가 파일 하나이고 다른 라이브러리(남이 만든 코드 묶음)를 추가로 설치할 필요가 없습니다. 파일 하나를 통째로 코딩 에이전트에 넘기고 "이걸로 채팅 화면 만들어 줘"라고 하면 되니 초보자 입장에서는 꼬일 일이 적습니다.

다만 21st.dev보다 무료 범위가 훨씬 좁습니다. 목록 카드에 분홍색 Pro 표시가 붙은 건 유료이고 사실 대부분이 Pro입니다. Pro 표시 없이 열려 있는 건 Thinking Loader, Tool Call Card, Comment Thread, OTP Input, Number Ticker, Shimmer Loader 같은 일부입니다. 작성일 기준 사이트 상단 배너에는 Pro를 정가 199달러 대신 99달러 일회 결제로 판다는 창립 할인 안내가 떠 있었습니다(25자리 중 10자리 남음). 결제 전에는 무료 부품으로 먼저 찍어 먹어 보시는 걸 권합니다.

영문 글꼴: Best Free Fonts

디자인이 밋밋해 보이는 이유 중에 생각보다 큰 게 글꼴입니다. AI는 특별히 말하지 않으면 거의 매번 비슷한 기본 글꼴을 씁니다. 제목 글꼴 하나만 바꿔도 서비스 인상이 꽤 달라집니다.

Best Free Fonts는 첫 문장이 "Truly free fonts for your designs"입니다. 정말로 무료인 폰트 214개만 골라 놓았다고 적혀 있습니다. 분류는 Sans Serif, Serif, Display, Script, Monospace 다섯 가지입니다.

제일 편한 기능은 화면 위쪽의 "Type your text here" 입력칸입니다. 여기에 글자를 치면 목록의 모든 폰트가 그 글자로 바뀝니다. 이번 쇼츠에서 예시로 쓴 가상 서비스 이름 "Moa"를 쳐 봤습니다.

내 서비스 이름이 각 폰트에서 어떻게 보이는지 한 화면에서 비교할 수 있어서 고르기가 쉽습니다. 마음에 드는 걸 누르면 폰트 상세 페이지로 넘어갑니다.

상세 페이지에서 꼭 봐야 할 건 License 칸입니다. 예로 연 Bricolage Grotesque는 SIL Open Font License(OFL, 상업용으로도 무료로 쓸 수 있는 대표적인 폰트 라이선스)라고 적혀 있습니다. "무료 폰트"라고 검색해서 나오는 것 중에는 개인용만 무료인 것도 섞여 있는데, 이 사이트는 라이선스를 폰트마다 적어 둬서 그 걱정이 줄어듭니다.

폰트 중에는 재미있는 것도 있습니다. Climate Crisis라는 폰트는 연도 값을 바꾸면 글자가 녹아내리듯 얇아집니다(기후 위기를 표현한 폰트라고 합니다). OFL 폰트 파일을 받아서 "Moa"를 1979년부터 2050년 값까지 직접 렌더해 봤습니다.

중요한 한계가 하나 있습니다. 제가 열어 본 폰트들은 지원 문자가 Latin(영문) 위주였고 한글 폰트는 없었습니다. 그래서 이 사이트는 영문 로고나 영문 제목용으로 쓰시는 게 맞습니다. 한글 본문 글꼴은 따로 찾으셔야 합니다.

AI에게 넘길 때는 "제목 글꼴은 Bricolage Grotesque로 바꿔 줘. 라이선스는 OFL이야"처럼 폰트 이름과 라이선스를 같이 말해 주면 됩니다.

홍보 영상: Launch Library

여기까지가 만드는 단계라면 마지막 사이트는 알리는 단계입니다. 다 만들었으면 서비스를 소개하는 짧은 영상이 필요한데, 이게 막막합니다.

Launch Library는 X(구 트위터)에서 화제가 된 스타트업 런칭 영상(새 서비스를 처음 공개할 때 올리는 소개 영상)을 모아 둔 사이트입니다. 작성일 기준 "Showing 162 of 162 launch videos", 162편이 있습니다. 표에는 회사, 제품 분류, 그리고 X에서 받은 하트 수(Likes)·조회수(Views)·북마크(Bookmarks)가 붙어 있고 Watch를 누르면 X 원본으로 갑니다.

이 사이트를 고른 이유는 "예쁜 영상"이 아니라 실제 반응 숫자로 줄을 세울 수 있어서입니다. 북마크는 "나중에 다시 보려고 저장했다"는 뜻이라 따라 만들고 싶은 영상일수록 많이 쌓인다고 봤습니다. Bookmarks 칸을 눌러 정렬하면 이렇게 나옵니다.

북마크 1위는 Remotion(코드로 영상을 만드는 도구)입니다. 북마크 3만 800개, 조회수 약 1,481만 회입니다. 조회수만 보면 가정용 로봇 1X가 약 6,875만 회로 압도적인데, 저장은 Remotion이 더 많이 받았습니다. 위쪽 필터에서 Vibecoding을 누르면 바이브코딩 관련 회사(Replit, Lovable, Framer, Rork, bolt.new 등) 영상 18편만 남습니다.

1위 Remotion 영상은 8초짜리입니다. 원 게시물(2026-01-20)에는 "This animation was created just by prompting"이라고 적혀 있습니다. 이 애니메이션을 프롬프트만으로 만들었다는 뜻입니다.

쓰는 법은 이렇습니다. 마음에 드는 영상 하나를 골라서, 내 서비스 화면(랜딩페이지 캡처 등)과 함께 코딩 에이전트에 주고 "이 느낌으로 우리 서비스 소개 영상 만들어 줘"라고 하면 됩니다. 랜딩페이지의 히어로 섹션(사이트에 들어가자마자 보이는 첫 화면 영역)에 넣을 짧은 영상 레퍼런스로도 쓸 만합니다.

이번 쇼츠를 만들면서 실제로 비슷하게 해 봤습니다. 가상의 서비스 "Moa"(흩어진 레퍼런스를 한곳에 모으는 서비스라는 설정)의 랜딩 화면을 Remotion 코드로 짜서 5.5초짜리 소개 모션으로 렌더한 결과입니다.

제목 글꼴은 Best Free Fonts의 Bricolage Grotesque, 히어로 칸은 21st.dev의 부품, 색은 Inspora 글의 Blue·Green·Dark 태그에서 가져왔습니다. 다섯 사이트 재료가 한 화면에 모인 셈입니다. (정확히 말하면 이건 쇼츠 편집 작업 안에서 만든 것이라 "프롬프트 한 줄로 끝"은 아니었고, 레퍼런스를 모아 조합하는 예시로 봐 주시면 됩니다.)

주의할 점도 있습니다. Launch Library 영상은 전부 각 회사가 만든 것입니다. 느낌을 참고하는 건 괜찮지만 영상이나 로고를 그대로 가져다 쓰면 안 됩니다. X 원본 링크로 넘어가는 구조라 사이트 안에서 바로 재생되지는 않았습니다.

개인적인 생각 & 한계점

다섯 개를 다 북마크해 둘 필요는 없는 것 같습니다. 지금 하는 일에 따라 하나씩 꺼내 쓰는 쪽이 낫다고 봅니다.

1. 처음 만드는데 화면이 밋밋한 경우 - Inspora 하나면 충분합니다. 위 실험처럼 캡처와 태그만 붙여도 결과가 크게 달라졌습니다. 돈도 안 들고 가입도 필요 없습니다.

2. 첫 화면을 화려하게 만들고 싶은 경우 - 21st.dev에 무료 가입하고 히어로 부품의 Copy prompt를 쓰시면 됩니다. 하루 2개 제한이 있으니 고르고 나서 복사하는 걸 권합니다.

3. 챗봇이나 AI 서비스를 만드는 경우 - affectUI의 무료 부품(Thinking Loader, Tool Call Card 등)부터 써 보시고 그래도 필요하면 그때 Pro를 고민해도 늦지 않습니다.

4. 영문 로고나 제목이 필요한 경우 - Best Free Fonts에서 서비스 이름을 쳐 보고 OFL 라이선스인 걸로 고르시면 됩니다. 한글은 따로 찾으셔야 합니다.

5. 다 만들고 알릴 차례인 경우 - Launch Library에서 Vibecoding 필터 → 북마크 순으로 보고 하나를 고르시면 됩니다.

한계도 적어 두겠습니다. 위 실험은 드롭다운 하나, 모델 하나, 각 1회만 돌린 결과입니다. 같은 요청도 돌릴 때마다 결과가 조금씩 다르게 나와서 "레퍼런스를 주면 항상 이만큼 좋아진다"고 일반화하긴 어렵습니다. 그리고 레퍼런스를 준 쪽도 원작의 픽셀 움직임을 정확히 재현하진 못했습니다. 레퍼런스는 출발점을 올려 주는 것이지 완성품을 주는 건 아닌 것 같습니다.

그래도 저는 이 실험에서 하나는 확실히 느꼈습니다. AI 디자인은 무(無)에서 뭔가를 만들어 내는 일이 아니라, 내가 보여 주는 레퍼런스만큼 좋아지는 일에 가깝습니다. "예쁘게 해 줘"를 열 번 말하는 것보다 마음에 드는 화면 하나를 찾는 데 5분 쓰는 쪽이 결과가 빨랐습니다.

이 글을 마치며 & Reference

기회가 되면 다음 글에서는 Launch Library에서 고른 런칭 영상을 레퍼런스로 서비스 소개 영상을 처음부터 만들어 보는 과정을 다뤄 보겠습니다.

AI가 만든 웹사이트의 "AI 티"를 줄이는 도구 쪽이 궁금하시면 Claude Code 프론트엔드 디자인 도구 5종 글을 같이 보시면 좋습니다. 그 글이 AI에게 규칙을 주는 방법이라면, 이 글은 AI에게 보여 줄 재료를 찾는 방법입니다.

• Inspora : 매시간 올라오는 디자인 레퍼런스. 글마다 색·스타일 태그가 붙어 있어 AI에게 그대로 넘기기 좋음
• 21st.dev : 리액트 화면 부품 1만 2천 개+. 부품마다 Copy prompt, 복사는 무료 계정 필요
• affectUI : AI 서비스 전용 부품 97개+. 파일 하나씩이라 넘기기 편하지만 대부분 유료
• Best Free Fonts : 무료 폰트 214개, 폰트마다 라이선스 표기. 한글 폰트는 없음
• Launch Library : X에서 화제가 된 런칭 영상 162편, 하트·조회·북마크 순 정렬

긴 글 읽어주셔서 감사합니다 :)