웹 UI 자료 사이트 5곳, 바이브코딩 결과물이 비슷해 보일 때

바이브 코딩으로 만든 사이트가 다 비슷해 보인다면, AI에게 넘기는 재료부터 바꿔 볼 차례입니다. 이 글은 웹 UI 자료 사이트 5곳(움직이는 아이콘, UI 요소·블록, 애니메이션 컴포넌트, 디자인 레퍼런스, 클로드 코드용 리액트 스킬)의 주소와 라이선스, 프로젝트에 넣는 방법을 정리합니다. 재료를 바꾸면 결과물도 달라집니다.

바이브코딩 사이트가 비슷해 보이는 이유

바이브 코딩은 코드를 직접 짜지 않고 AI에게 말로 시켜 사이트나 앱을 만드는 방식입니다. 아무 재료 없이 "멋진 랜딩 페이지 만들어 줘"라고 하면, AI는 가장 흔한 조합(기본 아이콘, 무난한 카드 배치, 같은 계열의 그라데이션)으로 채웁니다. 그래서 결과물이 서로 닮아 보입니다.

해결책은 AI에게 다른 재료를 쥐여 주는 것입니다. 움직이는 아이콘, 개성 있는 컴포넌트, 실제 사이트 레퍼런스, 최신 방식대로 코드를 짜게 하는 규칙을 넣어 주면 같은 AI라도 결과가 달라집니다.

웹 UI 자료 사이트 5곳 한눈에 보기

1. AnimateIcons (animateicons.in)

• 무엇: 움직이는 리액트(React) 아이콘 1170개 이상. 마우스를 올리거나 포커스하면 아이콘이 움직입니다.
• 라이선스: MIT. 개인·상업 프로젝트 모두 무료로 쓸 수 있고, 저작권·라이선스 고지를 남기는 조건입니다.
• 넣는 법: npm 패키지나 shadcn 명령으로 설치합니다(아래 2단계 참고).

2. SHIUI (shi-ui.vercel.app)

• 무엇: 일본 히노마루 포스터처럼 그린 UI 키트. 요소 111개와 블록 24개를 모아 두었고, 1.5px 선, 그림자 없음, 세 가지 색(종이색·먹색·주홍색)이 특징입니다.
• 라이선스: ISC(공개 저장소 github.com/psychosomat/ShiUI의 README와 package.json 표기 기준). 별도의 LICENSE 파일은 없습니다. ISC는 MIT와 거의 같은 허용형 라이선스라 개인·상업 프로젝트에 쓸 수 있고, 저작권·허가 고지를 남기는 조건입니다.
• 이름 주의: 검색할 때 "시 UI"나 "C UI"로는 잘 안 나옵니다. 주소로 엽니다.

3. Tween UI (tween-ui.vercel.app)

• 무엇: GSAP(웹 애니메이션 라이브러리)와 Tailwind CSS로 만든 움직이는 리액트 컴포넌트 모음. 일부는 CSS 전환 효과만 씁니다.
• 라이선스: MIT(공개 저장소 StaticMania/tween-ui 기준).
• 넣는 법: shadcn 명령으로 컴포넌트 소스를 내 프로젝트에 파일 하나로 복사해 넣습니다. React 19와 Tailwind CSS v4 환경을 기준으로 합니다.

4. Minimal Gallery (minimal.gallery)

• 무엇: 2013년부터 운영된 웹 디자인 레퍼런스 모음. 에이전시, AI, 포트폴리오, 쇼핑몰, SaaS 같은 사이트 유형과 Framer, Webflow 같은 제작 도구별로 사이트를 골라 볼 수 있습니다.
• 라이선스: 실제 운영 중인 남의 사이트를 모아 둔 곳이라 가져다 쓰는 자료가 아닙니다. 레이아웃과 여백, 글꼴 조합을 참고하는 용도입니다. 템플릿 메뉴의 일부는 유료 상품으로 연결될 수 있으니 각 상품의 조건을 확인합니다.

5. React Frontend Skills (github.com/PyModel/react-frontend-skills)

• 무엇: 클로드 코드에 넣는 스킬 18개. 스킬은 AI에게 특정 작업의 규칙과 순서를 적어 둔 설명서 폴더입니다. React 19, Next.js 16, TypeScript, Tailwind, shadcn, 테스트(Vitest, Playwright) 등 최신 리액트 방식대로 코드를 짜게 해 줍니다.
• 라이선스: MIT.
• 넣는 법: 터미널 명령 한 줄로 설치합니다(아래 16단계 참고). 클로드 코드뿐 아니라 코덱스, 커서에서도 쓸 수 있습니다.

아이콘 개수, 요소·블록 개수, 스킬 개수는 2026년 10월 확인 기준이고 사이트가 업데이트되면 바뀔 수 있습니다.

따라 하기: 다섯 곳 열고 라이선스 적고 넣기 (16단계)

다섯 곳을 차례로 열어 라이선스를 메모하고, 쓸 수 있는 자료는 프로젝트에 넣는 순서입니다. 사이트를 둘러보는 시간을 빼면 10분 정도 걸립니다.

준비물

• 인터넷 브라우저(크롬, 사파리 등)
• 라이선스를 적을 메모장
• (설치까지 할 때) 리액트 프로젝트 폴더, Node.js(자바스크립트 실행 프로그램, nodejs.org에서 설치), 터미널
• (5번 스킬) 클로드 코드가 설치된 환경
• 비용: 1·3·5번은 MIT, 2번은 ISC 라이선스 오픈소스라 무료입니다. 4번은 레퍼런스 열람용입니다.

브라우저 열기

1단계. 인터넷 브라우저를 엽니다

확인: 브라우저 창과 맨 위 주소창이 보입니다.

1번 AnimateIcons

2단계. 주소창에 아래 주소를 입력하고 엔터를 누릅니다

animateicons.in

확인: AnimateIcons 사이트가 열리고 움직이는 아이콘 목록이 보입니다.

설치할 때는 프로젝트 폴더의 터미널에서 아래 둘 중 하나를 씁니다. 첫 줄은 아이콘 패키지 전체를, 둘째 줄은 shadcn 방식으로 아이콘 하나(예: lu-x)를 넣는 명령입니다.

npm install @animateicons/react
npx shadcn@latest add @animateicons/lu-x

3단계. 아이콘 하나를 눌러 코드와 옵션을 확인합니다

확인: 크기(size), 색(color), 움직임 시간(duration)을 바꾸는 예시 코드가 보입니다.

4단계. 메모장에 이 사이트의 라이선스를 적습니다

확인: 메모장에 "1번: MIT"가 적혀 있습니다.

2번 SHIUI

5단계. 주소창에 아래 주소를 입력합니다

shi-ui.vercel.app

확인: 주소창에 주소가 정확히 들어가 있습니다.

6단계. 엔터 키를 누릅니다

확인: 종이색 바탕에 먹색 선, 주홍색 포인트가 들어간 요소·블록 모음이 열립니다.

7단계. 메모장에 이 사이트의 라이선스를 적습니다

확인: 메모장에 "2번: ISC"가 적혀 있습니다. 저장소에 LICENSE 파일은 없고, README와 package.json에 ISC로 적혀 있습니다.

3번 Tween UI

8단계. 주소창에 아래 주소를 입력합니다

tween-ui.vercel.app

확인: 주소창에 주소가 정확히 들어가 있습니다.

9단계. 엔터 키를 누릅니다

확인: 움직이는 컴포넌트 목록이 열립니다. 컴포넌트마다 설치 명령이 붙어 있습니다.

설치는 컴포넌트 페이지의 명령을 복사해 프로젝트 폴더의 터미널에 붙여 넣습니다. 예를 들어 탭 전환 효과(tab-wipe)는 이렇게 넣습니다.

npx shadcn@latest add @tween-ui/tab-wipe

10단계. 메모장에 이 사이트의 라이선스를 적습니다

확인: 메모장에 "3번: MIT"가 적혀 있습니다.

4번 Minimal Gallery

11단계. 주소창에 아래 주소를 입력합니다

minimal.gallery

확인: 주소창에 주소가 정확히 들어가 있습니다.

12단계. 엔터 키를 누릅니다

확인: 사이트 유형별 웹 디자인 레퍼런스 목록이 열립니다.

마음에 드는 사이트를 찾으면 화면을 캡처해 두었다가, AI에게 "이 캡처처럼 여백을 넓게 쓰고 글꼴은 세리프 하나로" 하는 식으로 무엇을 참고할지 구체적으로 적어 함께 넘깁니다.

13단계. 메모장에 이 사이트의 이용 조건을 적습니다

확인: 메모장에 "4번: 레퍼런스 열람용(템플릿은 상품별 조건 확인)"이 적혀 있습니다.

5번 React Frontend Skills

14단계. 주소창에 아래 주소를 입력합니다

github.com/PyModel/react-frontend-skills

확인: 주소창에 주소가 정확히 들어가 있습니다.

15단계. 엔터 키를 누릅니다

확인: 깃허브 저장소 페이지가 열리고, 스킬 18개의 목록과 설치 방법이 보입니다.

16단계. 라이선스를 메모하고 클로드 코드에 스킬을 설치합니다

메모장에 "5번: MIT"를 적습니다. 설치는 프로젝트 폴더의 터미널에서 아래 명령을 실행합니다. -a claude-code는 클로드 코드용으로, -s '*'는 스킬 전부를, -y는 확인 질문을 건너뛰라는 뜻입니다. 모든 프로젝트에서 쓰려면 끝에 -g를 붙입니다.

npx skills add PyModel/react-frontend-skills -a claude-code -s '*' -y

확인: 메모장에 다섯 곳의 라이선스가 모두 적혀 있고, 클로드 코드를 다시 열었을 때 스킬이 목록에 보입니다.

마지막 점검

• 다섯 곳이 모두 열렸습니다.
• 다섯 곳의 라이선스 또는 이용 조건이 메모장에 적혀 있습니다.
• 레퍼런스(4번)는 코드를 그대로 가져다 쓰지 않고 참고만 하기로 했습니다.
• 쓸 자료(1·3·5번)는 프로젝트에 설치했습니다.

설치한 것을 되돌리려면 npm 패키지는 npm uninstall 패키지이름으로 지우고, shadcn으로 복사한 컴포넌트는 생성된 파일을 삭제합니다. 스킬은 설치된 스킬 폴더를 지우면 됩니다.

웹 UI 자료 사이트를 쓸 때 막히는 곳

사이트가 안 열린다

주소 오타이거나 사이트 주소가 바뀌었을 수 있습니다. 위 코드블록의 주소를 복사해 다시 붙여 넣습니다. 그래도 안 열리면 깃허브 저장소(1번 Avijit07x/animateicons, 3번 StaticMania/tween-ui)에서 새 주소를 확인합니다.

2번을 이름으로 검색해도 안 나온다

정식 이름은 SHIUI입니다. 이름 대신 주소(shi-ui.vercel.app)로 엽니다.

shadcn 명령이 오류를 낸다

shadcn 방식은 프로젝트에 shadcn 설정이 먼저 돼 있어야 합니다. 프로젝트 폴더에서 npx shadcn@latest init을 먼저 실행한 뒤 다시 설치 명령을 넣습니다. Tween UI는 React 19와 Tailwind CSS v4 기준이라 버전이 낮으면 오류가 날 수 있습니다.

라이선스를 못 찾겠다

사이트에 표기가 없으면 연결된 깃허브 저장소의 LICENSE 파일을 봅니다. LICENSE 파일이 없으면 README와 package.json의 license 항목도 확인합니다. 2번 SHIUI가 이런 경우로, 두 곳 모두 ISC로 적혀 있습니다. 어디에도 표기가 없으면 쓸 수 있는 자료로 보지 않고 참고만 합니다.