<주간 UIUX 디자인 : 어도비 xd 사용법>

기초부터 알아보는 어도비 xd 사용법! - 무료 어도비 xd ui 키트와 단축키까지

제로베이스 UIUX 디자인 스쿨

어도비 xd란?

어도비 xd는 어도비 사에서 출시한 프로토타이핑 소프트웨어입니다. 스케치나 피그마 툴보다 후발 주자로 등장했지만, 디자인 업계의 높은 위상을 자랑하는 어도비 사의 프로그램답게 무서운 성장 속도를 보여주고 있습니다.

대표적인 기능으로는 별도 플러그인(plug-in) 없이도 간단한 프로토타이핑이 가능하다는 점인데요. 하지만 무엇보다도 디자이너들에게 친숙한 포토샵, 일러스트와 인터페이스는 물론 단축키까지 유사한 부분이 많기 때문에 접근성이 높다는 장점이 있습니다.

또한 기존에 사용하던 Adobe Creative Cloud를 활용할 수 있고, 한국어 공식 지원이 되며, Mac 뿐만 아니라 Windows 환경에서도 작업이 가능하다는 장점도 있답니다.

어도비 xd 설치하러 가기

어도비 xd 사용법, 기능 살펴보기

본격적으로 어도비 xd 사용법을 알아보기 전에, 어도비 xd를 설치하고 시작하면 가장 먼저 보이는 화면부터 살펴볼까요? 작업 화면으로 들어가기 위해서는 새 문서를 시작해야 합니다. 모바일 화면부터 웹, SNS 콘텐츠까지. 다양한 맞춤형 사이즈가 제공되고 있는 모습을 확인해볼 수 있어요. 원하는 작업 사이즈를 선택하고 작업을 시작해 보세요!

1) 작업 화면 (인터페이스)

(1) 툴 패널

툴 패널은 이동 및 도형, 선, 텍스트, 아트보드 등을 구현하기 위한 도구 모음입니다. 포토샵, 일러스트와 인터페이스가 같아서 익숙하게 느껴질 수 있을 것 같아요! 특징이 있다면 사각형, 원, 삼각형 도형 패널을 따로 만들어 제공하고 있다는 점인데요. 정교한 아트 작업보다는 효율적인 디자인이 이루어지기에 이렇게 제공되고 있는 듯합니다.

(2) 아트보드

아트보드는 말 그대로 디자인 작업이 이루어지는 창이라고 볼 수 있습니다. 툴 패널을 통해 사이즈 및 개수 조정이 가능합니다.

(3) 옵션 패널

옵션 패널에서는 디자인 작업이 이루어지는 오브젝트들의 옵션을 확인할 수 있는 패널입니다. 아트보드의 크기, 텍스트 및 도형의 옵션, 그리드 설정까지 모두 이 패널에서 조정이 가능합니다.

2) 아트보드 만들기 (스크롤 기능)

(1) 직접 그려서 사용하는 방법

툴 패널의 아트보드를 클릭하고 빈 창에 마우스로 드래그를 하면 원하는 사이즈의 아트보드를 생성할 수 있습니다. 자세한 사이즈 조정은 옵션 패널을 통해 조정이 가능합니다.

(2) Alt + 드래그를 활용하는 방법

아트보드를 클릭하고 Alt를 누른 상태로 드래그를 해보세요! 기존의 아트보드를 복사해서 활용할 수 있습니다.

(3) 옵션 패널에서 선택하는 방법

툴 패널의 아트보드를 클릭하면 옵션 패널에 다양한 사이즈의 화면을 살펴볼 수 있습니다. 다양한 사이즈의 아트보드를 만들어야 하는 경우 옵션 패널에서 아트보드를 생성해보세요!

아트보드의 하단 부분을 마우스로 내리면 스크롤 화면을 만들 수 있습니다! 화면을 좀 더 효율적으로 만들어볼 수 있겠죠?

3) 도형, 텍스트 만들기

다음으로는 도형과 텍스트를 만들어볼까요? 툴 패널에 있는 도형과 펜 툴, 텍스트로 자유롭게 디자인을 할 수 있습니다.

간단하게 사각형 도형을 만들어봤습니다. 도형을 생성 후 도형을 클릭하면 옵션 패널에서 조정할 수 있는 부분이 뜨는데요. 투명도부터 그림자 효과 테두리까지 옵션 패널에서 한 번에 조정이 가능합니다. 일러스트처럼 패스파인더 기능을 통해 다양한 도형을 만들 수도 있고 벡터 형식이기 때문에 크기 상관없이 화질을 유지할 수 있어요!

다음은 텍스트 입력입니다. 원하는 텍스트를 입력 후, 옵션 패널에서 텍스트 종류는 물론 자간과 행간까지 조정이 가능합니다. 테두리, 그림자 효과까지 간단한 효과도 적용할 수 있습니다.

4) 이미지 넣기

어도비 xd에서는 드래그 앤 드롭으로 이미지를 굉장히 쉽게 넣을 수 있습니다. 어도비 사에서 출시한 프로그램인만큼 일러스트로 작업한 내용을 불러올 수도 있는데요. 일러스트를 통해 정교한 작업을 하고 어도비 xd로 불러오면 더 좋은 퀄리티의 UIUX 디자인이 가능하겠죠?

5) 프로토타입 연결하기

마지막으로 어도비 xd의 대표적인 기능! 프로토타입 연결을 해보겠습니다. 상단에 디자인 모드에서 프로토타입 모드로 변경하면 바로 연결이 가능합니다.

구현을 위해 간단하게 제작을 해보았습니다. 왼쪽 버튼을 누르면 왼쪽 이미지로, 오른쪽 버튼을 누르면 오른쪽 이미지로 넘어가게 해볼건데요. 버튼을 만들고 그 부분을 클릭하면 이미지처럼 파란 화살표가 생깁니다. 이 화살표를 마우스로 끌어당겨 원하는 페이지로 연결을 하면 끝! 아주 쉽죠?

액션 유형과 애니메이션까지 설정할 수 있어 간단하게 퀄리티 높은 프로토타이핑이 가능하답니다!

더불어 상단의 재생 버튼을 클릭하면 지금까지 연결한 프로토타입을 실제 사이즈로 확인해볼 수 있습니다. 모바일로 어도비 xd 앱을 설치하면 스마트폰에서도 바로바로 확인이 가능해요!

어도비 xd 단축키 살펴보기

다음으로 작업 효율을 높여줄 어도비 xd의 단축키를 살펴볼까요? 기존 어도비 사의 포토샵, 일러스트 단축키와 유사한 부분이 많아서 좀 더 편리하게 느껴지는 듯한데요. 아래 단축키 표를 통해 효율적인 UIUX 디자인 작업을 진행해보세요!

모든 단축키는 여기서 확인! → 어도비 xd 단축키 모음

무료 어도비 xd ui 키트 받는 법

어도비 xd 사용자라면 무료로 ui 키트를 받을 수 있습니다. 기본 아이콘이나 팝업창 같은 ui 키트를 통해 초보자라도 쉽게 웹 사이트를 디자인할 수 있어요!

파일에서 ‘UI 키트 받기’를 누르면 다운로드를 할 수 있는 페이지로 연결됩니다.

ui 키트 → 바로 다운 받으러가기

굉장히 다양한 종류의 키트가 있죠? 제작하고자 하는 종류의 ui 키트를 골라 다운로드하면 UIUX 디자인 준비 끝!

그 중 ux 디자인의 기본, 와이어프레임 키트를 다운로드해보았는데요. 회원가입 창부터 활동 피드, ui 아이콘까지 다양한 디자인이 제공되어 있습니다.

잠깐, 와이어프레임이란?

와이어프레임은 UI(사용자 인터페이스) 또는 웹 페이지의 시각적 표현 또는 골격 프레임 작업을 의미합니다. 와이어프레임의 주요 목적은 설계자와 이해관계자가 미학에 집중하기보다는 구조적 측면과 사용자 흐름에 집중할 수 있도록 지원하는 것이기 때문에 레이아웃, 구조 및 기능을 단순화해서 표현하는 것이 특징입니다.

본격적인 UI 디자인 전에 틀을 잡는 와이어프레임 작업을 할 때 어도비 xd ui 키트를 사용한다면 작업 시간을 단축 시킬 수 있겠죠?

어도비 xd 사용법, 지금 알았어도 UIUX 디자이너 할 수 있어요!

오늘 어도비 xd 사용법에 대해 간단히 알아보았습니다. 이제 기초적인 부분은 배웠지만 UIUX 디자이너 취업 준비를 위한 다음 단계는 어떻게 나아가야 할지 고민이 되시는 분들도 있을 것 같은데요. 걱정마세요! UIUX 디자인 스쿨에서는 기초 툴 교육은 물론, 포트폴리오 제작까지 탄탄한 커리큘럼으로 취업 문을 확실하게 열어드립니다. 비전공자에서 UIUX 디자이너 되기! 지금 UIUX 디자인 스쿨에서 경험해보세요.

UIUX 디자인 스쿨은 '취업'까지 단 4개월,
새로운 여정을 함께할 분들을 기다립니다.

추천 컨텐츠