컴포넌트로 한 차원 높게 복붙하기

시작하기 전에

우리가 이미 작성한 내용을 다른 곳에 붙여 넣으려면 보통 어떻게 하나요? Ctrl (or CMD) + C / V 단축키로 손쉽게 붙여 넣을 수 있습니다(이하 복붙). 그렇다면 복붙한 에셋의 일부만 변경하거나 여러 가지 타입을 하나로 묶는 등.. 복붙 이상의 무언가가 필요할 때는 어떻게 할까요? 피그마에서 컴포넌트는 이런 복붙 작업을 체계적으로 할 수 있게 도와주는 기능입니다. 이번에는 컴포넌트의 기본적인 사용법과 활용 예시를 알아보겠습니다.

메인 컴포넌트와 인스턴스

피그마에서 만든 모든 에셋은 컴포넌트(원본)로 변환할 수 있습니다. 컴포넌트가 된 에셋을 복붙하면 인스턴스(instance, 복제본)가 되는데요, 이렇게 생기는 인스턴스는 모두 컴포넌트의 수정 사항에 영향을 받습니다.

컴포넌트

컴포넌트는 속이 꽉 찬 다이아몬드, 인스턴스는 속이 빈 다이아몬드 아이콘으로 표시됩니다. 둘 다 왼쪽 레이어 패널에 보라색으로 표시되기 때문에 다른 레이어 형태와 쉽게 구분할 수 있습니다. (에셋이 한 번 컴포넌트로 바뀌면 [Ctrl+Z] 외에는 다시 원래 상태로 돌아갈 수 없습니다)

인스턴스

인스턴스는 기본적으로 메인 컴포넌트의 영향을 받습니다. 인스턴스 속 에셋의 위치를 바꾸거나 지우는 등 큰 레이아웃 레벨의 수정은 불가능하지만, Fill, Stroke 값을 바꾸는 등의 세부적인 내용은 인스턴스 개별적으로 변경할 수 있습니다.

일반 레이어를 컴포넌트로 바꾸기

피그마 예제 화면을 확인해 볼게요. 화면의 ‘card’가 반복적으로 사용되고 있는데, 작업하다 보니 하나를 수정할 때마다 모든 card를 일일이 찾아 수정하는 게 번거롭게 느껴지는데요. 하나의 card를 수정하면 나머지 UI에도 전부 반영되면 좋을 것 같습니다. 이렇게 하나의 수정사항이 각기 다른 UI에 일괄적으로 반영되어야 할 때, 컴포넌트 기능을 사용해 관리하면 무척 편리합니다. 예시의 card는 다른 UI 화면을 만들 때에도 자주 쓸 것 같으니, 이것을 컴포넌트로 만들어 보겠습니다.

1. 'Sample Title' 아래에 있는 카드 부분을 클릭해 선택한 후, [alt]를 누른 채로 오른쪽으로 드래그해서 복제합니다.

1. 마우스 오른쪽 버튼을 눌러 [Create component] 를 눌러 주세요. [Ctrl + Alt + K]로 빠르게 실행할 수 있습니다.

1. 카드 영역이 보라색으로 바뀌었다면 성공입니다.

1. 메인 컴포넌트는 따로 빼서 서로 비슷한 위치에 정리해 주세요. 추후 관리에 유용합니다. card 외에도 button, texts_title 등 나중에 재사용할 것 같은 에셋을 모두 컴포넌트로 만들어 관리하는 것이 좋습니다.

궁금해요 - 캐러셀 UI?

한 페이지에서 더 많은 정보를 보여주기 위해, 수평으로 스와이프 할 수 있도록 구성된 UI입니다.