#01 [아트머그] 이미지에 링크 걸기

안녕하세요, Studio OCI입니다.

아트머그는 의뢰자와 창작자를 연결해주는 중개 플랫폼인 만큼, 상세페이지 내에서 협업 작가의 페이지나 다른 작업물로 자연스럽게 동선을 설계하는 것이 중요합니다.

다만 텍스트 링크를 직접 삽입할 경우, 기존에 구성해둔 상세 레이아웃과 분리되어 보이거나 디자인 흐름을 방해하는 요소로 작용하는 경우가 있습니다.

특히 비주얼 중심으로 구성된 포트폴리오형 상세페이지에서는 링크 방식에 따라 완성도 차이가 크게 느껴질 수 있습니다.

이번 글에서는 이미지에 직접 링크를 연결하여 디자인을 유지하면서도 자연스럽게 페이지 이동을 유도하는 방법을 정리해보겠습니다.

<aside>

HTML 모드로 전환하기 작품 수정 화면에서 내용 입력 영역 우측 하단에 있는 **HTML 버튼**을 클릭하여 편집 모드를 전환합니다.

Group 8.png

</aside>

<aside>

링크를 추가할 <img> 태그 찾기 Design 모드에서 삽입한 이미지는 HTML 모드에서 <img> 태그 형태로 나열됩니다. 이 중 링크를 적용하고자 하는 이미지의 <img> 태그를 확인합니다. (예시에서는 가장 첫 번째 <img> 태그에 링크를 적용해보겠습니다.)

Group 9.png

</aside>

<aside>

<a> 태그로 이미지 감싸기 이미지에 링크를 연결하기 위해서는 해당 <img> 태그를 <a> 태그로 감싸야 합니다.

<img> 태그 앞에 <a>
<img> 태그 뒤에 </a> 를 추가합니다.

이동할 주소 입력하기 앞에서 추가한 <a> 태그 안에 아래 속성을 작성합니다. target="_blank" href="이동할 주소"

target="_blank" href="이동할 주소" : 클릭 시 새 창(새 탭) 에서 열립니다.
target="_self" href="이동할 주소" : 현재 페이지에서 바로 이동합니다.

운영 목적에 맞는 옵션을 선택하여 적용해 주세요.

Group 10.png

</aside>

<aside>

저장 후 확인 수정 버튼을 클릭하여 저장한 뒤, 실제 페이지에서 이미지를 클릭해 정상적으로 이동하는지 반드시 확인합니다. </aside>

유의사항

<a> 태그의 여닫는 위치가 정확하지 않을 경우, 레이아웃이 깨질 수 있습니다.

따옴표(") 누락 또는 태그 오탈자가 없는지 반드시 확인해 주세요.

HTML 편집 후에는 반드시 실제 페이지에서 정상 작동 여부를 테스트해 주시기 바랍니다.

외부 링크 사용 시, 연결되는 페이지의 공개 상태를 사전에 확인해 주세요.

본 가이드는 아트머그 상세페이지 내 HTML 편집 기능을 기준으로 작성되었습니다. 플랫폼 정책 변경에 따라 일부 UI 또는 기능이 달라질 수 있습니다.

페이지 흐름 정리부터 간단한 HTML 구조 수정까지, 디테일을 더하고 싶으시다면 Studio OCI가 함께합니다. 가장 완벽한 형태의 오시(OCI)를 만나보세요.

E-mail : [email protected] X(Twitter) : https://x.com/StudioOCI