Framer

이게 가능해져요

정적인 웹사이트 → Framer 애니메이션 + AI → 인터랙티브 프로 웹사이트

Claude
웹사이트 만들었는데 스크롤 애니메이션·인터랙션 같은 것들은 어떻게 구현하는지 모르겠어...
CSS 애니메이션과 JavaScript 이벤트 구현은 학습 곡선이 있습니다.MCP 미연결

Framer AI 애니메이션 & CMS로 프로 웹사이트 만들기

Middle class25활용 사례

Framer는 코드 없이 인터랙션·애니메이션이 포함된 프로 수준 웹사이트를 만드는 도구예요. CMS로 콘텐츠를 관리하고 AI로 섹션을 자동 생성할 수 있습니다.

Framer 열기

framer.com

실수 방지 체크리스트
  • 1모든 요소에 애니메이션 적용 → 산만하고 느린 페이지 — 핵심 요소(히어로·섹션 제목·특징 카드)만 선택적으로 적용
  • 2CMS 없이 텍스트를 디자인에 직접 입력 → 내용 수정마다 디자인 편집 필요 — 반복되는 콘텐츠는 CMS로 관리
  • 3모바일 뷰 확인 없이 배포 → 데스크탑 레이아웃이 모바일에서 깨짐 — 반드시 모바일 브레이크포인트 확인 후 배포
STEP 1 / 5
1

STEP 1. Framer 로그인 및 새 프로젝트 시작

framer.com
Framer
AI로 웹사이트를 만드세요
코드 없이 전문적인 웹사이트를 빠르게 완성
AI로 생성
여기를 클릭!
템플릿 시작
포트폴리오
비즈니스
SaaS 랜딩
에이전시

framer.com에 접속해 우측 상단 'Sign In' 버튼을 클릭합니다. Google 계정 또는 이메일로 로그인합니다. 로그인 후 대시보드에서 '+ New Project'를 클릭하면 빈 캔버스가 열립니다. 화면 상단 중앙에 'AI' 버튼이 표시되며, 이를 클릭하면 AI 생성 기능에 접근할 수 있습니다.

Framer 무료 플랜은 사이트 발행 시 Framer 브랜딩이 포함됩니다. 커스텀 도메인 연결과 브랜딩 제거는 Mini 플랜($5/월) 이상에서 사용 가능합니다.

이 단계를 완료했나요?