부품 골라 움직이는 내 웹사이트 만들기

남이 잘 다듬어 둔 웹페이지 부품을 골라 내 웹사이트에 넣는 방법이에요. 코딩은 몰라도 돼요. 명령어 세 줄을 붙여 넣고, 고른 부품의 프롬프트를 한 번 붙여 넣으면 페이지가 움직이며 열려요.

페이지를 열면 비어 있던 자리에 큰 제목과 설명이 아래에서 스르르 떠올라요. 설치 명령 세 줄은 1분이 안 걸리고, 부품 프롬프트를 붙여 넣은 뒤 페이지가 열리기까지는 2분 30초쯤 걸려요. Claude Code를 까는 시간과 로그인 시간은 따로예요. 대화 창에서 쓰면 허락 단추를 누르는 시간이 더 붙을 수 있어요.

그냥 “예쁘게 만들어 줘”라고 하면 왜 다 비슷해질까

Claude에게 “예쁜 웹사이트 만들어 줘”라고만 하면 어디서 본 듯한 페이지가 나와요. 말로 더 자세히 설명해도 비슷한 모양이 자꾸 되풀이돼요.

Claude를 만든 Anthropic도 이걸 알아요. 공식 디자인 지침은 칸마다 아래에서 떠오르는 움직임, 카드마다 붙은 마우스 반응 같은 흔한 기본값을 AI가 만든 티로 꼽아요. 대신 페이지가 열릴 때 한 번 제대로 움직이는 편이 낫다고 해요.

그래서 이 가이드는 말로 설명하는 대신 완성된 부품을 골라 넣어요. 분위기를 Claude가 고르는 게 아니라 내가 고른 걸로 정하는 거예요.

위는 한 문장만 시켜 만든 첫 화면이고, 아래는 21st.dev에서 고른 부품을 함께 줘서 만든 첫 화면이에요. 위도 깔끔하지만 분위기는 Claude가 정했어요. 아래는 내가 고른 부품의 분위기를 따라가요.

네 가지 도구가 하는 일

이 가이드에는 도구 네 가지가 나와요. Claude Code는 내 말을 듣고 폴더에 파일을 만들어 주는 만드는 손이에요. Framer Motion은 페이지에 움직임을 넣는 도구예요. UI UX Pro Max는 색과 글꼴 고르기를 돕는 재료예요. 21st.dev는 남이 다듬어 둔 웹페이지 부품을 모아 둔 사이트예요.

시작 전에 준비할 것

• 맥 컴퓨터와 터미널. 터미널은 글자로 컴퓨터에 일을 시키는 창이에요. command 키와 스페이스를 함께 누르고 “터미널”을 쳐서 열어요. 이 가이드의 명령은 모두 이 창에 붙여 넣어요.
• Claude 계정. Claude Code는 내 Claude 요금제의 사용량을 함께 써요. 어느 요금제부터 되는지는 Claude Code 공식 문서에서 확인하세요.
• Node.js. Node.js는 내 컴퓨터에서 웹 페이지용 프로그램을 돌려 주는 기본 프로그램이에요. 아래 명령 중 npm으로 시작하는 줄은 이게 있어야 돌아가요. npm은 남이 만든 부품을 받아 설치해 주는 도구예요. Node.js 내려받기 페이지에서 LTS라고 적힌 판, 그러니까 오래 안정적으로 지원되는 판을 설치하면 npm도 함께 깔려요.
• Python 3. UI UX Pro Max 안내문에 준비물로 적혀 있어요. 터미널에 python3 --version을 쳐서 숫자가 나오면 이미 있는 거예요.
• 21st.dev 계정. 부품 프롬프트를 복사하려면 로그인해야 해요.

1단계. Claude Code 설치하기

아래 한 줄을 복사해 터미널에 붙여 넣고 엔터를 눌러요.

curl -fsSL https://claude.ai/install.sh | bash

설치가 끝나면 웹사이트가 들어갈 새 폴더를 만들고 그 안으로 들어가요. 아래를 붙여 넣으면 문서 폴더 안에 내-웹사이트라는 폴더가 생겨요.

mkdir -p ~/Documents/내-웹사이트 && cd ~/Documents/내-웹사이트

2단계와 3단계. Framer Motion과 UI UX Pro Max 설치하기

같은 터미널에서 아래 세 줄을 통째로 복사해 붙여 넣고 엔터를 눌러요.

npm install framer-motion
npm install -g ui-ux-pro-max-cli
uipro init --ai claude

끝에 “UI/UX Pro Max installed successfully!”가 보이면 성공이에요. 첫 줄은 움직임 도구 Framer Motion을 이 폴더에 깔아요. 둘째와 셋째 줄은 UI UX Pro Max 스킬을 이 폴더의 Claude Code에 깔아요. 스킬은 Claude Code가 필요할 때 꺼내 읽는 작업 설명서 묶음이에요.