MicroStrategy 리포트 프리로드를 통한 UX 개선 전략 (Preloading)

1. 문제 상황
    게시글 목록에서 특정 항목을 클릭하면 해당 상세 정보와 함께 MicroStrategy(MSTR) 리포트를 조회하는 구조였습니다. 하지만 기존 방식에서는 다음과 같은 기술적 한계가 발생했습니다.

* 게시글을 클릭할 때마다 MSTR 리포트를 새롭게 로드하며 발생하는 지연 시간
* 네트워크 환경에 따른 불규칙한 로딩 속도로 인한 사용자 대기 발생
* 클릭 후 화면 표시까지의 물리적 간극으로 인한 사용자 경험(UX) 저하

결과적으로 사용자가 콘텐츠를 소비하기 위해 매번 수 초간의 로딩을 견뎌야 하는 구조적 결함이 있었습니다.

⸻

2. 기존 동작 흐름
    기존의 방식은 사용자의 명시적인 액션이 일어난 후 데이터를 요청하는 흐름을 가졌습니다.

1. 사용자의 게시글 클릭
2. MSTR 리포트 호출 API 전송
3. 서버 및 MSTR 엔진 응답 대기
4. 전체 화면 렌더링 및 리포트 표시

이 방식은 사용자의 행동 이후에 모든 로드 작업이 시작되므로, 성능 최적화 관점에서 개선이 필요했습니다.

⸻

3. 개선 아이디어: Preloading 전략
    문제 해결의 핵심은 “사용자의 다음 행동을 예측하여 데이터를 선행 로드하는 것”입니다. 이를 위해 Preloading(프리로드) 기법을 도입하여 물리적 로딩 시간을 백그라운드 작업으로 전환했습니다.

⸻

4. 개선된 시스템 구조

초기 진입 단계

* 페이지 진입 시 첫 번째 게시글을 기본값으로 자동 선택합니다.
* 백그라운드에서 해당 게시글의 MSTR 리포트를 즉시 호출합니다.

사용자 액션 단계

* 사용자가 게시글을 클릭하는 시점에는 이미 리소스가 준비되어 있거나 로딩이 상당 부분 진행된 상태입니다.
* 이미 로드된 리포트를 즉각적으로 화면에 노출합니다.

⸻

5. 구현 핵심 포인트

1. MSTR 리포트 프리로드 로직

* 페이지 로드 시점에 API를 호출하여 iframe 또는 지정된 컨테이너에 리포트를 미리 렌더링합니다.
* 사용자가 클릭했을 때 다시 서버를 호출하지 않고, 미리 준비된 DOM 요소를 활성화하는 방식을 사용했습니다.

2. 상태 관리를 통한 데이터 정합성 유지

* isLoading 상태 변수를 활용하여 비동기 통신의 시작과 끝을 추적합니다.
* 데이터 로드가 완료되지 않은 상태에서 사용자가 다른 액션을 수행할 경우를 대비한 예외 처리를 포함했습니다.

3. 사용자 피드백(로딩 UI) 강화

* 리포트가 완전히 로드되기 전까지 스피너 또는 스켈레톤 UI를 표시합니다.
* 시스템이 멈춘 것이 아니라 데이터를 로딩 중이라는 명확한 신호를 전달하여 사용자 이탈을 줄였습니다.

⸻

6. 개선 결과 비교

Before

* 클릭 시마다 네트워크 요청이 발생하고 로딩 대기 발생
* 화면 전환 시 시각적 끊김 발생

After

* 체감 로딩 시간 최소화
* 비동기 처리를 통한 자연스러운 인터랙션 구현
* MSTR 엔진 부하 분산 효과

⸻

7. 기술 개념 요약

Preloading
사용자 행동 이전에 리소스를 미리 로드하여 응답 속도를 높이는 전략

UX (User Experience)
시스템 사용 과정에서 사용자가 느끼는 총체적인 경험으로, 응답 속도는 핵심 요소 중 하나

Lazy Loading
실제 필요한 시점까지 로딩을 지연시키는 방식으로, Preloading과 반대 개념

⸻

8. 마치며
    이번 작업은 단순한 기능 개선을 넘어, 사용자 관점에서 성능을 재정의하는 경험이었습니다. 비동기 설계와 UI 피드백을 함께 고려했을 때 체감 성능이 크게 향상된다는 점을 확인할 수 있었습니다.

향후에는 다수의 요청이 동시에 발생할 때 나타나는 Race Condition 문제를 해결하여 보다 안정적인 비동기 처리 구조를 구현할 계획입니다.

⸻

#SpringBoot #Java #UX개선 #Preloading #성능최적화 #비동기처리