디자인 및 프로토타입 공유

웹 브라우저에서 내 프로토타입을 볼 수 있도록 다른 사람들에게 웹 링크를 제공함으로써 이를 공유하는 방법에 대해 학습합니다. iFrame을 지원하는 웹 사이트에서 프로토타입을 임베드하는 방법에 대해서도 학습합니다.

다음과 같은 다양한 방법을 통해 디자인 및 프로토타입을 관련자들과 온라인에서 공유할 수 있습니다.

사전 요구 사항

Adobe XD Share Online 기능을 사용하여 프로토타입을 공유하려면 Adobe 계정을 사용하여 Adobe Creative Cloud 데스크탑 애플리케이션 또는 기타 Adobe 애플리케이션에 로그인해야 합니다.

웹 브라우저에서 내 프로토타입을 볼 수 있도록 리뷰어들에게 웹 링크를 제공함으로써 전체 프로젝트(또는 단일 플로우의 아트보드에 대한 하위 집합)를 공유할 수 있습니다.

예를 들어 모바일 디바이스용으로 제작한 아트보드만 공유하려면 해당 모바일 디바이스에 대한 홈 아트보드를 선택하고 링크를 새로 생성합니다. 홈 아트보드와 연결된 모든 아트보드가 프로토타입에 포함됩니다.

  1. 공유하려는 Adobe XD 파일을 엽니다.

  2. [온라인 공유] 아이콘을 클릭합니다.

  3. 프로토타입의 제목을 지정합니다.

  4. 필요한 경우 프로토타입 아이콘을 추가합니다. 이 아이콘은 모바일 홈 화면에 공유 URL이 추가되는 경우 사용자 홈 화면에 표시됩니다.

  5. 새 링크를 클릭합니다.

    URL이 생성됩니다.

    디자인을 편집하고 이전에 생성한 URL을 새로 고치려면 다시 공유를 클릭한 다음 링크 업데이트를 클릭합니다.

  6. 생성된 URL을 복사하여 이메일 클라이언트나 기타 커뮤니케이션 채널에 붙여넣어 다른 사용자들과 공유할 수 있습니다.

    내 디자인의 특정 아트보드에 대한 딥링크를 설정할 수도 있습니다. 공유 프로토타입으로의 링크를 클릭하고 특정 아트보드로 이동한 다음 해당 아트보드의 URL을 복사합니다. 그런 다음 이 URL을 리뷰어들과 공유합니다.

참고:
  • 인터랙션이 없는 디자인을 공유하면 모든 아트보드가 업로드되며, 사용자는 키보드의 화살표 키를 사용하여 이동할 수 있습니다. 아트보드의 순서는 왼쪽에서 오른쪽, 위에서 아래 방향입니다.
  • 디자인에 인터랙션이 포함되어 있는 경우 홈 아트보드에 연결되어 있는 아트보드만 업로드되고 공유됩니다.

이전에 공유된 링크 삭제

다음 두 가지 방법으로 프로토타입에 공유된 링크를 삭제할 수 있습니다.

공유 링크 사용:

  1. 공유된 프로토타입의 링크를 클릭합니다.
  2. Adobe Creative Cloud 웹 사이트에서 왼쪽 상단에 있는 휴지통 아이콘을 클릭합니다. 해당 프로토타입의 제작자가 맞는지 확인하기 위해 로그인을 요청하는 메시지가 표시됩니다.

Adobe XD에서 링크 관리 옵션 사용:

  1. [온라인 공유] 아이콘을 클릭합니다.
  2. 공유 팝업 대화 상자에서 [링크 관리]를 클릭합니다. 브라우저에 Adobe Creative Cloud 웹 사이트가 열리며, 여기에서 프로토타입을 관리할 수 있습니다.
  3. 프로토타입을 삭제하려면 해당 프로토타입을 선택하고 [삭제]를 클릭합니다.

웹 페이지에서 프로토타입 임베드

프로토타입 공유 시 인라인 프레임을 지원하는 다른 웹 사이트, 블로그 또는 Behance 포트폴리오에 해당 프로토타입을 임베드할 수 있습니다.

  1. 공유하려는 Adobe XD 파일을 엽니다.

  2. [온라인 공유] 아이콘을 클릭합니다.

  3. 표시되는 온라인 공유 대화 상자에서 링크 만들기를 클릭하여 링크가 생성되면 임베드 탭을 클릭합니다.

    프로토타입에 대한 임베드 코드 구하기
    프로토타입에 대한 임베드 코드 구하기

  4. 코드를 복사하여 인라인 프레임을 지원하는 웹 페이지에 붙여넣습니다.

참고:

임베드 코드를 공유하여 다른 사용자가 내 프로토타입을 자신의 웹 사이트에 임베드하도록 할 수도 있습니다.

공유 프로토타입 보기

공유 프로토타입을 검토하는 리뷰어는 다음과 같은 도구를 사용하여 보기 환경을 최적화할 수 있습니다.

  • 핫스팟 힌트: 공유 프로토타입을 조회 중인 누구나 핫스팟 힌트 기능을 사용할 수 있습니다. 이러한 힌트는 인터랙티브 요소를 가리키며 리뷰어들이 이를 클릭해야 작동합니다. 힌트는 리뷰어가 인터랙티브 요소가 없는 아트보드의 아무 공간을 클릭하면 표시됩니다.
  • 전체 화면 모드: 브라우저와 미리보기 모드에서 전체 화면으로 프로토타입을 표시합니다. 사용자는 공유 프로토타입을 보는 동안 화면의 오른쪽 상단에 있는 전체 화면 아이콘을 클릭할 수 있습니다.
    이렇게 하면 프로토타입이 전체 화면에 채워지며 디자인의 모든 세부 사항을 명확하게 보여 줍니다. 전체 화면 모드를 종료하려면 Esc 키를 누릅니다.

공유 프로토타입에 댓글 달기

Adobe XD를 통해 관련자들이 공유 프로토타입에 간편하게 댓글을 달 수 있습니다.

  1. 프로토타입을 검토용으로 공유할 준비가 되면 [온라인 공유] 아이콘을 클릭합니다.

  2. 표시되는 팝업창에서 댓글 허용을 선택하고 링크 만들기를 클릭합니다.

    참고: 프로토타입을 이미 공유한 경우에는 댓글 기능을 활성화하고 이전 링크를 업데이트해도 됩니다.

  3. [링크 복사]를 클릭하고 해당 링크를 인스턴트 메시징이나 이메일 애플리케이션과 같은 관련자들과 공유할 커뮤니케이션 채널에 붙여넣습니다.

    리뷰어가 브라우저에서 공유 링크를 열면 오른쪽 상단에 댓글 아이콘이 표시됩니다.

  4. 리뷰어는 [댓글 표시] 아이콘을 클릭하여 댓글 패널을 열 수 있습니다. Adobe ID를 사용하거나 게스트로 로그인할 수 있습니다.

    1. 리뷰어가 Adobe ID를 사용하여 로그인하려면 [로그인]을 클릭하고 자신의 Adobe 자격 증명을 입력합니다.

    2. 리뷰어가 게스트로 로그인하려면 댓글 패널의 아래쪽에 있는 [게스트로 댓글 작성]을 클릭합니다. 이름을 입력하라는 메시지가 표시되면 이름을 입력하고 “로봇이 아닙니다”를 선택해야 합니다. 그런 다음 간단한 질문에 대한 답변을 입력하고 제출을 클릭해야 합니다.

      참고:

      리뷰어가 게스트로 로그인하고 댓글을 작성한 후 브라우저를 닫거나 새로 고쳐 세션을 종료한 다음 게스트로 다시 로그인하면 이전에 자신이 작성한 댓글을 수정하거나 삭제할 수 없습니다. 반면 리뷰어가 자신의 Adobe ID를 사용하여 로그인한 경우에는 이전 댓글을 편집할 수 있습니다.

  5. 리뷰어는 댓글 패널의 아래쪽에서 댓글을 입력할 수 있습니다. 또한 자신의 댓글을 고정하여 아트보드의 특정 영역을 가리키도록 할 수 있습니다.

    리뷰어가 댓글을 고정시키려면 우선 댓글을 입력하고 아트보드에 고정을 클릭한 다음 해당 아트보드의 특정 위치로 핀을 드래그하면 됩니다.

    댓글을 입력한 다음 아트보드의 특정 위치로 핀 드래그
    댓글을 입력한 다음 아트보드의 특정 위치로 핀 드래그

    Adobe XD는 고정된 모든 댓글에 번호를 할당합니다. 이들 번호는 댓글 패널의 각 댓글에도 반영되어 디자이너가 해당 댓글의 맥락을 쉽게 파악할 수 있습니다.

  6. 검토 절차를 시작한 제작자 또는 디자이너는 리뷰어가 댓글을 추가하는 즉시 알림을 수신하게 됩니다. 알림을 클릭하여 공유 프로토타입을 열고 댓글을 조회할 수 있습니다.

  7. Adobe XD로 돌아가 해당 프로토타입에 필요한 업데이트를 적용합니다. 

    그런 다음 공유 프로토타입의 댓글 패널에서 해당 댓글을 해결할 수 있습니다. 댓글을 해결하려면 [댓글 해결]을 클릭합니다. 해결된 댓글은 내 댓글 목록에서 사라지지만 [해결된 댓글 보기]를 클릭하여 이들 댓글을 조회할 수 있습니다. 미해결된 댓글을 댓글 패널의 미해결 섹션으로 다시 옮길 수도 있습니다.

  8. 업데이트된 프로토타입을 공유할 준비가 되면 [온라인 공유] 아이콘을 클릭하고 [다시 공유]를 클릭한 다음 아래 옵션 중 하나를 클릭합니다.

    • 링크 업데이트: 업데이트된 프로토타입을 이전에 만들어 리뷰어들과 공유한 링크를 통해 사용할 수 있도록 합니다. 
    • 새 링크: 링크를 새로 만들고 리뷰어들과 이를 공유합니다.

    브라우저에서 링크를 열고 해당 댓글에 회신할 수 있습니다.

  9. 리뷰어가 브라우저에서 프로토타입 링크를 보고 있는 경우 이를 간단히 새로 고쳐 변경 내용을 즉시 확인할 수 있습니다(이전 링크를 업데이트한 경우).

  10. 검토 과정을 종료하려면 온라인 공유 아이콘을 클릭하고 댓글 허용을 선택 해제한 다음 해당 링크를 다시 업데이트합니다.

 Adobe

쉽고 빠르게 지원 받기

신규 사용자이신가요?