<주간 UIUX 디자인 : 어도비 xd 플러그인>

모르면 손해! 필수 어도비 xd 플러그인 추천과 사용법 알아보기

제로베이스 UIUX 디자인 스쿨

  • 지난 시간 어도비 xd 사용법에 이어 오늘은 어도비 xd 플러그인에 대해 알아보는 시간을 가져보려고 해요. 어도비 xd 플러그인이라는 개념이 다소 어렵게 느껴지시는 분들도 있을 것 같은데요. 플러그인을 알아야 더 효율적이고 전문적인 작업을 할 수 있기 때문에, 아직 잘 몰랐던 분들이라면 이번 아티클로 꼭 알아가시길 바랍니다. 마지막 부분에는 어도비 xd 플러그인 사용법까지 정리해 놓았으니, 마지막까지 놓치지 마세요!

    잠깐, UIUX 디자인 스쿨이 궁금하다면? 자세히보러가기 >

썸네일 이미지

어도비 xd 플러그인 개념 알아보기

플러그인(Plug-in)이란?

플러그인은 UIUX 설계의 맥락에서 설계 도구 및 소프트웨어에 특정 기능을 추가하는 소프트웨어 구성 요소 또는 확장을 의미합니다. 이러한 플러그인은 일반적으로 설계 응용프로그램의 기능을 향상하기 위해 만들어지며, 더욱 다양하고 효율적으로 설계자의 특정 요구사항에 맞게 조정되는데요. 어도비 xd, 스케치, 피그마 등과 같은 일반적인 UIUX 툴에서 사용할 수 있습니다.

플러그인 예시 이미지

ⓒ Unsplash의Justin Morgan

조금 더 이해하기 쉽게 예를 들어볼까요? 여러분이 컴퓨터에서 무언가를 그리고 디자인하는 데 사용하는 마법의 도구 상자를 가지고 있다고 상상해 봅시다. 여기서 도구 상자는 어도비 xd 또는 피그마와 같은 설계 소프트웨어를 나타냅니다.

이 마법 도구 상자는 아주 유용하지만 기본적인 몇 가지 도구들만 들어 있는데요. 화려한 애니메이션 효과를 추가하거나 반복 작업을 더 쉽게 하기 위해선 다른 마법 기능을 추가해야 합니다. 이때 추가하는 그 기능들이 바로 플러그인이라고 할 수 있습니다!

플러그인(Plug-in)이 필요한 이유

플러그인은 디자인의 퀄리티를 높여주고 디자인 프로세스의 효율성을 높여줍니다. 그렇기 때문에 더 전문적인 UIUX 디자이너가 되고자 한다면 이 플러그인을 잘 활용하는 것이 필수적인데요. 플러그인이 필요한 3가지 이유에 대해서도 알아보겠습니다.

1) 기능 확장: 플러그인은 핵심 소프트웨어에서 사용할 수 없는 새로운 도구, 기능 또는 통합을 추가하여 설계 도구의 기능을 확장합니다. 이를 통해 UIUX 디자이너는 작업 프로세스를 간소화할 수 있습니다.

2) 작업 자동화: 반복적인 작업을 자동화하여 UIUX 디자이너가 시간을 절약하고 보다 창의적인 작업에 집중할 수 있도록 도와줍니다. 예를 들어 그리드를 생성하거나, 이미지 크기를 특정 치수로 조정하거나, 설계 전반에 걸쳐 일관된 스타일을 적용하는 플러그인 등을 활용할 수 있습니다.

3) 협업 및 버전 제어: 일부 플러그인은 버전 제어 기능을 제공하거나 프로젝트 관리 플랫폼과 통합하여 팀원 간 협업을 더 편리하게 만들어 줍니다. 이를 통해 여러 디자이너가 동일한 프로젝트에서 원활하게 함께 작업할 수 있습니다.

*버전 제어: 버전 제어는 소프트웨어 코드의 변경 사항을 추적하고 관리하는 관행으로 소스 제어라고도 불립니다. 버전 제어 시스템은 소프트웨어 팀이 시간의 경과에 따른 소스 코드의 변경 사항을 관리하도록 도와줍니다.

추천하는 어도비 xd 플러그인 10가지

플러그인의 중요성에 대해 알아보았으니, 이제 직접 활용할 추천 어도비 xd 플러그인을 한 번 살펴볼까요? UIUX 디자이너들이 자주 사용하는 어도비 xd 플러그인 10가지를 선정해 보았습니다.

어도비 xd 로고 화면

ⓒ Unsplash의Mika Novokhatko

1) 무료 프로필 이미지가 필요할 때 : UI Faces

UI Faces 플러그인

UI Faces 플러그인

사이트 디자인을 하다 보면 사용자 정보를 넣어야 하는 경우가 있습니다. 그럴 땐 UI Faces라는 어도비 xd 플러그인을 유용하게 사용할 수 있습니다. 무료 프로필 이미지를 한 번에 가져와 주기 때문인데요. 일러스트로 대체하는 경우도 있지만 인물 사진이 효과적일 때가 있기 때문에 해당 어도비 xd 플러그인을 사용해 보시는 것을 추천 드립니다.

2) 레이어 이름을 빠르게 변환하고 싶을 때 : Rename it

Rename it 플러그인

Rename it 플러그인

UIUX 디자인을 할 땐 간단한 웹 사이트에도 매우 많은 아트보드가 만들어지는데요. 보통 이름을 정해두고 아트보드를 추가하지 않기 때문에, 디자인 마무리 단계에서는 완성된 아트보드와 레이어를 정리할 때 헷갈리는 경우도 발생하는데요. 이러한 어려움을 덜어줄 어도비 xd 플러그인이 바로 Rename it입니다. 글자 대소문자뿐만 아니라, 글씨체와 이름들을 손쉽게 정리하고 변경할 수 있기 때문에 굉장히 유용하게 사용할 수 있습니다.

3) 비슷한 계열의 컬러를 한 번에 사용할 때 : Color Scale

Color Scale 플러그인

Color Scale 플러그인

다음 어도비 xd 플러그인은 Color Scale입니다. 이름처럼 컬러의 단계를 바로 추출할 수 있는 플러그인인데요. 디자인 통일감을 위해 비슷한 계열의 컬러를 사용해야 할 때 Color Scale을 활용하면 간단하게 원하는 컬러를 찾아볼 수 있습니다.

4) 더미 텍스트를 생성해야 할 때 : Lorem Ipsum

Lorem Ipsum 플러그인

Lorem Ipsum 플러그인

초기 디자인 단계에서 텍스트 레이아웃과 느낌을 보기 위해 더미 텍스트를 넣는 경우가 있습니다. 그럴 땐 Lorem Ipsum 어도비 xd 플러그인을 사용해 보세요! 중요하지 않은 텍스트에 낭비할 시간을 확실하게 줄여줍니다.

5) 고퀄리티의 무료 이미지가 필요할 때 : Photo Splash 2

Photo Splash 2 플러그인

Photo Splash 2 플러그인

무료로 고퀄리티 사진을 얻을 수 있는 ‘unsplash’라는 사이트를 알고 계신가요? 아마 디자인 작업을 하실 때 종종 이곳에서 필요한 이미지를 얻으셨을 텐데요. Photo Splash 플러그인을 통해 unsplash의 이미지를 어도비 xd로 쉽게 가져올 수 있습니다. 사진을 브라우저로 직접 다운받고 불러오는 시간을 절약해 주기 때문에, 작업을 효율적으로 만들어 줍니다.

6) 무료 모바일 템플릿이 필요할 때 : Wireframer

Wireframer 플러그인

Wireframer 플러그인

Wireframer는 미리 만들어진 템플릿을 무료로 사용할 수 있는 어도비 xd 플러그인 입니다. 레이어가 다 나누어져 있어 수정이 가능하고, 카테고리별로 검색이 가능해서 원하는 템플릿을 바로바로 찾아 사용할 수 있습니다. 참고로 다 모바일 사이즈이기 때문에 모바일 디자인을 시작할 때 사용하시면 좋습니다.

7) 구글 시트를 한 번에 옮기고 싶을 때 : Google Sheets

Google Sheet 플러그인

Google Sheet 플러그인

구글 시트에 작성한 정보를 어도비 xd로 옮겨야 하는 순간이 온다면? Google Sheet 플러그인을 추천해 드립니다. 디자인된 레이아웃에 많은 정보를 바로 불러올 수 있기 때문에 평소 구글 시트에서 많은 작업을 하시는 분들이라면 유용하게 사용할 수 있겠죠?

8) 아이콘을 빠르게 만들어야 할 때 : Icon scout

Icon scout 플러그인

Icon scout 플러그인

Icon scout는 다양한 아이콘 템플릿을 제공하는 플러그인입니다. 바로바로 간단한 아이콘 작업이 필요할 때 정말 유용하겠죠? 심플한 디자인부터 화려한 디자인까지 굉장히 다양한 종류의 아이콘이 있기 때문에 활용도가 높습니다.

9) 협업을 효율을 높이고 싶을 때 : Trello

Trello 플러그인

Trello 플러그인

UIUX 디자이너는 협업이 필수적인 직무죠! Trello는 디자이너와 팀원들이 쉽게 자료를 주고받을 수 있는 협업 플러그인입니다. 또한 업무 진행 현황까지 한 눈에 파악할 수 있기 때문에 재택근무가 활발한 지금 꼭 필요한 플러그인이라고 볼 수 있습니다.

10) 오픈소스 SVG 파일이 필요할 때 : undraw

undraw 플러그인

undraw 플러그인

디자인 작업 시 무료이면서 상업적으로도 사용할 수 있는 일러스트가 필요할 때가 많습니다. 그럴 때 이 undraw라는 어도비 xd 플러그인을 추천해 드립니다. 원하는 곳에 바로 붙여넣기 하여 사용할 수 있기 때문에 간편합니다.

어도비 xd 플러그인 사용 방법 알아보기

1) 어도비 xd 플러그인 다운로드하기

다음으로 어도비 xd 플러그인 사용 방법에 대해서 알아보기 전에 다운로드부터 해야겠죠? 어도비 xd 플러그인 설치는 굉장히 간단합니다.

어도비 xd 플러그인 검색하기

어도비 xd 플러그인 검색하기

우선 어도비 xd 창에서 플러그인 검색을 누르면 어도비 클라우스의 플러그인 마켓으로 자동 연결이 됩니다.

어도비 클라우드 마켓 플레이스에서 다운로드 받을 수 있는 어도비 xd 플러그인

어도비 xd 플러그인 다운로드 화면 / 출처: 어도비

여기서 검색창에 찾고 싶은 플러그인을 검색해 ‘받기’ 버튼을 누르면 완료!

2) 어도비 xd 플러그인 적용하기

어도비 xd undraw 플러그인 설치 / 출처: 어도비

어도비 xd undraw 플러그인 설치 / 출처: 어도비

사용 방법 예시를 위해 저도 어도비 xd 플러그인을 한 번 설치해 보았습니다. 이제 어도비 xd 플러그인을 직접 사용해 보도록 해요!

추가된 어도비 xd undraw 플러그인 확인

플러그인을 설치하면 이렇게 어도비 xd 플러그인에 설치된 플러그인이 자동으로 추가되는데요.

검색된 어도비 xd undraw 플러그인 확인

플러그인을 설치하면 이렇게 어도비 xd 플러그인에 설치된 플러그인이 자동으로 추가되는데요.

undraw 플러그인 붙여넣기

여기서 원하는 디자인을 선택해 붙여넣기 하면 바로 적용된 모습을 볼 수 있어요! 너무 간단하죠? 플러그인마다 사용법이 조금씩은 다르지만 대부분 추가된 창 내에서 간단하게 적용할 수 있습니다. 여러분도 어도비 xd 플러그인으로 디자인 퀄리티와 작업 효율성을 높여보세요!

작업 효율뿐만 아니라 취업 효율까지 높이고 싶다면?

ⓒ Unsplash의Elise Bouet

ⓒ Unsplash의Elise Bouet

오늘은 효율성 높은 작업을 위한 어도비 xd 플러그인에서 알아보았습니다. 작업뿐만 아니라 UIUX 디자이너 취업에서도 효율성을 높이고 싶다면? UIUX 디자인 스쿨로 오세요! 단 4개월 만에, 이론부터 포트폴리오까지 현직 강사진과 함께 가장 효율적인 방법으로 효과적인 취업을 완성합니다. 여러분의 소중한 시간, 제로베이스가 아껴드릴게요!


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


추천 컨텐츠