응답하라1995

프로젝트 개요

응답하라1995는 동아리 박람회 참여자를 대상으로 성향 테스트, 동아리 매칭, 이벤트 참여 기능을 제공한 실제 운영 서비스입니다.

2025년 박람회에서는 로컬 노트북 한 대로 서비스를 운영했습니다. 약 300명이 사용했지만 단일 기기 의존, 데이터 휘발, 실시간 모니터링 불가라는 한계가 있었습니다. 2026년에는 이 경험을 바탕으로 Supabase와 Vercel 기반의 클라우드 운영 구조로 전환했습니다.

문제 정의

박람회 서비스는 짧은 시간 동안 많은 사용자가 동시에 접속하는 환경에서 운영됩니다. 단순히 화면을 구현하는 것만으로는 충분하지 않았고, 이벤트 응모, 재화 차감, 당첨자 선정처럼 데이터 정합성이 중요한 흐름을 안정적으로 처리해야 했습니다.

특히 여러 사용자가 동시에 이벤트에 응모할 경우 재화가 중복 차감되거나 당첨자가 초과 선정될 수 있었습니다. 처음에는 프론트엔드에서 중복 클릭과 중복 요청을 막는 방식으로 접근했지만, 클라이언트만으로는 동시성 문제를 근본적으로 해결할 수 없다고 판단했습니다.

담당 역할

사용자 화면 구현, 상태 관리 구조 정리, Supabase 기반 운영 흐름 설계에 참여했습니다.

React와 TypeScript로 사용자 화면을 구현하고, TanStack Query와 Zustand를 사용해 서버 상태와 클라이언트 상태의 책임을 나누었습니다. 또한 이벤트 응모처럼 데이터 무결성이 중요한 흐름에서는 프론트엔드 처리만으로 해결할 수 없는 지점을 확인하고, PostgreSQL 트랜잭션과 Supabase 보안 정책을 함께 고려해 구조를 정리했습니다.

주요 구현

• React와 TypeScript 기반 사용자 화면 구현
• TanStack Query를 활용한 서버 상태 관리
• Zustand를 활용한 클라이언트 상태 관리
• Supabase 기반 데이터 조회 및 이벤트 참여 흐름 연동
• PostgreSQL FOR UPDATE 기반 Row Lock 트랜잭션으로 이벤트 응모 동시성 제어
• RLS 정책과 SECURITY DEFINER 함수를 활용한 민감한 비즈니스 로직 보호
• Vercel과 Supabase를 활용한 클라우드 기반 운영 구조 전환
• 실시간 운영 지표를 확인할 수 있는 데이터 흐름 구성

기술적 판단

이벤트 응모와 재화 차감은 클라이언트에서 버튼을 비활성화하거나 요청을 한 번만 보내는 방식으로 완전히 보장할 수 없었습니다. 사용자는 여러 탭, 느린 네트워크, 새로고침, 재요청 같은 상황을 만들 수 있고, 클라이언트 상태는 신뢰할 수 있는 최종 방어선이 아니기 때문입니다.

따라서 정합성이 중요한 로직은 데이터베이스 계층에서 처리하는 방향이 적절하다고 판단했습니다. PostgreSQL의 FOR UPDATE를 활용해 같은 행을 동시에 수정하려는 요청을 순서대로 처리했고, RLS와 SECURITY DEFINER 함수를 통해 클라이언트가 민감한 로직을 직접 우회하지 못하도록 구성했습니다.

프론트엔드는 사용자가 현재 상태를 명확히 이해할 수 있도록 돕고, 데이터 무결성은 데이터베이스 계층에서 보장하도록 역할을 분리했습니다.

결과 및 회고

박람회 당일 방문자 수는 572명을 기록했습니다. 전년 약 300명 대비 약 91% 증가한 수치였고, 성향 테스트 참여율은 95%를 달성했습니다.

이 프로젝트를 통해 프론트엔드 개발자가 클라이언트 코드만 잘 작성하는 것을 넘어, 서버 요청과 데이터베이스 트랜잭션, 보안 정책의 흐름을 이해해야 실제 운영 환경에서 안정적인 서비스를 만들 수 있다는 것을 배웠습니다.

또한 실제 사용자가 몰리는 환경에서는 UI 상태와 데이터 정합성을 구분해 설계하는 것이 중요하다는 점을 경험했습니다.