Vercel Flags, 이제 프로덕션에서 안심하고 써도 됩니다
Vercel에서 자체 피처 플래그(Feature Flag) 시스템인 Vercel Flags를 정식 출시(GA)했습니다. 기존에는 Vercel Edge Config나 서드파티 플래그 서비스에 의존해야 했지만, 이제는 Vercel 생태계 안에서 모든 플래그를 관리할 수 있게 되었습니다.
가장 큰 장점은 Vercel Dashboard에서 직접 타겟팅 규칙, 사용자 세그먼트, 환경별 제어를 설정할 수 있다는 점입니다. 별도의 관리 페이지를 띄울 필요 없이, 배포와 함께 플래그를 조작할 수 있어 운영 효율이 크게 올라갑니다.
참고: 이번 GA와 함께 제공되는 Flags SDK는 Next.js와 SvelteKit에 최적화되어 있으며, OpenFeature 표준도 지원합니다. 자세한 내용은 Vercel 공식 발표를 확인하세요.
코드로 보는 Vercel Flags 사용법
1. 플래그 정의하기
프로젝트 루트에 flags.ts 파일을 만들고, vercelAdapter를 이용해 플래그를 선언합니다.
// flags.ts
import { vercelAdapter } from "@flags-sdk/vercel";
import { flag } from "flags/next";
// 'show-new-feature' 플래그를 Vercel Dashboard에서 관리
export const showNewFeature = flag({
key: "show-new-feature",
adapter: vercelAdapter(),
});
2. 페이지에서 플래그 사용하기
정의한 플래그를 페이지 컴포넌트에서 await로 호출하면 됩니다. 간단하죠?
// app/page.tsx
import { showNewFeature } from "~/flags";
export default async function Page() {
const isEnabled = await showNewFeature();
return (
<div>
{isEnabled ? (
<p>🎉 새로운 기능이 활성화되었습니다!</p>
) : (
<p>기존 UI를 유지합니다.</p>
)}
</div>
);
}
3. OpenFeature를 통한 확장
만약 다른 플래그 제공자(LaunchDarkly, Split 등)를 사용 중이라면, Vercel Flags가 OpenFeature 표준을 지원하므로 어댑터만 교체하면 됩니다. 예를 들어:
import { openFeatureAdapter } from "@flags-sdk/openfeature";
import { flag } from "flags/next";
// OpenFeature 호환 제공자로 전환
export const showNewFeature = flag({
key: "show-new-feature",
adapter: openFeatureAdapter({ provider: myCustomProvider }),
});
이렇게 하면 코드 변경 없이 플래그 백엔드를 자유롭게 교체할 수 있습니다. 벤더 종속성에서 해방되는 거죠.
실무 적용 시 주의사항
1. 플래그 폭발(Flag Explosion) 주의
Vercel Flags가 편리하다고 해서 모든 UI 요소를 플래그로 만들면 관리가 어려워집니다. **꼭 필요한 A/B 테스트나 점진적 출시(Canary Release)**에만 사용하는 게 좋습니다.
2. 오래된 플래그 정리
실험을 마친 플래그는 반드시 코드에서 제거하세요. 그렇지 않으면 조건문이 쌓여 기술 부채가 됩니다. 주기적으로 git grep으로 사용되지 않는 플래그를 찾아 정리하는 습관을 들이세요.
3. 성능 고려
플래그 조회는 기본적으로 빠르지만, 페이지 로드마다 여러 개의 플래그를 await하면 약간의 지연이 생길 수 있습니다. React의 use() 훅이나 Suspense와 함께 사용해 비동기 처리를 최적화하는 걸 권장합니다.
4. 한국 클라우드 환경에서의 레이턴시
Vercel Edge Network는 전 세계에 분산되어 있지만, 한국 리전의 경우 일부 ISP에서 지연이 발생할 수 있습니다. 플래그 평가가 민감한 작업(예: 결제 로직)이라면, Vercel Edge Config를 사용해 캐싱 전략을 세우는 것이 좋습니다.
마무리: Vercel Flags, 지금 시작해볼까?
Vercel Flags GA는 Vercel 플랫폼을 사용하는 팀에게 플래그 관리의 표준을 제시합니다. Dashboard에서 시각적으로 관리할 수 있고, SDK가 프레임워크와 깔끔하게 통합되며, OpenFeature로 벤더 종속성도 피할 수 있습니다.
다만, 플래그를 남용하지 않고 체계적으로 관리하는 전략이 뒷받침되어야 진정한 효과를 볼 수 있습니다. 다음 단계로는 Feature Flag 전략 설계에 대해 공부해보시길 추천합니다.
함께 보면 좋은 글: