도움말 - 글감 수집하기 (인용)

도움말 - 부분 리뷰 작성하기

스케치 앱 튜토리얼 1편 - (총 5편)

소개

웹 디자인을 시작하려는 사람, 스케치 앱(Sketch app)을 처음 사용하는 사람, 포토샵 (또는 유사한 프로그램) 에서 다른 프로그램으로 변경을 망설이는 사람, 또한 UI 디자인을 그저 개발의 일부분으로 생각하는 개발자등 이런분들에게 쉽게 설명해놓은 이 튜토리얼을 통하여 어떻게 스케치 앱(Sketch app) 이 동작하고, 어떻게 desktop, tablet 과 mobile에서 멋진 디자인을 만들어 낼 수 있는지  간략하게 이해할 수 있을 것 입니다.


참고 사항 : 총 5편으로 구성되어 있는 튜토리얼 중 1편입니다. 총 5편의 튜토리얼 연재를 통하여 스케치-Sketch (그리고 몇 가지의 함께 사용하면 좋은 보완 어플리케이션들)를 사용하는 방법을 알려 드리겠습니다. 데스크톱, 태블릿 및 모바일 장치를 위한 멋진 디자인을 만들고, 개발자에게 디자인을 전해 주기위한 준비를하는 데까지 알려드립니다.

기대되나요?  좋습니다. 이제 시작 합니다...



처음부터 시작합시다.

이 첫 번째 부분에서는 응용 프로그램을 중심으로 작업하는 방법과 Sketch에서 이와 같은 디자인을 만들 때 사용하는 팁, 플러그인 및 리소스를 보여 드리겠습니다.


우리가 스케치에서 할 디자인의 작은 부분일 뿐입니다

Sketch의 모든 기능을 세부적으로 다루지는 않겠지 만,이 튜토리얼을 통하여 다음에 새로운  애플리케이션으로 옮겨야 할 경우 가장 먼저 시작할 수 있기를 바랍니다.

전체 튜토리얼을 따를 필요는 없습니다. 이 글에서 약간의 영감을 얻고 싶다면, 잘 오셨습니다.


스케치(Sketch) 로켓을 발사 할 시간.

자~ 좋습니다. 당신의 Mac에 Sketch가 설치되어 있기를 바랍니다. 혹시 당신이 가지고 있지 않으면 조금 이상하겠네요. 혹시나 스케치(Sketch)가 없다면  여기에서 무료 시험판을 가져 오세요.

자~ 이제 당신은 스케치(Sketch)가 모두 설치되어 있기를 바랍니다, 그럼 준비가되어 있습니까? 좋습니다. 이제 Sketch를 시작하여 함께 멋진 작품을 만들어 봅시다.

Sketch를 처음 열면 당신을  상쾌하고 즐겁게할  멋진 레이아웃이 제공됩니다 ...


스케치의 인터페이스는 기본적으로 심플하고 신선합니다

상단에있는 툴바에는 프로젝트 작업시 사용할 수있는 다양한 도구들이 들어 있습니다. 보기(view) 메뉴를 클릭 한 다음 툴바 사용자 정의(Customize Toolbar)를 클릭하여 원하는대로 설정할 수 있습니다 (필요한 것을 표시하고 필요하지 않은 것을 숨김).

요소를 끌어다 놓기(drag & drop) 만하면 쉽고 편리하게 사용할 수있는 당신만의 도구 모음(Toolbar)을 얻을 수 있습니다.

아래에는 세 가지 주요 영역이 있습니다. 왼쪽에는 레이어 목록(Layers List)이 있으며 이곳에 디자인에 추가한 요소가 표시됩니다.

중앙에는 무한 캔버스(Infinite Canvas)가 있으며, 여기서 모든 디자인이 완료됩니다.

오른쪽에는 현재 작업중인 레이어의 설정을 조정할 수있는 Inspector가 있고, 사용중인 현재 도구의 옵션을 조정할 수 있습니다.

무한 캔버스는 스케치를 훌륭하게 만들어주는 핵심 기능 중 하나입니다.

이제는 무한 캔버스에 대해 간략하게 언급하겠습니다, 이는 Sketch를 사용하는데 있어 좋은 주요 기능 중 하나입니다.

문서 크기 또는 출력 해상도를 선택하는 것에 제한받지 않고 부담없이 작업을 시작할 수 있습니다.

저의 이전 경험으로 볼 때, 기존 어플리케이션에서는 디자인을 시작하기도 전에 문서 크기를 지정해야하는 대화 상자가 표시되어 이미 우리의 생각을 제한적으로 만들고 있었습니다.


Example of the infinite canvas in action


이론 상으로는, 당신이 60개의 Artboard 디자인을 만들었다면, 그것들을 하나의 캔버스 영역 안에 모두 넣을 수 있습니다.

프로젝트의 모든 Artboard는 하나의 스케치 파일 안에 저장 할 수 있습니다. 이것은 많은 면에서 유용합니다. 다양한 Artboard간의 이동을 빠르게 할 수 있고, 전체 프로젝트를 위에서 아래로 보는 것 처럼 한눈에 내려다볼수있습니다. 또한 아주 쉽게 다른 Artboard간에 항목들을 복제하고 옮길 수 있습니다.

솔직히, 일단 당신이 무한 캔버스에서 작업하며 기존의 버릇들이 없어진다면, 당신은 스케치가아닌 다른 어플리케이션에서 작업을하기가 매우 어려울 것입니다.

이제 Sketch를 더욱 훌륭하게 만드는 한 가지를 더 소개하겠습니다 (그리고이 점에 대해 감사 할 멋진 커뮤니티가 있음)그것은 바로 플러그인입니다.


No designer should leave home without the Sketch Toolbox

이제 수동으로 플러그인을 설치하거나, Sketch Toolbox라는 멋진 응용 프로그램을 사용하여 여러 플러그인을 쉽게 찾을 수 있습니다.

버튼을 한번 누르는 것 만으로 아주 빠르게 스케치에 플러그인을 설치할 수 있습니다. 이 도구는 훌륭하게 시간을 절약해줍니다.

저는 프로젝트 작업을 할 때 거의 매번 사용하는 몇 가지 플러그인이 있습니다.

자~ 그럼 Sketch Toolbox를 설치 한 다음, 이 앱을 통해 위에서 언급 한 플러그인을 설치하십시오.

아이콘을 가져 오자.

누구든지 좋은 아이콘 세트를 좋아 합니다. 이 튜토리얼에서 사용할 세트는 Entypo의 멋진 SVG 아이콘입니다. 여기에서 그아이콘들을 만날 수 있습니다.

비록 작은 세트이지만 이 튜토리얼에 완벽하며, 다음 튜토리얼를 진행하면서 많은 아이콘이 과도하게 노출되지 않도록 할 예정입니다.

다양하게 많은 아이콘 세트들 중에서 원하는 아이콘을 선택해야 하는 시대는 사라졌습니다.  원하는 아이콘 하나를 찾기위하여 내 컴퓨터의 많은 폴더들을 뒤지고 다녀야했습니다. 쿨하지 못한 상황들 이였습니다.

Oh IconJar, let me count the ways I love thee!

이것은 IconJar라는 어플리케이션을 이용하여  좋은 아이콘들을 가져왔습니다. 이렇게 하나의 응용 프로그램에서 다양한 아이콘 세트를 수집 한 다음 선택한 아이콘을 작업중인 Sketch 문서로 쉽게 끌어다 놓을 수 있습니다. 아 ! 얼마나 기쁜가! 이제 IconJar는 저의 필수 툴킷중 하나가 되었습니다.

무료 사진들을 위한 멋진 도구

You can never have enough free stock photography right?

Sketch를 사용하여 Artwork를 작업할 때, 작업중인 디자인에 placeholder 이미지를 놓거나, 영감을 얻기 원할때, 유용하게 사용할수있는 또 다른 좋은 응용 프로그램 Zoommy 를 소개합니다. 이곳 에서 만나보실수있습니다.

이제 무료 사진들을 제공하는 많은 사이트를 방문하고 가입하는 대신. 이 어플리케이션에는 다양한 사이트를 쉽게 탐색 할 수있도록 되여 있습니다. 주요한 사이트는 Unsplash, Magdeleine, Jay Mantri 등과 같은 사이트가 있구요, 그외에도 많은 사이트들이 있습니다.

Sketch와 함께 작업할 때 Zoommy는 또 다른 필수 도구입니다. 이것이 없었다면 당신은 충분한 양의 무료사진들을 결코 가질 수 없을 것입니다, 안 그런가요?

글꼴(Google)들을  설치해 봅시다. 

Typekit과 같은 멋진 기부 기반 글꼴 서비스가 있습니다. 그러나 이 튜토리얼에서는 Google Fonts에서 몇가지 멋진 글꼴들을 선택 할 것입니다.

그들(Google)은 당신에게 한 푼도 돈을 요구하지 않을 것이고, 거기에서 선택할 수 있는 (좋은, 나쁜 글꼴) 글꼴이 풍부합니다.

Google Fonts에서 3 가지 글꼴 군을 다운로드하고 설치할 겁니다.


  • Raleway
  • Open Sans
  • Satisfy

여기에서 수동으로 다운로드하거나, 환상적인 SkyFonts를 사용할 수 있습니다. 일단 설치하면 Mac의 상단 메뉴바를 통해 SkyFonts 응용 프로그램에서 직접 글꼴을 쉽게 검색하고 설치할 수 있습니다.


키보드 단축키를 알고 있어야합니다.

오! 더 진도가 나가기 전에, 자주 유용하게 사용하는 몇 가지 귀중한 키보드 단축키를 보여 드리겠습니다.

저는 모든 단축키를 다 알려드리진 않을 겁니다, 혹시나 모든 단축키를 알고싶다면이 사이트를 방문해 보세요.

Insert

  • New Artboard: (A)
  • Rectangle: (R)
  • Rounded Rectangle: (U)
  • Oval: (O)
  • Line: (L)
  • Text: (T)

Type

  • Bold: Cmd + B
  • Italic: Cmd + I
  • Underline: Cmd + U

Canvas View

  • Zoom In: Cmd (+) +
  • Zoom Out: Cmd (+) -
  • Actual Size: Cmd (+) 0
  • Center Canvas: Cmd (+) 1
  • Toggle Grid: Ctrl + G
  • Toggle Rulers: Ctrl + R
  • Toggle Layer Guides: Ctrl + L
  • Move Canvas: Space + Drag

Window

  • Toggle Layers List: Alt + Cmd + 1
  • Toggle Inspector: Alt + Cmd + 2
  • Toggle Layers List and Inspector: Alt + Cmd + 3
  • Presentation Mode: Cmd + .

Editing Layers

  • Show distance to other layers: Alt
  • Show distance to other layers inside group: Alt + Cmd
  • Duplicate: Alt + Drag
  • Color Picker: Ctrl + C

Arranging Layers, Groups, and Artboards

  • Bring Forward: Alt + Cmd + ↑
  • Send Backward: Alt + Cmd + ↓
  • Rename Layer/Artboard/Group: Cmd + R
  • Group Layers: Cmd + G
  • Ungroup Layers: Shift + Cmd + G

완벽한 픽셀 레이아웃을위한 그리드 시스템 설정하기

다양한 화면 크기의 디자인으로 작업 할 때, 다양한 기기의 요소를 정렬하기위한 멋진 그리드 시스템과, 디자인을 하는 화면 크기가 실제 스크린 사이즈와 동일하다면 좋을 것입니다.

개발자라면 이미 사용하고있는 Grid 시스템, 예를 들어 Grid가 내장 된 Bootstrap 프레임 워크를 이미 가지고있을 수도 있습니다. 또는 자신이 사용하고있는 것 중 하나를 가지고있을 수도 있습니다.

간단하고, 가벼운 그리드 시스템(Grid System)

저는, 개인적으로. Gridiculous라는 가벼운 그리드 시스템을 사용하여 많은 프로젝트에서 많은 도움을 얻었습니다.

왜냐하면 프로젝트를 개발 (코딩) 할 때 특정 그리드 시스템을 고수하기를 원한다면. 또한 동일한 그리드 시스템에 디자인을 적용하거나, 그 반대의 경우도 마찬가지입니다.

당신은 개발자에게 완성물을 전달할 때 Sketch의 설계가 당신의 그리드 시스템에 곧바로 적용될 것이라는 것을 알고 있습니다.

행복한 디자이너! 행복한 개발자!   - 큐 파렐 윌리엄스 -

이 튜토리얼의 목적을 위해 우리는 12 Column Gridiculous Grid System을 고수 할 것이고, 그것을 빨리 설정하는 방법을 보여줄 것입니다.

Sketch의 도구 모음(toolbar)에서. 보기(View) 아이콘을 클릭하고 드롭 다운에서 레이아웃 설정(Layout Settings)을 선택한 후 다음 스크린 샷과 같이 다음 설정을 입력하십시오.

Layout settings for the Grid system we’ll be using

저는 항상 그리드의 가이드 라인에 대해 약 50 %의 불투명도로 레드를 고수하고 있습니다. 당신이 작업하면서 많은 요소들이 Artboard에 있을 때 제가 세팅해놓은 가이드라인이 눈에 잘 보이게 될것 이고 만족 할것 이라고 자신합니다.

그리드 레이아웃을 토글 링하기위한 단축키 Ctrl + L을 기억하십시오. 이 튜토리얼을 통해 많이 사용하게 될 것입니다.

대시 보드를 가져올 시간 입니다.

자! 우리의 디자인을위한 Artboard를 만들어봅시다, 우리는 'Brooklyn'이라는 이름을 지을 겁니다. 왜 '브루클린'인가? 저는 올드스쿨 힙합의 광 팬입니다. 많은 훌륭한 랩퍼들이 그 지역에서 왔습니다. 음..엄.... 예~.... 그건 사실 제 짐작입니다.

An overview of Artboard sizes that are available

자~ ! A 키를 눌러 오른쪽의 속성 패널(Inspector panel)에서 다양한 Artboard 크기를 선택 할 수 있습니다. Artboard를 중앙 캔버스에 삽입하려면 Desktop HD을 클릭합니다.

이 튜토리얼에서는 Artboard가 너무 짧아서 좌측의 레이어 목록에서 Artboard (이 경우 Desktop HD)를 클릭하십시오. 그리고 오른쪽의 속성 패널(Inspector panel)에서 높이를 7000px로 늘립니다.


이제 우리는 처음부터 넉넉한 작업공간이 생겼습니다.


Increase the height of your Artboard in the Inspector panel

저와 함께 Sketch의 간략한 둘러보기 즐겁게 즐기셨나요?

자! 좋습니다!  이제 우리는 공백의 Artboard를 가지게 되었습니다. 뭐.. 사실.. 딱히 우리가 뭘 한 것은 없지만요. 우리는 공백의 Artboard를 멋진  Artboard로 만들어 나갈 겁니다! 제가 약속하죠!!!  

이 튜토리얼 시리즈의 Part 2 (1주일정도후에 아래에 링크 달아 놓을 예정 입니다.)에서는 데스크톱 화면의 디자인을 시작할겁니다.

우리는 Sketch에 대해 더 깊이 파고들 것이며, Part 2를 진행하면서 더 멋진 기능, 바로 가기 및 팁을 보여 드리겠습니다.

조만간 다시 보길 바랍니다.

이 글를 읽어 주셔서 감사합니다.

Marc


Marc는 Themmed의 창립자이며, a new marketplace for Premium, Sketch 앱의 'Pay What You Want'리소스를 제공합니다.



Sketch와 Prototyping에 대한 지식을 향상시키고 싶습니까?

Sketch와 협력하기위한 가장 많이 팔린 가이드가 제공됩니다.

특별히 이글을 읽는 분에게만 주어지는 혜택입니다.

쿠폰 코드 MEDIUMESSENTIALS35을 사용하여 패키지 중 3 5% 할인을 받으십시오.

https://themmed.com/sketch-app-essentials


이 기사를 읽은 적이 있다면,
아래의 '❤'버튼을 눌러서 좋을 것입니다. 진심으로 감사드립니다

스케치 앱 튜토리얼 2편 바로가기



이 글은 Marc Andrew @ Themmed의 Sketch App Tutorial Series: Part 1 of 5.을 번역한 글입니다. 전문 번역가가 아니라 오역이 있을 수 있으니 참고 바랍니다. 원문은 아래에서 확인 하실 수 있습니다.

번역 도움 : @오역 유발자 ‍ 님께 감사드립니다. 

원본 본문 링크입니다.




리뷰