07.심볼, 효율을 높여보자

스케치의 꽃이라 볼 수 있는 심볼입니다. 심볼은 아트보드, 페이지와 여러 문서에서 쉽게 요소를 재사용할 수 있는 스케치의 강력한 기능입니다.

심볼

심볼은 재사용이 많이 필요한 디지털 프로덕트 디자인에 필수적인 기능입니다. 마스터와 인스턴스로 구성되며, 마스터 심볼을 복사한 인스턴스를 디자인할 때 사용합니다. 마스터 심볼을 편집하면 모든 인스턴스 심볼에 변화가 적용됩니다. 인스턴스를 수정해도 마스터가 변경되지는 않으며 사용하는 용도에 따라 인스턴스 내부의 내용을 바꿀 수 있습니다.

*마스터 심볼은 보라색 이름이 적혀있습니다.

심볼 만들기

원하는 레이어를 선택하고 상단 툴바에 있는 Create Symbol을 눌러 새 심볼을 만들 수 있습니다. 심볼을 만들 때 이름을 지정할 수 있고 레이아웃도 함께 지정할 수 있습니다. 마스터 심볼을 일반 아트보드로 다시 변환하려면 레이어 목록에서 심볼 아트보드를 선택하고 메뉴에서 Layer › Convert Symbol to Artboard를 선택합니다.

심볼 넣기

메뉴에서 insert> symbol을 선택해 심볼의 새 인스턴스를 추가 할 수 있습니다. 키보드 C키를 눌러 컴포넌트를 검색하고 삽입할 수도 있습니다. 기존 인스턴스를 복제 할 수도 있습니다.

툴바로 심볼 넣기
키보드 c키를 눌러 심볼 넣기

심볼 바꾸기

Inspector나 Control+Click으로 심볼을 교체할 수 있습니다.

Inspector에서 바꾸기
우클릭으로 바꾸기

마스터와 분리하기

인스턴스 레이어를 Ctrl + Click 하거나 메뉴에서 Layer> Detach from symbol를 선택해 인스턴스를 마스터로부터 완전히 분리할 수 있습니다.

심볼 편집

심볼을 편집할 수 있는 두 가지 방법이 있습니다. 마스터 심볼을 편집하거나 오버라이드를 통해 개별 인스턴스를 편집할 수 있습니다.

마스터 편집

인스턴스를 두 번 클릭하면 지금 어디에 있는지 상관없이 마스터로 바로 이동합니다. 마스터 심볼이 별도의 심볼 페이지에 있는 경우, 레이어 리스트에서 수동으로 찾을 수도 있습니다. 마스터 심볼을 편집하면 문서의 모든 인스턴스에 즉시 반영되며 원하는 사항을 변경 한 후 왼쪽 상단의 Return to Instance를 클릭하면 원래 보고 있던 인스턴스로 이동합니다.

인스턴스 편집 – 오버라이드

오버라이드 기능을 이용해 마스터의 모양을 유지하면서 인스턴스의 내용을 개별적으로 편집할 수 있습니다. 텍스트, 이미지 등 다양한 요소를 바꿀 수 있습니다. 인스턴스를 선택했을 때 오른쪽 Inspector에 편집 가능한 요소들이 표시됩니다. 편집 가능한 요소는 마스터 심볼에서 편집할 수 있습니다. 오버라이드에 영향을 받지 않게 하려면 레이어를 잠그면 됩니다.

심볼 중첩

심볼 내부에 인스턴스 심볼을 넣을 수 있습니다. 이것을 중첩된 심볼이라고 부릅니다. 내부에 넣은 인스턴스 심볼의 마스터 심볼을 업데이트하면, 모든 중첩된 심볼에 적용됩니다.

스마트 레이아웃

인스턴스 심볼을 수정할 때, 즉 오버라이드 될 때 심볼이 변하는 규칙을 정할 수 있습니다. 예를 들어 심볼 내부의 글이 길어져서 좌우 길이가 늘어날때, 스마트 레이아웃을 지정할 경우 간격을 유지하면서 의도한대로 심볼이 컨텐츠에 맞춰 크기가 조절됩니다. 가로 세로로 늘어나는 방향을 지정할 수 있습니다. 심볼을 만들 때 지정하거나 마스터 심볼 편집 시 Inspector에서 지정할 수 있습니다.

최근 소식

디자인 나침반 아카데미

최근 글

WWDC24: 드디어 애플의 AI

애플이 WWDC 2024 일정을 공개했습니다. 6월 10일 월요일 특별 기조연설을 시작으로 14일까지 개최 예정입니다. 애플 파크에서

글이 없습니다.