핀테크그룹의 GraphQL 기반 BFF와 프론트엔드 활용기

마이크로서비스가 늘면서 프론트엔드가 여러 API와 인증·CORS 정책을 직접 다뤄야 하는 문제를 줄이기 위해, 핀테크그룹은 NestJS와 Apollo Server 기반의 GraphQL BFF를 운영합니다. BFF가 여러 서비스의 데이터를 단일 스키마로 집계하고, Apollo Client와 graphql-codegen이 선언적 데이터 요청과 TypeScript 타입 생성을 지원해 백엔드 변경의 영향을 줄입니다. 운영 중에는 같은 id를 가진 RegistrationMember 객체가 Apollo 캐시에서 합쳐지는 문제가 발생해, typePolicies의 keyFields에 id·idType·kycSeq를 지정해 해결했습니다. 다만 BFF는 별도 운영 계층과 장애 지점을 추가하므로, 서비스 복잡도와 팀 간 조율 비용이 커지는 상황에 맞춰 도입해야 한다는 점을 강조합니다.

• BFF는 여러 마이크로서비스의 데이터를 프론트엔드 요구에 맞게 집계하고 인증·인가와 CORS 처리를 한곳에 모을 수 있습니다.
• GraphQL Codegen을 사용하면 쿼리에서 TypeScript 타입과 Apollo 훅을 생성해 데이터 접근의 타입 안정성을 높일 수 있습니다.
• Apollo Client의 기본 캐시 키는 보통 __typename과 id로 구성되므로, id만으로 객체를 구분할 수 없는 경우 typePolicies의 keyFields를 재정의해야 합니다.
• 클라이언트 캐시는 화면 반응성을, 백엔드 캐시는 부하와 지연을 관리하는 것이 주된 목적이므로 두 캐시의 책임을 구분해야 합니다.
• BFF는 운영·테스트·장애 대응 부담도 늘리므로, 서비스와 마이크로서비스가 복잡해지거나 프론트엔드와 백엔드 간 변경 비용이 커질 때 도입을 검토할 수 있습니다.