가장 기본이 되는 피그마 컴포넌트의 활용 (컴포넌트 라이브러리)
컴포넌트란 UI를 구성하는 재사용 가능한 블록입니다. 버튼, 입력 필드, 아바타, 카드, 모달 등 인터페이스를 이루는 모든 시각적 요소를 컴포넌트화하여 관리할 수 있습니다. 컴포넌트 활용의 중요성 1) 일관성 유지 여러 곳에서 동일한 UI 요소를 재사용함으로써 디자인의 시각적 일관성을 유지하고 브랜드 아이덴티티를 강화할 수 있습니다. 2) 생산성 향상 반복적인 디자인 작업을 줄이고, 컴포넌트의 인스턴스를 복사하여 빠르게 UI를 구성할 수 있어 작업 시간을 단축하고 생산성을 높입니다. 3) 유지보수 용이성 컴포넌트의 마스터 속성을 한 번만 수정하면 해당 컴포넌트의 모든 인스턴스에 변경 사항이 자동으로 적용되어 유지보수가 용이해집니다. 4) 협업 효율 증대 팀원 간에 공유된 컴포넌트 라이브러리를 통해 디자인 작업의 표준화를 이루고 커뮤니케이션 오류를 줄여 협업 효율성을 높입니다. 5) 접근성 향상 접근성을 고려하여 제작된 컴포넌트를 재사용함으로써 웹 및 앱 서비스의 접근성 기준을 쉽게 준수할 수 있도록 돕습니다. 피그마 컴포넌트의 활용 1. 그룹, 프레임, 컴포넌트의 이해 - 그룹은 콘텐츠를 하나의 그룹으로 묶는 개념이다. 그룹으로 묶인 콘텐츠는 크기, 색상, 속성이 모두 같이 변경됩니다. - 프레임은 콘텐츠를 아우르는 컨테이너의 개념이며, 내부 콘텐츠의 속성이나 크기에 영향을 주지 않습니다. - 컴포넌트는 재사용 가능한 디자인 요소를 묶은 것이다. 2. 컴포넌트와 인스턴스의 이해 - 컴포넌트 : 재사용 가능한 UI 요소로 등록한 원본을 의미합니다. - 인스턴스 : 원본 컴포넌트를 복제한 오브젝트를 말합니다. - 속성의 차이점 ① 원본 컴포넌트는 복제한 인스턴스의 색상, 크기, 형태 변화에 영향을 주지만, 인스턴스는 원본 컴포넌트에 영향을 주지 않습니다. ② 복제한 인스턴스의 속...