컬리, GraphQL 기반 BFF 도입으로 프론트엔드 생산성 및 백엔드 의존성 개선
핵심 내용
컬리 핀테크그룹이 NestJS와 GraphQL 기반 BFF를 도입해 프론트엔드 생산성을 높이고 백엔드 변경 영향을 차단했다.
자세히 보기
컬리 핀테크그룹은 MSA 도입으로 인한 프론트엔드의 API 관리 부담과 플랫폼별 중복 구현 문제를 해결하기 위해 **GraphQL 기반 BFF(Backend for Frontend)**를 도입했다. NestJS, Apollo, Fastify를 스택으로 채택해 여러 마이크로서비스 데이터를 단일 스키마로 통합하고, 프론트엔드 전용 서버 계층으로 운영한다.
기술 스택 및 아키텍처
NestJS는 모듈 구조로 유지보수성을 확보하고, GraphQL은 한 번의 쿼리로 필요한 데이터만 조회해 불필요한 API 호출을 줄인다. Fastify는 가볍고 빠른 런타임 특성으로 잦은 GraphQL 요청 처리에 적합하며, Apollo Server와 Client는 각각 스키마 정의와 클라이언트 캐싱을 담당한다.
도입 효과 및 캐싱 이슈 해결
graphql-codegen을 활용해 타입스크립트 타입을 자동 생성함으로써 정적 타입 안정성을 확보하고 프론트엔드 개발 속도를 높였다. 또한 백엔드 스펙 변경 시 BFF에서 응답을 매핑해 프론트엔드 수정 없이 동작하도록 유연성을 확보했다.
캐싱 측면에서는 Apollo Client의 기본 캐시 키 정책(__typename:id)으로 인해 고유 식별자가 복합적인 데이터(예: id, idType, kycSeq 조합)에서 병합 오류가 발생했다. 이를 해결하기 위해 typePolicies의 keyFields를 명시적으로 지정해 엔티티별 캐시 충돌을 방지했다.
BFF 도입 고려사항
BFF는 프론트엔드 생산성과 백엔드 변경으로부터의 격리를 제공하지만, 추가 레이어로 인해 실패 지점과 운영 복잡성이 증가한다. 따라서 서비스 도메인이 복잡해지고 마이크로서비스가 다수 존재하며 백엔드 스펙 변경이 잦은 대규모 프로젝트에 적합하다. 개인 프로젝트나 단일 페이지 중심 서비스에서는 구현 복잡도 절감을 위해 BFF 생략을 고려할 수 있다.
이 한국어 요약은 AI가 자동으로 만들었습니다. 원문의 주장과 맥락은 원문에서 확인해 주세요. 저작권은 원저작자에게 있습니다.