현재 제 포트폴리오 프로젝트는 Next.js와 Supabase를 기반으로 구축되어 있으며, Vercel을 통해 배포 및 관리되고 있습니다.
그동안 Lighthouse 점수 개선, SEO 최적화, 이미지 최적화 등 프론트엔드 개발자로서 할 수 있는 다양한 최적화 작업을 진행해 왔습니다. 그 결과 성능 97, 접근성 85, SEO 100이라는 준수한 지표를 얻을 수 있었습니다.
하지만 지표와는 별개로, 실제 페이지 진입 시 질문 데이터를 불러오는 과정에서 이해하기 힘들 정도의 로딩 지연이 발생했습니다. 이번 글에서는 코드 레벨을 넘어 인프라 설정(Region)을 통해 이 문제를 해결한 과정을 공유합니다.
왜 성능 지표는 좋은데 체감 속도는 느렸는가?
Lighthouse는 정적 리소스 로딩과 초기 렌더링 성능을 주로 측정하지만, 실제 사용자가 느끼는 데이터 로딩 속도는 서버 간의 물리적 거리에도 큰 영향을 받습니다. 제가 직면했던 병목 현상은 크게 두 가지였습니다.
- 미들웨어의 비효율성: 초기 진입 시 불필요한 다중 리다이렉트 발생
- 네트워크 레이턴시(Latency): 데이터가 지구 한 바퀴를 돌아오는 비효율적인 경로
이를 해결하기 위해 단계별로 점검을 시작했습니다.
1. 코드 레벨의 최적화 Middleware 점검
가장 먼저 의심했던 부분은 middleware.ts였습니다. 분석 결과, 미들웨어 중복 선언으로 인한 충돌과 불필요한 조건부 리다이렉트가 초기 로딩 시 흰 화면을 길게 노출시키는 원인이었습니다.
- 해결: 리다이렉트 로직을 단일화하고 미들웨어 실행 조건을 최적화하여 1차적인 진입 속도를 개선했습니다.
- 관련 이슈: Issue #16 - 사이트 첫 접속 시 로딩 지연 문제
Fix: middleware.ts 리다이렉트 개선 (#16) by umsungjun · Pull Request #17 · umsungjun/new_portfolio_next
middleware 중복 선언 제거 및 단일 함수로 통합 불필요한 다중 리다이렉트 제거 모든 경로에서 next-intl로 감싸서 응답 되도록 처리 Summary by CodeRabbit Refactor Enhanced locale detection and routing logic for root pa
github.com
2. 인프라 레벨의 최적화:Vercel Region 설정 변경
미들웨어 최적화 이후에도 질문 데이터 로딩의 근본적인 답답함은 사라지지 않았습니다. 실무 바깥에서 Next.js 경험을 쌓기 위해 강의를 수강하던 중, Vercel 최적화 세션에서 Region 설정에 대한 내용을 듣고 아차 싶은 생각이 들었습니다. 확인 결과, 제 프로젝트의 인프라 구성은 다음과 같았습니다.
| 서비스 | 설정된 Region | 물리적 위치 |
| 사용자 | - | 대한민국 (KR) |
| Supabase (DB) | Northeast Asia (Seoul) | 대한민국 (Seoul) |
| Vercel (Server) | Washington, USA (sfo1) | 미국 서부 (San Francisco) |
데이터가 [사용자(KR) → Vercel 서버(US) → Supabase(KR) → Vercel 서버(US) → 사용자(KR)] 순으로 이동하며, 단순히 질문 목록 하나를 가져오는데 태평양을 두 번 건너고 있었던 것입니다.
이 문제를 해결하기 위해 Vercel 설정의 Functions -> Region 메뉴에서 기본값이었던 미국 Region을 Seoul, South Korea (icn1)로 변경하고 재배포를 진행했습니다.
해결 및 느낀 점
단순히 Vercel 설정만 바꾼다고 모든 것이 해결되는 것은 아니었습니다. 이번 트러블슈팅의 핵심은 인프라 간 Region 일치 였습니다.
다행히 제 Supabase 프로젝트는 처음부터 Seoul Region으로 생성되어 있었습니다. 만약 데이터베이스는 미국에 있는데 Vercel만 한국으로 옮겼다면, DB 호출 시마다 여전히 태평양을 건너야 하므로 성능 개선 효과는 미비했을 것입니다.
서버리스 함수(Vercel)와 데이터베이스(Supabase)를 물리적으로 가까운 곳에 위치시키는 것이 이번 최적화의 핵심이었습니다.
인프라 설정을 수정한 후, 단 한 줄의 코드 수정 없이도 API 응답 속도(TTFB)가 눈에 띄게 줄어들어 질문 목록을 불러올 때의 답답함이 완전히 사라지는 극적인 변화를 확인했습니다.
그동안 성능 문제가 생기면 습관적으로 코드 내부에서만 원인을 찾고 로직을 개선하려 노력했습니다. 하지만 이번 일을 통해 인프라 단의 설정 또한 성능에 결정적인 영향을 미친다는 점을 다시금 복기하게 되었습니다.
https://next-umsungjun.vercel.app/
프론트엔드 개발자 엄성준 Next 포트폴리오
꾸준함이 강점이자 자랑인 프론트엔드 개발자 엄성준 Next 포트폴리오입니다.
next-umsungjun.vercel.app
'지식 정리 📝' 카테고리의 다른 글
| WiniLogis Webpack에서 Vite로 마이그레이션 (2) | 2026.02.10 |
|---|---|
| Keycloakify를 활용한 React 기반 Keycloak 테마 개발 및 다국어 처리 (2) | 2026.02.09 |
| Autowini 프론트엔드 분리 프로젝트 CI/CD 파이프라인 구축 (Bitbucket 기반) 2 (0) | 2026.01.19 |
| 필터 변경 시 메뉴가 접히던 문제, TanStack Query placeholderData로 해결 (2) | 2026.01.15 |
| React SPA에서 메타 태그 중복 문제, 라이브러리 제작으로 해결하기 (feat. react-head-safe) (0) | 2026.01.09 |