피그마로 시안을 다 만들고 나면 다음 질문이 옵니다. 이거 그대로 프레이머로 옮길 수 있나요?
절반은 됩니다. 그리고 나머지 절반 때문에 일정이 어긋납니다.
옮겨진다는 말을 붙여넣기 한 번으로 끝난다는 뜻으로 이해하시면 실망하게 됩니다. 반대로 아무것도 안 넘어간다고 생각하시면 필요 없는 비용을 쓰게 됩니다. 실제로 무엇이 넘어가고 무엇을 다시 만들어야 하는지 정리해 드립니다.
30초 요약
- •모양은 넘어갑니다. 레이아웃, 색, 이미지, 글자는 대체로 그대로 옵니다.
- •동작은 넘어가지 않습니다. 배리언트 구조, 인터랙션, 반응형 규칙은 다시 만듭니다.
- •폰트와 아이콘에서 가장 많이 깨집니다. 옮기기 전에 확인하시면 시간을 아낍니다.
- •정리된 파일일수록 많이 넘어갑니다. 컴포넌트로 묶여 있는지가 갈림길입니다.
- •옮기는 것보다 옮길 준비를 하는 편이 결과적으로 빠릅니다.
넘어가는 것
프레이머는 피그마 레이어를 붙여넣을 수 있습니다. 실무에서 대체로 잘 넘어오는 것들입니다.
- •레이아웃과 위치 요소 배치와 크기
- •색과 그림자 채우기, 테두리, 그림자 값
- •이미지 삽입된 이미지는 그대로 옵니다
- •텍스트 내용 문구 자체는 유지됩니다
여기까지만 보면 다 되는 것처럼 보입니다. 그래서 오해가 생깁니다.
넘어오는 것은 화면의 사진이지, 화면이 동작하는 방식이 아닙니다.
다시 만들어야 하는 것
배리언트 구조
피그마에서 만든 배리언트는 프레이머에서 그대로 살아나지 않습니다. 두 도구가 상태를 저장하는 방식이 다르기 때문입니다. 버튼의 마우스 오버, 눌림, 비활성은 프레이머에서 다시 묶어야 합니다.
컴포넌트와 배리언트 개념 자체가 헷갈리시면 프레이머 컴포넌트와 배리언트, 피그마와 무엇이 다를까를 먼저 보시면 좋습니다.
인터랙션과 애니메이션
피그마의 프로토타입 연결은 넘어오지 않습니다. 스크롤 연동, 등장 효과, 페이지 전환은 프레이머에서 새로 설계합니다. 다만 이건 손해가 아닙니다. 프레이머에서 만든 움직임은 실제 웹사이트에서 그대로 동작하니까요.
반응형 규칙
피그마에서 데스크톱, 태블릿, 모바일 시안을 각각 그렸다면 그건 세 장의 그림입니다. 프레이머에서는 하나의 화면이 폭에 따라 변하는 규칙으로 다시 정의해야 합니다.
이 작업이 생각보다 시간이 듭니다. 시안에 없던 중간 폭에서 무엇이 어떻게 되어야 하는지 정해야 하기 때문입니다.
가장 많이 깨지는 두 가지
폰트
피그마에서 쓴 폰트가 프레이머에서 지원되지 않으면 다른 글꼴로 대체됩니다. 그러면 줄바꿈 위치가 달라지고 레이아웃이 밀립니다.
옮기기 전에 폰트부터 확인하시면 시간을 크게 아낍니다. 웹폰트로 제공되는지, 라이선스가 웹 사용을 허용하는지 두 가지입니다.
아이콘
아이콘이 여러 조각으로 나뉘어 있으면 옮기는 과정에서 흐트러집니다. 하나로 합쳐 두거나 SVG로 정리해 두면 훨씬 깔끔하게 넘어옵니다.
정리된 파일일수록 많이 넘어갑니다
같은 분량의 시안이어도 옮기는 시간이 몇 배 차이 납니다. 차이를 만드는 건 파일 정리 상태입니다.
- •컴포넌트로 묶여 있는가 복사본으로 흩어져 있으면 프레이머에서도 흩어진 채로 옵니다
- •레이어 이름이 정리되어 있는가 Frame 24 뿐이면 무엇이 무엇인지 다시 파악해야 합니다
- •색과 간격이 규칙을 따르는가 비슷한 회색 일곱 개는 옮기고 나서도 일곱 개입니다
옮기는 데 걸리는 시간은 옮길 때가 아니라 만들 때 정해집니다.
색과 간격에 이름을 붙이는 방법은 디자인 외주에서 받아야 할 것은 시안이 아니라 토큰입니다에서 다뤘습니다.
그래서 어떻게 진행하는 게 좋은가
실무에서 가장 매끄러운 순서는 이렇습니다.
- •1. 피그마 파일 점검 폰트, 아이콘, 컴포넌트 정리 상태를 먼저 봅니다
- •2. 한 페이지만 옮겨 봅니다 전체를 옮기기 전에 기준이 될 한 화면을 완성합니다
- •3. 규칙을 정하고 나머지를 붙입니다 첫 페이지에서 정한 간격과 반응형 기준을 그대로 씁니다
2번을 건너뛰면 전부 옮긴 뒤에 규칙이 안 맞아 다시 손대게 됩니다. 한 페이지에 시간을 더 쓰는 편이 전체로는 빠릅니다.
자주 묻는 질문
피그마 파일을 프레이머로 그대로 옮길 수 있나요?
모양은 대체로 넘어가지만 배리언트, 인터랙션, 반응형 규칙은 다시 만들어야 합니다. 붙여넣기 한 번으로 끝나는 작업은 아닙니다.
옮기는 데 얼마나 걸리나요?
파일 정리 상태에 따라 크게 달라집니다. 컴포넌트로 잘 묶여 있으면 짧고, 복사본으로 흩어져 있으면 새로 만드는 것과 비슷해집니다.
차라리 프레이머에서 처음부터 만드는 게 나을까요?
시안이 정리되어 있지 않다면 그 편이 빠를 때도 있습니다. 다만 시안 없이 바로 만들면 방향을 잡는 데 시간이 더 듭니다. 피그마에서 구조를 정하고 프레이머에서 구현하는 순서를 권합니다.
옮기고 나면 검색 노출은 어떻게 되나요?
프레이머로 만든 사이트도 검색에 정상적으로 잡힙니다. 실제 사례는 Framer SEO 실전 세팅 가이드에 있습니다.
정리하면
피그마에서 프레이머로 옮길 때 모양은 넘어가고 동작은 다시 만듭니다.
그리고 얼마나 넘어가는지는 파일이 얼마나 정리되어 있는지가 정합니다. 옮기기 전에 폰트와 아이콘, 컴포넌트 상태를 확인하시면 대부분의 시간을 아낄 수 있습니다.
함께 읽으면 좋은 글
피그마 파일을 웹으로 옮기는 방법이 고민이시면 상담 신청을 남겨주세요. 지금 파일 상태를 보고 어떤 방식이 맞는지 먼저 정리해 드립니다. 진행 방식과 포함 범위는 요금제 페이지에서 보실 수 있습니다.
이 글은 EasySpark 허수진 대표의 실무 내용이며, 파일 구성과 프로젝트 규모에 따라 다를 수 있어 결과를 보장하지 않습니다. 우리 프로젝트에 맞는 방향이 궁금하시다면 편하게 상담 신청해주세요.
