BFF(BackEnd For FrontEnd)를 적용하는 이유에 대해서

요즘 서비스는 대부분 MSA(Micro Service Architecture) 기반으로 개발한다.

서비스마다 API가 독립적으로 존재하다 보니, 프론트엔드는 여러 API를 호출해 원하는 데이터를 조합해야 한다.

 

이 과정에서 문제가 발생하는데 예를 들어,

• Web, Android, iOS 등 플랫폼별로 서로 다른 데이터 요구사항이 발생한다.
• 원하는 데이터 형태를 얻기 위해 여러 API 응답을 조작하고 합치고 가공해야 하는 일이 생긴다.
• 결과적으로 프론트엔드 단에서 비즈니스 로직이 과도하게 쌓이고, 렌더링 성능까지 저하되는 문제가 나타난다.

이때 프론트엔드는 UI 스레드가 렌더링과 로직 수행을 같이 담당하게 되면, 화면 반응 속도는 느려지고 코드베이스는 복잡해져 유지보수조차 힘들어진다. 이 문제를 해결하기 위해 BFF(Backend for Frontend)를 적용하는 것이다. 여러 API를 한 번에 모아 프론트엔드가 필요한 형태로 가공해주니, 프론트에서는 UI 구현에만 집중할 수 있고, 성능과 개발 생산성이 모두 향상된다.

API 방식과 BFF 방식의 차이

일반적인 API 방식

다양한 플랫폼을 동시에 지원하는 API는 종종 애플리케이션에서 실제로 사용하지 않는 데이터까지 포함하는 경우가 많다. 예를 들어, 웹·안드로이드·iOS가 같은 API를 호출한다고 가정해보자. 이때 백엔드 개발자는 모든 플랫폼의 요구사항을 충족시키기 위해 필요 이상의 데이터를 한 번에 내려주는 방식으로 API를 구현하게 된다. 여기에 더해 백엔드에서 내부 처리용으로 필요했던 부가 데이터까지 딸려오거나, 하나의 화면을 구성하기 위해 여러 API를 연속해서 호출해야 하는 상황도 쉽게 발생한다.

 

문제는 API에 직접적으로 의존할 때 나타난다.

 

• MSA(Micro Service Architecture) 환경에서는 API 엔드포인트가 분리되면서 따라오는 팔로업 이슈가 생긴다.
• 브라우저 환경이라면 피할 수 없는 CORS 문제도 있다.
• API를 설계하는 쪽에서는 여러 플랫폼과 스펙을 맞추느라 커뮤니케이션 비용이 급증한다.
• 플랫폼별 인증 방식이 다른데 이를 억지로 통합하려다 보니, 오히려 구조가 꼬이는 경우도 생긴다.
• 무엇보다 클라이언트 입장에서는 “화면에 필요한 데이터만 받는” 것이 이상적인데, 현실에서는 partial response가 쉽지 않다.

일반적으로 각각 API를 호출하게 되면, 응답 값을 그대로 받아서 보통은 가공해서 상태관리에 저장하게 된다. GET으로 호출하게 되면 브라우저의 캐시를 통해 응답 값을 그대로 받아 처리할 수 있겠지만, 매번 상태관리에서 연산이 필요한 것은 마찬가지다. 중요한 것은 화면에 필요하지 않은 값들이 내려오고 브라우저쪽에서는 두 개의 API 요청을 각각 해야 한다는 점이다.

 

 

BFF 구조

앞서 말한 API 의존성 문제들을 해결하기 위해 등장한 개념이 바로 BFF(Backend For Frontend)다. 말 그대로 프론트엔드를 위한 중간 서버를 두는 것이라고 이해하면 된다.

 

구조를 보면, 하나의 프론트엔드에는 하나의 BFF가 붙어야 한다. 그리고 이 BFF는 해당 프론트엔드가 필요로 하는 데이터 형태에 맞춰 구현할 수 있다. 그래서 여러 플랫폼(Web, iOS, Android 등)을 동시에 지원하지 않는 서비스라면 BFF를 굳이 둘 필요가 없을 수도 있다.

 

BFF가 하는 일은 단순하다.

• 흩어진 여러 API 데이터를 프론트엔드 요구사항에 맞게 통합해 가공한다.
• 프론트엔드와 백엔드를 느슨하게 연결해 독립성을 유지시켜준다.
• 궁극적으로는 프론트엔드 개발자가 직접 구현하고 운영하는 게 가장 이상적이다.

결과적으로, 앞에서 언급했던 문제들을 BFF에서 처리할 수 있다.

• MSA 환경에서 엔드포인트가 늘어나며 생기는 팔로업 문제
• 브라우저 특성상 피할 수 없는 CORS 이슈
• 플랫폼마다 다른 스펙을 맞추느라 생기는 커뮤니케이션 비용
• 플랫폼별로 제각각인 인증 방식 처리
• 클라이언트가 원하던 “화면에 필요한 데이터만 받는” partial response

즉, BFF는 프론트엔드가 UI와 사용자 경험에 집중할 수 있도록 환경을 정리해주는 역할을 맡는다.

 

 

- 참조

https://tech.kakaoent.com/front-end/2022/220310-kakaopage-bff/