푸터 쿠키 정책 링크 모든 페이지에 통일

홈, About, Privacy, Terms 페이지는 물론 동적 라우트까지 6개 페이지의 푸터에 쿠키 정책 링크를 일괄 추가했다. 간단한 작업처럼 보이지만, 이것 뒤에는 컴플라이언스 요구사항과 페이지 일관성 관리의 실제 어려움이 있었다.

왜 모든 페이지에 쿠키 링크가 필요한가

결제 플랫폼이나 이커머스처럼 사용자 동의와 개인정보가 중요한 서비스를 운영하다 보면, 쿠키 정책 접근성은 단순한 UI 요소가 아니라 법적 의무다. GDPR, CCPA 같은 규제들은 사용자가 서비스의 어느 페이지에 있든 쉽게 쿠키 정책에 접근할 수 있도록 요구한다. 푸터는 보통 이런 링크를 배치하는 표준 위치다.

실제로 작업하면서 발견한 점은, 한두 페이지 정도는 누락되어도 크게 드러나지 않는다는 것. 사용자가 홈에서는 쿠키 정책을 찾고, Privacy 페이지에서도 찾고 난 뒤 "어? Terms 페이지에는 없네?" 하다가 넘어간다. 그런데 접근성 감시 도구나 규제 당국 심사 때는 이런 누락이 문제가 된다. 그래서 "모든 페이지"가 중요했다.

6개 페이지, 2개의 동적 라우트

변경된 파일들을 보면 흥미로운 패턴이 보인다:

동적 라우트가 포함된 것이 중요하다. 이런 페이지들은 보통 제품 상세, 일자별 데이터, 에포크 기반 컨텐츠 같은 변동성이 있는 컨텐츠를 보여줄 것 같은데, 푸터 구조는 어떤 파라미터를 받든 동일해야 한다. 이는 푸터가 "단순히 페이지마다 copy-paste되는 것"이 아니라 체계적으로 관리되어야 함을 의미한다.

코드 일관성의 어려움과 선택지

6개 페이지에 동일한 푸터 링크를 추가한다는 것을 어떻게 구현했을까? 구체적 코드는 모르지만, Next.js App Router 기반 프로젝트라면 보통 세 가지 방법이 있다:

// 방법 1: 각 page.tsx 에서 footer component 임포트
import { Footer } from '@/components/Footer';
export default function Page() {
  return <main>콘텐츠</main><Footer />;
}

// 방법 2: 공통 layout.tsx 에서 footer 래핑
// src/app/layout.tsx에서 모든 자식 페이지를 footer로 감싸기

// 방법 3: 동적 라우트도 포함하는 상위 layout에서 처리
// src/app/layout.tsx 또는 각 segment의 layout.tsx

실제로는 아마도 각 page.tsx에서 Footer 컴포넌트를 명시적으로 추가하거나, 더 좋다면 공통 layout.tsx 구조를 개선해서 한 번에 관리했을 것 같다. 후자라면 지금 작업은 Footer 컴포넌트 자체에 쿠키 링크를 추가하는 것이었을 수도 있다.

이런 작업에서 배우는 것들

비슷한 작업을 또 하지 않으려면 몇 가지를 고민해야 한다:

• 공통 컴포넌트화의 필요성: 푸터 같은 UI 요소는 "모든 페이지에 배치되어야 한다"는 조건이 명확하다면, 처음부터 layout이나 shared 컴포넌트로 관리하는 게 낫다. 페이지마다 import하고 추가하는 방식은 누락을 피하기 어렵다.
• 코드 리뷰의 체크포인트: 이런 PR을 리뷰할 때 "정말 모든 관련 페이지가 포함되었나?"를 빠르게 확인하려면, 프로젝트 규칙(예: "모든 page.tsx는 Footer를 포함해야 함") 같은 것을 정의하고 linter나 문서화해 둔다.
• 동적 라우트의 간과: 정적 페이지 4개는 눈에 띄지만, 동적 라우트 2개는 빠지기 쉽다. 이를 방지하려면 "푸터가 필요한 page.tsx는 모두 어디에 있는가?"를 먼저 나열하는 게 좋다.

끝.

🛒 이 글과 어울리는 추천 상품

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.