컴포넌트로 반복 디자인 요소 관리가 쉬워졌어요 | 큐샵 컴포넌트 기능 출시
같은 버튼, 같은 카드를 페이지마다 다시 만들고 있었다면 이제 그럴 필요 없어요. 스튜디오 에디터에서 스택을 컴포넌트로 저장해두면 여러 페이지에서 재사용하고, 한 번에 관리할 수 있어요.
안녕하세요, 큐샵팀입니다. 🙌
홈페이지를 만들다 보면 똑같은 버튼, 똑같은 카드를 페이지마다 매번 찾아서 복사·붙여넣기를 해야 하는 순간이 반복돼죠. 만들 땐 이 과정으로도 충분한데, 페이지가 늘어날수록 수정해야할 디테일이 추후에 생길 때 문제가 생겨요. 버튼 색을 하나 바꾸고 싶은데, 그 버튼을 쓴 페이지를 일일이 찾아다니며 고쳐야 했거든요.
그래서 큐샵 스튜디오 에디터에 컴포넌트 기능이 생겼어요. 한 번 만든 스택을 컴포넌트로 지정해두면, 다른 페이지에서도 그대로 가져다 쓰고, 원본인 마스터만 고치면 사용한 곳 전체가 같이 바뀌게 되거든요.
뭐가 달라졌나요?
기존에는 배너든 카드든, 필요할 때마다 매번 새로 만들거나 복사해서 붙여넣는 방식이었어요. 겉모습은 같아도 실제로는 서로 연결되지 않은 개별 요소였죠.
이번 업데이트에서 달라진 건, 마스터 컴포넌트로 지정한 스택과 그걸 가져다 쓴 인스턴스 컴포넌트가 데이터로 서로 이어져 있다는 점이에요.
| 이전 | 지금 | |
|---|---|---|
| 관계 | 서로 무관한 개별 요소 | 마스터 컴포넌트 지정 → 인스턴스 컴포넌트로 연결 |
| 수정할 때 | 사용한 페이지마다 일일이 찾아가서 수정 | 마스터 컴포넌트 하나만 수정하면 인스턴스 컴포넌트 전체에 자동 반영 |
| 새로운 페이지를 만들 때 | 기존 요소를 복사·붙여넣기로 옮기는 반복 작업 | 마스터 컴포넌트에서 드래그 한 뒤 바로 배치 |
🪄 새로 생긴 기능
1. 스택을 컴포넌트로 지정하고 사용하기
원하는 스택을 선택하고 컴포넌트로 지정하면, 다른 페이지에서도 그대로 가져다 쓸 수 있어요.
버튼 하나짜리 스택도, 배너·소개 카드처럼 여러 요소가 모인 스택도 다 컴포넌트가 될 수 있어요.
컴포넌트로 만드는 방법은 두 가지예요.
- 디자인 화면에서: 캔버스에서 스택을 선택하면 뜨는 상단바의 컴포넌트 아이콘 클릭
- 레이어 패널에서: 컴포넌트로 만들 스택을 선택하고 우클릭 → 컴포넌트 생성
이렇게 만든 컴포넌트는 왼쪽 탭의 컴포넌트 아이콘에서 목록으로 확인할 수 있어요.
입력폼·게시판·상품·HTML 블록이 포함된 스택은 컴포넌트로 만들 수 없어요.
설정한 컴포넌트는 이렇게 인스턴스 컴포넌트로 꺼내 쓸 수 있어요.
만든 컴포넌트를 다른 페이지에서 쓰고 싶다면, 왼쪽 탭의 컴포넌트 아이콘을 눌러 마스터 컴포넌트 목록을 열어요. 그중 원하는 컴포넌트를 마우스로 눌러 디자인 화면으로 끌고 온 다음, 넣고 싶은 위치에 드래그 하면 그 자리에 바로 인스턴스 컴포넌트가 들어가져요.
마스터 컴포넌트는 계정 단위로 저장돼요
다른 계정에서 같은 컴포넌트를 쓰려면 복사·붙여넣기를 해야 하는데, 이 경우 레이어는 그대로 옮겨지지만 컴포넌트 연결은 끊어져요. 새 계정에서 다시 컴포넌트로 지정해야 해요.
컴포넌트 안에 컴포넌트도 가능해요.
기존에 만들어둔 마스터 컴포넌트들을 재료 삼아, 그걸 품은 새 컴포넌트도 만들 수 있어요.
- 컴포넌트 캔버스 안에서 마스터 컴포넌트 안에 다른 인스턴트 컴포넌트를 배치하기
- 인스턴스 컴포넌트를 넣어둔 스택을 컴포넌트로 지정하기. 컴포넌트 캔버스를 열어보면 그 인스턴스 컴포넌트가 함께 들어가 있는 걸 확인할 수 있어요.
2. 수정한 마스터 컴포넌트는 인스턴스 컴포넌트에 자동 반영돼요
마스터 컴포넌트(원본)를 고치면, 사용한 모든 곳이 자동으로 같이 바뀌어요.
버튼 색이나 문구를 마스터에서 한 번만 고치면, 그 버튼을 쓴 페이지 열 개, 스무 개가 전부 같이 업데이트돼요. 페이지를 찾아다니며 같은 작업을 반복할 필요가 없어져요.
마스터 컴포넌트는 컴포넌트 캔버스에서만 수정할 수 있어요.
일반 페이지 화면에서 인스턴스 컴포넌트를 수정하는 것과, 컴포넌트 캔버스에서 마스터 컴포넌트 자체를 수정하는 건 달라요. 마스터 컴포넌트를 바꾸고 싶다면 반드시 컴포넌트 캔버스로 들어가서 수정해야, 그 변경사항이 페이지에 배치된 모든 인스턴스 컴포넌트에 정확히 반영돼요.
3. 인스턴스 컴포넌트만 다르게 바꿀 수 있어요
인스턴스 컴포넌트마다 조금씩 다르게 쓰고 싶을 때는, 그 값만 개별로 바꿔둘 수 있어요.
인스턴스 컴포넌트에서 색상 같은 값을 직접 바꿔두면, 마스터가 나중에 수정돼도 그 값은 그대로 유지돼요. 기본은 다 같이 가되, 예외로 남기고 싶은 부분만 따로 챙길 수 있는 거예요.
(이 기능은 오버라이드라고 불러요.)
| 상황 | 결과 |
|---|---|
| 마스터만 수정 | 수정하지 않고 배치한 인스턴스 컴포넌트에 모두 반영돼요 |
| 인스턴스에서 직접 값을 바꿔둔 경우 | 그 값은 마스터 컴포넌트 수정과 무관하게 그대로 유지돼요 |
예를 들어 프로모션을 위한 배너를 컴포넌트로 만들어두면, 디자인 틀은 유지한 채 다른 페이지에 배치할 때 페이지에 맞는 내용을 갈아끼울 수 있어요. 캠페인이 바뀔 때마다 마케팅 담당자가 페이지에 필요한 요소는 마스터 컴포넌트에서 꺼내오고, 인스턴스에서 텍스트 문구, 색상, 이미지만 직접 바꿔가며 빠르게 대응할 수 있어요.
FAQ
Q. 컴포넌트를 지우면 인스턴스도 다 사라지나요?
A. 아니에요. 마스터 컴포넌트를 지워도 인스턴스는 일반 스택으로 남아요. 다만 이후 마스터 변경이 반영되는 연결은 끊어져요.
Q. 다른 팀원 계정과 컴포넌트를 공유할 수 있나요?
A. 컴포넌트는 로그인한 계정 단위로 저장돼요. 다른 계정에서 쓰려면 복사·붙여넣기 후 그 계정에서 다시 컴포넌트로 지정하는 과정이 필요해요.
Q. 인스턴스에서 값을 바꾼 뒤에, 마스터 컴포넌트의 원래 값으로 되돌릴 수 있나요?
A. 마스터 컴포넌트로 설정된 원래 값으로 되돌릴 수 있어요. 왼쪽 레이어 패널에서 값을 바꾼 인스턴스 컴포넌트에 커서를 두고 우클릭하면 인스턴스 재설정 메뉴가 있어요. 이걸 누르면 개별로 바꿔둔 값이 사라지고, 마스터 컴포넌트의 기본값으로 다시 돌아가요.
지금 바로 사용해보세요
스튜디오 에디터에서 원하는 스택을 선택하고 컴포넌트로 지정하면 바로 시작할 수 있어요.
🔻이 얘기, 영상으로 더 풀어봤어요