프론트엔드에서 URL이 부여되는 모달(Routable modal) 구현하기 (1) - 개념편

웹 페이지에서 모달이 열릴 때, 마치 다른 페이지로의 이동(내비게이션)이 일어난 것처럼 브라우저 주소창의 URL이 변경되는 UI를 구현할 수 있습니다.

예를 들어 아래처럼 갤러리 페이지(/feed)에서 특정 사진을 클릭하면 모달이 열리는데, 이 순간 URL이 /photo/123 등으로 변경되어 마치 모달에 별도의 URL이 부여되는 것처럼 보이는 경우입니다.

이는 Reddit이나 Facebook과 같은 서비스에서도 볼 수 있는데, 진행 중인 프로젝트에서도 별도의 페이지로 이동하지 않고도 많은 정보를 빠르게 탐색하게 하는 UI를 고민하던 끝에 이러한 기능을 구현하게 되었습니다.

Routable 모달은 UX 관점에서 다음과 같은 장점을 가집니다.

• 각각의 모달에 URL이 부여되므로, 사용자는 이 URL을 복사하여 다른 사용자에게 공유할 수 있습니다(permalink라고 불리기도 합니다).
  • 따라서 사용자는 이 URL로 다시 모달을 열어서 해당 항목에 바로 접근할 수 있습니다.
  • 또한, 브라우저가 새로고침된 경우에도 모달을 열었던 상태로 돌아갈 수 있습니다.
• 모달을 연 후에, 브라우저의 뒤로가기 동작을 통해 모달을 닫을 수 있습니다. 특히, 뒤로가기 버튼이 OS 레벨에 존재하는 Android 기기에서는 뒤로가기 버튼을 눌러 모달을 닫을 수 있어 편리합니다.
  • 물론 앞으로가기 동작을 통해 다시 모달을 열 수도 있습니다.

세부 유형

추가로, 세부 동작에 따라 Routable 모달을 아래와 같이 두 가지 유형으로 한 번 더 나누어 생각해볼 수 있습니다.

1. URL로 직접 접속했을 때 모달이 열리는 방식
2. URL로 직접 접속했을 때 모달이 아닌 별도의 페이지로 이동하는 방식

예를 들어, 위 예시에서 사용자가 /photo/123이라는 URL로 직접 접속했을 때, 아래와 같은 두 가지 UI를 생각해볼 수 있습니다.

1. 갤러리 페이지(/feed)가 열리고, 그 위에 해당 사진 모달이 자동으로 열리는 UI

2. 갤러리 페이지가 열리는 것이 아니라, 해당 사진에 대한 별도의 페이지(/photo/123)가 열리는 UI

이 2번 케이스는 URL에 직접 접속했을 때 1번 케이스처럼 모달이 자동으로 열리는 것이 아닌 모달 안에 들어있던 내용이 전체화면으로 열리는 형태가 됩니다.

구현 방법

Routable 모달을 구현할 때 핵심이 되는 것은 아래와 같이 크게 두 가지입니다.

1. 사용자가 모달을 열었을 때 다른 페이지로 이동(내비게이션)이 실제로 발생하지는 않지만, 마치 발생한 것처럼 URL을 변경하는 것
2. 모달에 부여된 URL로 직접 접속했을 때의 처리

1번 과정은 프로젝트에서 사용하고 있는 라우터 라이브러리(혹은 Next.js)에 따라 부르는 명칭은 조금씩 다르지만, 대부분은 Route masking이라는 용어로 설명하고 있습니다. 개념적으로는 브라우저의 history 스택에 열릴 모달의 URL을 새롭게 push하지만 화면상에서는 내비게이션이 일어나지 않게 되어 결과적으로는 브라우저에 표시되는 URL만 변경됩니다. 물론 브라우저의 뒤로가기 동작을 사용해 이전 URL로 돌아갈 수 있지만(history 스택에서 pop을 하게 되므로) 역시 화면상에서는 아무 변화가 없을 것입니다.

다음, 2번 과정은 위에서 언급한 두 가지 유형에 따라 구현을 달리해야 합니다.

다음 글에서는 Next.js의 pages 라우터를 중심으로 이러한 Routable 모달을 구현하는 방법에 대해 다루어 보려고 합니다.