내 웹사이트에 온라인 경매를 보여 주는 방법
웹사이트는 검색 엔진과 AI 어시스턴트, 그리고 고객이 이미 고객님을 찾는 곳이며, "우리 경매"라고 적힌 링크 하나로는 부족합니다. 사람들은 지금 보고 있는 페이지에서 로트와 가격과 남은 시간을 보고 싶어 합니다. 이 가이드는 좋은 경매 임베드가 보여 주는 것, 그것을 해내는 코드 한 줄, 그리고 흔히 쓰는 페이지 빌더마다 그 줄을 어디에 넣는지를 다룹니다.
업데이트
| 추가하는 것 | 기존 사이트에 들어가는 작은 실시간 블록: 로트 사진, 제목, 현재 가격, 입찰 수, 카운트다운이 스스로 갱신되며 로트로 연결됩니다. |
|---|---|
| 아닌 것 | 경매 사이트 전체를 담은 프레임도 아니고, 내 웹사이트에서 하는 입찰도 아닙니다. 입찰은 등록과 결제가 있는 경매 사이트에서 이루어집니다. |
| 방법 | HTML 한 줄을, 빌더가 코드를 추가하도록 허용하는 자리에 붙여넣습니다. 스크립트가 거부되는 곳에는 링크가 걸린 실시간 이미지를 대신 씁니다. |
| 시간 | 10분. 대부분은 페이지 빌더에서 알맞은 상자를 찾는 데 쓰입니다. |
| 경매가 끝나면 | 좋은 임베드는 진행 중이거나 예정된 로트가 없으면 스스로 사라지므로, 페이지에 지난 경매가 남는 일이 없습니다. |
좋은 경매 임베드가 보여 주는 것
네 가지, 그 외에는 아무것도 없습니다.
- 지금 진행 중인 로트를 사진, 제목, 현재 가격, 입찰 수와 함께, 그리고 실제로 줄어드는 각 마감까지의 카운트다운. 아직 열리지 않은 로트는 대신 시작 가격과 시작까지의 카운트다운을 보여 줍니다.
- 클릭하면 로트가 열리는 것, 경매 사이트에서 새 탭으로. 방문자가 내 페이지를 잃지 않고 입찰할 수 있도록.
- 아무것도 없을 때는 아무것도 없는 것. 진행 중이거나 예정된 로트가 없으면 블록이 스스로 사라져야 합니다. 지난달 경매나 "현재 진행 중인 경매가 없습니다"를 보여 주는 임베드는 모든 방문자에게 바쁘지 않다고 말하는 셈입니다.
- 내 모습. 내 강조 색상과 모서리 스타일로, 광고가 아니라 내 사이트의 일부로 읽히도록.
피해야 할 것: 경매 사이트 전체를 넣은 iframe(스크롤바 두 개, 헤더 두 개, 깨지는 휴대폰 레이아웃), 찍은 그날부터 낡아 가는 스크린샷, 가격을 보려면 내 사이트에서 로그인하라고 요구하는 모든 것.
두 가지 방법
스크립트. 블록을 그리고 최신으로 유지하는 <script> 한 줄. 이것이 보통의 방법이며, 페이지 빌더가 "사용자 지정 코드", "HTML 임베드", "코드 블록"을 추가하게 해 주는 곳이면 어디서나 작동합니다. 방문자를 대신해 쿠키를 설정하거나 글꼴이나 추적기를 불러와서는 안 됩니다. 검토하는 모든 위젯에 이것을 요구하세요. 그것을 책임져야 하는 것은 고객님의 개인정보 처리방침이기 때문입니다.
링크가 걸린 실시간 이미지. 스크립트를 거부하는 곳이 있습니다. 이메일 서명, 뉴스레터 빌더, 일부 사이트 빌더의 무료 플랜, 인트라넷. 그런 곳에서는 서버에서 몇 분마다 새로 그려지는 이미지에 경매 링크를 걸어 두면 대부분의 역할을 해냅니다. 몇 개의 로트가 진행 중이고 입찰이 언제 마감되는지 보여 주며, 몇 주 전에 보낸 이메일이나 페이지에서도 최신 상태를 유지합니다.
코드 한 줄
Auctify로 만든 경매 사이트라면 무료 AuctionAmigo 위젯은 한 줄입니다:
<script async src="https://auctionamigo.com/w.js"
data-site="your-sale.myauctify.com" data-shape="horizontal"
data-colour="#ffd23f" data-corners="8" data-background="light"></script>
your-sale.myauctify.com을 내 경매 사이트 주소로 바꾸세요. https://는 있어도 없어도 되며, 자체 도메인도 똑같이 작동합니다. 이 사이트 홈페이지의 디자이너가 내 색상과 모양을 채워 이 줄을 대신 써 주고, 복사하기 전에 결과를 보여 줍니다. 속성은 다음과 같습니다.
| 속성 | 값 | 기본값 |
|---|---|---|
data-site | 경매 사이트 주소(필수) | 없음 |
data-shape | floating, horizontal, vertical, skyscraper | floating |
data-colour | #rrggbb 형식의 강조 색상 | #ffd23f |
data-corners | 모서리 반경(픽셀), 0에서 24까지 | 8 |
data-background | light 또는 dark | light |
data-limit | 로트 수, 1에서 12까지 | 모양에 따라 다름 |
data-target | 위젯을 그려 넣을 요소의 CSS 선택자 | 태그가 있는 자리 |
data-lang | de, fr, pt-br 같은 언어 코드 | 경매 사이트의 언어 |
2분마다 갱신되고, 쿠키를 설정하지 않으며 아무것도 저장하지 않고, 글꼴도 추적기도 불러오지 않으며, 자체 섀도 루트 안에 그려져 내 스타일과 위젯 스타일이 서로 간섭하지 않고, 사이트에 진행 중이거나 예정된 로트가 없으면 아무것도 표시하지 않습니다. 입찰은 경매 사이트에서 이루어지며, 위젯 안에서는 절대 이루어지지 않습니다.
어떤 모양을, 페이지 어디에
| 모양 | 어디에 넣나 | 어디에 좋은가 |
|---|---|---|
| 플로팅 | 페이지 head를 포함해 어디든: 모든 페이지의 아래쪽 모서리에 자리 잡고, 방문자가 숨길 수 있습니다. | 페이지가 많고 모든 페이지에서 경매가 보여야 하는 사이트. |
| 가로형 | 태그가 있는 자리: 히어로 아래, 푸터 위, 넓은 본문 영역. | 홈페이지나 별도의 "경매" 페이지. |
| 세로형 | 사이드바나 좁은 칸. | 블로그와 뉴스형 레이아웃. |
| 스카이스크래퍼 | 높고 좁은 자리. | 고정 사이드 칸이 있는 페이지. |
세 군데가 아니라 한 군데에서 시작하세요. 홈페이지의 첫 화면 아래가 방문자 대부분이 보는 자리이고, 모든 페이지에 뜨는 플로팅 위젯이 그다음입니다. 로트 수는 공간에 맞게 정하세요. 좁은 사이드바에는 열두 개보다 세 개가 보기 좋습니다.
어디에 붙여넣나, 빌더별로
모든 빌더에는 외부 코드를 넣는 상자가 있지만 이름이 다릅니다. 아래 메뉴 이름은 이 글을 쓰는 시점에 각 빌더가 붙인 이름이며 개편 때마다 자리를 옮기므로, 찾을 수 없다면 빌더의 도움말에서 "embed code"나 "custom code"를 검색하세요. 기능이 플랜에 따라 다른 경우에는 그렇게 적어 두었으니, 짐작하기 전에 자신의 플랜을 확인하세요.
- WordPress
블록 편집기에서 원하는 페이지에 사용자 정의 HTML 블록을 넣고 그 줄을 붙여넣거나, 사이드바라면 위젯 영역에 넣습니다. 이 내용과 플러그인 문제를 다루는 WordPress 사이트로 경매를 운영하는 별도 가이드가 있습니다.
- Wix
편집기에서 Add Elements → Embed Code → Embed HTML을 선택하고 요소에 그 줄을 붙여넣은 뒤 크기를 조정합니다. Wix는 임베드된 코드를 자체 프레임 안에서 실행하므로 인라인 모양(가로형, 세로형, 스카이스크래퍼)을 고르고 요소를 그 모양에 필요한 만큼 크게 만드세요. 플로팅 위젯은 그 프레임을 벗어날 수 없습니다. 사이트 전체에 적용하는 코드는 Settings → Custom Code에 넣으며, Wix는 이를 도메인이 연결된 유료 플랜에서 제공합니다.
- Squarespace
로트를 표시할 자리에 Code 블록을 추가하고 그 줄을 붙여넣습니다. Squarespace는 Business 플랜 이상에서 코드 블록의 스크립트를 실행합니다. Personal 플랜에서는 코드 블록이 HTML만 표시하고 스크립트는 아무 일도 하지 않습니다. 모든 페이지에 한 번에 넣으려면 Settings → Advanced → Code Injection → Footer이며, 플랜 요건은 같습니다.
- Jimdo
Jimdo Creator: Widget / HTML 요소에 그 줄을 붙여넣습니다. Jimdo의 새 편집기는 유료 플랜에 HTML 요소가 있습니다. 인라인 모양을 고르고 요소에 공간을 주세요.
- Webflow
Embed 요소를 페이지로 끌어다 놓고 그 안에 그 줄을 붙여넣습니다. 사이트 전체 코드는 Site settings → Custom code → Footer code에 넣으며, 게시하려면 유료 사이트 플랜이 필요합니다.
- Shopify
온라인 스토어 → 테마 → 사용자 지정에서 로트가 표시될 섹션에 Custom Liquid 블록(테마에 따라 Custom HTML)을 추가하고 그 줄을 붙여넣습니다. 위젯은 경매 사이트로 연결될 뿐, 쇼핑몰 장바구니에는 아무것도 추가하지 않습니다.
- Weebly와 Google Sites
Weebly: Embed Code 요소. Google Sites: 삽입 → 퍼가기 → 삽입 코드. 둘 다 자체 프레임 안에서 코드를 실행하므로 인라인 모양을 쓰고 요소 크기를 거기에 맞추세요.
- 일반 HTML, 또는 개발자에게
블록이 표시될 자리에 그 줄을 붙여넣거나, 플로팅 모양이라면
</body>바로 앞에 넣습니다.data-target을 쓰면 태그는 한곳에 두고 위젯은 선택자로 지정한 어떤 요소에든 그려 넣을 수 있습니다.
스크립트가 허용되지 않는 곳
이메일 서명, 뉴스레터 도구, 일부 빌더의 무료 플랜, 대부분의 인트라넷은 스크립트를 제거합니다. 그런 곳에는 실시간 이미지를 쓰세요. 서버에서 몇 분마다 새로 그려지는 배너로, 몇 개의 로트가 진행 중이고 입찰이 언제 마감되는지 보여 주며, 경매 링크로 감싸여 있습니다. HTML에서는 <img>를 감싼 <a>이고, 뉴스레터 도구에서는 "이미지 추가, 링크 설정"입니다. 이미지가 새로 그려지므로 2주 전에 보낸 이메일도 현재 로트 수를 보여 주고, 경매가 끝나면 낡은 주장이 아니라 경매 사이트에 방문하라는 단순한 초대로 바뀝니다.
실시간 이미지가 할 수 없는 것: 가격과 함께 개별 로트를 보여 주는 것, 그리고 카운트다운. 첫 번째 선택이 아니라 대안이며, 스크립트를 실행할 수 있는 웹 페이지보다는 이메일에 훨씬 더 어울립니다.
작동하는지 확인하기
휴대폰과 컴퓨터에서 시크릿 창으로 페이지를 여세요. 1~2초 안에 로트가 보여야 합니다. 아무것도 보이지 않는다면 세 가지 중 하나이며, 위젯은 방문자가 오류를 보지 않도록 일부러 어느 경우에도 아무 말도 하지 않습니다.
- 경매 사이트에 진행 중이거나 예정된 로트가 없습니다. 로트를 등록하거나, 입찰이 실제로 열려 있는지 확인하세요.
- 경매 사이트가 비공개 모드여서 아무것도 공개되어 있지 않습니다. 비공개 사이트는 어디에도 표시할 수 없습니다.
- 주소가 틀렸거나, 빌더가 코드에 내준 요소가 너무 작아 그려 넣을 수 없습니다.
data-site의 철자를 확인한 다음 요소를 키우세요.
그다음 경매 사이트에서 입찰이 들어온 뒤 2분을 기다려 내 페이지의 가격이 바뀌었는지 확인하세요. 그 뒤로는 관리할 것이 없습니다. 경매가 끝나면 블록이 스스로 사라지고, 다음 경매는 로트가 등록되면 나타납니다.
질문
Wix, Squarespace, Jimdo 사이트에 경매를 넣을 수 있나요?
네, 각 빌더의 코드 요소를 통해서입니다. Wix는 Embed HTML, Squarespace는 Code 블록(스크립트에는 Business 플랜 이상 필요), Jimdo는 Widget / HTML 요소. 코드를 프레임 안에서 실행하는 빌더에는 플로팅이 아니라 요소 크기에 맞춘 인라인 모양이 필요합니다.
위젯으로 사람들이 내 웹사이트에서 입찰할 수 있나요?
아니요. 가격, 입찰 수, 카운트다운과 함께 진행 중인 로트를 보여 주고, 등록과 입찰과 결제가 있는 경매 사이트에서 새 탭으로 로트를 엽니다. 입찰은 절대 위젯 안에서 이루어지지 않습니다.
경매가 끝나면 내 웹사이트에는 어떻게 되나요?
경매 사이트에 진행 중이거나 예정된 로트가 없으면 위젯은 아무것도 표시하지 않으므로, 페이지에 끝난 경매가 남는 일이 없습니다. 다음 로트가 등록되면 다시 나타납니다.
임베드가 쿠키를 설정하거나 방문자를 추적하나요?
AuctionAmigo 위젯은 쿠키를 설정하지 않고, 아무것도 저장하지 않으며, 글꼴도 추적기도 불러오지 않습니다. 로트를 가져오는 요청을 한 번 보내고, 로트 사진은 경매 사이트에서 불러옵니다. 다른 위젯을 추가하기 전에도 같은 것을 물어보세요. 고객님의 개인정보 처리방침이 그것을 책임져야 하기 때문입니다.
뉴스레터 도구가 스크립트를 받지 않습니다. 그러면 어떻게 하나요?
실시간 이미지를 쓰세요. 몇 분마다 새로 그려지는 배너가 로트 수와 마감일을 보여 주며, 경매 링크로 감싸여 있습니다. 몇 주 전에 보낸 이메일에서도 최신으로 유지되고, 경매가 끝나면 단순한 초대로 바뀝니다.