안녕하세요. 오늘은 컴포넌트와 인스턴스의 관계 그리고 스타일화에 대해서 알아볼까요.
컴포넌트는 한 번 이상 반복적으로 사용하는 UI입니다. 디자인 시스템의 핵심 빌딩 블록 중 하나이며 재사용은 시각적 및 기능적 일관성을 유지하는 데 도움이 됩니다.
아이콘 같이 작은 단위도 컴포넌트로 만들어두고 그걸 복사해서 다른 컴포넌트의 일부로 사용합니다.
그럼 어떤 것들을 컴포넌트로 만들어야 할까요? 구글에서 만든 머터리얼 디자인 가이드(Material design guide), IOS에서 만든 휴먼 인터페이스 가이드(Human interface guide), IBM에서 만든 카본 디자인 시스템(Carbon design system)을 참고하시면 됩니다. 아래 이미지를 클릭하면 해당 웹사이트로 이동합니다.
디자인 시스템 가이드를 반드시 따라야 하는 건 아니지만 처음 디자인을 할 때 크기는 얼마나 해야 할지 각 부분 명칭은 어떻게 써야 할지 텍스트 크기... 등 참 막막하죠. 그럴 땐 이런 가이드를 분석하고 자체 회사 시스템에 맞게 수정하는 편이 좋지 않을까 싶어요. 공부를 시작하는 학생이라면 우선은 그대로 따라 해도 좋습니다. : )
인스턴스는 컴포넌트를 복사한 것으로 컴포넌트를 수정하면 인스턴스도 함께 수정되며 디자인영역엔 인스턴스를 배치시키고 컴포넌트는 따로 관리합니다. 피그마에서는 컴포넌트인지 인스턴스인지 심볼로 구분을 하고 있습니다.
컴포넌트 찾는 방법과 인스턴스를 만드는 방법을 알아볼까요~
방법 1) 해당 파일의 모든 컴포넌트는 피그마 좌측의 Assets 패널에서 컴포넌트를 검색할 수 있고 해당 컴포넌트를 호버 하면 컴포넌트 명칭이 보입니다. 컴포넌트를 선택하면 위치를 찾아주고 캔버스로 클릭 드래그 앤 드롭하면 인스턴스로 디자인에 배치하면 됩니다.
방법 2) 툴바에 있는 Resource (단축키 : shift+I)로 리소스 툴의 Components에서 등록된 컴포넌트를 클릭하면 됩니다. 그럼 인스턴스가 캔버스에 보입니다. 인스턴스를 디자인에 사용하면 됩니다.
방법 3) 단축키 Window : Ctrl+F Mac : Command+F 를 눌러서 레이어 찾기에서 컴포넌트 명칭을 입력하면 그 명칭이 적용된 모든 레이어가 검색됩니다. 레이어가 많다면 필터옵션에서 컴포넌트만 필터링할 수 있습니다. 선택한 컴포넌트를 복사하면 인스턴스가 됩니다.
자 그럼 컴포넌트와 인스턴스를 나누는 이유는 뭘까요?
컴포넌트를 여러 개 만들어서 디자인에 배치해도 되는데 굳이 인스턴스로 분류해서 디자인에 배치하는 이유를 예를 들어 설명하겠습니다.
동일한 버튼을 제가 1000곳의 디자인 영역에 사용했다고 가정할게요~ 만약 버튼의 크기, 색상, 모서리 라운드 값... 등 의 요소를 변경해야 한다면 1000개를 일일이 수정하거나 한 번에 선택해 두고 변경하거나 해야 합니다. 그러다가 1개가 선택이 안 되는... 등 누락되는 경우도 있겠죠.
애초에 컴포넌트를 만들어두고 복사한 인스턴스를 1000곳에 사용했다면 딱 한 번만 변경하면 됩니다.
컴포넌트만 변경하면 되는 거죠~ 따라서 컴포넌트는 디자인 영역에 쓰지 않고 따로 관리합니다. 이걸 통해 반복 작업을 줄이고 수정 및 유지보수의 효율성도 생기죠.
모든 걸 컴포넌트로 만드는 건 아닙니다. 반복적으로 사용할 것들만 컴포넌트로 만들고 전체 디자인에서 단 한 번만 사용되는 거면 굳이 컴포넌트로 만들지 않아도 상관없습니다.
디자인 할 때는 반드시 컴포넌트가 아니라 인스턴스를 배치해야 한다고 말씀드렸는데요. 인스턴스를 선택하면 디자인 패널에서 인스턴스 심볼과 명칭이 보입니다.
1. 배치된 그자리에서 다른 인스턴스로 교체할 수 있습니다.
2. 인스턴스를 선택하면 빠르게 연결된 컴포넌트를 찾을 수 있습니다.
3. 인스턴스 옵션을 누르면 3가지의 옵션이 나옵니다.
3-1. 인스턴스와 컴포넌트 연결을 해제(Detach instance) 하면서 컴포넌트 이전 상태로 돌아갑니다. 보통 컴포넌트를 잘못 만들게 되면 곧바로 해지가 되지 않는데 이럴 때 인스턴스로 만들고 그걸 깨는 형태로 변형을 많이 합니다.
3-2. 인스턴스는 개별 수정이 되므로 개별 수정된 인스턴스의 모든 속성을 연결된 마스터 컴포넌트에 덮어 씌울 수 있습니다. 이렇게 되면 기존에 배치되어 있던 모든 인스턴스도 한 번에 수정 및 반복 작업이 편리합니다.
3-3. 인스턴스는 개별 수정이 되므로 컴포넌트랑 다시 연결하려면 모두 리셋하거나 부분 리셋을 할 수 있습니다.
리셋한 부분은 컴포넌트를 수정하면 같이 수정되며 리셋하지 않은 부분은 반영되지 않습니다.
그런데 인스턴스를 수정하다 보면 수정되는 것과 그렇지 않은 부분이 있습니다. 차이를 알아두면 좋겠죠. 피그마 헬프센터에서 정리된 내용을 번역해서 가져왔습니다.
다음 내용을 수정할 수 있습니다.
글꼴, 굵기, 크기, 행간, 자간 및 리사이징 조정을 포함한 텍스트 속성 변경 가능
Fill 유형, 값 및 불투명도를 포함하여 모든 레이어의 Fill 또는 Stroke 변경 가능
그림자 또는 흐림 효과 추가, 편집 또는 제거 가능
레이아웃 그리드 추가, 편집 또는 제거 가능
아이콘과 같은 다른 컴포넌트의 중첩된 인스턴스 교체할 수 있음
내보내기 설정 추가, 편집 또는 제거
레이어 이름 변경
인스턴스의 기본 구조를 변경할 수 없습니다.
인스턴스 내 레이어의 순서 또는 Z-인덱스
오토 레이아웃의 항목을 포함하여 컴포넌트 내의 모든 레이어 위치
레이어에 적용되는 모든 컨스트레인츠
모든 텍스트 레이어의 박스 크기
지금까지 컴포넌트와 인스턴스의 관계 인스턴스는 어디까지 수정이 되는지 알아보았습니다. 디자인 영역에는 반드시 인스턴스를 사용하시고 컴포넌트는 따로 관리하면 좋습니다.
컴포넌트와 동일한 개념으로 스타일화를 설명드리겠습니다. 컴포넌트는 UI로 보면 됩니다. 스타일화는 자주 사용하는 속성을 꺼내 쓰거나 편집하기 좋게 만드는 기능입니다. 동일한 텍스트, 그리드, 이펙트, 색상을 여러 번 수정하는 게 아니라 스타일로 등록하고 한 번에 변경을 하는 거죠.
현재 스타일은 디자인 패널에서 4가지 속성으로 만들 수 있습니다.
1. Fill & Stroke & Selection colors : 색상 스타일 (단색, 그라데이션, 투명도 포함)을 등록합니다.
2. Text : 텍스트(폰트 종류, 굵기, 크기, 행간, 자간 포함) 스타일을 등록합니다.
3. Layout grid : 그리드( 그리드, 컬럼, 로우 포함) 스타일을 등록합니다.
4. Effects : 효과(그림자, 내부 그림자, 레이어 블러, 배경블러) 등록합니다.
스타일 적용방법
4가지 속성 전부 스타일 등록 방법은 비슷합니다. 여기선 색상 등록 방법으로 설명하겠습니다.
방법 1) 디자인 패널 객체를 선택 1. 스타일 아이콘을 클릭 2. Create style + 클릭 3. 색상 구분할 수 있도록 이름 입력 Name : primary (영어로 작성) 4. 누구든 알 수 있게 설명 입력 Description : 주색상 5. Create style 버튼 클릭
등록된 스타일은 디자인 패널에서 아래 이미지처럼 보입니다. 스타일을 해제하려면 Detach style 아이콘을 누르면 됩니다. 나머지 스타일도 저렇게 세팅되며 해제방법도 동일합니다.
참고로 스타일 아이콘을 눌러서 나오는 하단에 Browse libraries...라고 나오는 버튼은 모든 스타일 및 컴포넌트를 라이브러리에 퍼블리싱 시키거나 퍼블리싱된 다른 스타일과 컴포넌트를 가져올 수 있는 기능입니다. 추후 팀라이브러리 포스팅에서 설명드리겠습니다.
방법 2) 객체를 선택하지 않은 상태 즉 캔버스를 아무 곳이나 클릭하면 우측 디자인패널에서 Local styles +아이콘을 눌러서도 스타일을 추가할 수 있습니다.
등록된 스타일은 아무것도 선택하지 않은 상태에서 디자인패널에서 Local styles에서 보입니다. 해당 스타일을 우클릭하면 스타일을 잘라내서 다른 파일에 옮기거나 수정 및 삭제를 할 수 있습니다.
Add new folder를 누르면 스타일을 그룹으로 만들어서 관리할 수 있으며 아예 스타일 네이밍을 슬래시( / )로 구분하면 자동 그룹화 됩니다. 예를 들어 primary / opacity80 이런 식으로 주면 primary > opacity80 이렇게 그룹화됩니다.
모든 디자인 시스템에는 컴포넌트와 스타일화 라는 개념이 반드시 필요하고 이는 부분과 전체를 아주 효율적으로 관리할 뿐만 아니라 여러 이해관계자들과 커뮤니케이션 및 협업을 원활하게 만들어 줍니다. 피그마에만 있는 개념은 아니므로 프로그램에 관계없이 시스템 기반 디자인이라면 알아두면 좋습니다.
처음 디자인을 시작하는 학생이라면 이 모든 걸 처음부터 완벽하게 갖추고 시작하긴 어렵습니다. 처음 시안 작업할 때는 크게 방향성을 잡고 디테일 과정에서 컴포넌트 스타일화를 조금씩 적용해 보면서 개념을 익히고 어느 정도 숙달이 되면 능숙하게 다룰 수 있습니다.
지금까지 컴포넌트와 인스턴스의 관계, 스타일 등록과 확인 편집 방법을 살펴보았습니다. 다음 포스팅에서 만나요 : )
'피그마 파헤치기 > 디자인 핵심기능' 카테고리의 다른 글
| 피그마 핵심3) 프레임 설정방법, 컨스트레인트에 대해 알아보자 (0) | 2023.04.22 |
|---|---|
| 피그마 핵심3) 프레임과 그룹, 아트보드 차이에 대해 알아보자 (0) | 2023.04.19 |
| 피그마 핵심2) 컴포넌트 프로퍼티 Boolean(불리언), Instance swap(인스턴스 스와이프), Text(텍스트) 추가방법 (0) | 2023.04.04 |
| 피그마 핵심2) 컴포넌트 프로퍼티 Variant (베리언트) 추가방법 (0) | 2023.03.29 |
| 피그마 핵심2) 컴포넌트 만드는 방법 알아볼까요? (0) | 2023.03.28 |