<BFF> BFF에 대한 이해와 구현

1. 소개

* 개요

BFF(Baackend for Frontend)는 프론트엔드 개발자가 클라이언트와 백엔드 사이에서 인터페이스 역할을 수행하는 개념이다. 이번 포스팅에서는 BFF에 대한 개념과 구현 방법에 대해 다뤄볼 것이다. 

 

* BFF 개념 이해

 - BFF는 "Backend for Frontend"의 약자로, 프론트엔드 개발자가 클라이언트와 백엔드 사이에서 인터페이스 역할을 수행하는 개념이다. 기존의 모놀리틱 아키텍처에서는 백엔드가 클라이언트의 요청을 직접 처리하는 구조였지만, 마이크로서비스 아키텍처에서는 백엔드가 여러 개의 독립적인 서비스로 분리되는 경향이 생기면서 BFF의 필요성이 대두되었다.

 

 - BFF의 주요 목적은 다음과 같다. 첫째, 클라이언트와 백엔드 간의 통신을 관리하고 처리하여 클라이언트에 필요한 데이터를 가져오는 역할을 수행한다. 이를 통해 백엔드의 복잡한 로직을 클라이언트로부터 분리하여 단순화할 수 있다. 둘째, 클라이언트의 요청에 최적화된 데이터를 가공하여 제공함으로써 클라이언트의 성능을 향상시킬 수 있다.

 

 - BFF는 클라이언트와 백엔드 사이에서 중간 계층으로 동작하며, 클라이언트의 요청에 맞는 데이터를 가져오기 위해 여러 개의 백엔드 API를 호출하고, 필요한 경우 데이터를 가공하여 클라이언트에게 전달한다. 아직 잘 이해가 안될 수 있지만 아래의 내용을 읽다보면 자연스럽게 필요성과 구현체를 알게 될 것이다.

 

2. 구현

* BFF 필요성

 - BFF의 필요성을 살펴보기 위해 MSA 구조에서 음악 스트리밍 서비스를 만든다고 가정해보자. MSA에 따라 음악 추천, 재생 목록, 사용자 정보 등 음악 스트리밍 도메인 별로 나뉘어 서비스가 구현되어 있다. 각 서비스는 프론트엔드에서 사용하는 API를 제공한다. 기능별로 나뉘어져 서비스가 잘 분리되어 있는 것처럼 보일 수 있지만, 실제 개발 과정에서 여러 가지 고민들에 직면하게 된다.

 

MSA구조의 서버와 클라이언트

 

1. 하나의 기능을 위해 여러 도메인의 API 요청하는 경우

• 예를 들어, 음악 추천 페이지에서 특정 사용자의 재생 목록과 관련된 음악 정보를 표시해야 할 수 있다. 이를 위해 재생 목록 서비스와 음악 정보 서비스를 호출하여 필요한 데이터를 조합해야 하는 상황이 발생한다. 그럼 2개의 API 요청이 발생하고, 프론트에서 데이터를 가공해야한다.

2. 불필요한 데이터를 숨겨야 하는 경우

• 음악 스트리밍 서비스에서는 접근 권한이 있는 사용자와 없는 사용자를 구분해야 한다. 접근 권한이 있는 사용자에게는 사용자 정보와 관련된 추가 데이터를 제공해야 할 수 있다. 이때, 클라이언트에서 직접 접근 권한을 검증하고 데이터를 요청하면 보안상의 문제가 발생할 수 있다. 따라서 BFF를 통해 접근 권한 검증 및 필요한 데이터를 제공하는 인터페이스 서버를 구현해야 한다.

3. 많은 양의 연산을 요구하는 작업을 진행해야 하는 경우

• 음악 스트리밍 서비스에서는 음악 검색과 같은 작업에서 많은 양의 데이터를 처리해야 할 수 있다. 이를 클라이언트에서 직접 처리하게 되면 성능 문제가 발생할 수 있다. 따라서 BFF를 통해 서버에서 데이터를 처리하고 최적화된 결과를 클라이언트에 전달하는 방식으로 작업을 진행해야 한다.

4. 여러 플랫폼에서 각각 특정 데이터가 필요한 경우

• 음악 스트리밍 서비스가 웹, 안드로이드, iOS 등 다양한 플랫폼을 지원한다고 가정해보자. 각 플랫폼마다 필요한 데이터 형식이나 값이 다를 수 있다. 이럴 경우 클라이언트 단에서 플랫폼별로 데이터 처리를 해야 하기 때문에 코드가 복잡해지고, 유지보수가 어려워진다. BFF를 활용하면 플랫폼별로 필요한 데이터를 처리하여 클라이언트에게 제공하는 중간 계층을 구축할 수 있다.

 

MSA구조의 서버와 BFF를 둔 클라이언트

 

 - 정리하자면 BFF를 위처럼 두게되면 각각의 마이크로서비스 서버는 요청시 필요로 하는곳에 응답만 하면된다. 웹이나 모바일과 같은 클라이언트는 여러 곳에 요청해서 응답을 수정할 필요없이 BFF에 필요한 요청만 하면 된다. 이런식의 관리는 프론트엔드가 백엔드에 덜 종속적이게 만들고 각자의 비즈니스 로직을 분리할 수 있도록 돕는다. 분리에 대해서는 아래에서 좀 더 살펴보자.

 

* 프론트엔드와 백엔드의 분리

 - 마이크로서비스 아키텍처의 등장으로 인해 프론트엔드와 백엔드의 분리가 더욱 중요해지고 있다. 기존의 모노리틱 아키텍처에서는 백엔드가 모든 기능을 처리하는 단일 애플리케이션으로 구성되었다. 하지만 마이크로서비스 아키텍처에서는 각각의 독립적인 백엔드 서비스로 분리되어 개발과 유지보수의 효율성을 높일 수 있다. 마찬가지로 프론트엔드와 백엔드의 분리는 다음과 같은 이점을 제공한다.

• 각각의 독립적인 백엔드 서비스는 특정한 업무 영역에 집중할 수 있어 개발과 유지보수의 효율성을 높인다.
• 프론트엔드 개발자는 필요한 데이터를 가져오기 위해 여러 개의 백엔드 API를 호출할 수 있으며, BFF를 통해 이를 효율적으로 관리할 수 있다.
• 각각의 백엔드 서비스는 독립적으로 확장 가능하며, 시스템 전체의 유연성과 확장성을 제공한다.

 

* BFF의 구현 방법

 - BFF를 구현하기 위해서는 프론트엔드 프레임워크와 BFF의 통합 방법을 결정해야 한다. 필자는 웹 FE 개발자이므로 웹 기준으로 설명하겠다. 주로 프론트엔드 프레임워크를 사용하므로, BFF는 해당 프레임워크와의 통합을 위해 API 엔드포인트를 제공하는 방식으로 구현된다.

 

 - BFF의 역할과 책임에 따라 적절한 서버 사이드 기술을 선택해야 한다. BFF는 클라이언트와 백엔드 사이에서 데이터 통신과 가공을 담당하므로, 백엔드 서비스와의 통신을 위한 HTTP 요청 처리, 데이터 가공 및 필터링, 인증과 보안 기능 등을 구현해야 한다. Node.js, Java, Python 등 다양한 서버 사이드 기술 중에서 프로젝트의 요구사항과 개발자의 선호도에 따라 선택할 수 있다.

 

BFF를 구현하는 방법에는 다음과 같은 접근 방식이 있다.

1. 독립적인 서버로 구현: BFF를 독립적인 서버로 구현하여 클라이언트와 백엔드 사이에서 중간 계층으로 동작하며, 별도의 서버를 구성하여 프론트엔드와 통신하고 필요한 데이터를 백엔드 API로부터 가져와 가공하여 클라이언트에게 전달한다.
2. 모노리틱 백엔드에서 BFF 기능을 추가: 기존의 모노리틱 백엔드에 BFF 역할을 담당하는 모듈을 추가하여 클라이언트와의 통신을 처리하고 필요한 데이터를 가공하여 전달한다. 이 방식은 기존의 백엔드 코드를 재사용하면서 BFF를 도입할 수 있어 개발 및 유지보수의 편의성을 제공한다. 
3. 프론트엔드 프레임워크로 구현: 프론트엔드 프레임워크인 Next.js와 같은 도구를 사용하여 BFF를 구현하는 것도 가능하다. 먼저, 클라이언트로부터의 요청을 받는 Next.js 서버에서 BFF 역할을 담당하는 API 엔드포인트를 구성한다. 이 때, Next.js의 /api 라우트를 사용할 수도있고, 커스텀서버를 사용할 수도 있다. 이 API 엔드포인트는 클라이언트의 요청에 따라 백엔드 서비스와 통신하여 필요한 데이터를 가져온 후, 클라이언트에게 응답한다. 결과적으로 Next.js를 이용하여 클라이언트 요청을 처리하고 필요한 데이터를 가져와 가공하는 BFF 역할을 수행할 수 있다. 

 

BFF의 구현에는 데이터 통신과 가공, 보안과 인증, 성능 최적화, 테스트와 디버깅, 배포 등 다양한 측면을 고려해야 한다. 효율적인 데이터 요청과 응답을 위해 캐싱, 레이어드 아키텍처 등을 고려할 수 있으며, 보안과 인증은 클라이언트와 백엔드 간의 연동을 보호하는 데 중요하다. 이 내용에 대해서는 다음 포스팅에서 더 자세히 다뤄보도록 하겠다.

 

3. 결론

 - BFF(Baackend for Frontend)는 클라이언트와 백엔드 간의 효율적인 연동을 위한 중요한 개발 방법론이다. 이 글에서는 BFF의 개념과 역할, 그리고 BFF를 구현하는 방식에 대해 다뤘다. BFF를 활용한 실전 예제와 프로젝트를 살펴보면, 클라이언트와 다양한 백엔드 서비스 간의 연동을 효율적으로 수행할 수 있음을 알 수 있다.

 

 - BFF를 효과적으로 구현한다면 서버와 클라이언트 개발에 유지보수성을 높여줄 뿐만 아니라 개발자 경험(DX)도 향상 시켜줄 수 있음을 느꼈을 것이다. 게다가  클라이언트와 백엔드 간의 연동을 원활하게 수행함으로써 사용자에게 뛰어난 경험을 제공할 수 있다.

 

 

 

 

---

참고

 

카카오페이지는 BFF(Backend For Frontend)를 어떻게 적용했을까? | 카카오엔터테인먼트 FE 기술블로그

 

BFF(BackEnd-For-FrontEnd)란?