Framer란? AI 사이트 제작 기능·요금·공개까지 사용법 안내
Framer의 AI Agent, 편집 캔버스, CMS, 요금을 정리했습니다. 작은 사이트를 만들고 스마트폰 화면과 공개 주소를 확인하는 절차를 소개합니다.
정보 확인일: 2026년 11월 5일. 공식 페이지의 본문을 확인해 작성한 글입니다. Framer에서 사이트 제작, 계약, 공개를 진행하지는 않았습니다. 요금은 미국 달러 기준의 연간 결제 표시를 참고했습니다.
들어가며
서비스 소개 사이트나 포트폴리오를 만들고 싶어도 화면 조정부터 공개까지 각각 다른 방식을 익히기는 쉽지 않습니다. Framer는 AI에 내리는 지시와 시각적 편집을 통해 웹사이트 제작부터 공개까지 진행할 수 있는 서비스입니다. 공식 사이트에서는 Agent가 만든 결과물을 편집 가능한 캔버스에서 조정하는 과정을 소개합니다. Framer 공식 사이트
중요한 것은 처음 보이는 디자인을 갖추는 일과 방문자가 실제로 이용할 수 있는 사이트를 만드는 일을 구분해 생각하는 것입니다. 이 글에서는 작은 사이트를 예로 들어 기능과 요금, 내용을 다듬고 공개 전후에 확인하는 절차를 설명합니다.
Framer란
Framer는 페이지 디자인, 반복해서 사용하는 구성 요소, CMS 콘텐츠, 화면 너비별 표시 방식, 공개 설정을 다루는 웹사이트 제작 서비스입니다. 공식 화면 가이드는 Canvas, CMS, Localization, Analytics, Settings라는 주요 영역을 설명합니다. 화면 구성 가이드
Canvas에서는 디자인을 만들고, CMS에서는 글 등을 정리하고, Settings에서는 사이트 전체 설정을 확인하는 식으로 역할을 나누어 이해하면 접근하기 쉽습니다. 처음부터 모든 기능을 사용할 필요는 없습니다.
편집부는 한 페이지짜리 소개 사이트처럼 목적이 분명한 대상부터 시작할 것을 권합니다. “누구에게 무엇을 전달하고, 마지막에 어떤 행동을 하게 할 것인지”를 정해 두면 디자인을 선택하는 기준과 작동을 확인하는 기준을 일치시킬 수 있습니다.
예를 들어 제작 실적을 소개하는 사이트라면 작품, 담당 범위, 상담으로 이어지는 경로가 필요합니다. 큰 이미지만으로는 의뢰를 고려하는 사람이 판단하기 어려울 수 있습니다. 자유로운 표현을 정보를 이해하기 쉽게 전달하는 데 어떻게 활용할지 생각해 보시기 바랍니다.
할 수 있는 일(주요 기능)
AI Agent와 구성 및 디자인 상의하기
공식 입문 강의에서는 빈 프로젝트에서 Agent에 필요한 사이트를 설명하고 페이지, 내비게이션, CMS, 구성 요소, 화면 너비별 구성을 만드는 과정을 안내합니다. 생성 후에는 캔버스에서 내용을 확인할 수 있습니다. 첫 사이트 만들기
처음 지시할 때는 사업이나 활동의 내용, 필요한 페이지, 사용할 사진, 표현하고 싶은 분위기를 포함합니다. 편집부가 예를 든다면 “상담을 고려하는 사람이 실적과 서비스 범위를 살펴볼 수 있는 사이트”처럼 목적을 먼저 쓰고 필요한 항목을 이어서 적습니다.
AI가 만든 문장을 그대로 자신의 실적으로 사용하지 않는 것도 중요합니다. 가상의 고객명, 수치, 수상 이력 등이 있다면 확인할 수 있는 정보로 바꾸거나 삭제합니다. 생성된 레이아웃을 사용하더라도 게시할 사실은 별도로 확인해야 합니다.
캔버스에서 글자와 여백 조정하기
Framer 공식 가이드는 페이지, 레이어, Assets를 확인하고 선택한 요소를 편집하는 화면 구성을 설명합니다. 글자, 색상, 여백 등 작은 변경은 캔버스에서 직접 조정하는 활용 방식을 소개합니다. 인터페이스
편집부는 먼저 텍스트의 역할을 일관되게 정리할 것을 권합니다. 페이지의 주제, 각 섹션의 제목, 설명문, 주석이 구분되면 읽는 순서를 만들기 쉽습니다. 장식을 추가하기 전에 중요한 내용이 먼저 눈에 들어오는지 확인하는 것이 좋습니다.
같은 역할을 하는 버튼이나 제목이 페이지마다 달라지지는 않는지도 살펴봅니다. 통일할 부분과 내용에 따라 바꿀 부분을 정리하면 이후 수정 방향도 생각하기 쉬워집니다.
CMS로 같은 형식의 정보 관리하기
CMS는 글, 사례, 팀 소개처럼 공통 항목을 가진 정보를 모아 관리하는 기능입니다. 공식 강의에서는 Collection에 Item을 넣고 제목이나 이미지 등의 Field를 정한 뒤 하나의 레이아웃에 연결하는 구조를 설명합니다. CMS 기본
예를 들어 사례를 관리한다면 프로젝트명, 이미지, 설명, 담당 범위, 공개일 등을 항목으로 고려할 수 있습니다. 편집부는 먼저 실제 사례 몇 건을 나란히 놓고 매번 필요한 항목과 프로젝트에 따라 없는 항목을 구분해 설계할 것을 제안합니다.
CMS 사용 여부는 정보의 개수만으로 결정하지 않는 것이 좋습니다. 같은 형식의 정보를 계속 추가한다면 도입을 고려할 만하지만, 한 번만 게시할 짧은 설명은 일반 페이지로 충분할 수도 있습니다. 업데이트 담당자의 작업까지 생각해 선택하시기 바랍니다.
화면 너비에 따른 표시 확인하기
미리보기에서는 화면 너비를 바꾸며 레이아웃과 작동을 확인할 수 있습니다. 특정 브레이크포인트를 선택한 뒤 표시하는 방법도 있습니다. 공식 도움말에 따르면 설정에서 추가한 사용자 지정 코드는 미리보기에 나타나지 않으므로 공개된 사이트에서 확인해야 합니다. 미리보기 사용법
편집부가 권하는 확인 방법은 미리 준비된 크기만 살펴보는 데 그치지 않습니다. 너비를 조금씩 바꾸면서 제목의 줄바꿈이 어색하지 않은지, 이미지와 텍스트가 겹치지 않는지 확인합니다. 이용자의 기기 화면은 하나의 너비로 고정되어 있지 않기 때문입니다.
스마트폰에서는 글자 크기뿐 아니라 내용의 순서도 확인합니다. 가로로 나란히 배치한 내용이 세로로 바뀌었을 때 설명과 이미지의 관계를 이해할 수 있는지, 버튼으로 이동하기 전에 필요한 정보를 읽을 수 있는지 살펴보는 것이 좋습니다.
요금제
확인한 요금 페이지는 Yearly billing 기준으로 표시되어 있었습니다. 월 환산 요금은 Basic이 10달러, Pro가 30달러이며, Enterprise는 개별 견적입니다. 무료 요금제도 있어 Framer 도메인에서 사용해 볼 수 있습니다. 공식 요금
요금제 | 연간 결제 시 월 환산 요금 | 확인한 주요 용도 및 특징 |
|---|---|---|
Free | 0달러 | Framer 도메인과 체험용 AI 크레딧 |
Basic | 10달러 | 사용자 지정 도메인, 2 CMS Collections 등 |
Pro | 30달러 | 10 CMS Collections, 스테이징 등 |
Enterprise | 개별 견적 | 조직용 관리 기능과 개별 조건 |
요금 페이지에는 추가 편집자, 콘텐츠 편집자, 다국어 지원, 추가 기능에 대한 별도 요금도 안내되어 있습니다. 사이트 기본요금만을 전체 비용으로 생각하지 말고, 누가 편집할지와 어떤 기능을 추가할지도 함께 고려해야 합니다.
확인 당시 무료 AI 크레딧은 “체험용 500”으로 안내되어 있었습니다. 매달 같은 양이 제공된다는 뜻으로 받아들이지 말고, 이용 화면에서 잔여량과 충전 조건을 확인하시기 바랍니다. Agent 사용 한도와 사이트의 페이지 수, 전송량도 각각 별개의 항목입니다.
편집부는 먼저 필요한 페이지 수와 CMS 종류를 세어 볼 것을 권합니다. 글과 사례를 따로 관리할지, 하나의 목록으로 관리해도 될지에 따라 필요한 구성이 달라집니다. 향후 최대 규모만 상상하기보다는 현재 공개할 내용과 업데이트 계획을 바탕으로 선택하는 것이 좋습니다.
사용자 지정 도메인은 연결할 수 있다는 점과 도메인 등록·갱신 비용을 구분해야 합니다. 공식적으로 연간 결제 시 도메인 혜택도 제공하지만, 대상과 등록 업체에 관한 조건이 있으므로 원하는 모든 도메인이 무료라고 생각하지 않도록 합니다. 사용자 지정 도메인 연결
다른 사람에게 제작을 맡긴다면 공개 후 누가 문장이나 이미지를 수정할지도 정합니다. 보기만 하는 사람, 내용을 편집하는 사람, 사이트 전체를 관리하는 사람을 구분해 두면 필요한 이용 인원과 권한을 비교하기 쉬워집니다.
사용 절차: 작은 소개 사이트 만들기
여기서는 공식 입문 강의를 참고해 제작부터 공개 후 확인까지의 절차를 소개합니다. 이 글을 작성하기 위해 Framer에서 사이트를 만들거나 외부에 공개한 것은 아닙니다.
1. 게시할 정보 먼저 정리하기
먼저 제목, 설명, 실적, 연락 방법 등 필요한 내용을 적어 봅니다. 완성된 문장이 없더라도 확정된 정보와 미확정 정보는 구분해 두는 것이 좋습니다. 사진과 로고도 사용해도 되는 것으로 준비합니다.
편집부가 제안하는 한 페이지 구성 예시는 “제공하는 것”, “서비스 범위”, “실적”, “진행 방식”, “상담 문의처”입니다. 이는 어디에나 적용되는 틀이 아니라 방문자가 판단하는 순서를 생각하기 위한 예시입니다. 자신의 사이트에 불필요한 섹션은 빼고 필요한 설명으로 바꿉니다.
목적을 하나 정하면 버튼 문구도 선택하기 쉬워집니다. 자료를 읽게 할 것인지, 상담 내용을 보내게 할 것인지에 따라 게시할 설명과 연결할 목적지가 달라지기 때문입니다.
2. 빈 프로젝트에서 전체 구성 만들기
공식 입문 과정에서는 빈 Framer 프로젝트에서 Agent 패널을 열고 필요한 내용을 전달합니다. 만들어진 페이지, CMS, 구성 요소를 확인하고 추가 지시로 조정합니다. 제작을 시작하는 공식 절차
첫 결과물에서는 색상이나 장식뿐 아니라 필요한 페이지가 있는지, 설명 순서가 적절한지도 확인하는 것이 좋습니다. 부족한 내용을 추가할 때도 “더 좋게”라고 하기보다는 어떤 독자의 어떤 궁금증에 답하고 싶은지 전달하면 판단하기 쉬워집니다.
3. 내용을 정확한 정보로 바꾸기
생성된 텍스트와 이미지를 살펴보고 사실에 맞는 내용으로 바꿉니다. 편집부는 요금, 소재지, 실적 수치, 문의처 등 오류가 이용자의 행동에 영향을 주는 항목부터 확인할 것을 권합니다.
이어서 제목과 본문의 관계를 살펴봅니다. 제목에서 큰 약속을 하고 있지만 본문에서 근거를 제시할 수 없다면 표현을 수정합니다. 사이트를 처음 보는 사람이 무엇을 의뢰할 수 있는지 판단할 수 있도록 내용을 다듬는 것이 좋습니다.
사진에도 역할을 부여합니다. 분위기를 전달하는 사진인지, 실적을 보여 주는 이미지인지 구분하고 설명이 필요하면 캡션을 덧붙입니다. 아름다운 이미지가 있다는 것만으로 서비스 내용까지 전달되는 것은 아닙니다.
4. 반복되는 정보와 업데이트 방식 정리하기
공식 사이트 구축 가이드는 텍스트·색상 스타일과 버튼처럼 재사용하는 구성 요소를 정리하는 방법을 소개합니다. 페이지를 섹션으로 나누고 내용에 따라 조정하는 구성도 안내합니다. 업데이트하기 쉬운 사이트 설계
실적을 추가할 계획이라면 CMS 항목을 생각합니다. 편집부라면 먼저 설명이 짧은 사례와 긴 사례를 넣었을 때를 비교합니다. 이상적인 분량에만 맞추지 말고 실제로 입력할 법한 길이에서도 읽기 편한지 확인하는 것이 좋습니다.
업데이트 담당자가 헷갈릴 만한 항목은 제작 메모에 입력할 내용을 설명합니다. 완성 시점의 디자인뿐 아니라 다음에 한 건을 추가할 때도 같은 품질로 정리할 수 있을지 생각하면 운영하기 쉬운 사이트에 가까워집니다.
5. 미리보기에서 독자의 이용 흐름 따라가기
공식 도움말에서는 Play 버튼이나 단축키로 미리보기를 엽니다. 화면 너비를 바꾸면서 링크와 표시 상태를 확인할 수 있습니다. 미리보기
확인할 때는 위에서부터 훑어보기만 하지 말고 방문자의 목적을 하나 정해 조작해 봅니다. 예를 들어 “실적을 보고 상담 문의처로 이동하기”라는 순서에 따라 필요한 링크를 알아볼 수 있는지, 버튼이 적절한 곳으로 연결되는지 살펴봅니다.
스마트폰 화면에서는 제목의 줄바꿈, 이미지가 잘리는 방식, 가로로 넘치는 요소, 버튼 간격을 확인합니다. 좁은 화면에서 읽기 어렵다면 단순히 글자를 줄이기보다는 내용의 순서나 여백을 조정할 것을 권합니다.
6. 제목과 공유 시 표시할 정보 설정하기
Framer는 사이트 전체와 개별 페이지의 제목, 설명문, 공유용 이미지를 설정하는 방법을 안내합니다. 페이지별 설정으로 사이트 전체의 기본값을 덮어쓸 수 있습니다. 제목과 설명문
화면 안에 큰 제목이 있는 것과 브라우저나 공유한 곳에 올바른 제목이 표시되는 것은 별개입니다. 임시 프로젝트명이 남아 있지는 않은지, 페이지 내용과 설명문이 일치하는지 확인하는 것이 좋습니다.
7. 공개할 주소를 정하고 실제 제공되는 페이지 확인하기
공식 절차에서는 Publish로 사이트를 공개한 뒤 표시된 URL에 접속합니다. 업데이트할 때는 Update를 사용합니다. Pro 이상에서 스테이징을 이용하는 경우에는 테스트 환경과 실제 운영 환경의 공개를 구분하는 구조입니다. 공개 안내／공개 URL과 도메인
공개할 때는 최종 URL에서 페이지를 다시 열어 확인합니다. 첫 페이지만이 아니라 각 페이지, 이미지, 주요 링크도 살펴봅니다. 설정에서 추가한 코드처럼 미리보기에서 확인할 수 없는 요소가 있다면 공개 환경에서의 작동도 확인하는 것이 좋습니다.
편집부는 공개한 날짜, 확인한 URL, 남아 있는 수정 사항을 메모로 남길 것을 권합니다. 제작 화면에서 수정한 것과 실제 운영 사이트에 반영된 것을 구분해 두면 업데이트할 때 서로 다르게 이해하는 일을 줄일 수 있습니다.
잘 맞는 사람과 맞지 않는 사람
편집부가 판단하기에 Framer는 화면을 보면서 디자인을 조정하고, 소개 사이트나 지속적으로 업데이트할 콘텐츠를 만들고 싶은 사람에게 적합한 후보입니다. AI로 기본 틀을 만들고 정보와 디자인을 직접 확인할 수 있는 사람이라면 제작 과정을 시도해 보기 쉬울 것입니다.
반면 생성된 문장이나 링크를 확인하지 않고 그대로 공개하려는 사람에게는 그런 운영 방식을 권하지 않습니다. 독자적인 업무 처리가 중심이 되는 사이트라면 필요한 연동과 기능을 구체적으로 정리한 뒤 구현 방법을 확인해야 합니다.
공개 후 업데이트를 맡을 사람이 없는 경우에도 도입 전에 운영 방식을 정리하는 것이 좋습니다. 제작뿐 아니라 영업시간이나 가격 등의 변경을 지속적으로 반영할 수 있는지도 사이트의 사용 편의성과 관련이 있습니다.
비슷한 도구와의 차이
Webflow도 시각적 캔버스, CMS, 공개 및 협업 기능을 제공합니다. 공식 사이트에서는 디자인, 콘텐츠 관리, 분석 등을 하나의 환경에서 다루는 구성을 소개합니다. Webflow 공식 사이트
Framer와 비교한다면 같은 페이지를 대상으로 초기 구성 만들기, 문장 업데이트, 스마트폰 화면 조정, 공개까지 시도해 볼 것을 권합니다. 어느 쪽이 더 쉬운지 일률적으로 정하기보다는 업데이트 담당자가 다룰 수 있는지, 필요한 기능에 맞는지를 기준으로 판단하는 것이 좋습니다.
주의할 점
미리보기와 공개된 사이트에서 확인할 수 있는 요소는 다를 수 있습니다. 특히 사용자 지정 코드의 반영 여부는 공식 도움말에서도 구분하므로, 미리보기가 잘 나온다는 이유만으로 공개 후 작동까지 확인했다고 생각하지 않도록 합니다.
요금도 사이트 요금제, 추가 편집자, AI 사용 한도, 추가 기능을 나누어 살펴봅니다. 현재 요금표에 없는 이전 요금제명이나 과거 소개 글의 금액을 그대로 참고하지 않는 것이 중요합니다.
디자인을 평가할 때는 움직임이 얼마나 많은지보다 필요한 내용에 도달할 수 있는지 확인하는 것이 좋습니다. 설명을 읽거나 조작하는 데 방해가 되는 효과가 있다면 목적에 맞게 조정할 것을 권합니다.
마무리
Framer는 AI Agent와 편집 캔버스를 활용해 웹사이트 제작, CMS를 통한 업데이트, 공개를 진행하는 서비스입니다. 작은 사이트에서 내용을 다듬는 작업과 여러 화면 너비에서 확인하는 작업을 경험해 보면 판단하기 쉬워집니다.
공개 전 미리보기 확인과 공개 URL 확인을 구분하고, 업데이트 담당자와 필요한 요금도 함께 고려하는 것이 좋습니다. 완성의 기준을 “방문자가 필요한 정보를 읽고 행동할 수 있는 것”으로 삼는 것이 편집부가 권하는 활용 방식입니다.
