피그마 디자인, 스튜디오 에디터로 옮길 수 있어요 | 큐샵 피그마 플러그인 출시
큐샵이 국내 웹빌더 최초로 피그마 플러그인을 출시했어요. 피그마에서 만든 디자인을 그대로 큐샵 페이지로 변환하고, 처음부터 다시 만들 필요 없이 스튜디오 에디터에서 이어서 작업할 수 있어요.
안녕하세요, 큐샵팀입니다. 🙌
고객사나 회사의 요청에 맞춰 퀄리티를 컨트롤해야 하고, 나중에 다른 사람도 쉽게 수정할 수 있어야 하고, 관리자 페이지까지 필요한 홈페이지를 만드는 일이라면, 프롬프트 몇 줄로 끝나는 바이브코딩보다는 피그마로 꼼꼼히 홈페이지를 디자인해야만 하는 경우가 많으실 거예요. 게다가 쇼핑몰을 운영할 목적이라면, 국내 PG(결제) 연동까지 가능한 웹빌더를 써야 하는 문제도 있고요.
하지만 국내 PG 결제 연동이 가능한 웹빌더를 쓰더라도, 피그마로 완성한 디자인을 그 웹빌더로 어떻게 옮기느냐는 늘 직접 일일이 부딪혀야만 하는 과제였어요. 이런 고민을 하시는 분들을 위해, 큐샵이 스튜디오 에디터에 피그마 결과물을 옮길 수 있는 큐샵 피그마 플러그인을 국내 웹빌더 최초로 출시했어요.
🪄 피그마 프레임 → 큐샵 페이지 변환
기존에는 피그마에서 디자인을 완성해도, 그 디자인을 큐샵으로 옮기려면 처음부터 다시 배치해야 했지만, 이제는 피그마에서 만든 프레임을 큐샵의 페이지로 변환해서 옮길 수 있어요. 프레임 안의 레이어와 레이아웃 규칙(오토레이아웃)은 큐샵의 스택 구조로 변환돼요.
어떻게 사용할 수 있나요?
1. 피그마에서 큐샵 플러그인을 설치한 다음, 플러그인을 시작하면 큐샵 계정 연결을 위해 로그인 화면이 나와요.
2. 로그인으로 큐샵 계정이 연결되면, 변환할 프레임을 선택한 뒤 큐샵으로 변환하기 버튼을 눌러주세요.
3. 그 다음 피그마 결과물을 옮길 큐샵 홈페이지를 선택하면 변환이 시작돼요.
- 아직 만든 홈페이지가 없다면, 새로운 홈페이지를 만든 다음 다시 전환하면 돼요.
- 단, 스튜디오 에디터로 만든 큐샵 홈페이지만 선택이 가능해요.(큐샵 피그마 플러그인은 스튜디오 에디터에서만 지원하고 있어요.)
4. 변환이 완료되면, 선택한 홈페이지의 에디터에서 새로운 페이지 Figma Import Page로 추가된 결과물을 확인할 수 있어요.
변환 후 확인해야 할 것
만약 피그마에 입력폼, 상품 리스트, 게시판 같이 큐샵 관리자 페이지에서 관리가 필요한 요소를 염두하고 만든 디자인 화면이 있다면, 페이지 변환 후 에디터에서 해당 위치에 직접 큐샵의 입력폼, 게시판 기능을 넣어주세요.
| 항목 | 왜 별도로 설정해야 할까요 |
|---|---|
| 입력폼 | 상담 신청, 설문 접수처럼 방문자가 입력한 데이터가 관리자 페이지로 전달되는 기능이라, 디자인만으로는 관리자 페이지 내 입력폼 관리와 연결되지 않아요. |
| 상품 리스트 | 상품명, 가격, 재고 같은 정보가 관리자 페이지의 상품 관리와 실시간으로 연동돼야 해서, 디자인 위에 실제 상품 데이터를 다시 연결해야 해요. |
| 게시판 | 문의·후기 등의 게시글은 관리자 페이지의 게시판 관리로 모이는 구조라, 디자인만으로는 게시글을 등록·관리할 수 없어요. |
TIP
변환 후, 버튼에 실제로 연결할 링크도 잊지 말고 넣어주세요. 디자인 단계에서는 버튼 모양만 잡아두고 링크는 나중에 연결하는 경우가 많으니까요.
✨ 큐샵 피그마 플러그인을 더 잘 활용할 수 있는 피그마 활용법
1. 프레임 하나에 담아서 변환해주세요
- 변환할 프레임을 오토레이아웃 기반의 반응형으로 작업해두면 변환이 더 매끄러워져요
- 여러 프레임에 있는 레이어를 부분적으로 골라 선택하면 변환이 안 돼요. 변환하고 싶은 내용을 하나의 프레임 안에 모아두고, 그 프레임을 통째로 선택해서 변환해주세요.
- 한 프레임에 너무 많은 내용을 한꺼번에 담기보다, 몇 개로 나눠서 변환하면 훨씬 안정적으로 변환할 수 있어요.
TIP
피그마에서 오토레이아웃 조합으로 만든 버튼 요소는, 변환할 때 큐샵이 버튼으로 인식해서 옮겨줘요.
2. 헤더·푸터가 이미 있는 홈페이지라면
- 큐샵에 이미 디자인이 적용되어 있고 헤더·푸터가 있는 상태라면, 피그마에서는 헤더와 푸터 사이에 들어갈 콘텐츠만 작업한 뒤 전환해주세요.
- 전환하면 기존 에디터에 설정된 헤더·푸터는 그대로 유지된 채, 그 사이에 변환한 피그마 콘텐츠가 들어가요.
3. 변환 결과물은 페이지로 추가돼요
- 전환된 결과물은 새로운 페이지로 추가돼요. 이 페이지 안의 콘텐츠는 다른 페이지로 복사·붙여넣기도 가능해요.
4. 컴포넌트는 인스턴스로 분리한 뒤 변환하세요
- 피그마에 이미 만들어둔 컴포넌트가 있다면, 마스터 컴포넌트가 아닌 경우 인스턴스로 분리한 뒤 변환하는 걸 권장해요.
FAQ
Q. 이 플러그인은 어떤 에디터에서 사용할 수 있나요?
A. 큐샵 스튜디오 에디터에서만 사용할 수 있어요.
Q. 변환할 때 스타일은 어떻게 적용되나요?
A. 사이트를 선택한 후, 스타일 적용 방법을 아래 2가지 중 하나로 선택할 수 있어요. 만약 피그마에 적용된 색상값을 그대로 유지하고, 헤더와 푸터 모두 그대로 유지하고 싶다면 Figma 스타일 적용을 선택하면 돼요.
- 큐샵 스타일 유지
를 선택하면 헤더·푸터·스타일 모두 현재 큐샵 사이트의 테마를 따르고, 감지된 피그마 헤더·푸터는 제거돼요. - Figma 스타일 적용을 선택하면 피그마 스타일이 그대로 유지되고, 다른 큐샵 페이지에는 영향을 주지 않아요.
Q. 페이지 생성에 개수 제한이 있나요?
A. 플랜에 따라 달라요. 무료 플랜은 사이트가 비게시 상태면 페이지를 무제한으로 만들 수 있지만, 게시된 사이트라면 페이지 10개까지만 가능해요. 유료 플랜은 개수 제한이 없어요.
Q. 프레임 용량에 제한이 있나요?
A. 네, 안정적인 결과물 변환을 위한 프레임 용량 제한이 있어요. 레이어가 복잡하게 중첩되어 있거나 페이지 하나에 담긴 콘텐츠가 지나치게 많으면 제한에 걸릴 수 있어요. 용량을 초과하면 "프레임이 너무 커서 변환할 수 없습니다. 프레임을 나눠서 다시 시도해 주세요."라는 메시지가 뜨고, 이 경우엔 안내대로 프레임을 나눠서 다시 시도하면 돼요.
Q. 변환하려는 사이트에 편집 권한이 없으면 어떻게 되나요?
A. 편집 권한이 없는 사이트는 변환할 수 없어요. 사이트 선택 목록에서도 제외돼요.
A. 클래식 에디터와 스튜디오 에디터로 만든 사이트가 모두 목록에 보이지만, 그중 스튜디오 에디터로 만든 사이트만 선택할 수 있어요. 최근에 사용한 사이트에는 "최근 사용" 표시가 붙어요.
Q. 변환이 실패하면 어떻게 하나요?
A. "처음부터 다시 시도하기" 버튼을 누르면, 이전에 선택했던 프레임과 사이트 정보가 그대로 유지된 상태에서 다시 시도할 수 있어요.
지금 바로 피그마 큐샵 플러그인 사용해보기
- 피그마에서 우클릭 후 플러그인 → 플러그인 관리...를 선택한 뒤
- 검색창에 "큐샵"을 입력하고, Qshop AI - Figma to Website를 찾아 설치하면 바로 사용해볼 수 있어요.