[Next.js - loading.tsx] 로딩도 보여야 예쁘게 만들죠?

Next.js에서는 `loading.tsx` 파일을 만들어 페이지의 로딩 상태를 사용자에게 보여줄 수 있습니다.

이 로딩 화면은 현재 페이지가 데이터를 불러오고 있다는 사실을 사용자에게 알려주는 중요한 역할을 합니다.
(오류가 아니고, 데이터를 불러오는 중이니 조금만 기다려달라는 부탁일겁니다. 개인적으로는 예쁘다고도 생각해요.)

대부분의 경우, 로딩 화면은 아주 잠깐만 보여지는 것이 이상적입니다.  
페이지 전환이나 데이터 호출이 빠르면 빠를수록 사용자 경험은 좋아지니까요.

그런데 로딩 화면이 너무 빨리 사라지면, 정작 개발자는 그 화면을 제대로 볼 수가 없습니다.

(그치만 로딩 화면을 개발중이란 말이에요.)

자 그렇다면 '로딩 화면을 오래 보고 싶다는 이상한 욕심' 을 부려야 할 때,어떻게 하면 좋을까? 에 대해 적어봤습니다.

---

🌀 문제

로딩 화면은 진짜 로딩이 일어날 때만 아주 잠깐 보여지기 때문에, 개발자는 그 화면을 직접 보며 개발하기 어렵다는 단점이 있습니다.

 

🛠 해결 방법

이럴 땐, 페이지에서 일부러 로딩을 지연시켜주는 코드를 넣어 개발 환경에서 로딩 화면을 오래 보도록 할 수 있습니다.

app/page.tsx나 특정 라우트의 page.tsx에 다음 코드를 추가하면 됩니다.

// page.tsx

async function wait(ms: number) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

export default async function Page() {
  await wait(3000); // 3초 동안 로딩 화면이 보입니다
  return <div>완료된 페이지!</div>;
}

 

✅ 결과

위 코드를 넣은 덕분에, 화면을 보면서 개발한 loading.tsx 입니다.

 

⚠️ 주의

• 개발 후에는 위의 wait() 코드를 꼭 제거해 주셔야 합니다. (로딩 지연 코드가 실제로 배포되면 대형사고에요...)

 

💡 팁

• loading.tsx는 route segment 단위로 작동합니다. 예를 들어 app/products/loading.tsx는 products 라우트에만 적용됩니다.

---

 

"개발자의 사소한 집착이 더 좋은 사용성을 만듭니다."

로딩 화면은 짧게 스쳐 지나가는 UI지만, 그 잠깐의 순간도 사용자에겐 서비스의 일부로 느껴집니다.
잠시 머무는 이 화면에도 사용자를 고려하는 정성을 담아보면, 분명 더 친절하고 좋은 UX가 만들어질 거예요.