02

INTERFACE

INTERFACE

AdobeXD의 인터페이스

AdobeXD 의 인터페이스는 여느 프로그램에 비해 심플하지만 많이 쓰던 포토샵이나 일러스트와는 약간 다르다. 어떤 메뉴가 있고 어디에 위치 해 있는지 자세히 살펴보자. 메뉴 항목을 모두 쓰는 디자이너는 없겠지만 메뉴의 유무와 위치를 알아두면 분명 유용할 것이다.
단축키 표현은 매우 자주 쓰이는 것(꼭 기억해야 할) , 알고 있으면 편한 것, 굳이 몰라도 되는 것, 그리고 아예 몰라도 상관없는 것은 표기 조차 안 했으니 참고 하기를 바란다.

AdobeXD 실행

AdobeXD 실행

interface_00

AdobeXD를 실행하면 등장하면 나오는 첫 화면이다. 처음 접하는 사람들은 꽤 많은 내용이 처음에 등장해서 놀랄 수도 있지만 최근 어도비 CC 프로그램들은 이와 같은 형태를 가지고 있으니 좌측부터 하나씩 살펴보자.

Home
첫 화면. 현재 위 이미지와 같은 상태. 새로운 문서를 시작 할 수 있는 홈.

Add-ons
플러그인이나 UI Kit 등을 찾아 보고 설치 할 수 있는 화면

 

Cloud Documents
AdobeXD 파일을 클라우드 문서에 저장하는 곳으로 이곳에 저장하면 자동 저장 되며 파일을 공유 할 수 있고 공동 작업도 가능하다. 기존의 Creative Cloud 와 달리 공유를 위한 공간으로 이해해야 한다. 공동 작업을 하려면 꼭 이 공간을 이용해야 한다. 

Shared with You
Cloud Documents 에 나와 공유된 파일을 보여준다. 

Manage Links...
나의 Cloud Documents 파일과 공유 프로토 타입, 디자인 스펙 등의 나의 파일들을 관리 할 수 있다.

Deleted
지운 파일을 볼 수 있다. 지운 파일을 다시 살릴 수도 있다. 

 

Your Computer
내 컴퓨터 파일을 바로 열 수 있는 화면

 

What's New
AdobeXD 의 업데이트를 확인 할 수 있는 링크. 내용을 살펴보면 어떤 업데이트를 했었구나 라는 히스토리가 남겨져 있으니 살펴보면 도움이 될 수 있다.

Learn & Support
어도비에서 제공하는 공식 투토리얼이나 가이드 등의 내용을 볼 수 있다.

Provide Feedback
AdobeXD 를 사용하다가 버그나 새로운 기능에 대한 의견을 등록할 수 있고 그에 따른 피드백도 받을 수 있는 곳이다. 물론 다른 사람들의 의견이나 피드백들도 볼 수 있다. 

다음 중앙 상단에는 어떤 아트보드로 프로젝트를 시작할지 가장 많이 쓰이는 아트보드가 전시 되어 있고 우측에는 공식 튜토리얼로 갈 수 있는 링크가 있다. 하단에는 최근 작업했던 내용이 전시 되어 있어 최근에 작업 한 것을 다시 작업하려면 클릭하면 바로 최근 프로젝트가 열린다. 
자, 아이폰 아트보드를 클릭해서 AdobeXD 를 본격적으로 시작해 보자

문서 시작

interface_01

아이폰 아트보드를 클릭하여 시작하면 첫 화면에 내가 선택한 아이폰 아트보드가 생성되면서 AdobeXD 가 시작된다. 전체 메뉴의 레이아웃을 보면 PC 상단에 프로그램의 글로벌 메뉴가 존재하고 프로그램 상단과 좌측 우측에 메뉴들이 존재 하며 중앙에는 작업 공간이다.

Menu Bar

XD
img_interface_01

About XD 
AdobeXD 프로그램 소개

Preferences... 
설정 메뉴지만 아직 쓸 수 없다.

Services 
PC 설정과 기타 연동 되는 서비스를 볼 수 있다. 

Hide XD & Hide Others & Show All
AdobeXD를 화면에서 감추거나 다시 모두 나타나게 하거나...

Quit XD (Cmd+Q)
AdobeXD 종료

File
img_interface_02
img_interface_03

New (Cmd+N)
새로운 문서를 생성할 수 있다.

Open (Cmd+O)
기존의 문서를 열 수 있다.

Open Recent
최근 작업했던 파일을 바로 꺼내어 작업할 수 있다.

img_interface_04
img_interface_05

Get UI Kits
UI Kits 을 다운 받을 수도 있는데 IOS, Android, Window UI들과 기타 와이어 프레임과 여러가지 UI kits 를 얻을 수 있다.

Open CC Libraries... (Cmd+Shift+L)
CC 라이브러리를 자주 쓰는 사람이라면 CC 라이브러리를 통해 유연하게 프로그램간 에셋들을 사용할 수 있다.

Close (Cmd+W)
문서를 종료한다.

Save... (Cmd+S)
문서를 저장한다. 

Save As... (Cmd+Shift+S)
문서를 다른 이름으로 저장한다.

Revert to Saved
문서를 최종 저장된 상태로 되 돌린다.

Export (Cmd+E, Cmd+Shift+E)
문서 또는 에셋들을 내보낼 수 있다.
Layer 에서 batch로 선택해 놓은 오브젝트, 에셋들을 내 보낼 수 있고, 선택되어진 오브젝트들을 내 보낼 수 있으며 모든 아트보드를 한번에 내 보낼 수도 있다. After Effects 로 바로 보낼 수도 있다. Zeplin 을 사용한다면 Zeplin 을 실행한 상태에서 Zeplin 으로 내 보낼 수 있다.
이미지로 내 보낼 때에는 JPG, SVG, PNG, PDF 의 종류로 내 보내기 할 수 있으며, 프로젝트의 성격에 따라 디자인, 웹, IOS, Android 로 내 보낼 수 있는데 이때 디자인은 그냥 1배수, 웹은 1,2 배수, IOS 는 1,2,3배수, Android는 hdpi 부터 xxxhpi 까지 총 6개의 파일을 내 보내 준다. 한꺼번에 내보내기 되어서 편리하기도 하지만 그 중 한 배수만 써야 할때는 다른 파일을 지워야 하는 불편함을 준다. 

Import... (Cmd+I)
이미지등의 에셋파일을 불러 올 수 있다. 대부분 드래그 앤 드롭 방식으로 불러오기 때문에 잘 쓰이지는 않는다. 이유는 나중에 알 수 있을 것이다. 

Share... 
문서를 프로토 타입, 디자인 스펙 으로 공유할 수 있고 나의 공유 문서 관리도 가능하며, 나의 프로토 타입의 동영상 녹화도 가능하다.

Manage Published Links...
나의 공유 문서 관리

Edit
img_interface_06

Undo (Cmd+Z)
최근 실행을 되돌린다

Redo (Cmd+Shift+Z)
되돌렸던 실행을 다시 실행한다.

Cut (Cmd+X)
선택한 에셋을 잘라낸다. 잘라낸 에셋을 가지고 있다는 뜻이다. 

Copy (Cmd+C)
선택한 에셋을 복사한다. 

Paste (Cmd+V)
복사하거나 잘라낸 에셋을 붙여 넣기 한다.

Paste Appearance (Cmd+Option+V)
복사한 에셋의 속성을 붙여 넣기 한다. 컬러나 모양등을 붙여 넣는 방식으로 매우 유용하게 쓰일 수 있다. 

Duplicate (Cmd+D)
선택한 에셋을 복사한 후 바로 제 자리에 붙여 넣기 해 준다. 같은 위치에 같은 에셋을 더 만들고 싶을때 사용한다.

Delete (Delete)
삭제하기

Select All (Cmd+A)
전체 에셋을 선택해준다.

Deselect All (Cmd+Shfit+A)
선택된 전체 에셋을 비선택 상태로 돌려준다. 복잡한 작업을 할때 나도 모르게 무언가를 선택하고 수정하거나 여러 행동을 할 수도 있다. 이때 확실히 아무것도 선택되지 않은 상태로 만들기 위함이다.

Spelling and Grammar
맞춤법과 틀린글자를 체크해 주는 기능이다.

Start Dictation...
여러분의 음성을 받아쓰기 해 준다. 멋진 기능이다. 테스트 결과 꽤 좋은 결과물을 가져다 준다.

Object
img_interface_07
img_interface_08
img_interface_09

Group (Cmd+G)
선택한 오브젝트들을 그룹으로 묶어준다.

Ungroup (Cmd+Shift+G)
묶여진 그룹을 풀어준다. 심볼이나 반복 그리드된 에셋들도 풀 수 있다.

Lock (Cmd+L)
선택한 레이어를 잠근다.

Hide (Cmd+;)
선택한 레이어를 안 보이게 감춘다.

Add Color to Assets (Cmd+Shift+C)
선택한 오브젝트들의 컬러를 컬러 에셋에 등록한다.

Add Character Style to Assets (Cmd+Shift+T)
선택한 오브젝트들의 문자 스타일을 문자 스타일 에셋에 등록한다.

Make Symbol (Cmd+K)
선택한 오브젝트들을 심볼로 만들어 준다.

Reveal Color in Assets 
선택한 오브젝트들의 컬러를 컬러 에셋에 표시해 준다.

Reveal Character Style to Assets
선택한 오브젝트들의 문자 스타일을 문자 스타일 에셋에 표시해 준다.

Reveal Symbol in Assets
선택한 심볼을 심볼 에셋에 표시해 준다.

Mask with Shape (Cmd+Shift+M)
상단 쉐입의 모양으로 오브젝트를 마스킹 해 준다.

Make Repeat Grid (Cmd+R)
반복 그리드 상태로 만들어 준다. 매우 유용하게 쓰일 항목이니 기억해 두자.

Path
두개 이상의 쉐입들을 합집합, 차집합, 교집합, 여집합 으로 만들 수 있으며 폰트를 패스로 만들어 주는 기능도 있다.
Convert to Path (Cmd+8)

Text
택스트를 볼드체로 또는 이탤릭체로 만들 수 있고 언더라인도 추가 할 수 있다. 해당 메뉴에서 폰트를 1포인트씩 키우거나 줄일 수 도 있다.  
Bold (Cmd+B), Italic (Cmd+I), Underline (Cmd+U)

img_interface_10
img_interface_11
img_interface_12
img_interface_13

Arrange
선택한 오브젝트들의 레이어를 앞으로 (Cmd+]) 또는 뒤로 (Cmd+[), 맨 앞쪽으로 (Cmd+Shift+]), 맨 뒤쪽으로 (Cmd+Shift+[)으로 보내준다. 

Transform
선택한 오브젝트를 좌우, 또는 상하로 반전 시켜준다.

Align to Pixel Grid
선택한 오브젝트의 위치, 크기 값들을 픽셀 기준으로 만들어 준다. 잘 못 사용하면 오브젝트의 쉐입이 틀어지거나 이상한 모양이 될 수도 있으니 주의 해야 한다.

Align
선택한 오브젝트들을 정렬 해 준다. 

Distribute
선택한 오브젝트들의 간격을 맞추어 준다. 기존 포토샵이나 일러스트와 조금 다르게 오브젝트의 시작점 기준이 아닌 간격을 기준으로 하고 있다. 포토샵의 경우 길이가 다른 오브젝트의 간격을 맞추면 그 사이 간격이 달랐다. 하지만 AdobeXD 는 간격을 기준으로 하기 때문에 똑 같은 간격으로 맞추어 준다. 

Plugins
img_interface_14
img_interface_15

Installed Plugins
설치된 플러그인들이 제일 상단에 나열되어 있다.

Discover Plugins...
어떤 플러그인이 있는지 볼 수 있다. 최근 많은 플러그인이 올라오고 있고 유용한 플러그인들도 보이니 잘 살펴보자.

Manage Plugins...
내가 설치한 플러그인을 확인 할 수 있고 지우거나 업데이트 할 수 있다.

Development
개발 관련 메뉴이며 자신이 개발한 플러그인을 등록 할 수도 있다.

View
img_interface_16

Zoom In (Cmd++)
화면 확대

Zoom Out (Cmd+-)
화면 축소

100% (Cmd+1)
100% 화면 보기

200% (Cmd+2)
200% 화면 보기

Zoom to Selection (Cmd+3)
선택된 오브젝트에 딱 맞게 확대나 축소

Zoom to Fit All (Cmd+0)
모든 오브젝트를 볼 수 있도록 확대나 축소

Enter Full Screen (Cmd+Ctrl+F)
화면을 풀 스크린으로 전환

Switch Workspace (Ctrl+Right Arrow)
여러 워크 스페이스가 있을때 전환

Assets (Cmd+Shift+Y)
패널을 에셋 패널로 변경

Layers (Cmd+Y)
패널을 레이어 패널로 변경

Show Layout Grid (Cmd+Ctrl+')
레이아웃 그리드 화면에서 보기

Show Square Grid (Cmd+')
격자 그리드 화면에서 보기

Window
img_interface_17

Minimize (Cmd+M)
지금 사용하던 워크 스페이스를 우측 하단으로 숨김

Zoom
워크 스페이스를 화면에 꽉 차게 만들어 주고 다시 클릭하면 원 상태로 복귀

Preview (Cmd+Enter)
현재 선택된 아트보드 (클릭 되어 있지 않으면 홈으로 기억된 아트보드) 를 해상도에 맞게 미리 보기 할 수 있으며 이때 프로토 타입도 실행 가능하다.

Record Preview (Cmd+Ctrl+R)
프로토 타이핑된 화면을 실행하는 것을 녹화 할 수 있다.

Bring All to Front
꺼내어진 모든 워크 스페이스를 윈도우 상단으로 가져온다.

Untitled-1
작업중인 워크 스페이스 이름으로 선택하면 해당 워크 스페이스가 최상단으로 올라온다.

Help
img_interface_18

도움 메뉴에는 각종이 도움이 될 만한 것들을 모아 놓았다. 새로운 기능이나 튜토리얼 등을 확인 가능하다. 

또한 내 정보를 관리 하거나 로그아웃하거나 업데이트를 확인 할 수 있다.

Top Horizontal Panel

img_interface_19
interface_01
img_interface_20

Home
클릭하면 AdobeXD 를 시작할때 아트보드를 선택하는 화면이 나온다. 즉 새로운 문서를 만들때 사용한다.

Design
디자인 할 수 있는 워크 스페이스를 중앙에 보여준다.

Prototype
프로토 타이핑 할 수 있는 워크 스페이스를 중앙에 보여준다.

Untitled-1
현재 디자인 하고 있는 문서의 이름

화면 배율
지금 보이고 있는 워크 스페이스의 화면 배율

Device Preview
모바일등의 디바이스로 연결하여 미리보기 할 수 있다. 모바일 기기에 AdobeXD Preview App 을 깔아두고 USB 로 연결한 다음 모바일 앱을 실행하면 실시간으로 프리뷰가 가능하고 Cloud Documents 의 파일을 볼 수 있다. 

Desktop Preview (Cmd+Enter)
지금 현재 작업중인 컴퓨터에서 미리 보기 한다. 

Share
지금 디자인 하고 있는 문서를 프로토 타입으로 또는 디자인 스펙으로 내 보낼 수 있으며, 관리하거나 프로토 타입을 영상 녹화 할 수도 있다.
 

  • Share Documents: Cloud Documents 에 저장된 문서를 공유 할 수 있다.
  • Share for Review: 프로토타이핑 한 문서를 공유 할 수 있다. 코멘트를 남기거나 비밀번호를 설정 할 수 있다.
  • Share for Development: 디자인 스펙을 개발자들에게 공유 할 수 있다. 제플린과 거의 같은 기능을 한다.
  • Manage Links...: 공유 된 문서를 관리 할 수 있다. 
  • Record Video: 프로토타이핑을 영상을 녹화 할 수 있다.

Left Toolbar

img_interface_26
img_interface_27

Select (V)
선택툴. AdobeXD 의 선택툴은 일러스트의 선택툴과 유사 하다. 클릭하면 바로 선택된다. 

Rectangle (R)
사각형 툴. 사각형을 그릴 수 있고 모서리를 둥글게 수정 할 수 있다. 면과 외곽 선을 사용할 수 있다.

Ellipse (E)
원형 툴. 면과 외곽 선을 사용할 수 있다.

Line (L)
선 툴. 선을 그릴 수 있고 선의 두께를 조정할 수 있으며 선의 끝 모양을 둥글게 할 수 있다.

Pen (P)
펜으로 모양을 만들 수 있다. 사각형이나 원 라인등의 정해진 모양을 수정 할 수 있다.

Text (T)
텍스트를 입력할 수 있다. 한줄 텍스트 또는 여러줄 텍스트를 골라 쓸 수 있으며 나중에 변경도 가능하다. 정렬 자간, 행간, 단락 간, 언더라인등을 조정 가능하지만, 대문자로 소문자로 같은 기능은 아직 없다. 

Artboard (A)
아트보드를 생성할 수 있다. 아트보드를 선택하는 순간 우측에 기본 아트보드들을 선택할 수 있고 직접 워크 스페이스에 드래그 하여 만들수도 있다. 

Zoom (Z)
기본은 확대 option을 누르면 축소

Assets (Cmd+Y)
저장된 에셋들을 사용 또는 관리 할 수 있다.

Layers (Cmd+Shift+Y)
생성된 레이어들을 사용 또는 관리 할 수 있다. 레이어를 숨기거나, 잠그거나, 배치 추출로 등록 해 놓을 수 있다. 배치 추출로 등록해 놓으면 나중에 한꺼번에 배치 추출 항목들만 내보내기 할 수 있다. 아이콘등은 배치로 등록해 놓으면 좋다.

Property Inspector

프로그램 우측에 위치한 Property Inspector 는 각종 속성을 선택 또는 변경할 수 있다. 내가 선택한 것에 따라 속성들이 바뀌기 때문에 처음 접하는 사람들은 그게 어디갔지? 사라졌네? 라고 생각할 수 있다. 각기 다른 속성들을 가지고 있기 때문에 혼란스러울 수 있으나 이렇게 생각하면 간단하다. 내가 지금 선택한 그 무엇인가의 속성을 바꾸려면 우측 Property Inspector 를 보면 된다. 여기에서 할 수 없는 것은 이 프로그램에서 가능 하지 않은 것이다 라고 생각하면 편하다. 

Artboard 선택시
img_interface_21

Artboard 를 선택하면 이와 같은 항목이 나온다. 위에서 부터 살펴보자.

정렬및 분배
두개 이상의 Artboard 를 선택하면 활성화 된다. 세개 이상 선택시 분배 가능하다.

사이즈 조정 및 위치 조정
Artboard 의 사이즈 를 변경할 수 있고 위치 값도 자세히 조정 가능하다. 사이즈의 정확한 조정을 위해서 +,-,*,/ 를 사용하여 연산이 가능하다.

가로형 세로형 아트보드 선택
이 가능하다.

Scrolling
스크롤을 사용하거나 사용하지 않을 수 있고 기본 스크롤 화면의 세로 사이즈를 지정할 수 있다. 

Viewport heights
스크롤 화면의 높이를 정할 수 있다. 수치로 전할 수 있고 아트보드에서도 핸들을 통해 임의로 정할 수 있다. 

Appearance
Artboard 의 배경색을 바꿀 수 있고 배경을 사용하거나 사용하지 않을 수도 있다. 배경을 사용하지 않으면 PNG SVG 투명으로 저장된다.

Grid
레이아웃 그리드 를 설정할 수 있고 격자 그리드 로도 변경 가능하다. 

그룹(심볼, 반복 그리드) 선택시
img_interface_22

정렬및 분배
한개 이상을 선택하면 활성화 된다. 한개의 심볼을 선택했을 경우는 그 기준을 아트보드로 하게 된다. 세개 이상 선택시 분배 가능하다. 

Repeat Grid
그룹과 심볼은 반복 그리드를 사용할 수 있지만 반복 그리드를 다시 반복 그리드 할 수 없다. 굳이 하고 싶다면 그룹이나 심볼로 묶어서 다시 반복 그리드 할 수 있다. 

Size & Position
그룹은 반응형 디자인의 설정을 통해 크기 조정을 하거나 위치를 조정 가능하다.
심볼은 사이즈 조정이 불가능하다. 하지만 두번 클릭하여 심볼내의 오브젝트를 수정하면 수정이 가능하다. 다만, 모든 같은 심볼의 사이즈 또한 변경 된다. 
반복 그리드는 사이즈 및 포지션을 변경 할 수 있으나 반복 그리드 자체의 크기를 조정할 수 없고 반복 그리드의 갯수등이 늘어나게 된다.

Fix position when scrolling
선택한 오브젝트, 그룹등의 에셋들을 스크롤시 화면의 그 자리에 멈춰 있게 한다. 다른 내용은 스크롤 되고 배경은 멈추어 놓고 싶으면 배경에 이 옵션을 선택하면 된다.

Responsive Resize
그룹과 심볼은 반응형 리사이즈 속성을 가질 수 있지만, 반복 그리드는 반응형 리사이즈를 설정 할 수 없다.

Appearance
투명도, 컬러, 외곽선을 설정 할 수 있다.  

Shape Object 선택시
img_interface_23

정렬및 분배
한개 이상을 선택하면 활성화 된다. 한개의 오브젝트를 선택했을 경우는 그 기준을 아트보드로 하게 된다. 세개 이상 선택시 분배 가능하다. 

Repeat Grid
Shape Object 를 반복 그리드 할 수 있다. 

Boolean
두개 이상의 Shape Object를 집합할 수 있다. 

Size & Position
사이즈와 위치값을 조정할 수 있다. 또한 객체의 각도도 조정 가능하다. 

Flip Horizontally, Flip Vertically
오브젝트를 좌우로 상하로 뒤집을 수 있다.

Responsive Resize
반응형 리사이즈를 설정하여 반응형 디자인을 사용할 때 어떻게 객체의 사이즈와 포지션을 변형할지 지정할 수 있다.

Appearance
투명도와 색상 그리고 외곽선, 그림자, 배경 흐림효과 등을 조정할 수 있다. 사각형의 경우 모서리를 둥글게 할 수 있는 옵션이 추가 된다. 물론 선의 경우는 색상 옵션이 빠지고 외곽선 옵션만 남는다. 

Text 선택시
img_interface_24

Shape Object 선택시와 같은 형태를 보여준다.
단, 문자 스타일에 대한 옵션이 더 생긴다. 문자 스타일에는 폰트이름, 크기, 시리즈, 정렬, 싱글 멀티 형태, 언더라인, 자간, 행간, 단락간 등의 옵션을 사용할 수 있다. 아쉽게도 대문자로 소문자로 옵션은 없다. 

이렇게 AdobeXD 의 인터페이스를 살펴 보았다. 메뉴소개를 왜 이렇게 장황하게 했을까? 라는 의문도 들겠지만 초반에 이야기 했지만 메뉴를 알아두는 것은 매우 중요하다. 메뉴만 잘 알아도 그 프로그램의 절반은 사용할 수 있는 것과 같다. 당신이 위 내용은 모두 숙지 했다면 이제 절반은 사용할 줄 아는 것이다. 물론 앞으로 할 이야기 안에 매우 중요한 개념과 응용들이 있겠지만 이제 당신은 어느정도 AdobeXD 가 어떤 프로그램이겠구나 하는 생각을 가지게 되었을 것이다. 자 이제 메뉴도 숙지 했으니 자신감 있게 프로젝트를 시작해 보자. 

AdobeXD Classes

01 . INTROAdobeXD의 대한 소개

02 . INTERFACEAdobeXD의 인터페이스 소개

03 . ARTBOARDSArtboards 에 대한 이해

04 . PANNING & ZOOMING화면 움직이기와 화면 확대 축소

05 . SHAPES도형 그리기와 활용

06 . TEXT문자 쓰기와 활용

07 . PEN TOOL펜 도구의 이용 및 활용

08 . SELECT MOVE RESIZE오브젝트 선택하기, 움직이기, 크기변경하기

09 . STYLING APPEARANCE오브젝트의 면과 선의 색상, 그림자, 흐림 효과

10 . LAYERS레이어 패널의 사용과 관리

11 . DUPLICATE오브젝트 복제의 여러가지 방법

12 . ALIGN & DISTRIBUTE객체의 정렬과 각 객체들간의 공간 분배

13 . UNION두개 이상 객체의 조합 만들기

14 . GROUPAdobeXD 에서의 그룹의 의미와 활용

15 . SYMBOLS심볼 만들기와 응용

16 . REPEAT GRID반복 그리드 사용법과 활용

17 . MASK마스크의 여러가지 사용법

18 . ASSETS PANEL에셋 패널의 사용법과 활용

logo_basic@2x

Copyright © 2018 AdobeXD.info & Bandy garnet.
All Rights Reserved.

E-mail: bandygarnet@gmail.com
Slack: adobexdclass.slack.com