추천 시스템은 사용자 행동 데이터를 기반으로 상품을 추천하는 기능입니다.
하지만 실제 서비스에서는 추천 결과를 받아오는 것뿐만 아니라, 이를 화면에 노출하고 사용자 행동을 추적하는 과정까지 함께 구현해야 합니다.
이번 포스트에서는 추천 위젯을 서비스에 연동하기 위해 임베디드 SDK를 어떻게 설계하고 구현했는지를 중심으로 정리합니다.
1. 추천 위젯 SDK란
추천 시스템의 기본 구조는 다음과 같습니다.
Client (SDK) > Recommendation API > Model
모델은 추천 결과를 생성하고, SDK는 이를 서비스 화면에 노출하는 역할을 담당합니다.
SDK에서 처리하는 주요 역할은 다음과 같습니다.
- 추천 API 호출
- 위젯 렌더링
- 사용자 이벤트 트래킹 (노출, 클릭 등)
- 서비스에서 사용할 수 있는 호출 방식 제공
즉 추천 로직과는 별개로, 추천 결과를 서비스에서 사용할 수 있도록 처리하는 모듈입니다.
2. SDK 동작 흐름
SDK의 기본적인 동작 흐름은 다음과 같습니다.
- SDK 초기화
- 추천 API 호출
- 추천 데이터 수신
- 위젯 렌더링
- 사용자 이벤트 트래킹
구조를 단순하게 보면 다음과 같습니다.
init → API 호출 → 데이터 → DOM 렌더링 → 이벤트 수집
각 단계는 서로 분리되어 있지만, 실제 구현에서는 하나의 흐름으로 연결되어 동작합니다.
3. SDK 호출 구조 및 비동기 로드 대응
SDK는 단일 진입점 기반의 구조로 설계했습니다.
function MA() {
var cmd = arguments[0];
var params = arguments[1] || {};
handleCommand(cmd, params);
}사용 방식:
_MA('init', {...})
_MA('renderWidget', {...})이와 같은 단일 진입점 구조는 외부에 노출되는 인터페이스를 최소화하여 기능 확장 시 하위 호환성을 유지하기에 유리합니다.
비동기 로드 문제 해결
임베디드 SDK는 비동기로 로드되는 경우가 많습니다. 이때 SDK 로드 이전에 호출된 명령이 유실될 수 있습니다.
var previous = window._MA;
var queued = previous && previous.q ? previous.q.slice() : [];
if (queued) {
for (var i = 0; i < queued.length; i++) {
MA.apply(null, queued[i]);
}
}gtag나 fbq 등에서 검증된 이 패턴은 SDK 로드 이전의 명령을 큐(q)에 임시 저장했다가, 로드 완료 시점에 순차적으로 실행하여 안정적인 동작을 보장합니다.
4. 사용자 식별 전략
추천 정확도와 트래킹을 위해 사용자 식별이 필요합니다.
MID: sha256(member_id)
UUID: GA cookie 기반- MID (Member ID): 로그인 사용자 식별. 개인정보 보호를 위해 member_id를 직접 노출하지 않고 SHA-256 해싱 처리하여 사용합니다.
- UUID: 비로그인 사용자 식별. _ga와 같은 GA 쿠키를 활용하여 세션 간 일관된 경험을 제공합니다.
이 구조는 개인정보 보호 대응 및 세션 간 추적 유지를 동시에 만족하기 위한 방식입니다.
5. 노출 제어 트리거
추천 위젯의 성공 여부는 노출 타이밍에 좌우됩니다. 추천 위젯에는 어드민 설정에 따라 다양한 노출 전략을 지원하는 트리거 핸들러를 포함합니다.
triggerHandlers = {
immediate,
delay,
scroll,
bottom,
exit
}활용 예:
- immediate: 페이지 로드 즉시 노출
- scroll: 특정 스크롤 깊이 도달 시 렌더링
- bottom: 페이지 최하단 도달 시 위젯 노출
- exit: 마우스가 브라우저 상단을 벗어나는 시점을 기준으로 이탈 의도를 감지
노출 조건은 어드민 설정과 연동해 SDK에서 제어할 수 있도록 구현했습니다.
6. 이벤트 트래킹 구조
1) 전환 이벤트
dataLayer.push({...})- Google Analytics / GTM 연동
- 전환 성과 측정
2) 노출 이벤트 정확도
노출 이벤트는 단순히 DOM에 렌더링된 시점이 아니라, 사용자 화면에 실제로 노출된 시점을 기준으로 수집합니다.
new IntersectionObserver(..., { threshold: 0.5 })사용자의 화면(Viewport)에 실제로 위젯이 나타난 순간을 포착하기 위해 IntersectionObserver를 활용합니다.
__recImpressedKeys동일 세션 내에서 같은 추천 결과가 반복적으로 집계되는 것을 막기 위해 __recImpressedKeys와 같은 내부 저장소를 활용합니다.
7. 마무리
이번 포스팅에서는 SDK 호출 구조, 비동기 로드 대응, 노출 트리거 제어, 이벤트 트래킹 방식을 중심으로 정리했습니다.
추천 기능을 서비스에 적용하는 과정에서는 단순히 API를 호출하는 것 외에도 렌더링과 트래킹까지 함께 고려해야 합니다.
비슷한 구조를 고민하고 있다면 참고할 수 있는 사례로 활용될 수 있기를 바랍니다.
최신 마케팅/고객 데이터 활용 사례를 받아보실 수 있습니다.