AI 아이디어 × AI 검색 통합기: 낙관적 업데이트로 완성한 더 빠른 사용자 경험 누리미디어 테크블로그
AI 아이디어 × AI 검색 통합기: 낙관적 업데이트로 완성한 더 빠른 사용자 경험
누리미디어 테크블로그
about 1
AI 아이디어 × AI 검색 통합기
: 낙관적 업데이트로 완성한 더 빠른 사용자 경험
about 1
안녕하세요. 누리미디어 프론트엔드 개발자입니다.
입사 후, 기존에 DBpia에서 제공하던 아이디어 서비스를 AI 검색 서비스와 통합하는 작업을 담당하게 되었습니다.
이번 글에서는 아이디어 서비스 통합 과정에서 적용한 낙관적 업데이트(Optimistic Update) 구현 방식과 사용자 경험(UX)을 개선한 과정을 소개하려고 합니다.
제목없음
제목없음
AI 아이디어 서비스란?
먼저, AI 아이디어는 사용자가 입력한 주제나 키워드를 기반으로 ① 주제 추천, ② 목차 초안 작성, ③ 참고자료 추천을 단계별로 제공하는 서비스입니다.
사용자는 전체 단계를 순차적으로 진행할 수도 있고, 필요한 단계만 선택적으로 이용할 수도 있습니다.
이번 프로젝트에서는 기존의 AI 검색 서비스와 AI 아이디어를 하나의 흐름으로 통합해야 했습니다. 하지만 두 서비스의 동작 방식이 달랐기 때문에 단순히 API를 묶는 수준으로는 해결할 수 없었습니다. 특히 아이디어는 단계별 진행 구조를 갖고 있어, 각 단계별로 분리해 관리할 수 있는 전용 로직과 상태 관리 구조가 필요했습니다.
AI 검색은 사용자의 질문에 대한 결과를 즉시 반환하지만, AI 아이디어는 주제 추천 → 목차 초안 작성 → 참고자료 추천으로 이어지는 단계 프로세스 기반의 서비스입니다. 두 서비스의 데이터 흐름과 컴포넌트 구조를 통합하려면, 각 단계별 요청·응답을 독립적으로 관리하면서도 전체 흐름에서는 일관된 사용자 경험(UX) 을 유지해야 했습니다.
이를 위해 AI 아이디어에서는 단계별 상태를 공통 인터페이스로 묶고, AI 검색의 단일 요청 로직을 재활용하되 각 단계에서 필요한 로직을 주입할 수 있도록 구조를 잡았습니다. 이 과정에서 API 응답 처리나 컴포넌트 간 상태 전달 방식 등을 새롭게 설계했고, AI 검색과 AI 아이디어가 독립적으로 동작하지만 하나의 일관된 흐름으로 이어지는 사용자 경험을 제공할 수 있었습니다.
제목없음
제목없음
낙관적 업데이트를 도입하게 된 이유 (UX 관점)
AI 아이디어 서비스에서는 답변이 생성된 이후, 사용자가 답변 결과에 대해 피드백을 남기거나 참고문헌을 북마크로 저장할 수 있는 버튼들이 새로 추가되었습니다. 이 기능들은 사용자가 AI의 답변 품질을 평가하거나, 유용한 결과를 다시 찾아보기 쉽게 하기 위한 인터랙션 요소였습니다.
하지만 초기 구현에서는 버튼을 클릭할 때마다 API 응답을 기다린 후 상태를 갱신하는 구조였기 때문에, 클릭 직후 반응이 잠깐 멈춘 듯한 지연(delay)이 발생했습니다. 실제로는 짧은 시간이었지만, 사용자에게는 버튼이 늦게 반응한다는 느낌을 주기 때문에 서비스의 반응성이 떨어지는 느낌을 줄 수 있었습니다. 이 문제를 해결하기 위해 낙관적 업데이트(Optimistic Update)를 도입했습니다.
낙관적 업데이트란? 사용자가 버튼을 클릭하는 순간, 서버 응답을 기다리지 않고 UI에서 먼저 상태를 토글하여 즉각적인 피드백을 주는 방식입니다. 요청이 실패하면 원래 상태로 롤백되도록 구현하여, 시각적인 반응 속도는 유지하면서도 데이터 일관성을 해치지 않도록 했습니다. 이 변경으로 버튼 클릭 시 반응 속도가 즉각적으로 개선되었고, 사용자는 바로 반응하는 인터랙션을 체감할 수 있습니다.
낙관적 업데이트는 AI 아이디어 서비스의 사용자 경험(UX)을 개선하는 계기가 되었습니다!
제목없음
제목없음
낙관적 업데이트 적용 방식
목적
서버 응답을 기다리지 않고, 사용자가 버튼을 누르는 즉시 UI를 토글(On ↔ Off)하여 체감 지연을 최소화
적용 맥락
답변에 대한 반응, 참고문헌 북마크 토글 액션
1️⃣ 전체 구조 개요
이 훅(useMockAction)은 React Query의 useMutation을 감싼 커스텀 훅입니다.
mutationFn → 실제 서버 API 호출을 담당
onMutate → 서버 요청이 보내지기 직전에 실행되어 낙관적(Optimistic) 업데이트를 처리
onError → 요청 실패 시 이전 상태로 복원
이 구조를 통해 버튼 클릭 즉시 반응하는 UI를 구현하면서도, 서버와의 상태 불일치나 요청 실패 상황에서도 안정적으로 복원할 수 있습니다.
2️⃣ 각 콜백 역할 설명
mutationFn — 서버 요청 처리
역할
실제 서버 API를 호출해 토글된 상태 전송
핵심 포인트
calculateNewMockAction 함수를 통해 현재 type과 kind를 조합하여 다음 상태를 계산하고 서버에 전달
프론트엔드의 토글 상태와 서버의 상태 변화 방향이 일치하여 성공 시 UI 유지
onMutate — 낙관적 업데이트 수행
시점
mutate()가 호출된 직후, 서버 요청이 전송되기 전에 실행
역할
서버 응답을 기다리지 않고 즉시 UI 변경
장점
클릭 즉시 반응하므로 즉각적인 피드백 제공
AI 응답 지연이 있더라도 끊김 없는 사용자 경험(UX) 유지
반응성이 높아져 서비스 체감 속도 개선
💡 낙관적 업데이트는
onMutate → onActionUpdate 호출 과정
onMutate를 통한 즉각적인 UI 업데이트
onError — 롤백 처리
역할
서버 요청이 실패할 경우, mutate() 호출 시 전달된 기존 상태(variables)를 이용해 UI 복원
장점
사용자에게 일시적으로 토글된 상태가 복구되는 자연스러운 경험 제공
불필요한 화면 깜빡임 없이 데이터 일관성과 신뢰성 유지
서버 요청 실패 시 UI 복원
(테스트 환경에서 의도적으로 오류를 발생시킨 예시)
3️⃣ 낙관적 업데이트의 흐름 요약
제목없음
제목없음
결과
낙관적 업데이트를 도입하면서, 단순한 UI 개선을 넘어 사용자 경험(UX) 전반의 반응성과 완성도를 높일 수 있었습니다.
사용자는 클릭과 동시에 상태 변화를 인식할 수 있게 되었고, 요청 실패 시에도 자연스럽게 이전 상태로 복원되어 지연 없는 피드백과 안정적인 인터랙션을 동시에 제공할 수 있었습니다.
이 구조는 아이디어 서비스에만 국한되지 않고, AI 검색에서도 다양한 인터랙션 기능 전반에 재사용되고 있습니다.
React Query의 onMutate와 onError를 기반으로 한 이 패턴은 “즉각적으로 반응하면서도 데이터 일관성을 보장하는 UI”를 구현하기 위한 공통 로직으로 자리 잡았습니다.
누리미디어 프론트엔드 개발자들은 사용자가 느끼는 체감 속도와 경험 품질을 개발의 핵심 지표로 삼고 있습니다.
앞으로도 단순히 동작하는 서비스가 아니라, 사용자에게 빠르고 자연스럽게 반응하는 서비스를 만들기 위해 끊임없이 고민하고 개선해 나갈 예정입니다!
AI 검색, AI 아이디어를 모두 이용할 수 있는 DBpia AI를 이용해 보고 싶다면? ➡️ DBpia AI 이용해 보기
DBpia AI의 기술 스택이 궁금하다면? ➡️ DBpia AI 프론트엔드 기술 스택
