ENCORE PARTY — 프리미엄 소셜 파티 매칭 서비스 개발 회고

안녕하세요, 한국의 개발 외주 전문 기업 영프로(YoungPro)에서 시니어 개발자로 일하고 있는 OOO입니다. 오늘은 최근 저희 팀이 성공적으로 마무리한 'ENCORE PARTY' 프로젝트의 개발기를 공유하고자 합니다. ENCORE PARTY는 사용자들에게 특별한 소셜 파티 경험을 제공하는 프리미엄 매칭 서비스로, 기획 단계부터 기술적인 도전과 흥미로운 요소들이 가득했습니다.

이 프로젝트는 사용자 및 관리자 페이지를 포함해 총 34개의 페이지(사용자 16개, 관리자 18개), 약 45개의 재사용 가능한 컴포넌트, 그리고 핵심 로직을 담당하는 5개의 API로 구성된 규모 있는 웹 애플리케이션입니다. 관리자 승인제 파티 운영, 실시간 신청자 관리, 결제 연동, SSR 파티 상세 페이지, 후기 시스템, 쿠폰 및 프로모션, 히어로 슬라이드, 숏클립 등 다양한 핵심 기능들을 구현했습니다. 관리자 시스템에서는 파티, 신청서, 주문, 후기, 사용자, 설문조사, 템플릿, 슬라이드, 배너, 클립, 메인 섹션, 쿠폰 등 총 12가지 항목을 효율적으로 관리할 수 있도록 설계했습니다. 디자인은 Toss 스타일의 깔끔하고 모던한 B&W 테마를 채택하여 프리미엄 서비스의 이미지를 한층 강화했습니다.

기술 스택 선택과 이유

ENCORE PARTY는 사용자에게 최상의 경험을 제공하고, 관리자에게는 효율적인 운영 환경을 보장하기 위해 최신 웹 개발 기술 스택을 적극적으로 활용했습니다. 저희 영프로는 **웹 개발** 트렌드를 선도하며 고객의 요구사항에 가장 적합한 기술을 제안합니다.

• Next.js 16 (App Router) + TypeScript 풀스택: 빠르고 안정적인 서비스 제공을 위해 Next.js의 SSR(Server-Side Rendering) 및 SSG(Static Site Generation) 기능을 활용했습니다. 특히 App Router는 최신 웹 개발 패러다임을 반영하여 서버 컴포넌트와 서버 액션을 통해 백엔드 로직까지 통합하는 **풀스택** 개발 환경을 구축할 수 있게 해주었습니다. TypeScript는 견고한 코드베이스와 개발 생산성을 보장하는 필수적인 선택이었습니다.
• Firebase (Auth, Firestore, Storage) + Firebase Admin SDK: 백엔드 인프라 구축 시간을 단축하고 안정적인 서비스를 제공하기 위해 Firebase를 선택했습니다. 사용자 인증(Auth), 실시간 데이터베이스(Firestore), 파일 저장(Storage) 기능을 활용했으며, 특히 Firebase Admin SDK를 통해 서버 환경에서 안전하게 Firebase 리소스에 접근하고 관리자 기능을 구현했습니다.
• PortOne V2 결제 (@portone/browser-sdk): 국내 PG사 연동의 복잡성을 줄이고 안정적인 결제 시스템을 구축하기 위해 PortOne V2를 도입했습니다. 클라이언트 측 SDK를 활용하여 사용자 결제를 처리하고, 서버 측에서는 PortOne의 webhook과 승인/취소 API를 연동하여 결제 상태를 관리했습니다. **결제 연동**은 이 프로젝트의 핵심이자 가장 중요한 기능 중 하나였습니다.
• 카카오 로그인/메시지 API: 국내 사용자들에게 익숙한 카카오 로그인을 통해 편리한 가입 및 로그인 경험을 제공하고, 파티 관련 알림을 카카오 메시지로 발송하여 사용자 편의성을 높였습니다.
• sharp + WebP 이미지 최적화: 파티 상세 페이지와 같이 이미지가 많은 서비스의 로딩 속도를 개선하기 위해, 사용자 업로드 이미지를 서버에서 sharp 라이브러리를 이용해 WebP 형식으로 변환하고, 용도별(썸네일, 원본 등) 다양한 사이즈로 자동 생성하여 Firebase Storage에 저장했습니다.
• Tiptap 리치 텍스트 에디터: 파티 상세 설명이나 공지사항 등 풍부한 콘텐츠 작성을 위해 Tiptap 에디터를 도입했습니다. 유연한 커스터마이징이 가능하여 요구사항에 맞춰 최적화된 에디터 환경을 제공했습니다.
• Framer Motion 애니메이션: 사용자 인터페이스에 동적이고 부드러운 애니메이션을 적용하여 서비스의 프리미엄 이미지를 강화하고 사용자 경험을 향상시켰습니다.

핵심 구현 상세

결제 시스템 연동과 파티 신청 플로우

ENCORE PARTY의 핵심 기능 중 하나는 바로 결제와 연동된 파티 신청 플로우입니다. 저희는 다음과 같은 신청 상태 전환(pending_payment → pending → approved/rejected/cancelled)을 구현했습니다.

• pending_payment: 사용자가 파티 신청 후 결제를 시작하면, 우선 신청서 상태가 pending_payment로 전환됩니다.
• pending: PortOne SDK를 통해 결제가 성공적으로 완료되면, 서버에서 PortOne webhook을 수신하고 결제 정보를 검증합니다. 검증이 완료되면 신청서 상태를 pending으로 변경하여 관리자의 승인을 기다리게 합니다.
• approved/rejected/cancelled: 관리자는 신청서를 검토하여 approved(승인), rejected(거절) 또는 cancelled(취소) 상태로 변경할 수 있습니다. 거절 또는 취소 시에는 PortOne 결제 취소 API를 호출하여 사용자에게 환불을 진행합니다.

결제 연동은 단순히 돈을 주고받는 것을 넘어, 다양한 예외 상황(네트워크 오류, 결제 실패, 환불 등)을 고려한 견고한 로직 설계가 필수적입니다. 저희는 Firebase Admin SDK를 활용하여 서버 측에서 결제 검증 및 취소 로직을 안전하게 처리하고, 데이터 무결성을 유지하기 위해 Firestore 트랜잭션을 적극 활용했습니다.

SSR 파티 상세 페이지 구현

프리미엄 파티 매칭 서비스의 특성상, 각 파티의 상세 페이지는 검색 엔진 최적화(SEO)와 빠른 초기 로딩 속도가 매우 중요했습니다. 이를 위해 Next.js 16의 App Router를 활용하여 SSR(Server-Side Rendering) 방식으로 파티 상세 페이지를 구현했습니다.

• 사용자가 특정 파티 URL에 접근하면, Next.js 서버에서 해당 파티의 고유 ID를 기반으로 Firebase Firestore에서 파티 데이터를 실시간으로 가져옵니다.
• 가져온 데이터를 바탕으로 HTML을 미리 렌더링하여 클라이언트에 전송합니다. 이 방식은 검색 엔진 크롤러가 콘텐츠를 쉽게 인식하게 하여 SEO에 유리하며, 사용자는 완전한 내용의 페이지를 빠르게 볼 수 있습니다.
• Tiptap 에디터로 작성된 풍부한 파티 템플릿 콘텐츠도 SSR을 통해 효과적으로 렌더링되어 사용자에게 전달됩니다.

효율적인 이미지 최적화

ENCORE PARTY는 파티를 시각적으로 매력 있게 보여주는 것이 중요하므로, 이미지의 품질과 로딩 속도 모두 중요했습니다. 저희는 sharp 라이브러리를 활용한 서버 측 이미지 최적화 파이프라인을 구축했습니다.

• 사용자가 이미지를 업로드하면, Next.js의 API Route 또는 Firebase Function에서 sharp 라이브러리를 호출합니다.
• sharp는 원본 이미지를 받아 WebP 형식으로 변환하고, 썸네일, 중형, 대형 등 여러 용도에 맞는 다양한 크기의 이미지를 자동으로 생성합니다.
• 최적화된 이미지들은 Firebase Storage에 저장되고, 각 이미지의 URL은 Firestore에 기록되어 필요한 곳에 적절하게 사용됩니다.

이러한 과정을 통해 이미지 로딩 속도를 획기적으로 개선하고, 사용자 데이터 사용량을 줄이며, 전반적인 서비스 성능을 향상시킬 수 있었습니다.

마주했던 챌린지와 해결 과정

모든 프로젝트가 그렇듯, ENCORE PARTY 개발 과정에서도 몇 가지 챌린지가 있었습니다.

• 복잡한 상태 관리와 동시성 문제: 파티 신청 및 결제 플로우는 pending_payment, pending, approved 등 여러 상태를 가지며, 이 상태들이 동시다발적으로 변경될 수 있어 데이터 불일치 문제가 발생할 수 있었습니다. 저희는 Firestore의 트랜잭션 기능을 적극 활용하여 여러 문서에 걸친 업데이트를 원자적으로 처리하고, Server Actions를 통해 서버에서 안전하게 상태를 관리하여 데이터의 일관성을 유지했습니다.
• Next.js App Router의 학습 곡선: 기존 Pages Router 방식에 익숙했던 팀원들에게 App Router의 Server Components, Server Actions, Layouts 등 새로운 패러다임은 초기 학습 곡선이 높았습니다. 하지만 공식 문서를 숙지하고 실제 프로젝트에 적용하며 팀원들과 활발히 지식을 공유함으로써 빠르게 적응하고 새로운 아키텍처의 장점을 최대한 활용할 수 있었습니다.
• Firebase 보안 규칙의 세밀한 설정: 사용자 데이터와 결제 정보 등 민감한 데이터가 포함되어 있어 Firebase 보안 규칙을 세밀하게 설정하는 것이 중요했습니다. 인증된 사용자만 접근 가능하도록 하고, 각 데이터 컬렉션별로 읽기/쓰기 권한을 엄격하게 제한하여 데이터 유출 및 변조 위험을 최소화했습니다.

프로젝트를 마치며

ENCORE PARTY 프로젝트는 저희 영프로에게 또 한 번의 성공적인 **개발 외주** 사례로 남을 것입니다. Next.js 16과 Firebase를 활용한 **풀스택** 아키텍처는 빠르고 효율적인 개발을 가능하게 했으며, 특히 PortOne **결제 연동**과 이미지 최적화는 서비스의 핵심 경쟁력을 높이는 데 크게 기여했습니다.

이번 프로젝트를 통해 Next.js App Router의 강력함과 Firebase의 유연성을 다시 한번 확인할 수 있었습니다. 물론 새로운 기술을 도입하는 과정에서 시행착오도 있었지만, 팀원들과의 긴밀한 협업과 끊임없는 학습을 통해 모든 챌린지를 성공적으로 극복할 수 있었습니다.

저희 영프로는 고객의 비전을 현실로 만드는 데 필요한 모든 기술력과 노하우를 갖추고 있습니다. 복잡한 시스템 통합부터 사용자 경험을 극대화하는 UI/UX 구현까지, 어떤 프로젝트든 최고의 결과로 보답하겠습니다. ENCORE PARTY와 같이 기술적인 깊이와 사용자 경험 모두를 만족시키는 **웹 개발** 프로젝트를 찾고 계시다면 언제든지 영프로에 문의해주세요. 감사합니다.