Framer AI 애니메이션 & CMS로 프로 웹사이트 만들기
Framer는 코드 없이 인터랙션·애니메이션이 포함된 프로 수준 웹사이트를 만드는 도구예요. CMS로 콘텐츠를 관리하고 AI로 섹션을 자동 생성할 수 있습니다.
따라 하기
1단계
Framer 로그인 및 새 프로젝트 시작
- 1framer.com에 접속해 우측 상단 Sign in(로그인) 버튼을 클릭합니다.
- 2Google 계정 또는 이메일로 로그인합니다.
- 3로그인 후 대시보드에서 + New Project를 클릭하면 빈 캔버스가 열립니다.
- 4화면 상단 중앙에 AI 버튼이 표시되며, 이를 클릭하면 AI 생성 기능에 접근할 수 있습니다.
framer.com
팁 Framer 무료 플랜은 사이트 발행 시 Framer 브랜딩이 포함됩니다. 커스텀 도메인 연결과 브랜딩 제거는 유료 플랜 이상에서 사용 가능합니다.
처음이라 잘 모르겠다면
Framer 프로젝트에서 AI 버튼을 클릭하고 모던 SaaS 랜딩 페이지처럼 설명하면 웹사이트 초안이 자동 생성됩니다.
막히면 볼 것
자주 하는 실수 3가지
- 모든 요소에 애니메이션 적용 → 산만하고 느린 페이지 — 핵심 요소(히어로·섹션 제목·특징 카드)만 선택적으로 적용
- CMS 없이 텍스트를 디자인에 직접 입력 → 내용 수정마다 디자인 편집 필요 — 반복되는 콘텐츠는 CMS로 관리
- 모바일 뷰 확인 없이 배포 → 데스크탑 레이아웃이 모바일에서 깨짐 — 반드시 모바일 브레이크포인트 확인 후 배포
막혔을 때 볼 짧은 글 1개
AI 없이 할 때와 뭐가 다른가요?
정적인 웹사이트 → Framer 애니메이션 + AI → 인터랙티브 프로 웹사이트
웹사이트 만들었는데 스크롤 애니메이션·인터랙션 같은 것들은 어떻게 구현하는지 모르겠어...
나
CSS 애니메이션과 JavaScript 이벤트 구현은 학습 곡선이 있습니다.