아래의 팁과 요령을 활용하여 Adobe XD에서 프로토타입을 보다 빠르게 디자인하고 제작할 수 있습니다.

Adobe XD CC를 사용하는 데 유용한 몇 가지 요령은 다음과 같습니다.

일반 팁 및 요령

  • 디자인에서 항목의 그룹을 복사하고 붙여넣기보다는 반복 그리드 툴(프로토타입 관리자에서 사용 가능)을 사용하는 것이 좋습니다.
  • 모양을 선택하고 Option 키(Mac) 또는 Alt 키(Windows)를 누른 상태로 해당 모양의 새 사본을 드래그하여 복제할 수 있습니다.
  • Mac에서 오브젝트 > 잠금(또는 Cmd + L)을 선택하여 요소를 잠글 수 있습니다. 이는 잠금 상태를 전환하므로 요소를 잠금 해제할 때에도 동일한 명령을 사용합니다. Windows의 경우 오브젝트를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 [잠금]을 선택합니다.
  • Cmd 또는 Ctrl 키를 누른 상태로 직접 선택을 활성화합니다. 이렇게 하면 중첩된 오브젝트를 선택할 수 있습니다.
  • 모양 위로 이미지를 드롭하여 빠르게 마스크를 만듭니다. 해당 모양의 채우기가 이미지로 바뀝니다.
  • 이미지를 가져와 편집 가능한 마스크를 만든 다음 그 위에 모양을 그립니다. 두 개 모두 선택한 다음 오브젝트 > 모양으로 마스크를 선택(Mac)하거나 오브젝트를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 [모양으로 마스크]를 선택합니다. 나중에 마스크가 적용된 그룹을 더블 클릭하여 마스크 또는 이미지를 편집할 수 있습니다.

드로잉 및 텍스트

  • Cmd/Ctrl 키를 길게 눌러 스냅 가이드를 끌 수 있습니다.
  • 곡선과 각도 사이를 전환하려면 아무 기준점을 더블 클릭합니다.
  • 곡선 핸들을 드래그하는 동안 Opt/Alt 키를 눌러 독립적인 곡선 핸들을 만듭니다. (이를 다시 종속적으로 만들려면 더블 클릭하여 각도로 돌아간 다음 다시 더블 클릭합니다.)
  • 펜 툴을 사용하여 그릴 때 기준점을 선택할 수 있습니다.
  • 더블 클릭하여 그룹의 편집 컨텍스트(이 컨텍스트에서 요소를 추가할 수 있음)로 들어가거나 Cmd/Ctrl 키를 누른 상태로 그룹 내의 오브젝트를 간단히 클릭하여 선택합니다.
  • 텍스트 항목을 선택한 다음 새로운 항목을 만들어 첫 번째 항목에서 두 번째 항목까지 모든 스타일을 적용할 수 있습니다.
  • 패스 조합(추가/빼기/교차/오버랩 제외)은 변경할 수 없지만 이를 켜거나 끌 수 있습니다.

콘텐츠 가져오기

  • Illustrator에서 콘텐츠를 가져오려면 Illustrator의 벡터 모양을 선택하고 복사한 다음 Adobe XD에 붙여넣습니다.
  • Photoshop에서 비트맵 콘텐츠를 가져오려면 비트맵이나 텍스트 레이어에서 Cmd+A 또는 Ctrl+A로 모두 선택(또는 먼저 벡터 레이어나 그룹을 스마트 오브젝트로 변환)하고 복사한 다음 Adobe XD에 붙여넣습니다. 붙여넣은 레이어는 비트맵이 됩니다. 선택 윤곽 도구를 사용하여 선택함으로써 Photoshop에서 콘텐츠를 복사할 수도 있습니다. 그런 다음 메뉴에서 편집 > 복사(현재 레이어에서 선택) 또는 편집 > 병합하여 복사(선택 영역 내의 모든 레이어에서 선택)를 선택합니다.
  • Sketch에서 콘텐츠를 가져오려면 하나 이상의 레이어 또는 그룹을 선택하고 [내보낼 수 있도록 설정]을 클릭합니다. 포맷으로 SVG를 선택하고 Sketch에서 레이어를 드래그하여 Adobe XD에 놓습니다. 이렇게 하면 Adobe XD에서 벡터 콘텐츠를 편집할 수 있습니다.
  • Mac에서 에셋(PNG, JPG, TIFF, GIF, SVG)을 가져오려면 파일 > 가져오기를 선택하거나, 드래그 앤 드롭하거나, 파인더에서 이미지를 복사하여 Adobe XD에 붙여넣습니다.
    Windows의 경우 햄버거 메뉴를 클릭하고 [가져오기]를 클릭하거나, 드래그 앤 드롭하거나, 파일 탐색기에서 이미지를 복사하고 붙여넣습니다.
    브라우저에서 복사하여 Adobe XD에 붙여넣을 수도 있습니다.

키보드 컨트롤

  • 모퉁이 반경을 조정할 때 Option 키를 누르고 있으면 하나의 모퉁이만 조정되도록 제한할 수 있습니다.
  • 요소를 이동하거나 크기를 조정할 때 스냅 기능을 일시적으로 비활성화하려면 Cmd 또는 Ctrl 키를 누른 상태를 유지합니다.
  • 요소의 크기를 조정할 때 Shift 키를 누르고 있으면 요소의 종횡비가 유지됩니다.
  • 모양을 그릴 때 기본 설정(왼쪽 상단에서 시작)이 아닌 중앙에서부터 그리려면 Alt 키를 누른 상태를 유지합니다.
  • 선택한 항목의 불투명도를 빠르게 변경하려면 다음 숫자 키를 누르십시오. 1= 10%, 2 = 20% 등, 0 = 100%.
  • 화살표 키를 사용하여 모양이나 조절점을 약간씩 이동시킬 때 Shift 키를 누르고 있으면 10px 단위로 이동합니다.
  • 스페이스바를 누르고 있는 동안에는 손 모드로 전환됩니다. 캔버스 전체에 걸쳐 클릭하고 드래그할 수 있습니다.

아트보드

  • 아트보드를 선택하려면 아트보드 제목을 클릭하거나, 아트보드의 배경을 Cmd/Ctrl 키를 누른 상태로 클릭하거나, 해당 아트보드의 배경을 더블 클릭합니다.
  • 빈 아트보드를 선택하려면 아트보드의 배경을 클릭합니다.
  • 아트보드(및 해당 콘텐츠)를 복제하려면 아트보드를 선택하고 드래그하는 동안 Cmd(Mac) 또는 Alt(Windows) 키를 눌러 복사합니다.
  • 아트보드의 이름을 변경하려면 해당 제목을 더블 클릭합니다.

반복 그리드

  • 반복 그리드에서 반복되는 항목 간 패딩을 조정하려면 반복 그리드를 선택한 다음 요소 사이의 공간에 마우스를 가져다 대고 드래그합니다. 반복 그리드 내에서 항목을 편집 중인 경우에는 Esc 키를 눌러 편집 모드를 종료해야 합니다.

시험 제작 및 미리보기

  • 임의의 아트보드(또는 전체 아트보드)에서 아무 오브젝트를 선택하고 와이어를 드래그하여 아트보드 간 인터랙션을 트리거합니다.
  • 설정한 인터랙션을 해제하려면 대상에서 와이어를 바깥쪽으로 드래그합니다.
  • 웹용으로 디자인할 때 디졸브 전환 기능을 사용합니다.
  • 프로토타입 모드에서 Cmd + A(Mac) 또는 Ctrl + A(Windows)를 누르면 아트보드 간 모든 연결(아트보드에서 직접 트리거되는 것 제외)을 확인할 수 있습니다.
  • 미리보기 창에는 현재 선택된 아트보드가 표시됩니다. 선택한 아트보드가 없으면 미리보기 창에는 홈 아트보드가 우선적으로 표시됩니다.
  • 인터랙티브 프로토타입의 미리보기 창에서 비디오를 녹화할 수 있습니다. 제목 표시줄의 녹화 아이콘을 클릭하여 비디오 녹화를 시작합니다.
  • 녹화 버튼을 다시 클릭하거나 Esc 키를 누르면 비디오 녹화가 중단됩니다.

공유

  • 공유 기능을 사용하려면 Adobe 계정을 통해 Adobe Creative Cloud 데스크탑 앱 또는 기타 Adobe 애플리케이션(예: Photoshop, Illustrator 등)에 로그인해야 합니다.
    Adobe ID, Enterprise ID 및 Federated ID 모두 지원됩니다.
  • 첫 번째 추가 인터랙션이 없는 디자인 파일을 공유하면 모든 아트보드가 업로드되며, 사용자는 키보드의 화살표 키를 사용하여 이동할 수 있습니다. 아트보드의 순서는 왼쪽 상단에서 오른쪽으로 이동합니다.
  • 디자인에 인터랙션이 포함되어 있는 경우에는 홈 아트보드에 연결되어 있는 아트보드만 업로드되고 공유됩니다.
  • 홈 아트보드로 정의된 아트보드는 사용자들이 내가 공유한 디자인을 조회할 때 처음으로 보게 되는 아트보드입니다.
  • 프로토타입 모드에서 아트보드의 옆에 있는 홈 아트보드 아이콘을 선택하여 홈 아트보드를 변경할 수 있습니다. 이 홈 아트보드 아이콘은 선택한 아트보드(또는 선택한 항목의 대상)에 대해서만 표시됩니다.
  • 모바일 웹 브라우저에서 프로토타입을 볼 때 디바이스의 홈 화면에 바로 가기를 저장할 수 있습니다. 이렇게 하면 프로토타입을 보다 기본 애플리케이션에 가깝게 느껴지도록 표현할 수 있습니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책