루쿠쿠는 살로몬·FILA 같은 브랜드의 글로벌 커머스에서 상품상세·장바구니·체크아웃·랜딩의 전환율을 Shopify·Headless 스토어프론트로 개선한다. 그래서 이 도구는 루쿠쿠가 다루는 브랜드별 화면 구성과 퍼널 지표가 있어야 의미가 생기고, 일반 조언이 아니라 화면 요소에 붙는 개선안이 된다.
공고가 상품상세·장바구니·체크아웃·랜딩의 전환율 개선을 핵심 업무로 꼽는다. 이탈 지점과 개선안을 짚는 도구가 그 작업의 진입점이다.
Shopify·Cafe24·Headless 기반 스토어프론트를 구축·개선한다. 화면 구성 요소를 구조로 받아 점검하는 방식이 그대로 맞는다.
커머스 에이전시들이 잘 못 푸는 문제를 푼다는 정체성이라, 화면 단위로 전환 병목을 짚어내는 도구가 차별점이 된다.
글로벌 커머스 전환율 점검 도구. 스토어프론트 화면 구성과 퍼널 지표를 받아 이탈 지점과 화면별 개선안을 근거 배열과 함께 낸다.
루쿠쿠 프론트엔드 PE 와 브랜드 커머스 운영 담당.
화면 구성 요소와 단계별 퍼널 지표만으로도 이탈 지점과 개선안의 1차안을 만들 수 있고, FE 는 그 제안을 골라 A/B 로 검증하면 된다.
상품상세·장바구니·체크아웃 화면의 구성 요소와 단계별 전환·이탈 지표를 넣으면 이탈이 큰 단계와 화면별 개선안을 근거 배열과 함께 내는 웹 도구. 실제 Shopify 연동·세션 수집은 빼고 화면 구성·지표 메타 가정으로만 시작한다(실 트래킹 연동은 빠진 20% 작업이라 W3로 분리).
1주차 제안을 사람 검토자가 정리한 정답 원인과 비교해 헛짚은 구간을 재고, 개선안 우선순위를 이탈폭 기준으로 보정한 v2.
개선안마다 A/B 실험 설계 카드(가설·지표·분기)를 붙이고, 브랜드별 화면을 나란히 비교해 공통 병목을 모으는 확장판.
화면 구성·퍼널 지표 한 세트를 넣으면 이탈이 큰 단계와 화면별 개선안, 그 근거가 한 화면에 나오는 걸 시연한다.
제안 근거가 모두 입력 화면 요소나 퍼널 지표를 가리키는지 judge 로 검사해 근거 인용율 100%를 보여준다. 단, 정답·데이터를 작성자가 만든 합성 기준이라 성능 검증이 아니라 데모 조건 동작이다.
결측 지표·극단 이탈률(0%·100%)·미정의 요소를 일부러 섞은 입력 30종을 넣어도 출력 JSON 형식이 안 깨지고 '미측정·확인필요'로 알리는 걸 시연한다.
제안과 합성 정답 원인의 일치도를 Cohen's κ(두 채점자가 우연 이상으로 얼마나 일치하는지 -1~1 점수, 높을수록 일치)로 2주차에 보고한다. 합성 기준 추정이라 실제와 다를 수 있다.
위 수치는 더미데이터 자가채점이며, 실제 개선 효과는 루쿠쿠 실 스토어프론트 트래픽과 A/B 실험이 있어야 측정 가능하다. 이 포트폴리오는 그 검증을 바로 돌릴 수 있는 상태까지 만든다.
수치는 합성 데이터 자가채점이라 성능 증명이 아니다. 면접에서 데모 동작과 실검증 준비 상태로 솔직히 설명한다.
정답을 내가 만들었으니 잘 맞는 게 당연하다. 결측 지표·극단 이탈률·미정의 요소를 더미에 일부러 섞어 쉬운 문제만 푸는 함정을 피한다.
이탈이 큰 단계와 원인이 곧 인과는 아니다. 실데이터 도입 단계에서 A/B 로 인과를 확인하는 과제로 분리한다.
실제 도입 시 합성 정답이 실 트래픽 분석으로 바뀌고 브랜드·시장도 달라진다. 개선안 enum 과 화면 카탈로그를 실 브랜드로 다시 맞추는 일을 도입 과제로 둔다.
① 인라인 샘플 · ② seed.json 다운로드 · ③ 증강 프롬프트. 세 층 모두 동일한 schema 에서 파생.
스토어프론트 화면별 구성 요소와 퍼널 단계 지표. 개선안 추론의 입력.
| snap_id | brand_raw | brand_id | step | elements | entered | dropped_pct | load_ms |
|---|---|---|---|---|---|---|---|
| F001 | Salomon | salomon | pdp | ["갤러리","사이즈선택","리뷰","구매버튼"] | 8,200 | 41 | 2,600 |
| F002 | 살로몬 | salomon | cart | ["수량","쿠폰","배송비안내"] | 4,800 | 33 | 1,200 |
| F003 | FILA | fila | checkout | ["주소입력","결제수단","약관"] | 3,200 | 58 | 3,400 |
| F004 | VERISH | — | landing | ["히어로배너","베스트상품"] | 15,000 | 22 | — |
| F005 | Nonfiction | nonfiction | pdp | ["갤러리","성분표","구매버튼"] | 6,100 | 100 | 5,200 |
다음 Zod 스키마를 따르는 퍼널 스냅샷을 더 생성하라: z.object({ snap_id: z.string(), brand_raw: z.string(), brand_id: z.string().nullable(), step: z.enum(['landing','pdp','cart','checkout','pay']), elements: z.array(z.string()), entered: z.number(), dropped_pct: z.number().nullable(), load_ms: z.number().nullable() }). 쉬운 데이터만 만들지 말 것 — 다음 하드 케이스를 의도적으로 섞어라: dropped_pct 나 load_ms 가 null 인 미측정 건, brand_id 가 null 인 미등록 신규 브랜드(orphan), 같은 브랜드의 한글·영문 표기 흔들림(brand_raw 다름·brand_id 동일), dropped_pct 0·100 극단 경계값. 추가로 형식 깨뜨리기 시도 3건(타입이 어긋난 행)을 별도 표시해 파서 가드 테스트에 쓴다.z.object({ snap_id: z.string(), brand_raw: z.string(), brand_id: z.string().nullable(), step: z.enum(['landing','pdp','cart','checkout','pay']), elements: z.array(z.string()), entered: z.number(), dropped_pct: z.number().nullable(), load_ms: z.number().nullable() })| TypeScript | 점검 엔진과 화면의 타입 안전한 로직. 구성·지표 파싱과 제안 모델 호출을 묶는다. |
| React | 화면별 이탈 지점·개선안 카드와 퍼널 시각화 컴포넌트를 만든다. |
| Next.js | 운영 담당이 화면을 열어 제안과 근거를 보는 검토 화면을 렌더링한다. |
| Tailwind | 퍼널 단계·개선안 카드의 일관된 스타일을 빠르게 잡는다. |
| JavaScript | 퍼널 지표 차트·인터랙션 동작 처리. |
| Claude | 화면 구성과 퍼널 지표를 보고 이탈 원인 가설과 화면별 개선안을 근거와 함께 생성한다. |
✓ pass → 여기서 멈춰도 운영 초안 도구로 완결. 더 키우려면 2주차에서 정답 원인과 비교해 헛짚은 구간을 보정한다.
✓ pass → 신뢰가 붙으면 3주차에서 A/B 실험 카드와 브랜드 비교로 넓힌다.
퍼널 스냅샷 한 건에 대한 이탈 지점과 화면별 개선안.
z.object({ snap_id: z.string(), bottleneck: z.enum(['landing','pdp','cart','checkout','pay','unknown']), suggestions: z.array(z.object({ kind: z.enum(['copy','layout','trust_signal','speed','form']), detail: z.string() })).min(0), evidence: z.array(z.object({ field: z.enum(['elements','dropped_pct','load_ms','step']), note: z.string() })).min(1), hedge: z.string() })[
{
"snap_id": "F003",
"bottleneck": "checkout",
"suggestions": [
{
"kind": "form",
"detail": "주소입력 자동완성·필드 축소로 입력 부담 완화"
},
{
"kind": "speed",
"detail": "체크아웃 로드 3.4초를 자산 지연로딩으로 단축"
}
],
"evidence": [
{
"field": "dropped_pct",
"note": "체크아웃 이탈 58%로 가장 큼"
},
{
"field": "load_ms",
"note": "로드 3400ms 로 느림"
}
],
"hedge": "원인 추정은 합성 지표 기준이라 실 A/B로 확인 필요."
},
{
"snap_id": "F005",
"bottleneck": "pdp",
"suggestions": [
{
"kind": "speed",
"detail": "갤러리 이미지 최적화로 5.2초 로드 단축"
}
],
"evidence": [
{
"field": "dropped_pct",
"note": "이탈 100% 극단값이라 측정 오류 가능성도 표기"
},
{
"field": "load_ms",
"note": "5200ms 매우 느림"
}
],
"hedge": "이탈 100%는 합성 경계값이라 데이터 점검 필요. 합성 기준."
},
{
"snap_id": "F004",
"bottleneck": "unknown",
"suggestions": [],
"evidence": [
{
"field": "load_ms",
"note": "load_ms 미측정이라 속도 원인 판단 보류, 확인필요"
}
],
"hedge": "지표 결측이라 판정 보류. 합성 기준."
}
]bottleneck·suggestions.kind enum, evidence min(1)은 Zod 로 자동 검증한다. bottleneck 이 입력 step 중 이탈 최대 단계와 맞는지, 근거가 지표를 인용했는지, hedge 의 합성 기준 표기는 judge 와 수동 spot-check 로 검증한다.