[번역] 스타일링

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

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

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

Documentation

스타일링

Inspector에서 선택한 레이어의 스타일 속성을 편집하고 변경할 수 있습니다.

레이어의 색을 변경하고 그림자 효과를 적용하는 등 다양한 트릭과 팁을 적용할 수 있는 여러 옵션과 도구를 제공합니다.

속성 구성

여러 개의 채우기, 테두리 및 그림자 등이 표시되는 순서를 정리할 수 있습니다. 옮기려는 스타일을 다른 스타일 사이로 클릭-드래그 하면됩니다.

Inspector 밖으로 드래그하여 스타일을 제거할 수도 있습니다.

사용하지 않는 스타일 제거

채우기, 테두리 또는 그림자 옵션을 지정하고 직접 눈으로 보면서 조정해 새로운 스타일을 효과적으로 시험해 볼 수 있습니다.

왼쪽에 있는 표시 여부 체크박스를 해제하여 각 속성을 숨길 수 있습니다. 하나 이상의 채우기, 테두리 또는 그림자가 선택해제 된 경우 섹션 제목에 표시된 삭제 버튼을 클릭하여 제거할 수 있습니다.

혹은 스타일 속성을 Control- 클릭하고 바로가기 메뉴에서 "Remove"를 선택할 수 있습니다.

스타일 복사 및 붙여넣기

새로운 공유 스타일을 만들지 않고 한 레이어에서 다른 레이어로 스타일을 빠르게 적용하고자 할 수 있습니다. 레이어를 선택한 상태에서 메뉴에서 Edit> Copy> Copy Style를 선택하거나 Option-Command-C를 눌러 복사하고 다른 레이어에 붙이려면 Edit> Paste> Paste Style을 선택하거나 Option + Command + V를 누릅니다.

레이어의 불투명도 빠르게 조정

레이어를 선택한 뒤 키보드의 1-9 키를 눌러 레이어의 불투명도를 빠르게 조정할 수 있습니다. 예를 들어 9와 6을 빠르게 연속해서 누르면 불투명도가 96%로 설정됩니다. 9를 누른 뒤 잠시 시간을 두고 6을 누르면 불투명도가 90%에서 60%로 변경됩니다.

채우기

단색, 다양한 유형의 그라디언트, 패턴 또는 이미지, 노이즈 등 다양한 방식으로 레이어를 채울 수 있습니다. 다른 유형의 채우기로 바꾸려면 채우기 색상 버튼을 클릭 한 다음 팝업 상단의 6개 아이콘 중 하나를 선택하십시오.

채우기 유형

단색 채우기

선형 그라디언트

방사형 그라디언트

각도 기울기

이미지 채우기

노이즈 채우기

노트: F 키를 눌러 레이어의 채우기를 빠르게 전환할 수 있습니다.

채우기 추가

레이어에 새 채우기 속성을 추가하려면 채우기 섹션 제목에서 추가 버튼을 클릭하면됩니다. 한 레이어에 여러개 채우기 아래에서부터 위로 쌓이게 적용 할 수 있습니다. 채우기는 블렌드 모드가 있으며 칠 사이의 불투명도를 조정할 수 있습니다.

참고 : 가장 위에 있는 채우기가 완전히 불투명한 경우 뒤에 있는 채우기가 보이지 않아도 스케치 앱은 채우기를 렌더링합니다.

이미지 채우기

이미지 채우기 버튼을 클릭하면 사용자가 이미지를 삽입하거나 사용 가능한 패턴 사전 설정 중 하나를 선택할 수 있습니다. 팝업 메뉴에서 이미지를 채우기, 맞춤, 늘이기 또는 바둑판 식으로 설정할 수 있습니다.

채우기 : 레이어의 너비에 맞게 이미지의 크기를 조정합니다.

노이즈 채우기

Noise Fill을 사용하면 레이어에 다양한 레벨의 그레인을 추가할 수 있습니다. 약간의 작은 텍스처를 추가하여 모양에 질감이 추가되어 더 사실적으로 만듭니다.

스케치에는 네 가지 노이즈 옵션이 있습니다. 원본 (이전 버전의 스케치에서) 흰색, 검정색 및 색상. 각 노이즈 채우기에 사용자 정의 블렌딩을 적용할 수도 있습니다.

채우기 설정

채우기가 레이어에 적용되면 채우기 섹션 제목에 설정 버튼이 표시됩니다. 여기에서 winding rule이라는 것을 조정할 수 있습니다. 이 옵션을 사용해 겹치는 패스의 복잡한 모양을 채우는 방법을 정의할 수 있습니다.

테두리

텍스트 레이어를 제외한 모든 레이어는 원하는만큼 테두리를 설정할 수 있습니다. 이들은 모두 다양한 두께, 색상 및 블렌드 모드를 가질 수 있습니다.

테두리 위치

테두리 위치는 모양의 윤곽선의 안쪽, 가운데 또는 외부에 배치하여 닫힌 모양으로 조정할 수 있습니다. 열려있는 패스에는 가운데만 지정할 수 있습니다.

테두리 색상

다양한 채우기 옵션과 마찬가지로 테두리를 단일 단색 또는 다양한 그라디언트로 스타일을 지정할 수 있습니다.

단색 채우기

선형 그라디언트

방사형 그라디언트

각도 기울기

노트: B 키를 눌러 레이어의 모든 테두리를 빠르게 전환할 수 있습니다.

테두리 옵션

테두리 제목의 설정 버튼를 클릭하여 레이어의 모든 테두리에 사용자 지정 및 옵션을 추가 할 수 있습니다. 팝오버에 추가 옵션이 표시됩니다.

끝과 결합

테두리 끝은 선 레이어와 열린 패스에서 볼 수 있습니다. 여기서 라인에 맞대기 캡, 라운드 캡 또는 돌출 캡이 있어야 하는지 여부를 선택할 수 있습니다.

Butt cap : 벡터 점에 바로 테두리를 그릴 기본 옵션입니다.

Round cap : 반올림 된 반원형 끝점을 벡터 점을지나 연장하는 패스에 만듭니다.

Projecting cap : 둥근 캡과 유사하지만 직선 모서리가 있습니다.

결합은 세 개 이상의 점이 있는 열린 패스와 닫힌 패스에서 볼 수 있습니다 (모서리 생성). 모양의 모퉁이가 렌더링되는 방식을 변경합니다.

Miter join : 이것은 각지거나 뾰족한 결합을 간단하게 만듭니다. 기본 설정입니다.

Round join: 테두리에 둥근 모서리를 만듭니다. 반지름은 테두리 두께를 기준으로 합니다.

Bevel join : 테두리 모서리에 사선으로 깎인 모서리가 생성됩니다.

화살촉

선 레이어의 끝부분 외에도 선의 시작과 끝부분에 화살촉을 선택할 수 있습니다. 메뉴에서 Layer> Path> Reverse Order를 선택하여 순서를 바꿀 수 있습니다.

대시 라인

테두리 옵션의 하단에 선을 구성하기 위한 네 개의 텍스트 필드가 있습니다.

예를 들어, 4-2로 대시 패턴을 만들면 4 픽셀의 선뒤에 2 픽셀 간격이 생기며, 5-4-3-2의 대시 패턴은 5px 선, 4px 간격, 3px 선, 2px 간격이 반복됩니다.

그림자

그림자와 내부 그림자 두가지 스타일은 동일한 방식으로 작동합니다. 그림자는 적용된 모양의 외부에 그려지며, 내부 그림자는 모양 내부에서 그려집니다.

X, Y 위치와 블러 반경, 스프레드 및 색상을 지정할 수 있으며 여러 그림자를 적용할 수 있습니다. 색상 팝업 메뉴에서 그림자의 블렌드 모드를 조정할 수 있습니다.

참고 : 400% 이상의 레벨로 확대하면 블러가 적용된 그림자가 캔버스의 레이어에서 보이지 않습니다. 그림자가 많은 문서를 성능을 최적화해 빠르게 렌더링하기 위해서입니다. Export한 에셋에는 영향을 주지 않으며 설정한대로 그림자가 적용되어 내보냅니다.

스프레드

그림자의 스프레드 값을 편집하면 그림자의 크기가 커집니다. 텍스트 레이어의 그림자는 조정할 수 없습니다.

블러

레이어에 4가지 방식으로 블러를 적용할 수 있습니다. Inspector에서 제목 섹션을 클릭하고 팝업 메뉴에서 선택할 수 있습니다.

Gaussian Blur : 모든 방향으로 정확하게 흐려지는 일반적인 흐림 유형입니다.

Motion Blur: 한 방향으로만 흐리지며 움직이는 것처럼 보입니다.

Zoom Blur : 한 지점만 흐려집니다.

Background Blur : 레이어 뒤에 나타나는 모든 컨텐츠를 흐리게 표시합니다.

배경 블러 효과

다른 블러 효과는 바로 적용되어 확인할 수 있지만 배경 블러 효과를 보려면 불투명도를 조정해야합니다.

배경 블러

이 블러 유형을 사용하면 iOS 및 macOS의 창에서 사용되는 블러 효과를 사용할 수 있습니다. 모양 아래의 내용이 흐리게 나타나고 Inspector에서 흐림 반경을 조정할 수 있습니다. 불투명도가 낮은 채우기를 적용하면 흐리게 처리 할 수 있습니다.

성능

문서에 블러를 많이 적용하면 스케치가 느려질 수 있으므로 특히 많은 또는 큰 모양에 배경 흐리게 효과를 적용할 때 주의하세요. 레이어가 커지거나 블러가 클수록 렌더링에 더 많은 메모리와 처리 능력이 필요하므로 가능하면 사용을 자제해야합니다.

색상

레이어를 선택하면 Inspector에서 컬러 피커를 사용할 수 있습니다. 채우기, 테두리 또는 그림자에 대한 색상 버튼을 클릭하면 팝업이 표시됩니다.

Color Picker는 HSB(색조, 채도, 밝기) 색상 모델을 기반으로합니다. 점을 수평으로 드래그해 채도를 강하게/약하게 하거나 수직으로 끌어 밝기를 조정할 수 있습니다.

색조를 변경하려면 피커 아래의 슬라이더를 클릭하고 드래그하세요. 오른쪽에서 선택한 색상을 미리 볼 수 있습니다. 아래 슬라이더를 사용하여 색상의 불투명도를 조정할 수 있습니다.

사전에 정의한 색상 세트로 작업하는 경우 팝오버 창에서 더 많은 공간을 사용하기 위해 전체 섹션을 숨길 수 있으며 팝오버에서 더 많은 프리셋을 볼 수 있습니다.

스포이드

색조 및 알파 슬라이더 왼쪽의 스포이드 버튼을 사용하여 디스플레이의 모든 색상을 샘플링할 수 있습니다. 이 기능을 사용하면 디자인에서 색상을 선택하거나 스케치 내/외부의 이미지를 빠르게 선택할 수 있습니다.

선택한 레이어를 사용하여 Control-C를 눌러 스포이드 도구를 고르고 원하는 색상을 클릭해 단색 채우기 색상을 변경할 수 있습니다.

색상 값

색상 선택 영역의 하단에 코드로 변환할 수 있는 색상값이 표시된 텍스트 필드가 있습니다. HEX 값은 따로 표시되며 알파값을 위한 RGB와 A 필드가 표시됩니다.

노트 : RGB 라벨을 클릭하여 HSBA 색상 값으로 전환 할 수 있습니다.

자주 쓰는 색상

색조 및 불투명도 슬라이더의 오른쪽에있는 색상 미리보기를 클릭하면 현재 문서의 자주 사용하는 색상 목록과 사용 빈도에 대한 정보가 표시됩니다.

수동으로 프리셋을 만들지 않고도 자주 쓰는 색상을 쉽게 재사용 할 수 있습니다.

프리셋

스케치의 색상, 그라디언트 및 이미지 사전 설정은 Global, Document 두 가지 형식으로 제공됩니다. Document 색상, 그라디언트 및 이미지 사전 설정은 저장한 문서에만 나타며, Global 색상, 그라디언트 및 이미지 사전 설정은 모든 스케치 문서에 표시됩니다.

이러한 구분은 개별적인 색 구성표를 가진 여러 프로젝트를 작업할 때 효과적입니다. 좋아하는 중요한 사전 설정을 저장하여 모든 문서에서 접근할 수 있습니다. 현재 대상에서 추가 버튼을 클릭하면 현재 선택된 스타일을 저장할 수 있습니다. 클릭하고 드래그하여 프리셋을 재정렬하고 두 섹션간에 이동시킬 수 있습니다.

색상 사전 설정을 추가하면 색상의 알파값이 적용됩니다.

색 찾기,대체하기

Find and Replace Color 도구로 문서에 쓰인 색을 선택하고 한번에 교체할 수 있습니다. 여러 아트보드와 페이지에 쓰인 색을 바꿀 때 시간을 절약할 수 있습니다.

이 방식으로 색을 바꾸려면 Edit › Find and Replace Color…를 선택하거나 Option-Command-F를 누릅니다. Find 버튼을 눌러 디자인에 사용한 색 하나를 선택하고 새로운 색을 Color Picker에서 선택한 뒤 Replace를 누릅니다.

"Include all opacities of this color"를 선택하면 다른 모든 요소들에 같은 HEX나 RGB 값이 적용됩니다.

"Preserve original opacity"를 선택하면 기존 오브젝트의 투명도가 유지됩니다. 이 옵션을 선택하지 않으면 Color Picker에서 선택한 색의 투명도로 바뀝니다.

색 관리

스케치는 "Color Manage"를 지원해 당신의 디자인이 기기에 최고의 상태로 표시되도록 합니다. 더 자세히 알아보려면 Color Management 글을 읽어보세요.

그라디언트

레이어에 그라디언트 채우기를 적용하려면 Inspector의 채우기 섹션 아래에 있는 색상 버튼을 클릭하고 팝업 상단의 그라디언트 버튼 중 하나를 선택합니다.

그라디언트 방식은 선형, 방사형 및 각형 3가지로 거의 비슷한 방식으로 작동합니다.

선형 그라디언트

가장 일반적으로 쓰이는 방식입니다. 두 색상이 대상의 반대 지점에 나타나고 서로 섞이거나 서로 전환됩니다.

각 색상은 포인트로 표시되며 클릭하면 Color Picker를 통해 색상을 조절할 수 있습니다. 이 색상 포인트 중 하나를 업데이트하면 캔버스의 그라디언트가 바로 업데이트됩니다.

그라디언트에 원하는만큼 많은 색상을 추가할 수 있습니다. 캔버스에서 두 개의 기존 포인트 사이에 표시되는 선을 클릭하여 다른 포인트를 추가하고 색상을 조정하세요. 포인트를 클릭하고 드래그하여 위치를 조정하거나 그라디언트의 방향을 변경할 수 있습니다.

그라디언트에서 색상을 제거하려면 캔버스에서 색상을 선택하고 키보드의 Delete 또는 Backspace 키를 누릅니다.

방사형 그라디언트

방사형 그래디언트는 원형 패턴으로 색상 변화가 나타납니다. 효과의 중심에서 포인트를 클릭하고 드래그하여 그라디언트를 시작할 위치를 지정할 수 있으며 반대쪽 포인트를 조정하여 효과가 끝나는 거리를 변경할 수 있습니다. 원주에 나타나고 중심에 연결되지 않은 세 번째 포인트는 방사형 그래디언트의 모양을 타원형으로 바꿉니다.

각도 기울기

이 효과를 사용하면 시계 방향 그라데이션을 만들 수 있습니다 (레이어의 최대 너비 또는 높이로 측정). 드래그하여 색상 포인트를 이동할 수 있으며 다른 그라디언트에서와 마찬가지로 포인트를 추가하거나 제거할 수 있습니다.

그라디언트 바

캔버스에서의 편집 뿐만 아니라 색상 팝업에서 그라디언트를 편집할 수도 있습니다. 채우기 유형을 변경하기 위한 버튼 아래의 Color Picker 위에 그라디언트 막대가 있습니다.

클릭하면 여기에 있는 포인트 중 하나를 선택하고, 드래그하여 이동하거나, 두 번 클릭하여 새 포인트를 추가할 수 있습니다. 포인트를 선택하고 백 스페이스 키를 눌러 제거할 수 있습니다.

바로 가기

몇 가지 편리한 키보드 단축키를 사용하여 그라디언트를 세밀하게 조정할 수 있습니다. 포인트(시작 또는 끝이 아님)가 그라데이션의 상대적인 비율로 위치하도록 하려면 1-9 키를 누르면 됩니다. 세 번째 포인트를 선택한 뒤 4를 누르면 라인을 따라 40% 위치에 배치됩니다.

기존의 두 포인트 사이에 정확하게 포인트를 배치하려면 키보드에서 = 키를 누르십시오.

Tab 키를 사용하여 색상 포인트를 빠르게 전환 할 수 있으며 화살표 키를 사용하여 포인트의 위치를 점진적으로 조정할 수 있습니다. Shift 키를 누르고 있으면 움직임이 더 커집니다.

공유 레이어 스타일

공유 스타일은 Inspector의 일반 레이어와 스타일 속성 사이에 있습니다.

선택한 도형을 이 영역에서 Create New Shared Style를 통해 새 스타일을 만들 수 있습니다. 원하는만큼의 스타일을 만들 수 있으며이 패널을 사용하여 기존 스타일간에 전환 할 수 있습니다.

공유 텍스트 및 레이어 스타일은 수동으로 동기화하므로 문서를 독립적으로 편하게 제어 할 수 있습니다. 또한 Option 키를 누르고 되돌리기 버튼을 클릭하여 동기화되지 않은 스타일에 대한 변경 사항을 재설정 할 수도 있습니다.