WordPress에서 이미지에 하이퍼링크 추가하는 방법
WordPress에서 이미지에 하이퍼링크 추가하는 방법
링크가 연결된 이미지는 정적인 시각 요소를 탐색 도구로 바꿉니다. 방문자에게 텍스트 링크나 버튼을 읽게 하는 대신, 제품 사진, 배너, 로고 또는 안내용 이미지를 클릭해 원하는 페이지로 바로 이동하게 할 수 있습니다.
비즈니스 웹사이트에서는 특히 유용합니다. 클릭 가능한 이미지를 사용하면 방문자가 서비스 페이지, 문의 양식, 가격 안내 페이지, 블로그 글 또는 회원가입 흐름으로 쉽게 이동할 수 있습니다. 적절하게 활용하면 사용성을 높이고, 전환을 지원하며, 중요한 페이지를 더 쉽게 찾을 수 있게 합니다.
이미지를 링크하는 이유
이미지에 하이퍼링크를 추가하는 기능은 여러 일반적인 웹사이트 구성에서 유용합니다.
- 주요 제안으로 연결되는 히어로 배너
- 상세 페이지로 이어지는 서비스 카드
- 홈페이지로 돌아가게 하는 로고
- 제품 상세 페이지로 연결되는 제품 사진
- 캠페인 랜딩 페이지로 보내는 홍보 그래픽
- 시각적 클릭 지점이 필요한 행동 유도 섹션
클릭 가능한 이미지는 특히 작은 텍스트 링크보다 시각적 단서가 더 잘 작동하는 모바일 환경에서 페이지를 더 쉽게 훑어보게 해줍니다.
시작하기 전에
다음 항목이 준비되어 있는지 확인하세요.
- 게시되었거나 초안 상태인 WordPress 페이지 또는 글
- 미디어 라이브러리에 업로드되었거나 삽입할 준비가 된 이미지
- 이미지가 열어야 할 대상 URL
내부 페이지로 연결할 경우 먼저 해당 페이지 주소를 복사해 두세요. 외부 사이트로 연결할 경우에는 목적지가 신뢰할 수 있고 관련성이 있는지 확인하세요.
블록 편집기에서 이미지에 하이퍼링크 추가하는 방법
대부분의 최신 WordPress 사이트는 Gutenberg라고도 불리는 블록 편집기를 사용합니다. 과정은 간단합니다.
1. 페이지 또는 글 열기
WordPress 대시보드에서 이미지 링크를 넣고 싶은 페이지나 글로 이동합니다.
2. 이미지 블록 삽입 또는 선택하기
이미지가 아직 페이지에 없다면:
+버튼을 클릭합니다.- 이미지 블록을 선택합니다.
- 새 이미지를 업로드하거나, 미디어 라이브러리에서 선택하거나, 적절한 경우 URL에서 삽입합니다.
이미지가 이미 페이지에 있다면 한 번 클릭해 블록을 선택합니다.
3. 링크 추가하기
이미지 블록이 선택되면 블록 도구 모음에서 링크 아이콘을 찾습니다.
- 링크 버튼을 클릭합니다.
- 대상 URL을 붙여넣거나 입력합니다.
- Enter 키를 누르거나 링크를 적용합니다.
WordPress 버전과 테마에 따라 다음 옵션이 표시될 수도 있습니다.
- 미디어 파일
- 첨부 페이지
- 사용자 지정 URL
- 없음
대부분의 비즈니스 용도에서는 원하는 위치를 정확히 제어할 수 있는 사용자 지정 URL이 가장 좋은 선택입니다.
4. 필요하면 링크 동작 조정하기
일부 편집기에서는 링크를 새 탭에서 열지 여부를 선택할 수 있습니다. 외부 링크에는 종종 유용하지만, 내부 링크는 같은 탭에서 열리는 편이 보통 더 좋습니다.
방문자 경험을 개선할 때만 새 탭을 사용하세요. 모든 링크를 강제로 새 탭에서 열게 하면 오히려 혼란스러울 수 있습니다.
5. 페이지 저장 또는 업데이트하기
변경 사항을 유지하려면 업데이트, 게시, 또는 임시 저장을 클릭합니다.
클래식 편집기에서 이미지 링크하는 방법
사이트가 아직 클래식 편집기를 사용한다면 과정은 조금 다르지만 여전히 간단합니다.
1. 이미지 삽입하기
미디어 추가를 클릭하고 이미지를 콘텐츠 영역에 배치합니다.
2. 이미지 선택하기
편집 도구 모음이 나타나도록 이미지를 클릭합니다.
3. 링크 설정 열기
설정 방식에 따라 이미지 도구 모음이나 이미지 세부 정보 패널에서 링크 옵션을 선택합니다.
4. 대상 URL 입력하기
링크 필드에 URL을 붙여넣고 변경 사항을 확인합니다.
5. 글 또는 페이지 업데이트하기
저장하면 링크가 연결된 이미지가 실제 사이트에서 활성화됩니다.
링크된 이미지를 사용할 때의 모범 사례
이미지에 하이퍼링크를 달았다면 방문자가 클릭했을 때 어떤 일이 일어나는지 바로 이해할 수 있어야 합니다. 다음 모범 사례를 따라 명확하고 효과적인 경험을 유지하세요.
목적지를 분명하게 하기
이미지가 뒤에 있는 행동이나 콘텐츠를 시각적으로 암시하도록 선택하세요. 서비스 이미지는 관련 서비스 페이지로, 홍보 그래픽은 해당 프로모션으로 연결되어야 합니다.
설명적인 대체 텍스트 사용하기
대체 텍스트는 스크린 리더가 이미지를 이해하는 데 도움을 주고 접근성을 높입니다. 이미지가 로드되지 않을 때도 맥락을 제공합니다.
이미지가 순수하게 장식용이라면 하이퍼링크가 아예 필요하지 않을 수도 있습니다.
모바일에서도 중요한 이미지는 클릭 가능하게 유지하기
모바일 방문자는 탭 영역에 의존합니다. 이미지는 실수로 잘못 누르지 않도록 충분히 크게 만들어야 합니다.
관련 없는 콘텐츠로 연결하지 않기
한 주제에서 완전히 다른 내용으로 방문자를 보내지 마세요. 맞지 않는 링크는 신뢰를 떨어뜨리고 전환에도 악영향을 줍니다.
링크된 이미지는 적절한 수만 사용하기
클릭 가능한 이미지가 너무 많으면 페이지가 복잡해 보일 수 있습니다. 실제로 가치가 있을 때만 사용하세요.
이미지에 보조 텍스트를 함께 배치하기
짧은 제목이나 캡션을 이미지 옆에 두면 다음 행동을 더 쉽게 이해할 수 있습니다. 마케팅 페이지와 서비스 페이지에서는 특히 중요합니다.
비즈니스 웹사이트에서의 일반적인 활용 사례
링크된 이미지는 소규모 비즈니스 사이트의 목표를 여러 방식으로 지원할 수 있습니다.
홈페이지 탐색
로고나 주요 이미지를 서비스, 가격 안내, 문의 같은 핵심 페이지로 연결할 수 있습니다.
제품 및 서비스 홍보
랜딩 페이지의 이미지는 방문자를 세일즈 퍼널의 다음 단계로 이동시킬 수 있습니다.
블로그 참여 유도
대표 이미지는 관련 자료, 사례 연구 또는 내부 글로 연결될 수 있습니다.
리드 생성
배너나 배지 이미지는 회원가입 양식, 상담 페이지 또는 제안 페이지로 연결될 수 있습니다.
신뢰 구축
인증 배지, 파트너 로고 또는 후기 그래픽은 더 자세한 정보를 담은 지원 페이지로 연결할 수 있습니다.
자주 발생하는 문제 해결하기
링크된 이미지가 예상대로 작동하지 않는다면 다음 항목을 확인하세요.
잘못된 주소가 입력된 경우
대상 주소가 완전하고 정확한지 확인하세요. 잘못된 형식이나 깨진 내부 링크는 이미지가 제대로 작동하지 않게 만들 수 있습니다.
이미지가 올바른 페이지가 아니라 첨부 페이지로 연결된 경우
WordPress는 때때로 미디어 또는 첨부 링크를 기본값으로 설정합니다. 원하는 정확한 대상 주소로 바꾸세요.
편집한 내용이 저장되지 않은 경우
실제 사이트에서 이미지 링크가 보이지 않는다면 편집 후 업데이트 또는 게시를 눌렀는지 확인하세요.
플러그인이나 테마가 간섭하는 경우
일부 페이지 빌더, 최적화 플러그인 또는 커스텀 테마는 이미지 링크 동작을 변경할 수 있습니다. 필요하다면 스테이징 환경에서 플러그인을 일시적으로 비활성화한 뒤 테스트하세요.
이미지는 클릭되는 것처럼 보이지만 아무 반응이 없는 경우
다른 요소가 이미지를 덮고 있거나 커스텀 코드가 페이지 레이아웃에 영향을 주는 경우 발생할 수 있습니다. 페이지 구조를 확인하고 다른 브라우저에서도 테스트해 보세요.
사이트 성과를 높이기 위한 링크 전략 팁
링크된 이미지는 단순한 장식이 아니라 더 큰 콘텐츠 전략을 지원해야 합니다.
- 이미지가 사용자의 유용한 다음 행동을 돕는 경우에만 링크하기
- 이미지와 사용자 의도가 일치하는 페이지로 연결하기
- 명확한 캡션과 주변 행동 유도 문구 사용하기
- 가능하다면 분석 도구로 클릭 성과 확인하기
- 페이지 주소가 바뀌면 오래된 이미지 링크 업데이트하기
회사 웹사이트에서는 이런 작은 개선만으로도 탐색을 더 매끄럽게 하고 사용자 여정 전반의 마찰을 줄일 수 있습니다.
마무리 생각
WordPress에서 이미지에 하이퍼링크를 추가하는 일은 간단하지만, 목적에 맞게 사용하면 사용성과 전환에 의미 있는 영향을 줄 수 있습니다. 로고, 배너, 서비스 이미지 또는 홍보 그래픽을 연결하든 핵심은 목적지를 관련성 있게 유지하고 행동을 명확하게 만드는 것입니다.
비즈니스 웹사이트를 운영한다면 클릭 가능한 모든 이미지를 사이트 구조의 일부로 보세요. 가장 좋은 이미지 링크는 방문자를 자연스럽게 다음 단계로 안내하고, 콘텐츠를 지원하며, 데스크톱과 모바일 모두에서 경험을 더 쉽게 만듭니다.
이용 가능한 질문이 없습니다. 나중에 다시 확인해 주세요.