본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, Framer 관련 해외 아티클을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

오늘 소개할 이야기는 Razorpay가 Framer를 도입하면서 디자이너와 비디자이너 모두가 페이지를 효율적으로 제작할 수 있게 되었고, 그 결과 생산성이 10배나 향상된 사례입니다.

인도에서 빠르게 성장 중인 핀테크 기업 Razorpay의 웹사이트는 수백만 명이 방문하는 핵심 마케팅 자산이었지만, 랜딩 페이지를 제작하는 데 2개월씩 걸리는 비효율적인 구조였습니다. 빠르게 반복하고 실험할 수 있는 체계가 절실했습니다.

문제는 무엇이었을까?

랜딩 페이지 제작이 지연된 이유는 다음과 같았습니다.

• 지나친 최적화: 방문자 수가 많다 보니 의사결정 하나하나를 반복 검토하며 시간을 낭비했습니다.

• 많은 이해관계자: 마케팅, 디자인, 제품, 개발팀 등 다양한 팀이 관여해 피드백 과정이 길어졌습니다.

• 중복 작업: 커뮤니케이션이 부족해 유사한 디자인을 여러 번 새로 만드는 일이 반복됐습니다.

디자이너, 작가, 개발자가 모두 협업해야 했고, 이로 인해 실행 속도가 느려졌습니다. 브랜드 일관성과 높은 품질은 유지하되, 빠른 실행이 가능한 시스템이 필요했습니다. 이 문제를 해결하기 위해 커스텀 솔루션 개발 대신 Framer 같은 노코드 도구를 고려하기 시작했습니다.

Razorpay의 문제 해결 과정

정보 구조의 패턴 파악

Razorpay의 기존 랜딩 페이지들을 점검하며 섹션 구조(히어로, 가격, 후기, 제품 설명 등)의 반복 패턴을 식별했습니다. 경쟁사의 페이지도 함께 분석해 산업 전반의 트렌드도 확인하고 이런 분석을 기반으로 반복 가능한 템플릿 설계 방향을 잡을 수 있었습니다.

확장 가능한 디자인 시스템 구성

• 시스템 구성 요소 정의
  Color & Type Styles → 컴포넌트 → 섹션 → 전체 페이지 계층으로 구성요소를 나누고 비교했습니다. 결과적으로, 컬러와 타이포는 수정 불가능한 토큰으로 고정하고, 컴포넌트와 섹션을 기본 단위로 사용하는 구조로 결정했습니다.

• 도구 선택: Framer
  Webflow나 WordPress도 테스트했지만, 디자이너뿐만 아니라 마케터도 쉽게 다룰 수 있는 프레이머가 최적이었습니다. 기술 제어가 필요한 경우엔 Webflow가 더 유리했지만, 빠른 반복과 효율적인 워크플로우에서는 Framer가 앞섰습니다.
  
  

Framer 안에서의 디자인 시스템

• 컬러와 텍스트 스타일: 40개의 텍스트 스타일과 120개 이상의 색상 스타일을 정의했습니다.

• 파일 및 폴더 구조: 80명의 디자이너가 동시에 작업하는 환경에서, 비즈니스별 폴더, 실험/라이브 프로젝트 구분, 중앙 디자인 시스템 파일 등을 운영했습니다.

• 그리드 & 반응형 세팅: 1200px(데스크톱), 810px(태블릿), 360px(모바일) 세 가지 브레이크포인트를 정해 전반적인 반응형 일관성을 확보했습니다.

템플릿 설계 방식

• 컴포넌트 템플릿 (예: 고객 후기를 위한 카드에서 로고 또는 사진을 선택적으로 노출)

• 섹션 템플릿: 제품 정보, 리드 수집 등 반복 요소를 자동 반응형 기능으로 구성하여 총 40개 이상의 섹션 템플릿을 사전에 구축하였으며, 중앙의 5인 디자인팀이 템플릿을 사전 승인하고 가이드라인을 유지함으로써, 모든 페이지가 해당 템플릿을 기반으로 제작되도록 하여 브랜드의 일관성을 안정적으로 유지했습니다.

Razorpay의 Framer 도입 이후의 변화

• 실행 속도 7배 향상: Figma-to-dev 프로세스를 없애고 개발자 없이도 즉시 퍼블리싱 가능

• 창의성 향상: 반복 업무에서 벗어나 인터랙티브한 실험에 더 많은 시간 투자

• 전환율 25% 증가: 빠른 반복과 실험을 통해 성과 개선

• 위기 대응력 향상: 프리셋 템플릿 덕분에 하루 안에 페이지 오픈 가능

도전과 해결 과제

1. 컬러 / 타입 스타일의 중앙 라이브러리 미지원

Framer에서는 Figma처럼 완전한 의미의 "공통 스타일 라이브러리(Shared Library)"를 프로젝트 간에 자동 동기화하는 기능은 아직 제공되지 않습니다.

• 현실적인 사용 방법: Razorpay 사례처럼, 컬러와 텍스트 스타일만 정의해둔 "스타일 전용 템플릿 프로젝트"를 만들어두고, 새 프로젝트를 시작할 때 이 파일을 복제해서 사용하는 방식이 일반적입니다.

• 단점: 이후 원본 스타일이 변경되더라도, 복제된 프로젝트에는 자동 반영되지 않아 수동으로 일관성을 유지해야 한다는 점입니다.
  
  

2. 템플릿화가 어려운 레이아웃

Framer는 일반적인 섹션 템플릿이나 반응형 컴포넌트 구성에는 매우 편리하지만, 복잡한 구조는 여전히 템플릿화에 제약이 있습니다.(예: 탭 구조)

• 탭, 아코디언, 동적 필터링 구조 등은 단순 복제형 컴포넌트로는 유연하게 대응하기 어렵습니다.

• 이 때문에 Razorpay도 탭 레이아웃은 미리 만들어둔 것을 복사해서 쓰고, 수정 시에는 가이드라인을 따르는 방식으로 운영했습니다.

아티클 원문 작성자: Apoorva Agrawal
작성일: 2025년 2월 11일

본 글은 Framer 관련 아티클 “Hacking Growth & Scalable Web Design with Framer: A Razorpay Case Study”의 내용을 바탕으로 일부 문장은 원문에서 직접 인용하였으며, 이외의 내용은 Framer의 기능에 대한 설명과 해석을 중심으로 재구성하였습니다.