[번역] 심볼

스케치 사용자 매뉴얼 Sketch User Manual

by Jongmin Park

스케치 공식 홈페이지의 매뉴얼만으로도 처음 시작할 때 큰 도움이 될 것입니다.

비공식 번역으로 자세한 내용은 원문을 참고하시기 바랍니다.
원문: https://www.sketchapp.com/docs/


심볼

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


심볼은 아트보드 형태로 표시되는 "Master"와 마스터가 병합되어 표시되는 "Instance"가 있습니다.

심볼을 만들면 심볼 아트보드로 자동으로 보내거나 별도의 페이지로 보낼 수 있습니다. 마스터 심볼을 변경하면 문서의 모든 아트보드와 페이지에 있는 심볼에 변경 내용이 적용됩니다. 또한 마스터와 연결된 인스턴스 심볼에 사용자가 원하는대로 오버라이드할 수 있습니다. 아래 비디오는 심볼을 사용하여 시간을 절약하고 워크플로를 향상시키는 방법에 대한 튜토리얼입니다.


https://youtu.be/3fcIp5OXtVE


인스턴스 심볼는 마스터 심볼을 미러링하는 단일 레이어입니다. 레이어 목록에는 자주색 새로고침 아이콘이 표시됩니다. 심볼의 일반적인 예는 버튼 또는 테이블 보기의 셀과 같이 디자인 전체에서 재사용되는 요소입니다. 뿐만 아니라 인스턴스 심볼는 개별로 크기를 조정할 수 있으며 심볼 내부의 레이어에 크기 조정 제약 조건을 적용하여 크기를 조정할 때 어떻게 동작하는지 정할 수 있습니다.

layers@2x.jpg



심볼 크기 조절하기

레이어와 그룹처럼 인스턴스 심볼을 Scale로 크기를 조절할 수 있습니다. 심볼의 크기를 조절하려면 메뉴에서 Layer › Transform › Scale… 를 선택하거나 Command-K를 누르세요. 사이즈의 변화에 따라 테두리 같은 값들이 해당 심볼만 변하며 마스터에 영향을 끼치지 않습니다.

또한 심볼은 독립적으로 크기를 조절할 수 있으며 크기 조절 제한을 설정해 심볼의 크기를 조절할 때 내부 레이어가 어떻게 작동하는지 정할 수 있습니다. 이 방법으로 심볼의 크기를 조절할 때 스타일 요소들의 크기는 변하지 않을 것입니다. 5px 테두리 굵기의 50x50 모양의 크기가 150x150가 되어도 테두리 굵기는 5px을 유지합니다.



심볼 및 기타 문서

앞서 언급했듯이 심볼은 라이브러리 기능을 사용하여 여러 문서에서 사용할 수 있습니다.다음 섹션으로 건너 뛰기 전에 심볼이 어떻게 작동하는지 알아보기 바랍니다.



심볼 만들기

심볼을 만드려면 그룹, 아트보드 또는 여러 레이어를 선택하고 툴바에서 심볼 만들기 항목을 클릭하거나 메뉴에서 Layer> Make symbol를 선택합니다.


심볼의 이름을 지정할 수 있는 대화 상자가 나타나며 심볼의 "Master"를 다른 페이지로 보낼 수 있습니다. 심볼을 만들면 레이어 리스트에 "Instance" 단일 레이어로 병합된 것을 볼 수 있습니다.

체크박스를 선택하지 않으면 심볼의 마스터가 현재 페이지에 배치되고 인스턴스도 지정한 위치에 배치됩니다.

create@2x.jpg

이제 팝업 메뉴에서 insert> symbol을 선택하고 심볼의 새 인스턴스를 캔버스에 삽입 할 수 있습니다. 마찬가지로 심볼의 기존 인스턴스를 복사하여 붙여 넣거나 복제 할 수 있으며 모두 연결됩니다.

다른 심볼이 포함된 심볼을 만들려면 인스턴스를 다른 심볼의 마스터에 넣으면됩니다.

마스터 심볼을 일반 아트보드로 다시 변환하려면 레이어 목록에서 심볼 아트보드를 선택하고 메뉴에서 Layer › Convert Symbol to Artboard를 선택합니다. 그러면 해당 마스터 심볼의 인스턴스가 그룹 레이어로 바뀌며 해당 심볼을 편집해도 다른 곳에 복사한 심볼에 업데이트되지 않습니다.

인스턴스 심볼를 마스터로부터 아예 분리하려면 메뉴에서 Layer> Detach from symbol을 선택하거나 Ctrl 키를 누른 상태에서 바로가기 메뉴를 선택해 같은 항목을 누르면 됩니다.



심볼 편집

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



마스터 편집

심볼 내용을 편집하려면 인스턴스를 두 번 클릭하면 문서나 페이지 위치에 상관없이 마스터로 바로 이동할 수 있습니다. 마스터를 심볼 페이지에 놓은 경우 레이어 리스트의 페이지 선택 도구를 통해 마스터를 수동으로 찾아 아트보드 내에서 내용을 편집 할 수 있습니다.

심볼의 마스터를 편집하면 문서의 모든 인스턴스에 즉시 반영됩니다. 원하는 사항을 변경 한 후 Return to Instance를 클릭하면 인스턴스가 표시됩니다.

return@2x.jpg

반복되는 요소로 복잡한 문서 작업을 할 때 심볼을 사용하면 많은 시간을 절약 할 수 있습니다. 예를 들어, 심볼에 텍스트 레이어가 포함되어 있으면 심볼의 마스터에서 텍스트 레이어의 속성을 변경할 수 있습니다. 또는 Inspector에서 오버라이드를 통해 개별 인스턴스만 업데이트 할 수 있습니다. 아래 섹션에서 어떻게 할 수 있는지 알아볼 수 있습니다.



오버라이드

캔버스에서 텍스트 또는 이미지 레이어가 포함된 인스턴스 심볼를 선택하면 Inspector에서 오버라이드 섹션을 볼 수 있습니다. 오버라이드 섹션에서는 중첩된 심볼, 텍스트 레이어의 내용, 이미지 및 이미지 채우기, 해당 인스턴스의 불투명도 및 블렌드 모드를 오버라이드 할 수 있습니다. 오버라이드를 사용하면 각 인스턴스를 독립적으로 업데이트할 수 있습니다. 오버라이드가 없으면 심볼의 마스터에서 지정된 기본값을 볼 수 있습니다. 튜토리얼을 보려면 아래 비디오를 참조하십시오.


https://youtu.be/3fcIp5OXtVE


이미지 오버라이드를 적용하려면 비트맵 레이어 또는 마스터에 이미지 채우기가 있는 오브젝트가 있으면 됩니다. 인스턴스를 선택한 상태에서 Inspector에서 이미지 선택 버튼을 클릭하거나 스케치 외부에서 이미지 미리보기로 이미지를 드래그 할 수 있습니다. 동일한 디자인에 다른 컨텐츠를 인스턴스에 적용해야하는 상황에 좋은 방법입니다.

텍스트 오버라이드 업데이트 시 전체 길이가 변경될 수 있습니다. 결과적으로 스케치는 왼쪽 또는 오른쪽으로 정렬된 텍스트 뒤에 위치한 레이어가 텍스트 레이어와의 거리를 유지한채 밀려나가 심볼 및 오버라이드를 완벽하게 활용할 수 있습니다.

텍스트 오버라이드를 편집할 때 뒤에 위치한 레이어의 위치가 업데이트되지 않도록 하려면 Ctrl 키를 누른 상태에서 바로 가기 메뉴에서 "Lock layer"를 선택하여 레이어를 잠급니다.

텍스트를 오버라이드 할 때 별 아이콘의 여백이 어떻게 작동하는지 살펴보세요. 오버라이드가 가능한 세가지 레이어 타입인 중첩된 심볼, 텍스트, 이미지 레이어를 잠그면 Inspector에 항목이 표시되지 않습니다.



라이브러리 심볼 편집

라이브러리에 속한 심볼을 편집하는 방법에 대해 자세히 알고 싶으면 라이브러리 심볼 페이지를 참조하십시오.



심볼 구성하기

복잡한 문서를 작업 할 때 심볼 페이지에 마스터 심볼을 내보내면 전체적인 화면을 보면서 정리하는 데 도움이됩니다.


필수는 아니지만 문서를 구성할 때 심볼이 당신의 디자인에 영향을 끼치지 않게 심볼 페이지에 마스터 심볼을 배치하는 것이 좋습니다.

만약 심볼을 "Symbols" 페이지에 보내지 않고 다른 페이지로 보내려면 심볼을 레이어 리스트의 페이지 제목으로 드래그해 이동할 수 있습니다. 또한 Control-클릭한 뒤 부가메뉴에서 옵션을 선택해 "Symbols" 페이지로 심볼을 보낼 수 있습니다.



심볼 이름

또한 Insert> Symbol을 선택하면 문서의 심볼이 알파벳 순으로 정렬된 팝업 메뉴가 나타납니다.

심볼의 이름에 슬래시 (/)를 포함하면 심볼을 그룹으로 정리합니다. 예를 들어 Button / Normal 및 Button / Pressed라는 두 개의 심볼이 Button이라는 하위 메뉴로 함께 그룹화됩니다.

organizing.jpg



스와핑 심볼

Inspector의 팝업 메뉴를 사용하여 Symbol을 바꿀 수 있습니다. 눌려진 버튼과 일반 버튼의 예에서 두 버튼을 쉽게 바꿀 수 있음을 알 수 있습니다. 그런 다음 오버라이드를 사용하여 각 인스턴스를 설정할 수 있습니다.

그 외에도 모든 레이어를 심볼로 바꿀 수 있습니다. 바꾸려는 레이어를 Control- 클릭하고 상황에 맞는 메뉴의 Replace with 옵션을 통해 심볼을 선택하십시오.



중첩 심볼

심볼을 중첩해서 더 강력하게 사용할 수 있습니다.


중첩된 심볼을 만들려면 인스턴스를 다른 심볼의 마스터 아트보드 내에 배치하세요. 심볼의 마스터를 업데이트하면 변경 사항이 다른 심볼 내부에 있는지 여부에 관계없이 디자인 전체에 적용됩니다. 인스턴스를 마스터에 배치하고 툴바 항목을 통해 삽입하는 것뿐만 아니라 다른 심볼의 인스턴스를 여러 개 선택하고 툴바에서 Create Symbol을 누를 수도 있습니다.

심볼을 중첩 시킬 수 있는 범위에 제한이 없지만, 심볼 안에 마스터 심볼 자체가 포함될 수는 없습니다.



중첩된 오버라이드

심볼 편집하기에서 말했듯이 중첩된 심볼에서 이미지 및 텍스트처럼 인스턴스 심볼를 오버라이드할 수 있습니다.

중첩된 심볼을 오버라이드하면 인스턴스에 포함된 심볼을 다른 심볼과 동일한 크기로 바꿀 수 있습니다. 아이콘 심볼이 포함된 툴바의 심볼이 있다고 가정했을 때, 오버라이드를 사용하면 심볼을 다른 아이콘 심볼로 바꿀 수 있습니다. 이러한 중첩된 오버라이드는 하나의 심볼에 포함된 비슷한 심볼의 숫자를 줄일 수 있으며 각 심볼을 더 자유롭게 제어할 수 있습니다.

문서에서 중첩된 심볼이 오버라이드 되지 않게 하려면 레이어 리스트나 바로 가기 메뉴에서 해당 레이어를 잠그세요.

keyword
매거진의 이전글[번역] 스타일링