Team Stories
디자이너가 직접 퍼블리싱까지: Figma에서 Framer로, 웹사이트 개편 실전 후기
2025. 7. 4.
작성자: 샘송 | 디자인팀 리드
본 글은 수호아이오 디자인팀 리드 샘송님이 작성해 주셨습니다.
1. 들어가며
안녕하세요. 수호아이오 프로덕트 디자이너 Samsong입니다.
IT 업계에서는 늘 한정된 시간과 리소스 안에서 최대의 결과를 만들어내야 하는 상황이 반복되곤 합니다. 여러 프로젝트가 동시에 진행되는 바쁜 환경 속에서, 어떻게 하면 더 효율적으로 일할 수 있을지에 대한 고민은 누구에게나 익숙한 과제일 텐데요.
이번 수호아이오 웹사이트 개편 프로젝트를 진행하면서 제가 직접 경험한 업무 효율 개선의 한 가지 사례를 공유드리고자 합니다. 이번 프로젝트에서는 기존의 피그마(Figma) 기반 협업 방식에서 벗어나, 노코드 웹 빌더인 프레이머(Framer)를 새롭게 도입해보았습니다.
프레이머에서 피그마와는 또 다른 높은 생산성과 자율성, 그리고 명확한 한계와 목적성의 차이를 함께 경험할 수 있었습니다. 이 글에서 Framer와 Figma의 장단점을 디자이너 입장에서 비교해보고, 각 툴이 실제 프로젝트에서 어떤 상황에 더 적합했는지, 그리고 실전에서 얻은 인사이트와 활용 포인트들을 정리해 공유하고자 합니다.
2. 업무 방식 변화에 대한 필요성을 느끼다
최근 저는 수호아이오의 웹사이트 개편 프로젝트를 진행하였습니다. 이번 웹사이트 개편은 단순한 리뉴얼이 아니었습니다. 업계의 빠른 변화 속에서, 기업의 새로운 사업 방향성과 정체성을 시각적으로 재정의하고, 동시에 블록체인 핀테크 산업의 선두주자로서 도약을 위한 전략적 수단으로 작용해야 했기 때문에, 어느 때보다 높은 완성도와 속도가 요구되었습니다.
📌 이에 따라, 다음과 같은 세 가지 목표를 설정하게 되었습니다.
최소한의 리소스 투입
신속하면서 퀄리티 있는 디자인 반영
런칭 이후의 효율적인 운영
기존의 피그마 + 개발자 협업 구조로는 이 세 가지 목표를 동시에 달성하기 어려웠습니다. 그래서 디자인부터 퍼블리싱까지 디자이너가 주도하는 구조로 전환할 필요성이 있었고, 그 선택이 바로 Framer의 도입이었습니다.
3. 같은 기간, 다른 결과 — 두 번의 웹사이트 개편 경험에서 느낀 것
저는 지금까지 수호아이오의 웹사이트 개편 프로젝트에 두번 참여 하였습니다. 첫 번째는 Figma를 중심으로 기획과 디자인을 진행하고, 개발자와 협업을 통해 구현한 방식이었고, 두 번째는 Framer를 도입해 디자인부터 퍼블리싱까지 디자이너가 직접 주도한 방식이었습니다. 이 두 가지 접근법은 방식도 다르고, 결과도 분명히 달랐습니다. 가장 큰 차이는, 같은 일정 안에서 만들어낸 결과물의 퀄리티와 퍼포먼스였습니다.
1차 개편: Figma 기반 협업의 한계
처음 개편 당시에는 익숙한 방식대로 Figma를 활용했습니다.
기획과 디자인을 진행한 뒤, 개발자에게 전달하고 구현을 요청하는 협업 구조였죠. 이 방식은 안정적이고 체계적이긴 하지만, 프로젝트를 빠르게 전개해야 하는 상황에서는 몇 가지 한계가 드러났습니다.
디자인과 개발 간의 해석 차이로 의도했던 UI/UX가 일부 왜곡되거나 생략되기도 했고,
인터랙션이나 애니메이션 요소는 구현 난이도와 커뮤니케이션 비용 때문에 구현한 결과물에 대한 피드백을 주고받으면서 일정이 딜레이 되거나, 아예 우선순위가 밀리거나 제외되는 경우가 많았습니다.
특히 기획 - 디자인 - 개발 순의 워터폴 방식의 특성상, 프로젝트 후반부에는 병목 현상이 자주 발생했고, 결과적으로 디자인적 완성도와 퍼포먼스 사이에서 타협할 수밖에 없었습니다.
결과적으로, 디자이너가 기획한 의도를 실제 사용자 경험으로 완전히 전달하기 어려웠습니다.
2차 개편: Framer 도입으로 완전히 달라진 퍼포먼스
이번 프로젝트에서는 한정된 일정과 인력이라는 조건은 그대로였지만, Framer를 도입해 전혀 다른 방식으로 접근했습니다. 디자인과 구현을 분리하지 않고, 디자이너가 직접 구현과 퍼블리싱까지 책임지는 구조였기에 결과는 훨씬 유연하고 날렵했습니다.
의도한 디자인과 사용자 경험을 그대로 구현할 수 있었고,
복잡한 커뮤니케이션 없이도 인터랙션과 애니메이션 요소를 자연스럽게 반영할 수 있었으며,
무엇보다도 같은 리소스를 들였지만 훨씬 높은 퀄리티의 결과물을 만들어낼 수 있었습니다.
운영/배포 측면에서도 비개발자 중심의 유지보수가 가능했습니다.
프로젝트 전체를 통틀어 느낀 가장 큰 변화는, 디자인이 더 이상 ‘개발 제안서’가 아니라 최종 결과물 자체가 된다는 것이었습니다. 이는 단지 작업 시간 단축이라는 차원을 넘어서, 디자이너가 의도한 브랜드 경험을 훨씬 정밀하게 구현할 수 있는 환경이 만들어졌다는 의미였습니다.
4. 구체적으로 이런 점이 좋았어요.
수호아이오의 웹사이트는 기업의 정체성과 방향성을 표현하고, 브랜드 경험을 전달하는 공간으로 기능하고 있기에, 그 메시지를 시각적으로 설득력 있게 전달할 수 있는 인터랙션과 디테일한 연출이 중요했습니다. 프레이머는 이런 니즈를 디자이너의 손끝에서 직접 구현할 수 있게 해주었고, 기술적 장벽을 넘어서 기획부터 배포까지의 흐름을 하나의 디자인 경험으로 통합할 수 있는 훌륭한 툴이었습니다.
클릭 한번에 퍼블리싱 완료
반응형 UI 설계에 유리
1. 즉시 퍼블리싱 가능한 워크플로우
문서화된 기획서를 기반으로 디자인, 구조 설계, 기능 구현까지 모두 디자이너 혼자서 진행해야 했기 때문에, 개발자의 리소스를 기다리기보다 즉시 배포 가능한 환경이 필요했어요. 프레이머에서는 화면에 디자인한 작업물을 그대로 퍼블리싱할 수 있어, 실시간으로 수정하고 바로 반영하는 속도감이 엄청났습니다.
2. 반응형 설계와 변수 조작이 직관적
특히 다양한 뷰포트에 맞는 반응형 UI 설계를 직접 다룰 수 있었고, 텍스트나 색상 등의 변수화 작업도 직관적이라 마치 웹 개발자의 프론트엔드 마인드를 툴 안에서 체험하는 느낌이었습니다.
3. 디자인과 결과물 사이의 갭이 없다
기존 Figma 기반의 협업에선 "디자인과 실제 구현 결과물" 사이에 항상 미묘한 차이가 있었어요. 하지만 프레이머를 활용하니, ‘보여주는 그 자체’가 곧 최종 결과물이 되어 훨씬 만족도가 높았습니다.
4. 수준 높은 인터랙션과 애니메이션을 쉽고 빠르게 구현할 수 있다.
설득력 있는 브랜드 경험을 위해 애니메이션과 인터랙션이 필요한 순간이 있는데, 이를 구현하는 데 드는 개발 리소스는 만만치 않았습니다. Framer는 디자이너가 코딩 없이도 수준 높은 인터랙션을 직접 구현할 수 있도록 설계되어 있어, 브랜드 메시지의 일관성과 품질을 유지하는 데 큰 역할을 했습니다.
5. Framer, 언제 빛나는가? 그리고 그 한계는?
Framer는 모든 프로젝트에 정답이 되지는 않지만, 특정 상황에서는 강력한 선택지가 될 수 있습니다. 예를 들어 빠르게 오픈해야 하는 캠페인/이벤트/랜딩 페이지, 브랜드 경험 전달이 중요한 기업 웹사이트, 혹은 개발 리소스 없이 디자이너나 마케팅 팀 주도로 운영해야 하는 웹 서비스 등에 매우 효과적입니다.
하지만 Framer가 모든 디자인과 개발 프로세스를 대체할 수 있는 만능 도구는 아닙니다. 우리는 콘텐츠 중심의 웹사이트를 넘어서, 로그인, Web3 연동, 데이터 처리, 사용자 상태에 따른 조건부 렌더링 같은 높은 수준의 개발 지식이 필요한 기능 중심의 복잡한 프로덕트도 구축해야 합니다. 이러한 경우에는 Framer의 기술적 한계가 분명하게 드러나고, 개발자와의 협업이 필수적입니다.
또한 팀 기반 협업, 컴포넌트 재사용, 버전 관리 측면에서는 여전히 Figma가 더 강력한 선택지로 자리하고 있습니다. Framer는 목적에 따라 잘 활용하면 빛나는 도구지만, 그 한계 또한 명확히 인지하고 사용하는 것이 중요합니다.
6. 결론: 중요한 건 ‘언제 어떻게 쓰느냐’이다
이번 프로젝트는 단순히 새로운 툴을 시도해본 것 이상의 의미가 있었습니다. 디자이너가 주도적으로 퍼블리싱까지 완수한 첫 경험이었고, 그 과정에서 효율성과 완성도 사이의 균형을 직접 체득할 수 있었습니다. 두 툴을 모두 경험한 지금 분명해진 것은, 어떤 툴이 더 낫다기보다, 어떤 상황에서 어떤 툴을 선택하느냐가 더 중요하다는 점입니다. Framer와 Figma는 각자의 강점이 명확히 다르며, 프로젝트의 목적, 팀의 구조, 구현 범위에 따라 적절한 선택이 필요합니다.
✅ Figma를 선택해야 할 때
디자인 시스템 정립 또는 유지가 중요한 경우
프로덕트 중심의 B2B SaaS나 앱 UI 디자인 등 컴포넌트 재사용이 핵심인 프로젝트
다수의 디자이너가 협업하는 구조
개발자가 디자인을 바탕으로 실제 제품을 구현해야 하는 경우
✅ Framer를 선택해야 할 때
브랜드 소개, 프로모션, 이벤트성 웹사이트 등 단기 집중 프로젝트
디자이너가 직접 퍼블리싱하며 빠르게 MVP를 실험해야 하는 경우
시각적 완성도와 인터랙션 효과가 중요한 포트폴리오, 마케팅 페이지
개발 리소스가 부족한 상황에서 빠른 실행이 필요한 스타트업 초기 단계
📌 요약:
Figma는 "시스템 중심 설계와 팀 협업"에,
Framer는 "빠른 웹 구현과 시각적 경험 강화에"에 특화된 도구입니다.
툴 선택에 있어서 프러덕트 중심 vs 브랜드 경험 중심, 협업 중심 vs 단독 실행 중심, 실제 개발자 협업 vs 디자인과 배포 통합이라는 기준으로 판단하면 대부분의 상황에서 올바른 선택이 가능할 것이라 생각합니다. 또한 프로젝트 특성에 맞게, 두 도구를 상황별로 병행해서 사용하는 것도 고려할 수 있습니다. 프로토타입을 만들 땐 프레이머, 디자인 시스템이나 컴포넌트 설계는 피그마처럼 말이죠.
결국 중요한 건, 더 좋은 결과를 내기 위해 끊임 없이 고민하고 시도하는 자세를 유지하면서 내게 필요한 도구를 ‘언제, 어떻게’ 활용할지를 명확히 판단하는 것이라고 생각합니다.
감사합니다.
👉 개편된 수호아이오의 웹사이트가 궁금하다면?: https://www.sooho.io/