시작하기 전에 우리가 이미 작성한 내용을 다른 곳에 붙여 넣으려면 보통 어떻게 하나요? Ctrl (or CMD) + C / V 단축키로 손쉽게 붙여 넣을 수 있습니다(이하 복붙). 그렇다면 복붙한 에셋의 일부만 변경하거나 여러 가지 타입을 하나로 묶는 등.. 복붙 이상의 무언가가 필요할 때는 어떻게 할까요? 피그마에서 컴포넌트는 이런 복붙 작업을 체계적으로
🔗 이 글은 브런치에 처음 발행한 원문을 그대로 옮겼습니다. 브런치에서 원문 보기
우리가 이미 작성한 내용을 다른 곳에 붙여 넣으려면 보통 어떻게 하나요? Ctrl (or CMD) + C / V 단축키로 손쉽게 붙여 넣을 수 있습니다(이하 복붙). 그렇다면 복붙한 에셋의 일부만 변경하거나 여러 가지 타입을 하나로 묶는 등.. 복붙 이상의 무언가가 필요할 때는 어떻게 할까요? 피그마에서 컴포넌트는 이런 복붙 작업을 체계적으로 할 수 있게 도와주는 기능입니다. 이번에는 컴포넌트의 기본적인 사용법과 활용 예시를 알아보겠습니다.
피그마에서 만든 모든 에셋은 컴포넌트(원본)로 변환할 수 있습니다. 컴포넌트가 된 에셋을 복붙하면 인스턴스(instance, 복제본)가 되는데요, 이렇게 생기는 인스턴스는 모두 컴포넌트의 수정 사항에 영향을 받습니다.
컴포넌트
컴포넌트는 속이 꽉 찬 다이아몬드, 인스턴스는 속이 빈 다이아몬드 아이콘으로 표시됩니다. 둘 다 왼쪽 레이어 패널에 보라색으로 표시되기 때문에 다른 레이어 형태와 쉽게 구분할 수 있습니다. (에셋이 한 번 컴포넌트로 바뀌면 [Ctrl+Z] 외에는 다시 원래 상태로 돌아갈 수 없습니다)
인스턴스
인스턴스는 기본적으로 메인 컴포넌트의 영향을 받습니다. 인스턴스 속 에셋의 위치를 바꾸거나 지우는 등 큰 레이아웃 레벨의 수정은 불가능하지만, Fill, Stroke 값을 바꾸는 등의 세부적인 내용은 인스턴스 개별적으로 변경할 수 있습니다.
피그마 예제 화면을 확인해 볼게요. 화면의 ‘card’가 반복적으로 사용되고 있는데, 작업하다 보니 하나를 수정할 때마다 모든 card를 일일이 찾아 수정하는 게 번거롭게 느껴지는데요. 하나의 card를 수정하면 나머지 UI에도 전부 반영되면 좋을 것 같습니다. 이렇게 하나의 수정사항이 각기 다른 UI에 일괄적으로 반영되어야 할 때, 컴포넌트 기능을 사용해 관리하면 무척 편리합니다. 예시의 card는 다른 UI 화면을 만들 때에도 자주 쓸 것 같으니, 이것을 컴포넌트로 만들어 보겠습니다.
한 페이지에서 더 많은 정보를 보여주기 위해, 수평으로 스와이프 할 수 있도록 구성된 UI입니다.
지금까지 컴포넌트와 인스턴스의 기본적인 개념에 대해 알아보았습니다. 이 개념에 익숙해지기 위해, 앞으로 3회 이상 반복적으로 활용될 요소라면 컴포넌트로 관리하는 습관을 들여 보세요. 훨씬 효율적으로 작업할 수 있게 됩니다.
