쇼핑몰에 상품을 등록 할 때, 매번 내 폴더에서 이미지를 찾아서 순서대로 등록하고, 다른 마켓에서 반복적이 잡무가 너무 많으시죠? 간단한 HTML 만 활용 한다면 작업 속도를 좀 더 효율적으로 올릴 수 있습니다. 알아듣지 못 할 언어가 막 쓰여 있지만 하나도 어렵지 않습니다. 태그만 붙여 넣기 하고 파일 이름만 바꿔주면 쉽게 이미지를 출력 할 수 있습니다.
1. 업로드한 이미지 URL
이미지를 상세페이지에 표시하려면 먼저 이미지의 URL이 필요합니다. 이미 지난 포스팅에서 이미지의 URL을 획득하는 방법을 배웠으므로, 이번에는 그 URL을 활용하는 방법에 집중하겠습니다. URL은 이미지 파일이 위치한 웹 주소로, 이 주소를 이용해 HTML 태그로 이미지를 출력 할 수 있습니다.
2. HTML 이미지 태그 이해하기
이미지를 상세페이지에 출력하기 위해서는 img 태그를 사용합니다. HTML에서 이미지 태그는 <img>로 표기되며, 이 태그 안에 이미지의 URL을 포함시켜야 합니다. 예를 들어, 이미지 URL이 http://example.com/image.jpg라면 아래와 같이 코드를 작성합니다.
<img src="http://example.com/image.jpg" alt="상품 이미지">
여기서 src는 이미지의 경로를 지정하는 속성이고, alt는 이미지가 표시되지 않을 때 대신 표시될 텍스트를 의미합니다. 이 코드를 사용하면 내가 원하는 이미지를 상세페이지에 쉽게 삽입할 수 있습니다.
3. 오픈마켓에서 이미지 출력하기
스마트스토어, 지마켓, 쿠팡, 11번가 등 다양한 오픈마켓에서는 HTML 태그를 사용하여 이미지를 상세페이지에 삽입할 수 있습니다. 예를 들어, 스마트스토어의 상품 등록 페이지에서 HTML 작성 탭을 열고, 앞서 작성한 <img> 태그를 작성하면 됩니다.
예시: 스마트스토어 상세페이지에 이미지 출력하기
스마트스토어의 상품 등록 페이지에서 상세설명란을 열고, HTML 작성 탭에 아래와 같은 코드를 입력합니다:
<center><img src="http://example.com/image.jpg" alt="상품 이미지"></center>
이 코드는 이미지를 가운데 정렬하여 페이지에 표시하게 됩니다. 미리보기를 통해 이미지가 잘 출력되는지 확인할 수 있습니다. 만약 이미지가 두 장 이상이라면, 아래와 같이 코드를 추가합니다.
<center><img src="http://example.com/image1.jpg" alt="상품 이미지 1"></center>
<center><img src="http://example.com/image2.jpg" alt="상품 이미지 2"></center>
이렇게 하면 여러 개의 이미지를 위아래로 배치하여 출력할 수 있습니다.
4. 이미지 수정 방법
이미지를 업로드한 후, 만약 이미지의 수정이 필요하다면 어떻게 해야 할까요? 수정된 이미지를 업로드할 때는 기존 이미지 파일과 같은 파일명으로 업로드하면 됩니다. 이미지를 수정 할 때 덮어쓰기 옵션을 선택하면, 기존 이미지가 새로운 이미지로 대체됩니다.
주의사항: 이미지 갱신 문제 해결
이미지를 수정했음에도 불구하고, 웹 페이지에 바로 반영되지 않는 경우가 있을 수 있습니다. 이럴 때는 Ctrl + F5를 눌러 페이지를 새로고침하여 변경 사항을 확인할 수 있습니다. 이는 브라우저 캐시 때문에 발생하는 문제로, 새로고침을 통해 해결할 수 있습니다.
img src 태그의 편의성
HTML 태그를 활용하여 상세페이지에 이미지를 삽입하고 수정하는 것은, 상품을 많이 등록하고 관리해야 하는 판매자에게 필수적인 기술입니다. 간단한 HTML 태그 사용법을 익히면 다양한 오픈마켓에서 훨씬 효율적으로 상품을 등록하고 관리할 수 있습니다.