카카오스타일, SDUI 구조 개선으로 성능 UP!
by DD
1년 전
조회수 13
SDUI 초기 단일 쿼리 방식의 확장성 문제, 오류 처리 어려움 발생
컴포넌트별 API 호출 구조로 변경하여 ATF 로딩 시간 단축
P90 기준 670ms에서 개선, 쿼리 분할을 통해 성능 향상 달성
단일 쿼리의 문제점과 해결
초기 SDUI는 단일 쿼리로 모든 데이터를 가져와 컴포넌트 간 의존성이 높았다. 따라서 오류 발생 시 전체 실패로 이어지는 문제가 있었다. 구체적으로 컴포넌트별 API 호출 방식으로 변경하여 독립적인 테스트와 확장성 확보를 동시에 달성했다.
API 호출 구조의 장단점
단일 쿼리는 초기 개발 속도가 빠르지만, 레이턴시 증가와 SPOF 위험이 있다. 반면, 컴포넌트별 API 호출은 ATF 로딩 시간 단축과 유연성 확보에 유리하다. 따라서 GraphQL의 장점을 살리면서도 성능 최적화를 위해 적절한 설계를 선택해야 한다.
SDUI 개선의 실전 적용 가이드
SDUI 설계 시 컴포넌트 간 의존성을 최소화하고, 데이터 지연 로딩을 고려해야 한다. 구체적으로 API 분할을 통해 확장성과 유지보수성을 높일 수 있다. 따라서 모니터링 시스템을 구축하여 성능 변화를 지속적으로 추적하는 것이 중요하다.
