Framer로 개발 없이 뚝딱 랜딩페이지 배포하기

팀스파르타의 Framer 도입 생존기

수많은 사람의 손을 거쳐야 했던 랜딩 페이지

- "커리큘럼 내용을 보강해서 제품을 매력적으로 보이게 하고 싶어요."
- "교육과정 내용이 업데이트 되었는데, 랜딩에 새로운 Div를 추가할 수 있을까요?"
- "Hero 타이틀 카피 실험으로 A/B 테스트를 하고 싶어요."

팀스파르타의 잠재 고객을 전환으로 이끄는 가장 중요한 접점은 바로 랜딩 페이지예요.

하지만 다수의 랜딩 페이지가 스쿼드 내에서 기획-개발-퍼블리싱 협업을 통해 제작되었기 때문에, 마케팅 인사이트에 기반한 빠른 실험과 반복이 어려웠어요. 그래서 오늘은 디자이너와 개발자가 프로덕트와 사용자 경험 개선에 더 집중하기 위해, Framer 활용해 랜딩 페이지 제작을 제품 조직 없이도 가능한 환경을 만든 이야기를 공유해 드릴게요.

---

랜딩 페이지, 왜 지금 손봐야 할까요?

팀스파르타에서 랜딩 페이지는 고객이 결제를 결정하는 중요한 페이지로, 광고 소재와 함께 고객의 반응에 빠르게 대응해야 했어요. 그렇기에 ‘제작 → 배포 → 수정’의 사이클이 쉴 새 없이 돌아가야 하죠. 하지만 현실은 이 사이클의 속도가 붙지 않았어요. 간단한 텍스트 수정 하나를 위해서도 기획-개발-퍼블리싱 협업을 통해 모두 움직여야 했기 때문에 비효율이 발생할 수밖에 없었어요.

프로덕트 디자이너들은 랜딩 페이지 작업뿐만 아니라 프로덕트 UX 개선을 병행하고 있기 때문에 일정 조율하는 데 어려움을 겪었어요. 그뿐만 아니라 랜딩페이지는 마케팅 소재와의 연결성이 중요하기에 브랜드 콘텐츠 팀과의 소통도 잘 이루어져야 했었어요. 하지만 이러한 문제점으로 스쿼드는 해결해야 할 프로덕트 문제에 충분한 시간을 투자하지 못했고, 브랜드 콘텐츠 팀 역시 마케팅 인사이트를 반영하는 데 지속적으로 딜레이가 발생하고 있었어요.

그래서 이번 목표로 “2025년까지, 개발자와 디자이너의 손을 전혀 빌리지 않고 브랜드 콘텐츠 팀이 100% 스스로 랜딩 페이지를 운영하게 만들어보자.”로 설정하게 되었어요.

왜 하필 'Framer'였을까요?

사실 과거에 같은 문제를 해결하기 위한 랜딩 자동화 시스템, ‘랜딩 서브웨이’를 자체 개발했던 적이 있었어요. 디자인부터 퍼블리싱까지 한 번에 지원하는 Figma Sites 또한 도입을 시도해 보기도 했으나, 두 방법 모두 한계는 명확했어요.

- SEO(검색 최적화)가 안 됨: 검색 결과에 노출이 안 되니 마케팅 효율이 떨어짐
- UTM 유실: 고객이 어디서 왔는지 추적이 끊김
- 디자인 제약: 정해진 레이아웃 밖으로 벗어날 수 없음

그렇기에 Framer를 선택한 이유는 세 가지였어요.

2025년 5월 기준 Framer와 Figma Site 비교(CMS, Code Block, Custom Code는 Figma Site에서 현재 업데이트되어 지원)

어느 누구도 몰라서 못 쓰는 일이 없도록

새로운 프로그램을 도입할 땐 언제나 학습 비용이 발생해요. Framer 도입에 앞서 가장 중요하게 생각했던 부분은 ‘적극적인 전파로 학습 비용을 최대한 절감하는 것’이었어요. 새로운 도구를 사용하기로 한 이상 기존 툴에 익숙해져 있던 동료들이 빠르게 배우고, 익혀서 실무에 적용할 수 있도록 했습니다.

먼저, Framer 사용법과 제작 가이드를 공유 세션을 통해 전달하며 신규 제작자와 협업자들의 시행착오를 줄일 수 있는 기반을 마련하는 데 집중했어요.

Notion Framer 사용 가이드 제공 및 사내 Framer 교육

두 번째로 템플릿 내 로그 코드 및 샘플 CTA 컴포넌트를 기본으로 제공해 줌으로써 반복 작업을 단축하는 데 초점을 맞췄어요. 마치 레고 블록을 조립하듯 끌어다 놓기만 하면 되도록 말이죠.

마지막으로, 적극적인 커뮤니케이션을 유지하는 데 집중했어요. 슬랙 채널을 통해 제작 관련 이슈를 실시간으로 공유하고 해결했고, 문제가 생기면 숨기지 않고 투명하게 나누며 협업 문화를 만들어갔어요. 이 과정에서 '우리가 함께 시스템을 만들고 있다'는 신뢰가 쌓였고, 그 신뢰가 프로젝트를 더 발전시키는 원동력이 되었어요.

그렇지만, 우리가 놓친 것들

돌이켜보면 아쉬운 점도 분명했는데요, 초기에 KPI를 미리 설정하지 못해 숫자로 증명하지 못했다는 것이에요. 개발 요청이 줄어든 건 체감했지만, 정확히 몇 건이 줄었는지, 제작 시간이 얼마나 단축됐는지, 실험 주기가 어떻게 바뀌었는지 KPI를 미리 설정하지 않았어요. 성과를 보고할 때 "많이 좋아졌어요"보다 "50% 줄었어요"가 훨씬 설득력 있는데 말이죠.

또한 실제 핵심 사용자와 충분히 이야기하지 않아 Framer를 가장 많이 쓸 브랜드 콘텐츠 팀과 초반에 충분히 조율하지 못했어요. 이에 따라 생각했던 플로우와 브랜드 콘텐츠 팀과 실제로 일하는 방식 사이에 간극이 있었고, 그 때문에 중간에 프로세스를 다시 조정해야 했어요. 그렇지만 이러한 시행착오는 다음 스텝을 위한 중요한 거름이 되었어요.

개발 요청, 실제로 얼마나 줄었을까요?

Framer 도입의 가장 직접적인 성과는 개발 요청 건수 감소입니다. 예전에는 랜딩 페이지 만들 때마다, 수정할 때마다 제품실에 요청했지만, 이제는 브랜드 콘텐츠 팀이 스스로 해결하며 속도가 더 빨라졌어요. 그리고 스스로 해결함으로써 마케팅 소재에 기반한 전환 실험을 랜딩 페이지에서 즉시 반영할 수 있게 되어 긴밀하게 실험할 수 있게 되었어요. 프로덕트 디자이너들은 제품 사용성을 고도화하는 일에 집중할 수 있게 되면서 UX 개선 업무의 몰입도가 높아졌어요.

비록 시작 전에 명확한 목표 수치를 정하지 못한 건 아쉽지만, 변화는 확실했어요. 개발팀은 랜딩 페이지 수정 요청에서 벗어나 프로덕트 개선에 집중할 수 있게 되었고, 디자이너는 반복 작업 대신 사용자 경험 설계에 시간을 쓸 수 있게 되었어요.

진짜 디자인은 시스템을 만드는 것

프로덕트 디자이너로서 이번 Framer 도입 프로젝트를 진행하며 깨달은 건, 좋은 디자인은 예쁜 화면을 만드는 게 아니라 사람들이 일하는 방식을 바꾸는 것이라는 사실을요.

팀스파르타는 단순히 랜딩 페이지 제작 툴을 바꾼 게 아니라, 조직이 움직이는 방식을 다시 설계했어요. 디자이너와 개발자가 반복 작업에서 벗어나 전략적 문제에 집중할 수 있도록, 브랜드 콘텐츠 팀이 스스로 실험할 수 있도록, 그래서 모두가 자기 역량을 제대로 발휘할 수 있도록.

2025년, 개발 리소스 '제로'라는 목표를 향해 우리는 계속 나아가고 있어요. 완벽하지 않지만, 빠르게 배우고 고치면서요.

✏ Writer: 윤여준 (Product Designer Lead), 고우정 (Product Designer Intern)