웹디자이너 필수 도구 프로토타입 디자인 툴 Adobe XD

어도비 XD를 처음 써봅니다

왜 이제야 알았을까 합니다...ㅋ

웹이나 앱 디자인 할때 꼭 사용해보도록

추천하고 싶은 툴입니다!

포토샵과 일러스트 키노트의

장점만 섞은 것 같네요...ㅎㅎ

튜토리얼을 따라하면 쉽게 익힐 수 있습니다.

포샵이나 일러 중급 이상의 사용자라면

그냥 한번 둘러보면

바로 쓸 수 있을 정도로

아주 쉽습니다!

물론 고급 기능은 더 공부를 해야겠지만

저는 혹시나 이 XD를 모르는 분들을 위해

써보세요~정도로 포스팅을 해봅니다.

튜토리얼 시작 화면입니다.

확대를 해보면 처음부터 상세하게

설명이 되어 있습니다.

순서대로 차근차근 따라해보세요~

튜토리얼은 스마트폰 사이즈의 화면에

어플 디자인하는걸 경험해볼 수 있게

구성되어 있습니다.

왼쪽에 툴도 꼭 필요한것들만 있습니다.

XD는 어디까지나 프로토 타입 디자인

미리 스케치 해볼 수 있는 툴이라는걸

알아주세요~

하지만 잘만쓰면 이것만으로도

완성된 디자인물을 뽑아낼 수도 있겠어요 ㅎㅎ

이미지를 그냥 끌어다

오브젝트에 넣으면

알아서 클리핑 마스크가 됩니다 ㅎㅎ

요렇게 쏙 들어가죠ㅋ

프로필 이미지 완성입니다.

그리고 기가 맥힌 기능

반복 그리드 기능입니다.

어떤 오브젝트 그룹을

쉽게 반복 복사해주는 기능인데

일반 웹화면에서 자주 쓰이겠죠.

그 다음 기능은 스크롤 적용하기 입니다.

요게 왜 필요한지는 나중에 알게 됩니다ㅋ

어마어마한 기능이죠

설명대로 아트보드 이름을 클릭하고

스크롤을 세로로 맞추고

그리드를 내려줍니다~

마지막으로 프로토타입

기능 설명입니다.

버튼을 클릭했을때 다음 화면이 어디로

연결되는지를 설정하는건데

이것도 신기한 기능입니다 ㅎㅎ

튜토리얼을 다 마치고 나서

오른쪽 위에 재생 버튼을 눌러보면

완성된 디자인의 미리보기가

실행됩니다~

결과물은 아래와 같습니다!

이렇게 실제 폰 화면에서

어떻게 보여질지 기능적으로도

확인할 수 있죠.

웹도 마찬가지 입니다!

어도비라 당연하겠지만

포토샵과 일러스트와의 연계도

훌륭합니다!

일러스트의 벡터이미지를 그대로

복사 붙여넣기 하면

벡터 그대로 가져옵니다.

XD에서도 컬러 정도는 변경됩니다.

그리고 공유 옵션도 강력합니다.

어도비 아이디가 있으면

클라우드에 업로드하고 링크를 공유해서

작업물을 디테일하게 전달할 수 있습니다.

상대가 XD가 없어도

어떤 컬러를 쓰고 폰트와 여백을 주었는지

확인할 수 있습니다!

직접 경험해보세요~

웹 디자이너 필수 유틸로 추천합니다!