←
Framer
Claude

이게 가능해져요
정적인 웹사이트 → Framer 애니메이션 + AI → 인터랙티브 프로 웹사이트
웹사이트 만들었는데 스크롤 애니메이션·인터랙션 같은 것들은 어떻게 구현하는지 모르겠어...
나
CSS 애니메이션과 JavaScript 이벤트 구현은 학습 곡선이 있습니다.MCP 미연결
Framer AI 애니메이션 & CMS로 프로 웹사이트 만들기
Middle class 약 25분활용 사례
Framer는 코드 없이 인터랙션·애니메이션이 포함된 프로 수준 웹사이트를 만드는 도구예요. CMS로 콘텐츠를 관리하고 AI로 섹션을 자동 생성할 수 있습니다.
Framer 열기
framer.com
실수 방지 체크리스트
- 1모든 요소에 애니메이션 적용 → 산만하고 느린 페이지 — 핵심 요소(히어로·섹션 제목·특징 카드)만 선택적으로 적용
- 2CMS 없이 텍스트를 디자인에 직접 입력 → 내용 수정마다 디자인 편집 필요 — 반복되는 콘텐츠는 CMS로 관리
- 3모바일 뷰 확인 없이 배포 → 데스크탑 레이아웃이 모바일에서 깨짐 — 반드시 모바일 브레이크포인트 확인 후 배포
STEP 1 / 5…
1
STEP 1. Framer 로그인 및 새 프로젝트 시작
framer.com
framer.com에 접속해 우측 상단 'Sign In' 버튼을 클릭합니다. Google 계정 또는 이메일로 로그인합니다. 로그인 후 대시보드에서 '+ New Project'를 클릭하면 빈 캔버스가 열립니다. 화면 상단 중앙에 'AI' 버튼이 표시되며, 이를 클릭하면 AI 생성 기능에 접근할 수 있습니다.
Framer 무료 플랜은 사이트 발행 시 Framer 브랜딩이 포함됩니다. 커스텀 도메인 연결과 브랜딩 제거는 Mini 플랜($5/월) 이상에서 사용 가능합니다.
이 단계를 완료했나요?