검색 최적화(SEO)와 IT 기술로 여는 온라인 비즈니스 인사이트
상품 정보 자동 추출부터 HTML 코드 생성 및 미리보기 기능까지
Home /

상품 정보 자동 추출부터 HTML 코드 생성 및 미리보기 기능까지

쿠팡 상품 정보 추출부터 HTML 광고 코드 생성까지, 클릭 한 번으로 블로그 포스팅이 훨씬 쉬워집니다.


쿠팡 파트너스 활동을 하고 있는 블로거나 마케터라면, 상품 정보를 일일이 복사해서 HTML 코드로 작성하는 반복 작업이 얼마나 번거롭고 시간 소모가 큰지 잘 아실 겁니다. 특히 블로그에 상품 리뷰나 추천 포스팅을 자주 올리는 분들에겐 광고 코드 생성과 링크 삽입은 필수지만 귀찮은 일입니다.

반복작업 끝! 쿠팡 파트너스용 크롬 확장 프로그램으로 블로그 자동화 하기

이 글에서는 쿠팡 상품 상세 정보를 자동으로 추출하고, HTML 광고 코드를 즉시 생성하며, 실시간 미리보기까지 가능한 쿠팡 크롬 확장 프로그램 기반 자동화 도구를 소개합니다. 수동 작업 없이도 이미지, 제목, 가격, 설명 등 상품 정보를 구조화된 형태로 불러오고, 쿠팡 제휴 링크를 자동으로 생성해 블로그 포스팅을 훨씬 효율적으로 구성할 수 있습니다.

기존 쿠팡 관련 툴들을 한층 업그레이드하여, 블로그 콘텐츠 제작의 생산성과 SEO 최적화까지 고려한 실전 자동화 도구를 함께 살펴보겠습니다.

업그레이드 주요 기능 요약

기능 설명
상품 정보 자동 추출 쿠팡 상품 상세 페이지에서 제목, 가격, 이미지, 별점, 설명 등을 자동 수집
쿠팡 파트너스 딥링크 자동 생성 클릭 한 번으로 제휴 링크 발급 및 클립보드 복사
JSON 데이터 복사 수집된 상품 정보를 JSON 형태로 복사
HTML 코드 자동 생성 블로그에 붙여 넣을 수 있는 HTML 테이블 코드 자동 생성
실시간 미리보기 팝업 HTML 코드를 복사함과 동시에 블로그용 미리보기 확인 가능


1. 상품 정보 자동 추출 기능

기존에는 개발자 도구를 열고 일일이 상품명, 가격, 이미지 URL을 복사해야 했다면, 이젠 extractProductInfo() 함수가 그 수고를 덜어줍니다.

추출되는 주요 정보

  • 상품명: 상세 페이지 상단의 타이틀 영역에서 자동 추출
  • 가격: ‘원’ 제거 및 쉼표 없는 숫자 형태로 추출됨 HTML 생성 시 다시 포맷 적용
  • 대표 이미지 및 슬라이드 이미지(최대 4개): 자동으로 크기 조정 및 배열
  • 상세 설명: .sdp-detail-content 내 HTML 구조 그대로 수집
  • 별점: CSS 스타일 값으로부터 별점 퍼센트 계산 후 5점 만점 환산

2. 쿠팡 파트너스 딥링크 자동 생성

버튼 하나로 현재 페이지의 URL을 쿠팡 파트너스 API를 통해 제휴 링크로 전환하며, 자동 클립보드 복사 기능까지 포함됩니다. 실패 시 예외 처리도 적용돼 안정성이 뛰어납니다.

3. JSON 데이터 복사 버튼

이 기능은 상품 정보를 가공 전 원시 데이터로 저장하고자 하는 사용자에게 유용합니다.
버튼 클릭 시 JSON 형식으로 보기 좋게 들여쓰기(pretty print)된 데이터가 복사되므로, 별도 로그 저장이나 외부 DB 연동에도 활용 가능합니다.

4. HTML 코드 자동 생성과 실시간 미리보기

이번 업그레이드에서 가장 눈에 띄는 기능 중 하나는 블로그용 HTML 광고 코드의 자동 생성 기능입니다. 단순한 링크 복사를 넘어, 실제 콘텐츠 형태로 활용할 수 있는 구조화된 광고 블록을 자동으로 만들어주는 점이 특징입니다.

사용자는 쿠팡 상품 페이지에서 버튼 한 번만 클릭하면, 해당 상품의 이미지, 제목, 가격, 상세 링크가 포함된 테이블 형식의 HTML 코드를 자동으로 생성할 수 있습니다. 생성된 코드는 곧바로 클립보드에 복사되며, 동시에 실시간 미리보기 팝업 창을 통해 결과물이 어떻게 보이는지도 바로 확인 가능합니다.

작동 방식

  1. 쿠팡 상품 정보를 기반으로 한 테이블 형태의 광고 HTML 코드 생성
  2. 코드 복사와 동시에 모달 형식의 미리보기 창 팝업
  3. 아래와 같은 구조의 테이블이 자동 생성됩니다:

활용 팁:

  • HTML 코드 복사 후 티스토리/워드프레스 본문에 그대로 붙여넣으면 끝!
  • 태그는 SEO 친화적인 구조이며, 이미지 alt 속성도 포함
  • CSS를 추가해서 디자인은 운영하는 블로그에 맞게 사용하세요

5. 대가성 문구 자동 추가 기능

블로그나 웹사이트에 쿠팡 파트너스 등 제휴 광고를 게재할 때는 반드시 대가성 문구를 명확히 표시해야 합니다.
이 기능은 사용자가 별도로 문구를 작성하지 않아도, 광고 코드 생성 시 자동으로 ※ 이 포스팅은 쿠팡 파트너스 활동의 일환으로 일정액의 수수료를 제공받습니다.와 같은대가성 문구를 삽입해 줍니다.

덕분에 법적 의무를 쉽게 준수할 수 있으며, 방문자에게도 투명한 정보를 제공해 신뢰도를 높일 수 있습니다.

UI 구성 버튼 3종 세트

화면 우측 하단에 다음과 같은 플로팅 버튼 3개가 생성됩니다:

버튼명 기능
쿠팡링크만들기 쿠팡 제휴 링크 발급 및 복사
상품 정보 복사 (JSON) 상품 원시 데이터(JSON) 복사
HTML 코드 생성 블로그용 광고 코드 생성 + 미리보기

버튼은 중복 실행 방지를 위해 한 번만 생성되며, DOMContentLoaded 후 자동 삽입됩니다.

설치 및 적용 방법

coupang-product.zip
0.02MB

자세한 설정 방법은 이전 글을 참고하세요!

쿠팡 파트너스 자동화 5탄: 쿠팡 크롬 확장 프로그램으로 상품 자동화 단번에 만들자!

  1. manifest.json에서 content script에 content.js 연결
  2. 크롬 확장 프로그램으로 압축 후 등록
  3. 쿠팡 상품 상세 페이지 접속 시 자동 작동

마무리 및 활용 전략

이번 업그레이드는 단순한 쿠팡 제휴 링크 복사를 넘어, 콘텐츠 자동화 및 SEO 최적화된 광고 콘텐츠 제작까지 가능하게 해주는 강력한 도구입니다. 특히 블로그 운영자나 마케팅 자동화를 추구하는 이들에게 매우 유용하며, 반복적인 작업을 획기적으로 줄여줍니다.


쿠팡 파트너스 크롬 확장 프로그램은 어떤 기능을 제공하나요?

쿠팡 상품 상세 정보를 자동으로 추출해 제목, 가격, 이미지, 별점, 설명 등을 수집하고, 쿠팡 제휴 딥링크를 클릭 한 번으로 생성합니다. 또한 JSON 데이터 복사, HTML 코드 자동 생성, 실시간 미리보기 팝업 기능도 포함되어 블로그 포스팅 작업을 훨씬 편리하게 만들어 줍니다.

자동 생성된 HTML 코드는 어떻게 활용할 수 있나요?

생성된 테이블 형식의 HTML 코드는 바로 클립보드에 복사되어 티스토리나 워드프레스 본문에 붙여넣으면 됩니다. SEO 친화적 구조이며 이미지 alt 속성도 포함되어 있어 검색 최적화에 유리하고, 필요 시 CSS를 추가해 디자인을 조절할 수 있습니다.

대가성 문구 자동 추가 기능은 무엇인가요?

제휴 광고 게재 시 반드시 표시해야 하는 대가성 문구를 사용자가 따로 입력하지 않아도 자동으로 삽입해 주는 기능입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로 일정액의 수수료를 제공받습니다.라는 문구가 광고 코드에 포함되어 법적 의무를 쉽게 준수할 수 있습니다.

댓글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다