Feature flag release

기능 플래그 출시

Separate deployment from exposure and enable a feature for selected cohorts.

···
html
<div class="stage" data-phase="0"><div class="title">SAME BUILD · DIFFERENT EXPOSURE</div><div class="panel build">release v5</div><div class="row users"><div class="panel user">internal<span>NEW</span></div><div class="panel user">pilot<span>OLD</span></div><div class="panel user">all<span>OLD</span></div></div><div class="sub">flag changes cohorts, not the build</div></div>
css
.stage{width:min(94vw,760px);height:min(88vh,330px);padding:clamp(9px,2.6vmin,20px);border:1px solid var(--line);border-radius:14px;background:var(--surface);font:600 clamp(12px,2.5vmin,16px)/1.3 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;display:flex;flex-direction:column;gap:clamp(6px,1.7vmin,12px);overflow:hidden;position:relative}.stage *{min-width:0}.stage .title{color:var(--accent);font-weight:800}.stage .sub{color:var(--muted)}.stage .row{display:flex;align-items:center;gap:clamp(5px,1.6vmin,12px)}.stage .panel{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:clamp(6px,1.6vmin,12px)}.stage .mono{font-family:ui-monospace,SFMono-Regular,monospace;font-size:clamp(12px,2.5vmin,15px)}.stage .grow{flex:1}.stage .on{color:var(--accent)}.build{text-align:center;border-color:var(--accent)!important}.users{flex:1;justify-content:space-around}.user{width:29%;height:75%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.user span{color:var(--muted)}.user:first-child span{color:var(--accent)}.stage[data-phase="1"] .user:nth-child(2) span,.stage[data-phase="2"] .user span{font-size:0;color:var(--accent)}.stage[data-phase="1"] .user:nth-child(2) span:after,.stage[data-phase="2"] .user span:after{content:'NEW';font-size:clamp(12px,2.5vmin,16px)}.stage[data-phase="2"] .user{border-color:var(--accent)}
js
const stage=document.querySelector('.stage');let phase=0;function advance(){phase=(phase+1)%3;stage.dataset.phase=String(phase)}const timer=setInterval(advance,1200);stage.addEventListener('pointerdown',()=>{clearInterval(timer);advance()})

A feature flag changes the active code path without requiring a different deployment. Teams can expose a feature to internal users first and widen the cohort later.

The demo shows one release serving three users while only selected cohorts receive the new path. Remove completed flags to avoid accumulating branches.

When to use

Use it to roll out exposure gradually or disable a feature quickly after a problem.

Open as page ↗