[Figma] Component 기초 개념 한 번에 정리
ChatGPT 생성형 이미지 피그마 Component의 개념부터 실제 화면 제작에 사용하는 방법까지 단계별로 정리합니다. 복잡한 기능 없이 핵심만 이해할 수 있도록 구성했습니다. 화면을 여러 개 만들다 보면 같은 버튼, 같은 카드, 같은 메뉴를 계속 다시 만들어야 하는 상황이 반복됩니다. 처음에는 복사해서 붙여넣으면 해결되는 것처럼 보이지만, 수정이 필요해지는 순간 문제가 발생합니다. 하나만 고치면 되는 작업이 아니라, 모든 화면을 하나씩 찾아가며 수정해야 하기 때문입니다. 이 문제를 해결하기 위해 등장한 개념이 Component 입니다. Component는 “한 번 만들어 두고, 여러 곳에서 같은 형태로 사용하는 설계 단위”라고 이해하면 됩니다. 형태가 같고, 역할이 같은 요소를 묶어 관리하는 방식입니다. 피그마에서 Component를 사용하면 화면 제작 속도가 빨라지고, 수정 작업이 단순해집니다. 무엇보다 작업 중 실수가 줄어듭니다. 같은 버튼인데 크기가 다르거나 색이 다른 상황을 원천적으로 막을 수 있기 때문입니다. 이 글에서는 Component가 무엇인지부터 시작해, 왜 필요한지, 어떻게 만드는지, 실제 화면에서 어떻게 활용하는지까지 단계별로 설명합니다. 불필요한 기능 설명은 모두 제외하고, 반드시 알아야 할 핵심만 다룹니다. Component란 무엇인가 Component는 기준이 되는 원본 요소 입니다. 이 원본을 기준으로 복사본을 여러 개 만들어 사용할 수 있습니다. 여기서 중요한 점은 단순한 복사가 아니라는 것입니다. Component로 만든 요소는 모두 하나의 기준과 연결되어 있습니다. 기준이 바뀌면 연결된 모든 요소가 함께 바뀝니다. 피그마에서 Component는 크게 두 가지로 나뉩니다. Main Component : 기준이 되는 원본 Instance : 원본을 기반으로 만들어진 복사본 Main Component는 수정 권한이 있는 설계도이고, Instance는 설계도를 바탕으로 배치한 결과물이라고 이해...
