1. 배경(Problem)
1) 왜 서비스를 만들었는가?
•
하이브리드 이벤트 확대: 코로나 이후 온라인·오프라인을 병행하는 컨퍼런스 수요가 급증하며, 단순 플랫폼 이상의 통합 운영 도구 필요
•
ICT 시장 성장: 2025년 국내 기업용 ICT 시장이 약 41조 원 규모로 성장하면서, 효율적이고 데이터 기반의 행사 관리 솔루션에 대한 기업 수요 증가
•
참여자 경험 혁신: 기존 방식으로는 참가자의 관심사에 맞춘 맞춤형 안내·보상이 어려워, 적극적 참여 유도가 미흡
2) 어떤 문제를 해결하려고 했는가?
•
참가자 측면
◦
관심 세션·부스 탐색이 어려워 만족도가 낮고, 참여 동기가 부족
◦
세션 만석·한산 현황 파악이 불가능해 시간 낭비 발생
•
관리자 측면
◦
실시간 참가자 분포·관심 분야 데이터를 확보하기 어려워 운영 의사결정 비효율
◦
수작업 보고·관리로 인해 리소스 과다 소모
•
채용 담당자 측면
◦
적합 인재를 선별·후속 연락하는 프로세스 부재
◦
참가자 데이터가 흩어져 있어 효율적 매칭 불가능
3) 해결 방안
•
온보딩 & 관심사 입력 → 맞춤형 세션·부스 추천
•
QR 코드 인증 + 포인트 시스템 → 참여 기록 자동화 및 동기 부여
•
관리자 대시보드 → 실시간 운영 현황·데이터 시각화
•
채용 담당자 페이지 → 필터링 기반 인재 탐색·찜하기 기능
2. 서비스 소개(Solution)
•
목표: 참가자·관리자·채용담당자 모두를 위한 하이브리드 컨퍼런스 통합 솔루션
•
핵심 기능
◦
온보딩 → 관심 분야 입력 → 맞춤 세션·부스 추천
◦
QR 인증 + 포인트 시스템 → 참여 동기 부여 및 기록 자동화
◦
관리자 대시보드 → 실시간 운영 현황 시각화
◦
채용 담당자 페이지 → 필터링 기반 인재 탐색·찜하기
•
시연 링크
3. 아키텍처 및 핵심 기능
1) 프론트엔드
저희 프론트엔드 아키텍처는 React와 TypeScript 기반으로 구성되어 있으며, 클라이언트 측 상태 관리는 가볍고 직관적인 상태 관리 라이브러리인 Zustand를 사용하고 있습니다. 서버와의 데이터 연동은 Axios를 통해 이루어지며, TanStack Query를 활용해 데이터 패칭, 캐싱, 동기화 등의 로직을 처리하고 있습니다. 여기에 Zod를 결합하여 클라이언트 단에서 먼저 스키마 기반의 유효성 검사를 수행함으로써 안정성을 높였습니다. 특히 인증/인가와 관련된 API의 경우, accessToken을 포함한 사용자 정보는 메모리에 저장하기 위해 Zustand 전역 상태에 저장하여 안전하게 관리하고 있습니다. 개발 환경은 Vite를 기반으로 구성하여 빠른 실행과 빌드 속도를 확보했고, GitHub Actions와 Vercel을 활용해 프론트엔드 CI/CD 파이프라인을 구축, 코드가 main 브랜치로 머지되면 자동으로 배포까지 이어지도록 구성하였습니다.
2) 백엔드
Spring Boot를 이용하여 각 도메인별 기능을 구현하였으며, 권한에 따른 기능 접근이 가능하도록 Spring Security를 사용하여 보안을 설정하였습니다. 또한 다양한 조회 기능이 제공되는 면에 있어서 2개 이상의 테이블이 요구되는 조회 쿼리의 경우에는 가독성, 그리고 동적으로 작동하는 경우를 고려하여 JPA와 Querydsl을 적절히 조합하여 사용하였습니다. 이렇게 만들어진 기능들은 AWS 서비스를 이용하여 CPU의 사용량을 낮추며 데이터 교환이 가능하도록 하였고, Git Action을 이용한 CI/CD 파이프라인을 구축하여 자동화 배포를 진행하였습니다.
4. 활용 라이브러리 및 개발 환경
1) 프론트엔드
•
React + TypeScript
◦
활용: 전반적인 프론트엔드 UI 구성 및 로직 처리에 사용.
◦
선택 이유: 컴포넌트 기반 구조로 재사용성과 유지보수성이 뛰어나며, TypeScript 도입을 통해 타입 안정성과 개발자 경험 향상.
•
Zustand
◦
활용: 인증/인가 관련 상태(accessToken, 사용자 정보 등)를 포함한 전역 상태 관리.
◦
선택 이유: Redux 대비 보일러플레이트가 적고, 직관적인 API와 가벼운 런타임으로 빠르고 유연한 상태 관리를 지원.
•
TanStack Query
◦
활용: 서버 데이터 요청, 캐싱, 리페칭, 동기화 등을 처리. Query Factory 패턴을 도입하여 쿼리 키를 체계적으로 관리.
◦
선택 이유: 서버 상태를 자동으로 관리하며, 캐싱 및 데이터 동기화에 강력한 기능을 제공.
•
Zod
◦
활용: 클라이언트 측 폼 유효성 검사에 사용. 공통 폼 컴포넌트에 스키마 기반 유효성 검사를 적용해 에러 발생을 사전에 방지.
◦
선택 이유: 타입스크립트와 자연스럽게 결합되어 정적 타입과 런타임 유효성 검사를 동시에 만족. 코드의 안정성과 디버깅 효율성을 높임.
•
MUI (Material UI)
◦
활용: SelectBox, 차트 컴포넌트, 관리자 대시보드 등 UI 요소의 기반 라이브러리로 활용.
◦
선택 이유: 빠르게 품질 높은 UI를 구현할 수 있으며, 커스터마이징이 유연함.
•
Axios
◦
활용: API 요청을 위한 HTTP 클라이언트로 사용. 인증 API 호출 시 accessToken을 포함해 서버와 안전하게 통신.
◦
선택 이유: API 요청/응답을 커스터마이징하기 쉬우며, 인터셉터를 활용해 인증 로직 일원화 가능.
•
Vite
◦
활용: 프론트엔드 개발환경의 빌드 도구로 설정.
◦
선택 이유: Webpack 대비 훨씬 빠른 HMR과 빌드 속도 제공, 초기 구동 속도 및 개발자 생산성 향상.
•
GitHub Actions + Vercel
◦
활용: CI/CD 파이프라인을 구성하여 main 브랜치에 머지되면 자동 배포가 이루어지도록 설정.
◦
선택 이유: 배포 자동화로 운영 부담을 줄이고, 빠른 피드백 확보.
•
특이한 접근 및 설정
◦
Query Factory 패턴 도입: TanStack Query의 쿼리 키 관리와 훅 재사용성을 위해 공식 기여자 tkdodo가 제안한 패턴을 도입. 쿼리 정의가 일관되고, 팀원 간 컨벤션 공유가 쉬워짐.
◦
Zod + Zustand + Axios 통합 인증 흐름 설계: 클라이언트 측에서는 accessToken을 메모리에만 저장하고, refreshToken은 secure + httpOnly 쿠키에 저장하는 분리 전략을 채택. Axios 인터셉터로 만료 시 자동 리프레시 로직을 구현.
2) 백엔드
A. 기술 스택
•
Language: Java
•
Backend: Spring boot 3.x, Spring Data JPA, Spring Security, Querydsl
•
Server: AWS
•
DB: MySQL, Redis
•
Orchestration: Docker
•
Etc: Github, Notion
B. 지금까지 부트 캠프에서 학습하였던 스프링 프레임워크를 이용하여 프로젝트를 진행해보았습니다. 사용자들의 권한에 따른 서비스를 사용할 수 있도록 Spring Security를 도입하여 API별 접근 제어 및 보안을 설정하였습니다. 또한 다양한 조회 기능에 있어서 개발자들간의 유지 보수를 위한 가독성 있는 코드와 동적 쿼리 기능을 통해 클라이언트에 효과적인 데이터를 전송할 수 있도록 Spring Data JPA와 Querydsl을 적극 활용하였습니다.
사용자의 지속적인 서비스 사용에 차질이 생기지 않게 하기 위해 자동화된 배포 시스템을 구축하였습니다. Git Action과 Docker을 이용하여 CI/CD를 구축하여 AWS EC2에 자동화 배포를 진행하도록 하였습니다. 이때 취약한 보안을 해결하기 위해 로드 밸런서를 통해 HTTPS 프로토콜로 데이터를 암호화하여 통신 교환을 진행하였습니다.
5. 트러블 슈팅
1) QA 테스트에서 발견된 주요 이슈 및 해결
이슈 | 원인 분석 | 해결 방안 |
비밀번호 조건 미충족 시 오류 메시지 미출력 | 프론트엔드 유효성 검사 로직 누락 | 입력값 검증 로직 추가, 에러 메시지 컴포넌트와 연동 |
QR 코드 만료·서버 오류 시 잘못된 안내 문구 | 백엔드 예외 핸들링 미흡, 프론트 메시지 하드코딩 | API 응답에 오류 코드 추가 → 프론트에서 코드별 사용자 안내 분기 처리 |
포인트 등급 업데이트 미반영 | 캐시 갱신 로직 누락 | 등급 변경 시 Redis 캐시 무효화 로직 추가 |
2) 백엔드 트러블 슈팅
•
•
요약
◦
성능 최적화
▪
문제: JWT 인증 시 UserDetailsService가 중복 호출되어 DB 쿼리 과다 발생
▪
원인 분석: 인증 필터에서 매 요청마다 3회 조회
▪
해결 방안: 중복 호출 로직 제거, 단일 조회 후 캐싱 처리
▪
성과:
•
DB 쿼리 횟수 3회 → 1회로 감소
•
평균 인증 처리 시간 66.6% 단축
•
Throughput 97.3% 향상
◦
프로세스 개선: 테스트 자동화 및 코드 리뷰
▪
테스트 자동화 도입
•
스프링 컨텍스트 통합 테스트로 테스트 비용 30% 절감
•
전체 테스트 커버리지 75% 달성 → 서비스 안정성 확보
▪
코드 리뷰 강화
•
PR 당 최소 2명 이상 리뷰 의무화
•
주요 변경점에 대해 팀 내 주간 리뷰 세션 진행 → 버그 조기 발견
3) 프론트엔드 트러블 슈팅
프로젝트 개발 중 API 연동 과정에서 몇 가지 어려움이 발생했습니다. API 문서와 실제 응답 간의 불일치가 있었고 백엔드 팀에서 API 스펙을 변경했지만 이를 사전에 공유하지 않아 기존 코드가 정상적으로 작동하지 않는 문제가 발생했습니다. 이러한 상황은 협업 과정에서 발생할 수 있는 일반적인 문제로 양 팀 간의 긴밀한 소통과 명확한 문서화가 필요하다는 점을 다시 한번 깨닫게 되었습니다.
문제를 해결하기 위해 Notion을 활용하여 "API 연동 " 페이지를 만들고 발생한 모든 문제를 체계적으로 기록했습니다. 각 문제에 대해 발생 일자, 재현 방법, 기대 결과와 실제 결과를 상세히 작성했으며 문제 해결 상태(진행 중/완료)를 표시하여 팀원 모두가 현재 상황을 한눈에 파악할 수 있도록 하여 문제를 해결할 수 있었습니다. 기록된 문제는 백엔드 팀과 실시간 소통을 활용해 이슈를 빠르게 공유할 수 있었습니다.
이번 경험은 단순히 문제를 해결하는 데 그치지 않고, 프론트엔드 개발 과정에서 협업과 커뮤니케이션의 중요성을 다시 한번 깨닫는 계기가 되었습니다. 이후 API 스펙 관리와 변경 사항 공유를 철저히 준수하며 문제가 발생했을 때 체계적으로 기록하고 해결하는 과정을 통해 안정적인 개발 환경을 유지할 수 있었습니다.
6. 팀 소개
•
시너지는 기획부터 개발, 디자인까지 전 과정을 유기적으로 협업한 9인 팀입니다.
PM 1명, 백엔드 개발자 4명, 프론트엔드 개발자 2명, 프로덕트 디자이너 2명으로 구성되어,
기획의 방향성과 기술의 현실성, 사용자 경험을 균형 있게 반영한 서비스를 구현해냈습니다. 각자의 전문성과 책임감을 바탕으로, 기획-개발-디자인의 시너지를 극대화하며 현실적인 솔루션을 만들어냈습니다.
•
◦
소개말:
▪
사용자 경험과 비즈니스 가치를 잇고자 노력하고 있고 문제 해결력·비즈니스 마인드를 갖추고 있어요!
▪
WBS·Notion 기반 프로젝트 관리, Figma 기반 서비스 기획 문서화 역량이 있습니다.
◦
프로젝트 리뷰
▪
프로젝트를 총괄하며 일정 관리, 팀 리딩, 정책 설계 등 실전형 PM 역량을 익혔고, 서비스 기획에 집중하며 멘토링을 통해 발전시킬 수 있었습니다. 사업 제안서 작성, 데이터 분석 실습을 통해 기획력과 분석력을 함께 강화하였습니다.
•
박혜정 | 프론트엔드 개발자 | hyejeongp2@gmail.com
◦
안녕하세요. 구름 딥다이브 프론트엔드 1회차 수강생 박혜정입니다. 프론트엔드 개발자를 꿈꾸며 있으며 사용자 경험을 우선으로 생각하여 웹 구현하는 것을 목표로 하는 개발자가 되는것이 목표입니다
◦
처음으로 팀원들과 협업하며 프로젝트를 진행하는 소중한 경험을 할 수 있었습니다. 이전에는 협업과 실무 프로젝트 경험이 부족했지만 이번 과정을 통해 개발 프로세스와 커뮤니케이션의 중요성을 깊이 배우게 되었습니다. 특히 팀 내 역할 분담과 코드 리뷰를 통해 협업 능력을 키우고 실무에 가까운 개발 경험을 쌓을 수 있었습니다.
•
김동균 | 프론트엔드 개발자 | donggyunkim12@gmail.com
◦
안녕하세요, 시너지에서 프론트엔드 리더를 맡았던 김동균입니다!
저는 늘 사용자 입장에서 생각하며 개발하는 걸 좋아해요.
그래서 제가 만든 서비스가 자연스럽고 끊김 없이 이어지는 경험을 줄 수 있도록 늘 고민하고 있어요.
•
◦
"첫 단추가 중요하다.” 언제나 시작을 중요시하는 백엔드 개발자 박정곤입니다. 아무리 실력 좋은 개발자라 하더라도 DB 설계나 기능 구현 방안에 대해 체계적으로 구상하지 않으면 제 역할을 못하게 된다고 생각하기에 언제나 시작점을 확실히 잡고 함께 나아가는 방향성을 고려합니다.
•
◦
소개말 : "읽기 좋은 코드가 좋은 코드이다."
저는 '읽기 쉬운 코드'가 유지 보수가 쉬운 구조라 생각하는 백엔드 개발자입니다. 단순히 지금 작동하는 코드를 넘어, 동료 혹은 미래의 내가 이해하기 쉽고 함께 개선할 수 있는 코드를 만들기 위해 고민합니다.
•
◦
느리지만 꾸준히 성장하는 백엔드 개발자입니다.
실패를 두려워하지 않고 도전하며, 새로운 기술을 적극적으로 습득합니다. 꾸준한 성장을 통해 더 나은 개발자가 되기 위해 노력하고 있습니다.
•
◦
저는 소통을 통해 완성도를 높이는 백엔드 개발자입니다. 다양한 의견을 듣고, 코드에 반영하는 과정을 중요하게 생각합니다.
•
◦
도전을 즐기며, 이번 프로젝트를 통해 스스로의 가능성을 확장한 디자이너입니다.
이번 합반 프로젝트에서는 UI 측면의 반응형 환경에서 일관된 경험을 제공하기 위해 컴포넌트의 통일성과 구조화에 집중했으며, 팀원들과의 지속적인 소통을 통해, 디자인은 단독 작업이 아닌 팀과 함께 완성해가는 과정임을 깊이 체감할 수 있었던 경험이었습니다.
•
◦
컨퍼런스 참가자와 채용담당자 기능의 디자인 전반을 담당했습니다. 이번 프로젝트로 다른 직군과의 협업하며 많은 것들을 배울 수 있어서 뜻깊은 시간이었습니다.