LP 인계 — Meta Pixel 설치 + AAM 개인정보처리방침 보강

작성일: 2026-05-15 작성자: wine-research 세션 (Founder가 D1 인프라 셋업 진행 중) 인계 대상: winemine LP 레포 세션 (Next.js App Router · Vercel 배포 · https://winemine.vercel.app) 선행 문서: _workspace/62_micro_budget_action_plan.md §1.2 D1 행과 §“P0 인프라” 시간 예상: 코드 추가 15분 + 검증 10분 + 개인정보처리방침 한 줄 추가 10분 = 총 35분

0. 한 줄 요약

@winemine Meta Pixel(ID 2535368716913166)을 LP <head>에 next/script로 추가하고, Automatic Advanced Matching(AAM)이 켜져 있으므로 개인정보처리방침에 Meta 데이터 공유 고지 한 줄을 추가한다. Vercel 배포 후 Meta Pixel Helper로 PageView 발화를 확인하면 끝.

1. 배경 (왜 이걸 하는가)

2026-05-14에 마이크로 예산 (₩50만 / 30일) 액션 플랜(62_micro_budget_action_plan.md)이 확정됨.
D8(2026-05-22 예정)부터 Meta Reels 광고 ₩240,000을 22일간 집행 — 광고 학습이 통과하려면 conversion 추적이 필수. Pixel이 없으면 광고 최적화가 안 됨.
Meta Business Manager 가입·인스타 연동·광고 계정 생성·Pixel 데이터셋(winemine_web) 생성은 이미 완료. 남은 건 LP 측 코드 설치와 발화 검증.
추가로 Pixel 생성 단계에서 Automatic Advanced Matching(AAM)을 ON으로 설정함 — 이메일을 SHA-256 해시 처리해 Meta로 전송. KR PIPA(개인정보보호법) 준수를 위해 처리방침 고지 필요.

2. 작업 1 — Pixel base code 설치

2.1 정확한 위치

LP 레포의 app/layout.tsx (Next.js App Router 루트 레이아웃). 정확한 경로는 LP 레포 구조에 따라 src/app/layout.tsx일 수도 있음.

2.2 환경변수 등록 (먼저)

.env.local (LP 레포 루트):

NEXT_PUBLIC_META_PIXEL_ID=2535368716913166

Vercel 대시보드 → 프로젝트 → Settings → Environment Variables에 동일 이름·값으로 추가. Production·Preview·Development 모두 체크.

2.3 코드 추가

app/layout.tsx 안에 next/script로 추가. 기존 layout 구조에 따라 적절히 병합:

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const pixelId = process.env.NEXT_PUBLIC_META_PIXEL_ID;

  return (
    <html lang="ko">
      <head>
        {pixelId && (
          <>
            <Script id="meta-pixel" strategy="afterInteractive">
              {`
                !function(f,b,e,v,n,t,s)
                {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
                n.callMethod.apply(n,arguments):n.queue.push(arguments)};
                if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
                n.queue=[];t=b.createElement(e);t.async=!0;
                t.src=v;s=b.getElementsByTagName(e)[0];
                s.parentNode.insertBefore(t,s)}(window, document,'script',
                'https://connect.facebook.net/en_US/fbevents.js');
                fbq('init', '${pixelId}');
                fbq('track', 'PageView');
              `}
            </Script>
            <noscript>
              <img
                height="1"
                width="1"
                style={{ display: 'none' }}
                src={`https://www.facebook.com/tr?id=${pixelId}&ev=PageView&noscript=1`}
                alt=""
              />
            </noscript>
          </>
        )}
      </head>
      <body>{children}</body>
    </html>
  );
}

2.4 왜 `<script>` 직삽이 아니라 `<Script>` 컴포넌트인가

Next.js의 hydration 순서·CSP 헤더·SSR rendering 일관성 때문. 직삽하면 dev 환경에서는 작동하지만 production 빌드에서 hydration mismatch warning이 뜨거나 일부 라우트에서 누락될 수 있음.
strategy="afterInteractive"는 페이지 인터랙티브 시점 직후 로드 — Pixel 표준 권장값.

2.5 GTM과의 관계 (D2 작업 사전 안내)

D2에 GTM 컨테이너를 만들 예정인데, Pixel base code는 이미 LP에 직접 박혀 있으므로 GTM에는 base code 태그를 만들지 않음. 중복 발화 방지.
GTM에는 이벤트 태그(waitlist_submit·waitlist_success)만 만들 예정. 이건 D2 인계 문서에서 별도로 다룸.

3. 작업 2 — 개인정보처리방침에 Meta 데이터 공유 고지 추가

3.1 왜 필요한가

AAM이 켜져 있어 이메일·전화번호가 클라이언트 측에서 SHA-256 해시 처리되어 Meta로 전송됨.
KR 개인정보보호법(PIPA) 제17조(개인정보의 제공) 및 제22조(동의를 받는 방법) 준수 — 평문은 아니지만 식별 가능 정보를 제3자에 제공하는 행위이므로 고지·동의 근거가 필요.
광고 시작(D8)까지는 처리방침에 추가되어 있어야 안전. 데드라인: D7 (2026-05-21).

3.2 추가할 문구 (한국어)

LP의 /privacy 페이지 또는 푸터에서 링크된 개인정보처리방침의 “개인정보의 제3자 제공” 또는 “개인정보의 처리위탁” 섹션에 추가:

제○조 광고 성과 측정을 위한 정보 제공

회사는 마케팅 광고 성과 측정 및 효율 개선 목적으로 Meta Platforms, Inc.
(Facebook/Instagram 운영사)에 다음 정보를 제공할 수 있습니다.

- 제공 정보: 해시(SHA-256) 처리된 이메일 주소·전화번호, 페이지 방문 정보,
  사전 신청 완료 이벤트 정보
- 제공 목적: 광고 클릭과 사전 신청을 매칭하여 광고 효율 측정 및 유사 사용자
  타겟팅에 활용
- 보유·이용 기간: Meta 정책에 따라 처리되며, 평문 개인정보는 전송되지 않음
- 거부 권리: 이용자는 브라우저 설정 또는 Meta 광고 환경설정
  (https://www.facebook.com/adpreferences)에서 광고 추적을 거부할 수 있음

3.3 영문 LP 버전이 있을 경우

Section ○. Information Sharing for Ad Performance Measurement

For the purpose of measuring advertising effectiveness and improving ad efficiency,
we may share the following information with Meta Platforms, Inc.
(operator of Facebook and Instagram):

- Information shared: SHA-256 hashed email addresses and phone numbers,
  page visit information, and waitlist sign-up event data
- Purpose: To match ad clicks with sign-ups for measuring ad performance and
  enabling lookalike audience targeting
- Retention: Handled per Meta's policies; plaintext PII is not transmitted
- Opt-out: Users may opt out via browser settings or Meta's ad preferences
  (https://www.facebook.com/adpreferences)

3.4 푸터·랜딩 동의 체크박스 (선택 — 권장)

사전 신청 폼 옆에 작은 동의 체크박스 추가 시 PIPA 안전성 ↑:

□ [필수] 개인정보 처리방침에 동의합니다. (보기)
□ [선택] 광고 성과 측정을 위한 Meta 데이터 공유에 동의합니다.

다만 “선택”으로 두면 동의율이 낮아 AAM 효과가 떨어짐. 처리방침 본문에 명시하고 사전 신청 = 처리방침 동의로 간주하는 방식이 일반적 (단, 처리방침 링크가 폼 근처에 명시되어야 함).

4. 검증 절차 (배포 후 반드시 통과해야 함)

4.1 Chrome 확장 설치

Meta Pixel Helper — Chrome 웹스토어에서 무료 설치.

4.2 PageView 발화 확인

https://winemine.vercel.app/ 열기 (Vercel 배포 완료 후, 약 2~3분)
주소창 오른쪽 Pixel Helper 아이콘 클릭
다음이 보여야 함:
- Pixel ID: 2535368716913166
- PageView — 1 event fired
- 빨간 ⚠️ 경고 없음

4.3 Events Manager에서 확인 (3~5분 후)

https://business.facebook.com/events_manager2 접속
winemine_web 데이터셋 선택
Overview 또는 Test Events 탭
최근 활동에 PageView 이벤트가 카운트되면 ✅

4.4 Vercel 배포 환경변수 확인

# LP 레포에서
vercel env ls

NEXT_PUBLIC_META_PIXEL_ID가 Production·Preview·Development 환경에 모두 등록돼 있는지 확인.

4.5 Production URL과 Preview URL 둘 다 확인

Production: https://winemine.vercel.app/
Preview: 최근 deploy의 직링크 (Vercel 대시보드 확인)

둘 다 Pixel Helper에서 동일 ID·PageView 발화 확인.

5. Acceptance Criteria (인계 완료 기준)

위 5개 모두 ✅이면 인계 완료:

.env.local과 Vercel 환경변수 NEXT_PUBLIC_META_PIXEL_ID=2535368716913166 등록
app/layout.tsx에 next/script 기반 Pixel 코드 + noscript fallback 추가
Production URL에서 Meta Pixel Helper가 Pixel ID 2535368716913166 — PageView fired 확인
Events Manager winemine_web Overview에서 PageView 카운트 증가 확인
개인정보처리방침에 Meta 데이터 공유 고지 한 단락 추가 (한국어 + 영문 둘 다, 영문 LP 있다면)

6. 인계 이후 다음 단계 (참고만)

이 작업이 끝나면 wine-research 세션으로 돌아와서 D1 남은 두 가지를 진행:

Resend 가입 + 도메인 인증 — 이메일 발송용 API 키 발급
Supabase 스키마 추가 — waitlist 테이블에 founder_number·tier·marketing_agree_at 컬럼 3개 추가

D2(2026-05-16)에는 GTM 컨테이너 생성 + LP에 GTM 스크립트 1줄 추가 + GTM 안에서 이벤트 태그 셋업. 별도 인계 문서가 만들어질 예정.

7. 트러블슈팅 (미리 알아두면 좋은 함정)

증상	원인·해결
Pixel Helper에 ⚠️ “Pixel did not load successfully”	`next/script`의 `strategy`를 `beforeInteractive`로 바꾸지 말 것. `afterInteractive` 유지.
Production만 발화, Preview에서 안 됨	Vercel 환경변수가 Preview에 등록 안 됨. 대시보드 재확인.
PageView가 2번 카운트됨 (Pixel Helper에 `2 events fired`)	어디선가 base code가 중복 삽입됨. GTM 태그·다른 컴포넌트의 `fbq('track')` 호출 점검.
Hydration mismatch warning (dev 콘솔)	`<Script>` 컴포넌트 안에 `${pixelId}` 보간 시 빈 문자열 분기 누락. `pixelId &&` 가드 확인.
Events Manager에 PageView 안 잡힘 (Helper는 정상)	광고 차단 확장(uBlock·Brave shield) 켠 상태로 테스트. 시크릿 창·다른 브라우저에서 재확인.

부록 — Pixel base code 원본 (참조용)

Meta가 발급한 base code 원본:

<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '2535368716913166');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=2535368716913166&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->

§2.3의 Next.js 버전은 이 원본을 next/script와 환경변수로 래핑한 것.