Framer 웹사이트 제작과 자체 도메인 연결 절차
Framer AI 프롬프트로 웹사이트를 만들고 캔버스를 편집한 뒤, Basic 이상 요금제에서 커스텀 도메인의 DNS 레코드를 설정하고 연결을 확인하는 절차입니다.
- 분야
- 만들기
- 공식 자료
- 5개
- 읽는 시간
- 5분
- 최종 확인
- 2026.09.24
요금제별 도메인 연결 조건
Framer 무료 요금제 사용자는 무료 framer.photos 또는 framer.website 서브도메인으로만 배포할 수 있습니다. 따라서 자체 커스텀 도메인을 연결하려면 Basic 플랜(월 $10부터) 이상의 유료 요금제로 전환해야 합니다. 워크스페이스 관리자가 AI 기능을 비활성화한 엔터프라이즈 조직 계정에서는 Framer Agents를 통한 자동 캔버스 생성이 제한됩니다.
요금제별 연결 가능한 도메인, AI 크레딧, 대역폭 한도를 비교한 표입니다.
| 구분 | Free 플랜 | Basic 플랜 | Pro 플랜 |
|---|---|---|---|
| 연동 도메인 | 무료 Framer 서브도메인 | 사용자 지정 도메인 1개 | 사용자 지정 도메인 1개 |
| AI 크레딧 | 기본 500 크레딧 제공 | 월 1,000 크레딧 제공 | 월 3,000 크레딧 제공 |
| 대역폭 한도 | 월 1 GB | 월 50 GB | 월 100 GB |
무료 플랜에서 커스텀 도메인 연결을 시도하면 결제 창으로 이동하므로, 플랜 업그레이드를 먼저 완료해야 합니다. 워크스페이스 권한이 'Viewer'인 사용자에게는 도메인 레코드 설정과 최종 Publish 권한이 없으므로 Owner 또는 Editor 권한이 필요합니다. AI 기능 사용이 제한된 엔터프라이즈 계정이라면 관리자에게 워크스페이스 설정의 AI 기능 승인을 요청하거나, 템플릿을 기반으로 직접 제작합니다.
Framer Agent 프롬프트와 DNS 레코드 값
Framer Agent 프롬프트 입력 창에 넣을 웹사이트 구성 요구사항의 예시입니다. 브랜드 이름, 레이아웃 요구사항, 주요 대상 고객, 포함할 섹션을 구체적으로 적어야 생성 결과의 품질이 높아집니다.
`Build a modern landing page for a SaaS product named 'Parallel'. Include a bold hero section with headline 'Investing, Automated.', an overview of 24/7 market analysis feature, a grid showing customer testimonials, and a primary call-to-action button 'Get early access'.
Use dark mode layout with responsive breakpoints for Desktop, Tablet, and Phone.`
DNS 레코드는 도메인 등록업체의 DNS 관리 페이지에서 아래 값과 정확히 대조해 입력해야 합니다. 메인 도메인에는 A 레코드를, 서브도메인에는 CNAME 레코드를 지정합니다.
- 메인 도메인(root) A 레코드: 31.43.160.6과 31.43.161.6 두 개(Framer 도움말 기준)
- 서브도메인(www) CNAME 레코드:
sites.framer.app입력 - AAAA 레코드가 있으면 삭제하고, CAA 레코드를 쓰는 경우 Framer의 인증서 발급을 허용
- DNS 프록시 설정: Cloudflare 이용 시 'DNS Only'로 지정 권장
웹사이트 생성과 도메인 연결 절차

- Framer 대시보드에 접속한 뒤 'Start with AI' 버튼을 클릭하고, 준비한 프롬프트를 입력창에 붙여넣어 초안 캔버스를 생성합니다.
- 생성된 캔버스 우측 'Agent' 및 'Style' 패널에서 Agent의 모델 선택기로 GPT 5.6 Terra 등 제공되는 모델을 고른 뒤 Text, Color, Padding, Border Radius 값을 변경하고, 브레이크포인트(Desktop 1200, Tablet 810, Phone 390)별 레이아웃을 정렬합니다.
- 좌측 'CMS' 탭에서 'Add Collection'을 클릭하고, 블로그·포트폴리오·상품 목록 데이터를 입력한 뒤 캔버스 레이어에 데이터 필드를 연결합니다.
- 상단 'Site Settings' 메뉴에서 'Domains' 탭을 선택하고, 유료 요금제 상태를 확인한 뒤 'Connect a domain' 입력란에 소유한 도메인 주소를 입력합니다.
- 가비아 또는 Cloudflare 등 도메인 등록업체 콘솔의 DNS 설정 메뉴에서 Framer가 안내하는 A 레코드 값 또는 CNAME 레코드(
sites.framer.app)를 입력하고, Framer 화면으로 돌아와 'Publish' 버튼을 눌러 연결을 활성화합니다.
연결 완료 확인 항목
연결이 끝났는지는 Publish 완료 창에 표시된 배포 주소를 클릭해 실제 브라우저에서 확인합니다. 브라우저 주소창에 자체 도메인을 입력했을 때 SSL 보안 인증서(HTTPS)가 적용되어 주소창 왼쪽에 자물쇠 아이콘이 표시되어야 합니다.
Site Settings의 'Domains' 탭에서 입력한 도메인의 상태가 연결 완료로 바뀌었는지도 확인합니다. 마지막으로 모바일과 데스크톱 브라우저에서 각각 접속해, 브레이크포인트별로 텍스트가 잘 읽히고 버튼이 제대로 반응하는지 점검합니다.
연결 오류 원인과 대안
도메인을 연결했는데 상태가 바뀌지 않고 대기 상태가 계속되면, Framer 도움말의 점검 순서에 따라 같은 호스트에 남아 있는 타사 A 레코드와 AAAA 레코드를 삭제합니다. 이어서 CAA 레코드가 Framer의 인증서 발급을 막고 있지 않은지 확인합니다. DNS 변경은 등록업체에 따라 반영에 시간이 걸리므로 잠시 뒤 다시 확인합니다.
Cloudflare를 DNS 관리자로 사용하는 경우에는 Framer 도움말에 따라 해당 레코드의 프록시(주황색 구름)를 끄고 'DNS only'(회색 구름) 상태로 두어야 Framer가 인증서를 발급할 수 있습니다. 프록시를 끈 뒤에도 연결되지 않으면 잠시 기다렸다가 다시 확인합니다.
DNS 레코드 수정 권한이 없는 기업 네트워크이거나 네임서버 설정을 변경할 수 없는 경우에는 도메인 관리 부서의 네트워크 관리자에게 외부 CNAME 포워딩을 요청해야 합니다. 사내 보안 정책으로 CNAME 직접 노출이 금지되어 있다면 Framer Pro 플랜 이상의 Advanced Hosting 기능이나 별도 Reverse Proxy 구축을 대안으로 사용합니다.
이 글의 수정 내역 · 2026-09-24
2026-09-24 정정: 존재하지 않는 'Petal 3.1' 모델, 'DNS Optimization Required'·'Pending DNS' 문구, Cloudflare SSL 모드 변경, TTL 3600을 Framer 도움말의 실제 안내(A 레코드 두 값, AAAA 삭제, CAA 허용, 프록시 해제)로 교체하고 출처를 도메인 연결·문제 해결 문서로 교체.
참고한 출처
framer.com — How to connect a custom domain (2026-09-24)
framer.com — Troubleshooting custom domain issues (2026-09-24)
framer.com — Framer Pricing (2026-09-24)
framer.com — How AI credits and Agents pricing work (2026-09-24)
framer.com — Choosing a model in the Framer Agent (2026-09-24)
공식 문서 확인