스크롤 애니메이션 사이트를 만들고 싶었던 이유
Apple 제품 페이지처럼 스크롤하면 영상이 '재생'되는 사이트를 본 적이 있을 겁니다. 요리가 하나씩 완성되고, 제품이 돌아가고, 장면이 펼쳐지죠. 저는 개발자가 아니라 프로덕트 매니저지만, 레스토랑 사이트에 이 효과를 넣고 싶었습니다. Claude Code와 EMBER TABLE Skill로 실제로 작업하는 과정을 소개합니다. Codex와 Cursor에서도 똑같이 됩니다.
스크롤 연동 프레임 애니메이션의 원리
영상이 아닙니다. 페이지에는 연속된 정지 이미지(EMBER TABLE 데모 소재는 192프레임)가 들어 있고, 스크롤 위치에 맞는 한 장을 canvas에 그립니다. 아래로 스크롤하면 앞으로 재생되고, 위로 올리면 되감깁니다. 부드럽게 만들려면 프레임 미리 불러오기, 스크롤 위치와 프레임 번호 매핑, 레티나 화면 선명도, 휴대폰용 가벼운 버전이 필요합니다. 한 줄 프롬프트로 설명하기 어려운 부분인데, Skill이 이미 AI에게 자세히 적어 두었습니다.
준비할 것
- 설치하고 로그인한 Claude Code(또는 Codex／Cursor)
- 빈 프로젝트 폴더
- Skill 페이지의 EMBER TABLE Skill(모든 요금제에 포함, 요금 참고)
- 가게 이름과 짧은 이야기. 데모 소재(애니메이션 192프레임＋사진 15장)로 시작하고 나중에 내 소재로 바꿀 수 있습니다
Skill이 처음이라면 먼저 Skill이란 무엇이고 어떻게 쓰는지를 읽어 보세요.
1단계: Claude Code에서 프로젝트 폴더 열기
ember-site 같은 폴더를 만들고, 그곳에서 터미널을 열어 claude를 실행합니다. 데모 프레임과 사진을 폴더(또는 assets 하위 폴더)에 넣어 AI가 볼 수 있게 합니다.
2단계: Skill 붙여넣기
EMBER TABLE Skill 전체를 복사해 첫 메시지로 붙여넣습니다. skills 폴더에 SKILL.md로 저장해 두고 나중에 이름으로 불러도 됩니다. Skill은 Claude에게 무엇을 만들지(오프닝 애니메이션, 온라인 메뉴, 주문, 예약 양식), 무엇을 물어볼지, 결과를 어떻게 확인할지 알려 줍니다.
3단계: 질문에 답하기
Claude가 가게 이름, 이야기, 프레임과 사진 위치 등을 물어봅니다. 평소 말투로 답하면 됩니다. HTML, CSS, JavaScript를 몰라도 되고, 결과물은 순수 HTML, CSS, JavaScript로 된 완성된 사이트입니다.
4단계: 결과를 열고 스크롤하기
Claude가 작업을 마치면 브라우저에서 index.html을 열고 첫 화면을 천천히 스크롤합니다. 세 가지를 확인하세요. 애니메이션이 위아래 스크롤을 모두 따라오는지, 깜빡이지 않는지, 위에 얹힌 글자가 잘 읽히는지입니다.
5단계: 평소 말로 계속 다듬기
대부분의 시간이 여기에 들어가고, 그게 정상입니다. 잘 통하는 요청 예시:
- "애니메이션이 너무 빨리 끝나요. 첫 화면 스크롤 길이를 늘려 주세요."
- "휴대폰에서 무거워요. 너비 768px 미만에서는 더 적고 작은 프레임을 써 주세요."
- "방문자가 동작 줄이기를 켰다면 정지 이미지 한 장만 보여 주세요."
- "제목을 …로 바꾸고 글꼴은 그대로 두세요."
코드를 어떻게 짤지가 아니라 보이는 상태를 설명하세요. 문제가 생기면 브라우저의 오류를 붙여넣거나 어디가 이상한지 그대로 말하면 됩니다.
6단계: 휴대폰과 데스크톱에서 확인하기
Skill의 레이아웃은 360px 휴대폰부터 1440px 데스크톱까지 확인되어 있습니다. 그래도 공개 전에 브라우저의 기기 미리보기로 휴대폰 너비와 넓은 화면을 직접 확인해 보세요.
7단계: 내 프레임으로 바꾸기
내 애니메이션을 쓰려면 짧은 영상을 촬영하거나 AI로 만든 뒤 번호가 붙은 이미지로 내보냅니다(ezgif의 '동영상을 이미지로' 같은 무료 도구를 쓰거나 Claude에게 FFmpeg 실행을 부탁하세요). 프레임 폴더에 넣고 몇 장인지 Claude에게 알려 줍니다. 프레임이 많을수록 부드럽지만 페이지가 무거워지니 적당히 맞추세요.
먼저 무료로 과정을 써 보고 싶다면
같은 '붙여넣고 다듬기' 과정은 무료 코너의 Skill, 예를 들어 WORLDVIEW SAAS에서도 쓸 수 있습니다. 프레임 애니메이션은 없지만 EMBER TABLE을 열기 전에 비용 없이 과정을 익힐 수 있습니다.
자주 묻는 질문
코딩을 할 줄 알아야 하나요?
아니요. Skill을 붙여넣고, 질문에 답하고, 바꿀 점을 평소 말로 설명하면 됩니다. 터미널과 브라우저를 열 줄 알면 충분합니다.
Claude Code 말고 Cursor나 Codex에서도 되나요?
네. Sketchry Skill은 Claude Code, Codex, Cursor용으로 쓰였습니다.
스크롤 애니메이션은 영상인가요?
아니요. 스크롤 위치에 따라 정지 이미지를 canvas에 그리기 때문에 부드럽게 거꾸로 재생됩니다.
휴대폰에서 느리지 않나요?
프레임이 크면 느릴 수 있습니다. 작은 화면에서는 더 적거나 작은 프레임을, 동작 줄이기 설정에서는 정지 이미지를 쓰도록 AI에게 요청하세요.
만든 사이트를 클라이언트에게 납품해도 되나요?
Sketchry Skill로 만든 결과물은 본인이나 클라이언트의 상업 프로젝트에 쓸 수 있으며 출처 표기는 필요 없습니다.
비용은 얼마인가요?
현재 요금제는 요금에서 확인하세요. 무료 Skill도 여러 개 있으니 먼저 무료 코너에서 써 볼 수 있습니다.