AI Character Chat 생태계에서 Creator의 존재는 매우 중요하다.

Creator는 단순히 설정값을 채우는 사람이 아니라, 정말 대화하고 싶어지는 캐릭터를 만들어내는 핵심 주체다.
특히 말투가 자연스럽고, 근질근질하며, 몰입감 있는 캐릭터를 만들기 위해서는 단순한 설정 입력만으로는 부족하다.

직접 대화를 해보고, 어색한 부분을 고치고, 다시 대화해보는 과정을 반복해야 한다.
기존에는 캐릭터를 만들고 저장한 뒤, 채팅 페이지로 이동해서 대화해보고 맘에 안 들면 캐릭터를 수정하는 방식으로 캐릭터를 만들어야 한다.

이 과정은 페이지 전환도 많고, 생각의 흐름도 자주 끊긴다.
무엇보다 조금 고쳐보고 다시 테스트하기에는 너무 불편한 구조였다.

그래서 우리는 캐릭터 생성 / 수정 페이지에서 바로 대화를 해볼 수 있게 만들기로 하였다.

모바일의 경우에는 화면이 작기 때문에 캐릭터 생성 페이지 상단 헤더에 Chat 버튼을 두고 누르면 바로 테스트 채팅을 할 수 있어야 한다.

태블릿/PC의 경우 화면이 넓기 때문에 캐릭터 설정 화면과 채팅 화면을 동시에 보여줘야 한다.
사진과 같이 오른쪽 패널에 채팅 인터페이스를 고정 배치하여 캐릭터를 수정하면서 언제든지 채팅을 할 수 있어야 한다.

구현 계획으로는 테스트용 채팅 컴포넌트를 따로 만들지 않고 실제 서비스에서 사용하는 진짜 채팅 컴포넌트를 그대로 재사용해서 빠르게 구현하기로 하였다.

Next.js 채팅 컴포넌트 마이그레이션 과정에서 컴포넌트를 잘 분리해둔 상태였기 때문에 레이아웃만 잘 잡으면 충분히 가능하다고 판단했다.

이 조건을 동시에 만족시키기 위한 해법으로 떠오른 것이 Next.js의 Parallel Routing이었다.

File-system conventions: Parallel Routes | Next.js

Simultaneously render one or more pages in the same view that can be navigated independently. A pattern for highly dynamic applications.

nextjs.org

Parallel Routing은 하나의 URL 구조 안에서 여러 개의 라우트 세그먼트를 병렬로 렌더링할 수 있게 해주는 기능이다.

이 기능을 활용하면 메인 콘텐츠 영역, 사이드 패널, 모달 영역 등을 서로 독립적으로 라우팅하고 렌더링 할 수 있다.
그래서 캐릭터 생성 페이지는 그대로 유지하면서 채팅 UI만 옆에 붙였다 뗄 수 있는 구조에 딱 맞는 기능이라고 생각했다.

폴더 구조

(characterCreate)
 ├─ layout.tsx
 ├─ character
 │   └─ create
 │       └─ page.tsx
 └─ @sideChildren
     └─ default.tsx

(characterCreate)
 ├─ layout.tsx
 ├─ character
 │   └─ create
 │       └─ page.tsx
 └─ @sideChildren
     └─ default.tsx

(characterCreate)/@sideChildren/default.tsx는 오른쪽 채팅 패널의 기본 슬롯 역할을 한다.

export default function DefaultCharacterCreateSideChildren() {
  return <CharacterCreateChatPageContainer />
}

export default function DefaultCharacterCreateSideChildren() {
  return <CharacterCreateChatPageContainer />
}

(characterCreate)/layout.tsx는 Parallel Routing으로 전달받은 children과 sideChildren을 레이아웃 레벨에 배치한다.

export default async function CharacterCreateLayout({
  children,
  sideChildren,
}: CharacterCreateLayoutProps) {
  return (
    <div className={styles.mainWrapper}>
      <main className={styles.mainArea}>
        <div id="main-content" className={styles.childrenWrapper}>
          {children}
        </div>
      </main>
      <aside className={styles.sideChildren}>
        {sideChildren}
      </aside>
    </div>
  )
}

export default async function CharacterCreateLayout({
  children,
  sideChildren,
}: CharacterCreateLayoutProps) {
  return (
    <div className={styles.mainWrapper}>
      <main className={styles.mainArea}>
        <div id="main-content" className={styles.childrenWrapper}>
          {children}
        </div>
      </main>
      <aside className={styles.sideChildren}>
        {sideChildren}
      </aside>
    </div>
  )
}

(characterCreate)/character/create/page.tsx는 채팅 기능을 신경쓸 필요 없이 캐릭터 생성 페이지만 잘 보여주면 된다.

export default async function CharacterCreatePage() {
  return <CharacterForm mode="create" />
}

export default async function CharacterCreatePage() {
  return <CharacterForm mode="create" />
}

캐릭터 생성 페이지는 채팅이 존재하는지도, 옆에 뭐가 뜨는지도 전혀 신경 쓰지 않는다.
캐릭터를 생성하는 화면 역할만 담당하고 채팅은 Parallel Routing을 통해 독립적으로 결합된다.

• 지금 보여준 파일들은 어느 정도 단순화 된 코드이다.
• 실제로는 두 컴포넌트 간 공통 상태 관리와 캐릭터와 채팅의 동기화 등 신경써야 할 요소가 추가로 있었다.

이번 프로젝트는 Next.js의 좋은 기능을 Convention 대로 활용하면서 Creator의 작업 흐름을 끊지 않는 구조를 만들었다는 점에서 의의가 있다.


Parallel Routing 덕분에 기존 채팅 컴포넌트를 그대로 재사용할 수 있었고 페이지 간 결합도는 낮추면서 레이아웃 수준에서만 책임을 분리할 수 있었다.

그리고 Creator 입장에서 캐릭터 설정을 바꾸자마자 바로 대화해볼 수 있는 경험은 체감이 확실히 되는 수준이었다.

Parallel Routing은 Intercept Routing과 결합하면 또 강력한 시너지를 내기 때문에 활용도가 무궁무진한 아주 강력한 기능이라고 생각한다.