Framer: 프로토타입에서 프로덕션까지
Framer가 프로토타이핑 라이브러리에서 노코드 웹사이트 빌더로 진화한 방법: 비주얼 브레이크포인트, 컴포넌트 배리언트, CMS 아키텍처, AI 와이어프레이밍.
Framer: 프로토타입에서 프로덕션까지
"디자인과 개발 사이의 간극은 존재해서는 안 됩니다." — Koen Bok, Framer 공동 창립자
Framer는 디자인 도구의 완전한 진화를 대표합니다: JavaScript 프로토타이핑 라이브러리(2014)에서 비주얼 IDE(Framer X, 2018)를 거쳐 완전한 노코드 웹사이트 빌더(2022+)로 발전했습니다. 이 여정은 핵심 철학을 유지하면서 사용자 요구에 적응하는 방법을 보여줍니다.
Framer가 중요한 이유
Framer는 "핸드오프 문제"를 완전히 제거함으로써 해결했습니다. 디자이너가 목업을 만들고 개발자가 다시 구축하는 대신, Framer는 프로덕션 준비가 완료된 웹사이트를 직접 출력합니다.
주요 성과: - 디자인-코드 간극을 완전히 해소 - 반응형 디자인을 시각적이고 직관적으로 구현 - 활발한 템플릿 마켓플레이스 생태계 구축 - 디자인 원칙을 포기하지 않으면서 AI 통합 - 2025년 8월 20억 달러 기업가치로 1억 달러 투자 유치
핵심 요점
- 미션을 버리지 않고 피봇하기 - Framer는 CoffeeScript 라이브러리에서 React IDE를 거쳐 노코드 빌더로 전환했지만, 핵심 미션은 변하지 않았습니다: 디자인-개발 간극 제거
- 기술 개념을 시각화하기 - 반응형 브레이크포인트, flexbox, CMS 스키마는 드래그 가능한 핸들과 비주얼 에디터로 표현될 때 직관적이 됩니다
- AI는 발판이지 해답이 아님 - Wireframer는 빈 캔버스 불안을 넘기기 위한 구조를 생성하고, 인간이 창의성과 정교함을 더합니다
- 포크 대신 속성 컨트롤 - 변형을 위해 컴포넌트를 복제하는 대신, 단일 소스를 유지하면서 구성을 변경하는 컨트롤을 노출합니다
- 프로덕션 출력이 디자인을 검증 - 디자인 도구가 프로덕션 코드를 출력하면, "내가 디자인한 것과 다르다"는 핸드오프 순간이 사라집니다
진화의 이야기
Framer의 진화를 이해하면 성공적인 제품이 어떻게 적응하는지 알 수 있습니다:
2014 (Framer.js) 2018 (Framer X) 2022+ (Framer Sites)
┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│ │ │ │ │ │
│ Code-First │ → │ Visual + Code │ → │ Visual-First │
│ Prototyping │ │ React Components│ │ Production │
│ │ │ │ │ │
│ • CoffeeScript │ │ • TypeScript │ │ • No code needed │
│ • Animation lib │ │ • IDE-like │ │ • Built-in CMS │
│ • Designer tools │ │ • Component sys │ │ • AI generation │
│ │ │ │ │ │
└──────────────────┘ └──────────────────┘ └──────────────────┘
Audience: Designers → Design Engineers → Everyone
who code who design who needs websites
핵심 통찰: 각 피봇은 핵심 미션을 유지하면서 대상 사용자를 확장했습니다: 디자인과 프로덕션 사이의 간극 제거.
패턴 라이브러리
1. 비주얼 브레이크포인트 시스템
Framer는 반응형 디자인을 코드에서 드래그 핸들로 변환하여, 전통적으로 기술적인 개념에 획기적인 UX를 제공합니다.
전통적인 CSS 접근 방식:
/* Developer must imagine each breakpoint */
@media (max-width: 768px) {
.hero { flex-direction: column; }
}
@media (max-width: 480px) {
.hero { padding: 16px; }
}
Framer의 비주얼 접근 방식:
┌─────────────────────────────────────────────────────────────────────────┐
│ Breakpoints │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Desktop (1440) │ Tablet (768) │ Mobile (375) │ │
│ │ ────────────────────────┬─────────────────────┬──────────────────── │ │
│ │ ◀ drag ▶ ◀ drag ▶ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ Preview │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Hero Section │ ← Layout updates │
│ │ ──────────── │ in real-time │
│ │ │ as you drag │
│ │ [Button] │ │
│ │ │ │
│ └──────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────┘
적용된 디자인 원칙: - 추상적 설정보다 직접 조작 - 실시간 피드백으로 추측 제거 - 시각적 표현이 멘탈 모델과 일치
구현 패턴:
// Breakpoint data structure
const breakpoints = [
{ name: 'Desktop', width: 1440, isDefault: true },
{ name: 'Tablet', width: 768 },
{ name: 'Mobile', width: 375 },
];
// Component stores styles per breakpoint
const componentStyles = {
base: { display: 'flex', gap: 24 },
overrides: {
768: { flexDirection: 'column', gap: 16 },
375: { padding: 16 },
}
};
// Merge styles for current width
function getStylesForWidth(width) {
let styles = { ...componentStyles.base };
for (const [breakpoint, overrides] of Object.entries(componentStyles.overrides)) {
if (width <= parseInt(breakpoint)) {
styles = { ...styles, ...overrides };
}
}
return styles;
}
2. Primary/Instance 컴포넌트 패턴
Figma처럼 Framer도 primary-instance 모델을 사용합니다. 하지만 Framer는 인터랙티브 Variants와 속성 컨트롤로 이를 확장합니다.
┌─ Primary Component ─────────────────────────────────────────────────┐
│ │
│ Component Canvas │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Default State Hover State Pressed State │ │
│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │
│ │ │ Button │ → │ Button │ → │ Button │ │ │
│ │ │ bg: #3B82F6 │ │ bg: #2563EB │ │ bg: #1D4ED8 │ │ │
│ │ │ scale: 1 │ │ scale: 1.02 │ │ scale: 0.98 │ │ │
│ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │
│ │ │ │
│ │ Transitions: spring(stiffness: 500, damping: 30) │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ Property Controls │
│ ├─ Label: [text input] │
│ ├─ Variant: [default ▼] [hover] [pressed] │
│ ├─ Size: [small] [medium ●] [large] │
│ └─ Icon: [none ▼] │
│ │
└─────────────────────────────────────────────────────────────────────┘
↓ Instances inherit all variants
┌─ Page Canvas ───────────────────────────────────────────────────────┐
│ │
│ [Button Instance 1] [Button Instance 2] [Button Instance 3] │
│ Label: "Submit" Label: "Cancel" Label: "Learn More" │
│ Size: medium Size: small Size: large │
│ Icon: check Icon: none Icon: arrow │
│ │
└─────────────────────────────────────────────────────────────────────┘
Property Controls API:
// Framer component with property controls
import { addPropertyControls, ControlType } from "framer"
function Button({ label, size, icon }) {
const styles = sizeStyles[size];
return (
<motion.button
className="button"
style={styles}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
{icon && <Icon name={icon} />}
{label}
</motion.button>
);
}
// These appear in the right panel when component is selected
addPropertyControls(Button, {
label: {
type: ControlType.String,
title: "Label",
defaultValue: "Button",
},
size: {
type: ControlType.Enum,
title: "Size",
options: ["small", "medium", "large"],
defaultValue: "medium",
},
icon: {
type: ControlType.Enum,
title: "Icon",
options: ["none", "check", "arrow", "plus"],
defaultValue: "none",
},
});
핵심 인사이트: Property controls는 컴포넌트를 포크하지 않고도 재사용 가능하게 만듭니다. 컴포넌트가 아닌 속성을 변경하세요.
3. 내장 CMS 아키텍처
Framer의 CMS는 콘텐츠를 시각적 컴포넌트로 흘러가는 구조화된 데이터로 취급합니다.
┌─ CMS Collection: Blog Posts ────────────────────────────────────────┐
│ │
│ Schema │
│ ├─ title: String (required) │
│ ├─ slug: Slug (auto-generated from title) │
│ ├─ author: Reference → Authors │
│ ├─ publishDate: Date │
│ ├─ coverImage: Image │
│ ├─ content: Rich Text │
│ └─ tags: Multi-reference → Tags │
│ │
│ Entries │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ Title │ Author │ Date │ Status │ │
│ ├────────────────────┼────────────┼────────────┼──────────────────┤ │
│ │ Design Systems │ @jane │ Jan 15 │ ● Published │ │
│ │ Component Patterns │ @john │ Jan 12 │ ○ Draft │ │
│ │ Animation Guide │ @jane │ Jan 10 │ ● Published │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘
↓ CMS 데이터가 컴포넌트로 흘러감
┌─ Collection Page Template ──────────────────────────────────────────┐
│ │
│ ┌─ Blog Card (connected to CMS) ─────────────────────────────────┐ │
│ │ │ │
│ │ ┌──────────────┐ │ │
│ │ │ {coverImage} │ {title} │ │
│ │ │ │ {author.name} · {publishDate} │ │
│ │ │ │ │ │
│ │ └──────────────┘ {tags.map(tag => <Tag />)} │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ 이 카드는 각 CMS 항목마다 반복됨 │
│ │
└─────────────────────────────────────────────────────────────────────┘
디자인 원칙: - 콘텐츠와 프레젠테이션의 분리 - 시각적 데이터 바인딩 (코드 불필요) - 자동 SEO (CMS 필드에서 메타 태그 생성)
4. AI 지원 디자인 (Wireframer)
Framer의 2025년 AI 기능은 세련된 AI 통합을 보여줍니다: AI가 시작점을 생성하고, 사람이 다듬습니다.
┌─ Wireframer ────────────────────────────────────────────────────────┐
│ │
│ Prompt: "Landing page for a SaaS product with pricing table" │
│ │
│ [Generate] │
│ │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Generated Layout (editable wireframe) │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ ╔══════════════════════════════════════════════════════════╗ │ │
│ │ ║ [Logo] Features Pricing About [CTA] ║ │ │
│ │ ╚══════════════════════════════════════════════════════════╝ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────────┐ │ │
│ │ │ Hero Section │ │ │
│ │ │ [Headline placeholder] │ │ │
│ │ │ [Subhead placeholder] │ │ │
│ │ │ [CTA Button] [Secondary] │ │ │
│ │ └────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ Starter │ │ Pro ★ │ │ Enterprise │ │ │
│ │ │ $9/mo │ │ $29/mo │ │ Custom │ │ │
│ │ │ ────── │ │ ────── │ │ ────── │ │ │
│ │ │ • Feature │ │ • Feature │ │ • Feature │ │ │
│ │ │ • Feature │ │ • Feature │ │ • Feature │ │ │
│ │ │ [Select] │ │ [Select] │ │ [Contact] │ │ │
│ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ AI가 구조를 제공하고, 사람이 스타일을 입힘 │
│ │
└─────────────────────────────────────────────────────────────────────┘
AI 철학: - 최종 디자인이 아닌 반응형 레이아웃 생성 - 출력물은 완전히 편집 가능 (블랙박스 아님) - 빈 캔버스 불안감 해소, 구조에서 시작 - AI 스캐폴드에 인간의 창의성 적용
5. Auto-Layout 시스템
Framer의 auto-layout은 Figma와 동일하지만 즉시 프로덕션에 사용 가능합니다.
/* 디자이너가 시각적으로 설정하는 것 */
.auto-layout {
/* Direction */
display: flex;
flex-direction: row; /* or column */
/* Spacing */
gap: 16px; /* uniform */
/* or gap: 16px 24px; for row/column */
/* Alignment */
justify-content: flex-start;
align-items: center;
/* Distribution */
/* "Packed" = flex-start */
/* "Space between" = space-between */
/* "Space around" = space-around */
/* Padding (independent per side) */
padding: 24px 32px 24px 32px;
}
/* Children behavior */
.auto-layout > .child {
/* "Fill" = flex: 1 */
/* "Hug" = flex: 0 0 auto */
/* "Fixed" = width: 200px */
}
비주얼 에디터 변환:
┌─ Auto-Layout Panel ─────────────────────────────────────────────────┐
│ │
│ Direction ┌───┐ ┌───┐ │
│ │ → │ │ ↓ │ │
│ └───┘ └───┘ │
│ │
│ Alignment ┌───────────────┐ │
│ │ ⬜ ⬜ ⬜ │ (9-point grid) │
│ │ ⬜ ⬛ ⬜ │ │
│ │ ⬜ ⬜ ⬜ │ │
│ └───────────────┘ │
│ │
│ Gap [16] px │
│ │
│ Padding [24] [32] [24] [32] (top, right, bottom, left) │
│ │
│ Distribution [Packed ▼] │
│ │
└─────────────────────────────────────────────────────────────────────┘
비주얼 디자인 시스템
캔버스 크롬
:root {
/* Canvas background */
--canvas-bg: #1E1E1E;
--canvas-grid: rgba(255, 255, 255, 0.03);
/* Selection */
--selection-color: #0099FF;
--selection-handle: #FFFFFF;
/* Panels */
--panel-bg: #2D2D2D;
--panel-border: rgba(255, 255, 255, 0.08);
/* Text */
--text-primary: #FFFFFF;
--text-secondary: #9B9B9B;
--text-placeholder: #6B6B6B;
/* Accents */
--accent-primary: #0099FF;
--accent-success: #00D084;
--accent-warning: #FFBB00;
--accent-error: #FF5555;
}
타이포그래피 (UI)
:root {
--font-ui: 'Inter', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Sizes */
--text-xxs: 10px;
--text-xs: 11px;
--text-sm: 12px;
--text-base: 13px;
--text-lg: 14px;
/* Panel labels */
--label-size: var(--text-xs);
--label-weight: 600;
--label-color: var(--text-secondary);
--label-spacing: 0.02em;
}
.panel-label {
font-family: var(--font-ui);
font-size: var(--label-size);
font-weight: var(--label-weight);
color: var(--label-color);
letter-spacing: var(--label-spacing);
text-transform: uppercase;
}
애니메이션 패턴
패널 트랜지션
/* Slide-in panels */
.panel {
transform: translateX(100%);
opacity: 0;
transition:
transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
opacity 150ms ease-out;
}
.panel.open {
transform: translateX(0);
opacity: 1;
}
선택 피드백
/* Selection box animation */
.selection-box {
border: 1px solid var(--selection-color);
background: rgba(0, 153, 255, 0.1);
animation: selection-appear 100ms ease-out;
}
@keyframes selection-appear {
from {
opacity: 0;
transform: scale(0.98);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Resize handles */
.resize-handle {
width: 8px;
height: 8px;
background: var(--selection-handle);
border: 1px solid var(--selection-color);
border-radius: 1px;
transition: transform 100ms ease;
}
.resize-handle:hover {
transform: scale(1.3);
}
우리 작업을 위한 교훈
1. 미션을 버리지 않고 피벗하기
Framer는 코드에서 비주얼로 전환했지만, 미션은 동일하게 유지되었습니다: 디자인과 개발 간의 격차 해소.
2. 기술적 개념을 시각화하기
브레이크포인트, flexbox, CMS 스키마는 시각적으로 표현될 때 직관적으로 이해됩니다.
3. AI는 솔루션이 아닌 스캐폴드로
Wireframer는 구조를 생성하고, 인간이 창의성을 더합니다. AI는 주도권을 빼앗지 않으면서 빈 캔버스에 대한 불안을 해소합니다.
4. 포킹보다 Property Controls
컴포넌트를 복제하는 대신, 컨트롤을 노출하세요. 동일한 컴포넌트, 다른 구성.
5. 프로덕션 출력이 디자인을 검증한다
디자인 도구가 프로덕션 코드를 출력하면, "내가 디자인한 것과 다르다"라는 순간이 없습니다.
자주 묻는 질문
Framer는 어떻게 프로토타이핑 라이브러리에서 웹사이트 빌더로 진화했나요?
Framer는 2014년에 코딩하는 디자이너를 위한 CoffeeScript 애니메이션 라이브러리로 시작했습니다. 2018년에 Framer X는 React 컴포넌트 지원이 포함된 비주얼 IDE를 추가하여 디자인 엔지니어를 타겟으로 했습니다. 2022년에 Framer는 내장 CMS와 AI 기능을 갖춘 노코드 웹사이트 빌딩으로 피벗했습니다. 각 진화는 핵심 미션을 유지하면서 대상 사용자를 확장했습니다: 디자인과 프로덕션 사이의 격차 해소.
Framer의 시각적 브레이크포인트 시스템은 CSS 미디어 쿼리와 무엇이 다른가요?
기존 반응형 디자인은 코드를 작성하면서 각 브레이크포인트에서 레이아웃이 어떻게 보일지 상상해야 합니다. Framer는 브레이크포인트 핸들을 드래그할 때 업데이트되는 실시간 미리보기를 보여줍니다. 모든 너비에서 디자인이 어떻게 반응하는지 정확히 볼 수 있습니다. 시각적 표현은 디자이너가 반응형 동작에 대해 생각하는 방식과 일치하여, 브레이크포인트를 추상적이지 않고 직관적으로 만듭니다.
Framer property controls는 어떻게 작동하나요?
Property controls는 컴포넌트가 선택될 때 오른쪽 패널에서 구성 가능한 옵션을 노출합니다. 각 변형에 대해 버튼 컴포넌트를 복제하는 대신, 레이블, 크기, 아이콘, 변형에 대한 컨트롤을 정의합니다. 디자이너는 코드를 건드리지 않고 인스턴스별로 이러한 속성을 조정합니다. 컴포넌트는 무제한 구성을 지원하면서 단일 소스 오브 트루스로 유지됩니다.
Framer의 CMS는 WordPress나 다른 CMS와 어떻게 비교되나요?
Framer의 CMS는 비주얼 우선이며 디자인 도구에 직접 통합되어 있습니다. 스키마(제목, 작성자, 날짜, 이미지)를 정의하면 콘텐츠가 시각적 데이터 바인딩을 통해 페이지 템플릿으로 흘러갑니다. 별도의 관리자 인터페이스가 없습니다—콘텐츠 편집은 디자인과 동일한 환경에서 이루어집니다. 자동 생성 SEO, 반응형 이미지, 슬러그가 자동으로 처리됩니다.
Framer AI (Wireframer)는 실제로 무엇을 생성하나요?
Wireframer는 완성된 디자인이 아닌 반응형 레이아웃 구조를 생성합니다. "가격 정책이 있는 SaaS 랜딩 페이지"와 같은 프롬프트에서, 적절한 auto-layout과 반응형 브레이크포인트를 사용하여 네비게이션, 히어로 섹션, 가격 카드가 있는 와이어프레임을 생성합니다. 출력은 완전히 편집 가능합니다—모든 요소를 리스타일링, 이동 또는 교체할 수 있습니다. AI는 스캐폴드를 제공하고, 인간이 스타일과 콘텐츠를 추가합니다.