협업 디자인 도구 Figma의 가장 유용한 기능 중 하나는 하이퍼링크를 추가할 수 있다는 것입니다. 이 기능을 사용하면 온라인 페이지 연결이 쉬워집니다. 하이퍼링크를 사용하면 사이트를 쉽게 탐색할 수 있습니다. 링크를 통해 사이트 방문자는 무엇보다도 필수 리소스 및 랜딩 페이지에 직접 액세스할 수 있습니다.
아이콘과 텍스트에 대한 링크를 추가하는 방법이나 일반적으로 하이퍼링크를 삽입하는 방법을 배우려는 경우 이 문서에서 안내해 드립니다. 이를 달성하기 위해 사용할 수 있는 다양한 방법에 익숙해지려면 계속 읽으십시오.
아이콘을 이용한 하이퍼링크 생성
이것은 Figma에서 사용할 수 있는 가장 일반적인 링크 유형 중 하나입니다. 여기에서 링크 아이콘은 텍스트 링크를 추가하는 데 사용됩니다. 이 단계는 이미지에는 적용되지 않습니다.
- 페이지의 텍스트를 활용하여 섹션 시작 부분을 클릭한 다음 드래그하여 다른 페이지에 연결하려는 텍스트를 강조 표시합니다.
- 텍스트를 강조 표시한 후 작업 공간 상단의 도구 모음에서 "링크" 아이콘을 누르십시오. 이렇게 하면 강조 표시된 단어 위에 상자가 생성됩니다.
- 다른 탭에서 연결하려는 웹 페이지를 열고 URL을 먼저 강조 표시하고 Mac의 경우 "Command" + "C" 또는 Windows의 경우 "Control" + "C"를 눌러 URL을 복사합니다.
- 강조 표시된 상자 위의 URL 상자로 이동하여 내부를 클릭합니다.
- Mac에서는 "Command" + "V"를, Windows에서는 "Control" + "V"를 누르십시오. 이렇게 하면 상자에 URL을 붙여넣을 수 있습니다.
- 페이지의 빈 공간을 클릭하거나 "Enter"를 눌러 텍스트에 링크를 추가합니다. 단어 아래에 줄이 나타납니다. 사용자가 해당 단어를 클릭하면 링크 주소로 이동합니다.
키보드 단축키를 사용하여 링크 만들기
이것은 Figma 링크를 만드는 데 사용할 수 있는 두 번째 방법입니다. 키보드 단축키 방법을 사용하여 이미지가 아닌 텍스트에 링크를 추가할 수 있습니다.
- 링크로 사용할 텍스트나 단어를 선택합니다.
- 이 단축키를 사용하여 강조 표시된 단어나 텍스트 위에 상자를 만듭니다.
- Windows 장치에서 "Control" + "K"를 누릅니다.
- Mac 장치에서 "Command" + "K"를 누릅니다.
- 상자 안에 원하는 URL을 붙여넣습니다.
- "Enter" 버튼을 눌러 하이퍼링크를 생성합니다.
프로토타입 패널을 활용하여 하이퍼링크 만들기
이 방법은 이미지와 텍스트 모두에 사용할 수 있습니다. 소셜 미디어 아이콘과 같은 이미지를 연결하는 데 이상적인 옵션입니다.
- 텍스트나 이미지를 먼저 클릭하여 선택합니다.
- "속성" 패널로 이동하여 "프로토타입"을 엽니다.
- 프로토타입 메뉴의 "상호 작용"에서 현재 상호 작용이 있는 경우 선택합니다. 없는 경우 "+" 아이콘을 클릭하여 추가합니다.
- 링크를 성공적으로 추가하려면 상호 작용 설정을 조정하십시오.
- 상호작용을 '클릭 시'로 설정합니다.
- 그런 다음 작업을 "링크 열기"로 설정해야 합니다.
- URL 상자에 링크를 붙여넣습니다.
- 사용자가 링크를 누를 때 새 탭을 열려면 "새 탭에서 열기" 옵션을 선택하십시오.
- 이미지 또는 텍스트 링크를 추가하려면 프로토타입 패널을 종료하십시오. 이것은 이미지를 변경하지 않습니다. 그러나 "Present" 탭 내에서 디자인을 볼 때 이미지 위로 마우스를 가져가면 커서가 변경됩니다. 사진을 클릭하면 추가한 링크가 열립니다.
Figma 하이퍼링크 편집 또는 삭제
링크가 작동하지 않거나 스크랩하고 싶다면 링크를 수정하거나 삭제할 수 있습니다. 링크를 편집하려면:
- 링크 모달을 열려면 마우스를 사용하여 연결된 텍스트 위로 마우스를 가져갑니다.
- 모달 옆에 있는 "편집" 옵션을 선택하여 주소를 편집합니다.
- 필요에 따라 변경하고 종료합니다.
- 삭제하려면 링크 상자를 지웁니다. 이렇게 하면 URL이 완전히 삭제되고 텍스트가 더 이상 연결되지 않습니다.
Figma에 하이퍼링크를 추가하여 접근성 향상
Figma의 하이퍼링크를 사용하면 사용자가 콘텐츠를 더 쉽게 탐색할 수 있습니다. 귀하의 링크는 사용자를 다른 Figma 파일, 페이지, 프레임 또는 프로토타입으로 보낼 수 있습니다. 링크는 외부 웹사이트에 연결되어 새 브라우저 탭으로 이동할 수도 있습니다. 하이퍼링크를 추가하는 방법에는 여러 가지가 있으며 위에 설명된 단계에 따라 간단해야 합니다.
Figma에서 하이퍼링크를 추가하려고 시도한 적이 있습니까? 경험은 어땠나요? 아래 의견란에 알려주십시오.
