디자인 모드에서 하이퍼링크를 연결할 텍스트 오브젝트 내부의 텍스트를 선택합니다.
마지막 업데이트 날짜
2022년 3월 21일
Adobe XD 프로토타입에서 외부 웹 페이지로 연결하는 방법에 대해 알아보십시오.
디자인의 모든 텍스트, 오브젝트 또는 구성 요소를 외부 웹 페이지나 이메일 주소에 연결할 수 있습니다. 하이퍼링크를 만든 후 미리 보고 디자인 사양을 관련자와 공유할 수 있습니다.
텍스트 하이퍼링크 만들기
텍스트를 웹 페이지나 이메일 주소에 하이퍼링크로 연결하려면 다음 단계를 수행하십시오.
보안 웹 페이지에 연결
보안 웹 페이지(https)에 연결하려면 웹 페이지의 URL을 입력합니다. 예: https://www.adobe.com.
이메일 주소에 연결
이메일 주소에 연결하려면 mailto:를 입력한 다음 수신자의 이메일 주소를 입력합니다. 예: mailto:john@xyz.com.
디자인 모드에서 텍스트 하이퍼링크를 정의한 후:
- 캔버스에서는 하이퍼링크된 텍스트에 기본적으로 밑줄이 그어집니다.
- 텍스트의 일부만 하이퍼링크된 경우 캔버스에서 텍스트 오브젝트를 선택하면 여기에 URL 삽입 필드에 대시(-)가 표시됩니다.
- 프로토타입 모드에서 하이퍼링크가 포함된 텍스트 오브젝트를 선택하면 하이퍼링크가 속성 관리자에 표시됩니다.
- 디자인 또는 프로토타입 모드에서 텍스트 하이퍼링크를 편집할 수 있습니다.
오브젝트 또는 구성 요소 하이퍼링크 만들기
오브젝트 또는 구성 요소를 웹 페이지나 이메일 주소에 하이퍼링크하려면 다음 단계를 수행하십시오.
보안 웹 페이지에 연결
보안 웹 페이지(https)에 연결하려면 웹 페이지의 URL을 입력합니다. 예: https://www.adobe.com.
이메일 주소에 연결
이메일 주소에 연결하려면 mailto:를 입력한 다음 수신자의 이메일 주소를 입력합니다. 예: mailto:john@xyz.com.
하이퍼링크를 미리 보려면 데스크탑 미리보기를 클릭합니다.
하이퍼링크를 클릭하면 항상 별도의 브라우저 탭에서 열립니다.
디자인 및 프로토타입 모드의 하이퍼링크 텍스트
디자인 모드에서 텍스트에 대한 하이퍼링크를 정의하는 것 외에도 프로토타입 모드에서 텍스트 오브젝트에 대한 하이퍼링크를 정의할 수 있습니다. 디자인 모드에서 정의된 하이퍼링크는 프로토타입 모드에서의 하이퍼링크보다 우선합니다. 데스크탑 미리보기 또는 프로토타입 링크에서:
- 정의된 하이퍼링크가 없는 텍스트 부분을 클릭하면 프로토타입 모드에서 정의된 하이퍼링크가 열립니다.
- 디자인 모드에서 텍스트 오브젝트의 전체 텍스트를 하이퍼링크하고 프로토타입 모드에서 탭 트리거를 사용하여 텍스트 오브젝트를 하이퍼링크하면 프로토타입 모드 하이퍼링크가 작동하지 않습니다.
XD 앱:
- https 또는 mailto 이외의 프로토콜이 있거나 프로토콜이 없는 URL을 추가하거나 URL에 잘못된 도메인이 있는 경우 경고가 표시됩니다. URL을 수정합니다.
데스크탑 미리보기 및 프로토타입 링크:
- https 또는 mailto 이외의 프로토콜이 있거나 프로토콜이 없거나 URL에 유효하지 않은 도메인이 있는 하이퍼링크를 클릭하면 URL이 열리지 않습니다. 화면 하단에 오류 메시지가 표시됩니다.
- 유효한 도메인이 있는 하이퍼링크를 클릭하면 XD는 연결된 웹 사이트에서 보안 검사를 시행합니다. 보안 검사가 실패하면 보안 경고가 표시됩니다. URL을 계속 진행하거나 종료하도록 선택할 수 있습니다.
자세히 알아보기
3분 분량의 이 비디오를 통해 XD에서의 하이퍼링크 작업에 대해 자세히 알아보십시오.
관련 리소스
질문이나 아이디어가 있습니까?
질문이나 공유하고자 하는 아이디어가 있습니까? Adobe XD 커뮤니티에 참여하십시오. 소중한 의견과 다양한 작품 활동을 기대하겠습니다!
