ㅇㅅㅇ : 실시간 협업 롤링페이퍼 제작 서비스

Samsung Software Academy For Youth 12th - 자율 프로젝트

2025.04.14 ~ 2025.05.22

목차

1. 시작하기
2. 기획 배경
3. 기술 스택
4. 개발 환경
5. 시스템 아키텍처
6. ERD
7. 주요 기능
8. 서비스 화면
9. 기술 차별점
10. 성과
11. 팀원

시작하기

ㅇㅅㅇ 바로가기

기획 배경

특별한 날 직접 말을 건네기 어려운 순간이 있습니다. 졸업, 이직, 생일, 은사 감사 등 다양한 상황에서 솔직한 감정을 디지털 공간에서 함께 기록하고 마음을 전달달할 수 있는 서비스가 필요했습니다.

ㅇㅅㅇ 서비스는 이러한 감정의 밀도를 해치지 않으면서도 쉽고 안전하게 전할 수 있는 환경을 제공합니다. 사용자는 그룹별로 롤링페이퍼를 만들어 함께 공유하고, 같은 공간에 있지 않아도 실시간으로 동시 편집할 수 있습니다. 또한 다양한 테마와 스티커를 활용해 각자의 감성과 개성을 표현할 수 있어, 단순한 메시지 전달을 넘어 서로의 진심을 나누는 새로운 경험을 제공합니다.

저희의 서비스는 사람들 사이에 자연스럽고 깊이 있는 소통이 일상을 더욱 특별하게 만든다는 믿음에서 출발했습니다. 함께 만들어 가는 롤링페이퍼를 통해 더 많은 사람들이 소중한 순간을 함께 기록하고, 진심을 나누는 세상을 꿈꾸며 이 서비스를 기획하게 되었습니다.

기술 스택

Frontend

Backend

AI

Infra

Tools

개발 환경

• Backend
  • Java 17
  • Spring Boot 3.4.4
  • Redis 7.4.0
• Frontend
  • React 19.0.0
  • Node.js 20.18.0
  • TypeScript 5.x
  • Next Js 15.3.1
• AI
  • PyTorch (Latest)
  • CUDA 12.1.0
  • FastAPI (Latest)
  • Python 3.11
• Server
  • AWS S3 Standard
  • AWS EC2 lightsail, m5.xlarge, g4dn.xlarge
• Infra
  • Docker 27.1.1
  • Ubuntu 20.04.6 LTS
  • Jenkins 2.452.3

시스템 아키텍처

ERD (Entity Relationship Diagram)

주요 기능

롤링페이퍼 만들기

• 전달하고 싶은 사람, 함께 작성할 그룹, 편집 권한 비밀번호와 배경을 설정할 수 있습니다.
• 함께 작성할 그룹에는 공공데이터포털에서 가져온 전국 중학교, 고등학교, 대학교 이름을 미리 등록해놓아 검색 기능을 지원하고 있습니다.
• 사용자가 원하는 배경이 없는 경우에는 색상이나 사진을 직접 업로드하여 커스텀 할 수 있습니다.

롤링페이퍼 꾸미기

• 텍스트, 사진, 스티커로 실시간 동시 편집을 할 수 있습니다.
• 원하는 요소(텍스트, 사진, 스티커 등)를 최상단으로 가져와 z-index를 변경할 수 있습니다.
• Crtl + 마우스 휠로 확대/축소, Spacebar + 마우스 끌기로 화면 이동을 할 수 있습니다.
• 약 200여개의 스티커를 기본으로 제공하며 검색을 통해 원하는 스티커를 찾을 수 있습니다.
• 해당 롤링페이퍼의 편집 비밀번호를 입력한 다른 사용자를 함께 참여중인 사람 목록에서 확인할 수 있습니다.
• URL 복사 또는 카카오톡으로 공유하기를 지원합니다.

스티커 커스텀 생성

• 사용자가 원하는 사진을 업로드하여 배경 제거 기능을 통해 스티커를 생성할 수 있습니다.
• 배경 제거 시 최대 8개의 점을 찍어 추출하고자 하는 객체에 대한 힌트를 제공합니다.
• 스티커 저장 시 이름 중복 검사를 지원합니다.
• 저장된 스티커는 해당 롤링페이퍼에 참여중인 다른 사용자에게도 공유되어 함께 사용할 수 있습니다.

롤링페이퍼 보기 모드

• 작성한 롤링페이퍼를 전달할 때는 보기 모드로 전환하여 롤링페이퍼를 확인할 수 있습니다.
• URL 복사 또는 카카오톡으로 공유하기를 지원합니다.
• 화면 상단에 콘페티 애니메이션 효과를 적용하였습니다.

메인화면

• 알림

  • 내가 만든 롤링페이퍼에 다른 사용자가 편집 권한 비밀번호를 입력하여 참여하면 나에게 알림이 전송됩니다.
  • 알림을 클릭하면 해당 롤링페이퍼 꾸미기 화면으로 이동합니다.

• 그룹별 랭킹

  • 그룹별로 작성된 롤링페이퍼 수를 랭킹에서 5위까지 확인할 수 있습니다. 랭킹은 1시간마다 자동으로 업데이트됩니다.

• 자랑하기

  • 그룹을 검색하면 자랑하기를 설정한 롤링페이퍼의 썸네일을 미리 볼 수 있습니다. 썸네일을 클릭하면 해당 롤링페이퍼 보기 모드 화면으로 이동합니다.

마이페이지

• 현재 참여중인 롤링페이퍼의 목록을 확인할 수 있습니다.
• 생성한 스티커의 목록을 확인할 수 있습니다.

서비스 화면

랜딩 화면

로그인 화면

메인 화면

• 알림

• 사이드바

  로그아웃 상태	로그인 상태

• 피드백 보내기

• 자랑하기

마이페이지

롤링페이퍼 만들기

롤링페이퍼 꾸미기

• 실시간 동시 편집

• Z-Index 업데이트

• 캔버스 이동·확대/축소

• 스티커 검색

• 스티커 생성

• 롤링페이퍼 설정&자랑하기

롤링페이퍼 보기 모드

카카오톡 공유하기 템플릿

롤링페이퍼 보기모드	롤링페이퍼 편집

기술 차별점

1. FastAPI + 비동기 처리

• 기존 Flask에서 발생한 병목을 해결하기 위해 FastAPI 전환
• async/await 기반 비동기 처리로 동시 요청 성능 극대화 → 여러 이미지 처리 요청을 실시간으로 병렬 처리 가능

2. PyTorch + CUDA 병렬 처리

• 이미지 배경 제거 모델을 PyTorch + GPU(CUDA) 환경에 최적화
• CPU 기준 20~30초 → GPU 환경에서 평균 1초 미만으로 단축 → AI 기능을 실시간 서비스 수준으로 상용화

3. STOMP 기반 WebSocket + 실시간 편집 동기화

• STOMP + WebSocket으로 사용자 간 실시간 편집 협업 기능 구현
• 동시 접속자 충돌 방지를 위한 실시간 락 시스템, 상태 알림 구성 → Google Docs 수준의 실시간 협업 UX 제공

4. WebSocket ↔ 비동기 이벤트 처리 역할 분리

• WebSocket = 저지연 실시간 상호작용, 비동기 처리 (알림, 저장 등) = 비실시간 분리 구조 → 네트워크 부하를 효율 분산, 복구 용이한 이벤트 기반 설계

5. Redis 기반 DB 업데이트 주기 관리

• Redis를 통해 실시간 정보들을 덮어쓰기 하며 일정 주기마다 DB에 업데이트
• DB의 부하를 줄이며 사용자가 새로 접속했을 때 최신 상태의 화면을 반영할 수 있도록

6. Elasticsearch 기반 유연한 검색 UX

• 학교명, 이모티콘 등 빠르고 유사한 키워드 검색 제공
• N-Gram, 부분 매칭 등 고급 검색 전략 적용 → 일반적인 SQL LIKE 검색보다 검색 정확도 및 속도 향상

성과

서비스 홍보

• 인스타그램 릴스 조회수 : 1400회+
• 서비스 이동 수 : 27회+

서비스 사용 통계

• 총 방문자 수 : 650명+ (Google Analytics 기준)
• 발생한 이벤트 수 : 30,000회+

데이터베이스 현황

• 총 가입자 수 : 120명+
• 롤링페이퍼 수 : 60개+
• 스티커 수 : 260개+

기술 검증

• 웹소켓 실시간 동시 접속 테스트 : 20명 성공

프로젝트 발표자료

중간발표.ppt

최종발표.ppt

영상 포트폴리오.mp4

트러블 슈팅

팀원

🐩 FE & 팀장 김민주

• Github: https://github.com/hong00z

🍞 FE & AI 최대규

• Github: https://github.com/Daek-You

🍕 FE 박민수

• Github: https://github.com/parkminsu6421

🐼 BE 임지혜

• Github: https://github.com/user-jihye

💡 BE 제갈민

• Github: https://github.com/jgm00

🤦‍♂️ BE & INFRA 정도현

• Github: https://github.com/dohyun-kor

📝 라이선스

Copyright © 2025 고잉메리호.