1. 배경(Problem)
이 서비스를 만들게 된 배경은
대규모 컨퍼런스에서 발생하는 운영상의 비효율성과 참가자의 불편함을 해결하기 위해서입니다.
해결하고자 한 문제점 (Problem Statement)
1) 기존 핀테크 컨퍼런스의 구조적 한계
•
혼잡한 강연장: 실시간 좌석 현황을 알 수 없어 이동 및 참여에 불편함이 있음
•
강연 선택의 어려움: 사전 정보가 부족하고, 개인 맞춤형 추천이 없음
•
비효율적인 Q&A: 대중 앞 질문의 심리적 부담, 질문 정리의 비효율성
•
복잡한 세션 이동: 장소 이동에 따른 시간 낭비, 일정 관리 어려움
•
높은 운영 비용: 공간 임대, 장비 대여, 인력 운영 등으로 인한 고비용 구조
2) 사일런트 컨퍼런스 도입 시 발생하는 제한점
•
한 공간 내 동시 채널 수 제한
•
무선 기기 사용에 따른 기술적 문제 가능성 (배터리, 신호 간섭 등)
•
초기 장비 구축 비용
•
참가자의 새로운 포맷에 대한 적응 필요
2. 서비스 소개(Solution)
1) 서비스 개요
•
프로젝트명: FiT
•
형태: 모바일 웹 기반 사일런트 컨퍼런스 운영 솔루션
•
도입 목적:
◦
대규모 핀테크 컨퍼런스에서 발생하는 운영 비효율 및 참가자 불편 해소
◦
참가자에게 능동적인 컨퍼런스 경험 제공
◦
운영자에게는 비용 절감과 효율적인 현장 관리 지원
2) FiT이 제안하는 솔루션
핵심 기능명 | 기능 설명 및 제공 가치 |
모바일 오디오 스트리밍 | 실시간 스트리밍으로 청취 장소의 제약 해소. 현장 좌석 없이도 강연 참여 가능 |
실시간 혼잡도 시각화 | QR 체크인 기반 혼잡도 정보 제공. 혼잡 회피 및 대체 강연 추천 가능 |
실시간 Q&A 및 투표 시스템 | 모바일 기반 질문 등록 및 인기 질문 상위 노출. 대중 앞 질문 부담 완화 + 발표자 대응 효율성 향상 |
강연 미리담기 기능 | 참가자가 관심 강연을 저장하고, 자동 일정표로 정리. 컨퍼런스 당일의 동선과 일정 최적화 |
맞춤 추천 | 참가자의 관심 분야 및 직무 정보를 기반으로 개인화된 강연을 추천. 정보 탐색 시간 절감 및 참여 만족도 향상 |
•
사일런트 컨퍼런스
•
Mobile 시연 영상
•
PC 시연 영상
3. 아키텍처 및 핵심 기능
1) 주요 기능
(1) 모바일 웹 기반 오디오 스트리밍 (1순위)
•
기능 설명
◦
참가자는 모바일과 이어폰을 활용해 강연 오디오 혹은 오디오+영상을 선택하여 스트리밍으로 청취 가능
•
기대 효과
◦
오프라인 참가자는 이동 없이 원하는 세션을 쉽게 선택하고 청취, 온라인 참가자는 현장 참여자와 동일한 오디오 경험을 제공받음.
◦
세션이 혼잡할 경우, 스트리밍을 통해 오프라인 좌석 부족 문제 해결.
(2) 실시간 Q&A 및 투표 시스템 (1순위)
•
기능 설명
◦
참가자는 모바일 웹에서 질문을 입력하고, 인기 질문은 참가자 투표를 통해 상위 노출됨
•
기대 효과
◦
질문 부담 감소 및 강연자의 응답 효율성 증가.
(3) 실시간 혼잡도 제공 시스템 (2순위)
•
기능 설명
◦
QR 체크인 데이터를 활용하여 강연장별 실시간 입장 현황 및 혼잡도를 시각화하여 제공
•
기대 효과
◦
참가자는 불필요한 이동 없이 혼잡도 높은 강연장을 피하고 원활한 청취 환경 조성.
(4) 강연 미리담기 시스템 (3순위)
•
기능 설명
◦
참가자가 듣고 싶은 강연을 사전 선택하여 저장하고, 이를 기반으로 최적화된 일정 제공
•
기대 효과
◦
참가자는 여러 세션 중 관심 있는 강연을 쉽게 정리하고, 효율적인 일정을 구성 가능.
◦
컨퍼런스 당일 일정 조율 부담을 줄이고, 중요한 세션을 놓치는 문제 최소화.
(5) 맞춤 강연 추천 (4순위)
•
기능 설명
◦
참가자가 사전 등록 시 연차와 관심 분야를 입력하면 이를 바탕으로 맞춤 강연을 추천
•
기대 효과
◦
참가자가 본인에게 최적화된 강연을 선택할 수 있어 컨퍼런스 만족도 증가
4. 활용 라이브러리 및 개발 환경
•
디자인
◦
figma
▪
디자인 산출물 추출 및 전달 용이, 다양한 직군과 협업의 효율성 증대
•
백엔드
◦
언어 및 빌드 도구
▪
Java
•
안정성과 생산성이 높은 객체지향 언어
▪
Gradle
•
빠르고 유연한 빌드 및 의존성 관리 도구로, 모듈화와 빌드 속도 개선에 유리
◦
프레임워크
▪
Spring boot
•
자바 기반 웹 애플리케이션의 빠른 개발을 위한 프레임워크로, 설정 자동화 및 내장 서버 제공
▪
Spring Security
•
인증, 인가 등 보안 처리를 위한 프레임워크로, 필터 기반 보안 체계를 제공하며 다양한 인증 방식(JWT, OAuth2 등)과 유연하게 통합 가능
◦
인증 / 인가
▪
Jwt
•
무상태(stateless) 토큰 기반 인증 방식으로, 서버 부하를 줄이고 확장성 높은 인증 처리 가능
▪
OAuth2
•
소셜 로그인(Google, Kakao, Naver 등)과 외부 인증 시스템 연동을 위한 인증 프로토콜
◦
데이터베이스 및 ORM
▪
MySQL
•
구조화된 데이터 관리가 가능한 관계형 데이터베이스로, 안정성과 호환성이 뛰어남
▪
Redis
•
인메모리 키-값 저장소로, 빠른 속도가 요구되는 세션 관리, 캐싱, Pub/Sub 등에 활용
▪
JPA
•
객체와 관계형 DB 간 매핑을 위한 ORM 기술로, 데이터 접근 로직을 간결하게 유지
▪
QueryDSL
•
JPA와 함께 사용해 타입 안전한 동적 쿼리 작성 가능, 복잡한 조건의 조회 성능 향상
◦
실시간 통신
▪
WebSocket
•
클라이언트-서버 간의 양방향 실시간 통신을 위한 프로토콜로, 채팅 시스템에 적합
▪
WebRTC
•
브라우저 간의 P2P 실시간 미디어 스트리밍 기술로, 서버 부하를 줄이고 저지연 음성 스트리밍 가능
▪
Kurento
•
WebRTC 미디어 서버로, SFU 방식의 1:N 음성 스트리밍 구현 및 미디어 제어
▪
Coturn
•
NAT 및 방화벽 환경에서도 WebRTC 연결을 가능하게 해주는 TURN/STUN 서버
▪
Redis Pub/Sub
•
채팅방 메시지 전송 시, 메시지를 Redis 채널에 발행(Publish)하고, 구독(Subscribe) 중인 WebSocket 서버에서 이를 수신하여 실시간 전송
•
좋아요 기능 처리 시, 메시지의 좋아요 수 변경 사항을 실시간으로 다른 사용자에게 전파
•
다수의 서버가 존재하는 환경에서도 메시지 동기화 문제 해결, 실시간성과 일관성 확보
◦
API 문서화
▪
Swagger
•
REST API 명세를 자동화하고 UI 테스트 지원을 통해 프론트엔드와의 협업을 원활하게 함
◦
테스트
▪
JUnit5
•
단위/통합 테스트를 위한 프레임워크로, 테스트 코드를 통한 안정성 확보
▪
Mockito
•
의존성 있는 컴포넌트를 모킹하여 단위 테스트를 효과적으로 수행 가능
◦
인프라 및 배포
▪
AWS EC2
•
백엔드 서버가 실행되는 가상 머신으로, 유연한 확장성과 안정성 제공
▪
AWS CloudFront
•
응답 지연을 줄이고, 캐시 전략을 통해 서비스의 전반적인 성능 향상
▪
AWS S3
•
정적 파일(이미지, 동영상 등) 저장소로 사용하며, 확장성과 내구성이 우수
▪
AWS RDS
•
관리형 관계형 데이터베이스 서비스로, 백업/복구, 보안, 유지보수를 자동화
▪
Nginx
•
리버스 프록시, 로드 밸런싱, 정적 파일 서빙을 위한 웹 서버로, 성능이 뛰어나고 안정적인 요청 처리를 지원
▪
GitHub Actions
•
GitHub 기반의 CI/CD 자동화 도구로, 코드 푸시 시 빌드/테스트/배포 자동화 가능
▪
Docker
•
컨테이너 기반 환경 구성을 통해, 일관된 실행 환경 제공 및 배포 간소화
▪
Prometheus
•
메트릭 수집 및 경고 시스템으로, 서버/애플리케이션 성능 모니터링 가능
▪
Grafana
•
Prometheus와 연동하여 수집된 메트릭을 시각화하고 대시보드로 실시간 상태 확인 가능
•
프론트엔드 (FE)
◦
Core: React (JavaScript)
▪
컴포넌트 기반 아키텍처로 재사용성과 유지보수성이 뛰어남
▪
가상 DOM을 활용해 성능 최적화
◦
UI: Tailwind CSS
▪
유틸리티 클래스 기반 스타일링으로 빠르고 직관적인 디자인 구현
▪
CSS-in-JS보다 가벼우며, 빌드 시 불필요한 스타일 제거 가능 (PurgeCSS 활용)
◦
State Managing: Redux
▪
전역 상태 관리를 통해 컴포넌트 간 상태 공유 용이
▪
Redux Toolkit을 활용하면 보일러플레이트 코드 감소 및 개발 편의성 향상
◦
Bundler: Vite
▪
빠른 개발 서버 및 HMR(Hot Module Replacement) 지원으로 개발 생산성 향상
▪
빌드 속도가 빠르며, 최신 ES 모듈을 활용한 최적화된 번들링 제공
5. 트러블 슈팅
1) 오디오 스트리밍 연결 실패 (배포 환경)
항목 | 내용 |
문제 상황 | 로컬에서는 정상 작동하던 오디오 스트리밍이 배포 환경에서 TURN 서버 연결 실패로 인해 작동하지 않음 |
원인 분석 | 미디어 서버 및 TURN 서버 연동 시 프로토콜/네트워크 설정 누락, WebRTC 흐름 및 시그널링에 대한 팀의 이해 부족 |
대응 전략 | Wireshark로 패킷 분석, 연결 흐름 정확히 파악 → 프로토콜 수신 여부 및 포트 이슈 점검 및 수정 |
향후 개선 | 초기 설계 단계에서 WebRTC 흐름 문서화, TURN/STUN 서버 설정 체크리스트 사전 구성, 테스트 자동화 도입 고려 |
배운 점 | 네트워크 기반 실시간 기능(WebRTC 등)은 로컬-배포 환경 차이를 반드시 고려해야 하며, 배포 전 사전 시뮬레이션과 패킷 분석이 필수 |
2) 채팅 기능 null 값 수신 오류 (배포 환경)
항목 | 내용 |
문제 상황 | 로컬에서는 메시지 송수신 문제 없음, 배포 환경에서는 메시지 수신 시 null 발생 |
원인 분석 | 직렬화/역직렬화 과정에서 타입 불일치 및 timestamp 처리 에러, 프론트-백 간 데이터 명세 불일치 |
대응 전략 | 데이터 타입 재정의, 역직렬화 매핑 검토, 시간 단위 처리 방식 통일 → null 오류 해결 |
향후 개선 | API 명세서를 사전 작성하고, 프론트-백 간 weekly sync 진행, Swagger 연동 및 DTO 자동 검증 도입 고려 |
배운 점 | 백엔드와 프론트 간 데이터 명세 통일이 중요하며, API 타입 검증을 자동화하거나 Swagger 기반 명세로 통일해야 한다는 점을 실감 |
3) 디자인-프론트 핸드오프 지연 및 충돌
항목 | 내용 |
문제 상황 | 디자인 전달이 늦어져 프론트 작업 지연, 전달된 디자인이 코드로 구현하기 어려움 |
원인 분석 | 작업 스타일 공유 부족, 디자인 기준 불일치, 커뮤니케이션 타이밍 누락 |
대응 전략 | 디자인 변경 시 실시간 공유, 피그마에서 개발자 인스펙션 기능 적극 활용, 상시 미팅 도입 |
향후 개선 | 핸드오프 체크리스트 기반 작업, 프론트 개발과 디자인 동기화 일정 조정, 디자이너가 개발 방식 간접 체험 (예: 컴포넌트 기준 디자인) 유도 |
배운 점 | 디자인과 개발 간의 원활한 핸드오프를 위해 초기 설계와 스타일 가이드를 공유하는 것이 필수. 각자 도구와 방식의 이해가 필요 |
4) QA 및 테스트 시간 부족
항목 | 내용 |
문제 상황 | 개발 일정이 지연되면서 QA 시간이 부족, 기능 통합 후 버그 발생 |
원인 분석 | 일정 과소 추정, QA를 개발 마지막 단계로 배치, 기능별 통합 테스트 부재 |
대응 전략 | 기능별로 바로바로 테스트 진행, CI/CD 환경 구성하여 통합 테스트 자동화 수행 |
향후 개선 | 스프린트 단위로 QA 시간 고정 배정, QA 항목을 사전 문서화하여 기능 개발자와 공유, QA 주기를 매주 정기화 |
배운 점 | QA는 별도의 작업이 아닌 개발과 동시에 설계되어야 하며, 기능별 테스트 습관과 커버리지를 확보해야 프로젝트 후반 리스크를 줄일 수 있음 |
5) 커뮤니케이션 오류로 인한 반복 작업
항목 | 내용 |
문제 상황 | 디자인 수정이 반복되거나, 개발자가 작업 후 다시 되돌리는 일 발생 |
원인 분석 | 개인 일정에 따른 소통 부재, 초기 사양 공유 부족 |
대응 전략 | 작업 이력 실시간 공유, Notion을 통한 변경사항 로그화, 담당자별 피드백 루프 단축 |
향후 개선 | 업무 시작 전 작업 방식 표준화 워크숍 도입, 문서 기반의 소통 강화, Slack 채널 주제별 구분 운영 |
배운 점 | 기획-디자인-개발 간의 이해를 높이고, 실시간 협업 툴과 변경관리 체계를 도입해야 반복 작업을 줄일 수 있음 |
6) 서버 해킹으로 인한 긴급 복구
항목 | 내용 |
문제 상황 | 배포된 웹페이지가 외부 해킹 공격을 받아 서버 파일 손상 발생. 전체 웹페이지 기능이 마비되어 긴급 복구가 필요함 |
원인 분석 | 서버 보안 설정 미흡 및 외부 접근 제어 방어 미비. 임시 배포 서버 상태에서 보안 강화 작업이 지연된 상태에서 해킹 발생 |
대응 전략 | 사전에 Git을 통한 코드 리팩토링 및 백업 작업을 주기적으로 해놓은 덕분에, 2시간 30분 만에 웹페이지를 처음부터 복구할 수 있었음 |
향후 개선 | 배포 서버 보안 강화를 위한 SSH 포트 변경, 접근 제한(IP 화이트리스트 적용)
정기적인 보안 점검 및 로그 모니터링 도입
자동 백업 및 롤백 시스템 도입 고려 |
배운 점 | 예상치 못한 위기에 대비한 사전 준비(리팩토링 및 백업)의 중요성을 체감.
시스템 안정성 확보를 위해 보안과 인프라 설계 단계의 중요성을 재인식 |
6. 팀 소개
PM 역할로서 요구사항 정리와 일정 조율의 중요성을 실무적으로 경험하였습니다.
다양한 역할 간 커뮤니케이션을 조율하며, 전체 프로젝트 흐름을 관리하는 기획 역량을 향상시킬 수 있었습니다.
기획과 디자인의 경계를 넘나들며 실현 가능한 UI/UX 설계 역량을 강화하였습니다.
사용자 니즈를 분석하고 기능 요구사항과 일관된 디자인을 도출하는 경험을 통해, 목적 지향적 디자인의 중요성을 배웠습니다.
정보 구조화 및 사용자 흐름 설계의 중요성을 체계적으로 학습하였습니다.
와이어프레임 제작을 통해 사용성 기반의 화면 구성을 고민하며, 사용자 중심 설계에 대한 실질적 감각을 기를 수 있었습니다.
서비스의 완성도는 세밀한 프론트엔드 구현에서 비롯됨을 실감하였습니다.
디버깅 및 컴포넌트 구조 설계를 통해 사용자 경험을 최우선으로 고려하는 개발 역량을 한층 강화할 수 있었습니다.
사용자 중심의 UI 구현을 위한 협업의 중요성을 체감하였습니다.
디자이너와의 커뮤니케이션을 통해 실제 사용자의 흐름을 이해하며, 보다 직관적인 인터페이스를 설계하는 역량을 향상시킬 수 있었습니다.
안정적인 백엔드 구축을 위해 코드의 가독성과 협업 중심의 개발 문화를 배웠습니다.
서비스 운영 환경에서 발생할 수 있는 문제를 예측하고, 이를 해결하기 위한 로깅 및 테스트의 중요성을 깊이 인식하게 되었습니다.
CI/CD 파이프라인 구축을 통해 운영 자동화의 중요성을 실감하였습니다.
개발과 배포의 경계를 넘어서, 유지보수와 운영 효율성을 고려한 백엔드 설계 역량을 키우는 계기가 되었습니다.
데이터 흐름과 구조화의 중요성을 실시간 시스템 개발을 통해 배웠습니다.
혼잡도 분석 기능 구현을 통해 효율적인 DB 설계와 데이터 최적화 전략의 필요성을 명확히 이해할 수 있었습니다.
웹소켓 기반의 실시간 통신 기능 개발을 통해 비동기 시스템에 대한 이해를 높일 수 있었습니다.
기술적 도전 과정을 통해 확장성과 유지보수를 고려한 설계 방법론을 익히는 기회가 되었습니다.