배경(Problem)
Bitelearn은 사회초년생이 사회에 진입하면서 마주하는 주거·근로·금융 계약 문제를 실전적으로 학습할 수 있도록 돕기 위해 기획된 마이크로러닝 서비스입니다.사회초년생은 전세 계약, 근로계약서, 금융 상품 가입 등 삶에 직접적인 영향을 미치는 문서 기반 의사결정을 반복적으로 경험합니다. 하지만 이러한 영역은 정규 교육 과정에서 충분히 다뤄지지 않아, 실제 상황에 닥쳤을 때 스스로 위험을 판단하고 대응하는 데 큰 어려움을 겪습니다. 특히 전세사기, 계약상 불이익, 금융사기와 같은 피해는 단순한 정보 부족이 아니라 리스크를 판별하는 기준이 부재한 상태에서 더 쉽게 발생합니다.
또한 20~30대 사용자는 숏폼 중심의 정보 소비에 익숙해져 있어 긴 강의형 학습보다 짧고 직관적이며 실제 사례 중심의 학습 방식을 선호하는 경향이 있습니다. 팀 설문조사에서도 응답자의 89.3%가 실제 사례 기반 학습을 더 선호하는 것으로 나타났습니다.
Bitelearn은 이러한 문제를 해결하기 위해, 단순 지식 전달이 아니라 실제 상황에서 판단 기준을 익히고 반복적으로 연습할 수 있는 실전형 학습 경험을 목표로 만들었습니다.
서비스 소개(Solution)
Bitelearn은 사회초년생을 위한 금융·계약 리스크 실전 판단 학습 서비스입니다.
복잡하고 어렵게 느껴지는 금융·계약 정보를 짧은 학습 단위와 퀴즈형 인터랙션으로 재구성하여, 사용자가 실제 상황에서 스스로 판단할 수 있는 기준을 익히도록 돕습니다.
서비스는 ‘한 입 퀴즈, 지식 한 조각’이라는 슬로건 아래, 긴 강의 대신 짧고 집중도 높은 마이크로러닝 경험을 제공합니다. 사용자는 카테고리와 토픽을 선택해 챕터 단위 학습을 진행하며, 학습 과정에서 단어 학습, 문서형 문제, 상황형 퀴즈 등을 통해 실제 사례에 가까운 방식으로 개념을 익히게 됩니다.
특히 Bitelearn은 단순히 정보를 읽고 끝나는 서비스가 아니라,
사용자가 아래와 같은 흐름으로 학습하도록 설계했습니다.
•
카테고리 및 토픽 탐색
•
챕터별 단계적 학습 진입
•
단어 학습 → 퀴즈 풀이 → 결과 확인
•
오답노트를 통한 반복 복습
•
아티클 탐색 및 추가 학습
•
마이페이지에서 개인 학습 현황 관리
또한 캐릭터, 레벨링, 재화 시스템 등 게이미피케이션 요소를 도입해 법률·금융 학습이 주는 심리적 진입 장벽을 낮추고, 학습 지속성을 높이도록 구성했습니다.
1. 시스템 아키텍처
Bitelearn은 프론트엔드와 백엔드를 분리한 SPA 기반 구조로 설계되었습니다.
•
프론트엔드는 React + TypeScript + Vite 기반으로 구축하여 빠른 렌더링과 컴포넌트 중심 개발 환경을 구성했습니다.
•
백엔드는 Java 17 + Spring Boot 기반으로 구현하여 안정적인 비즈니스 로직과 인증, 데이터 처리 구조를 마련했습니다.
•
데이터베이스는 MySQL(Amazon RDS)을 사용해 사용자 정보, 학습 기록, 퀴즈 결과, 오답노트 등 핵심 데이터를 관리했습니다.
•
인증/보안은 JWT 기반으로 구성했으며, Refresh Token은 HttpOnly Cookie 방식으로 관리해 보안성을 강화했습니다.
•
배포 및 인프라는 AWS(EC2, ALB, Route 53, S3)와 Jenkins, Docker를 활용해 운영 및 배포 환경을 구성했습니다.
•
프론트엔드 배포는 Vercel을 활용하여 빠르게 배포하고 테스트 가능한 환경을 마련했습니다.
2. 데이터 흐름
사용자가 로그인한 뒤 학습을 시작하면, 프론트엔드는 API를 통해 사용자 상태, 학습 진행도, 퀴즈 데이터, 오답노트, 아티클 정보를 받아옵니다.
TanStack Query를 활용해 서버 상태를 일관되게 관리하고, 사용자의 학습 완료·오답 저장·재진입 상황에서도 최신 상태를 유지하도록 설계했습니다.
특히 학습 흐름에서는 currentStatus와 sequence를 기준으로 사용자의 현재 위치를 복원하여, 중간 이탈 후 재진입 시에도 자연스럽게 이어서 학습할 수 있도록 구현했습니다.
3. 핵심 기능
1) 회원가입 및 로그인
•
이메일 회원가입/로그인
•
Google, Naver 소셜 로그인 지원
•
인증 상태에 따른 접근 제어 및 세션 유지
2) 사용자 맞춤 홈 대시보드
•
비회원에게는 서비스 소개형 메인 제공
•
회원에게는 닉네임, 레벨, 최근 학습 현황, 추천 콘텐츠 등을 포함한 대시보드 제공
3) 학습 카테고리 및 토픽 탐색
•
카테고리별 진행률 확인
•
토픽 선택 후 학습 로드맵으로 이동
•
단계별 학습 구조를 시각적으로 확인 가능
4) 챕터 기반 마이크로러닝
•
챕터 진입 후 인트로 → 단어 학습 → 퀴즈 → 완료/결과 화면 순으로 진행
•
짧고 집중도 높은 학습 흐름 제공
•
중간 이탈 후 재진입 시 이어하기 가능
5) 다양한 퀴즈 유형 제공
•
객관식 퀴즈
•
OX 퀴즈
•
문서 선택형 퀴즈
•
실제 상황 기반 문제 풀이를 통해 판단 기준 학습
6) 오답노트 및 복습 기능
•
틀린 문제를 자동 저장
•
카테고리별 필터링 가능
•
문제별 상세 확인을 통해 반복 학습 지원
7) 아티클 탐색 및 상세 조회
•
학습 주제와 연결된 아티클 목록 제공
•
북마크, 공유 기능 지원
•
퀴즈형 학습 외 추가 정보 탐색 가능
8) 마이페이지
•
닉네임 변경
•
학습 현황 및 사용자 정보 관리
•
약관 및 개인정보처리방침 접근 지원
활용 라이브러리 및 개발 환경
Frontend
•
React
◦
컴포넌트 기반 UI 개발을 위해 사용
◦
화면을 기능 단위로 분리하여 재사용성과 유지보수성을 높임
•
Vite
◦
빠른 개발 서버와 번들링 환경을 제공하기 위해 사용
◦
프로젝트 초기 세팅과 개발 효율 향상에 적합
•
TypeScript
◦
정적 타입 기반으로 안정적인 개발 환경을 구축하기 위해 사용
◦
협업 과정에서 데이터 구조와 API 타입을 명확히 관리 가능
•
React Router
◦
SPA 환경의 라우팅 및 접근 제어를 위해 사용
◦
로그인 여부에 따라 필요한 페이지 접근을 구분
•
TanStack Query
◦
서버 상태 관리, 캐싱, 재조회, 동기화 처리를 위해 사용
◦
학습 진행 상태와 사용자 데이터의 일관성을 유지하는 데 효과적
•
Zustand
◦
액세스 토큰 및 전역 상태를 경량으로 관리하기 위해 사용
◦
persist 기능을 통해 새로고침 이후 인증 상태 유지 지원
•
Axios
◦
백엔드 API와의 HTTP 통신을 위한 공통 클라이언트로 사용
◦
인터셉터를 통해 인증 헤더 주입, 토큰 재발급, 공통 에러 처리 수행
•
Tailwind CSS
◦
빠르고 일관된 스타일링을 위해 사용
◦
모바일 중심 UI를 효율적으로 구현할 수 있음
•
shadcn/ui
◦
공통 UI 컴포넌트의 기반으로 사용
◦
프로젝트 스타일과 디자인 시스템에 맞게 확장 가능
•
React Hook Form / Zod
◦
로그인, 회원가입, 닉네임 수정 등 폼 상태 관리 및 유효성 검증에 사용
◦
입력 규칙을 일관되게 적용할 수 있도록 구성
•
Storybook / Chromatic
◦
UI 컴포넌트를 독립된 환경에서 개발하고 문서화하기 위해 사용
◦
시각적 회귀 테스트와 협업 품질 관리에 활용
Backend
•
Java 17 / Spring Boot
◦
안정적이고 구조적인 비즈니스 로직 구현을 위해 사용
◦
인증, 사용자, 학습, 오답노트 등 도메인 중심 설계 가능
•
Spring Data JPA / QueryDSL
◦
객체 중심 데이터 처리와 복잡한 동적 쿼리 작성을 위해 사용
◦
유지보수성과 타입 안정성을 함께 확보
•
MySQL (Amazon RDS)
◦
사용자 데이터와 학습 데이터의 정합성을 보장하기 위해 사용
◦
AWS 환경에서 안정적으로 운영 가능
•
Spring Security / JWT
◦
인증/인가 체계를 구축하기 위해 사용
◦
무상태 기반 인증 구조를 통해 확장성과 보안성을 확보
•
OAuth 2.0 (Google, Naver)
◦
소셜 로그인 지원을 위해 사용
◦
가입 진입장벽을 낮추고 사용자 편의성을 높임
Infra / DevOps
•
AWS EC2 / ALB / Route 53 / S3
◦
서버 운영, HTTPS 구성, 트래픽 분산, 파일 저장을 위해 사용
◦
운영 환경의 안정성과 확장성을 고려한 인프라 구성
•
Docker
◦
실행 환경 차이를 줄이고 배포 일관성을 높이기 위해 사용
•
Jenkins
◦
빌드 및 배포 자동화를 위한 CI/CD 파이프라인 구성에 활용
협업 및 문서화 도구
•
Jira / Confluence
◦
워크플로우 관리, 문서화, 이슈 트래킹을 위해 사용
◦
협업 과정의 투명성과 업무 연속성을 높임
•
Swagger
◦
API 명세 자동화를 통해 프론트엔드와 백엔드 간 협업 비용을 줄임
트러블 슈팅
1. 인증 안정화: 토큰 재발급 중복 요청 및 무한 루프 문제 해결
문제
Access Token이 만료된 상태에서 여러 API 요청이 동시에 발생할 경우, 각 요청이 중복으로 refresh를 시도하면서 race condition이 발생했습니다. 또한 refresh 실패 시 인터셉터가 반복 실행되며 무한 루프에 빠질 위험이 있었습니다.
해결
Axios 인터셉터에서 토큰 검증 및 재발급 로직을 중앙화하고, refresh 요청을 단일 Promise로 관리하여 한 번만 실행되도록 제어했습니다. 또한 _retry 플래그를 통해 재시도 횟수를 제한하고, refresh 요청 자체는 인터셉터 재진입 대상에서 제외했습니다.
결과
동시 요청 환경에서도 인증 흐름이 안정적으로 동작하게 되었고, 중복 refresh 요청과 무한 재시도 문제를 방지할 수 있었습니다.
2. 새로고침 이후 인증 상태 복구
문제
메모리 기반으로만 액세스 토큰을 관리할 경우, 사용자가 새로고침을 하면 인증 상태가 쉽게 유실되어 로그인 유지 경험이 자연스럽지 않았습니다.
해결
persist 기반 저장 전략을 적용하고, 앱 재실행 시 사용자 정보 재조회 흐름과 연결하여 토큰 유효성을 확인한 뒤 상태를 복구하도록 구성했습니다.
결과
브라우저 새로고침이나 재진입 이후에도 사용자 인증 흐름이 끊기지 않도록 개선하여 사용 연속성을 높였습니다.
3. React Query 기반 조회 규칙 통일
문제
학습 메인, 로드맵, 챕터 상세, 오답노트 등 여러 화면에서 데이터를 조회하다 보니 로딩, 에러 처리, fallback 방식이 화면마다 달라 유지보수성이 떨어졌습니다.
해결
주요 조회 로직을 React Query 훅 중심으로 재구성하여 데이터 계층과 렌더링 계층의 역할을 분리했습니다.
결과
조회 규칙이 일관되게 정리되었고, 화면별 예외 처리와 유지보수 효율이 향상되었습니다.
4. Mixed Content 및 보안 쿠키 정책 문제 해결
문제
프론트엔드와 백엔드 간 프로토콜 불일치로 Mixed Content 에러가 발생했고, Refresh Token을 Body로 전달하는 방식은 보안상 취약점이 존재했습니다.
해결
AWS Route 53, ACM, ALB를 활용해 전 구간 HTTPS 통신을 구성하고, Refresh Token 전달 방식을 HttpOnly, Secure, SameSite=None 속성을 적용한 Cookie 방식으로 변경했습니다.
결과
소셜 로그인 및 인증 흐름이 안정화되었고, XSS 및 CSRF 공격 위험을 줄인 보안 구조를 마련할 수 있었습니다.
5. 오답노트 무한 스크롤 성능 개선
문제
초기 오답노트 목록 API는 Offset 기반 페이지네이션을 사용해 데이터 양이 증가할수록 성능이 저하되고, 중간 데이터 변동 시 중복 노출이나 누락 가능성이 있었습니다.
해결
커서 기반 페이지네이션을 도입하고, nextCursor와 hasNext 구조를 활용해 무한 스크롤 API를 재설계했습니다. 또한 불필요한 Count 쿼리를 줄이기 위해 실제 요청 수보다 1개 더 조회하는 방식으로 최적화했습니다.
결과
실시간 데이터 변화가 있는 상황에서도 더 안정적인 무한 스크롤 경험을 제공할 수 있었고, 데이터 증가에 따른 조회 성능 저하를 줄일 수 있었습니다.
6. 데이터 무결성을 위한 스냅샷 패턴 적용
문제
오답노트가 원본 퀴즈 데이터를 직접 참조하는 구조에서는, 원본 퀴즈 수정 또는 삭제 시 사용자의 과거 학습 기록이 변형될 수 있는 문제가 있었습니다.
해결
채점 시점의 퀴즈 정보를 별도 객체로 저장하는 스냅샷 패턴을 도입하여, 오답노트가 원본 퀴즈와 독립적으로 유지되도록 설계했습니다.
결과
마스터 데이터가 변경되어도 사용자의 학습 기록은 보존되도록 개선하여 데이터 무결성과 신뢰성을 높였습니다.
7. 부하 테스트 기반 성능 개선
문제
동시 접속 환경에서 CPU 사용량과 응답 시간이 증가하며 병목이 발생했습니다. 초기에는 DB 쿼리만 문제로 보였지만, 실제로는 커넥션 풀 대기 시간과 서버 리소스 한계가 함께 영향을 주고 있었습니다.
해결
UserQuizAnswer 테이블에 복합 인덱스를 추가하고, 불필요한 Count 쿼리를 줄였으며, 부하 테스트 조건과 서버 상태를 반복 측정하여 병목 지점을 분석했습니다.
결과
최종적으로 CPU 사용량은 약 50% 감소했고, 응답 시간은 342ms에서 70.9ms로 약 79% 단축되었습니다. 이를 통해 단순 쿼리 튜닝을 넘어 인프라 자원과 데이터 구조를 함께 고려한 성능 개선의 중요성을 확인할 수 있었습니다.
팀 소개
소개말
안녕하세요. Bitelearn 프로젝트를 진행한 팀입니다.
저희는 사회초년생이 주거, 근로, 금융 계약처럼 실생활에 직접 연결되는 문제를 더 쉽고 실전적으로 학습할 수 있도록 돕는 서비스를 만들고자 했습니다.
프로젝트를 진행하며 PM, PD, FE, BE가 각자의 전문성을 바탕으로 협업했고, 사용자에게 실질적으로 도움이 되는 학습 경험을 만드는 데 집중했습니다.
특히 단순한 정보 전달을 넘어, 실제 상황에서 스스로 판단할 수 있는 기준을 익히도록 돕는 서비스 구조를 설계하는 데 의미를 두었습니다.
Bitelearn은 짧고 직관적인 학습 흐름, 실제 사례 기반 퀴즈, 오답노트와 같은 복습 기능을 통해 사회초년생의 금융·계약 리스크 대응력을 높이고자 한 프로젝트입니다.
팀 전체가 제한된 기간 안에서 문제 정의부터 기획, 디자인, 개발, 테스트, 배포까지 함께 경험하며 하나의 서비스로 완성해냈다는 점에서 뜻깊은 작업이었습니다.
팀 구성
•
PM: 시장/유저 리서치, PRD 및 기능 명세서 작성, 학습 콘텐츠 설계, 사용자 테스트, 정책 및 법률 리스크 검토, 일정 및 리소스 관리
•
PD: UX 전략 수립, 디자인 시스템 구축, 와이어프레임/프로토타입 설계, 시각적 아이덴티티 확립
•
FE: 프론트엔드 아키텍처 설계, UI 구현, 인증 흐름 및 상태 관리, Storybook 기반 컴포넌트 문서화
•
BE: 서버 아키텍처 설계, DB 모델링, API 개발, 인증/보안 구조 설계, CI/CD 및 성능 최적화
프로젝트 리뷰 / 배운 점
이번 프로젝트를 통해 가장 크게 배운 점은, 좋은 서비스는 단순히 기능을 많이 담는 것이 아니라 사용자가 실제로 필요로 하는 문제를 정확히 정의하고, 그것을 실행 가능한 형태로 구조화하는 과정에서 만들어진다는 점이었습니다.
또한 협업 프로젝트에서는 각 직군의 역할 수행도 중요하지만, 그보다 먼저 공통의 목표와 기준을 맞추는 과정이 매우 중요하다는 것을 배울 수 있었습니다.
기획, 디자인, 개발이 각자 따로 움직이는 것이 아니라 하나의 서비스 흐름 안에서 연결될 때 결과물의 완성도가 높아진다는 점도 체감했습니다.
기술적으로는 인증, 상태 관리, 데이터 흐름 설계, 성능 개선, 보안 구조 등 실제 서비스 운영에 필요한 다양한 요소를 경험할 수 있었고, 문제 상황이 발생했을 때 이를 분석하고 개선하는 과정 역시 큰 배움이 되었습니다.
무엇보다 이번 프로젝트는 사회초년생에게 필요한 정보를 어떻게 더 쉽고 실질적으로 전달할 수 있을지 고민한 과정이었고,
사용자에게 도움이 되는 제품을 만드는 일이 단순한 구현을 넘어 문제 해결의 과정이라는 점을 다시 확인할 수 있었던 경험이었습니다.