Framer로 웹사이트 만들기 및 자체 도메인 연동 방법

작업 전 준비물과 적용할 수 없는 조건

Framer 무료 요금제 사용자는 무료 framer.photos 또는 framer.website 서브도메인만 배포할 수 있습니다. 자체 보유한 커스텀 도메인을 연결해야 하는 경우에는 반드시 Basic 플랜(월 $10부터) 이상의 유료 요금제로 구독을 전환해야 합니다. 엔터프라이즈 환경에서 워크스페이스 관리자가 AI 기능을 비활성화한 조직 계정인 경우에는 Framer Agents 기능을 통한 자동 캔버스 생성이 제한됩니다.

무료 플랜 상태에서 커스텀 도메인 연결을 시도하면 결제 창으로 자동 리다이렉트되므로 사전에 플랜 업그레이드를 완료해야 합니다. 워크스페이스 권한이 'Viewer'로 설정된 사용자는 도메인 레코드 설정 및 최종 Publish 권한이 부여되지 않으므로 워크스페이스 Owner 또는 Editor 권한을 확보해야 합니다. AI 기능 사용이 제한된 엔터프라이즈 계정인 경우에는 관리자에게 워크스페이스 설정의 AI 기능 승인을 요청하거나 템플릿 기반 수동 제작 방식을 선택해야 합니다.

복사 가능한 실제 입력 예시 또는 검수표

Framer Agent 프롬프트 입력 창에 기재할 웹사이트 구성 요구사항 예시입니다. 프롬프트 작성 시 브랜딩 명칭, 레이아웃 요구사항, 주요 타깃 고객층, 포함할 섹션 항목을 명확하게 텍스트로 정의해야 AI 생성 품질이 높아집니다.

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 레코드 IP: Framer 호스팅 서버 IP 지정
• 서브도메인(www) CNAME 레코드: sites.framer.app 입력
• TTL 설정값: 3600 (또는 Auto)
• DNS 프록시 설정: Cloudflare 이용 시 'DNS Only'로 지정 권장

Framer AI 웹사이트 생성 및 도메인연동 5단계 절차

1. Framer 대시보드에 접속한 뒤 'Start with AI' 버튼을 클릭하고, 준비한 프롬프트를 입력창에 붙여넣어 초안 캔버스를 자동 생성합니다.
2. 생성된 캔버스 우측 'Agent' 및 'Style' 패널에서 'GPT 5.6 Terra' 또는 'Petal 3.1' 모델을 선택하여 Text, Color, Padding, Border Radius 값을 변경하고 브레이크포인트(Desktop 1200, Tablet 810, Phone 390)별 레이아웃을 정렬합니다.
3. 좌측 'CMS' 탭으로 이동해 'Add Collection'을 클릭하고, 웹사이트에 필요한 블로그, 포트폴리오, 상품 목록 데이터를 구축한 뒤 캔버스 내 레이어에 데이터 필드를 바인딩합니다.
4. 상단 'Site Settings' 메뉴를 열어 'Domains' 탭을 선택하고, 구매한 유료 요금제 상태를 확인한 후 'Connect a domain' 입력란에 개인 소유 도메인 주소를 입력합니다.
5. 가비아 또는 Cloudflare 등 도메인 등록업체 콘솔에 접속하여 DNS 설정 메뉴에서 Framer가 안내하는 A 레코드 값 또는 CNAME 레코드(sites.framer.app)를 입력하고, Framer 관리자 화면으로 돌아와 'Publish' 버튼을 눌러 연동 상태를 활성화합니다.

결과를 판정하는 검수 기준

웹사이트 연동이 정상적으로 끝났는지 판단하려면 Publish 완료 창에서 발급된 배포 주소를 클릭하여 실제 브라우저 접속 상태를 검증합니다. 외부 브라우저 주소창에 연결한 자체 도메인을 입력했을 때 SSL 보안 인증서(HTTPS)가 정상 적용되어 주소창 왼쪽에 자물쇠 아이콘이 표시되어야 합니다.

사이트 세팅의 'Domains' 탭에서 입력한 도메인 옆의 상태 표시가 'Pending DNS'에서 녹색의 'Connected'로 전환되었는지 확인합니다. 모바일 단말기와 데스크톱 브라우저에서 각각 접속하여 브레이크포인트에 맞춰 텍스트 가독성과 버튼 클릭 반응성이 올바르게 작동하는지 검수합니다.

실패 원인 확인과 다른 메뉴·도구·관리자 경로

도메인을 연결했으나 'DNS Optimization Required' 오류가 나타나는 경우에는 도메인 등록업체의 CNAME 플래트닝(Flattening) 설정이나 이중 A 레코드 입력 여부를 진단합니다. 동일한 호스트 네임에 타사 호스팅 IP가 중복 등록된 경우에는 타사 A 레코드를 완전히 삭제해야 정상 연결됩니다.

Cloudflare를 DNS 관리자로 사용하는 환경에서 SSL 핸드셰이크 오류가 지속되면, Cloudflare SSL/TLS 암호화 모드를 'Full' 또는 'Full (strict)'로 변경합니다. 프록시 아이콘이 주황색(Proxied)으로 켜져 있으면 Framer 서버에서 SSL 발급을 실패할 수 있으므로 'DNS Only'(회색 구름) 상태로 전환한 뒤 재시도합니다.

자체 DNS 레코드 수정 권한이 없는 기업 네트워크 환경이거나 네임서버 설정 변경이 불가능한 경우에는 도메인 관리 부서의 네트워크 관리자에게 외부 CNAME 포워딩을 요청해야 합니다. 자사 보안 정책으로 인해 CNAME 직접 노출이 금지된 상황이라면 Framer Pro 플랜 이상에서 제공하는 Advanced Hosting 기능이나 별도 Reverse Proxy 구축 경로로 전환합니다.