스케치

UX/UI 전문가를 위한 제작 툴 완전 정복을 위한 실전 가이드

크리스티안 크래머 저자(글) · 김재이 번역

웹액츄얼리코리아 · 2017년 08월 07일

책 소개

사용자들은 끊임 없이 변화하는 디바이스 환경에 놓여 있다. 사용자들이 원하는 웹사이트나 앱을 만드는 프로젝트를 진행할 때 UX/UI 전문가들은 해야 할 일이 한두 가지가 아니며 속된 말로 노가다 작업을 하고 결과물을 내놓으면 다시 처음으로 돌아가는 일이 부지기수이다. 스케치는 당신과 같은 UX, UI, 웹/모바일 디자이너를 위한 툴이다. 해외 글로벌 IT계에서는 벌써 많은 전문가들이 사용하고 인정하고 있는 툴로 구글, 페이스북 같은 기업에서는 이미 모든 제작에 스케치를 사용하고 있을 정도다. 아이콘, 로고 제작과 심지어 인쇄 작업에도 이용할 수 있는 디자이너의 ‘비서’ 같은 도구며 프로젝트를 진행할 때 협업하는 프로젝트 매니저, 웹 기획자, 앱 기획자, 개발자 등도 알아야 하는 툴로 자리잡아 가고 있다.

작가정보

저자(글) 크리스티안 크래머

저자 크리스티안 크래머(Christian Krammer)는 스케치 앱을 애용하는 프로 UX/UI 전문가다. SketchTips.info 사이트를 2년 넘게 운영하며, 스케치에 대한 팁과 트릭을 공유한다. 최근에는 Skillshare에서 두 차례 스케치 앱 코스를 열기도 했다. 스케치 앱을 만지고 있지 않을 때는 가족과 함께 시간을 보내거나 영화를 감상하는 것을 좋아한다. 많은 사람들처럼 트위터를 통해 종종 스케치 앱 팁을 공유하기도 한다.

번역 김재이

역자 김재이는 현직 책임급 UX/UI 디자이너로, 다년간 국내 회사 근무 후 현재 해외에서 활동 중이다. 호주 REA 그룹에서 5년간 시니어 프로덕트 디자이너로 근무하다가 최근에는 업종 관련 서적을 번역하며 휴식을 즐기고 있다. 다른 번역서로는 『터치를 위한 디자인하기』(웹액츄얼리코리아, 2017)가 있다.

작가의 말

몇 년 전 스케치를 처음 사용하기 시작했을 땐, 이것이 내 인생에 이렇게 많은 시간을 쓰게 만들 줄 몰랐습니다. 하지만 지금은 스케치가 나의 주된 디자인 작업 도구일 뿐만 아니라, 이렇게 책도 쓰게 해주었습니다. 책을 쓰는 것은 내가 항상 꿈 꾸던 일이었습니다. 이 일은 적어도 제게 한 가지를 가르쳐줬습니다. “너의 꿈을 계속 붙잡아라, 추구하라, 그리고 절대 포기하지 마라. 언젠가 새로운 기회가 나타날지 모른다.”

목차

• 1장. 스케치 소개
  2장. 앱 디자인하기
  3장. 아트보드와 이터레이션의 힘
  4장. 로고 만들기
  5장. 개요 페이지 만들기
  6장. 디자인 내보내기
  7장. 기사 페이지 디자인하기
  8장. 반응형 만들기
  9장. 최종 브레이크포인트: 넓은 데스크톱 화면
  10장. 분류 아이콘 디자인하기
  11장. 분류 아이콘 내보내기
  12장. 미니 프로젝트
  13장. 부록

추천사

• 이상용 (UX 디자이너)

  스케치를 강의할 때 어떤 수강생이 혼자 웃고 있기에 “그렇게 좋으세요?” 하고 물은 적이 있습니다. 그러자 이렇게 답하더군요. “이렇게 제 맘을 이해해주는 툴이 있다는 게 너무나 기분이 좋습니다”라고요. 그 말이 여태 기억에 남습니다.
  스케치는 UX/UI 디자이너들의 니즈에 부흥하는 현재까지 알려진 최고의 디자인 툴임에 분명합니다. 또한 구글, 애플, 페이스북에서도 스케치를 도입한 걸로 제품의 실효성을 검증 받았고 국내 주요 스타트업부터 대기업에 이르기까지 많은 디자이너들의 사랑을 받고 있습니다. 사실 저는 작년에 스케치 관련 책을 써보자 결심했었습니다. 하지만 연일 바쁜 업무에다 거의 두 달에 한 번씩 신기능이 업데이트되곤 해 집필할 엄두를 내지 못했습니다. 어디선가 책을 출간한다 해도 프로그램 업데이트 주기가 잦아 이내 구 버전의 기능을 담은 책으로 전락하리라 예상했습니다.
  그러던 중 우연한 기회에 바로 이 책 『스케치』를 감수하게 됐습니다. 원서 제목인 ‘핸드북(handbook)’과는 다르게 교과서 수준으로 스케치의 모든 내용을 커버하고 있단 사실에 놀랐습니다. 나름대로 스케치란 프로그램을 꽤 많이 안다고 생각했는데 알지 못했던 기능과 팁도 많아 책을 감수하면서 오히려 많이 배우게 되었습니다. 무엇보다 과할 정도로 세심하게 기능들을 소개해 놀라웠습니다.
  단순히 스케치의 기능적인 부분만 세밀하게 다룬 게 아닙니다. 오늘날 디자이너가 필히 알아야 할 해상도, 타이포그래피, 그리드 등 이론적인 부분도 예제와 함께 상세하게 설명돼 있습니다. 제가 손꼽아 기다리고 만족했던 책인 만큼 독자 여러분에게 큰 만족을 주는 책이 되었으면 합니다.UX 디자이너

• 윤성권 (스타트업 디자이너)

  유저 인터페이스 디자인만을 위해 만들어진 툴인 스케치에는 버릴 기능이 없다. 툴의 생김과 기능을 익히면 자연스럽게 UI 디자이너의 역할과 작업 프로세스까지 이해할 수 있다. 결코 과장해서 하는 말이 아니다.
  『스케치』는 숙련된 디자이너 옆자리에 앉아, 하나하나 그의 작업을 따라가며 배우는 듯한 구성으로 돼 있는 책이다. 기능 설명과 예제가 앱 디자인 프로세스와 맞물려 자연스레 녹아 있어 지루할 틈이 없다. 현업에서 바로 응용 가능한 이유이기도 하다. 툴의 각 기능 기초부터 작업 속도 향상을 위한 노하우까지 아주 상세하게 기술돼 있어, UI 디자인을 시작하는 사람은 물론 이미 스케치와 UI 디자인이 익숙한 그 누구에게나 도움이 될 책이다. (Sketch3·프로토타이핑 강사)

책 속으로

스케치의 가장 중요한 기능은 아이콘 형태로 상단의 맞춤형 툴바(toolbar)에 위치한다. 하지만 이 프로그램의 진정한 힘은 키보드 단축키에 있다. 스케치의 거의 모든 기능은 키로 접근할 수 있고, 그렇지 않은 기능 또한 쉽게 단축키를 지정할 수 있다. 이로 인해 작업 속도가 빨라지는 것은 물론 업무 효율도 향상된다. 이 효율성은 스케치가 갖는 가장 중요한 특징이다. (14page)

스케치를 특별하게 만드는 것은 간단하게 잘 정돈된 인터페이스와 쉬운 사용법, 그리고 화면 대부분의 공간을 차지하는 캔버스(Canvas)에 있다. 캔버스는 원하는 만큼 얼마든지 디자인 요소를 올려둘 수 있는 무한의 공간이다. (16page)

모바일은 미친 듯이 성장하고 있지만 모바일이 콘텐츠를 소비하는 유일한 방법은 아니다. 여전히 큰 화면을 가진 무수히 많은 디바이스가 있으니 거기에서 정보를 보여주는 방법도 살펴봐야 한다. 그런 이유로 모든 상세 내용을 담은 포괄적인 기사 형식의 관광 사이트를 만드는 과정을 보여주기로 했다. 모바일 버전보다 훨씬 많은 정보를 담고 있으니, 이를 새로운 아이디어와 형식을 시도하는 이터레이션이라고 생각하자. (216page)

출판사 서평

미래 지향적이고 효율적인 UX/UI 디자인 툴, 스케치 앱
사용자들은 끊임 없이 변화하는 디바이스 환경에 놓여 있습니다. 새로운 것에 목말라하는 사용자들의 부름에 조바심이 나는 것이 사실입니다.
사용자들이 원하는 웹사이트나 앱을 만드는 프로젝트를 진행할 때 UX/UI 전문가들은 해야 할 일이 한두 가지가 아닙니다! 속된 말로 노가다 작업을 하고 결과물을 내놓으면 다시 처음으로 돌아가는 일이 부지기수입니다.

누가 대신 해줄 수는 없을까요?
여기 당신의 외침을 듣고 개발된 툴이 있습니다.

바로 스케치(Sketch)입니다.
혹시 그림을 그리는 스케치북을 떠올리진 않으셨나요? 스케치는 당신과 같은 UX, UI, 웹/모바일 디자이너를 위한 완벽한 툴입니다. 해외 글로벌 IT계에서는 벌써 많은 전문가들이 사용하고 인정하고 있는 툴입니다. 구글, 페이스북 같은 기업에서는 이미 모든 제작에 스케치를 사용하고 있을 정도입니다.
아이콘, 로고 제작과 심지어 인쇄 작업에도 이용할 수 있는 디자이너의 ‘비서’ 같은 도구죠. 프로젝트를 진행할 때 협업하는 프로젝트 매니저, 웹 기획자, 앱 기획자, 개발자 등도 알아야 하는 툴로 자리잡아 가고 있습니다.
스케치는 벡터 기반 인터페이스 툴로, 아래와 같은 장점을 가집니다.

ㆍ배우기 쉽다.
ㆍ빠르고 가볍다.
ㆍUI가 간단하다.
ㆍ벡터 기반이다.
ㆍ픽셀 퍼펙션(pixel-perfection)을 지향한다.
ㆍCSS 속성과 SVG200 코드를 제공한다.
ㆍ페이지와 아트보드로 구성된다.
ㆍ변형이 쉬운 부울 기능(boolean operation)을 지원한다.
ㆍ내보내기(export) 기능이 강력하다.
ㆍ심볼과 스타일을 공유한다.
ㆍ키보드 단축키 사용으로 효율적이다.
ㆍ그리드와 레이아웃이 탑재돼 있다.
ㆍ그룹 단위로 크기를 변경한다.
ㆍ스케치 미러(sketch mirror)로 디자인을 디바이스에서 미리 확인한다.

스케치의 무한 캔버스에서 펼쳐보는 무한한 상상력
스케치 앱은 반복 작업을 상당히 단순화해준다는 가장 큰 장점을 갖습니다. 모든 작업을 수치화하고 연산화해 디자인에 수학적인 접근을 가능하게 합니다. 또한 수많은 플러그인을 통해 스펙 시트, 프로토타입, 코드 등을 손쉽게 제작할 수 있어 상당한 양의 시간을 절약해줍니다.
우리 친구 스케치 앱이 반복 작업을 줄여주니 UX/UI 디자이너로서 ‘아이디어’에 집중할 수 있게 되어, 좀 더 사용자들의 부름에 충실히 대답할 수 있겠네요. 단순 작업은 스케치 앱에게 모두 맡기시고, 당신만이 가진 기발한 역량을 발휘해주세요. 스케치 앱의 무한 캔버스에 당신의 상상력을 쏟아 부을 준비가 되었나요?
이미 해외 웹디자인 계에서는 스케치 앱이 인터페이스 디자인 업무를 장악하려는 움직임을 보이고 있습니다. 구글과 페이스북이 스케치를 도입한 점에서 이미 실효성을 인정받은 셈이지요. 조만간 윈도우 사용자를 위한 버전이 공개된다고 하니 선택하지 않을 이유가 없겠습니다.

나의 첫 스케치 앱 가이드
스케치 앱을 처음 시작하려고 하나요? 그럼 『스케치』가 좋겠네요. 스케치를 어느 정도 다룰 줄 아시나요? 그렇다면 『스케치』를 선택해야 합니다.
『스케치』는 숙련된 디자이너의 작업을 옆에서 따라 하며 배울 수 있는 책입니다. 스케치의 모든 기능을 예로 들어 설명해 실무 웹디자인 프로세스를 체험할 수 있어, 초보자로서 가려움증을 앓지 않고 책을 완독할 수 있습니다. 스케치를 다룰 줄 아는 현업 디자이너에게는 이론적인 공백을 메우고, 숙련된 디자이너 크리스티안 크래머의 팁과 노하우를 전수받을 수 있는 좋은 기회가 될 것입니다.

이 책의 특징
ㆍ실무 프로세스와 동일하게 진행되는 모바일앱과 반응형 웹디자인 1:1 강의
ㆍ업무 시간을 혁신적으로 단축시켜주는 플러그인 소개
ㆍ즉각적인 생산성 향상을 위한 50여 가지 Quick Tips 수록
ㆍ개발자와의 효과적인 협업을 위한 소통 매뉴얼

이 책의 대상 독자
ㆍ스케치를 처음 접한 대학생
ㆍ이제 막 스케치를 시작한 취준생
ㆍ스케치를 제대로 파고 싶은 신입 디자이너
ㆍ좀 더 쉽고 빠르게 UX/UI 작업을 하고 싶은 중고급 디자이너
ㆍ스케치로 생산성을 극대화하고 싶은 개발자
ㆍ새롭고 참신한 기능에 목말라하는 스케치 전문가

펴낸 곳 소개
웹액츄얼리코리아㈜
웹액츄얼리코리아㈜는 2008년 4월 설립된 워드프레스 전문 웹디자인 에이전시이자 출판 미디어 회사다. 웹디자인 분야를 전문적으로 다루는 인터넷 매거진도 운영한다. 2008년부터 ‘스매싱 매거진’, ‘어 북 어파트’ 등 글로벌 웹 디자인계에서 최고 인기를 얻고 있는 출판사들과 독점 판권 계약을 맺고 있으며, 해외의 실력 있는 정상급 디자이너와 개발자들이 집필하는 최신 트렌드를 다룬 도서를 중심으로 번역, 출간하고 있다. 지금까지 출간한 책으로는 ‘어 북 어파트’ 시리즈 외에 글로벌 모던 웹디자인 최고 실용서인 《스매싱 북 1, 2》와 전 세계에서 사랑받고 있는 CMS 툴인 워드프레스 한글판 가이드 《 워드프레스 제대로 파기 》 등 다수가 있다. 앞으로도 웹디자인 업계 종사자뿐 아니라 웹사이트 제작에 관심 있는 일반인도 볼 수 있는 좋은 책을 엄선 해 소개할 계획이다. www.webactually.com

스매싱 매거진Smashing Magazine
전 세계 가장 영향력 있는 웹디자인 분야 온라인 미디어 중 하나로, 2006년 스벤 렌나르츠와 비탈 리 프리드먼이 설립했다.
웹디자인계에서 최고 실력을 인정받는 전문가들이 필자로 참여해 웹 디자인, 웹 개발 관련 도서와 e북을 출판하며 수준 높은 심층 기사를 꾸준히 올리고 있다.
2014년 현재 매달 1억 회 이상의 페이지 뷰, 월 평균 600만여 명의 방문자 수를 기록하고 있으며 트위터 팔로워는 99만 명 이상이다.
매년 글로벌 웹디자인 콘퍼런스를 개최해 최신 이슈를 노의하고 글로벌 웹 디자인 트랜드를 제공 하는 등 웹디자인의 질적인 발전에 핵심 역할을 하고 있다. www.smashingmagazine.com

기본정보

ISBN	9791185885124
발행(출시)일자	2017년 08월 07일
쪽수	372쪽
크기	174 * 249 * 25 mm / 860 g
총권수	1권
이 책의 개정정보	새로 출시된 개정판이 있습니다. 개정판보기