Projects
02 / 03 · 피앰아이
유니서베이(Unisurvey)
누구나 설문을 만들고, 배포하고, 결과를 실시간으로 보는 플랫폼
- 회사
- 피앰아이
- 역할
- Frontend / Full-stack
- 기간
- 2021.01 - 2024.12
- 링크
- 사이트 방문
3만+
누적 설문
20종
문항 유형
실시간
응답 반영
기존 설문 도구는 문항 유형이 제한적이고 결과 분석을 엑셀로 따로 해야 하는 불편이 있었습니다.
유니서베이는 드래그 앤 드롭 설문 에디터와 응답 대시보드를 한곳에 모은 B2B/B2C 설문 플랫폼입니다. 에디터·대시보드 프론트엔드와 일부 NestJS API 를 맡았습니다.
- 01
설문 에디터
문항 추가·순서 변경·분기 로직을 드래그 앤 드롭으로 편집하고, 편집 상태를 Zustand 로 관리해 되돌리기/다시하기를 지원했습니다.
- 02
실시간 응답 대시보드
Socket.io 로 응답 이벤트를 받아 차트를 즉시 갱신하고, 이벤트가 몰릴 때는 배치로 묶어 렌더링 횟수를 제한했습니다.
- 03
Vue → Next.js 전환
Vue2 기반 레거시 화면을 Next.js 로 단계적으로 옮기며 공용 디자인 시스템을 새로 정리했습니다.
- 문제
- 문항이 100개를 넘는 설문에서 에디터 입력 지연이 체감될 정도로 커졌습니다.
- 해결
- 문항 단위로 상태 구독을 쪼개고 리스트를 가상화해, 편집 중인 문항만 다시 렌더링되도록 했습니다.
- 결과
- 입력 지연 약 300ms → 16ms 이하
Frontend
- Next.js
- TypeScript
- Styled-components
- React Query
- Zustand
- Vue2/3
Backend
- NestJS
- TypeScript
- MongoDB
Infra
- Docker
- AWS
- Socket.io
- GitHub
사용자가 오래 머무는 편집 화면은 작은 지연도 크게 느껴진다는 것을 체감했습니다. 성능을 기능 요구사항처럼 초기에 정의하는 습관이 생긴 프로젝트입니다.