피그마의 컴포넌트 기초 알아보기

컴포넌트

컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 말해요. 피그마에서도 같은 의미로 쓰이는데 재사용이 가능한 오브젝트를 말하고 레고와 같은 블록 장난감에 많이 비유하고 있어요.

인스턴스

인스턴스(Instance)는 컴포넌트가 자기 복제로 낳은 자식이에요. 컴포넌트의 모든 것을 따라 하지만 자기 개성도 중요시하기 때문에 복제 후 별도로 변경된 속성에 한해 컴포넌트의 변화를 따르지 않아요.

컴포넌트를 생활화해야 하는 이유

컴포넌트는 변화에 유연하고 효율적으로 대처하기 위해 필요해요. 예를 들어 100개의 화면이 있고 모든 화면에 세로 34px에 가로는 화면을 꽉 채우는 파란색 버튼이 있는 상황일 때 버튼의 세로값을 44px로 수정해야 한다면 어떨까요? 

WCAG(웹 콘텐츠 접근성 가이드라인)에 따르면 접근성을 위해 PC 환경에서는 최소 24*24, 모바일 환경에서는 최소 44*44의 크기로 타깃 사이즈를 잡아야 한다.

이렇게 변화해야 하는 상황이 왔을 때 컴포넌트는 진가를 발휘해요. 컴포넌트의 세로값만 조절해도 인스턴스에 반영이 되니까 짧은 시간에 간편하게 수정할 수 있으니까 사용자의 경험에 대해 고민할 수 있는 시간을 더 확보할 수 있어요. 

키 포인트

새로운 UI 요소를 만들었다면 일단 컴포넌트로 바꾸고 생각해요.