AI 컴포넌트 생성 출시, 문장으로 만드는 마스터 컴포넌트
큐샵 스튜디오 에디터에 AI 컴포넌트 생성이 추가됐어요. 만들고 싶은 요소를 문장으로 설명하면 마스터 컴포넌트로 만들어지고, 이미 만든 컴포넌트도 말로 수정할 수 있어요.
한 줄 요약
만들고 싶은 요소를 문장으로 설명하면, 스튜디오 에디터가 마스터 컴포넌트로 만들어줘요. 이미 만든 컴포넌트도 말로 고칠 수 있어요.
안녕하세요, 큐샵입니다.
스튜디오 에디터의 마스터 컴포넌트는 같은 요소를 여러 곳에서 반복해 쓸 때, 그 요소를 미리 만들어두고 가져다 쓰는 기능이에요.
버튼처럼 만들기 간단한 요소라면 마스터 컴포넌트에 요소를 직접 만드는 게 더 빠르지만, 카드처럼 이미지와 제목, 설명이 조합된 요소라면 만들어야 한다면 조합을 위한 작업 시간이 필요해요. 하지만 복잡한 요소를 컴포넌트로 빠르게 만들고 싶다면, 이번에 새로 생긴 AI 컴포넌트 생성을 써보세요.
문장으로 요청하면 컴포넌트가 만들어져요
프롬프트 창에 만들고 싶은 요소를 프롬프트로 입력하면 돼요.
- 예를 들어 "게시글 카드 3개를 나란히 만들어줘"처럼 적으면, 이미지 자리와 제목, 설명이 들어간 카드가 마스터 컴포넌트로 만들어져요.
- 요청에 맞는 생성이 끝나면 프롬프트로 요청한 요소가 컴포넌트로 생성돼요.
- 만들어진 결과는 일반 컴포넌트와 똑같이 사용할 수 있어요. 색과 글자, 간격을 직접 바꿀 수 있고, 페이지 어디에든 가져다 놓을 수 있어요.
이미 만든 컴포넌트도 말로 고칠 수 있어요
새로 만드는 것뿐 아니라, 이미 완성한 마스터 컴포넌트를 수정할 때도 쓸 수 있어요. "지금 카드를 3개에서 2개로 줄여줘"처럼 개수를 바꾸는 요청도 문장 그대로 만들어놓은 마스터 컴포넌트에 적용해서 수정할 수 있어요.
결과가 마음에 들지 않으면 되돌리기로 요청 직전 상태로 돌아갈 수 있어요.
수정한 마스터 컴포넌트는 홈페이지에 배치된 모든 인스턴스 컴포넌트에 적용돼요.
이렇게 사용해보세요
- 스튜디오 에디터에서 작업할 페이지를 열어주세요.
- 새로운 컴포넌트를 생성하거나, 수정하고 싶은 마스터 컴포넌트 상세 페이지로 들어가주세요.
- 컴포넌트 위쪽에 뜨는 프롬프트 창에 만들고 싶은 요소나 바꾸고 싶은 내용을 문장으로 적어주세요.
- 결과를 확인하고, 필요한 부분은 직접 수정해주세요.
알아두면 좋은 5가지
1. AI 컴포넌트 생성은 스튜디오 에디터에서만 쓸 수 있어요. 클래식 에디터는 지원하지 않아요.
2. 되돌리기를 누르면 요청 직전 상태로 되돌릴 수 있어요.
3. 컴포넌트를 만드는 동안에는 해당 컴포넌트를 편집할 수 없어요.
4. 만들어진 컴포넌트를 어떤 스택 섹션에 올리는지에 따라 화면에서 보이는 모습이 달라질 수 있어요. 스택 섹션은 정렬과 간격을 자동으로 맞춰주는 섹션이라, 그 규칙이 컴포넌트에도 적용되거든요. 배치한 뒤 화면 크기별로 한 번 확인해주세요.
5. 베타 기간에는 횟수 제한 없이 무료로 쓸 수 있어요. 베타가 끝나면 크레딧을 사용하는 방식으로 바뀔 예정이에요.
자주 묻는 질문
Q. 클래식 에디터에서도 쓸 수 있나요?
A. 아니요, 스튜디오 에디터에서만 쓸 수 있어요. 클래식 에디터는 지원하지 않아요.
Q. 사용할 때마다 비용이 드나요?
A. 베타 기간에는 횟수 제한 없이 무료예요. 베타가 끝나면 크레딧을 사용하는 방식으로 바뀔 예정이고, 변경 시점은 따로 안내드릴게요.
Q. 결과가 원하는 모습이 아니면 어떻게 하나요?
A. 되돌리기로 요청 직전 상태로 돌아갈 수 있어요. 다만 되돌릴 수 있는 건 가장 최근 요청 한 번까지예요. 그 뒤에는 프롬프트를 더 구체적으로 적어 다시 요청하거나, 직접 수정하는 방법을 권해드려요.
Q. 이미 페이지에 배치한 컴포넌트를 고치면 어떻게 되나요?
A. 마스터 컴포넌트를 수정하면 그 컴포넌트를 가져다 쓴 모든 자리에 함께 반영돼요. 한 자리만 다르게 쓰고 싶다면 마스터를 수정하지 말고, 해당 위치의 요소를 따로 수정해주세요.
Q. 프롬프트는 어떻게 적으면 좋을까요?
A. 만들려는 요소의 종류와 개수, 배치를 함께 적어주시면 의도에 가까운 결과가 나와요. "카드 만들어줘"보다 "이미지와 제목, 설명이 들어간 카드 3개를 나란히 만들어줘"처럼 적어주세요.




