[UI/UX] Adobe XD를 이용한 실습 및 단축키 사용법

Adobe XD를 사용하여 실습을 해보았습니다!

 

 

 

 

◎ 아트보드  복사, 붙여넣기

   ▷ control + C, control + V

   ▷ alt키 + 마우스 (도중에 마우스를 떼면 안됩니다!)

 

 

 

◎ 도형 그리기

   ▷ 화면 왼쪽의 도형 아이콘을 눌러서 사용하면 됩니다.

   ▷ 직선, 정사각형, 정삼각형 등을 만드려면 shift키를 같이 누르면 됩니다.

 

왼쪽 인터페이스 도형 아이콘	아이콘을 이용한 그림 그리기

 

 

여기서 펜을 이용해서 그릴때 곡선을 그리려면 클릭한 상태를 유지해 옆으로 마우스를 드래그하면 형성됩니다!

이렇게 반복하면  구름 형상을 그릴 수 있습니다.

 

 

 

 ▷ 오른쪽 인터페이스의 자물쇠 버튼을 누르면 비율이 고정되고 해제하면 비율 고정 없이 도형의 크기가 변경됩니다!

 ▷ 내부의 점을 이용하면 모서리를 둥글게 만들 수 있습니다. 정사각형은 원형도 생성할 수 있습니다!

 ▷ ALT 사용 후 한쪽 점만 둥글게 만들 수 있습니다.

 ▷ 또한, 더블클릭한 후 원하는 지점을 클릭한 후 위치를 옮기면 아래와 같은 형상들을 만들 수 있습니다.

 

 

 

 ▷ 다각형은 오른쪽 인터페이스를 통해 삼각형을 오각형 등으로 만들 수 있습니다.

 

 

 

 

 ▷ 채우기를 통해 배경색을 채우고 테두리 색상도 별도로 지정해 크기를 조정할 수 있습니다.

 ▷ 글자에도 색을 채울 수 있습니다.

 

 

 

 

 ▷ 같은 대문자, 소문자로 변경할 수도 있고 윗첨자, 아랫첨자를 아래의 아이콘을 통해 만들 수 있습니다!

 

 

 ▷ 왼쪽의 형상을 그리드를 통해 오른쪽과 같이 늘일 수 있습니다.

 ▷ 만약 사진이 첨부되었다면 동일한 순서로 사진도 반복해서 나타납니다.

 

 

 

 

 ▷ 아래와 같이 그림자 효과 및 배경 흐림효과를 넣을 수도 있습니다.

 

 

 

 

 ▷ 선형 그레이디언트(사각형, 원형) 및 방사형 그레이디언트(원형)를 통해 여러개의 색상을 하나의 도형에 적용시킬 수 있습니다. 왼쪽 아래에 있는 도형이 방사형 그레이디언트를 적용한 것입니다.

 

 

 

 

 ▷ 구성요소를 적용해 원하는 스타일의 글꼴, 색상, 버튼 형상 등을 모아놓고 사용할 수 있습니다.

 

 

 

 

 ▷ 왼쪽 대각선의 형상으로 아래와 같이 주요 구성 요소를 구분할 수 있습니다.

 ▷ 주 구성 요소를 지정한 후 변경을 하면 복사본은 같이 변경됩니다.

 ▷ 하지만 복사본을 수정한 것은 주 구성 요소와 같이 변경되지 않습니다!

 

원본	복사본	복사본 수정

 

 

 

 

 ▷ 구글 폰트의 이모티콘을 가져와서 UX에도 사용할 수 있습니다. 아래의 홈페이지에서 가져와 SVG파일로 저장 후 사진을 UX파일로 드래그하면 사용할 수 있고 임의로 색상도 변경할 수 있습니다.

 

Material Symbols and Icons - Google Fonts

 

Material Symbols and Icons - Google Fonts

 

 

 ▷ 이미지를 가져오고 싶다면 저장 후 UX로 가져오거나 도형에다가 이미지를 넣으면 해당 도형의 크기만큼 출력됩니다.

 ▷ 버튼을 생성하면 아래와 같이 각각 개별적으로 선형그라디에이션이 적용 됩니다. 

 

 

 

 ▷ 하지만 아래와 같이 5개의 별을 합치기를 해서 선형그라디에이션을 적용하면 전체에 그라디에이션이 적용됩니다.

 

 

이렇게 XD를 이용한 기본 도형 그림 및 설정에 대해서 알아보았습니다.

 

디자인에 엄청 소질이 없다고 생각했는데 실제로 해보니 재밌긴 하네요!!

 

모든 강의를 열심히 듣고 기록을 남겨야겠어요~!!

 

많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~