TL;DR
- 프레이머 사용법은 디자인 도구와 웹사이트 호스팅이 한 몸이라는 데서 출발한다. 캔버스에서 만든 화면이 그대로 주소를 갖는다.
- 무료로 시작할 수 있고, 커스텀 도메인과 CMS는 월 $10 Basic부터다. 스테이징과 브랜치 미리보기는 월 $30 Pro다.
- AI 에이전트가 캔버스 위에서 직접 작업한다. Claude Code나 Codex, Cursor를 연결해 밖에서 프로젝트를 고치는 경로도 열려 있다.
프레이머 사용법을 알아보는 사람은 대개 웹사이트가 필요한데 개발자를 붙일 상황이 아니다.
랜딩 페이지 하나, 포트폴리오, 제품 소개 사이트.
디자인 도구로 화면을 그려도 그걸 실제 주소로 올리는 건 별개의 일이었다.
Framer는 그 사이를 없앤다.
캔버스에서 화면을 만들고 게시 버튼을 누르면 사이트가 된다.
디자인 파일을 개발자에게 넘기는 단계가 빠지는 구조다.
최근에는 여기에 AI 에이전트가 붙어서, 캔버스 위에서 직접 생성하고 다듬는 방식으로 바뀌었다.
아래는 무료로 시작해 첫 사이트를 올리고, 요금이 붙는 지점을 파악하는 데까지를 공식 요금표와 문서 기준으로 정리한 것이다.
디자인 도구와 호스팅이 붙어 있다는 뜻
일반적인 흐름은 이렇다.
디자인 도구에서 화면을 그리고, 개발자가 그걸 코드로 옮기고, 어딘가에 배포하고, 도메인을 연결한다.
단계마다 사람과 도구가 바뀐다.
Framer는 이 흐름을 하나로 접었다.
캔버스에서 요소를 배치하면 그게 곧 실제 페이지의 구조가 되고, 게시하면 호스팅까지 처리된다.
반응형 동작과 인터랙션도 캔버스에서 설정한다.
대가도 있다.
도구가 허용하는 범위 안에서 만들게 된다.
완전히 자유로운 구현이 필요하면 코드 컴포넌트로 React를 직접 넣는 경로가 열려 있지만, 그 지점부터는 개발 지식이 필요해진다.
프레이머 사용법, 첫 사이트를 올리는 순서
- 계정을 만들고 새 프로젝트를 엽니다. 무료로 시작할 수 있습니다.
- 템플릿에서 시작할지 빈 캔버스에서 시작할지 고릅니다. 처음이라면 템플릿이 구조를 배우기 좋습니다.
- 화면 요소를 배치합니다. 프레임 안에 텍스트와 이미지, 버튼을 넣는 방식입니다.
- 반응형을 확인합니다. 데스크톱, 태블릿, 모바일 화면 크기별로 배치가 어떻게 바뀌는지 봅니다.
- 인터랙션을 붙입니다. 스크롤에 따라 나타나는 요소나 호버 동작을 여기서 설정합니다.
- 게시합니다. 기본 주소가 발급되고 사이트가 바로 열립니다.
- 커스텀 도메인을 연결합니다. 이 단계에서 유료 플랜이 필요합니다.
4번을 건너뛰면 모바일에서 무너진 화면이 그대로 올라간다.
국내 트래픽은 모바일 비중이 높으니 데스크톱 배치를 잡은 직후에 모바일부터 확인하는 순서가 안전하다.
요금제와 크레딧
| 플랜 | 월 요금 | 핵심 |
|---|---|---|
| Free | $0 | 기본 주소로 게시, 개념 확인용 |
| Basic | $10 | 커스텀 도메인 무료, CMS 컬렉션 2개, 대역폭 50GB, 내장 SEO, AI 크레딧 월 1,000부터 |
| Pro | $30 | CMS 컬렉션 10개, 대역폭 100GB, 리다이렉트, 스테이징 환경, 브랜치와 미리보기, AI 크레딧 월 3,000부터 |
| Enterprise | 문의 | 볼륨 할인, 무제한 편집자, SCIM·SSO, 가동률 보장 |
크레딧은 플랜 안에서도 단계가 나뉜다.
Basic은 월 1,000에서 15,000까지, Pro는 3,000에서 100,000까지 구간을 고를 수 있고 요금이 그에 따라 올라간다.
무료에서 유료로 넘어가는 실제 이유는 대개 커스텀 도메인이다.
회사 도메인을 붙이는 순간 Basic이 전제가 된다.
그다음 지점은 CMS다.
블로그나 사례 목록처럼 반복되는 콘텐츠를 관리하려면 컬렉션이 필요하고, 개수가 플랜을 가른다.
Pro에서 열리는 항목 중 실무에 크게 작동하는 건 스테이징과 브랜치다.
운영 중인 사이트를 고칠 때 바로 반영하지 않고 미리보기로 확인한 뒤 올릴 수 있다.
캔버스 위의 AI 에이전트
Framer가 최근 앞세우는 건 에이전트다.
공식 설명은 “당신 대신이 아니라 당신 옆에서 일하는 에이전트”라는 표현을 쓴다.
사이트 위에서 직접 생성하고 다듬되, 모든 변경이 보이고 편집 가능하며 통제 아래 있다는 방향이다.
2026년 8월 변경 기록을 보면 통제 수단이 늘었다.
모델이 만들기 전에 얼마나 생각할지 정하는 추론 수준 설정이 들어갔다.
가벼운 추론은 빠른 수정에, 높은 추론은 계획이 필요한 작업에 맞춘다.
지원하는 모델에는 빠른 모드가 붙었는데, 대신 작업당 토큰을 더 쓴다.
밖에서 붙이는 경로도 있다.
개발자 문서에 Claude Code나 Codex, Cursor를 연결해 Framer 프로젝트를 갱신하는 방법이 안내돼 있다.
코드 에디터에서 작업하면서 사이트를 함께 고치는 구성이다.
코드로 확장하는 지점
시각 편집만으로 부족할 때 쓰는 장치가 네 가지 준비돼 있다.
- 코드 컴포넌트: React 컴포넌트를 만들어 캔버스에 놓는다. 시각 컨트롤을 붙여 디자이너가 값을 조정하게 할 수 있다.
- 코드 오버라이드: 기존 레이어나 컴포넌트의 속성을 코드로 바꾼다.
- 플러그인: 편집기와 CMS를 다루는 작은 앱을 만든다.
- Fetch: API 엔드포인트를 만들어 디자이너가 코드 없이 사이트에서 쓰게 한다.
여기에 서버 API가 따로 있어서 자기 제품에서 Framer 프로젝트를 다루거나 게시를 자동화할 수 있다.
플러그인 쪽에는 브랜치와 게시 기능이 추가돼서, 콘텐츠 갱신을 외부 시스템에서 밀어 넣는 구성이 가능해졌다.
한계와 안 맞는 경우
- 복잡한 웹 애플리케이션. 로그인과 데이터 처리가 얽힌 서비스는 이 도구의 영역이 아니다.
- 대규모 콘텐츠 사이트. CMS 컬렉션 개수와 대역폭이 플랜으로 나뉘어 있어 규모가 커지면 비용이 오른다.
- 코드를 그대로 가져가야 하는 경우. 결과물이 Framer 호스팅 위에서 도는 구조라 이전이 자유롭지 않다.
- 무료로 회사 사이트를 운영하려는 경우. 커스텀 도메인이 유료 항목이다.
제품 만들 때 가져갈 설계
첫째는 단계를 없앤 방식이다.
디자인과 배포 사이의 인수인계가 사라지면 만드는 사람이 끝까지 책임질 수 있다.
도구를 설계할 때 기능을 더하는 대신 넘겨주는 단계를 없애는 접근이 있다는 사례다.
둘째는 에이전트를 “옆에서 일하는” 것으로 정의한 점이다.
결과를 통째로 던져주는 대신 캔버스 위에서 보이게 작업하고 사용자가 언제든 손댈 수 있게 했다.
AI 기능에 대한 불신이 통제 상실에서 온다는 걸 정면으로 다룬 배치다.
셋째는 크레딧 구간을 플랜 안에서 다시 나눈 방식이다.
같은 Basic이라도 크레딧 양을 골라 요금이 달라진다.
사용량 편차가 큰 기능을 팔 때 플랜 수를 늘리지 않고 대응하는 방법이다.
실행 체크리스트
- 만들려는 것이 사이트인지 애플리케이션인지 먼저 판단합니다.
- 무료로 템플릿 하나를 골라 구조를 익힙니다.
- 데스크톱 배치 직후에 모바일 화면을 확인합니다.
- 회사 도메인을 붙일 계획이면 Basic 전환 시점을 잡습니다.
- 블로그나 목록형 콘텐츠가 있으면 필요한 CMS 컬렉션 수를 셉니다.
- 예상 트래픽을 대역폭 한도와 대조합니다.
- 운영 중 수정이 잦다면 스테이징과 브랜치가 있는 Pro를 검토합니다.
- AI 에이전트를 쓸 계획이면 크레딧 구간을 함께 고릅니다.
- 코드가 필요한 부분이 있으면 코드 컴포넌트로 해결되는 범위인지 확인합니다.
자주 묻는 질문
프레이머는 무료로 쓸 수 있나요
무료로 시작해 기본 주소로 사이트를 게시할 수 있습니다.
다만 커스텀 도메인 연결은 월 $10 Basic 플랜부터입니다.
Basic과 Pro의 차이는 무엇인가요
CMS 컬렉션이 2개에서 10개로, 대역폭이 50GB에서 100GB로 늘고, 리다이렉트와 스테이징 환경, 브랜치 미리보기가 Pro에 포함됩니다.
만든 사이트의 코드를 가져올 수 있나요
Framer 호스팅 위에서 동작하는 구조라 코드를 그대로 옮겨 다른 곳에서 운영하는 방식은 전제되어 있지 않습니다.
대신 서버 API와 플러그인으로 외부 시스템과 연동할 수 있습니다.
AI 에이전트는 어떻게 통제하나요
추론 수준을 조절해 얼마나 계획한 뒤 작업할지 정할 수 있고, 모든 변경이 캔버스에 보이며 직접 편집할 수 있습니다.
