컴포넌트Component
한 줄 정의
컴포넌트는 버튼 · 카드 · 메뉴처럼 화면에 여러 번 쓰는 요소를 원본 하나로 만들어 두고, 필요한 곳마다 원본과 연결된 복사본을 꺼내 쓰는 화면 부품이에요.
쉽게 말하면
상품 카드 20개를 하나씩 따로 만들면, 나중에 카드 디자인을 바꿀 때 20개를 모두 고쳐야 해요. 컴포넌트는 카드 하나를 원본으로 만들어 두고, 나머지 자리에는 원본과 연결된 복사본을 놓는 방식이에요. 원본을 한 번 고치면 연결된 복사본에도 같은 변경이 들어가서, 사이트 곳곳의 같은 요소가 모양이 어긋나지 않아요.
원본과 복사본은 어떻게 움직이나요
디자인 도구 피그마(Figma)는 원본을 '메인 컴포넌트', 복사본을 '인스턴스'라고 불러요. 피그마 안내에 따르면 메인 컴포넌트를 고치면 같은 파일 안의 모든 인스턴스에 자동으로 반영돼요. 인스턴스마다 글자 · 채우기 색 · 테두리 · 크기 같은 일부 속성은 원본과의 연결을 유지한 채 따로 바꿀 수 있지만, 인스턴스 안에 레이어를 더하거나 빼는 것처럼 구조를 바꾸지는 못해요. 인스턴스를 원본에서 분리하면 그 뒤로는 원본을 고쳐도 반영되지 않아요(피그마 도움말).
큐샵에서는
컴포넌트 기능은 스튜디오 에디터에서만 쓸 수 있어요. 스튜디오 에디터에서는 레이어에 등록한 컴포넌트를 인스턴스로 배치할 수 있어요. 원본을 고치면 인스턴스가 함께 바뀌는 방식이라, 피그마의 컴포넌트와 같은 방식으로 쓸 수 있어요. 스튜디오 에디터에는 AI로 컴포넌트를 만드는 기능도 있어요.
헷갈리는 말
| 헷갈리는 말 | 뜻 | 컴포넌트와 다른 점 |
|---|---|---|
| 템플릿 | 미리 만들어 둔 페이지나 섹션 디자인 | 템플릿은 처음 만들 때 가져다 쓰는 출발점이고, 컴포넌트는 원본과 복사본이 계속 연결된 부품이에요 |
같은 말
아래 이름으로도 불러요. 모두 같은 뜻이에요.
Component
