디자인, 모션 스킬 설치

지금까지 Claude 앱, Claude Code, GitHub, Vercel을 준비했습니다. 이제 Claude가 "디자인을 잘하고, 움직이는 화면과 영상을 만들 줄 아는" 상태로 만들어 봅니다. 새 프로그램을 여러 개 배우는 것이 아닙니다. 이 장에서 여러분이 하는 일은 딱 세 가지입니다.

• Claude에게 설치를 부탁합니다. 아래 프롬프트 하나를 붙여넣으면 됩니다.
• Claude가 허락을 구하면 읽고 허용합니다. 무엇을 보고 판단하는지 이 장에서 연습합니다.
• 새 세션을 열어서 목록에 보이는지 확인합니다.

스킬이 무엇인가요

스킬(Skill)은 Claude에게 붙이는 "전문가의 작업 설명서"입니다. 요리에 비유하면 레시피 카드 한 장입니다. 카드에는 "디자인을 맡으면 먼저 이것을 묻고, 이런 순서로 만들고, 이런 모양은 피하세요" 같은 내용이 글로 적혀 있습니다. Claude는 일을 시작할 때 해당 카드를 읽고 그 기준대로 움직입니다. 같은 부탁이라도 카드가 있으면 결과가 더 일정하고 구체적으로 나옵니다.

카드 한 장만 들어 있는 것도 있고, 카드와 함께 작은 도구(검색 프로그램 등)가 딸려 있는 것도 있습니다. 그래서 어디서 받은 스킬인지가 중요합니다. 이 내용은 아래 "허락 창에서 무엇을 확인하나요"에서 다시 다룹니다.

스킬과 플러그인은 무엇이 다른가요

이번에 넣을 4가지

역할이 서로 달라서 4가지를 모두 넣습니다. 지금은 이름과 역할만 알아 두세요. 어떻게 부르는지는 아래 "스킬 부르는 법"에서 한 줄씩 해 봅니다.

시작하기 전에 확인할 것

• Claude 앱의 Code 탭이 열려 있고 Claude가 대답하는 상태여야 합니다. 2장에서 한 설치가 되어 있어야 합니다.
• 인터넷 연결이 되어 있어야 합니다. 설치는 GitHub에서 파일을 내려받는 일입니다.
• Node.js가 있으면 편합니다. 스킬 설치 도구 npx는 Node.js와 함께 들어 있습니다. 없다고 나오면 아래 FAQ와 8장을 보세요. Claude에게 설치를 부탁할 수 있습니다.
• 어느 폴더에서 열어도 됩니다. 이번 설치는 "내 PC 사용자 전체(전역)"에 하므로 작업 폴더와 상관없이 모든 프로젝트에서 쓸 수 있습니다.
• 회사 PC에서 외부 프로그램 설치가 제한되어 있으면 먼저 IT 담당자에게 확인하세요.

Claude에게 한 번에 설치 부탁하기

1. 새 대화 입력창을 준비합니다

   Claude 앱 Code 탭에서 새 세션을 열고, 아래쪽 입력창이 비어 있는 상태로 둡니다. 입력창의 전송 버튼 옆에 권한 모드를 고르는 선택기가 있습니다. 이 장에서는 Manual(수동)로 되어 있는지 확인하세요. Claude가 명령을 실행하기 전에 매번 물어보는 모드이며, 2장에서 한 설정 그대로입니다. 최신 버전은 처음부터 Auto 모드로 시작할 수 있는데, 그러면 아래 허락 창이 나오지 않으므로 Manual로 바꿔 두세요. 터미널의 Claude Code에서는 Shift+Tab을 눌러 아래쪽 상태 표시줄에 manual mode on이 보이게 합니다. 모드 이름과 화면 문구는 업데이트로 조금 다를 수 있습니다.

2. 아래 말을 그대로 붙여넣고 Enter를 누릅니다

   카드 오른쪽 위의 "복사" 버튼을 누른 뒤 Claude 입력창에 붙여넣으세요. Ctrl+V(Mac은 Cmd+V)로 붙여넣습니다. 출처 이름이 이미 정확히 들어 있으므로 고치지 말고 그대로 보내세요.

   Claude Code와 Codex 둘 다에서 쓸 수 있게 아래 4가지를 내 PC 전체(전역, 사용자 범위)에 설치해줘.
   출처는 아래에 적은 곳만 쓰고, 이름이 비슷한 다른 저장소는 설치하지 마.
   
   1) design-taste-frontend 스킬
      - 출처: GitHub Leonxlnx/taste-skill 안의 design-taste-frontend (이 저장소의 다른 스킬은 설치하지 마)
      - npx skills add 로 설치하고, 대상은 claude-code 와 codex 둘 다
   
   2) impeccable 스킬
      - 출처: GitHub pbakaus/impeccable
      - npx skills add 로 설치하고, 대상은 claude-code 와 codex 둘 다
      - 이 방법이 안 되면 저장소 설명서의 설치 방법을 알려줘
   
   3) ui-ux-pro-max 플러그인
      - Claude Code: 플러그인 마켓플레이스 nextlevelbuilder/ui-ux-pro-max-skill 을 등록한 뒤 ui-ux-pro-max 플러그인 설치
      - Codex: 저장소 설명서의 설치 도구 ui-ux-pro-max-cli 를 npx 로 실행해서 내 PC 전체(전역)에 설치 (npx ui-ux-pro-max-cli init --ai universal --global, Codex가 읽는 ~/.agents/skills 폴더에 들어감). 이 방법이 안 되면 저장소 설명서의 방법을 알려줘
   
   4) hyperframes
      - 출처: GitHub heygen-com/hyperframes
      - Claude Code: 플러그인 마켓플레이스 heygen-com/hyperframes 를 등록한 뒤 hyperframes 플러그인 설치
      - Codex: 선택창 없이 핵심 스킬 묶음만 전역 설치 (npx hyperframes skills update). 이 방법이 안 되면 방법만 알려줘
   
   진행 방법:
   - 먼저 node 와 npx 가 있는지 확인하고, 없으면 설치하지 말고 나한테 알려줘.
   - 명령을 실행하기 전에 무엇을 하는 명령인지 한 줄로 먼저 설명해줘.
   - 확인 질문이나 선택창 때문에 멈추는 명령은 확인을 건너뛰는 옵션(-y)을 붙여서 실행해줘.
   - 하나 설치할 때마다 성공했는지 확인하고, 실패하면 오류 문구를 그대로 보여줘.
   - 마지막에 4가지 각각 "어느 프로그램의 어느 폴더에 설치됐는지"와 "부르는 이름"을 표로 정리해줘.
   - 설치가 끝나면 새 세션을 시작해야 하는지도 알려줘.

   Claude가 명령을 하나씩 실행하며 설치합니다. 중간중간 허락 창이 뜹니다.

3. 허락 창이 뜨면 읽고 "Yes"를 누릅니다

   Claude는 명령을 하나 실행할 때마다 "이 명령을 실행해도 되나요?"라고 묻습니다. 명령 전체와 출처 이름을 눈으로 확인한 뒤 허용하세요. 무엇을 어떻게 확인하는지는 바로 아래 "허락 창에서 무엇을 확인하나요"에 자세히 적었습니다. 4가지를 설치하는 동안 허락 창이 여러 번 나올 수 있고, 그것이 정상입니다.

4. Claude의 마지막 보고를 읽습니다

   설치가 끝나면 Claude가 4가지를 표로 정리해 줍니다. 아래 "성공했을 때 모습"과 비교해 보세요. 일부가 실패했다면 당황하지 말고 실패한 항목의 오류 문구를 읽어 보고, 그 항목만 다시 부탁하면 됩니다.

   성공했을 때 모습

   정리표에 4가지가 모두 "설치됨"(또는 성공)으로 적히고, 각각의 설치 위치와 부르는 이름이 보입니다. 마지막에 "새 세션을 시작하면 목록에 나타납니다" 같은 안내가 나옵니다. 문구는 Claude가 그때그때 다르게 쓰므로 표현이 달라도 걱정하지 마세요.

   방금 설치에서 [실패한 항목 이름] 이 실패했어. 오류 문구를 쉬운 말로 설명해주고, 같은 출처로 다시 설치해줘. 성공한 항목은 건드리지 마.

허락 창에서 무엇을 확인하나요

Claude는 내 PC에서 명령을 실행하기 전에 허락을 구합니다. 이 창은 번거로운 절차가 아니라 AI를 안전하게 쓰는 가장 중요한 습관입니다. "Claude가 아니라 내가 마지막 확인을 한다"는 느낌으로 읽어 보세요.

화면은 이렇게 생겼습니다

터미널의 Claude Code에서는 제목에 "Bash command" 같은 명령 종류가 보이고, 그 아래에 실행할 명령이 나옵니다. 이어서 Do you want to proceed? 라는 질문과 함께 선택지가 나옵니다. 데스크톱 앱에서는 같은 내용이 카드 모양으로 나오고 허용, 거절 버튼이 있습니다. 버튼 이름과 위치는 버전에 따라 조금 다를 수 있습니다.

어떤 화면에는 "Yes, and switch to auto mode" 같은 선택지가 더 있을 수 있습니다. 이 선택지는 이후 확인 창이 거의 나오지 않는 모드로 바꾸는 것이므로 처음에는 고르지 않는 것이 좋습니다. 선택지 위에서 Tab 키를 누르면 Claude에게 한마디 덧붙이는 칸이 열립니다. "No, 이 출처는 내가 말한 것과 다릅니다"처럼 이유를 적을 수 있습니다.

눈으로 확인할 4가지

1. 명령의 첫 단어를 봅니다. 이번에는 npx skills add, claude plugin marketplace add, claude plugin install, node -v 같은 "설치, 확인" 성격의 명령이 나오는 것이 정상입니다.
2. 출처 이름의 철자를 프롬프트와 대조합니다. Leonxlnx/taste-skill, pbakaus/impeccable, nextlevelbuilder/ui-ux-pro-max-skill, heygen-com/hyperframes 가 정확히 맞는지 보세요. 글자 하나만 달라도 전혀 다른 사람이 만든 저장소입니다.
3. 이번 설치에 필요 없는 동작이 끼어 있지 않은지 봅니다. 인터넷의 프로그램을 내려받자마자 실행하는 명령(curl ... | sh, irm ... | iex 같은 모양), 파일 삭제(rm, del), 비밀번호나 토큰을 요구하는 동작이 대표적입니다.
4. 설치 위치가 내 사용자 폴더 안쪽(.claude, .agents 같은 폴더)인지 봅니다.

중간에 npx가 "필요한 패키지를 내려받아도 되는지" 묻는 문구가 나올 수 있습니다. 설치 도구 자체를 임시로 받아 오는 확인이며, 보통 Claude가 알아서 처리합니다. 화면 문구는 업데이트로 조금 다를 수 있습니다.

직접 하고 싶다면: Claude가 실행하는 명령 (참고용)

위 프롬프트를 보내면 Claude는 대략 아래 명령들을 차례로 실행합니다. 외울 필요는 없습니다. 허락 창에서 같은 모양의 명령이 나오는지 비교해 보는 용도입니다. 직접 하고 싶다면 터미널(PowerShell)에 한 줄씩 입력해도 됩니다. 옵션은 도구 버전에 따라 달라질 수 있으니, 막히면 Claude에게 맡기는 편이 안전합니다.

# ui-ux-pro-max: 마켓플레이스를 먼저 등록하고, 그 안의 플러그인을 설치
claude plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
claude plugin install ui-ux-pro-max@ui-ux-pro-max-skill

# hyperframes: 마켓플레이스를 먼저 등록하고, 그 안의 플러그인을 설치
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

# design-taste-frontend: taste-skill 저장소에서 이 스킬만 선택
npx skills add Leonxlnx/taste-skill --skill design-taste-frontend -g -a claude-code -a codex

# impeccable
npx skills add pbakaus/impeccable -g -a claude-code -a codex

• npx skills add: 스킬 설치 도구에게 "이 저장소의 스킬을 받아서 설치하라"고 시키는 명령입니다.
• -g: 내 PC 사용자 전체(전역)에 설치합니다. 빼면 지금 폴더 안에만 설치됩니다.
• -a claude-code -a codex: 설치 대상 프로그램입니다. 둘 다 적으면 한 번에 양쪽에 설치됩니다.
• --skill 이름: 저장소 안에 스킬이 여러 개일 때 이 스킬만 고릅니다.
• -y: 확인 질문을 건너뜁니다. Claude가 대신 실행할 때 질문 때문에 멈추지 않도록 붙이기도 합니다.

impeccable은 제작자가 만든 전용 설치 도구(npx impeccable install)도 있습니다. 위 명령이 막히면 이 도구를 쓰고, 설치 범위를 묻는 질문에서 전역(global)을 고르세요. 전용 도구는 자동 점검용 부가 설정(hook)까지 함께 설치할 수 있으니 허락 창에서 무엇을 설치하는지 읽어 보세요.

# hyperframes 스킬을 Codex에 설치 (직접 할 때는 선택창이 나옵니다. "Core Skills" 그룹만 고르면 됩니다)
npx skills add heygen-com/hyperframes -g -a codex

# AI가 대신 설치할 때는 선택창 없이 핵심 묶음만 설치하는 이 명령이 맞습니다
npx hyperframes skills update

# ui-ux-pro-max를 내 PC 전체(전역)의 Codex 스킬 폴더(~/.agents/skills)에 설치
# (저장소 설명서에 적힌 방식이며 버전에 따라 다를 수 있습니다)
npx ui-ux-pro-max-cli init --ai universal --global

Claude Code 대화창 안에서는 /plugin marketplace add heygen-com/hyperframes 다음에 /plugin install hyperframes@hyperframes 순서로 입력하는 방법도 있습니다. 대화창에서는 설치 명령을 넣으면 바로 설치되지 않고 플러그인 상세 화면이 열려서, 내용을 읽고 설치 범위(나만, 이 프로젝트 등)를 고르게 됩니다. 이 교육에서는 모든 프로젝트에서 쓸 수 있도록 "나만, 모든 프로젝트(user 범위)"를 고르세요. 터미널에서 claude plugin install 로 입력하면 따로 정하지 않아도 이 범위로 설치됩니다.

설치 끝, 반드시 새 세션을 시작하세요

설치를 마쳤다고 지금 열려 있는 대화에서 바로 보이지는 않을 수 있습니다. 이미 열린 대화는 시작할 때의 "쓸 수 있는 스킬 목록"을 그대로 쓰는 경우가 있기 때문입니다. 가장 확실한 방법은 새 세션을 여는 것입니다.

제대로 설치됐는지 확인하기

방법 1: 입력창에 / 를 쳐 봅니다

새 세션의 입력창에 / 한 글자만 입력하면 쓸 수 있는 명령과 스킬의 목록이 나타납니다. 목록이 길면 /design 처럼 이어서 입력해 좁혀 보세요. 데스크톱 앱에서는 입력창 옆 + 버튼을 누르고 Slash commands를 골라도 같은 목록을 볼 수 있습니다. 아래 4개 이름이 보이면 성공입니다.

• /design-taste-frontend
• /impeccable
• /ui-ux-pro-max:ui-ux-pro-max
• /hyperframes:hyperframes (그 아래로 /hyperframes:motion-graphics 같은 영상 종류별 스킬도 줄줄이 보입니다)

방법 2: Claude에게 물어봅니다

목록에서 찾기 어려우면 그냥 물어보세요. Claude가 현재 쓸 수 있는 스킬을 알려 줍니다. 입력창에 /skills 를 치면 스킬 목록과 설명을 더 자세히 보여 주는 화면이 열립니다.

설치된 스킬 목록 보여줘. design-taste-frontend, impeccable, ui-ux-pro-max, hyperframes 이 4가지가 있는지 하나씩 확인해서 있음/없음으로 알려줘.

스킬 부르는 법: 한 줄씩 해 보기

스킬은 입력창 맨 앞에 이름을 쓰고, 한 칸 띄운 뒤, 부탁할 내용을 적어 부릅니다. / 를 치고 목록에서 고르면 이름이 자동으로 채워집니다. 이름을 부르지 않아도 Claude가 부탁 내용을 보고 알아서 스킬을 쓰기도 하지만, 처음에는 이름을 직접 불러야 어떤 스킬이 일했는지 눈으로 확인할 수 있습니다.

아직 만든 사이트가 없어도 괜찮습니다. 아래 4개는 모두 "상담"이라서 파일을 바꾸지 않습니다. [내 주제] 자리에는 좋아하는 소재를 넣으세요. 예를 들어 좋아하는 과일 이름이면 됩니다.

1. 디자인 방향 잡기

/design-taste-frontend
[내 주제] 소개 사이트를 만들려고 해. 코드는 아직 만들지 말고, 어울리는 디자인 방향을 서로 많이 다른 3가지로 제안해줘.
각 방향마다 분위기, 색, 글자 느낌을 한 줄씩 적고, 흔한 AI 디자인처럼 보이지 않으려면 무엇을 피해야 하는지도 알려줘.

3가지 방향이 비교되어 나오면 성공입니다. 마음에 드는 번호를 골라 이어서 말하면 됩니다.

2. 만든 화면 비평받기

/impeccable critique
지금 만들어 둔 첫 화면(index.html)을 디자인 관점에서 비평해줘. 잘된 점 2개, 고칠 점 3개를 중요한 순서로 알려주고, 내가 고치라고 할 때까지 파일은 바꾸지 마.

impeccable은 이름 뒤에 critique(비평), audit(점검), polish(다듬기) 같은 명령어를 붙여 부릅니다. 처음 부르면 프로젝트 정보를 먼저 묻는 준비 단계(init)를 Claude가 안내할 수 있습니다. 아직 만든 화면이 없다면 7장에서 첫 화면을 만든 뒤에 해 보세요.

3. 색과 글꼴 고르기

/ui-ux-pro-max:ui-ux-pro-max
[내 주제] 소개 사이트에 어울리는 색 팔레트 3개와 글꼴 조합 2개를 추천해줘. 각각 어떤 분위기인지 한 줄로 설명하고, 글자가 배경 위에서 잘 읽히는지(대비)도 확인해줘.

플러그인 스킬은 플러그인명:스킬명 형태로 부른다는 점을 눈여겨보세요. 입력창에서 목록으로 고르면 콜론까지 자동으로 들어갑니다.

4. 영상 만들 준비 상담

/hyperframes:hyperframes
[내 주제]를 소개하는 10초짜리 영상을 만들려고 해. 아직 만들지 말고, 어떤 종류의 영상 스킬로 진행하면 좋을지 알려주고 먼저 필요한 정보를 질문해줘.

hyperframes:hyperframes 는 안내 데스크처럼 "어떤 영상이냐에 따라 어느 스킬로 갈지"를 정해 줍니다. 실제로 영상을 만드는 것은 8장에서 합니다.

Codex를 쓰는 분을 위한 안내

Codex를 쓰지 않으신다면 이 부분은 건너뛰어도 됩니다. Codex도 같은 형식의 스킬 폴더(SKILL.md 파일이 들어 있는 폴더)를 읽을 수 있어서, 위에서 설치한 스킬을 그대로 쓸 수 있습니다. 차이는 "어디서 읽고, 어떻게 부르느냐"입니다.

~ 는 내 사용자 폴더(Windows에서는 C:\Users\[내 계정])를 뜻합니다. 플러그인 방식 이름(ui-ux-pro-max:ui-ux-pro-max 같은 콜론 표기)은 Claude Code의 표기법입니다. Codex에서는 $ 목록에 보이는 이름을 그대로 고르세요. 이름이 조금 다르게 보여도 정상입니다.

$design-taste-frontend
[내 주제] 소개 사이트의 디자인 방향을 서로 다른 3가지로 제안해줘. 코드는 아직 만들지 마.

$ 목록에서 이름이 선택되지 않으면, 그냥 "design-taste-frontend 스킬을 사용해서 ..." 하고 스킬 이름을 말로 언급해도 됩니다.

자주 막히는 곳

내 PC에 Node.js와 npx가 설치돼 있는지 버전까지 확인해줘. 없거나 22보다 낮으면 내 운영체제(Windows 또는 Mac)에 맞는 설치 방법을 알려주고, 내가 허락하면 설치까지 진행해줘. 설치 후에 새 터미널에서도 node 명령이 잘 잡히는지(PATH) 확인해줘.

이 장 마무리 체크리스트

• 스킬이 "설명서 한 장", 플러그인이 "꾸러미"라는 차이를 한 문장으로 말할 수 있다
• 프롬프트 하나로 4가지 설치를 부탁했고, 허락 창에서 명령과 출처 이름을 읽고 허용했다
• 새 세션을 열었다
• 입력창에 / 를 쳐서 4가지 이름이 보이는 것을 확인했다
• 스킬 이름을 맨 앞에 붙여 한 번 이상 불러 봤다