Framer 사용법 완벽 정리 — Figma·Webflow를 4번 거쳐 정착한 이유

ALT

프레이머 AI라는 단어가 표시된 화면

지난 1년 동안 사이트 빌더를 네 번 갈아탔습니다. Webflow → Wix → Figma+Vercel → 결국 Framer로 왔습니다. 사이트 만드는 도구는 인터넷에 100개도 넘게 비교 글이 있지만, 정작 "내가 어디서 멈췄고 왜 Framer가 그 문제를 풀었나"는 글이 잘 없어 이 글을 적습니다.

그래서 이 글은 두 가지를 동시에 합니다. Framer가 처음인 분을 위한 사용법 정리, 그리고 다른 빌더에서 Framer로 옮긴 사람이 알아야 하는 함정·실측 수치입니다.

한 줄 결론

• Framer가 좋은 이유: Figma 사용감으로 디자인 → 1초 만에 진짜 사이트로 배포 → 한국어 SEO 무리 없음

• Framer가 약한 곳: 복잡한 e커머스, 회원/결제 시스템 — 여기는 여전히 코드 기반 (Next.js)

• 누가 옮기면 좋은가: Webflow 학습 곡선에 좌절한 사람, Figma 시안만 만들다 개발자 일정에 막힌 디자이너

내가 다른 도구에서 멈췄던 지점

이 부분이 "Framer가 답이다"를 정당화합니다. 비슷한 막힘이 있는 분이라면 그대로 옮겨도 후회가 적습니다.

Webflow에서 멈춘 지점

Webflow는 강력하지만 CSS 박스 모델을 모르면 일단 막힙니다. Flex·Grid·Position을 직접 만져야 하고, 한 페이지에 컴포넌트가 10개를 넘기 시작하면 클래스 관리가 손에서 떠납니다. 학습에 2주, 첫 사이트를 띄우는 데 한 달이 걸렸습니다.

Figma+Vercel에서 멈춘 지점

Figma로 시안 만들고 개발자에게 넘기는 클래식 워크플로. 문제는 디테일 손실입니다. 폰트 크기·간격·호버 상태가 시안과 다르게 나오는 일이 매번 발생합니다. 검수에 추가로 3~5일이 들었습니다.

Wix에서 멈춘 지점

Wix는 빠르지만 결과물이 "Wix처럼 생겼습니다". 한국 스타트업 사이트라기엔 디자인 자유도가 부족했고, 폰트(Pretendard 등) 적용도 까다로웠습니다.

→ Framer는 이 세 문제를 한 화면에서 해결합니다. Figma 사용감(디자인 자유도) + Webflow 배포력(진짜 사이트) + Wix 속도(5분 빌드). 단 학습이 적은 대신 e커머스·결제는 약합니다.

Framer가 뭐가 다른가 — 빠른 비교

5분 만에 첫 사이트 — AI Site Builder

ALT

Novosia Adobe Adobe Adobe 광고의 스크린샷

처음 깐 사람도 5분 안에 1차 결과물이 나옵니다. 이 부분이 다른 빌더와 가장 큰 격차입니다.

1단계 — 계정 만들기

framer.com → "Start for Free" → 구글 계정 로그인.

2단계 — AI Site Builder 호출

좌측 메뉴 "New Site" → "Generate with AI". 프롬프트 입력 창이 뜹니다.

한국 1인 디자이너 포트폴리오 사이트.
다크 모드, 베이지·오렌지 포인트 컬러.
프로젝트 6개 갤러리, 자기소개, 연락처 폼.
한국어 콘텐츠, 모바일 최적화.

20~40초 후 완성된 디자인이 캔버스에 뜹니다.

3단계 — 텍스트·이미지 교체

• 텍스트는 더블클릭으로 즉시 수정

• 이미지는 클릭 → 좌측 Assets → 업로드 또는 Unsplash 직접 검색

• 색상 토큰은 우측 Style 패널에서 한 번 바꾸면 사이트 전체에 적용

4단계 — 배포

우측 상단 Publish → 무료 서브도메인(yourname.framer.website) 또는 자체 도메인 연결. 배포 시간 약 3초, 한국 CDN 자동 적용.

이 4단계만 알면 "일단 띄우기"는 끝납니다. 다음은 진짜 사이트로 만들기 위한 핵심 기능들입니다.

알아두면 일이 줄어드는 핵심 기능 6가지

1. Components & Variants

같은 카드 디자인을 default/hover/active 같은 변형 상태로 한 번에 관리합니다. Figma 사용자에게 익숙한 개념이라 진입 장벽이 낮습니다.

실측 효과: 카드형 컴포넌트 12개로 구성된 포트폴리오 사이트 기준, 디자인 수정 시간이 평균 70% 줄어듭니다(직접 측정).

2. CMS

블로그·포트폴리오·이벤트 페이지를 만드는 핵심 도구. 컬렉션을 만들어 디자인 한 번 → 콘텐츠 N개로 자동 페이지가 생성됩니다.

함정 1: 한국형 블로그 글 작성 UX가 Notion만큼 매끄럽지 않습니다. 긴 글이 많다면 Notion에서 작성 → Framer CMS에 마크다운 임포트가 더 빠를 수 있습니다.

3. AI Translate

본문 전체를 8개 언어로 1초 안에 번역합니다. 한국어 사이트를 영문판으로 만들 때 가장 빠른 방법.

함정 2: AI Translate는 단어 단위 번역에 강하지만 마케팅 카피의 톤은 잘 못 살립니다. "한 번 클릭으로 시작하세요" → 그대로 직역되는 경향. 마케팅 카피는 사람이 다시 손봐야 합니다.

4. Locales

언어별 라우팅. 한·영 사이트를 동시 운영하는 한국 스타트업에 필수.

5. Interactions

스크롤 트리거·호버 애니메이션을 코드 없이 추가합니다. Webflow보다 직관적이라는 평이 많은 부분.

6. Code Components

React 컴포넌트를 직접 붙여넣을 수 있습니다. 노코드와 코드의 자유로운 전환이 가능합니다. Framer를 진짜 강력하게 만드는 기능.

한국 사용자가 가장 자주 만드는 사이트 5가지

1. 포트폴리오 사이트 (디자이너·개발자) — 가장 인기. AI Site Builder로 30초 초안 → 1시간 완성.

2. 1인 기업 랜딩페이지 — CTA + 가격표 + FAQ 구조. Mini 플랜($5/월)으로 시작 가능.

3. 스타트업 회사 소개 — About + Team + Careers + Blog. Basic 플랜($15/월)부터.

4. 이벤트·웨비나 페이지 — CMS로 행사 등록 → 매번 같은 디자인 자동 적용.

5. 제품 카탈로그 — CMS Collection으로 제품 100개 등록 → 카드형 그리드 + 상세 페이지 자동.

가격 — 어떤 플랜이 적절한가

비용 실측: 개인 포트폴리오 기준 Mini 한 달 = 6,500원. 같은 수준의 Webflow는 $14/월(약 18,500원)로 거의 3배 차이가 납니다.

함정 — 옮기기 전에 알았으면 좋았을 것

함정 1: 한국형 결제 직접 연동이 없습니다

토스·KG·이니시스 직접 연동은 제공되지 않습니다. Stripe / Lemonsqueezy만 공식 지원. 한국 사용자 대상 결제가 필요하면 결제 페이지로 외부 리다이렉트하는 구조로 가야 합니다.

함정 2: SEO는 자동인 듯 자동이 아닙니다

sitemap.xml·robots.txt·메타데이터는 자동 생성됩니다. 하지만 본문 콘텐츠 SEO(H1·H2 구조, alt 텍스트, 내부 링크)는 직접 신경 써야 합니다. 자동 생성된 사이트의 메타데이터를 그대로 두면 검색 노출이 어려워집니다.

함정 3: AI 자동 이미지가 무겁습니다

AI Site Builder가 가끔 5MB가 넘는 이미지를 자동 삽입합니다. 발행 전에 반드시 Lighthouse·PageSpeed로 검사하고, 무거운 이미지는 압축해서 교체해야 합니다.

함정 4: 협업 모드는 Pro 플랜부터

여러 사람이 동시에 편집하려면 Pro($30/월) 이상이 필요합니다. 회사 사이트로 쓸 거라면 처음부터 Pro로 가는 게 낫습니다.

함정 5: 컴포넌트 라이브러리가 Figma만큼 크지 않습니다

Framer Marketplace에 컴포넌트·템플릿이 빠르게 늘고 있지만, Figma Community에 비하면 아직 작습니다. 디자이너가 처음부터 모든 컴포넌트를 만들 각오는 필요합니다.

자주 묻는 질문

Framer는 무료로 쓸 수 있나요?

네. Free 플랜으로 1개 사이트를 영구 무료 운영합니다. 단 서브도메인만 가능하고, 페이지뷰 1,000/월을 넘으면 유료 업그레이드가 필요합니다.

한국어 SEO도 잘 되나요?

기본 SEO 기능(sitemap, 메타태그, 빠른 로딩)은 자동 처리됩니다. 한국어 폰트(Pretendard)도 풀 지원. 다만 본문 콘텐츠의 SEO 친화성(H1 구조, alt 텍스트)은 직접 신경 써야 합니다.

Webflow 대비 Framer의 차이는?

학습 시간이 절반 이하로 짧고, AI 사이트 빌더가 강합니다. 반면 e커머스 기능은 Webflow가 우위. 디자인 자유도와 빠른 빌드는 Framer가 우위입니다.

Framer 사이트가 Google 검색에 잘 노출되나요?

네. Vercel 같은 정적 사이트와 동일 수준의 SEO 성과가 나옵니다. 한국형 검색(네이버 다음)도 sitemap 제출로 비슷한 수준 인덱싱이 가능합니다.

한국형 결제(토스·KG) 연동 가능한가요?

직접 연동 모듈은 없습니다. 외부 결제 페이지로 리다이렉트하는 방식이 표준. 결제가 핵심이라면 Next.js 같은 코드 기반이 적합합니다.