### Section 1: 도입 (Hook + Context) B2B/SaaS 제품에서 잠재 고객의 마음을 사로잡는 가장 확실한 방법은 '실제 결과물'을 보여주는 것입니다. Synapso.dev 프로젝트는 기존에 사용자가 직접 GitHub 계정을 연동하여 AI 블로그 포스트를 생성해 보는 인터랙티브한 데모(`/demo`)를 제공하고 있었습니다. 하지만 마케팅 관점에서는 치명적인 단점이 있었습니다. 방문자가 결과물을 확인하기 위해 '로그인'이라는 허들을 넘어야 했기 때문입니다. 이에 따라 인증 없이도 기존에 생성된 고품질의 포스트들을 갤러리 형태로 둘러볼 수 있는 **새로운 마케팅 전용 데모 페이지**가 필요해졌습니다. 단순히 DB에 있는 글을 노출하는 작업처럼 보일 수 있지만, 여기에는 중요한 기술적 제약 사항이 존재했습니다. 바로 **보안과 개인정보 보호(Privacy)** 입니다. 실제 유저들이 생성한 포스트를 노출하되, 작성자의 GitHub 아이디, 레포지토리 이름 등의 개인식별정보(PII)와 외부 링크가 절대 유출되어서는 안 되었습니다. 이번 글에서는 이 요구사항을 안전하고 성능 저하 없이 어떻게 구현했는지, 그 아키텍처와 구현의 디테일을 깊게 파헤쳐 봅니다. --- ### Section 2: 변경 사항 분석 (Deep Dive) #### 2-1. Middleware와 Header를 활용한 라우팅 기반 UI 스위칭 기존의 인터랙티브 데모는 추후 참고를 위해 `/demo-archive`로 이동시키고, `/demo` 경로를 새로운 마케팅 갤러리로 사용하기로 결정했습니다. 여기서 직면한 문제는 **헤더(Header)** 구성이었습니다. 일반적인 서비스 헤더에는 프로필, 설정 등 로그인 유저를 위한 메뉴가 가득하지만, 마케팅 페이지에서는 방문자가 '테스터 신청'으로 전환되도록 시선을 집중시켜야 합니다. Next.js App Router(서버 컴포넌트) 환경에서는 현재 렌더링 중인 페이지의 URL 경로(pathname)를 직접적으로 알기 어렵습니다. 이를 해결하기 위해 `middleware.ts`에서 요청 헤더에 경로를 주입하고, 공통 `

` 컴포넌트에서 이를 읽어 분기 처리하는 패턴을 적용했습니다. ```typescript // middleware.ts - Next.js 미들웨어 // 서버 컴포넌트에서 현재 URL 경로를 알 수 있도록 헤더에 직접 주입합니다. export default auth((req) => { // x-url-pathname 헤더 추가 (서버 컴포넌트에서 경로 감지용) const requestHeaders = new Headers(req.headers); const pathname = req.nextUrl.pathname; requestHeaders.set('x-url-pathname', pathname); const response = intlMiddleware(req); // intlMiddleware가 반환하는 응답 헤더에도 pathname이 반영되도록 처리 response.headers.set('x-url-pathname', pathname); return response; }); // components/Header.tsx - 공통 헤더 컴포넌트 // 미들웨어가 주입한 헤더를 읽어 데모 페이지일 경우 전용 마케팅 헤더를 렌더링합니다. import { headers } from 'next/headers'; import DemoHeader from './demo/DemoHeader'; export default async function Header() { const headerList = await headers(); const pathname = headerList.get('x-url-pathname') || ''; // 데모 페이지인 경우 데모 전용 헤더 반환 (아카이브 페이지는 제외) if (pathname.includes('/demo') && !pathname.includes('/demo-archive')) { return ; } const session = await auth(); // ... (기존 일반 헤더 렌더링 로직) ... } ``` 이 방식을 통해 기존 컴포넌트 트리를 크게 변경하지 않고도, 특정 라우트에서만 고립된 마케팅 전용 헤더(`DemoHeader`)를 우아하게 주입할 수 있었습니다. #### 2-2. Data Layer: 타입 시스템을 활용한 철저한 PII(개인식별정보) 차단 이 작업의 가장 핵심적인 보안 과제입니다. 화면(UI)단에서 단순히 작성자 이름을 렌더링하지 않는 것만으로는 부족합니다. API나 서버 컴포넌트의 직렬화 과정에서 클라이언트로 민감한 데이터가 넘어갈 위험(IDOR 취약점 등)이 있기 때문입니다. 따라서 데이터 페칭 계층인 `lib/demo.ts`와 타입 정의인 `lib/types.ts`에서 **Zod의 리터럴 타입**을 활용해 PII 데이터가 무조건 빈 문자열(`""`)이 되도록 아키텍처 레벨에서 강제했습니다. ```typescript // lib/types.ts & lib/demo.ts - 데모 데이터 및 보안 계층 // 실제 유저 데이터가 마케팅 페이지로 유출되지 않도록 방어선을 구축합니다. import { z } from 'zod'; // 1. Zod 스키마 수준에서 author와 repo를 빈 문자열로 강제 (컴파일/런타임 2중 검증) export const DemoPostSchema = z.object({ id: z.string().uuid(), slug: z.string(), title: z.string(), // ... 생략 ... author: z.literal(''), // 작성자 정보 노출 원천 차단 repo: z.literal(''), // 레포지토리 정보 노출 원천 차단 status: z.literal('published'), }); // 2. DB 데이터를 안전한 DemoPost 객체로 변환하는 맵퍼 function toDemoPost(post: any): DemoPost { return { ...post, id: post.id, slug: post.slug || post.id, content: stripGithubLinks(post.content || ''), status: 'published', author: '', // 객체 생성 시점에 PII 데이터를 완전히 덮어씌움 repo: '', // 객체 생성 시점에 PII 데이터를 완전히 덮어씌움 }; } // 3. 본문 마크다운 내의 GitHub 링크를 정규식으로 찾아 비활성화(텍스트화) export function stripGithubLinks(content: string): string { const githubCommitRegex = /https:\/\/github\.com\/([a-zA-Z0-9-._]+)\/([a-zA-Z0-9-._]+)\/commit\/([a-f0-9]+)/gi; return content.replace(githubCommitRegex, (match, owner, repo, sha) => { // 외부 저장소 링크를 끊고, 짧은 해시값 텍스트로만 노출 return `[Commit: ${sha.substring(0, 7)}]`; }); } ``` `toDemoPost` 함수는 단순히 데이터를 가공하는 것을 넘어, 백엔드 로직에서 프론트엔드 컴포넌트로 넘어가는 **신뢰 경계(Trust Boundary)** 역할을 합니다. 또한 `stripGithubLinks`를 통해 AI가 본문에 생성해둔 커밋 링크까지 추적하여 제거함으로써 보안 수준을 한 층 더 끌어올렸습니다. #### 2-3. ISR(Incremental Static Regeneration)을 통한 성능 최적화 마케팅 페이지는 무조건 빨라야 합니다. 페이지 로딩이 1초 지연될 때마다 이탈률이 급증하기 때문입니다. 하지만 데모 페이지는 시스템에 새롭게 `published` 된 포스트를 주기적으로 반영해야 하는 동적 요구사항도 가지고 있습니다. 이를 해결하기 위해 Next.js의 ISR(점진적 정적 재생성) 기능을 적용했습니다. ```tsx // app/[locale]/demo/page.tsx - 마케팅 데모 목록 페이지 // Next.js의 ISR을 활용하여 성능(정적 서빙)과 최신화(주기적 갱신)를 동시에 확보합니다. import { getDemoPosts } from '@/lib/demo'; import DemoPostCard from '@/components/demo/DemoPostCard'; import { PageContainer } from '@/components/ui/PageContainer'; // 핵심: 3600초(1시간)마다 백그라운드에서 페이지를 정적으로 재생성 (ISR) // DB 부하를 0으로 수렴시키면서, 전 세계 유저에게 Edge 캐싱된 HTML을 즉각 제공합니다. export const revalidate = 3600; export default async function MarketingDemoPage({ params }: { params: Promise<{ locale: string }> }) { const { locale } = await params; // PII가 제거된 데모 전용 포스트 목록만 안전하게 페칭 const posts = await getDemoPosts(); return (

AI Tech Blog Demo

{/* 포스트 카드 렌더링 구역 */}

{posts.map((post, index) => ( ))}

); } ``` `export const revalidate = 3600;` 단 한 줄의 코드로 데모 페이지는 1시간 주기로 재생성됩니다. DB를 매번 조회하지 않으므로 트래픽 스파이크에도 서버 비용이나 지연 없이 완벽히 대응할 수 있습니다. --- ### Section 3: 영향 분석 (Impact Analysis) 1. **보안 (Security)**: UI 단의 숨김 처리가 아닌, 데이터 변환 계층(`toDemoPost`)과 타입 시스템(`z.literal('')`) 수준에서 PII와 외부 링크를 제거했습니다. 이를 통해 API 응답 탈취나 리버스 엔지니어링을 통한 사용자 식별 정보 유출 가능성을 원천 차단했습니다. 2. **성능 및 UX (Performance / UX)**: ISR(1시간 캐시) 적용을 통해 데모 목록과 상세 페이지가 정적 페이지(SSG)와 동일한 속도로 서비스됩니다. 빠른 로딩과 마케팅 최적화 헤더(`DemoHeader`) 도입은 잠재 고객의 이탈을 막고 '테스터 신청'으로의 전환율(CVR)을 높일 것입니다. 3. **유지보수성 (Maintainability)**: 기존 코드를 삭제하지 않고 `/demo-archive`로 우아하게 이전하여 하위 호환성을 유지했습니다. 미들웨어를 이용한 헤더 스위칭은 향후 다른 도메인 특화 페이지를 만들 때도 재사용 가능한 패턴이 되었습니다. --- ### Section 4: 핵심 교훈 (Lessons Learned) - **보안은 가장 낮은 계층에서 (Shift-Left Security)**: "화면에서 안 보이게 숨겨주세요"라는 기획 요구사항을 그대로 UI에만 반영하면 언젠가 대형 사고로 이어집니다. 이번 사례처럼 DTO나 Mapper 패턴을 사용해 **데이터가 UI 컴포넌트로 넘어가기 전**에 민감 정보를 날려버리는 것이 백엔드/풀스택 개발자의 올바른 자세입니다. - **Zod를 활용한 타입 기반 보안**: Zod의 `z.literal('')`을 사용해 특정 필드가 항상 빈 값이어야 함을 시스템에 런타임/컴파일 타임 모두에 각인시켰습니다. 이는 테스트 코드를 넘어 명세 자체가 방어벽이 되는 훌륭한 패턴입니다. - **서버 컴포넌트 환경의 컨텍스트 한계 극복**: App Router에서는 클라이언트의 상태(현재 URL 등)에 접근하는 것이 까다롭습니다. `middleware.ts`를 활용해 커스텀 HTTP 헤더로 상태를 흘려보내는 테크닉은 Next.js 심화 활용에 있어 필수적인 기술입니다.

안전하고 빠른 마케팅 데모 페이지 구축기: 데이터 PII 차단과 Next.js ISR 아키텍처

tuosm9390