Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sketch
Webdesign

Sketch 심볼을 사용해 플로우 다이어그램을 제작하는 방법

by
Difficulty:BeginnerLength:LongLanguages:

Korean (한국어) translation by Jin Ah Chon (you can also view the original English article)

Final product image
What You'll Be Creating

이 튜토리얼에서 우리는 Sketch에서 재사용 가능한 유저 플로우와 태스크 플로우 다이어그램을 제작해 보겠습니다. 심볼이 효과를 내도록 기본 요소들과 한두 가지 변경된 요소들을 사용해 Sketch 심볼의 파워를 활용할 것입니다.

“플로우차트란 여러 가지로 이루어진 시스템이나 활동에 관련된 사람 혹은 사물의 연속된 동작이나 행위에 대한 다이어그램이다.” — Naema Baskanderi

플로우 다이어그램을 만드는 데 페이지, 화살표, (결정과 예/아니오 표시자를 포함한) 액션, 레이블, 메모에 관한 요소들이 필요합니다. 저는 이 요소들 하나하나에 대해 (제 스타일을 복사하고 싶은 경우를 대비해) 어떻게 생겼는지, 어떻게 기능을 하는지, 어떻게 최종 결과물(big picture)에 딱 맞는지 훑어보려고 합니다. 하지만 그 전에 여러분은 Sketch에서 이름을 짓는 규칙(naming convention)을 살펴봐야 합니다. 이 작업을 하는데 결정적 요인 중 하나이니까요. 자, 본격적으로 들어가 볼까요?

Sketch symbols for flow diagrams
Sketch 심볼은 플로우 다이어그램에 딱 어울립니다.

명명 규칙에 관해 얘기해 봐야 합니다.

네, 우리가 할 작업에는 두 가지 구체적인 이유가 있습니다. 먼저, 체계화시키는 목적으로 레이어에 이름을 짓는 연습을 하는 것이 좋습니다. 파일들을 다른 분들과 같이 작업한다면 특히 더 그렇습니다. 여러분이 그 안에 다양한 텍스트 필드로 심볼을 만들 때에는 아마도 텍스트 레이어로 이름을 짓는 게 이후 그것을 바꾸거나 덮어쓰기하려 할 때 어느 텍스트가 어느 것인지 구별하는 데 유용할 것입니다.

두 번째 이유는 좀 더 좋습니다. 여러분이 특정한 구문(syntax)을 따른다고 가정하면, Sketch는 심볼, 텍스트 레이어, 다른 레이어 안에서 공유되는 스타일을 자동으로 그룹핑 합니다. Sketch는 URL식과 폴더식의 명명 규칙을 필요로 합니다. 예를 들면, 다음에 오는 두 개의 심볼은 적절히 함께 그룹핑될 것입니다.

  • Arrow/S-Shape/Left to Right
  • Arrow/S-Shape/Right-Down-Right

그런 후에 우리가 또다른 시볼의 이름을 짓는다면,

  • Arrow/Default/Left-Up-Left

화살표 아래에도 그룹핑이 되지만, 기본적으로 다른 하위 폴더에서 생깁입니다. 이러한 체계화로 우리는 필요할 때 원하는 심볼을 정확히 찾게 됩니다.

Organizing symbols in Sketch
Sketch에서 체계화된 심볼들

앞으로 이동하는 무엇이든 특히 텍스트 레이어와 심볼, 공유되는 스타일을 이름 지을 때 이것을 기억하세요.

페이지(page) 요소

“페이지(page)”는 플로우 다이어그램의 기초가 되는 부분입니다. 웹사이트나 앱 사용자들은 여러 경로들을 따라와 다양한 작업을 완료하며, 페이지는 언제나 이 중심에 있습니다.

페이지 요소를 만들려면 사각형과 그 위에 텍스트 필드가 있어야 합니다. 사각형의 스타일은 #325372 색상과 중간 굵기와 폰트 크기가 11인 Helvetica Neue입니다. 여러분은 이를 Shared Style(공유되는 스타일)로 제작할 수 있습니다. 페이지 요소를 대문자로 쓰겠지만, 다른 요소들도 같은 타이포그래피를 쓸 것이기 때문입니다. 이렇게 하기 위해서는 options 항목에서 텍스트 형태를 대문자로 바꿔주세요.

사각형은 그 크기가 144px과 96px, 둥근 모서리 값이 5, 배경색이 #F7FCFD, 안쪽 테두리선이 1px에 #B7E7EE 입니다. 최소한 페이지 사각형의 스타일을 공유되는 스타일로 변경하는 것은 좋은 생각입니다. 이후에 편집이 쉬워집니다.

텍스트 레이어를 “Page name”으로 이름을 변경하세요. 이 방식으로 여러분이 이 요소를 새 심볼로써 재사용할 때 텍스트 덮어쓰기가 되어  “text” 대신에 제목이 들어가게 됩니다. 두 가지 모두 선택하고 툴바에서 Create Symbol 버튼을 눌러 그 둘을 하나의 심볼로 전환시킵니다.

Sketch에서 사용자 정의된 바로가기(shortcut) 제작

이 튜토리얼에서 심볼을 많이 제작해 볼 것입니다. Sketch에 이렇게 미리 제작된 용도에 관한 구체적인 핵심 명령어는 없습니다. 그렇지만 자신이 쓸 사용자 정의 단축키를 만들면 됩니다.

먼저 System Preferences로 가고, 거기서 Keyboard로 가세요. 위로부터 Shortcuts 탭을 선택합니다. 왼쪽 패널에서 App Shortcuts를 선택하고 + 버튼을 누르세요. 오버레이 팝업창이 뜹니다. 애플리케이션 목록에서 Sketch가 보입니다. Menu Title 아래에 우리가 목표로 하는 특정 메뉴 아이템 명을 작성하세요. 이 경우에는 (Layer 밑에 첫 번째 메뉴 아이템인) Create Symbol이 되겠지요. 마지막으로 키보드 단축키를 고르세요. 됐습니다.

프로 팁: 어떤 애플리케이션에서도 사용할 수 있습니다.

Custom keyboard shortcut for Sketch
Sketch 용 사용자 정의 키보드 바로가기 생성하기

화살표(arrows)

여러분이 원하는 만큼 다수의 여러 형태의 화살표 스타일을 만들 수 있습니다. 그러나 여기서는 학습 초기용으로 이용할, 수정 가능한 화살표 하나를 제작하는 방법을 보여드릴 생각입니다.

위의 이미지에서 보이듯이 화살표는 다수의 모양을 갖추게 될 것입니다. 화살표를 만드는 데 영리해야 해요. 우선, 시작점과 끝점이 필요합니다. 저의 경우에 속이 빈 동그라미와 삼각형입니다. 삼각형은 제가 Noun Project에서 찾은 SVG 아이콘이에요. 여러분 나름의 단순한 삼각형을 만들거나 아이콘을 사용하셔도 됩니다.

저는 화살표의 동그라미 테두리선과 직선에 #325372를 사용하겠습니다. 색상값이 #FFFFFF인 흰 배경색 동그라미도 있습니다. 자, 이들을 심볼로 변경하고 무엇인지에 따라 이름을 짓습니다. 만일 여러분이 좀 더 머리를 써서 위, 아래, 왼쪽이나 오른쪽에 관한 화살표를 개별 심볼로 만들려고 한다면, 그렇게 하세요. 사실, 그렇게 할 필요가 없답니다.

다음은 직선입니다. 라인 도구로 픽셀 하나를 그립니다. 어떤 스타일로 가던지, 그 선의 스타일은 Shared Style로 변경하세요. 저에게는 2가지의 직선이 있습니다. 주된 화살표와 부차적인 화살표 용도로 쓸 실선과 점선 스타일입니다. 여러 가지 공유된 스타일이 있으면 서로 교체하는 것이 좀 더 쉬워집니다. 나중에 자세히 얘기하죠.

다음에는 시작점과 직선, 끝점을 조합해서 각각의 화살표 종류를 만들도록 하겠습니다. 화살표들은 다이어그램 제작에서 자유롭게 바뀔 수 있어야 합니다. 지금 그렇게 해 보죠.

직선 화살표 심볼 제작

먼저 정사각형 아트보드를 만들어 보죠. 정사각형이라 어떤 모양이라도 똑같이 유지하게 되고, 그러므로 화살표로 작업하기에도 쉽습니다. 제가 만든 아트보드의 크기는 가로와 세로가 각각 80px입니다. 저는 화살표 각각에 대한 아트보드를 제작하는 걸로 시작하고 싶었습니다. 이러한 방식으로 하면 한 번에 모든 화살표들을 볼 수 있습니다. 우선 좌우상하로 바라보는 화살표를 만드는 걸로 시작해 봅시다. 여러분의 화살표를 선택하고 우리가 해왔던 방법으로 심볼로 바꿔 주세요. 새로운 설정 단축키도 잊지 말고 이용해 보세요. 이 심볼들을 Arrow/Default/Left, Arrow/Default/Right 등으로 이름으로 지어 주세요. (여러분은 이해하실 거에요.)

굽은 화살표 제작

좀 더 화살표를 다루기 편해졌으므로 굽은 화살표로 이동해 보죠. 이 부분은 중요합니다. 왜냐하면 크기가 쉽게 작고 커지고 조정 가능한 화살표가 필요하니까요. 계속 진행하면서 세 가지 스타일에 대한 화살표 하나씩 먼저 제작해 보겠습니다.

여전히 가로 세로가 각각 80px 크기이고 벡터 도구 (V)를 사용하는 새 아트보드 안에 L자 모양과 S자 모양, U자 모양의 스타일로 화살표 선을 그려 보세요. 그 선들은 반드시 직각이어야 합니다. 아직 굽게 하지 마세요. 여러분이 선을 깔끔하게 그리기 어려우면, 적절한 지점에 점을 적당히 찍고 나서 직접 그 X와 Y 지점에 선을 그어 위치를 손수 편집해 줍니다.

이미지를 한번 봐 주세요. 그 다음에 선을 둥글게 편집해야 합니다. 각각의 선에서 모서리를 이루는 점들만 선택해 주세요. 시작과 끝점은 선택하지 마시고요. 오른쪽에서 여러분이 원하는 만큼 모서리의 숫자를 증가시키세요. 저는 10px로 했습니다. 자, 선이 찌그러지지 않은 채로 모서리들이 자동적으로 크기가 조정되었습니다.

여기에서 해야 할 마지막 작업은 시작점과 끝점을 추가하는 것입니다. 그 작업을 하기 전에 직선들(우선 그려져 있는 직선들)을 심볼로 변환해 보죠. 우리는 직선이 실제 시작과 끝에 있는, 아이콘을 제외한 종료점을 기준으로 조정 가능하기를 바랍니다. 잠시 후에 시작점과 끝점을 추가하겠습니다. 이 세 개의 화살표를 Arrow/L-Shape/Right-Down, Arrow/S-Shape/Right-Down-Right, Arrow/U-Shape/Right-Down-Left라고 이름을 지어 주세요.

자, 새롭게 만들어진 심볼 어느 하나를 편집하기 위해 더블 클릭합니다. 심볼의 모서리에 시작점과 끝점을 놓고 직선의 끝점을 이용해 중심에 정렬되었으면 좋겠네요. 이상적으로 얘기하면, 여러분은 심볼의 아트보드 모서리를 중심으로 시작점과 끝점을 위치시키고 싶을 것입니다.

마지막으로 화살표의 크기가 변화할 수 있도록 시작점과 끝점 모두에 관해, 나머지 옵션 아래서 fix width(고정너비)fix height(고정높이)를 선택해 주세요. 더불어 각각의 이름을 시작점(Start point)과 종료점(End point)로 잊지 말고 변경해 줍니다. 이렇게 이름을 바꿔주면 유형을 변경할 때 어떤 것이 어떤 것인지 쉽게 알게 됩니다.

이 작업을 L자 모양과 S자 모양, U자 모양 화살표의 남아 있는 방향을 포함해 다른 화살표에도 똑같이 해주어야 합니다. 이전 작업 단계를 반복해서 적용해 주세요.

화살표의 스타일을 다르게 하면 어떨까요?

여러분은 점선, 대시(dash) 기호 표시 외 다양한 스타일의 화살표를 원하는 만큼 많이 가질 수 있습니다. 지루한 부분은 같은 파일에서 하나 이상의 스타일을 사용하고 싶다면, 스타일별로 새 화살표 세트를 만들어야 한다는 것입니다. 그렇지 않으면 Shared Style을 업데이트 하세요. 잊지 말고 Arrow/S-Shape/Right-Down-Right/Dotted  혹은 Arrow/Dotted/S-Shape/Right-Down-Right으로 명명 규칙을 바꾸어 주세요.

액션(actions)

가장 힘든 개발은 그 뒤에 있습니다. 남아 있는 요소들은 많이 어렵지 않습니다. 여기서 액션 요소들은 예(yes)/아니오(no) 표시, 결정(decision) 표시, 단일 액션 레이블에 관한 요소들 입니다.

예와 아니오 표시

예와 아니오 표시는 다이어그램에서 “예”나 “아니오” 액션에 따라 플로우 방향이 어디로 향하는지를 보여 줍니다.

이런 표시는 (적어도 화살표와 비교했을 때) 간단합니다. 저는 Noun Project에서 두 개의 아이콘을 다운로드 받아서 만들었습니다. 다음은 체크 아이콘의 링크X 아이콘의 링크입니다. Noun Project 아이콘은 흰색, #FFFFFF 입니다. 그에 반해 배경색은  👎용으로 #F89B8D, 👍🏿용으로 #FECD75 입니다. �.

이 아이콘들을 심볼로 변환하고 주석기호/예-아니오/👎와 주석기호/예-아니오/👍🏿로 이름을 짓습니다. (네, 이모티콘도 지원됩니다.) ted.) #F2F2F2이고 테두리선은 없습니다. shared style로 저장해 주세요. 정사각형 위로 텍스트 영역이 있어야 합니다. 저는 텍스트 레이어에 “Decision”이라고 제목을 썼습니다. 이름을 적는 레이어가 중요하다는 것을 기억하세요. 그 전에 이미 저장해 놓은 텍스트 레이어가 있으면 재사용하면 됩니다. 그게 아니라면, 텍스트 스타일에서 색상은 #325372로, 서체는  Helvetica Neue와 중간 굵기로, 폰트 크기는 11로 해줍니다. 제 스타일을 복사하겠다면, 텍스트와 정사각형 둘 다 shared style로 전환해 주세요.tyles.
#6FCFDB이고요. 다음은 텍스트 영역입니다. 액션이나 결정 표시에서 텍스트 스타일을 재사용 하세요. 그다음에 Label 텍스트라고 부르는 새 shared style을 만듭니다. 텍스트 색상은 #FFFFFF로 바꿔 주세요. 그런고 나서 심볼로 한번 더 전환합니다. (단축키를 사용해 이 작업을 능숙하게 하실 수 있다고요? 훌륭하세요.  🙌) t. 🙌)
#A4A4A4로, 서체는 Helvetica Neue로, 이번에는 보통 굵기로 하고 폰트 크기는 11입니다. 이 스타일은 지금까지 작업했던 것과는 다릅니다. 그러니 메모 텍스트를 심볼로 만들지 말아 주세요. Shared style로만 추가하겠습니다. style.
모든 단계를 잘 따라와 주셨어요! 여러분이나 여러분의 팀이 유저 플로우와 태스크 플로우 다이어그램을 쉽게 제작할 꽤 근사한 Sketch 파일이 있습니다!agrams!
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.