WP Table Builder 사용법 : 쿠팡파트너스 비교표 만들기

최근 부업 중에서 쿠팡파트너스와 워드프레스 블로그가 핫합니다. 워드프레스를 활용해서 쿠팡파트너스 제휴 마케팅 전문 사이트를 운영하는 사람들도 늘어나고 있습니다.

워드프레스 사이트를 활용해서 쿠팡파트너스 제휴 마케팅 또는 쇼핑몰 사이트를 운영하고자 할 때 필요한 것이, 제품 비교표 또는 제품 리스트 표일 것입니다.

이 글에서는 워드프레스 WP Table Builder 플러그인을 활용해서 쿠팡파트너스 비교표 만드는 방법을 소개해드리겠습니다. 워드프레스에서 기본적인 표 만드는 방법은 다음의 글을 참고해보세요.

이 글을 끝까지 따라오시면 다음과 같은 쿠팡파트너스 비교표를 완성할 수 있습니다.

워드프레스 쿠팡파트너스 비교표 : WP Table Builder 활용

WP Table Builder 플러그인 설치

WP Table Builder는 워드프레스에 등록되어 있는 플러그인이기 때문에, 워드프레스 관리자 페이지에서 쉽게 설치할 수 있습니다. 워드프레스 관리자 페이지 > 플러그인 > 새로 추가 페이지로 이동합니다.

검색 창에 WP Table Builder 또는 table을 검색한 후 플러그인을 설치해주세요.

WP Table Builder

플러그인을 설치하고 활성화하면, 다음과 같이 관리자 페이지 메뉴에 WP Table Builder 탭이 추가 되었을 것입니다. WP Table Builder 메뉴로 이동합니다. 이제 쿠팡파트너스 비교표 만들 준비가 완료되었습니다.

 WP Table Builder 이동

쿠팡파트너스 비교표 만드는 방법

지금부터 본격적으로 WP Table Builder 플러그인을 활용해서 표 만드는 방법을 알아 보겠습니다.

새로운 표 만들기

다음과 같은 화면이 나타나면 Add New 버튼을 클릭합니다.

WP Table Builder 3

그러면 다음과 같이 WP Table Builder 표 편집 화면이 나타납니다. 화면 상단에 ‘Enter table name here…’이라고 쓰여 있는 박스에, 지금 만드는 표의 이름을 지정해줍니다. 저는 ‘쿠팡파트너스 1’로 지정하겠습니다. 이제 ‘blank’라고 적혀 있는 + 버튼을 클릭합니다.

WP Table Builder 편집 화면

그러면 다음과 같이 생성할 표의 행과 열 개수를 설정할 수 있습니다. 클릭만으로 간편하게 설정할 수 있습니다. 행과 열의 개수를 각각 3개로 맞추어 준 후 Generate 버튼을 클릭합니다. (만들고 싶은 표의 모양에 따라 행과 열의 개수를 조정해주세요.)

WP Table Builder 편집 화면 : 테이블 생성

다음과 같이 기본적인 표가 생성 되었습니다. 이제 이 비어 있는 표에 이미지, 텍스트, 리스트, 버튼, 별점을 추가해보겠습니다. 그리고 표 디자인까지 수정해봅시다.

WP Table Builder 편집 화면 : 테이블 생성 결과

표에 텍스트 입력하기

표에 텍스트 입력하는 방법은 간단합니다. 다음과 같이 Add Text라고 쓰여 있는 부분을 클릭한 뒤에, 키보드로 텍스트를 입력하면 됩니다. WP Table Builder에서 텍스트는 기본적으로 텍스트 박스를 생성한 후에, 박스 안에 텍스트를 입력하는 방식입니다.

표의 빈 공간을 마우스로 더블 클릭하여, 텍스트 입력할 박스를 추가할 수 있습니다.

WP Table Builder 편집 화면 : 텍스트

또는 화면 왼쪽 메뉴에서 ‘Text’를 드래그 앤 드롭하여 텍스트 박스를 추가할 수 있습니다.

WP Table Builder 편집 화면 :텍스트 삽입

테이블에 추가한 요소를 삭제하고 싶은 경우, 요소에 마우스를 가져다 댄 뒤에 활성화된 파란색 영역 표시 선 오른쪽 상단에 보면 쓰레기통 아이콘이 작게 있습니다. 그것을 클릭하면 삭제됩니다.

WP Table Builder 편집 화면 : 요소 삭제

지금까지 텍스트 삽입, 입력, 삭제까지 알아보았습니다. 요소를 추가하고 삭제하는 방법은 이미지, 리스트, 별점, 버튼 등등 모두 동일합니다. 지금부터는 이런 기본적인 설명은 생략하고, 표 만들기 진행 해보도록 하겠습니다.

텍스트까지 입력 완료한 테이블 상태는 다음과 같습니다. 불필요한 텍스트 박스는 모두 삭제해주었습니다.

텍스트 입력 결과

표에 이미지 삽입하기

화면 왼쪽에 있는 ‘Image’ 버튼을 드래그 앤 드롭합니다.

WP Table Builder 편집 화면 : 이미지 1

그러면 다음과 같이 ‘미디어 추가’ 화면이 나타납니다. 표를 생성하기 전에 이미 본문 글에 이미지를 삽입했을 경우에는 다음과 같이 ‘미디어 라이브러리’에서 사진을 선택하여 업로드하면 됩니다. 만약 아직 이미지를 업로드하지 않았다면, ‘파일 업로드’ 탭으로 이동하여 이미지 파일을 업로드해주면 됩니다.

WP Table Builder 편집 화면 : 이미지 2

위의 작업을 반복하여 이미지를 모두 삽입하면 다음과 같은 표의 모습이 만들어 집니다.

WP Table Builder 편집 화면 : 이미지 3

표에 리스트 삽입하기

다음과 같이 리스트를 드래그하여 넣고 싶은 표 칸에 삽입해줍니다.

WP Table Builder 편집 화면 : 리스트 1

리스트 삽입 후에, 텍스트를 변경하는 방법은 텍스트 입력 방법과 동일합니다. 그냥 지우고 다시 입력하면 됩니다.

WP Table Builder 편집 화면 : 리스트 2

리스트에 텍스트를 입력하고 나면 다음과 같은 모습이 됩니다.

WP Table Builder 편집 화면 : 리스트 3

표에 버튼 삽입하기

이제 쿠팡파트너스 링크를 연결할 버튼을 삽입합시다. 방법은 드래그 앤 드롭 동일합니다. 다음과 같이 이미 삽입된 요소 밑으로 드래그하면, 그 요소 아래에 새로운 요소를 추가할 수 있습니다.

WP Table Builder 편집 화면 : 버튼 1

같은 요소를 여러 개 사용할 때는 복제해서 요소를 이동하는 게 더 편리한데요. 다음과 같이 복제할 요소에 마우스를 가져다 대고, 오른쪽에 나타나는 복제 아이콘을 클릭하면 됩니다.

WP Table Builder 편집 화면 : 버튼 2

필요한 개수만큼 복제해주시고, 복제 버튼 왼쪽에 있는 컨트롤 버튼을 클릭하면 요소를 이동시킬 수 있습니다.

WP Table Builder 편집 화면 : 버튼 3

버튼 안의 텍스트를 변경하는 방법은, 버튼 안의 텍스트 부분을 클릭한 뒤에 이미 적혀 있는 텍스트를 지우고 입력하면 됩니다. 버튼 삽입까지 완료된 테이블은 다음과 같습니다.

WP Table Builder 편집 화면 : 버튼 4

표에 별점 삽입하기

별점 삽입 방법도 이전과 동일합니다.

WP Table Builder 편집 화면 : 별점 1

Star Rating을 드래그하여 삽입 후, 원하는 별 개수 만큼 클릭하면 별점이 적용됩니다.

WP Table Builder 편집 화면 : 별점 2

이렇게 별점까지 삽입하여, 쿠팡파트너스 비교표의 기본적인 틀을 모두 완성했습니다.

WP Table Builder 편집 화면 : 별점 3

쿠팡파트너스 링크 연결하는 방법

버튼에 쿠팡파트너스 링크 연결

쿠팡파트너스 비교표 속의 ‘최저가 보기’ 버튼에 쿠팡파트너스 링크를 연결해보겠습니다. 버튼을 클릭하면 다음과 같이 왼쪽 화면이 변합니다. 여기서 LINK 탭으로 이동합니다.

 WP Table Builder 편집 화면 : 쿠팡파트너스 링크 연결 1

Button Link를 입력하는 창에 쿠팡파트너스 링크를 입력합니다. 그리고 Open in 설정을 New tab으로 변경합니다. 이렇게 하면 블로그 방문자들이 최저가 보기 버튼을 클릭했을 때 쿠팡 페이지로 접속되게 할 수 있습니다.

 WP Table Builder 편집 화면 : 쿠팡파트너스 링크 연결 2

이미지에 쿠팡파트너스 링크 연결

버튼 이외에도 이미지, 텍스트 모두 링크를 연결할 수 있습니다. 방법은 동일합니다.

이미지를 클릭하면 편집 화면 왼쪽이 변경되고, 여기서 똑같이 LINK 탭으로 이동하여 연결될 링크를 설정해주면 됩니다.

 WP Table Builder 편집 화면 : 쿠팡파트너스 링크 연결 3

텍스트에 쿠팡파트너스 링크 연결

텍스트 링크 연결은 방법이 조금 다릅니다. 텍스트를 클릭하면 다음과 같이 텍스트 굵기, 정렬, 링크 등을 설정할 수 있는 편집 컨트롤 바가 나타납니다.

여기서 링크 버튼을 클릭하면, Insert Link 창이 나타납니다. 여기서 링크 설정을 진행하면 됩니다. 주의할 점은, 링크를 연결할 텍스트를 모두 드래그한 후에 링크 연결 버튼을 클릭해야 한다는 것입니다.

 WP Table Builder 편집 화면 : 쿠팡파트너스 링크 연결 4

쿠팡파트너스 비교표 디자인하기

WP Table Builder는 표의 디자인을 쉽게 커스텀할 수 있습니다. 다음과 같이 편집하고 싶은 요소를 클릭하면, 편집 화면 왼쪽에 요소의 크기, 색깔, 텍스트 정렬 등을 설정할 수 있는 컨트롤 탭이 나타납니다. 여기서 원하시는 디자인을 진행하면 되겠습니다.

 WP Table Builder 편집 화면 : 쿠팡파트너스 비교표 디자인하기 1

버튼에 마우스를 올려 두었을 때, 크기와 색깔이 변하는 동적 디자인을 적용하고 싶으시다면 HOVER 설정을 해주면 됩니다. 설정할 버튼을 클릭하고, 색깔과 크기 설정을 해주면 됩니다.

 WP Table Builder 편집 화면 : 쿠팡파트너스 비교표 디자인하기 2

위와 같이 Button Options > HOVER 메뉴에서 Color를 설정하고, Scale 값을 조정하면 버튼에 마우스를 올려 놓았을 때 디자인이 변경됩니다.

Scale 값이 1이면 사이즈는 변경되지 않고 1.1이면 기존 크기의 1.1배, 1.2라면 기존 크기의 1.2배로 버튼 크기가 서서히 커지는 효과가 적용됩니다.

표의 셀 색깔을 변경하려면, BACKGROUND 버튼을 클릭하고 옵션에서 색깔 설정을 해주면 되겠습니다. Header Background 색깔을 변경하면, 표의 가장 상단 셀들의 색이 변경됩니다.

 WP Table Builder 편집 화면 : 쿠팡파트너스 비교표 디자인하기 3

Even Row Background 설정은 짝수 번째 행(가로 줄)의 색이 변경되고, Odd Row Background 설정은 홀수 번째 행의 색을 변경합니다.

디자인까지 완료하면, 처음에 보여드린 쿠팡파트너스 비교표가 완성됩니다. 완성된 표를 잃지 않도록 꼭 화면 상단 오른쪽에 있는 SAVE 버튼을 통해 저장한 뒤 표 편집화 면을 나가주세요.

쿠팡파트너스 비교표 글에 삽입하는 방법

이제 완성한 쿠팡파트너스 비교표를 본문 글에 삽입해보도록 하겠습니다. 숏코드를 통해 간단하게 삽입할 수 있습니다.

숏코드 복사 후 본문에 삽입하기

숏코드 복사를 위해서, 테이블 편집 화면을 나가서 관리자 페이지 > WP Table Builder로 이동합니다. 그러면 방금 만들어 놓은 표가 리스트에 있을 것입니다.

 WP Table Builder  쿠팡파트너스 비교표 숏코드 삽입 1

여기서 Shortcode 열에 있는 이상한 영어와 숫자로 된 글자 조합에 마우스를 가져다 대보세요. 그러면 복사하기(copy) 버튼이 나타납니다. 이 버튼을 클릭하여 숏코드를 복사했으면, 지금까지 만든 표를 삽입할 글 편집 화면으로 이동하세요.

그 후 Ctrl+V 단축키를 통해 복사한 숏코드를 붙여넣기 하면 다음과 같은 블록이 생성됩니다. 이제 업데이트 버튼을 클릭하여 글을 저장합니다.

 WP Table Builder  쿠팡파트너스 비교표 숏코드 삽입 2

저장 완료했으면, 새로 업데이트 된 글을 확인해보세요. 글 편집기에서 숏코드를 삽입한 위치에, 방금까지 만든 표가 그대로 삽입되어 있을 것입니다. 원하는 위치에 숏코드를 삽입하여 표를 언제든지 삽입할 수 있습니다.

 WP Table Builder  쿠팡파트너스 비교표 숏코드 삽입 3

마치며

여기까지 쿠팡파트너스 비교표를 WP Table Builder 플러그인을 활용해서 만들어 보았습니다. 디자인을 깔끔하게 한 쿠팡파트너스 비교표를 활용하면, 링크 클릭률을 높이는 데 큰 도움이 됩니다. 무료 버전의 표 생성 플러그인 만으로도 이렇게 쿠팡파트너스 제품 리스트 표를 만들어 낼 수 있으니, 금전적인 부담이 되시는 분들은 WP Table Builder를 잘 활용하셨으면 좋겠습니다.

지금까지 하나하나 만든 이 쿠팡파트너스 표를, 대부분의 유료 테이블 플러그인에서는 탬플릿으로 제공하고 있습니다. 탬플릿을 자신의 입맛에 맞게 조금만 수정하면 완벽한 쿠팡파트너스 비교표를 생성할 수 있습니다. 추가적인 테이블 플러그인이 궁금하신 분들은 다음의 참고 글이 도움되실 겁니다.


“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.” 여러분에게 추가 금액이 발생하지는 않습니다.

참고