ReactNextCentral
Published on

Next.js에서 라우팅 시나리오에 맞는 UI 처리 전략: 로딩, 에러 발생, 페이지 미존재

Next.js 애플리케이션에서 라우팅 도중 발생할 수 있는 다양한 시나리오와 이에 대응하는 UI 처리 방법을 소개합니다. 로딩 시간, 에러 발생, 페이지 미존재 상황에서 사용자 경험을 최적화하는 전략을 알아봅니다.
Next.js에서 라우팅 시나리오에 맞는 UI 처리 전략: 로딩, 에러 발생, 페이지 미존재
Authors
Table of Contents

Next.js 라우팅 시스템과 사용자 경험

사용자가 웹 애플리케이션을 사용하면서 겪는 경험은 그 애플리케이션의 성공에 결정적인 영향을 미칩니다. 특히, 페이지 로딩 시간, 에러 발생 대응, 존재하지 않는 페이지 접근 등 라우팅 과정에서 발생할 수 있는 다양한 시나리오에 대한 적절한 UI 처리는 사용자 만족도를 크게 향상시킵니다. Next.js는 이러한 상황에 대응하기 위한 여러 기능을 제공함으로써 개발자가 사용자 경험을 최적화할 수 있도록 지원합니다.

이 글에서는 Next.js의 라우팅 시스템을 활용하여 사용자 경험을 고려한 시나리오별 UI 처리 방법을 소개하고자 합니다. 사용자가 웹 애플리케이션을 이용하는 동안 겪을 수 있는 다양한 라우팅 상황에 어떻게 대응할 수 있는지 실용적인 코드 예제와 함께 알아보겠습니다.

라우팅 시 UI 처리의 베스트 프랙티스: 사용자 경험 최적화하기

라우팅 시 사용자 경험을 고려한 UI 처리는 웹 애플리케이션의 사용성에 큰 영향을 미칩니다. 주요 시나리오별로 적절한 UI 처리 전략을 요약해보겠습니다.

  • 로딩 상태: 사용자가 새 페이지로 이동할 때 로딩 스켈레톤 또는 진행 표시기를 제공하여 로딩 중임을 명확히 표시합니다.
  • 에러 상태: 오류 발생 시, 사용자에게 오류 메시지를 명확하게 전달하고, 가능한 해결 방법이나 재시도 옵션을 제공합니다.
  • 페이지 미존재(404): 존재하지 않는 페이지에 대한 접근 시, 사용자를 안내하는 커스텀 404 페이지를 제공하여 사이트 내 다른 유용한 콘텐츠로 유도합니다.

사용자 경험을 향상시키는 라우팅 UI 처리 팁

좋은 사용자 경험을 제공하기 위해 라우팅 UI 처리 시 고려해야 할 몇 가지 팁을 소개합니다.

  • 빠른 피드백 제공: 페이지 로딩 시간이 길어지더라도 사용자에게 로딩 상태를 즉각적으로 피드백하여 대기 시간에 대한 인식을 줄입니다.
// 로딩 스켈레톤 예시
import Skeleton from 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css';

function LoadingSkeleton() {
  return (
    <>
      <Skeleton height={30} width={200} />
      <Skeleton count={5} />
    </>
  );
}
  • 명확한 안내와 재시도 기능: 오류 상황에서 사용자에게 문제 상황을 명확하게 안내하고 재시도 버튼을 제공하여 쉽게 해결할 수 있도록 합니다.
// 에러 처리 예시
function ErrorRetry({ onRetry }) {
  return (
    <div>
      <p>문제가 발생했습니다. 잠시 후 다시 시도해주세요.</p>
      <button onClick={onRetry}>재시도</button>
    </div>
  );
}
  • 유용한 리소스 제공: 404 페이지에서는 사용자를 홈페이지나 다른 관련 페이지로 안내할 수 있는 링크를 제공하여 사이트 내에서 머무를 수 있도록 유도합니다.
// 404 페이지 예시
import Link from 'next/link';

export default function Custom404() {
  return (
    <div>
      <h1>페이지를 찾을 수 없습니다.</h1>
      <Link href="/"><a>홈으로 돌아가기</a></Link>
    </div>
  );
}

라우팅 시 UI 처리를 통해 사용자 경험을 고려한 웹 애플리케이션을 제공함으로써 사용자의 만족도를 높이고 사이트 내에서의 이탈률을 줄일 수 있습니다. 각 시나리오별 최적의 UI 처리 방법을 적용하여 사용자에게 더 나은 웹 환경을 제공하세요.

로딩 UI 처리: 사용자 경험을 최우선으로

로딩 상태와 사용자 인식

웹 애플리케이션을 사용하며 누구나 로딩 시간을 기다린 경험이 있습니다. 로딩 상태는 필수적이지만 이를 사용자에게 어떻게 전달하느냐가 중요합니다. 적절한 로딩 인터페이스는 사용자의 불안을 줄이고 애플리케이션이 여전히 반응하고 있다는 인식을 심어줍니다.

loading.js 활용하기

Next.js의 loading.js는 로딩 상태를 관리하고 사용자에게 시각적 피드백을 제공하는 데 유용합니다. 특히, 로딩 스켈레톤은 사용자가 대기하는 동안 무엇을 기대할 수 있는지 미리 보여주어 경험을 부드럽게 연결해 줍니다.

로딩 스켈레톤 구현 예시

app/dashboard/loading.tsx
export default function Loading() {
  return (
    <div>로딩 중...</div>;
  );
}

위 예제는 간단한 로딩 UI를 구현한 코드입니다. 하지만 실제로는 로딩 스켈레톤을 활용하여 보다 직관적인 로딩 상태를 제공할 수 있습니다.

실습: 로딩 UI 구현 방법

로딩 스켈레톤을 구현할 때는 대상 컨텐츠의 레이아웃을 반영하는 더미 요소를 사용합니다. 이를 통해 사용자는 실제 데이터가 로드되기 전에 페이지의 대략적인 모습을 예상할 수 있습니다.

components/SkeletonCard.js
export const SkeletonCard = () => {
  return (
    <div className="animate-pulse space-y-4">
      <div className="h-32 bg-gray-300 rounded"></div>
      <div className="h-4 bg-gray-300 rounded w-3/4"></div>
      <div className="h-4 bg-gray-300 rounded"></div>
    </div>
  );
}

SkeletonCard 컴포넌트는 카드 형태의 컨텐츠가 로딩되는 동안 보여줄 스켈레톤 UI를 구현합니다. animate-pulse 클래스를 사용하여 펄스 애니메이션 효과를 추가함으로써 로딩 중임을 더욱 분명히 합니다.

Next.js에서 로딩 UI를 적절히 활용하면 사용자가 데이터 로딩 동안 기다리는 시간을 효과적으로 관리하고 좋은 사용자 경험을 제공할 수 있습니다. 로딩 상태를 시각적으로 표현하는 방법은 다양하므로 프로젝트의 목적과 대상 사용자에 맞는 최적의 방법을 선택하세요.

에러 처리 UI: 사용자에게 명확한 안내 제공하기

에러 발생 시 적절한 피드백의 중요성

웹 애플리케이션을 사용하는 동안 에러 발생은 불가피합니다. 중요한 것은 사용자에게 이러한 에러가 발생했음을 명확하게 알리고 가능한 해결책을 제시하는 것입니다. 적절한 에러 피드백은 사용자 불안을 최소화하고 사용자 경험을 개선하는 데 중요한 역할을 합니다.

error.js를 이용한 에러 바운더리 설정

Next.js에서는 error.js 파일을 사용해 애플리케이션 전반에 걸친 에러 바운더리를 설정할 수 있습니다. 이를 통해 에러가 발생했을 때 표시될 커스텀 에러 UI를 제공하며 애플리케이션의 나머지 부분은 정상적으로 작동하도록 합니다.

실습: 에러 처리 UI 구현 및 사용자 재시도 유도

에러 처리 UI를 구현하는 것은 사용자에게 문제가 발생했음을 알리고 이를 해결할 수 있는 방법을 제공하는 것을 목표로 합니다. 아래 예제는 간단한 에러 처리 UI의 구현 방법을 보여줍니다.

app/error-handling/error.tsx
'use client';
import Button from '@/ui/button';

export default function ErrorComponent({ error, reset }) {
  return (
    <div className="p-4 max-w-md mx-auto my-10 bg-red-100 border border-red-400 text-red-700">
      <h2 className="text-lg font-bold mb-2">오류 발생</h2>
      <p>{error?.message || "알 수 없는 오류가 발생했습니다."}</p>
      <Button onClick={reset} className="mt-4">
        다시 시도하기
      </Button>
    </div>
  );
}

이 컴포넌트는 에러가 발생했을 때 사용자에게 에러 메시지를 보여주고 '다시 시도하기' 버튼을 통해 문제 해결을 시도할 수 있도록 합니다. reset 함수를 호출함으로써 에러 상태에서 벗어나 다시 정상적인 애플리케이션 흐름으로 돌아갈 수 있게 돕습니다.

Next.js의 에러 처리 시스템을 효과적으로 활용하면 에러 상황에서도 사용자가 좌절하지 않고 해결책을 찾을 수 있도록 돕습니다. 에러 UI는 사용자에게 친절하고 이해하기 쉬운 방식으로 문제를 설명해야 하며 가능하다면 문제를 해결할 수 있는 방법을 제시해야 합니다.

페이지 미존재(404) UI 처리: 사용자 안내 강화하기

웹사이트에서 존재하지 않는 페이지를 요청하는 경우가 종종 있습니다. 사용자가 이러한 페이지에 도달했을 때 명확한 안내와 함께 다음 단계로 유도하는 것이 중요합니다. Next.js에서는 not-found.js 파일을 통해 존재하지 않는 페이지에 접근했을 때 표시될 UI를 커스터마이징할 수 있습니다. 이를 통해 사용자에게 현재 상황을 명확히 전달하고 사이트 내 다른 유용한 리소스로 안내할 수 있습니다.

404 페이지 커스터마이징 및 사용자 도움말 제공

커스텀 404 페이지는 사용자에게 사이트 내에서 도움을 받을 수 있는 방법을 제공함으로써 좋은 사용자 경험을 유지할 수 있습니다. 아래 예제는 간단한 404 페이지의 구현 방법을 보여줍니다.

// pages/404.js
import Link from 'next/link';

export default function Custom404() {
  return (
    <div className="max-w-xl mx-auto mt-20 text-center">
      <h1 className="text-4xl font-bold">페이지를 찾을 수 없습니다.</h1>
      <p className="mt-4">요청하신 페이지는 존재하지 않거나 이동되었습니다.</p>
      <Link href="/">
        <a className="mt-6 inline-block bg-blue-500 text-white py-2 px-4 rounded-lg">
          홈으로 돌아가기
        </a>
      </Link>
    </div>
  );
}

이 예제에서는 사용자가 존재하지 않는 페이지에 도달했을 때 '페이지를 찾을 수 없습니다.'라는 메시지와 함께 홈페이지로 돌아갈 수 있는 링크를 제공합니다. 이런 방식으로 사용자가 사이트 내 다른 콘텐츠로 쉽게 이동할 수 있도록 돕습니다.

전체 애플리케이션에 적용되는 미존재 URL 관리

Next.js에서 app/not-found.js 파일은 단순히 예상된 notFound() 함수에 의해 트리거된 오류 상황을 처리하는 것 이상의 역할을 합니다. 이 파일은 전체 애플리케이션에 걸쳐 처리되지 않은 모든 URL에 대한 요청을 관리합니다. 즉, 사용자가 애플리케이션에서 처리하는 경로와 일치하지 않는 URL로 사이트를 방문할 경우 app/not-found.js 파일에서 내보낸 UI가 표시됩니다.

이러한 방식은 개발자가 모든 미처리 경로에 대해 일관된 사용자 경험을 제공할 수 있게 해주며 사용자가 사이트 내에서 길을 잃었을 때 유용한 정보나 사이트 내 다른 페이지로의 안내를 제공할 수 있는 기회를 제공합니다. 예를 들어, 사용자에게 사이트 맵, 검색 기능, 홈페이지로의 링크 등을 포함하는 커스텀 404 페이지를 표시할 수 있습니다. 이는 사용자가 필요한 정보를 빠르게 찾을 수 있게 도와주고, 사용자의 사이트 내 경험을 개선하는 데 중요한 역할을 합니다.

실습: 404 페이지 구현과 미존재 페이지 안내

커스텀 404 페이지를 구현하는 것은 사용자에게 현재 상황을 알리고 사이트 내에서 도움을 받을 수 있는 방법을 제공하는 중요한 방법입니다. 404 페이지 디자인 시 명확하고 이해하기 쉬운 메시지를 사용하고 사용자가 다음 단계로 쉽게 이동할 수 있도록 유도해야 합니다.

Next.js에서 404 페이지를 커스터마이징하면 사용자가 사이트 내에서 길을 잃었을 때도 좋은 경험을 제공할 수 있습니다. 존재하지 않는 페이지를 요청한 사용자를 위한 명확한 안내와 유용한 리소스 제공을 통해 사이트의 전반적인 사용자 경험을 개선할 수 있습니다.

notFound() 함수 활용법

notFound() 함수란?

notFound() 함수는 Next.js에서 특정 경로에 해당하는 페이지가 존재하지 않을 때 사용자에게 적절한 '페이지를 찾을 수 없음' 화면을 보여주는 역할을 합니다. 이 함수를 사용하면 라우팅 과정에서 해당 페이지의 렌더링이 중지되고 검색 엔진이 페이지를 인덱싱하지 않도록 메타 태그를 자동으로 추가합니다. 이러한 기능은 사용자와 검색 엔진에게 명확한 신호를 전달하여 웹 애플리케이션의 사용성과 SEO를 개선합니다.

사용 예시

다음 예제는 사용자 ID에 기반한 프로필 페이지에서 사용자 정보를 가져오는 과정을 보여줍니다. 만약 해당 ID의 사용자 정보가 존재하지 않는 경우 notFound() 함수를 호출하여 페이지가 존재하지 않음을 알리고 더 이상의 렌더링을 중단합니다.

import { notFound } from 'next/navigation'

async function fetchUser(id) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}

export default async function Profile({ params }) {
  const user = await fetchUser(params.id)

  if (!user) {
    notFound()
  }

  // ...
}

참고사항: notFound() 함수는 반환값 없이 호출됩니다. TypeScript의 never 타입을 활용하여 함수가 호출되면 해당 라우트 세그먼트의 렌더링이 즉시 종료되기 때문입니다. 이러한 특성 덕분에 불필요한 반환문을 작성하지 않아도 됩니다.

라우팅 시 UI 처리의 중요성과 최적화 방향성

Next.js 애플리케이션에서 라우팅 시 사용자 인터페이스(UI) 처리는 사용자 경험(UX)을 결정짓는 핵심 요소입니다. 적절한 로딩 표시, 에러 메시지, 404 페이지 처리는 사용자가 사이트를 이용하는 동안 발생할 수 있는 혼란과 불편함을 최소화합니다. 이러한 UI 처리는 사용자가 웹사이트를 원활하게 탐색하도록 돕고 문제 상황에서도 긍정적인 사용자 경험을 유지하게 만듭니다.

Next.js 프로젝트에서 라우팅 UI 처리를 최적화하기 위한 몇 가지 방향성을 제시합니다.

  1. 로딩 상태 명확히 표시: 사용자가 새로운 페이지로 이동할 때 발생하는 로딩 시간 동안 명확한 피드백을 제공합니다. 로딩 스켈레톤 또는 진행 표시기와 같은 시각적 요소를 사용하여 페이지 로드가 진행 중임을 사용자에게 알립니다.
// 로딩 스켈레톤 컴포넌트 예시
function LoadingSkeleton() {
  return <div className="loading-skeleton">로딩 중...</div>;
}
  1. 에러 처리와 피드백 제공: 에러 발생 시, 사용자에게 이를 알리고 적절한 조치를 취할 수 있도록 안내합니다. 에러 메시지를 통해 문제를 설명하고 가능하다면 해결 방안을 제안합니다.
// 에러 메시지 컴포넌트 예시
function ErrorMessage({ message }) {
  return <div className="error-message">에러: {message}</div>;
}
  1. 커스텀 404 페이지 제공: 존재하지 않는 페이지에 대한 요청을 처리할 때는 사용자에게 도움이 될 수 있는 정보와 함께 404 페이지를 제공합니다. 홈페이지로 돌아갈 수 있는 링크 또는 사이트 내 다른 유용한 자원으로의 안내를 포함합니다.
// 커스텀 404 페이지 예시
import Link from 'next/link';

export default function Custom404() {
  return (
    <div>
      <h1>페이지를 찾을 수 없습니다.</h1>
      <Link href="/">홈으로 돌아가기</Link>
    </div>
  );
}

Next.js에서 제공하는 다양한 라우팅 및 페이지 전환 기능을 활용하여 이러한 UI 처리를 구현할 수 있습니다. 이를 통해 사용자의 웹사이트 탐색 경험을 개선하고 프로젝트의 전반적인 사용성을 향상시킬 수 있습니다. 최적의 사용자 경험을 제공하기 위해 각 시나리오별 적절한 UI 처리 방법을 고려하고 이를 프로젝트에 적용해보세요.