ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko nb ko ko ko en en ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko km ko ko km ko ko ko km ko ko km ko ko km ko ko km ko km km ko ko ko ko ko ko ko ko km ko km ko ko en ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko en ko ko ko ko en es ko ko ko ko ko ko en
스타일 가이드를 위한 필수 기능 Text Style, Layer Style - 스케치 강좌 | 디자인베이스
홈 스케치 #6 스타일 가이드를 위한 필수 기능 Text Style, Layer Style – 스케치 강좌
스케치 강좌 여섯 번째입니다. 이번에는 스케치의 핵심 기능 중 Text Style, Layer Style에 대해 알아보겠습니다. 저번 시간에 배운 심볼과 같이 사용해야 빛을 바라죠. 스타일 가이드라고 들어보셨나요? 어떤 건지 자세히 알아보고, 심볼과 스타일 가이드를 어떻게 사용하는지 알아보겠습니다.
컬러 시스템, 타이포그래피, 심볼을 활용해서 컴포넌트로 등록해서 작업하면 유지 보수를 아주 효율적으로 할 수 있습니다.
*스케치 툴은 Mac OS에서 사용이 가능합니다.
01. 텍스트 스타일 등록 방법
03. 등록한 스타일 명 변경 및 삭제 방법
텍스트 레이어 선택 > Appearance > 등록된 Text Style > Organize Text Style > 수정할 리스트 더블 클릭하고 스타일 명 변경
( – 누르면 삭제)
04. 스타일 삭제하는 방법
텍스트 레이어 선택 > Appearance > Detach from Text Style
05. 스타일 명 등록 시 꿀팁!
스타일 명을 입력할 때 ‘/’를 넣으면 정보 구조에 뎁스가 생깁니다.
06. 레이어 스타일 등록 방법
주의사항! 관리를 잘해줘야 됩니다. 이곳저곳에 사용된 공통 스타일이기 때문에 하나 바꾸면 전체가 바뀝니다. 올바르게 사용된 것인지 확인해야 됩니다. 스타일이 필요 없는 애들은 스타일을 삭제해주세요.
스케치의 가장 큰 장점은 반복 작업에 들어가는 손실을 보완해주는 것이라 생각합니다. UI 작업 특성상 잦은 수정으로 인해 시간을 많이 빼앗기는데, 심볼과 스타일 관리를 잘해준다면 작업 효율성은 아주 높아집니다.
만약 스타일 가이드가 없다면 디자이너들이 어떻게 작업을 할까요?
보통 본인들의 스타일에 맞게 제작할 가능성이 없습니다. 혹은 잘 된 예를 가지고 작업을 하거나, Behance나 Pinterest, Dribbble 같은 곳에서 보고 개선 혹은 트렌드라는 단어 아래 맘대로 작업하게 됩니다.
그럼 당연히 디자이너도 고민이고, 매번 새로운 작업물을 개발자가 받아서 적용시켜줘야 됩니다. 자연스럽게 시간과 비용이 증가하게 되겠죠?!
웹 스타일 가이드(WSG)라는 용어를 얼핏이라도 들어본 적 있으실 겁니다. 웹뿐만 아니라, 앱 UI에도 스타일 가이드가 있으면 좋습니다. 서체의 종류나 크기, 컬러 사용, 각 UI 엘리먼트 스타일 등 정의를 해놓는 겁니다.
스타일 가이드를 활용하는 대표적인 곳은 머터리얼 디자인이나 에어비앤비 스포카, IBM 등등 다양한 곳에서 스타일 가이드를 가지고 있습니다.. 잘 활용되는지에 대한 부분은 케이스 바이 케이스겠죠?! 에어비앤비는 코드에 맞게 디자인을 거꾸로 하는 재미난 경우도 있습니다… 아무튼
(사실 더 큰 개념인 브랜드 가이드라인을 먼저 알고 가는 게 좋지만… 오늘은 스케치 스타일 사용하는 방법 강좌니까 가볍게 넘어갑니다.)
크게 텍스트 스타일과 레이어 스타일로 나눌 수 있습니다. 텍스트 스타일은 텍스트의 서체 종류, 색, 크기, 서체 효과 등의 스타일을 저장해놓고 사용하는 기능이고, 레이어 스타일은 레이어의 색감이나 그림자, 속성 등의 스타일을 저장해놓고 사용하는 기능입니다.
텍스트 스타일로 타이포그래피, 레이어 스타일로 컬러 시스템과 UI 스타일, 심볼로 UI에 사용될 공통 Elements 들을 만들어주면 전체적인 컴포넌트가 만들어집니다. 손쉽게 UI 작업이 가능하고 유지 보수에 큰 도움이 됩니다.:)
​다음 강좌로는 스케치 리사이징에 대해 알아볼게요.
구독과 좋아요는 강좌를 만드는 데 힘이 됩니다. 궁금한 점이 있다면 댓글로 남겨주세요.
#1 지금 웹 디자인을 배우는 건 너무 늦었나? – 웹디자인 입문 강좌
04. 몽실몽실 털 만들기(3D 모피 효과) – 일러스트레이터 강좌
#3 부트스트랩으로 웹 UI 컴포넌트 파악하기 – 웹디자인 입문 강좌
그라데이션 컬러 추천해주는 사이트
각종 디바이스 무료 목업 (약 90종) by facebook
오너의 마음으로 프로젝트의 A부터 Z까지
clay 재질의 아이폰 목업
날씨 아이콘셋 Frosted Glass
맥북 프로 16인치 목업
10. 자유롭게 화면 조절하는 방법 OrbitControls – Three.js 강좌
27. 귀여운 꿀벌 일러스트 쉽게 만드는 방법 – 일러스트레이터 기초 강좌
09. 3d 물체에 그림자 적용하는 방법 – Three.js 강좌
26. 프리폼 그라디언트로 5초 만에 부드러운 그라데이션 배경 만드는 방법 – 일러스트레이터 기초 강좌
Youtube Instagram Pinterest Naver Blog
포토샵 일러스트레이터 피그마 스케치 XD 프로토파이
웹디자인 웹코딩 인비전 프린서플 Lottie Three.js
소개 매거진 디자인 사전 북마크 무료 소스 문의하기 멤버십
© 2022 Designbase. All rights reserved.