깃허브 공짜 디자인 창고 4개

먼저 알아 둘 말 두 개

• 깃허브(GitHub): 전 세계 개발자가 만든 코드를 공개해서 올려 두는 사이트예요. 공개된 코드는 정해진 조건(라이선스) 안에서 누구나 가져다 쓸 수 있어요. 그래서 '공짜 디자인 창고'라고 부른 거예요.
• 리액트(React): 요즘 사이트를 만들 때 많이 쓰는 뼈대(프레임워크)예요. 4번 React Bits는 리액트로 만든 사이트에서만 돌아가요.

1. Lenis — 스크롤을 미끄러지듯

한 줄로: 마우스 휠을 굴릴 때 뚝뚝 끊기지 않고 관성이 붙은 것처럼 부드럽게 내려가게 해 주는 라이브러리예요.

왜 좋은가요: 고급 브랜드 사이트를 스크롤할 때 '미끄러지는' 느낌이 이거예요. 브라우저 원래 스크롤을 감싸서 동작하기 때문에 고정 메뉴(sticky)·앵커 링크·접근성 기능이 그대로 살아 있어요. 라이브러리 전체가 몇 KB밖에 안 되고 다른 라이브러리가 필요 없어요.

따라 하기

1. 사이트 폴더에서 설치해요 (npm을 쓰는 프로젝트).
2. npm을 안 쓰는 그냥 HTML 사이트면 script 태그 한 줄을 </body> 바로 앞에 넣어요.
3. 아래 기본 코드 한 줄로 켜요.

npm i lenis

<script src="https://unpkg.com/lenis@1.3.27/dist/lenis.min.js"></script>

const lenis = new Lenis({ autoRaf: true });

AI한테 말할 때

Lenis 써서 이 사이트 스크롤을 부드럽게 해 줘. 공식 README의 기본 설정(autoRaf: true)과 권장 CSS(lenis/dist/lenis.css)를 써 줘.

확인하는 법: 페이지를 휠로 내려 보세요. 멈출 때 '스윽' 하고 감속하면 켜진 거예요.

막히면

• 스크롤이 안 움직이면 권장 CSS(lenis/dist/lenis.css)를 안 불러온 경우가 많아요.
• 리액트·뷰·프레이머용 패키지가 따로 있어요(lenis/react 등). AI에게 "내 프로젝트에 맞는 Lenis 패키지로"라고 말하면 골라 줘요.

2. GSAP — 뭐든 움직이게 (이제 전부 무료)

한 줄로: 글자·사진·버튼·도형을 원하는 대로 움직이게 만드는 애니메이션 라이브러리예요. 15년 넘게 쓰여 온 도구예요.

왜 좋은가요: 예전엔 글자를 한 글자씩 쪼개는 SplitText, 모양을 바꾸는 MorphSVG 같은 추가 기능(플러그인)이 유료 회원 전용이었어요. 지금은 Webflow가 지원하면서 추가 기능까지 전부 무료예요. 가격 페이지에 "GSAP is now 100% free for all users, thanks to Webflow's support"라고 적혀 있어요.

따라 하기

1. 설치해요. npm을 안 쓰면 CDN script 태그를 넣어요.
2. 추가 기능을 쓸 땐 gsap.registerPlugin(...)으로 등록해요.

npm install gsap

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>

AI한테 말할 때

GSAP로 첫 화면 제목 글자가 한 글자씩 아래에서 올라오게 해 줘. SplitText 플러그인을 쓰고, 스크롤해서 각 섹션이 보일 때마다 살짝 떠오르게 ScrollTrigger도 써 줘.

확인하는 법: 새로고침했을 때 제목이 한 글자씩 올라오면 성공이에요.

막히면

• 옛날 글에 나오는 npm.greensock.com 비공개 저장소 설정(.npmrc)은 이제 필요 없어요. 공식 설치 문서는 3.13 이상 버전을 일반 npm에서 받으라고 안내해요.
• 추가 기능 이름이 안 먹으면 gsap.registerPlugin(SplitText, ScrollTrigger) 등록을 빠뜨린 경우예요.

3. Vanta — 3D 배경을 몇 줄로

한 줄로: 구름·파도·새 떼 같은 움직이는 3D 배경을 사이트의 원하는 칸 뒤에 깔아 주는 라이브러리예요.

왜 좋은가요: 배경 영상보다 파일이 작고(three.js 포함 약 120kb), 마우스·터치에 반응하고, 색을 내 브랜드에 맞게 바꿀 수 있어요. 공식 사이트 문구가 "Animated website backgrounds in a few lines of code"예요.

효과 14가지(저장소 기준): birds(새 떼) · cells · clouds(구름) · clouds2 · dots · fog(안개) · globe · halo · net · rings · ripple · topology · trunk · waves(파도)

따라 하기

1. 배경을 깔 칸에 id를 붙여요. 예: <section id="my-background">
2. 아래 script 2줄을 넣어요 (three.js를 먼저).
3. 마지막 줄로 효과를 켜요.

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta/dist/vanta.waves.min.js"></script>

VANTA.WAVES('#my-background')

색·파도 높이를 바꾸는 예 (README 옵션):

VANTA.WAVES({ el: '#my-background', color: 0x000000, waveHeight: 20, shininess: 50, waveSpeed: 1.5, zoom: 0.75 })

AI한테 말할 때

맨 위 첫 화면 섹션 배경에 Vanta의 WAVES 효과를 깔아 줘. three.js를 먼저 불러오고, 색은 우리 사이트 대표색으로, 폰에서 효과가 안 될 때를 대비해 같은 색 배경도 지정해 줘.

확인하는 법: 그 칸 뒤에서 파도가 움직이고, 마우스를 움직이면 반응하면 성공이에요.

막히면 (공식 사이트의 주의 사항)

• 오래된 컴퓨터에선 느릴 수 있어요. 공식 사이트에 "Don't use more than one or two in a single page!"라고 적혀 있어요. 한 페이지에 한두 개까지만.
• 폰에서 안 되는 효과도 있어요. 배경 이미지나 색을 대체로 꼭 지정하세요.
• 배경이 안 보이면 칸에 높이가 없는 경우가 많아요(예: min-height: 100vh).
• 효과마다 three.js 대신 p5.js가 필요한 것도 있어요(README 참고).
• 저장소의 마지막 업데이트는 2024년 3월이에요. 잘 돌아가지만 새 기능은 잘 안 붙어요.

4. React Bits — 복사해서 붙이는 부품 215개 넘게

한 줄로: 글자 애니메이션·배경·버튼 같은 완성된 애니메이션 부품을 복사해서 붙이는 모음이에요. 네 개 중 깃허브 별이 가장 많아요(50,868).

안에 든 것 (README 표, 2026-11-01):

부품마다 JavaScript/TypeScript × CSS/Tailwind 네 가지 버전이 있어요.

따라 하기

1. 리액트(또는 Next.js) 프로젝트인지 먼저 확인해요. 아니면 이 부품들은 안 돌아가요.
2. reactbits.dev에서 마음에 드는 부품을 고르고, 그 부품의 명령 한 줄로 설치해요. 이름 끝 글자가 버전을 고릅니다(TS·JS, CSS·TW).
3. 명령이 싫으면 부품의 Code 탭에서 코드를 복사해 붙여도 돼요.

npx shadcn@latest add @react-bits/SplitText-TS-TW

npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TW

AI한테 말할 때 (덤: 클로드 코드에 직접 연결)

React Bits는 shadcn MCP 서버로 클로드 코드·커서 같은 AI 도우미에 연결할 수 있어요. 프로젝트의 components.json에 아래 줄을 넣고, 연결 명령을 한 번 실행한 뒤 클로드 코드를 다시 켜요.

"registries": { "@react-bits": "https://reactbits.dev/r/{name}.json" }

npx shadcn@latest mcp init --client claude

React Bits에서 Split Text 부품을 TypeScript + Tailwind 버전으로 설치해서 첫 화면 제목에 적용해 줘. 배경에는 React Bits의 Backgrounds 갈래에서 어울리는 걸 하나 골라 추천해 줘.

확인하는 법: 제목이 쪼개져 올라오는 애니메이션이 보이면 성공이에요.

막히면

• 그냥 HTML 사이트나 뷰(Vue) 프로젝트에 붙이려 하면 안 돼요. 그럴 땐 1~3번(Lenis·GSAP·Vanta)이 맞아요.
• 연결 뒤에 도구가 안 보이면 클로드 코드에서 /mcp로 상태를 확인하라고 공식 문서에 나와 있어요.
• 유료 'React Bits Pro'(페이지 섹션·템플릿 등)도 있어요. 위 215개 이상 부품은 무료예요("React Bits stays free forever").

쓰기 전에 알아 둘 조건 (라이선스·속도)

• 속도: Vanta는 한 페이지에 한두 개까지. 오래된 컴퓨터에서 느릴 수 있고, 폰에서 안 되는 효과가 있어요.
• 뼈대: React Bits는 리액트 전용이에요.
• 'GSAP은 무료라서 라이선스가 없다'는 말은 틀려요. 무료지만 표준 라이선스(위 표의 조건)가 있어요.

체크리스트

• 내 사이트가 리액트인지 확인했다 (4번을 쓸지 정하기)
• Lenis 설치하고 스크롤이 부드러워진 걸 봤다
• GSAP으로 제목 애니메이션을 하나 넣었다
• Vanta는 한 페이지에 한두 개까지만 쓰고, 대체 배경색도 지정했다
• 쓰는 라이브러리의 라이선스 조건을 한 번 읽었다

출처 (2026-11-01~02 확인)

• Lenis: https://github.com/darkroomengineering/lenis (README Features·Installation, MIT)
• GSAP: https://gsap.com/pricing/ · 설치 https://gsap.com/docs/v3/Installation/ · 표준 라이선스 https://gsap.com/community/standard-license/ · https://github.com/greensock/GSAP
• Vanta: https://github.com/tengbao/vanta (README·dist 목록, MIT) · https://www.vantajs.com/
• React Bits: https://github.com/DavidHDev/react-bits (README·LICENSE.md) · MCP https://reactbits.dev/get-started/mcp