[Figma 독학] 컴포넌트가 뭔가요? 컴포넌트의 중요성과 만드는 방법

피그마에서 컴포넌트를 사용해야 하는 이유

컴포넌트는 반복하여 사용하는 UI들의 규칙을 규정하여 규격화하는 것입니다. 그럼 컴포넌트를 사용해야 되는 이유는 뭘까요? 많은 화면이 제작되는 UXUI프로젝트 특성상 반복적으로 사용돼야하는 UI들이 있고 매번 UI를 만들어 가면서 작업하게 되는 것은 매우 비효율적으로 작업한다라고 할 수 있습니다. 특히 개선 사항에 대한 가설을 빠르게 적용시키고 수정해 나가야 하는 이 분야는 빈번히 디자인을 수정하게 됩니다. 이럴 때 컴포넌트를 이용하지 않는다면 여러분들은 하나하나 선택해서 일일이 수정해야 하는 상상만 해도 수고스러운 작업을 하게 됩니다. 예를 들면 반복적으로 만들어져야 되는 디자인 프로젝트에서 여러분들이 어떠한 버튼을 도형 툴을 이용해서 일일이 만들어낸다고  한번 가정을 해보겠습니다. 한번 만들어진 버튼은 매 화면마다 복사하여서 사용을 하게 될 텐데, 이렇게 디자인을 한차례 끝내는 것은 크게 어렵지 않을 수도 있겠지만 아까도 얘기했듯이 우리가 하는 디자인이라는 분야는 빈번한 수정이 이루어지게 됩니다. 어떤 회의라든가 클라리언트의 컨펌을 통해서 해당 버튼이 현재의 컬러가 아닌 다른 컬러로 바뀌어야 한다고 가정할 경우 여러분들은 일일이 버튼을 선택하여서 요청된 다른 컬러로 수정을 하게 될 것입니다. 실제 프로젝트에서는 화면이 몇십 개에서 백개에 가까운 화면이 만들어지기도 하기 때문에 버튼을 일일이 수정해야 한다면 생각만 해도 엄청 귀찮은 상황에 놓이게 될 것입니다. 따라서 버튼을 페이지별로 일일이 생성하기보다는 하나의 버튼을 먼저 만들어 놓고 해당 버튼을 현재의 화면이 아니라 다른 화면에서 컴포넌트로 등록(컴포넌트 등록 단축키 : alt + ctrl + k)을 시켜주어야 합니다. 이 등록된 컴포넌트를 복사하셔서 디자인 작업에 활용을 하면 되고, 이렇게 복사된 컴포넌트를 회의 단계나 어떠한 컨펌 단계에서 이것을 수정해야 된다고 했을 때는 일일이 수정하는 것이 아니라 아까 컴포넌트를  등록시킨 페이지로 가서 원본 컴포넌트를 수정하게 되면 일괄적으로 내가 아까 사용한 컴포넌트들에게 수정사항이 반영되게 됩니다. 이렇게 효율적으로 작업하기 위해서는 컴포넌트를 별도의 페이지에서 등록하여서 활용하는 습관을 들이는 게 중요합니다. 이렇지 않게 된다면 매번 바꾸거나 그 위치나 컬러들을 계속 바꾸다 보면은 실수까지도 일어나게 되는 아주 비효율적인 작업을 하게 될 수 도 있으니 이점 꼭 유념하시기 바랍니다. 따라서 반복적인 UI를 규격화시키는 것은 작업 효율이 중요한 이 실무에서 반드시 사용해야 될 기능이라고 할 수가 있습니다. 

 

 

컴포넌트를 제작하는 방법과 기능

컴포넌트를 만드는 방법은 컴포넌트를 만들 요소(레이어)를 선택한 후 마우스 우클릭에서  "Create component"를 클릭하거나 상단패널 중앙에 컴포넌트 만들기 버튼을 선택해주시면 됩니다. 또는 단축키로 윈도우 PC는 Ctrl + Alt + K , 맥은 Command + Alt + K 를 누르면 컴포넌트로 바로 지정할 수 있습니다.

 

피그마 상단 패널 - 컴포넌트 만들기 버튼

 

 

컴포넌트로 등록되면 해당 아이콘 클릭시 레이어 패널을 보면 아래의 이미지처럼 보라색 마름모 4개로 된 아이콘이 레이 어명 앞에 생성된 것을 확인할 수 있습니다.

피그마 컴포넌트(원본) 등록 완료

 

 

 

 

이렇게 만들어진 컴포넌트는 이것을 그대로 사용하는 것이 아니라 이것을 복사하셔서 사용하게 되는데,  원본 컴포넌트를 복사할 경우 레이어명 앞의 아이콘이 마름모 1개로 만들어진 것을 확인할 수 있습니다. 이를 보통 인스턴스로 부르게 됩니다.

복사된 컴포넌트 (인스턴스)

 

 

이처럼 컴포넌트에는 마스터 컴포넌트(원본 컴포넌트)와 인스턴스(instance) 두 종류가 존재합니다. 마스터 컴포넌트는 최초로 생성된 컴포넌트로 모든 복제된 인스턴스들의 마스터 역할을 하게 됩니다. 인스턴스는 마스터 컴포넌트를 복제할 때 생기는 사본을 뜻하는 것으로 마스커 컴포넌트의 큰 틀은 그대로 유지 한 채로 색상, 이미지, 텍스트 스타일을 별개로 적용시킬 수 있습니다.

 

 

 

피그마 컴포넌트 제작 - 오버라이드 샘플

 

마스터 컴포넌트와 인스턴스는 유기적으로 연결되어 있어 마스터 컴포넌트의 한 부분을 수정하면 자신을 복제한 모든 인스턴스들에도 일괄적으로 똑같이 적용됩니다. 하지만 인스턴스에서 수정이 일어나게 될경우 마스터 컴포넌트에는 해당 수정이 영향을 미치지는 않는데 인스턴스에서 수정된 영역에 한하여 오버라이드(overrides) 즉, 해제가 적용되었다고 볼 수 있습니다.

 

 

[인스턴스 오버라이드 범위]

인스턴스를 오버라이드해 훨씬 다양한 결과물을 만들 수 있지만 인스턴스의 경우 오버라이드 가능한 부분이 정해져 있습니다. 따라서 수정 범위를 고려하여 컴포넌트를 제작하는 것이 좋습니다.

• 오버라이드 가능한 것 :  오토 레이아룻, 투명도, 텍스트, 색상, 선, 그림자 효과
• 오버라이드 불가능 한것 : 레이어 정렬, 위치, 크기, 컨스트레인트

 

만들어진 인스턴스를 활용하다 보면 때로는 유기적으로 연결된 컴포넌트 관계를 끊어버리고 새롭게 응용제작을 해야 할 경우도 생기게 됩니다. 이럴 때 컴포넌트 해제 기능이 필요한데, 이를  "Detach instance"라고 부르며 인스턴스와 컴포넌트와의 관계를 해제시켜 기존의 레이어로 돌려놓은 것을 의미합니다. 해제 방법은 해제시킬 인스턴스를 선택한 다음 마우스 우클릭하여 "Detach instance"를 누르면 됩니다. 마스터 컴포넌트의 경우 따로 해제 기능은 없고 단순히 키보드의 delete 버튼을 눌러 삭제하는 방법밖에 없습니다.