스타일 가이드를 위한 필수 기능 Text Style, Layer Style - 스케치 강좌

스케치 강좌 여섯 번째입니다. 이번에는 스케치의 핵심 기능 중 Text Style, Layer Style에 대해 알아보겠습니다. 저번 시간에 배운 심볼과 같이 사용해야 빛을 바라죠. 스타일 가이드라고 들어보셨나요? 어떤 건지 자세히 알아보고, 심볼과 스타일 가이드를 어떻게 사용하는지 알아보겠습니다.

컬러 시스템, 타이포그래피, 심볼을 활용해서 컴포넌트로 등록해서 작업하면 유지 보수를 아주 효율적으로 할 수 있습니다.

*스케치 툴은 Mac OS에서 사용이 가능합니다.

핵심 요약

텍스트 스타일 등록 방법

Text Layer 선택 > Appearance > No Text Style > Create New Text Style > 스타일 명 등록

02. 등록한 스타일 업데이트

등록된 스타일이 변경하고 싶을 때는 폰트 종류, 크기, 폰트 컬러 등 텍스트의 스타일을 수정하면 등록한 Text Style 명 옆에 * 가 생깁니다. 그때 Appearance > Text Style(변경된 텍스트 스타일 명*) > Update Text Style 클릭

03. 등록한 스타일 명 변경 및 삭제 방법

텍스트 레이어 선택 > Appearance > 등록된 Text Style > Organize Text Style > 수정할 리스트 더블 클릭하고 스타일 명 변경

( – 누르면 삭제)

04. 스타일 삭제하는 방법

텍스트 레이어 선택 > Appearance > Detach from Text Style

05. 스타일 명 등록 시 꿀팁!

스타일 명을 입력할 때 ‘/’를 넣으면 정보 구조에 뎁스가 생깁니다.

06. 레이어 스타일 등록 방법

텍스트 스타일과 동일합니다.

주의사항! 관리를 잘해줘야 됩니다. 이곳저곳에 사용된 공통 스타일이기 때문에 하나 바꾸면 전체가 바뀝니다. 올바르게 사용된 것인지 확인해야 됩니다. 스타일이 필요 없는 애들은 스타일을 삭제해주세요.

스케치의 가장 큰 장점은 반복 작업에 들어가는 손실을 보완해주는 것이라 생각합니다. UI 작업 특성상 잦은 수정으로 인해 시간을 많이 빼앗기는데, 심볼과 스타일 관리를 잘해준다면 작업 효율성은 아주 높아집니다.

만약 스타일 가이드가 없다면 디자이너들이 어떻게 작업을 할까요?

보통 본인들의 스타일에 맞게 제작할 가능성이 없습니다. 혹은 잘 된 예를 가지고 작업을 하거나, Behance나 Pinterest, Dribbble 같은 곳에서 보고 개선 혹은 트렌드라는 단어 아래 맘대로 작업하게 됩니다.

그럼 당연히 디자이너도 고민이고, 매번 새로운 작업물을 개발자가 받아서 적용시켜줘야 됩니다. 자연스럽게 시간과 비용이 증가하게 되겠죠?!

웹 스타일 가이드(WSG)라는 용어를 얼핏이라도 들어본 적 있으실 겁니다. 웹뿐만 아니라, 앱 UI에도 스타일 가이드가 있으면 좋습니다. 서체의 종류나 크기, 컬러 사용, 각 UI 엘리먼트 스타일 등 정의를 해놓는 겁니다.

스타일 가이드를 활용하는 대표적인 곳은 머터리얼 디자인이나 에어비앤비 스포카, IBM 등등 다양한 곳에서 스타일 가이드를 가지고 있습니다.. 잘 활용되는지에 대한 부분은 케이스 바이 케이스겠죠?! 에어비앤비는 코드에 맞게 디자인을 거꾸로 하는 재미난 경우도 있습니다… 아무튼

(사실 더 큰 개념인 브랜드 가이드라인을 먼저 알고 가는 게 좋지만… 오늘은 스케치 스타일 사용하는 방법 강좌니까 가볍게 넘어갑니다.)