실시간 팀 회고 보드
2025.03 - 2025.05
여러 사용자가 동시에 회고를 작성하고 정리할 수 있는 회고 보드를 구현해본 개인 프로젝트입니다. 실시간으로 변화하는 데이터 환경과 AI 기반 기능을 직접 구현하며, 그 과정에서 발생하는 프론트엔드 문제를 해결하는 경험을 목표로 진행하였습니다.
Parabol의 Retrospective Tool 디자인과 기능을 참고하여 개발하였습니다.
💻 기술 스택
🧩 구현 기능
1. 대시보드
별도의 로그인 없이 사용할 수 있도록
Local Storage기반으로 사용자를 식별하고, 최초 접속 시 랜덤 닉네임을 생성하여 저장하고 이후 수정할 수 있도록 구현회의룸을 생성 및 삭제, 특정 회의룸을 ID 기반으로 검색하고 입장할 수 있도록 함
2. 회의 (토픽 카드 작성 → 투표 → 토론)
웹 소켓 기반 라이브러리
Liveblocks을 사용하여 클라이언트 간 실시간 데이터 동기화를 구현방 생성자(방장)는 회의 단계를 자유롭게 바꾸거나 종료할 수 있도록 하는 하단 플로팅 바 표시
일반 방 참여자는 현재 회의 단계의 페이지 외에는 접근을 제한하고 되돌아가도록 하는 가드 기능 구현
토픽 카드 작성(Reflect) - 카테고리(start/stop/continue) 별 토픽 카드 추가/삭제, 드래그-드롭을 통한 순서 변경 및 카테고리 이동 기능 구현
투표 (Vote) - 토픽 별 투표 기능 구현
토론(Discuss) - 토픽 별 토론 페이지를 구성하고, 토픽에 대한 이모지 반응, 채팅 및 관련 업무(Task) 등록 기능 구현
3. 회의 요약 (Summary)
사용자 별 업무와 모든 토픽의 내용을 정리한 요약 페이지 구현
window.print()를 활용하여 요약 페이지를 PDF로 저장 가능하도록 하고, print 미디어 쿼리를 사용해 버튼 같은 불필요한 부분 숨김 처리AI 요약 기능 개발: 모든 회의 데이터를 포함하여 중요 결정 사항, 다수가 공감한 내용, 대화 중 갈등 등 회의의 맥락이 드러나는 결과를 내도록 구현
📌 이슈
단계 변경(Discuss → Reflect/Vote) 시 런타임 에러가 발생하는 문제
AI 기반 회고 요약 기능 구현
🌱 배운점
사용자의 사용 흐름을 방해하지 않는 것이 중요한 환경에서는, 화면이 중단되지 않도록 에러의 영향을 최소한의 범위로 제한하는 것의 중요성을 느꼈습니다.










