프로젝트 기획, 웹 개발과, 백엔드 인프라 세팅 및 프론드엔드 제작등, 전반적인 웹 개발
PMWeb DevelopmentOAuthDB
웹출시
BaekJoon Memorial
알고리즘 문화의 한 시대를 기록한 메모리얼 웹
알고리즘 커뮤니티의 한 시대를 기록한 참여형 메모리얼 웹
1 / 3
백준 온라인 저지 종료 이슈가 커뮤니티에 퍼진 직후, 사용자들이 알고리즘 문화의 한 시대에 마지막 기록과 메시지를 남길 수 있도록 약 10시간 만에 개발·배포한 참여형 메모리얼 웹. 추모의 순간은 짧게 지나가기 때문에, 완성도를 다듬기보다 '지금 바로 남길 수 있는 공간'을 빠르게 여는 것을 최우선으로 한 프로젝트. 배포 직후 여러 알고리즘·PS 커뮤니티를 통해 빠르게 확산돼 30시간 만에 100명이 넘는 사용자가 참여했고, 관련 매체에도 소개된 결과. 초고속 실행력과 커뮤니티 타이밍의 힘을 직접 증명한 사례.
Problem
오랜 기간 알고리즘 학습자들이 공유해 온 백준이라는 공간이 사라질 수 있다는 소식이 퍼졌지만, 그 시대의 기억과 감정을 함께 남길 수 있는 장소가 어디에도 없던 상황. 추모의 정서는 이슈가 뜨거운 짧은 기간에 집중되기 때문에, 늦게 만들면 의미가 사라지는 강한 타이밍 제약.
Solution
기획부터 배포까지 약 10시간 안에 끝내는 것을 목표로, 사용자가 로그인 후 마지막 메시지와 기록을 남기는 단일 핵심 기능에 집중한 메모리얼 웹. 불필요한 기능을 덜어내고 참여 경험만 빠르게 완성해, 이슈가 살아 있는 동안 즉시 확산되도록 한 구조.
Key features
참여형 기록
사용자가 백준과 함께한 기억과 마지막 메시지를 남길 수 있는 메모리얼 공간. 누구나 짧은 시간 안에 참여할 수 있도록 작성 흐름을 단순화한 설계.
인증 기반 작성
NextAuth 기반 로그인으로 무분별한 작성과 스팸을 막고, 신뢰할 수 있는 참여 환경을 만드는 인증 구조.
효율적 데이터 처리
TanStack Query로 급증하는 참여 데이터를 효율적으로 패칭·캐싱해, 트래픽이 몰리는 확산 구간에서도 안정적인 조회 경험을 유지하는 데이터 처리.
Tech stack
프론트엔드
Next.jsReactTypeScriptTanStack Query
데이터베이스
Supabase
도구
NextAuth
Team / Role
Team project · 2명
Floting Comment Component 제작, 전반적인 디자인 설계
Designer
Architecture
Next.js·React·TypeScript 프론트엔드에 Supabase를 데이터 저장소로, NextAuth를 인증 계층으로 결합하고, TanStack Query로 서버 상태와 캐싱을 관리하는 구조. 빠른 배포를 위해 익숙한 스택으로 구성요소를 최소화한 설계.
Metrics
단시간 내 개발 및 배포개발·배포
커뮤니티를 통해 빠르게 확산확산
Learnings
타이밍이 핵심인 프로젝트에서는 완성도보다 '지금 출시하는 것'이 더 큰 가치를 만든다는 점을 단시간 개발·배포와 커뮤니티 확산을 통해 직접 체감한 경험. 동시에 트래픽이 몰릴 때의 데이터 처리와 인증 설계가 실제 서비스 신뢰도를 좌우한다는 점.