프로젝트 배경
1) 예상 리스크 및 대응 계획 - 고정 22인치 해상도에서만 동작하도록 반응형 로직을 배제하고 픽셀 단위 레이아웃을 설계해야 하는 제약이 있으며, CSS 고정 단위와 뷰포트 락 처리로 대응할 계획입니다 - 무인 운영 환경에서 응답자가 이탈하거나 방치할 경우 다음 응답자를 위해 화면을 초기화해야 하는 타이밍 설계가 필요하며, 유휴 감지 타이머와 진행 중 재활성화 로직으로 대응할 계획입니다 - 다수 응답이
프로젝트 성과
순차 설문 상태 머신 설계
React 커스텀 훅으로 4단계 질문 흐름과 자동 초기화 타이머를 관리하는 상태 머신 구현, 진행 중 상태 보존 로직 설계
실시간 응답 집계 파이프라인 구축
Socket.io 이벤트와 PostgreSQL 집계 쿼리를 연결해 응답 발생 즉시 대시보드에 반영되는 구조 구현
엑셀 내보내기 스트리밍 로직 구현
xlsx 라이브러리 기반 대용량 응답 데이터를 시트로 변환해 스트리밍 다운로드하는 API 구현
터치 제스처 차단 레이어 설계
핀치줌·더블탭·컨텍스트 메뉴 등 브라우저 기본 제스처 8종을 전역 이벤트 리스너로 차단하는 구조 구현
핵심 기능
진행 단계
설문 문항 설계 및 DB 스키마 정의
2026.07
키오스크1/2 문항 구조, 응답 테이블, 집계 테이블을 PostgreSQL로 설계하고 Prisma 스키마 정의
프로젝트 상세
1) 포트폴리오 소개 22인치 터치 모니터에 최적화된 순차형 설문 키오스크와 제품 소개형 설문 키오스크 2종, 응답을 실시간으로 집계하는 통계 대시보드, 엑셀 다운로드가 가능한 관리자 패널을 React + Node.js 기반으로 설계·구현합니다. 고정 해상도 레이아웃과 브라우저 제스처 차단, 자동 초기화 로직으로 오프라인 행사 현장의 무인 운영 환경을 반영합니다. 2) 작업 범위 - 실시간 통계 허브







