국내 결제까지 연동되는 자유로운 디자인 에디터 | 큐샵 스튜디오 에디터 출시
결제까지 되는 국내 플랫폼에서, 스택과 픽셀 단위 조절로 더 자유로운 디자인과 반복 콘텐츠 관리까지. 큐샵 스튜디오 에디터로 할 수 있는 것들을 소개합니다.
안녕하세요, 큐샵팀입니다. 🙌
결제(PG) 연동이 필요한 클라이언트 사이트 웹빌더 플랫폼, 계속 고민하고 계셨나요?
국내 결제가 되는 웹빌더로 넘어가면, 피그마에서 자유롭게 그리던 디자인을 그대로 옮기기 어려운 경우가 많았어요. 정해진 틀을 벗어난 배치나 게시판 같은 반복 콘텐츠는 코드를 붙여야 해결되거나 웹빌더가 정해진 형태 안에서 타협해야 했고요.
이 뿐만 아니라 홈페이지는 제작자(에이전시)가 만들 수 있어도, 정작 오랫동안 관리하고 사용해야 하는 주체는 클라이언트였어요. "클라이언트가 혼자서도 잘 운영할 수 있는가"도 중요한데, 이 부분은 별도 관리자 페이지를 개발해서 얹어주는 식으로 해결하는 경우도 많았어요.
국내에서 지금까지 웹빌더 서비스들은 이 두 가지를 동시에 만족시키지 못했어요.
- 디자인 자유도가 높은 웹빌더 플랫폼 (피그마 사이트·프레이머 등)
피그마 Sites는 이커머스 결제(장바구니·체크아웃) 기능이 없고, 프레이머는 국내 PG 결제 연동이 지원되지 않고 있어요. 결국 결제가 필요한 사이트는 다른 플랫폼으로 옮겨야 했어요.
- 결제·운영이 되는 국내 웹빌더 플랫폼
디자인 자유도가 낮고, SEO와 GEO 최적화를 위한 반복 콘텐츠를 클라이언트가 직접 관리하기 어려워 별도 코드 작업과 외부 플랫폼 연동이 필요했어요.
그래서 큐샵은 이 두 가지에서 느꼈을 한계점을 한 에디터에 담은 스튜디오 에디터를 만들었어요.
- 클래식 에디터가 전문가나 디자이너가 아니어도 PPT 만들듯 쉽게 홈페이지를 완성할 수 있는 에디터였다면
- 스튜디오 에디터는 더 자유로운 디자인과 홈페이지 커스텀에 초점을 맞췄어요.
거기에 큐샵의 강력한 기존 어드민 기능이 합해져 쉬운 홈페이지 게시 뿐만 아니라 편리한 국내 결제 연동, 콘텐츠 발행 관리까지 연동을 위한 별도의 개발없이 한 번에 해결할 수 있어요.
그렇다면 스튜디오 에디터는 어떤 상황을 해결할 수 있나요?
큐샵 스튜디오 에디터, 이런 상황이면 추천해요
1. 자유로운 디자인과 국내 결제 시스템, 둘 다 필요하다면?
피그마처럼 자유롭게 디자인하고 싶은데, 클라이언트 사이트엔 결제까지 붙어야 하는 경우 많다보니 국내 웹빌더에서 정해진 틀을 벗어난 배치를 하려면 별도의 코드 수정 작업이 필요한 경우가 많았어요.
스튜디오 에디터에선 "스택"으로 이 문제를 코드 없이 풀 수 있어요.
보통 개체를 화면 좌표에 못 박아두면, PC와 모바일처럼 너비가 다른 화면에서 겹치거나 밀려나요. 스택은 좌표 대신 "관계"로 풀어요. "이 개체들은 한 묶음, 가로로 세워줘"라고 정해두면, 화면이 좁아질 때 스택이 알아서 세로로 줄을 바꿔줘요.
"어디에 둘까(좌표)"가 아니라 "누구랑 같이 둘까(관계)"를 정하는 방식, 이게 스택의 핵심이에요. 이 모든 자유도가 국내 결제·보안·호스팅까지 기본 기능으로 갖춘 큐샵 위에서 가능해져요.
➡️ 방향
- 가로 또는 세로로 쌓는 방향을 정해요. 필요하면 스택을 쪼개거나(스플릿), 합쳐서(머지) 더 복잡한 구조도 만들 수 있어요.
↕️ 크기 기준
- 스택 안 요소가 화면 크기에 어떻게 반응할지 정해요.
| 옵션 | 효과 |
|---|---|
| 내용만큼만 차지 | 버튼처럼 딱 필요한 만큼만 형태를 유지하게 할 수 있어요 |
| 화면에 맞춰 늘리고 줄이기(= 컨테이너 채움) | 이미지·카드처럼 화면 크기 따라 반응하게 할 수 있어요 |
| 크기 고정 | 로고처럼 항상 같은 크기 유지 |
⏺️ 자유 지정
- 카드 위 뱃지, 이미지 위 닫기 버튼처럼 흐름에서 벗어나 원하는 자리에 고정할 수도 있어요.
이런 세밀한 작업도 가능해져요
- 스타일 설정 : 스택 내 여백 설정, 모서리 반경 설정, 그라디언트 색상 적용, 그림자 이펙트 적용, 배경 흐림 이펙트 적용이 가능해져요.
- 트리거 별 애니메이션 설정 : 화면 진입 시, 화면 이탈 시, 호버(마우스를 요소 위에 올렸을 때), 연속 재생 등의 상황별 애니메이션 설정이 가능해져요.
2. 홈페이지에 올라갈 콘텐츠를 꾸준히 만들어야 한다면?
공지사항, 시공사례처럼 고객 공유와 검색결과 노출을 위해 계속 쌓아야 하는 콘텐츠는 클라이언트에게 운영이 넘어간 이후에 클라이언트가 스스로 관리해야 해요. 지금까지는 글쓰기 작업이 가능한 외부 블로그 플랫폼을 연동하거나, 에이전시가 별도 관리자 페이지를 개발해서 얹어주는 경우도 많았어요.
하지만 스튜디오 에디터의 콜렉션 기능은 콘텐츠 시스템 구축을 에디터 안에서 해결할 수 있어요. 방법은 신청서 양식을 만드는 것과 비슷해요.
- 양식 만들기 : 제목 · 카테고리 · 작성자 · 사진처럼, 콘텐츠마다 똑같이 들어가야 할 항목을 빈칸으로 미리 만들어둘 수 있어요.
- 화면 디자인하기 : 콘텐츠 카드 형태를 정해둘 수 있어요. (목록에서 보여질 콘텐츠 카드)
- 목록 화면 꾸미기 : 페이지마다 노출할 콘텐츠 개수·검색 기준·필터 기준 을 설정할 수 있어요.
한 번 세팅해두면, 이후엔 클라이언트가 양식의 빈칸을 채우듯 글만 써도 페이지가 자동으로 생겨요. 콜렉션은 다룰 이야기가 많아서, 자세한 활용법은 별도 콘텐츠로 안내드릴게요.
3. 머릿 속 홈페이지 초안을 빠르게 만들고 싶다면?
사이트 전체든, 페이지 하나든, 섹션 하나든. 필요한 단위에 맞게 빠르게 시작하고 싶을 때가 있죠. 지금까지 큐샵 AI는 전체 홈페이지를 만드는 데만 쓸 수 있었어요. 스튜디오 에디터부터는 페이지 하나, 섹션 하나 단위로도 자연어 프롬프트로 만들어나갈 수 있어요.
✨ 페이지, 섹션까지 AI기능을 사용할 수 있어요.
| 단위 | 무엇을 하나요 |
|---|---|
| AI 홈페이지 생성 | 홈페이지 사이트의 전체 구조를 원하는 프롬프트대로 한 번에 생성할 수 있어요. |
| AI 페이지 생성 | 홈페이지 사이트 중 페이지 하나를 원하는 프롬프트대로 생성할 수 있어요. |
| AI 섹션 생성 | 페이지 안의 섹션 하나를 원하는 프롬프트대로 생성할 수 있어요. |
전체를 다 맡기고 싶을 때부터, 이미 만든 페이지에 섹션 하나만 추가하고 싶을 때까지. 필요한 단위에 맞게 AI를 쓸 수 있어요.
4. 반복이 많은 잔업을 줄이고 싶다면?
매번 같은 설정을 반복하고, 이미지를 찾아 헤매고, 누가 뭘 바꿨는지도 헷갈릴 때가 있죠. 이런 자잘한 반복 작업들을 줄여서 작업 효율을 높이는 디테일들이 스튜디오 에디터에 들어가 있어요.
🎨 에셋 관리
- 브랜드 스타일(텍스트, 색상, 모서리 등)을 미리 정해두면, 페이지를 만들 때마다 매번 다시 설정할 필요가 없어요.
🌠 이미지 보관함
- 이미지를 찾고, 다운받고, 다시 업로드하는 과정을 줄여줘요.
- 업로드· AI 이미지 생성· 이미지 폴더별 정리는 기존 클래식 에디터와 같이 지원돼요
- 무료 이미지(Unsplash)를 에디터 안에서 바로 검색해서 사용할 수 있어요.
💾 저장 기록
- 자동 저장·게시 시점이 남아서, 인수인계할 때 헷갈릴 일이 없어요
지금 바로 스튜디오 에디터를 시작해보세요
홈페이지 메뉴에서 바로 만나보실 수 있어요.
스튜디오 에디터의 자세한 사용법, 여기에서 바로 확인하실 수 있어요