본문으로 건너뛰기

ReadyBerry

지역 기반 카페 대상 패스트 오더 서비스

1. 프로젝트 요약

  • 한 줄 정의: 로컬 카페용 패스트오더 서비스
  • GitHub 주소
  • 팀 구성: BE 2인, FE 4인
  • 기간: 2023.12 ~ 2024.05 (5개월)
  • 나의 역할: 프론트엔드 개발 및 API 인터페이스 설계
    1. Toss Payments SDK 통합 및 결제 시스템 연결
    2. 사용자향 페이지 개발
  • 핵심 성과: 결제 SDK 라이프사이클 최적화 및 useRef 관리로 결제 로딩 시간 70% 단축(3s→1s)

2. 기술 스택 및 시스템 아키텍처

  • 기술 스택: Java 17, Spring Boot 3, PostgreSQL, Redis, Docker, Kubernetes
    • redisTTL 기능을 활용하여 일회성 인증 코드의 자동 소멸 및 메모리 관리 최적화.
  • 구조: API Gateway + Microservices + DB + Redis Cache 구조
디렉토리 구조(점주)
src/
├── components/
│   ├── views/ # 공통 뷰
│   └── Sales/ # 매출 관리 차트
├── pages/
│   ├── OrderManage/
│   ├── ...
├── hooks/
├── Atom/
├── util/
└── constants/
디렉토리 구조(고객)
src/
├── components/
│   ├── Authentication/
│   └── views/
├── pages/
│   ├── HomePage/
│   ├── PaymentPage/
│   └── MyPage/
├── hooks/
├── Atom/
├── utils/
└── constants/
ERD(점주)시스템 다이어그램
ERD(고객)시스템 다이어그램

3. 핵심 문제 해결 및 성과

Trouble 1. Toss Payments SDK 통합 및 결제 시스템 구축

1) Problem

  • Toss Payments Widget 초기화 시 3~5초 소요
  • 쿠폰/포인트 적용 시 화면 깜빡임 발생
  • useEffect 중복 실행으로 SDK가 여러 번 초기화됨

2) Action

  • useEffect([])로 SDK 초기화를 마운트 시 1회만 실행
  • SDK 인스턴스를 useRef로 관리하여 리렌더링과 분리
  • 결제 버튼 클릭 시 서버 계산 금액 기준으로 updateAmount() 호출

3) Result

  • 결제 페이지 로딩 시간 3~5초 → 1초 (약 70% 개선)
  • useEffect 실행 횟수 8~12회 → 1회
  • 화면 깜빡임 현상 완전 제거

4) Deep Dive

  • SDK 초기화 로직과 결제 요청 로직을 명확히 분리
  • 서버 금액 계산 → 클라이언트 반영 구조로 보안/정합성

5. 성과 및 배운 점 – ReadyBerry에서 얻은 것

프로젝트 성과

  • 교내 축제에서 테이블 오더 서비스 운영
  • 학교 인근 카페 2곳 실사용 배포 및 실제 운영

배운 점 & 성장 포인트

  • 기획–디자인–백엔드–마케팅과의 협업 과정을 통해, 서비스 전반을 바라보는 시야 확보
  • 실제 점주 및 사용자 피드백을 반영하며, 비즈니스 관점에서 기능을 우선순위화하는 경험
  • 프론트엔드에서 시작해 백엔드 설계까지 연결되는 “전체 흐름을 보는 개발”의 중요성 인식
  • “동작하는 코드”가 아니라 “운영 가능한 코드”를 만드는 개발자로 성장

ReadyBerry는 단순한 팀 프로젝트를 넘어,
실제 사용자를 가진 서비스에서 성능·UX·비즈니스 요구를 동시에 만족시키는 경험을 한 첫 운영형 프로젝트였습니다.