만권당 - 전자책 플랫폼

프로젝트 개요

알라딘커뮤니케이션의 전자책 플랫폼 만권당의 웹 서비스 및 백오피스를 개발하고 있습니다. Next.js 14 App Router와 React Query를 활용하여 현대적인 프론트엔드 아키텍처를 구축했으며, 사용자 경험 개선과 성능 최적화에 집중하고 있습니다.

현재 진행중인 프로젝트로, 구독 관리, 쿠폰 시스템, 이벤트 페이지 등 비즈니스 핵심 기능을 개발하고 있으며, 크로스플랫폼 모바일 웹 최적화를 통해 다양한 디바이스에서 최적의 사용자 경험을 제공하고 있습니다.

기술적 도전과 해결

1. 이미지 로딩 성능 개선

문제: 메인 페이지에 다수의 전자책 표지 이미지가 동시에 로딩되어 초기 로딩 시간이 길어지는 문제가 있었습니다. 수십 개의 이미지가 한 번에 요청되면서 네트워크 병목이 발생했습니다.

해결: Intersection Observer API를 활용한 lazy loading을 구현했습니다. 사용자의 뷰포트에 진입하는 이미지만 로드하도록 최적화하여 초기 리소스 요청을 최소화했습니다.

성과:

• 리소스 요청량 22.6% 감소
• 초기 로드 속도 87.5% 개선
• 사용자의 체감 성능 향상

2. Next.js 14 App Router 뒤로가기 동작 개선

문제: 새 탭에서 URL을 직접 입력하여 접근한 후 뒤로가기 버튼을 누르면 브라우저 히스토리가 없어 빈 화면이 나타나는 문제가 있었습니다.

해결: Next.js 14 App Router에서는 router.events를 지원하지 않아 SessionStorage를 활용한 진입 경로 추적 시스템을 구현했습니다. 사용자의 진입 경로를 분석하여 적절한 페이지로 리다이렉션하도록 개선했습니다.

성과: 사용자가 어떤 경로로 접근하더라도 자연스러운 뒤로가기 경험을 제공하게 되었습니다.

블로그 포스트에서 자세한 구현 내용을 공유했습니다.

3. Layout Shift 이슈 대응

모달 스크롤바 문제: 모달 오픈 시 스크롤바가 사라지면서 화면이 떨리는 현상이 발생했습니다. 스크롤바 width만큼 padding-right를 추가하여 레이아웃이 유지되도록 해결했습니다.

이미지 로딩 문제: 이미지 로딩 전에 영역이 확보되지 않아 콘텐츠가 밀리는 현상이 있었습니다. 스켈레톤 UI를 도입하여 이미지 영역을 미리 확보하고 사용자에게 로딩 상태를 명확히 표시했습니다.

성과: 시각적 안정성이 크게 향상되어 사용자 경험이 개선되었습니다.

블로그 포스트에서 Layout Shift 해결 과정을 공유했습니다.

4. 백오피스 폼 검증 시스템 구축

문제: 백오피스에서 다양한 폼을 관리해야 하는데, 런타임 에러가 자주 발생하고 검증 로직이 중복되어 유지보수가 어려웠습니다.

해결: React Hook Form과 Zod를 결합한 타입 안전 폼 검증 시스템을 도입했습니다. 스키마 기반 검증으로 타입 안전성을 확보하고, 재사용 가능한 검증 로직을 구축했습니다.

성과:

• 런타임 에러 감소
• 폼 검증 로직의 일관성 확보
• 개발 생산성 향상

5. URL 쿼리스트링 타입 안전성 확보

문제: 백오피스에서 검색 필터, 페이지네이션 등 다양한 쿼리 파라미터를 관리해야 하는데, 타입 안전성이 보장되지 않아 예상치 못한 오류가 발생했습니다.

해결: nuqs 라이브러리를 도입하여 URL 쿼리스트링을 타입 안전하게 관리할 수 있게 했습니다. 쿼리 파라미터의 타입을 명확히 정의하고, 잘못된 값에 대한 검증을 자동화했습니다.

성과: 쿼리 파라미터 관련 오류가 사전에 방지되고, 코드의 유지보수성이 향상되었습니다.

6. 크로스플랫폼 모바일 웹 최적화

Pull to Refresh: 모바일 브라우저의 새로고침 제스처를 제어하여 의도하지 않은 페이지 새로고침을 방지했습니다.

모바일 키보드 대응: iOS와 Android의 키보드 동작 차이를 고려하여 입력 필드와 버튼의 위치를 동적으로 조정했습니다.

모달 스크롤 처리: 모바일에서 모달 오픈 시 배경 스크롤을 방지하고, 모달 내부 스크롤만 허용하도록 구현했습니다.

성과: iOS와 Android 모두에서 일관된 사용자 경험을 제공하게 되었습니다.

7. 백오피스 개선

엑셀 다운로드 안정성: 중복된 다운로드 로직을 공통 모듈로 리팩토링하여 유지보수성을 향상시켰습니다.

반응형 UI: 데스크톱과 태블릿 환경에서 모두 사용 가능한 반응형 인터페이스를 구축했습니다.

성과

• 이미지 lazy loading으로 초기 로드 속도 87.5% 개선, 리소스 요청량 22.6% 감소
• Next.js 14 App Router의 뒤로가기 동작 개선으로 사용자 경험 향상
• Layout Shift 이슈 해결로 시각적 안정성 확보
• React Hook Form + Zod 기반 타입 안전 폼 검증으로 런타임 에러 감소
• nuqs 도입으로 URL 쿼리스트링 타입 안전성 확보
• Pull to refresh, 모바일 키보드 대응 등 크로스플랫폼 모바일 웹 최적화
• 엑셀 다운로드, 반응형 UI 등 백오피스 개선으로 운영 효율성 향상
• 블로그를 통한 기술 공유 및 문제 해결 과정 문서화