정리본, 스케일메이커 이슬

홈페이지 AI 티 없애는 originkit 사용법

AI로 만든 홈페이지가 다 비슷해 보이는 이유는 움직임이 없어서예요. 아래 사이트 9개에서 효과를 골라 클로드코드에 붙여넣기만 하면 화면이 확 달라집니다. 맨 아래에 originkit 사용법도 순서대로 정리했어요.

originkit 사용법 (가장 쉬운 방법)

1. 1

   originkit.dev 들어가기

   originkit.dev 는 무료 애니메이션 컴포넌트 모음 사이트예요. 배경 효과·버튼·텍스트 애니메이션 같은 걸 미리보기로 바로 볼 수 있어요.

2. 2

   적용하고 싶은 효과 클릭

   목록을 넘겨보다가 마음에 드는 효과를 누르세요. 처음엔 메인 첫 화면 배경이나 제목 텍스트 효과처럼 눈에 잘 띄는 곳 하나만 바꿔도 충분합니다.

3. 3

   ‘Get this’ 흰색 버튼 클릭 → AI 프롬프트 복사

   효과 화면에서 흰색 Get this 버튼을 누르면 코드를 가져가는 방법이 나와요. 그중 AI 프롬프트를 복사하세요. 코드를 몰라도 이 프롬프트만 있으면 됩니다.

4. 4

   클로드코드에 붙여넣기

   홈페이지 프로젝트를 연 클로드코드에 복사한 프롬프트를 붙여넣고, 어디에 넣을지 한 줄 덧붙이면 끝이에요.

   덧붙일 말 복사

   방금 붙여넣은 효과를 우리 홈페이지 메인 첫 화면(히어로)에 적용해줘.
   기존 문구·색상은 그대로 두고, 모바일에서도 깨지지 않게 확인해줘.

5. 5

   확인하고 고치기

   적용 후엔 꼭 휴대폰 화면으로도 확인하세요. 너무 화려하면 "움직임 조금 약하게", "속도 느리게"처럼 말로 고치면 됩니다. 한 페이지에 효과를 여러 개 넣으면 오히려 산만해지니 1~2개만 추천해요.

출처: 각 사이트 공식 페이지 (2026-10-16 확인) | scalemaker.co