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 ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko fr ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko en ko ko ko en ko ko ko ko en es ko ko ko ko ko ko en
#1 UI 디자이너가 설명하는 스케치(Sketch)를 꼭 써야 하는 이유 – 스케치 강좌 | 디자인베이스
스케치 툴 강좌의 첫 단추!
드디어 제 현재 직업에 가장 최적화된 스케치 강좌를 시작합니다!! 실무에서 UI 디자이너로 활동하고 있으며, 사용한 지는 4년 정도 됐네요. 스케치도 그동안 많이 업데이트됐고, 플러그인도 방대하고 막강해졌습니다. 차차 실전 예제를 통해 스케치를 배워보도록 하죠.
스케치를 시작하기 전에 다들 궁금하시죠. “스케치를 왜 써야 되는 거야? 꼭 써야 돼?” 주변에서 흔히들 말하죠. 저도 그랬거든요… 현직 UI 디자이너가 설명하는 ‘스케치(Sketch)를 꼭 써야 하는 이유’를 시작으로 스케치 강좌를 출발해 봅시다!
UI 디자이너가 스케치 툴을 사용해야 하는 이유는 수없이 많습니다. 아무래도 스케치를 사용해 본 적이 없는 분들에게 가장 쉽게 설명하기 위해서는 포토샵과 스케치를 비교하는 것이겠죠?
들어도 모르겠다고요? 무슨 심정인지 저도 잘 알아요. 저도 주변에서 쓰라고 추천을 해줘도 안 쓰고 안 쓰다가 반년 후에 써봤거든요…
써보고 나서 느낌을 말씀드리자면 이런 느낌적인 느낌?… 그러니 나중에 후회하지 마시고 스케치를 시도해보세요.ㅎㅎ 스케치 강좌는 꼭 끝까지 보시길 추천드립니다.
포토샵과 스케치의 차이점을 차근차근 비교해봅시다.
01. 용량 자체가 다릅니다. 포토샵 프로그램 자체 용량이 1.74GB로 굉장히 무겁죠. 반면 스케치는 46.7MB로 가볍습니다. 이뿐만이 아닙니다. 간단한 UI 디자인 진행했을 때 시안 파일의 용량은 거의 8배에 가깝게 차이가 납니다.
가볍기 때문에 파일 관리와 유지 보수가 수월하겠죠?
02. 아트보드의 실용성의 차이가 있습니다.
포토샵에서 아트보드 기능이 있지만, 실제 프로젝트에 사용해 봤을 때 온 보딩 페이지 4~5개 했을 경우에도 무거워서 사용하기 힘듭니다. 반면 스케치는 UI 전체를 한 파일로 관리해도 다 무겁지 않습니다. 스케치에서 작업하면 한눈에 들어오기 때문에 유저 플로우나 전체적인 톤 앤 매너를 유지하는 데 더 좋습니다.
03. 비트맵과 벡터의 차이
스케치는 벡터 기반의 툴이기 때문에 x1 배율로 작업할 수 있습니다. 그 이유는 아트보드 편에서 자세히 다룰 예정입니다.
04. 스케치에서 반응형을 지원합니다. 아주 신박한 기능이죠. 시연 영상을 통해 확인해 주세요.
05. 스케치에는 페이지라는 큰 범주가 하나 더 있습니다. iOS, Android 또는 Web, Mobile 등으로 시안 관리가 편하겠죠? 동일한 심볼을 사용해서 사이즈 베리에이션 작업에 유용합니다.
포토샵의 플러그인도 물론 있지만, 사용하는 사람은 거의 못 봤습니다. 반면 양질의 플러그인을 보유하고 있어 작업 능률에 굉장한 도움을 줍니다.
07. 스타일 저장 기능
포토샵에도 물론 기능이 있지만, 모르는 사람들이 많고 알아도 불편해서 사용을 잘 안 씁니다. 반면 스케치에서는 잘만 사용하면 굉장히 효율적인 기능이죠. UI를 템플릿화 하거나 WSG(Web Style Guide) 만들기에 최적화된 기능입니다.
08. 스케치의 넘사벽 기능, 심볼
비슷한 기능이 스마트 오브젝트지만, 애초에 만들어진 목적 자체가 다릅니다. 스케치의 심볼에는 Overide라는 기능이 있어 텍스트 값만 교체하거나 심볼에 심볼을 더 추가해서 상황별 UI를 손쉽게 구현이 가능합니다. 자세한 것은 심볼 영상에서 다뤄볼 예정입니다.
09. 스케치에서는 프로토 타이핑이 가능합니다. 무슨 말이냐고요? 영상을 통해 확인해보세요 : ) 인비전과 거의 흡사한 기능을 스케치 자체에 기능을 넣었습니다.
너무 긍정적으로만 얘기를 했는데… 이제 치명적인 단점을 얘기해 볼게요.
아이맥이나 맥북이 있어야 스케치 툴을 사용할 수 있습니다. 맥 OS에서만 구동되는 툴이거든요… 맥을 사용해본 적이 없는 분들에게는 고민이 될 수밖에 없는 부분이죠. OS 자체 사용성부터 각종 어도비 툴 단축키 등의 본인의 작업 습관까지 바꿔야 되는 것이기 때문에 큰 문제겠죠?
회사에서 프로젝트를 진행할 때 팀원 모두가 스케치를 이해하고 사용해야 가능합니다. 둘 중 한 명만 쓸 줄 안다고 해서 무작정 스케치로 작업하기에는 어려움이 있을 수 있습니다.
문제 1번과 비슷하지만, 아이맥 구입 비용 자체가 워낙 비싸다 보니… 회사 입장에서는 고민이 많이 될 수도 있죠. 그리고 아무리 맥 사용자라도, 스케치에 익숙하지 않으면 바쁘게 돌아가는 프로젝트에서 선뜻 사용하기 꺼려지는 것은 사실이에요. 현재 회사에서 그런 분들을 많이 봤습니다.
결론, 무작정 스케치를 해야 한다고 딱 잘라 말씀드릴 수는 없습니다. 하지만, 본인이 UI 디자이너거나 해당 직군으로 커리어를 쌓고 싶다면 정말 적극 추천드립니다. 합성 위주, 그래픽 작업 위주의 콘텐츠 페이지 작업에는 크게 효과가 없지만, 웹 또는 앱을 구축할 때는 스케치만큼 좋은 툴이 없습니다. 맥 사용하기 좀 그렇다면 어도비 XD를 써보시는 것도 추천드립니다. 어도비 XD는 베타버전 때 사용해봤는데, 스케치와 비슷한 느낌을 줬고, 상당히 가벼웠기 때문에 스케치만큼은 아니어도, 포토샵으로 UI 작업하는 것보다 훨씬 도움이 되실 겁니다.
03. 새 도큐먼트 만들기 & Bleed 이해하기 – 일러스트레이터 기초 강좌
#03 도형과 텍스트 사용법 – 피그마 강좌(멤버십 전용)
#3 핵심 개념 오브젝트, 트리거, 리스폰스 – 프로토파이 강좌
저작권 완전 무료 이미지 사이트 모음
디자인 입문자가 꼭 참고해야 할 사이트
디자이너에게 가장 힘든 클라이언트 유형은?
Macbook Pro 16 목업
서피스 프로 isometric 뷰 목업
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.