[Mate] 개발일지 #19 - 메인 페이지 로딩 속도 개선 및 인터랙션 반응성 최적화

메인 페이지의 로딩 지연 문제를 해결하기 위해 데이터베이스 반정규화와 조회 로직 분리를 수행하여 LCP(Largest Contentful Paint)를 단축했다. 또한 비회원 유입을 위한 UX 패턴을 적용하고, 낙관적 업데이트(Optimistic Update)를 도입하여 사용자의 인터랙션 지연 시간을 제로(Zero Latency) 수준으로 최적화했다.

DB 반정규화 및 N+1 문제 해결을 통한 로딩 속도 단축

현상 및 원인

서비스 초기 로딩 시간이 평균 2.8초로 측정되어 사용자 경험 저하가 우려되었다. 프로파일링 결과, 게시글 목록 조회 시 각 객체의 좋아요 및 댓글 수를 산출하기 위해 수백 개의 연관 객체를 메모리에 로드하는 N+1 문제가 발생하고 있었다.

해결 과정

단순 쿼리 최적화의 한계를 극복하기 위해 DB 반정규화(Denormalization)를 단행했다. posts 테이블에 like_count, comment_count 컬럼을 추가하여, 쓰기 시점(Write)에 연산 비용을 지불하고 읽기 시점(Read)의 조회 복잡도를 $O(N)$에서 $O(1)$로 낮췄다. 또한 ORM 로직에서 무거운 joinedload 관계 설정을 제거하고 단순 컬럼 조회로 변경했다.

결과

불필요한 JOIN 연산과 데이터 전송량이 감소하여 로딩 시간이 2.8초에서 2.2초로 약 21% 개선되었다.

조회 로직 분리 및 DTO 구조 최적화

현상 및 원인

메인 페이지의 목록(List) 조회 API가 본문 전체나 개별 사용자의 좋아요 여부 등 불필요하게 무거운 데이터를 포함하고 있어 서버 리소스 낭비가 발생했다.

해결 과정

목록 조회와 상세 조회의 책임을 명확히 분리했다. 백엔드에서는 Pydantic 스키마를 PostListResponse(경량)와 PostResponse(상세)로 이원화하고, 프론트엔드 타입 정의 또한 PostSummary와 PostDetail로 분리했다. 목록 조회 API(read_posts)에서는 사용자별 상태 확인 로직을 제거하고 순수 메타데이터만 반환하도록 구조를 경량화했다.

낙관적 업데이트 및 사용자 상태 주입

현상 및 원인

좋아요 버튼 클릭 시 서버 응답 대기로 인한 딜레이가 발생하거나, 새로고침 시 상태가 초기화되는 플리커링(Flickering) 현상이 있었다.

해결 과정

백엔드 read_post API 호출 시 current_user 정보를 주입하여 is_liked, is_scrapped 상태를 서버 사이드에서 계산해 내려주도록 수정했다(Single Source of Truth). 프론트엔드에서는 React Query의 onMutate를 활용한 낙관적 업데이트(Optimistic Update)를 적용했다. 서버 요청 전 UI 상태를 선제적으로 변경하고, 실패 시에만 롤백하는 방식으로 체감 지연 시간을 0ms로 단축했다.

비회원 전환 유도 UX 및 Fake UI 패턴 적용

현상 및 원인

비회원에게 기능 버튼이 노출되지 않아 가입 전환(Conversion) 기회를 놓치는 문제가 있었다.

해결 과정

Fake UI 패턴을 적용하여 비회원에게도 댓글 입력창과 좋아요 버튼을 노출했다. 해당 요소를 클릭할 경우 즉시 로그인 모달(LoginAlertModal)을 띄워 자연스럽게 가입을 유도했다. 또한 스크랩 기능 사용 시 마이페이지 이동을 제안하는 모달을 추가하여 기능 활용도를 높였다.

Insight

데이터의 일관성(Consistency)과 사용자 반응성(Responsiveness)은 상충 관계가 아님을 확인했다. 백엔드에서의 정확한 상태 주입(Context Injection)과 프론트엔드의 낙관적 업데이트가 결합될 때 최상의 경험을 제공할 수 있다. 또한 API 설계 시 기계적인 CRUD를 넘어, "현재 화면에 필수적인 데이터인가?"를 기준으로 DTO를 분리하는 것이 성능 최적화의 핵심임을 배웠다.