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

Middle class 약 25분활용 사례

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

실수 방지 체크리스트

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

STEP 1 / 4…

STEP 1. Framer AI로 웹사이트 초안 생성

🔒 framer.com

실제 화면

Framer의 AI 생성 기능으로 웹사이트 초안을 빠르게 만듭니다.

프롬프트

# Framer AI 웹사이트 생성
framer.com → '+ New Project'
→ 'Generate with AI' 탭

# 생성 프롬프트 예시
'A landing page for a SaaS productivity app.
Hero with headline and CTA, features grid,
testimonials, pricing table, footer.
Minimalist design, purple accent color.'

# 또는 템플릿에서 시작
'Templates' → 원하는 카테고리 선택
→ 커스터마이즈

# Framer AI Section 생성
에디터 내 빈 곳 클릭 → 'Add with AI'
→ '기능 소개 섹션 3개 카드 형식'
→ 해당 섹션만 AI로 추가

# 플랜
무료: 1 사이트, Framer 브랜딩 표시
Mini ($5/월): 커스텀 도메인, 브랜딩 제거
Basic ($15/월): CMS, 방문자 분석
Pro ($30/월): CMS 10,000개 항목, 팀 기능

💡

AI로 생성된 초안은 레이아웃 아이디어를 빠르게 확인하는 데 좋습니다. 내용보다 구조를 먼저 확인하고 세부 디자인을 손보는 방식이 효율적입니다.

이 단계를 완료했나요?