Backend-for-Frontend 패턴이란 무엇이며 API gateway와 어떤 관계인가요?

Question

Accepted Answer

**BFF(Backend-for-Frontend)**는 클라이언트 유형별(웹, 모바일, 파트너)로 전용 gateway를 두는 것입니다. 모든 클라이언트를 위한 하나의 범용 gateway 대신, 각 프론트엔드가 자신의 요구에 맞춘 백엔드를 갖습니다.

## 해결하는 문제

모바일 앱과 웹 앱은 데이터, 페이로드 크기, 수다스러움(chattiness)의 요구가 다릅니다. 단일 범용 API는 타협과 과도한 데이터 조회(over-fetching)를 강요합니다.

```text
BFF 없이:        BFF 사용:
  모든 클라이언트       Web ─▶ Web BFF ─┐
     │                 Mobile ─▶ Mobile BFF ─┼─▶ microservices
  하나의 범용 API      Partner ─▶ Partner BFF ─┘
```

## BFF가 하는 일

- 여러 서비스 호출을 하나의 클라이언트 맞춤 응답으로 **집계**.
- 제약이 많은 클라이언트(모바일)를 위해 페이로드를 **다듬음**.
- **클라이언트별 로직**을 소유하여 서비스를 범용으로 유지.

```js
// Mobile BFF: 한 번의 호출 → 가벼운 화면 페이로드 구성
app.get('/home', async (req) => {
  const [user, orders] = await Promise.all([
    usersApi.get(req.userId),
    ordersApi.recent(req.userId, { limit: 3 }) // 모바일용으로 작게
  ]);
  return { name: user.name, recentOrders: orders }; // 맞춤형 형태
});
```

## BFF vs gateway

| | API Gateway | BFF |
|---|---|---|
| 범위 | 모든 클라이언트에 하나 | 클라이언트 유형별 하나 |
| 로직 | 범용 횡단 관심사 | 클라이언트별 형태 변환 |

## 함정

BFF가 너무 많으면 로직이 중복됩니다. 얇게 유지하고 서비스에 속해야 할 비즈니스 규칙이 새어 나가지 않도록 하세요.

## 왜 중요한가

BFF는 각 프론트엔드가 모든 클라이언트를 하나의 공유 계약에 맞추는 대신, 자신에게 맞는 백엔드로 자기 속도에 맞춰 진화하게 해줍니다.

BFF는 gateway를 대체하지 않고 보완합니다. gateway는 인증과 라우팅 같은 엣지 관심사를 처리하고, BFF는 클라이언트별 집계를 처리합니다.

	API Gateway	BFF
범위	모든 클라이언트에 하나	클라이언트 유형별 하나
로직	범용 횡단 관심사	클라이언트별 형태 변환