1. 배경(Problem)
문제점
•
하이브리드 행사 운영 프로덕트에 대한 수요
◦
2023년에 비해 2024년에 하이브리드 행사 선호도 20퍼센트 증가, 개최 수 1.4배 증가
•
기존 IT 행사 운영 페이지의 페인포인트
◦
오프라인에서만 이루어지는 단순한 명함 교환 또는 짧은 대화에 머무르는 단발성 네트워킹
◦
온라인 참가자와 오프라인 참가자 단절
◦
정보 전달 역할에서 그치고, 해당 연도 개최 기간에만 국한되어 운영
•
실제 IT 행사 참가자의 페인포인트
*2/24~2/25 양일 간 IT행사 참가, 주최 및 운영 경험자 100명 대상으로 자체 조사
◦
“참여내역을 기록하지 않거나 그만두게 된 적이 있다면 어떤 이유가 가장 큰가요?”라는 질문에 응답자 87명 중 35.6%가 행사 기록과 데이터 정리가 번거롭다고 답변
하이브리드 IT 행사 운영 페이지에 참가 경험 및 인사이트를 기록할 수 있는 기능과 네트워킹 기능이 필요하다는 결론 도출! 참가자 인사이트 노트 기반의 지속형 네트워킹 기능 기획
•
외부 플랫폼에 흩어진 참가자의 인사이트를 한 곳에 모음
•
참가자가 자신의 경험과 인사이트 기록
•
365일 접근 가능한 온라인 네트워킹 공간 제공
기대효과
•
참가자 간 교류 빈도가 높아져 참여율과 몰입도 상승
•
인사이트 기록이 쌓이면서 행사-커뮤니티-재참여의 순환 구조 생성
•
행사 이후에도 기록 기반으로 개인의 성장과 관점 축적 가능
2. 서비스 소개(Solution)
기록을 넘어 연결로, 연결을 넘어 네트워킹으로
Synapse X는 기록 기반 네트워킹 기능 중심 하이브리드 컨퍼런스 통합 운영 솔루션입니다.
온/오프라인에서의 참가 인사이트를 기록하고,
타 참가자 및 연사와 연결될 수 있는 네트워킹의 단초를 제공합니다.
좋은 강연, 그냥 흘려보내실 건가요? 바로 지금 남기는 인사이트로 비슷한 관심 안에서 만나는 사람들과 연결되어보세요!Synapse X의 핵심 기능
인사이트 노트나의 인사이트를 정리하고, 타 참가자의 인사이트를 보며, 연사와도 연결 가능합니다.
•
작성된 인사이트 노트들을 같은 세션, 전체 세션에서 확인
•
타 참가자들의 프로필에서 컨택 메일 주소, 직군/직업, 관심분야, 네트워킹 링크 확인
•
강연자의 답글을 받은 노트에는 뱃지가 주어져 작성 동기 유발
참가 신청(세션 선택+결제)세션의 다양한 정보를 효율적으로 얻고 세션을 선택한 후 예약이 가능합니다.
•
시간대, 세션 요약, 연사, 장소, 참가 가능 인원 수를 파악
•
장바구니 형태로 신청하고 싶은 세션을 자유롭게 구성
•
참가자 정보 입력과 카카오페이 결제를 한 페이지에서 해결
회원 및 비회원 로그인/QR 인증회원뿐만 아니라 비회원에게도 사용자 접근성을 높였습니다.
•
회원은 카카오/구글 소셜 로그인, 비회원은 이메일 인증 로그인 가능
•
서비스 사용 시 필요한 로그인과 컨퍼런스/세션 입장에 필요한 QR 인증을 한 페이지에서 가능
3. 시스템 아키텍처 및 핵심 기능
시스템 아키텍처
•
개발자가 로컬 환경에서 코드를 작성한 뒤 GitHub를 통해 Pull Request를 생성하면, 자동으로 테스트 및 빌드가 수행되고, 개발 서버에 배포되도록 CI/CD 파이프라인을 구축하였습니다.
•
Push 요청이 발생할 경우에는 운영 서버에 코드가 배포되도록 설계하였으며, 여러 직군과 함께 프로젝트를 진행하며 빠른 피드백과 검증이 중요했기 때문에, 공용 배포 방식인 CodeDeploy를 사용할 경우 배포에 평균 10분 이상 소요되는 단점을 보완하고자, 개별 개발 서버를 별도로 구축하여 보다 빠르게 기능을 확인하고 피드백을 받을 수 있도록 환경을 분리하였습니다.
•
운영 서버는Auto Scaling과Application Load Balancer를 활용해자동 확장 및 트래픽 분산이 가능하도록 구성하였으며,개발 서버는 단일 EC2 인스턴스 위에 Nginx를 통한 리버스 프록시를 적용하고 SSL 인증서를 연동하여 무중단 배포 및 보안 강화 가 가능하도록 설계하였습니다.
•
로컬 환경에서는 Prometheus와 Grafana 기반의 모니터링 서버를 별도로 구성하여 각각의 배포 환경에서 발생하는 메트릭을 수집하고, 이를 시각화하여 성능 상태 및 오류 여부를 실시간으로 모니터링할 수 있도록 설계하였습니다.
핵심 기능
•
인사이트 노트
◦
인사이트 노트 관련 CRUD api 구현
◦
데이터 조회 방식으로 QueryDSL 사용
◦
인사이트 노트 리스트 필터링 구현
•
참가 신청(세션 선택+결제)
◦
세션 정보 필터링 및 참가 가능 인원 수 프로그레스바 구현
◦
깔끔하고 효율적인 참가자 정보 입력 UI 구현
◦
카카오페이 연동 기반 결제 트랜잭션 처리
•
회원 및 비회원 로그인/QR 인증
◦
OAuth2 + JWT + Spring Security를 활용한 소셜 로그인 개발
◦
이메일 인증을 활용한 비회원 로그인 개발
◦
API 호출 이용하여 입장 QR을 관리자가 저장, JWT 기반 신청 정보 확인 후 인증
4. 활용 라이브러리 및 개발 환경
백엔드
•
IntelliJ IDEA
Java 개발에 최적화된 IDE로, 강력한 코드 자동완성, 디버깅, 테스트 및 리팩토링 도구를 제공하여 개발 생산성을 크게 향상시킬 수 있습니다. 특히 Spring 프레임워크와의 통합이 잘 되어 있어 Spring Boot 개발에 유리하기에 사용했습니다
•
java, spring
백엔드 팀원 전부 자바 언어로 개발 구현이 가능하고, Spring 프레임워크는 Java 생태계에서 가장 널리 사용되는 프레임워크로, 다양한 기능 (DI, AOP, 트랜잭션 관리 등)을 제공하여 개발을 더욱 효율적으로 만들어주기에 사용했습니다
•
Spring Boot
Spring 프레임워크 기반으로 간단하게 설정할 수 있어, 빠르게 RESTful API 서버를 구축했습니다. 톰캣 서버를 제공하여 애플리케이션 배포와 구동이 매우 간편했습니다.
•
Docker
애플리케이션을 컨테이너로 배포할 수 있게 해 주며, 애플리케이션과 환경을 독립적으로 관리할 수 있었습니다. 이를 통해 개발, 테스트, 배포 환경이 일관되게 유지되어 “개발 환경에서 잘 되던 것이 운영 환경에서 안 된다”는 문제를 해결할 수 있었습니다.
•
MySQL
안정적이고 성능이 뛰어난 관계형 데이터베이스로, 데이터 무결성 보장 및 ACID 트랜잭션을 제공합니다. 또한 오픈 소스이고 많은 커뮤니티의 지원을 받으며, 다양한 툴과 연동하여 효율적인 관리가 가능했습니다.
•
GitHub
소스 코드 관리와 협업을 위한 대표적인 플랫폼으로, Git을 기반으로 버전 관리 및 코드 리뷰, 협업에 필수적인 도구였습니다.
•
AWS
클라우드 인프라 서비스에서 세계적으로 선도적인 서비스 제공업체로, 확장이 가능하고 안정적인 서비스를 제공합니다. 백엔드 팀에서 웹서버 배포를 위한 리소스를 전부 AWS에서 제공하며 사용한 만큼 과금이 되기 때문에 효율적이고 합리적이므로 채택했습니다.
프론트엔드
•
Next.js
pre-rendering으로 SEO를 최적화하고, client-side navigation으로 사용자에게 매끄러운 페이지 간 이동을 제공하기 위해 채택했습니다.
•
Tailwind CSS
빌드 타임에 stylesheet를 가져오기 때문에 SSR 환경에서 추가적인 설정이 필요 없으며, atomic한 특성으로 인해 프로젝트의 크기가 거대해져도 stylesheet 크기가 비례해서 늘어나지 않아 채택했습니다.
•
TypeScript
코드 가독성 및 타입 안정성을 보장하기 위해 채택했습니다.
•
Tanstack Query(React-Query)
서버 상태를 관리하기 위해 채택했습니다.
•
Zustand
클라이언트 상태를 스토어 중앙에서 관리함으로써 props drilling을 방지하기 위해 도입했습니다.
•
Vercel
Next.js의 공식 호스팅 파트너로서 쉬운 지원 및 최적화를 진행해 주기 때문에 선택했습니다.
5. 트러블 슈팅
인사이트 작성 form 제출 시 server component 관련 이슈
이슈Next.js 14 + Server Actions를 활용하여 POST 요청 처리 중 revalidatePath를 이용해 작성 완료 시 서버 캐시 재검증을 시도하려 했으나, 지속적인 인증 에러 발생.
원인 분석•
사용자 인증 처리를 브라우저 쿠키로 하고 있어 서버 컴포넌트에서는 쿠키 접근 불가
•
브라우저 쿠키 인증 방식은 서버 컴포넌트 환경에서 직접 접근이 불가능
해결 방법•
TanStack Query에 대한 이해 부족으로 적절한 캐싱 전략을 고려하지 못함
◦
TanStack Query의 캐시 무효화를 통해 클라이언트 측에서 데이터 동기화
1.
use server → use client로 변경
•
클라이언트 컴포넌트에서 API 요청을 보내도록 수정
•
브라우저 쿠키가 자동 포함되어 인증 문제 해결
2.
revalidatePath → TanStack Query 캐시 무효화로 대체
•
기존 서버 캐시 갱신 방식 대신 클라이언트 캐시 전략 적용
•
queryClient.invalidateQueries로 인사이트 데이터 최신화
프론트 로컬 서버에 쿠키 전달 실패 이슈
이슈소셜 로그인 성공 시 JWT(토큰)를 쿠키에 담아 프론트 측으로 전달하는데 로컬서버에서는 정상적으로 전달이 되지만 배포 서버에서는 전달이 되지 않는 이슈 발생.
1.
백엔드 로컬 서버 → 프론트 로컬 서버: 쿠키 전달 성공
2.
백엔드 배포 서버 → 프론트 배포 서버: 쿠키 전달 성공
3.
백엔드 배포 서버 → 프론트 로컬 서버: 쿠키 전달 실패
원인 분석•
도메인이 다른 경우 쿠키 전달이 어려움
해결 방법•
프론트 서버도 배포한 뒤 백엔드 서버와 도메인을 같게 하여 쿠키 전달에 성공하였음.
카카오페이 결제 취소 실패 이슈
이슈카카오페이 결제 승인 API, 결제 내역, 세션 예약 내역 저장과 유저 정보 업데이트 이 4개의 기능이 하나의 트랜잭션에서 이루어지고 있었음. 카카오페이 결제 승인 이후, 내부 로직에서 실패한다면 DB에 일부 데이터가 저장되지만, 결제 취소가 되지 않음을 확인.
원인 분석•
외부 API의 경우 Spring의 트랜잭션 롤백 대상이 아님
→ DB 트랜잭션이 실패해도 결제는 완료된 상태로 남는다
→ 세션 예약 실패했는데 결제는 되는 것
해결 방법•
결제 승인 후 내부 로직을 try-catch로 처리
•
카카오페이 결제 취소 API를 따로 구현하여 결제 승인 후 트랜잭션 실패 시에 결제 취소 API를 호출하는 방향으로 진행
6. 팀 소개
팀 동물원은 “참가자, 연사, 컨퍼런스의 연결”을 구현하기 위해 모였습니다.
팀 이름처럼 다양한 사람들로 구성된 만큼 협의를 중시하여 매일 데일리 스크럼을 하고, 하루에 3번씩 파트별/개인별 진행상황을 공유하면서 프로젝트를 진행했습니다. 개인의 역량과 팀워크가 어우러지도록 프로젝트에 임한 결과, 최우수상이라는 성과를 달성했습니다
동물원 팀원 소개
이은수 | ProductManager/팀장 | eunsu.wing@gmail.com 윤민준ㅣProductDesign | nx30115@gmail.com 황지원ㅣProductDesign | jenny.hw0122@gmail.com 문소희 | FrontEnd | qwerpoiu91@naver.com 이수연 | FrontEnd | lgh0385hh@gmail.com 강요한 | BackEnd | rmvmf96@gmail.com 노현이 | BackEnd | nhe0622@gmail.com 임영광 | BackEnd | richard08@naver.com 최민우 | BackEnd | alsdn4590@gmail.com