Funda.

"기초를 재미있게, 꾸준히 쌓아가는 학습 서비스를 만듭니다."

매끄러운 통합

비로그인 사용자가 로그인 사용자로 전환되는 순간, 단 한 점의 데이터 유실 없이 학습 이력을 통합합니다.

견고한 안정성

보안과 편의성 사이의 최적점을 찾아, HttpOnly 쿠키 기반의 견고한 인증 체계를 구축했습니다.

역동적인 몰입

정적인 문제 풀이를 넘어 랜덤화된 퀴즈와 시각적 보상을 통해 몰입도 높은 학습 경험을 선사합니다.

구분	주요 구현 성과	기대 효과
인증 체계	OAuth 연동 및 HttpOnly JWT 기반 인증 고도화	보안 리스크 최소화 및 끊김 없는 세션 유지
퀴즈 엔진	Fisher-Yates 기반 랜덤 셔플 및 정산 로직 구축	반복 학습 시 지루함 해소 및 공정한 성과 측정
사용자 경험	연속 학습(Streak) 애니메이션 및 효과음 시스템 도입	시각적/청각적 보상을 통한 학습 동기 부여 강화
시스템 기반	전역 응답 구조화 및 Docker 기반 Storybook 구축	개발 생산성 향상 및 프론트엔드 컴포넌트 관리 최적화

쿠키 기반 저장 방식을 채택한 이유

XSS(Cross-Site Scripting) 위험을 최소화하고, 브라우저 환경에서 가장 안정적인 인증 상태를 유지하기 위해 전용 보안 쿠키 방식을 도입했습니다.

XSS 공격 방어: Access/Refresh 토큰 모두 HttpOnly를 적용하여 JS 접근을 원천 차단
인증 영속성 확보: 새로고침 시 인증이 풀리는 메모리 저장 방식의 한계를 극복하고 세션 유지
보안 옵션 강제: HTTPS 환경에서만 전송되는 Secure 및 SameSite 설정 적용

AUTH FLOW & SECURITY TRADE-OFF

인증 자동화: 프론트엔드는 credentials: include 기반으로 모든 요청을 수행하며, 401 에러 발생 시 /auth/refresh를 통한 토큰 재발급 및 재요청 로직을 자동화했습니다.

향후 과제: 쿠키 방식을 채택함에 따라 발생하는 CSRF 취약점에 대비하기 위해 CORS 및 SameSite 정책을 강화할 예정이며, 이는 프로젝트의 후속 보안 과제로 지속 관리할 예정입니다.

비로그인에서 로그인으로의 매끄러운 전환

로컬 학습 기록 시작

➔

진도 및 정오답 실시간 추적

➔

로그인 시점 동기화 요청

➔

서버 DB 통합 및 로컬 초기화

자산 형성의 경험

비로그인 상태에서 푼 문제들이 로그인을 하는 순간 자신의 '자산'으로 정산되는 경험을 설계하여 가입 전환율을 높였습니다.

정교한 데이터 정산

결과만 저장하지 않고 풀이 과정 전반을 함께 반영해, 학습 기록의 일관성과 신뢰도를 높였습니다.

학습 몰입도를 결정하는 디테일

단순한 문제 노출을 넘어, 학습자가 매 순간 긴장감을 유지할 수 있도록 퀴즈 엔진을 고도화했습니다.

정밀한 랜덤화: 문제와 선택지 모두 셔플하여 단순 위치 암기 방지
성과 정산: 현재는 고정 점수로 계산하지만, 난이도·시간 가중치를 적용할 수 있도록 구조를 설계
통합 검증 체계: 코드 추론부터 매칭형까지 단일 API로 정교하게 검증

로직 설계 및 기대 효과

정교한 랜덤화: 문제와 선택지를 클라이언트에서 셔플해 매번 다른 흐름을 제공하고, 반복 암기를 줄였습니다.
같은 스텝이라도 매번 새로운 느낌을 주어 집중력을 유지시키는 데 기여합니다. 즉각적인 성과 피드백: 서버는 제출 결과를 검증해 성공률과 소요 시간을 계산하고, 결과 화면에서 바로 확인할 수 있도록 했습니다.
학습자가 자신의 상태를 즉시 점검하고, 다음 행동을 빠르게 결정하도록 돕습니다.

[시각] 점수 획득 연출
퀴즈 완료 직후 획득 점수를
애니메이션으로 강조 표시

[시각] 연속 학습 보상
Streak 달성 시 화려한 애니메이션으로
성취감 극대화

[청각] 사운드 피드백
정답 시 경쾌한 효과음과
오답 시 부드러운 알림음 제공

가독성 개선: 다크모드 대응 및 해설 텍스트 시인성 최적화

예외 처리: 전역 에러 핸들링 도입으로 예기치 못한 중단 방지

              https://funda.website/
            

funda.website

Click to Launch Demo

학습의 동반자, Funda Friends

단순한 퀴즈 풀이를 넘어, 사용자와 함께 성장하는 3D 캐릭터를 개발했습니다.
고유한 페르소나를 가진 캐릭터는 학습자에게 정서적 유대감을 제공하며 지속적인 학습을 유도합니다.

견고한 시스템의 기초

팀 협업의 효율과 서비스 확장성을 위한 기술적 인프라를 마련했습니다.

전역 응답 표준화: 성공/실패 응답 포맷을 일원화하여 통신 안정성 확보
컴포넌트 독립 개발: Docker 환경 내 Storybook 구축으로 UI 테스트 자동화
데이터 모델 고도화: 신고/로그/진행률 처리를 위한 DB 마이그레이션 완료
상태 복원 로직: 이전 학습 및 스크롤 위치 자동 복구 시스템 구축

향후 개발 로드맵

AI 실시간 질의응답

경험치 기반 랭킹 시스템

개인화 분석 대시보드

각 유닛 별 학습 개요 및 디테일한 해설 제공

질의응답

퀴즈 난이도/흐름

퀴즈 난이도와 흐름은
어떠셨나요?

게이미피케이션/캐릭터

애니메이션 같은 게이미피케이션 연출과
캐릭터 경험도 피드백 부탁드립니다.