Adobe XD 인터페이스 1. - 시작화면, 해상도 설정, 단축키 - 국비지원무료교육

스마트인재개발원 홈페이지 주소는? 바로 여기!!!

스마트인재개발원

---

1차 프로젝트를 위한 선행 학습으로 XD를 공부 중이다. 프로젝트 주요기술로 지도라이브러리를 사용하고 난 앞단을 맡아서 하기로 했다. XD는 4년 만에 다시 다뤄보는 거라 동영상을 보면서 공부를 하고 있다. 2월 9일에 발표다. 다음 주까지는 앞단이 마무리 되야 한다. 조금씩 자료를 정리하고 마음에 시동을 걸었다. 

일단 프로토타입을 이걸로 만든 다음, 부트스트랩을 이용할 예정이다.

XD 선택 이유?

피그마와 엑스디에서 고민했지만 난 그래도 엑스디였다. 몇 년전에 사용했을때 빠릿한 엑스디의 손맛을 다시 느껴보고 싶어서였다. 그 당시 피그마는 웹앱으로 제작되었었는데 초기라 그런지 조금 버벅대었고 특히 마우스의 딜레이가 심했었다. 지금은 사용자 1위를 하는 걸로 봐서는 모든 것이 다 고쳐졌을 거라고 본다. XD의 가장 큰 장점은 호환성과 플러그인이다. 그러므로 이 툴을 정확하게 익히는게 중요하다.

---

Ａｄｏｂｅ　XD

처음 시작할 때, 맥은 command+N, 윈도우는 Control +N

1. 해상도 기준

XD를 실행하고 나오는 첫화면에서 해상도를 설정할 수 있다. 아래에도 나오지만 UI/UX 디자인 해상도 기준은 아이폰 X, 웹은 1366*768이다.

애플의 기준은 360*640이다. 기종은 아이폰 X가 기준이다. 이걸로 만들면 다른 기종 대응이 가능.

1366*768이 가장 많은 웹 해상도이다. 전체 모니터 사용자의 27.86퍼센트의 비중을 차지한다. 물론 2022년 이 글의 작성시기에 비추어보면 상황이 더 고해상도로 같을 확률이 아주 높다. 하지만 해상도는 항상 보수적으로 잡아야 한다. 따라서이걸 기준으로 작업하는게 가장 안전하다.

1366*768 을 사용하고 그 이상의 해상도에서는 옆은 여백으로 둠으로써 호환성을 확보한다. 

---

Adobe XD 주요 단축키

윈도우: ctrl+스크롤휠
맥: option+스크롤휠

 

크기 조정

화살표가 선택된 상태에서 ALT키를 누르면 선택된 오브젝트 주변의 오브젝트와의 거리를 보여준다. 대지(아트보드)에서의 위치도 나온다. 그리고 드래그를 하면 오브젝트를 복제할 수 있다.

단축키는 외울려고 하지말고 하다보면 자주 사용하는 키를 그때그때 찾아가며 하다보면 그냥 익혀진다. 단축키는 영문자의 앞글자나 관련있는 글자로 이루어져 있어서 아주 쉽다. 그리고 이걸 한번 익혀놓으면 다른 툴도 비슷해서 금방 익힐  수 있다. 그러므로 XD를 잘 해두면 된다. 

 

쉬프트키와 옵션키 사용

중요한 것 한가지. 도형을 그릴때 쉬프트를 누르고 그리느냐, 옵션을 누르고 그리느냐에 따라 달라진다. 쉬프트는 비례가 유지되므로 정사각형을 그릴때 유용하다. 옵션키를 누르고 드래그를 하면 도형이 중앙점을 중심으로 크기조절을 할 수 있다.

- 다음에 이어 계속-