"저 효과 뭐지?" 싶을 때 — 프론트엔드 애니메이션 사이트 5곳과 AI로 가져오는 법

웹사이트를 보다가 “스크롤할 때 저렇게 나타나는 효과 뭐지”, “마우스를 따라오는 카드 효과를 내 화면에도 넣고 싶은데” 하는 순간이 있습니다. 예전에는 효과의 이름부터 알아내고 구현 방법을 찾아야 했지만, 지금은 순서가 달라졌습니다.

원하는 효과를 찾아 링크를 복사하고, AI에게 적용시키는 것으로 시작할 수 있습니다. 이 글은 효과를 찾을 만한 사이트 5곳의 성격과 무료·유료 구조, 라이선스를 공식 자료 기준으로 정리하고, 찾은 뒤 실제로 적용하는 방법까지 담았습니다(조회일 2026-08-20).

⚠️ 컴포넌트 라이브러리의 요금과 라이선스는 정책 변경으로 바뀝니다. 상업 프로젝트에 쓰기 전에는 각 사이트의 라이선스 문서를 확인하세요.

한눈에 비교

1. React Bits — 효과 종류가 가장 많다

스스로를 “기억에 남는 웹사이트를 만들기 위한, 애니메이션·인터랙티브·완전 커스터마이즈 가능한 오픈소스 React 컴포넌트 모음”으로 소개합니다.

• 컴포넌트 165개 이상이고, 텍스트 애니메이션 / UI 요소 / 배경 효과 / 일반 애니메이션으로 나뉩니다.
• 같은 컴포넌트를 4가지 조합으로 제공합니다 — JS+CSS, JS+Tailwind, TS+CSS, TS+Tailwind. 쓰던 프로젝트 설정에 맞춰 그대로 가져갈 수 있습니다.
• 글자가 블러로 등장하는 효과, 커서 인터랙션, 마그넷 효과, 애니메이션 배경, 스크롤 효과처럼 “이름을 모르는 효과”를 눈으로 찾기 좋습니다.
• 라이선스가 MIT + Commons Clause입니다. 개인·상업 프로젝트에서 쓰는 건 무료지만 Commons Clause는 소프트웨어 자체를 판매하는 것을 제한합니다. 컴포넌트를 모아 유료 상품으로 되파는 형태라면 조건을 따져봐야 합니다.

2. Magic UI — 랜딩페이지에 바로 쓸 조각들

“디자인 엔지니어를 위한 UI 라이브러리”라고 스스로를 소개하는 곳입니다. React·TypeScript·Tailwind·Framer Motion 기반이고 라이선스는 MIT입니다.

• 마퀴(흐르는 텍스트), 블러 페이드, 텍스트 애니메이트, 워드 로테이트, 레트로 그리드, 벤토 그리드처럼 랜딩페이지에서 자주 보는 조각들이 갖춰져 있습니다.
• 장점은 설치 방식입니다. shadcn CLI로 필요한 컴포넌트만 프로젝트에 추가하는 방법이 공식 문서에 표준으로 안내돼 있습니다.

pnpm dlx shadcn@latest add @magicui/globe

• 즉 전체 라이브러리를 의존성으로 넣지 않고 쓸 것만 코드로 받아 수정할 수 있습니다. AI에게 작업을 맡길 때도 이 방식이 다루기 쉽습니다.

3. Aceternity UI — 첫인상이 중요한 화면이라면

앞의 두 곳보다 비주얼이 강한 쪽입니다. 공식 홈에서 React·Tailwind·Motion 기반으로 200개 이상의 컴포넌트·블록·템플릿을 제공한다고 밝히고 있습니다.

• 3D 카드, 오로라 배경, 벤토 그리드, 글로브, 패럴랙스 스크롤, 텍스트 생성 효과 같은 것들이 있습니다.
• 컴포넌트 단위를 넘어 블록 단위로도 제공합니다 — 히어로 23종 이상, 피처 섹션 22종 이상, 요금표, 추천사, 팀 소개 등. 완성형 템플릿도 12종 이상입니다.
• shadcn 호환 블록 섹션이 따로 있어서 기존 shadcn 프로젝트에 붙이기 쉽습니다.
• 요금 구조를 알아두세요: 기본 컴포넌트는 무료지만 프리미엄 블록과 템플릿은 All-Access Pass 구독입니다. 무료로 알고 시작했다가 원하는 블록이 유료인 경우가 생깁니다.
• 포트폴리오, 프로모션 페이지, 제품 랜딩처럼 첫 화면이 승부인 작업에서 참고할 만합니다.

4. Motion Primitives — 과하지 않게 다듬을 때

“아름답고 애니메이션된 인터페이스를 더 빠르게 만드는 UI 키트”로 소개되는 오픈소스입니다. Motion과 Tailwind 기반이고 MIT 라이선스, 현재 베타 단계입니다.

• 화려한 효과보다 UI 자체의 움직임을 자연스럽게 만드는 계열입니다. 다이얼로그가 열리는 방식, 요소가 전환되는 방식 같은 것들이죠.
• “화면을 확 바꾸기보다 조금 더 제품답게 움직이게 하고 싶다”면 여기부터 보는 편이 낫습니다.
• 컴포넌트 목록은 공식 문서에서 확인하는 것이 정확합니다.

5. Hover.dev — 버튼·메뉴 같은 작은 것들

“중독성 있는 인터랙티브 애니메이션 UI 컴포넌트와 템플릿”을 복사-붙여넣기로 쓰는 곳입니다. React·Tailwind 기반이고, 효과에 따라 Framer Motion이나 CSS 키프레임 등을 함께 씁니다.

• 히어로·기능·요금·로그인·통계·추천·FAQ 같은 섹션과, 버튼·내비게이션·캐러셀·드롭다운·토글·아코디언·카드·모달 같은 개별 컴포넌트가 있습니다.
• “엄청 특이한 효과”보다 평범한 버튼의 호버를 조금 재미있게 만들고 싶을 때 맞습니다.
• 여기도 일부만 무료이고 전체는 유료 해제 방식입니다.

찾았다면, 그다음이 쉬워졌습니다

예전에는 코드를 복사하고 의존성을 확인하고 프로젝트 구조에 맞게 고쳐야 했습니다. Claude Code나 Codex를 쓴다면 그 과정을 전부 이해하고 있을 필요는 없습니다. 컴포넌트 페이지 URL을 주고 지시하면 됩니다.

이 프로젝트의 히어로 제목에 아래 컴포넌트 효과를 적용해줘. (URL)

이때 결과가 좋아지는 요청 방식이 있습니다.

1. 어디에 적용할지 먼저 지정하세요. “히어로 제목”, “카드 목록 첫 번째 섹션”처럼 위치를 말해야 엉뚱한 곳에 붙지 않습니다.
2. 기존 스타일 체계를 지키라고 명시하세요. “현재 프로젝트의 색 토큰과 폰트를 그대로 쓰고, 새 색을 만들지 말 것” 같은 조건을 넣으면 화면이 튀지 않습니다.
3. 의존성 추가 여부를 물어보게 하세요. Framer Motion 같은 패키지가 새로 필요할 수 있습니다. 무턱대고 설치하기보다 “필요한 패키지가 있으면 먼저 알려줘”라고 하는 편이 안전합니다.
4. 접근성과 모션 감소를 요청하세요. 시스템에서 애니메이션을 줄이도록 설정한 사용자를 위해 prefers-reduced-motion 대응을 함께 넣어달라고 하면 완성도가 올라갑니다.
5. 모바일에서 확인하세요. 커서를 따라오는 효과나 무거운 배경 애니메이션은 모바일에서 의미가 없거나 성능을 깎습니다.

디자이너 입장에서 실질적인 변화는 이것입니다 — 컴포넌트 이름을 정확히 외우거나 구현 방법을 알 필요가 줄었고, 대신 “어떤 효과가 이 화면에 맞는지 고르는 판단”이 더 중요해졌습니다.

핵심 요약 — 이것만 기억하자

1. 효과를 찾는 순서가 바뀌었다: 이름 알아내기 → 구현법 검색이 아니라, 눈으로 찾기 → 링크 복사 → AI에게 적용 지시.
2. 종류가 가장 많은 곳은 React Bits(165개 이상, JS/TS·CSS/Tailwind 4조합). 단 MIT + Commons Clause라 소프트웨어 자체의 판매는 제한된다.
3. 랜딩페이지 조각은 Magic UI(MIT). shadcn CLI로 필요한 컴포넌트만 받아 쓰는 방식이 공식 지원돼 AI에게 맡기기도 편하다.
4. 강한 비주얼·블록·템플릿은 Aceternity UI — 200개 이상이지만 프리미엄 블록은 유료 구독이다.
5. 과하지 않은 모션은 Motion Primitives(MIT, 베타), 작은 인터랙션은 Hover.dev(일부 무료 + 유료).
6. AI에게 요청할 때는 위치 지정 + 기존 토큰 유지 + 의존성 먼저 확인 + 모션 감소 대응을 함께 말하면 결과가 안정적이다.
7. 무료로 알려진 곳도 라이선스와 유·무료 경계가 다르다. 상업 프로젝트라면 쓰기 전에 각 사이트 문서를 확인하자.

이 정보들, 어디서 직접 확인하나?

출처

• React Bits GitHub — 컴포넌트 165개 이상, 4가지 제공 조합, MIT + Commons Clause
• Magic UI GitHub · 설치 문서 — “UI Library for Design Engineers”, MIT, shadcn CLI 설치
• Aceternity UI 공식 — 200개 이상 컴포넌트·블록·템플릿, shadcn 호환 블록, All-Access Pass 구독
• Motion Primitives GitHub — Motion·Tailwind 기반, MIT, 베타
• Hover.dev 공식 — React·Tailwind, 일부 무료 + 유료 해제
• 각 사이트의 세부 요금과 개별 컴포넌트 목록은 공식 페이지에서 확인하시기 바랍니다. Aceternity의 MCP 서버 지원 여부는 이 글 작성 시점에 공식 홈에서 확인되지 않아 서술하지 않았습니다

조회일 2026-08-20 기준. 라이선스·요금 정책은 바뀔 수 있습니다.