Adobe XD 설치, 초기화면 둘러보기

이제 xd에서 작업한걸 바로 올릴 수 있다니.. 좋다.. 

무제-1.xd

0.23MB

https://creativecloud.adobe.com/apps/ux-web

Adobe Creative Cloud

 

AdobeXD는 Adobe의 많은 앱 중에서 UI, UX 범주에 속하는 서비스. 

처음 설치하고 사용하는데에는 무료였고, 공유하는데 어느정도 제한이 있었지만, 지금은 어떨지 모르겠다. 

(이미 구독을 해버리고 말았고, 그게 아까워서 다른것들도 배우고 있다는거. ) 

분명히 Muse CC 안할거라고 하더니만 아직 설치가 가능한 모양이다. XD만 보자. 

초기 실행화면, mobile, tablet, web 화면 또는 사용자 지정 화면 크기를 먼저 지정해 파일을 실행할 수 있다. 아래 있는 상자들은 작업중인 내용이라 부득이 가림.. 

 

처음 들어왔을때 인터페이스는 아래와 같다. 

1920으로 선택했으니까, 1920 너비의 화면 하나크기의 '아트보드'라는 게 있고, 왼쪽 끝에는 몇가지 아이콘들이 있다. 

제일위의 hamburger를 누르면 다른 메뉴들이 나타나고, 주로 파일 관리와 관련된 항목들이 나타난다. 

파일 저장, 열기, CC Library열기, 이름바꾸기, 같은 것들부터, 내보내기, 가져오기, 플러그인, 도움말이 있다. 여기에서 우리는 주로, 자주쓰는게.. 없다.. 이유는 아래에.. 

파일 열기, 저장하기는 기본과 같고, 내보내기는 ctrl+e, 플러그인으로 내보내기 중 자주쓰게 될 제플린과 연결 후 내보내기는 ctrl+alt+e, 플러그인은 shift+ctrl+p 와 같이 마우스를 이용해 찾아가기보다 가급적 키보드를 사용하는게 편할 때가 있다. 플러그인 관련해서는 빨리 업뎃해 올려드리겠다. 실은 그게 제일 좋거든.. 

 

편집관련한 버튼의 단축키를 정리하면 

 

선택 : v (다른 키 안누르고 v; 다른 편집키도 마찬가지) 

사각형 : r

동그라미 : e

다각형 : y

선 : l

펜 : p

텍스트 : t

새로운 아트보드 : a

확대 : z

 - 이걸 누르기보다, 일정 영역 선택하고, ctrl+3 (화면 전체크기로 확대), ctrl+0 (편집중인 전체 화면 보기)를 주로 쓴다. 여기에서 ctrl+'+' 또는 '-'를 이용하면 확대, 축소가 가능하며, 6400%까지 확대가 가능하다. 

 

조금 길지만, 간단한 로그인창의 wire를 그려보고 끝내보자. 

 

이미 열려있는 데스크탑화면이니, 로그인화면을 넣기에는 그림들어갈 구역과 로그인 화면 반반 나눠도 나쁘지는 않을 것 같다. 먼저 사각형으로 틀을 잡는다. 

 

r 누르고, 사각형을 마구 그린다. 

그냥 마우스로 드래그하면 자유로운 형태의 사각형, shift를 누르면, 정사각형이다. 

동그라미도, 다각형도 마찬가지. 선의경우에는 직선이 그려진다. 

사각형에 오늘은 약간 힘만 줘보자. 사각형들을 선택하고, 오른쪽 아래를 보면, 테두리의 속성을 조절할 수 있다. 

다른 것들을 자유롭게 만져보면서 조금더 익혀보면 좋다. 

 

예를 들면, 

그림자효과나 오브젝트흐림효과는 UI그릴때 꽤 유용하다. 불투명도도 그렇지만, 접근하는 방법에 있어서 사람들마다 다르지만, 저것들로 우리는 재미있는 걸 만들어낼 수 있다. 

그림자효과를 조절한 이미지 버튼

 

처음 시작할 때엔 그냥 다른 이미지들을 보고 비슷하게 만드는데 목표를 삼고 했었는데, 지금도 그렇지만, 많이 건드리면 건드릴 수록 조금이나마 작업이 수월해지는게 없잖았다. 

 

처음이 아닌 분들에게는 몰라도, 처음이라면, 굳이 sketch나 pptx만 하지 않아도, 충분히 고려할만 하니, 같이 공부해보시면 어떠하실지..