🔀 Next.js 9장: Parallel & Intercepting Routes — 모달과 라우팅의 극한

2026년 4월 30일 수정됨

📋 개요

Parallel Routes와 Intercepting Routes로 URL 기반 모달을 구현하는 방법을 배웁니다.

📋 목차

📌 이 문서를 읽기 전에
🤔 왜 알아야 하는가
🏗️ 비유로 먼저 이해하기
🧩 Parallel Routes (@folder): 한 지붕 두 가족 🟢
🌱 Intercepting Routes ((..)): 내가 채가는 마술 🟡
🛡️ 인스타그램 모달 설계: 두 기술의 완벽한 앙상블 🔴
💥 에러 해결 카탈로그
🏁 이번에 배운 내용 총정리
📝 마무리 퀴즈
🔗 더 알아보기

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 20분(전체) / 핵심 파트만: 10분

🗺️ 이 문서의 흐름
독립된 영역 병렬 렌더기(@) → 흐름 가로채기((..)) → 이 둘을 조합한 궁극의 "공유 URL 모달" 패턴 마스터

🎯 이 문서를 다 읽으면 할 수 있는 것

인스타그램, 핀터레스트처럼 (1) 피드 위에서는 모달로 뜨고, (2) 남에게 카톡으로 공유한 URL을 누르면 전체화면 전용 페이지로 접속되는 이중 라우팅 아키텍처를 구현할 수 있다.
하나의 layout.tsx 안에서 A, B, C 구역이 각각 남의 눈치 안 보고 독립적인 로딩/에러 화면을 뿜어내는 "대시보드 병렬 렌더링" 을 설계할 수 있다.

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

영철(새로 온 주니어): "리드 님... 피드에서 사진을 클릭하면 모달로 띄워줬거든요. 그런데 사용자가 팝업을 닫으려고 '뒤로 가기'를 눌렀더니 사이트 밖으로 튕겨 나갔대요! URL이 안 변해서 그런 것 같은데, 그렇다고 새 페이지로 이동시키자니 배경 피드가 다 사라져요. 😭"
영호(FE 리드): "영철 님... 모달의 최고 난제인 'URL 동기화 레이어' 를 마주하셨군요! Next.js의 @folder (병렬 라우트) 와 (..) (가로채기 라우트) 를 섞어 쓰면, URL은 정확히 바뀌면서도 배경 화면은 그대로 유지되는 인스타그램 뺨치는 팝업을 만들 수 있다고요!"

🤔 왜 알아야 하는가

과거 리액트 시절에 팝업/모달 띄우기는 쉬웠어. const [isOpen, setIsOpen] = useState(false) 하나 선언하고 조건부 렌더링({isOpen && <Modal/>}) 때리면 끝이었지.
하지만 이 방식엔 치명적인 결함이 있었단다.

뒤로 가기 불가능: 브라우저 히스토리(URL)에 기록이 안 남아서, 뒤로 가기를 누르면 모달만 꺼지는 게 아니라 앞 페이지로 이동해버림.
공유 불가능: 이 "사진 모달이 떠 있는 상태" 자체를 친구한테 링크로 복사해서 줄 수가 없음.
SEO 붕괴: 크롤러 입장에서는 숨겨진 div 덩어리일 뿐, 독립된 문서(사진 상세 정보)로 인식하지 못함.

이걸 고치려면 모달을 띄울 때 강제로 URL을 바꿔야 하는데(예: /feed -> /photo/123), 과거엔 URL이 바뀌면 배경에 깔려있던 피드 목록이 싹 날아가고 새로운 백지 렌더 영역(모달만 덩그러니 있는 페이지) 이 나타나는 한계가 있었어.

이 모달 딜레마를 "서버 컴포넌트 프레임워크" 차원에서 가장 우아하게, 완벽하게 깨버린 Next.js의 자랑스러운 두 가지 고급 파일 시스템 룰을 배워보자.

🏗️ 비유로 먼저 이해하기

🧒 5살에게 설명한다면? (영수네 국밥집의 독립 테이블과 시식 가로채기)

Parallel Routes (@) : 1인용 칸막이 테이블
식당 한가운데에 독립된 밥상 3개(@table1, @table2, @table3) 가 놓여 있는 거야.
1번 손님이 깍두기를 더 달라고 해도(@analytics) , 2번 손님은 자기 국밥을 조용히 먹고 있어.
옆 테이블에서 그릇을 깨뜨려도(@error) , 내 테이블 손님은 아무 일 없다는 듯 밥을 먹을 수 있는 완벽한 독립 식사 공간 이야.

Intercepting Routes ((..)): 주방 앞 가로채기 시식회
원래 "특대 수육" 주문(photo/1) 은 "안쪽 단체 방" 으로 배달되어야 해.
그런데 손님이 복도를 지나가다가 주방 입구에서 "잠깐! 그 수육 나 한 점만 맛보게 해줘!" 하고 목적지로 가던 수육을 중간에 낚아채서(Intercept) 현재 있는 복도(피드 화면) 에서 한 입 먹어보는 마술 이야.
다 먹고 접시를 돌려주면(뒤로 가기) , 다시 원래 자리로 돌아가고, 아예 처음부터 "단체 방" 으로 들어온 손님(직접 URL 접속) 은 제대로 된 수육 한 상을 받게 돼.

🧩 Parallel Routes (`@folder`): 한 지붕 두 가족 🟢

먼저 병렬 라우트야. 폴더 이름 앞에 골뱅이(@)를 붙이면, Next.js는 이걸 단순한 URL 경로 조각으로 해석하지 않고 "부모 Layout에 꽂아 넣을 독립된 슬롯(Slot)" 으로 취급해.

상황: 복잡한 관리자 대시보드

대시보드(Root) 안에 1) 사용자 통계표와 2) 최신 알림창 두 개의 거대한 구역이 있어.

app/
 ├─ layout.tsx      (뼈대 레이아웃)
 ├─ page.tsx        (가운데 기본 구역)
 ├─ @analytics/     (골뱅이! 슬롯 A)
 │   └─ page.tsx
 └─ @notifications/ (골뱅이! 슬롯 B)
     └─ page.tsx

아빠 레이아웃(`layout.tsx`)의 마법 슬롯 조립

@파일명 폴더를 만들면, Next.js 프레임워크 코어가 자동으로 layout.tsx 컴포넌트의 파라미터(Props)에 그 이름과 똑같은 children을 몰래 주입해줘! 엄청난 흑마법이지.

// app/layout.tsx
export default function DashboardLayout({
  children, // 원래 들어오던 기본 page.tsx 구역
  analytics, // @analytics 폴더 내부의 렌더링 결과물이 통째로 들어옴! (마술)
  notifications, // @notifications 내부 결과물
}: {
  children: React.ReactNode
  analytics: React.ReactNode
  notifications: React.ReactNode
}) {
  return (
    <body>
      <main className="grid">
        <div className="center"> {children} </div>
 
        {/* 한 지붕(layout) 아래에 3가족이 독립된 스크린으로 공존한다! */}
        <aside className="left"> {analytics} </aside>
        <aside className="right"> {notifications} </aside>
      </main>
    </body>
  )
}

이 짓을 왜 하나요? (최대 장점)
저 3개의 구역(children, analytics, notifications)은 완전히 남남처럼 행동해.

만약 통계(analytics) 데이터 조회가 5초나 걸려서 로딩 중(자체 loading.tsx 보유)이거나 오류가 나도(자체 error.tsx 보유), 오른쪽의 알림창(notifications)은 눈치 안 보고 0.1초 만에 렌더링을 끝내고 혼자 그려져. 완벽한 격리 보루가 되는 거야!

🌱 Intercepting Routes (`(..)`): 내가 채가는 마술 🟡

이게 바로 인스타그램이 피드 누를 때 새 창으로 안 가고 사진만 띄우는 핵심 기술이야. 폴더 이름에 상대경로 쩜쩜괄호 기호 (..)를 붙여서 만들어.

(.) : 나와 같은 폴더 레벨 경로 가로채기
(..) : 나보다 한 단계 윗방(부모) 경로 가로채기
(..)(..) : 두 단계 윗방 가로채기
(...) : 아예 최상단 app/ 기준 루트(Root) 가로채기

🎯 영철이의 인스타그램 만들기 미션

우리는 기본적으로 /photo/123 이라는 고유 주소를 가진 정직하고 커다란 "사진 전용 새 페이지"를 가지고 있어. (남한테 카톡으로 공유했을 때 떨어지는 도착지)

app/
 ├─ feed/
 │   └─ page.tsx      (게시물 목록)
 └─ photo/
     └─ [id]/
         └─ page.tsx  (그냥 접속하면 뜨는 커다란 전체사진 페이지)

이 상태에서 feed/page.tsx 안의 사진 링크 <Link href="/photo/123"> 를 클릭하면? 안타깝게도 화면 배경이 하얗게 싹 다 지워지며 뻘건 전체화면 사진 페이지 /photo/123 으로 넘어가버려.

이걸 막으려면? 피드(Feed) 구역 내부에서, 원래 /photo/ 방으로 흘러 들어가야 할 라우팅 흐름을 가로채면 돼!

🛡️ 인스타그램 모달 설계: 두 기술의 완벽한 앙상블 🔴

이제 위에서 배운 두 개의 무기(병렬 @, 가로채기 (..))를 합체해 전설의 무기(Soft Navigation Modal)를 벼려내자.

완벽한 모달 폴더 구조 설계도

app/
 ├─ layout.tsx
 ├─ feed/
 │   ├─ layout.tsx    ★ 모달 슬롯을 구비해놓음
 │   ├─ page.tsx      ★ <Link href="/photo/1">가 있는 목록
 │   └─ @modal/       ★ [Parallel] 모달을 띄울 전용 독립 병렬 슬롯
 │       ├─ default.tsx     (평소 로딩 전용 투명인간 뷰)
 │       └─ (..)photo/      ★ [Intercept] 흐름 가로채기 폴더! (피드의 형제인 photo를 낚아챔)
 │           └─ [id]/
 │               └─ page.tsx ★ 여기가 바로 피드 배경을 깔고 뜨는 "모달 박스" 컴포넌트!
 │
 └─ photo/            ★ [Original] 여기는 변함 없이 존재하는 "근본 전체화면" 목적지.
     └─ [id]/
         └─ page.tsx  ★ 카톡/인스타로 복사된 링크 직결 접속 시 뜨는 거대한 화면!

[마법이 펼쳐지는 순간]

상황 1: 카톡으로 링크 공유받아 브라우저에 쌩으로 복붙 접속했을 때 (Hard Navigation)
누가 /photo/1 쳤다. Next.js 엔진은 "가로챌 출발지가 없네?" 하고 정직하게 근본 경로인 맨 밑바닥 app/photo/[id]/page.tsx 찐페이지를 열어서 보여준다.
상황 2: 사용자가 사이트 내에서 피드(feed) 썸네일을 마우스로 부드럽게 클릭할 때 (Soft Navigation)
피드(feed/page.tsx) 안에서 <Link href="/photo/1"> 클릭!
경로가 이동하려는데, 앗! feed 폴더 내부에 잠복 경찰 (..)photo 가 "잡았다 요청!" 하고 낚아챈다.
낚아챈 이 가짜 모달 껍데기는 아까 골뱅이로 뚫어둔 @modal 병렬 슬롯 위치에(아빠 레이아웃 옆자리에 끼어서) 뿅 하고 튀어나온다!

결과? URL 창엔 /photo/1 이라고 예쁘게 찍혀있지만, 화면은 원래 있던 feed 목록 위에 모달(@modal)이 떠 있는 궁극의 아키텍처가 완성된다. 사용자가 폰 뒤로 가기를 누르면 모달만 꺼지고 다시 근원지(피드 URL)로 쏙 회귀한다.

🌟 layout.tsx 합체 코드

// app/feed/layout.tsx
export default function FeedLayout({
  children,
  modal // @modal 폴더 자체가 Props로 꽂힘!
}: { children: React.ReactNode, modal: React.ReactNode }) {
  return (
    <>
      {children} {/* 피드 목록 (배경에 영원히 깔려있음) */}
      {modal}    {/* 가로채기 레이더. 평소엔 비어있다가 누르면 이 자리에 팝업이 뙇! */}
    </>
  )
}

💥 에러 해결 카탈로그

에러 메시지가 뜨면 Ctrl+F로 검색해봐.

❌ 모달 폴더 세팅을 다 했는데도 빌드나 페이지 이동 시 터집니다 (404 Error)

원인: Parallel Route (@폴더)를 심어놓고, 평상시 렌더링에 필요한 default.tsx 를 미배치함.
해결책: Next.js 병렬 라우트는 "화면에 띄워줄 URL 대상이 명확하지 않을 때" 표시할 빈 깡통 스크린 파일을 강요한다. 컴포넌트명 default.tsx 를 만들고 쿨하게 return null; 하나만 적어서 반환시키면 마법처럼 충돌이 사라진다.

❌ `(..)` 경로를 한 번 썼는데 가로채기가 작동을 안 하고 본 페이지로 자꾸 튕깁니다.

원인: (..) 짬짬 폴더의 깊이 매칭 오류.
예를 들어 가로채려는 대상이 app/movies/[id] 인데, 잠복 경찰 위치가 app/feed/@modal/(..)movies 라 치자.
경찰은 "내 부모(feed)랑 같은 급의 방(movies)" 만 낚아챌 수 있다! 만약 깊이가 하나라도 어긋난다면 가로채기는 발동 조건을 충족하지 못해 정직한 링크로 튕겨버린다. (깊이가 헷갈리면 폴더 트리를 종이에 그려보는 걸 원칙으로 하라!)

🏁 이번에 배운 내용 총정리

기능 구분	주요 역할 설명	실무 사용 빈도 & 예시
`@folder` (Parallel)	한 탭 문서 화면을 여러 개의 "독립 생존 구역"으로 칼로 쪼갬	대시보드 3분할 뷰, 로그인 다이얼로그 구역 확보 (매우 높음)
`(..)` (Intercept)	이동하려는 목적지의 URL과 내용물을 낚아채 "현재 있는 뷰포트에 덮어씀"	인스타 사진 피드 확대, 핀터레스트 카드 클릭 시 (높음)
위 두 개 조합 마술	URL 일치, 브라우저 뒤로 가기 동작, 직접 접속(공유) 처리까지 완벽 커버하는 라우팅 레벨의 모달 혁명	프로덕트 최고난도 UX 팝업 (Next.js를 도입하는 이유 그 자체!)

💡 한 줄로 기억하기
팝업 모달을 만들 때 useState(false) Boolean 스위치에만 의존하던 단순한 시절은 끝났다! 경로(URL)를 가로채고((..)), 그 가로챈 화물을 내 옆에 병렬 부하(@)로 배치하면 진짜 앱 같은 네이티브 파워 라우팅 모달이 탄생한다!

📝 마무리 퀴즈

Q1. Parallel Route 슬롯에 default.tsx가 필요한 이유는?

✅ 정답: 현재 URL에 슬롯이 매칭되지 않을 때 보여줄 기본 상태가 필요하기 때문이다.

💡 상세 해설: 새로고침이나 직접 진입에서는 모달 슬롯에 대응하는 URL 상태가 없을 수 있다. default.tsx가 없으면 의도치 않은 404나 깨진 레이아웃이 생긴다.

Q2. Intercepting Route의 (.)와 (..)는 무엇을 기준으로 해석될까?

✅ 정답: 파일 시스템 깊이가 아니라 URL 세그먼트 레벨을 기준으로 해석된다.

💡 상세 해설: 폴더가 깊어 보여도 route group이나 slot은 URL에 나타나지 않을 수 있다. 그래서 실제 주소 구조를 기준으로 인터셉트 위치를 판단해야 한다.

Q3. 영철이의 테스트 타임: 피드에서 사진을 누르면 모달, 새 탭으로 열면 전체 페이지가 떠야 한다. 필요한 구조는?

✅ 정답: 원본 상세 page와 피드 컨텍스트에서 가로채는 intercepting modal route를 함께 둔다.

💡 상세 해설: 모달은 컨텍스트가 있을 때만 모달이어야 한다. 직접 접근까지 고려해야 공유 링크와 새로고침이 깨지지 않는다.

🐣 영철이의 퇴근 일기

오늘은 모달도 URL과 히스토리를 가진 화면이 될 수 있다는 걸 배웠다.

💡 "공유 가능한 UI는 상태 변수보다 라우팅으로 설계해야 새로고침과 뒤로가기가 자연스럽다."

다음 모달 요구사항에는 먼저 새 탭, 뒤로가기, 새로고침 시나리오를 적어 보겠다.