빠른 시작
이 가이드에서는 Framer의 모든 기능을 다룹니다.
- 시작하기 — Create your account and set up a new project
- 자동화된 SEO 사용 방법 — Sitemaps, meta tags, and clean markup handled for you
- 디자인 사용 방법 — Frames, layers, and components on one canvas
- 고급 분석 사용 방법 — Traffic and behavior insights built into the editor
- Collaborate 사용 방법 — Real-time editing with your whole team
- CMS 사용 방법 — Manage repeating content from one collection
- 애니메이션 사용 방법 — Scroll effects and hover states without code
- AI 도구 사용 방법 — Full landing pages from a text prompt
- 사용자 지정 도메인 사용 방법 — Your own web address with SSL handled
- How to Use Site & Page Metadata — Control how every page looks in search
- How to Use Automatic Sitemap — A live index of every page you publish
소요 시간: 각 작품당 5분
이 가이드에는 다음 내용도 포함되어 있습니다. 프로 팁 | 흔히 저지르는 실수 | 문제 해결 | 가격 | 대안
이 가이드를 신뢰해야 하는 이유
I have shipped client work in Framer for two years and tested every feature covered here. This tutorial comes from real hands-on work — not marketing copy or vendor screenshots.
Framer is a powerful, browser-based tool for designing, prototyping, and publishing responsive websites without coding.
Most people only scratch the surface of it.
They build one page from scratch, publish, and never touch the CMS or the animations panel again.
이 가이드는 모든 주요 기능을 단계별로 사용하는 방법을 보여줍니다.
프레임 튜토리얼
Learning how to use Framer means one shift in thinking: away from static design files, toward component-based, responsive web development. The basics below get you there.
프레임
Design, prototype, and publish a real website from one browser tab. Framer removes the handoff to developers — what you draw on the canvas is what goes live. Start free, upgrade when you need a custom domain.
Framer 시작하기
Complete this one-time setup before touching any feature.
Here is what my own first week with the editor looked like:
이제 각 단계를 하나씩 살펴보겠습니다.
1단계: 계정 생성
Go to the Framer website and click Sign Up.
Enter your email and set a password.
✓ 검문소: 확인하세요 받은 편지함 확인 이메일을 위해서요.
2단계: 편집기를 엽니다.
Framer runs in the browser, so Windows and 스코틀랜드 사람 both work with no install.
Log in and the canvas loads immediately.
Here is what you get out of the box:
✓ 검문소: 프로젝트 목록이 포함된 메인 대시보드가 표시될 것입니다.
3단계: 새 프로젝트 시작하기
Click New Project. Choose a blank canvas to build from scratch, or open an example template and change it.
You can also import a Figma file, which Framer converts into clean, responsive HTML.
✅ 완료: Your Framer project is open and ready for any feature below.
Framer 자동 SEO 사용 방법
자동화된 SEO — Automated SEO handles sitemaps, meta tags, and clean markup so your site ranks without extra tools.
1단계: 사이트 설정 열기
Open site settings from the top-left menu of your Framer project.
Framer builds an automatic sitemap the moment you publish.
Step 2: Write Page Metadata
Manually update a unique meta title and description for every page.
이것이 어떤 모습인지 보여드리겠습니다.
✓ 검문소: Each page shows its own title in the metadata list.
Step 3: Fix Your Heading Tags
Open the Accessibility panel and assign correct HTML tags to each text layer.
Every page needs exactly one H1 containing its primary keyword.
✅ 결과: Your site ships with semantic structure and search-ready metadata.
💡 꿀팁: Enable the Lazy loading setting for media below the fold. Images outside the first viewport load later and your page speed improves.
How to Use Framer Designer
설계 — Design gives you frames, layers, and pre-made components on a single canvas.
Step 1: Create a Frame
Go to Frame > New Frame. Frames are the building blocks of your Framer design.
Step 2: Add Your Elements
Add a text layer, images, or a button inside the frame.
Select any element and drag the resizing handles to adjust its size.
이것이 어떤 모습인지 보여드리겠습니다.
✓ 검문소: Your frame holds every element you added, in order.
Step 3: Switch to Stacks
Use Stacks to manage spacing and alignment automatically instead of absolute positioning.
✅ 결과: A clean layout that holds together instead of drifting apart.
💡 꿀팁: Give section frames top and bottom padding. Add left and right padding to the containers inside them for consistent spacing.
Framer 고급 분석 사용 방법
고급 분석 — Advanced Analytics reports traffic and behavior insights without a third-party script.
1단계: 분석 탭을 엽니다.
Click Analytics in the top bar of your project.
Step 2: Choose a Date Range
Pick a window and compare it against the previous period.
Weekly ranges show trends; daily ranges only show noise.
이것이 어떤 모습인지 보여드리겠습니다.
✓ 검문소: You see visitors, page views, and your top pages.
Step 3: Act on What You See
Find pages with high exit rates and edit that content first.
One weak headline can cost more traffic than a whole redesign wins back.
✅ 결과: Real numbers telling you which page to change next.
💡 꿀팁: Watch referrer 데이터 every week. It shows which sites connect back to you and which posts earn links on their own.
How to Use Framer Collaborator
협업하다 — Collaborate lets designers work on the same site in real time.
Step 1: Send an Invitation
Click Share, then invite a collaborator by email.
Step 2: Set Their Role
Choose Editor for people who build, or Viewer for people who only watch and leave feedback.
이것이 어떤 모습인지 보여드리겠습니다.
✓ 검문소: 그들의 화신 appears on the canvas once they accept the invitation.
Step 3: Work at the Same Time
Edit one canvas together. Every change syncs live for everyone.
✅ 결과: One shared project instead of five conflicting copies.
💡 꿀팁: Organize and rename layers before you invite anyone. Clear names save your team hours of hunting through the layer list.
Framer CMS 사용 방법
CMS — CMS turns repeating content into a collection you manage from one place.
1단계: 컬렉션 생성
Open the CMS panel and add a new collection.
One collection per content type: blog posts, case studies, team members.
Step 2: Add Your Fields
Set a field for each piece of content: title, image, body, and slug.
이것이 어떤 모습인지 보여드리겠습니다.
✓ 검문소: Your collection lists every entry in a simple table.
Step 3: Connect It to the Design
Select a component on the canvas and bind each layer to a CMS field.
Build the card once and every entry inherits that design.
✅ 결과: New entries publish automatically using the same layout.
💡 꿀팁: Drop a search icon entry point for site search into your header. That icon entry point for site search helps readers find older posts fast.
Framer 애니메이션 사용 방법
애니메이션 — Animations bring your ideas to life with scroll effects, hover states, and transitions.
1단계: 요소를 선택합니다
Pick the element you want to animate on the canvas.
Step 2: Open the Animation Menu
Go to Animation > New Animation and choose a trigger.
Scroll, hover, and click cover most real interactions you need.
이것이 어떤 모습인지 보여드리겠습니다.
✓ 검문소: A preview plays the moment you release the trigger.
Step 3: Adjust the Curve
Change the easing and duration until the motion feels natural.
✅ 결과: Interactions that feel designed, not bolted on afterwards.
💡 꿀팁: Keep entrance animations under 400ms. Anything longer makes a fast site feel slow, and visitors read that as a broken page.
How to Use Framer AI Tools
AI 도구 — Framer AI generates complete, responsive, styled landing pages from simple text prompts.
1단계: 새 프로젝트 시작하기
Create a new project and click the AI option instead of a blank canvas.
2단계: 프롬프트 작성
Describe the site you want in plain language. Name your audience and tone.
이것이 어떤 모습인지 보여드리겠습니다.
✓ 검문소: A full page appears on your canvas within seconds.
Step 3: Edit the Result
Treat the output as a draft. Change copy, swap images, adjust spacing.
✅ 결과: A working first draft instead of a blank screen.
💡 꿀팁: Generate two or three versions from similar prompts. Copy the best section out of each one and build your real page from those.
How to Use Framer Custom Domain
사용자 지정 도메인 — Custom Domain points your own web address at the site you just built.
1단계: 도메인 설정 열기
Go to site settings and select Domains.
2단계: 도메인 추가
Type your domain, then copy the DNS records Framer shows you.
You need one A record and one CNAME in most cases.
✓ 검문소: Framer shows a pending status until DNS resolves.
Step 3: Paste the Records
Add those records at your registrar. Most updates finish within an hour.
✅ 결과: Your project loads on your own domain with SSL handled for you.
💡 꿀팁: Connect the domain before you publish anything public. Doing it later means cleaning up redirects and losing 일찍 순위.
How to Use Framer Site & Page Metadata
Site & Page Metadata — Site and page metadata control how each page looks in search results and shared links.
Step 1: Open a Page
Select a page in the left panel and open its settings.
Step 2: Write the Title and Description
Keep titles under 60 characters and descriptions close to 155.
Write them for a person deciding whether to click, not for a crawler.
✓ 검문소: The preview card updates as you type.
Step 3: Add a Social Image
Upload an open graph image so links look right when people share them.
✅ 결과: Every page carries its own title, description, and share card.
💡 꿀팁: Never ship the default title on more than one page. Duplicate titles make search engines choose which page to bury.
How to Use Framer Automatic Sitemap
Automatic Sitemap — Automatic Sitemap keeps a live index of every page you publish.
Step 1: Publish the Site
Framer writes the sitemap on publish. No plugin, no code.
Step 2: Check the File
Open yoursite.com/sitemap.xml in a browser window.
✓ 검문소: You see every published page listed there.
Step 3: Submit It
Add that sitemap URL to Google Search Console.
Resubmit after any large batch of new pages.
✅ 결과: Search engines find new pages in days instead of weeks.
💡 꿀팁: Hide staging pages from the sitemap in page settings. Only pages you want indexed belong in that file.
Framer 전문가 팁 및 단축키
After two years of daily use, these are the tips I give every new designer on my team.
키보드 단축키
| 행동 | 지름길 |
|---|---|
| Insert a frame | F |
| Insert a text layer | T |
| Duplicate selection | Loading... |
| 라이브 미리보기 열기 | Cmd / Ctrl + P |
대부분의 사람들이 놓치는 숨겨진 기능들
- Master Component Library: Keep every component in one central file so updates and version control stay simple across a growing site.
- Plugin manager: Open it from the toolbar to add new tools to the editor without touching code.
- Prototype testing: Go to Prototype > Test Prototype to click through high-fidelity interactions before you publish.
Best Places to Learn Framer
- Framer University: Over 100 practical video lessons taught by an official Framer mentor.
- Official documentation: Covers every part of the tool, with tutorials and guides for each panel.
- 유튜브 채널: Watch a deep pile of video tutorials and real case studies from the team.
- Community forum: The best place to connect with other designers and get answers fast.
- Udemy and Skillshare: Pick a structured course if you want the basics in a fixed order.
- GitHub: Source code and open resources, useful if developers are in the loop.
프레임 제작자가 흔히 저지르는 실수, 피해야 할 것들
Mistake #1: Positioning everything by hand
❌ 틀림: Dragging every element into place with absolute positioning, then watching the layout break on a smaller screen.
✅ 오른쪽: Use Stacks so spacing and alignment update on their own when content changes.
Mistake #2: Designing only for desktop
❌ 틀림: Publishing a site without ever opening the tablet or phone breakpoint.
✅ 오른쪽: Check each breakpoint and adjust text sizes and padding before you publish.
Mistake #3: Editing instances instead of components
❌ 틀림: Changing one instance and expecting the rest to follow.
✅ 오른쪽: Edit the component itself. Instances inherit structure, layout, and shared styles, while a variable lets each instance override just the intended fields without affecting the others.
프레임 문제 해결
Problem: Text overflows on the phone breakpoint
원인: Font sizes are locked to fixed pixel values, so they never scale down.
고치다: Use REM units for font sizes. Type then scales properly across every breakpoint.
Problem: The published site looks different from the canvas
원인: Unpublished changes, or your browser is serving a cached copy.
고치다: Publish again, then hard-refresh the page. Confirm you are viewing the right domain.
Problem: A collaborator cannot edit anything
원인: They were invited as a Viewer rather than an Editor.
고치다: Open Share, change their role to Editor, and send a fresh invitation.
📌 메모: 이러한 방법으로도 문제가 해결되지 않으면 Framer 지원팀에 문의하십시오.
프레이머란 무엇인가요?
프레임 is a website builder where you create layouts on a canvas using frames, layers, and pre-made components — or generate a whole site from a text prompt.
Think of it as a design tool and a web host sharing one window.
이 간단한 개요를 시청하세요:
이 제품에는 다음과 같은 주요 기능이 포함되어 있습니다.
- 자동화된 SEO: Sitemaps, meta tags, and clean markup handled for you
- 설계: Frames, layers, and components on one canvas
- 고급 분석: Traffic and behavior insights built into the editor
- 협업하기: Real-time editing with your whole team
- CMS: Manage repeating content from one collection
- 애니메이션: Scroll effects and hover states without code
- AI 도구: Full landing pages from a text prompt
- 사용자 지정 도메인: Your own web address with SSL handled
- Site & Page Metadata: Control how every page looks in search
- 자동 사이트맵: A live index of every page you publish
It also handles high-fidelity prototypes, real-time collaboration, and reusable symbols, so one project carries an idea from sketch to live site.
자세한 내용은 다음을 참조하세요. 프레임 리뷰.
That single window replaces the usual design-file-then-developer round trip.
프레임 가격
Here is what Framer costs in 2026:
| 계획 | 가격 | 가장 적합한 대상 |
|---|---|---|
| 기초적인 | $10 | 개인 웹사이트 및 포트폴리오 |
| 찬성 | $30 | 프리랜서 and growing business sites |
| 규모 | $100 | Agencies and high-traffic content sites |
무료 체험: Yes — a free plan lets you build and publish on a Framer subdomain.
환불 보장: Not advertised. You can downgrade or cancel at any time.
💰 최고의 가성비: Pro — it covers a custom domain, CMS content, and analytics on one plan.
Framer vs 대안
How does Framer compare? Here is the landscape:
| 도구 | 가장 적합한 대상 | 가격 | 평가 |
|---|---|---|---|
| 프레임 | Design control and animations | 월 10달러 | ⭐ 4.5 |
| 감마 | Decks and quick one-pagers | 월 10달러 | ⭐ 4.6 |
| 튼튼한 | Instant small-business sites | 월 12달러 | ⭐ 4.4 |
| 10웹 | AI-built WordPress sites | 월 10달러 | ⭐ 4.4 |
| 도릭 | Simple no-code 사업 사이트 | 월 18달러 | ⭐ 4.5 |
| 타입드림 | Notion 스타일 페이지 제작 | 월 15달러 | ⭐ 4.3 |
| 비12 | Done-for-you service sites | 월 42달러 | ⭐ 4.2 |
| 짐도 | Tiny shops and local pages | 월 9달러 | ⭐ 4.1 |
빠른 추천:
- 종합 최고상: Framer — design freedom plus real publishing in one tool.
- 최고의 가성비: Jimdo — cheapest way to get a small page online.
- 초보자에게 가장 적합: Durable — answers a few questions and builds the site for you.
- Best for content sites: 10Web — WordPress underneath, so plugins stay available.
🎯 Framer Alternatives
Framer 대안을 찾고 계신가요? 최고의 옵션들을 소개합니다:
- 🚀 감마: Turns a prompt into decks, docs, and simple sites in minutes.
- ⚡ 튼튼한: Builds a working small-business site in about thirty seconds.
- 💰 버터넛 호박: Free AI site 발전기 aimed at first-time founders.
- 🧠 코드디자인: AI layouts you can refine visually, then export.
- 🎨 시터: Visual builder for designers who want fine control.
- 🔧 10웹: AI website building on top of managed WordPress hosting.
- 👶 파인애플 빌더: Guided setup with copy and images written for you.
- 💼 도릭: Clean no-code builder with a generous free tier.
- 📊 타입드림: Notion-style editing for people who hate design tools.
- 🌟 짐도: Budget builder with local business and shop templates.
- 🏢 B12: Done-for-you sites for law, finance, and consulting firms.
- 🔥 애피 파이: Site and app building bundled in one no-code platform.
전체 목록은 다음을 참조하세요. 프레임 대안 가이드.
⚔️ 프레임 비교
Here is how Framer stacks up against each one:
- 프레이머 vs 감마: Gamma wins on speed for decks. Framer wins on any site you plan to keep.
- 프레임 vs 내구성: Durable is faster to launch. Framer gives you real design control afterwards.
- 프레이머 vs 버터넛: Butternut is free and simple. Framer scales past the first landing page.
- Framer vs CodeDesign: CodeDesign exports code. Framer hosts and publishes for you instead.
- 프레임러 vs 시터: Siter feels similar on the canvas. Framer has stronger CMS and animations.
- Framer vs 10Web: 10Web keeps WordPress plugins. Framer skips plugins and the maintenance they bring.
- 프레임러 vs 파인애플 빌더: Pineapple Builder holds your hand more. Framer rewards you for learning it.
- 프레이머 vs 도릭: Dorik is cheaper at the low end. Framer handles complex interactions far better.
- 프레이머 vs 타입드림: Typedream is quicker to write in. Framer is quicker to design in.
- 프레이머 vs 짐도: Jimdo suits tiny local pages. Framer suits brands that care how things look.
- 프레임러 vs B12: B12 does the work for you. Framer keeps the work in your hands.
- 프레이머 vs 애피파이: Appy Pie also builds apps. Framer stays focused on websites and does them better.
지금 바로 Framer를 사용해 보세요
여러분은 Framer의 모든 주요 기능을 사용하는 방법을 배웠습니다.
- ✅ 자동 SEO
- ✅ 디자인
- ✅ 고급 분석
- ✅ 협업하기
- ✅ CMS
- ✅ 애니메이션
- ✅ AI 도구
- ✅ 맞춤 도메인
- ✅ Site & Page Metadata
- ✅ Automatic Sitemap
다음 단계: open a new project and try one feature today.
Most people start with Design, because frames make everything else click.
5분도 채 걸리지 않습니다.
자주 묻는 질문
Framer는 무엇에 사용되나요?
Framer is used to design, prototype, and publish responsive websites in one browser tab. Designers build on a canvas with frames and components, then publish live without a developer handoff.
Framer는 웹사이트 제작에 무료로 사용할 수 있나요?
Yes. A free plan lets you build and publish a site on a Framer subdomain. Paid plans start at $10 and add a custom domain, CMS content, and more pages.
Framer가 Figma보다 더 나은가요?
They do different jobs. Figma is better for static design files and team libraries. Framer is better when you want that design to become a real, published website.
Framer로 웹사이트를 만들 수 있나요?
Yes. Framer handles design, CMS content, animations, metadata, and hosting. You publish directly from the editor, so no separate developer or hosting setup is needed.
Framer의 월 이용료는 얼마인가요?
Framer pricing runs $10 per month for Basic, $30 for Pro, and $100 for Scale. A free tier is available if you only need a subdomain site.
English 
Spanish 
Chinese 
German 
French 
Arabic 
Russian 
Portuguese 
Japanese 
Korean 
Italian 
Turkish 
Dutch 
Polish 
Indonesian 
Thai 
Vietnamese 