코로나 팬데믹으로 오프라인 대면 업무가 어려워진 상황에서, KT DS는 원격으로 대리점을 생성하고 관리할 수 있는 신규 웹 서비스를 기획했습니다. 저는 이 프로젝트의 프론트엔드 개발을 리드하며, Next.js를 기반으로 빠르고 효율적이며 확장 가능한 서비스를 구축하는 역할을 맡았습니다.
Next.js, 최적의 렌더링 전략
이 서비스는 대리점 관리자들을 위한 내부 어드민 페이지와, 외부 고객들에게 노출되는 마케팅 페이지라는 두 가지 성격을 동시에 가지고 있었습니다. 각 페이지의 특성에 맞는 최적의 사용자 경험을 제공하기 위해 Next.js의 렌더링 전략을 깊이 있게 고민하고 적용했습니다.
- SSG (Static Site Generation): 자주 바뀌지 않는 소개 페이지나 약관 등은 빌드 시점에 정적 HTML로 생성했습니다. 이를 통해 CDN 캐싱 효과를 극대화하고, 사용자에게 매우 빠른 로딩 속도를 제공할 수 있었습니다.
- SSR (Server-Side Rendering): 대리점 목록이나 실시간 현황 데이터처럼 항상 최신 정보가 필요한 페이지는 서버 사이드 렌더링을 적용했습니다. 이는 검색 엔진 최적화(SEO) 효과를 유지하면서도, 사용자에게는 항상 최신 데이터를 보여줄 수 있는 최적의 절충안이었습니다.
이처럼 페이지의 성격에 따라 렌더링 전략을 다르게 가져가는 접근은, 서버 리소스를 효율적으로 사용하면서도 사용자 경험을 극대화하는 핵심적인 역할을 했습니다.
대용량 파일 업로드, 서버 부담 없이 해결하기
서비스의 핵심 기능 중 하나는 대리점 계약과 관련된 각종 서류(이미지, PDF 등)를 업로드하는 것이었습니다. 사용자가 업로드하는 파일을 우리 서버가 직접 받아서 S3 같은 스토리지에 전달하는 방식은, 서버에 큰 부하를 주고 트래픽 비용을 증가시키는 비효율적인 구조였습니다.
저는 이 문제를 해결하기 위해 S3의 Presigned URL을 활용하는 아키텍처를 설계하고 구현했습니다.
- 인증된 사용자가 파일을 업로드하면, 브라우저는 Next.js의 보호된 API Route에 파일 정보를 보내 업로드 권한을 요청합니다.
- 서버(API Route)는 사용자의 권한을 확인한 후, AWS SDK를 통해 **일회성 허가권(Presigned URL)**을 S3로부터 발급받아 브라우저에 전달합니다.
- 브라우저는 이 Presigned URL을 이용해 서버를 거치지 않고 S3에 파일을 직접 업로드합니다.
이 방식을 통해 서버는 실제 파일 데이터를 전혀 전달받지 않게 되어, 서버의 부하와 네트워크 비용을 획기적으로 줄일 수 있었습니다. 또한, Presigned URL은 제한된 시간 동안만 유효하므로 보안적으로도 안전한 파일 업로드 환경을 구축할 수 있었습니다.
재사용성을 극대화한 컴포넌트와 훅
프로젝트 초기부터 재사용성을 염두에 두고 개발을 진행했습니다. 로그인, 애니메이션, 파일 관리 등 핵심 기능들을 각각의 독립적인 컴포넌트와 커스텀 훅으로 분리하여 개발했습니다. 이러한 모듈화는 코드의 유지보수성을 높였을 뿐만 아니라, 프로젝트가 확장될 때 새로운 기능을 더 빠르고 안정적으로 추가할 수 있는 튼튼한 기반이 되었습니다.