2025년 세종대학교 디자인이노베이션전공 졸업전시회 웹사이트를 개발했습니다. 사용자가 입력한 감정·속도·가치에 따라 자신의 퍼스트 체이스 카드를 생성하고, 생성된 카드를 투사 화면에 등록한 뒤 영수증 프린터로 출력할 수 있도록 설계해 관람객 참여형 전시 경험을 구현했습니다.
프로젝트 기간
사이트 링크
사용 기술
TypeScript
Next.js
Supabase
Zustand
상세 내용
프로젝트 개요
2025년 세종대학교 디자인이노베이션전공 졸업전시회 웹사이트 개발 프로젝트입니다. 관람객 참여형 인터랙티브 전시 경험을 웹 기술로 구현했으며, 사용자 입력 기반 카드 생성, 실시간 투사 화면, 물리적 영수증 출력까지 아우르는 온·오프라인 통합 시스템을 구축했습니다.
Next.js 16과 React 19를 기반으로 하며, Supabase 실시간 기능을 활용한 즉각적인 데이터 동기화가 핵심입니다.
주요 기능
1. 퍼스트 체이스 카드 생성 시스템
사용자가 입력한 감정, 속도, 가치를 기반으로 자신만의 고유한 카드를 생성합니다.
2. 실시간 투사 화면 연동
생성된 카드를 전시장 대형 화면에 실시간으로 표시합니다.
3. 영수증 프린터 출력
생성한 카드를 물리적인 영수증 형태로 출력합니다.
기술적 도전 및 성과
1. Supabase Realtime으로 실시간 동기화
입력화면에서 카드를 전송하면 딜레이 없이 투사 화면에 바로 뜰 수 있도록 Supabase의 실시간 구독과 SSE를 함께 사용했습니다.
카드가 생성되는 즉시 투사 화면에 반영되도록 이벤트를 전송
PostgreSQL 변경 사항을 Supabase Realtime로 구독해 데이터 변경을 바로 감지
클라이언트 업데이트는 SSE(Server-Sent Events) 로 처리
// Supabase Realtime 구독 예시 (WebSocket)const channel = supabase .channel('cards') .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'cards' }, (payload) => { // 새 카드가 생성되면 투사 화면에 즉시 반영 updateDisplayCards(payload.new) } ) .subscribe()// SSE 기반 이벤트 스트림 처리const eventSource = new EventSource('/api/events')eventSource.addEventListener('card-update', (event) => { const data = JSON.parse(event.data) updateDisplayCards(data)})
2. QR 코드 기반 식별 시스템
각 카드에 고유 ID를 부여하고, 이를 QR 코드로 인코딩해 추적 가능하게 만들었습니다.
카드 생성 시 고유 ID를 발급하고, qrcode.react로 QR 코드를 자동 생성
QR 스캔으로 해당 카드 정보를 조회해 카드 이미지를 저장할 수 있도록 구현
3. 빅솔론 POS 프린터 연동 (WebSocket)
빅솔론 POS 프린터의 Web API를 활용해 웹에서 WebSocket으로 프린터와 직접 통신하며 출력 요청을 전송했습니다.
