📌“사용자 경험을 끌어올린 진도율 Ajax 업데이트 컨트롤러”

🗓 2025-07-02

✍️ 박찬희

---

🔧 구현 목표

기존 학습 콘텐츠에서 사용자의 진도율(progress)을 저장할 때마다 전체 페이지가 리로드되는 방식은

UX 관점에서 너무나 고통스러웠다.

학습이 완료될 때마다 페이지가 다시 뜨고, 수료 체크가 딜레이되는 구조.

나는 이 문제를 단번에 없애고 싶었다.

그래서 이번에 새로 설계한 것이

/lecture/progress/update 경로로 작동하는 Ajax 기반 진도율 업데이트 컨트롤러다.

---

📌 주요 시도: 한 요청에 담긴 일관된 흐름

• 세션 인증 체크
• JSON 바디 파싱 및 타입 안정성 확보
• 진도율 저장 (upsert + 상태 비교)
• 자동 수료 처리
• 일관된 JSON 응답 구조

이 흐름은 단순히 기술적인 구현을 넘어서

“사용자가 학습하는 동안 시스템은 조용히, 정확하게 반응해야 한다”는 철학을 구현한 흐름이다.

---

📁 구조 요약

계층	클래스/파일	역할
Controller	ProgressAjaxController	Ajax 요청 핸들링, 응답 포맷 처리
Service	ProgressService	진도율 저장 및 수료 상태 전이
DAO/Mapper	ProgressMapper (MyBatis)	DB Upsert, 수료 여부 검사 등

---

🚀 구현 흐름 상세

1️⃣ 로그인 검증 – 보안은 가장 먼저

HttpSession session = req.getSession();
UserDTO user = (UserDTO) session.getAttribute("user");

if (user == null) {
    resp.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
    result.put("success", false);
    result.put("message", "로그인이 필요합니다.");
    ...
}

• 세션 기반 인증 체크
• 로그인 안 된 상태에서의 Ajax 요청은 무조건 401 반환

📍 실무 팁: Ajax 요청일수록 보안 처리는 더욱 엄격해야 한다.

---

2️⃣ JSON 바디 파싱 – 직접 읽고, 직접 확인했다

BufferedReader reader = req.getReader();
StringBuilder sb = new StringBuilder();
String line;
while ((line = reader.readLine()) != null) {
    sb.append(line);
}
Map<String, Object> data = gson.fromJson(sb.toString(), Map.class);

• JS의 number → Java에서 Double로 넘어오는 이슈를 감안
• .intValue() 명시적 변환

int contentId = ((Double) data.get("contentId")).intValue();
int progress = ((Double) data.get("progress")).intValue();

📍 실전에서 중요한 건 타입 안정성이다.

프론트엔드는 float을 보내고, 백엔드는 int를 받는다고 착각하면… 500은 예고 없이 날아온다.

---

3️⃣ 진도율 저장 – upsert + 수료 체크까지 한 번에

progressService.saveOrUpdateProgress(user.getUserId(), contentId, progress);

• 기존보다 높은 진도만 저장 (DB 부하 방지)
• 콘텐츠 전체 완료 시 자동으로 markEnrollmentComplete 호출

📍 핵심은 컨트롤러는 흐름만 알고, 도메인 상태는 서비스가 책임진다.

---

4️⃣ JSON 응답 – 일관성 있는 성공/실패 구조

result.put("success", true);
result.put("message", "진도율 업데이트 성공");
resp.getWriter().write(gson.toJson(result));

• 프론트에선 success: true/false만으로 결과 처리
• 에러 발생 시 status = 500 + "message" 포함

📍 이런 구조 덕분에 프론트는 실패 케이스도 UI로 명확하게 처리할 수 있다.

---

🧪 테스트 시나리오

테스트 상황	기대 동작
✅ 로그인 사용자	200 OK + { success: true }
❌ 비로그인 상태	401 Unauthorized + "로그인이 필요합니다."
❌ JSON 파라미터 누락	500 + 오류 메시지
✅ 수료 조건 만족	markEnrollmentComplete() 호출됨

---

🚧 트러블슈팅 & 고민

🔍 문제: JS에서 보낸 숫자가 자꾸 Double로 들어온다

→ 해결: ((Double) obj).intValue() 명시 변환

→ 원인: JS number는 float이며, Gson은 모든 숫자를 Double로 처리

---

🧠 배운 점

• Ajax 컨트롤러도 결국 도메인 흐름을 조율하는 오케스트라 지휘자라는 걸 실감했다.
• 응답 포맷, 인증, 예외 흐름이 정리되면 프론트와의 통신은 훨씬 부드러워진다.
• 실시간 진도율 저장 구조는 단순히 기능 구현이 아니라 사용자 신뢰감을 형성하는 핵심 UX 포인트라는 것.

---

✍️ 회고

“단순 진도 저장이었지만, 이 컨트롤러는 사용자 경험과 도메인 상태 전이를 완전히 자동화한 전환점이었다.”

이 구조는 이후 다음을 위한 기반이 된다:

• ✅ React 기반 실시간 학습 UI와 연동
• ✅ 자동 수료 → 인증서 발급 → 포인트 지급까지 확장 가능
• ✅ 사용자 히트맵/행동 로그/추천 로직의 핵심 데이터 흐름의 시작점