Figma에 하이퍼링크를 추가하는 방법

협업 디자인 도구인 Figma의 가장 유용한 기능 중 하나는 하이퍼링크를 추가할 수 있다는 것입니다. 이 기능을 사용하면 온라인 페이지 연결이 쉬워집니다. 하이퍼링크를 사용하면 사이트를 쉽게 탐색할 수 있습니다. 링크를 통해 사이트 방문자는 필수 리소스, 랜딩 페이지, 기타 정보에 직접 액세스할 수 있습니다.

아이콘과 텍스트에 링크를 추가하는 방법이나 일반적인 하이퍼링크를 삽입하는 방법을 배우려는 경우에도 이 문서가 도움이 될 것입니다. 이를 달성하기 위해 사용할 수 있는 다양한 방법에 대해 알아보려면 계속 읽어보세요.

아이콘을 이용한 하이퍼링크 생성

이는 Figma에서 사용할 수 있는 가장 일반적인 유형의 링크 중 하나입니다. 여기에서는 링크 아이콘을 사용하여 텍스트 링크를 추가합니다. 이 단계는 이미지에는 작동하지 않습니다.

1. 페이지의 텍스트를 활용하여 섹션 시작 부분을 클릭한 다음 그 위로 드래그하여 다른 페이지로 연결하려는 텍스트를 강조 표시합니다.
   
2. 텍스트를 강조 표시한 후 작업 공간 상단의 도구 모음에서 “링크” 아이콘을 누르세요. 그러면 강조 표시된 단어 위에 상자가 생성됩니다.
   
3. 다른 탭에서 링크하려는 웹 페이지를 열고 해당 웹 페이지를 먼저 강조 표시한 후 Mac에서는 "Command" + "C", Windows에서는 "Control" + "C"를 눌러 URL을 복사하세요.
   
4. 강조 표시된 상자 위의 URL 상자로 이동하여 그 안을 클릭하세요.
   
5. Mac에서는 “Command” + “V”를 누르고, Windows에서는 “Control” + “V”를 누르세요. 이렇게 하면 상자에 URL을 붙여넣을 수 있습니다.
   
6. 페이지의 빈 공간을 클릭하거나 "Enter" 키를 눌러 텍스트에 링크를 추가하세요. 단어 아래에 줄이 나타납니다. 사용자가 해당 단어를 클릭하면 링크 주소로 이동됩니다.
   

키보드 단축키를 사용하여 링크 만들기

이는 Figma 링크를 만드는 데 사용할 수 있는 두 번째 방법입니다. 키보드 단축키 방법을 사용하여 텍스트에는 링크를 추가할 수 있지만 이미지에는 링크를 추가할 수 없습니다.

1. 링크로 사용할 텍스트나 단어를 선택합니다.
   
2. 강조 표시된 단어나 텍스트 위에 상자를 만들려면 이 단축키를 사용하세요.
   
   • Windows 장치에서는 “Control” + “K”를 누르세요.
   • Mac 장치에서는 “Command” + “K”를 누르세요.
3. 상자 안에 원하는 URL을 붙여넣으세요.
   
4. 하이퍼링크를 생성하려면 “Enter” 버튼을 누르세요.
   

프로토타입 패널을 활용하여 하이퍼링크 만들기

이 방법은 이미지와 텍스트 모두에 사용할 수 있습니다. 소셜 미디어 아이콘과 같은 이미지를 연결하는 이상적인 옵션입니다.

1. 먼저 텍스트나 이미지를 클릭하여 선택하세요.
   
2. "속성" 패널로 이동하여 "프로토타입"을 엽니다.
   
3. 프로토타입 메뉴의 "상호작용" 아래에서 현재 상호작용이 가능한 경우 이를 선택합니다. 없는 경우 "+" 아이콘을 클릭하여 추가하세요.
   
4. 링크를 성공적으로 추가하려면 상호 작용 설정을 조정하세요.
   
   • 상호작용을 '클릭 시'로 설정하세요.
   • 그런 다음 작업을 "링크 열기"로 설정해야 합니다.
   • URL 상자에 링크를 붙여넣으세요.
   • 사용자가 링크를 탭할 때 새 탭을 열려면 "새 탭에서 열기" 옵션을 선택하세요.
5. 이미지나 텍스트 링크를 추가하려면 프로토타입 패널을 종료하세요. 이것은 이미지를 바꾸지 않습니다. 그러나 “현재” 탭에서 디자인을 볼 때 이미지 위로 마우스를 가져가면 커서가 변경됩니다. 사진을 클릭하면 추가한 링크가 열립니다.
   

Figma 하이퍼링크 편집 또는 삭제

링크가 작동하지 않는다고 생각되거나 링크를 폐기하고 싶다면 해당 링크를 편집하거나 삭제할 수 있습니다. 링크를 편집하려면:

1. 링크 모달을 열려면 마우스를 사용하여 링크된 텍스트 위에 마우스를 올리십시오.
   
2. 주소를 편집하려면 모달 옆에 있는 "편집" 옵션을 선택하세요.
   
3. 필요에 따라 변경하고 종료합니다.
4. 삭제하려면 링크 상자를 지우세요. 이렇게 하면 URL이 완전히 삭제되고 텍스트가 더 이상 연결되지 않습니다.
   

Figma에 하이퍼링크를 추가하여 접근성 향상

Figma의 하이퍼링크를 사용하면 사용자가 콘텐츠를 더 쉽게 탐색할 수 있습니다. 귀하의 링크는 사용자를 다른 Figma 파일, 페이지, 프레임 또는 프로토타입으로 보낼 수 있습니다. 링크는 외부 웹사이트에 연결되어 새 브라우저 탭으로 보내질 수도 있습니다. 하이퍼링크를 추가하는 방법은 다양하며 위에 설명된 단계를 따르면 간단합니다.

Figma에 하이퍼링크를 추가하려고 시도한 적이 있습니까? 그 경험은 어땠나요? 아래 댓글 섹션을 통해 알려주세요.