스케치(Sketch) : 4. 텍스트
UI/UX 디자인을 위한 프로토타이핑 툴 - 스케치(Sketch)
(참고. 다른 그래픽 툴과 기능이 같거나 비슷한 요소는 생략하고, 스케치에서 차별화된 요소를 중심으로 정리.)
텍스트(Text)
단축키는 ‘T’이며, Text의 기능 또한 포토샵 또는 기타 그래픽 툴과 비슷하다.
텍스트 스타일
스케치의 장점이 이제 하나둘씩 나타나기 시작하는데, 자주 사용하는 텍스트 스타일을 따로 지정할 수 있다. 포토샵으로 작업할 때의 노가다를 덜어주는 아주 ‘고마운’ 기능이다. (그동안 스타일 하나 바꾸겠다고, 여러 개의 포토샵 파일을 열어, 일일이 수정했던 생각을 하면… )
위 이미지에서는 텍스트를 크게 3가지 스타일로 구분했다. ‘알림/타이틀(Alert/Title)‘, ‘알림/설명(Alert/Description)‘, ‘알림/버튼(Alert/Button)‘. 캔버스에서 텍스트를 클릭하면, 해당 텍스트 스타일이 오른쪽 사이드바의 ‘인스펙터’ 영역에 표시된다.
이 목록의 좋은 점은 오른쪽 이미지에서 보는 것처럼 목록에 텍스트의 서체(Typeface), 크기(Size), 정렬(Alignment), 색상(Color) 등의 세부 정보가 비주얼 하게 적용되어 나열된다는 것이다.
최근 끝낸 프로젝트는 포토샵에서 작업했는데, ‘라이브러리’에 네이밍을 아무리 잘 지정하더라도, 나중에 이름만 봐서는 어떤 스타일을 지정을 했는지 직관적으로 알기 힘들었다. (내가 네이밍해서 정의한 것도 기억하기가 힘든데, 협업 중인 다른 디자이너에 의해 스타일이 정의 되었거나 또는 텍스트 스타일 목록이 많아지게 되면 파악하는데도 상당한 시간이 소요된다.)
텍스트를 ‘텍스트 스타일(Text Style)‘로 지정, 해제하는 방법은 간단하다.
‘텍스트 스타일’ 지정하기
1. 텍스트 툴을 이용하여(단축키 T) 캔버스에 글자를 입력
2. 1번 글자를 클릭하고, 오른쪽 사이드바의 인스펙터에서 ‘Creat New Text Style’ 클릭(첫 번째 이미지의 3번 참조)
3. 빈칸에 스타일 이름을 지정한다.
동일한 ‘텍스트 스타일’로 지정되어 있다면, 한 번의 ‘텍스트 스타일’ 정보 변경으로, 지정된 모든 텍스트를 한꺼번에 바꿀 수 있다. (시간 왕 절약되는 꿀 기능)
‘텍스트 스타일’ 해제하기
1. ‘텍스트 스타일’을 해제할 텍스트 선택
2. ‘No Text Style’ 클릭(첫 번째 이미지의 1번 참조)
스케치의 텍스트 스타일(Text Style)’기능은 프로젝트 후반에 작성하게되는 ‘스타일 가이드’ 작업에서(시간적, 정신적으로) 절대적인 도움이 된다.
그동안 스케치를 사용하면서 간단하게 메모해 두었던 기능들을 정리하는 중이다. 스케치(Sketch)가 아직은 생소한 사용자에게 이 포스트가 조금이나마 도움이 되길 바란다. 새로운 툴을 사용하는 것에 대한 두려움을 버리고, 다음 프로젝트에 도입해서 적용해 보기를 권한다.
연재 순서는 다음과 같다.
스케치(Sketch) 기능 살펴보기
1. 설치하기, 관련 링크(Installing, Useful Links)
2. 인터페이스(Interface)
3. 레이어(Layer)
4. 텍스트(Text)
5. 슬라이스(Slice)
7. 스케치사용팁 : 키보드 숏컷(shortcuts)
8. 플러그인 소개
