기능 플래그로 블로그 '광고클릭 유도 배너' 노출 제어 하기 (feat. Hackle)

기능 플래그란?

• 기능 플래그는 배포 후에도 코드의 변경 없이도 로직, 시스템의 동작을 수정할 수 있도록 도와주는 장치이다.
• 코드내에 기능 플래그 코드를 달아서 배포를 하면 플래그를 외부에서 switch 형태로 on/off를 할 수 있는 개념으로 보면 된다.

 

• 마틴 파울러 '형님' 도 아래 본인의 블로그에도 기능 토글 (플래그)은 강력한 기술이다! 라고 이야기 하고 있다.

Feature Toggles (aka Feature Flags)

 

언제 쓸 수 있나 ?

• 기능 플래그의 최대 장점이라고 하면 '코드 배포 시기' 와 '기능 출시' 의 시점을 분리할 수 있다는 점이라고 생각한다.
• 필자도 회사 내에서 기능 배포를 할 때 기능 플래그를 아주 유용하게 사용하고 있다. (주로 아래 케이스에서)

무중단 배포 환경에서 하위 호환성을 고려해 배포를 할 때

• 무중단 배포 방식 인 경우 주로 rolling, 카나리 배포 방식을 보통 사용하는데 텐데 이에 배포 플랜을 짤 때 많은 부분 고민을 줄여줄 수 있다. 

• 물론 blue/green 방식을 사용한다고 할 수도 있는데 이 경우에도 롤백을 대비하기 위해서 서버군 2벌을 유지해야 한다는 단점이 있다. 

배포 후 혹시나 발생할 장애 영향도를 최소화 하려고 할 때

• 신규 기능은 언제나 예상치 못한 side effect 가 우려 된다.
• 이때 점진적으로 배포 트래픽을 조절 하면서 일부 유저에게만 출시를 해볼 수 있고 혹 발생하는 장애 상황에도 즉시 기능 OFF 를 통해서 롤백이 가능하다.

---

Practice

• 기능 플래그를 이용해서 블로그에 뭘 해볼 수 있을까 하다가 재미난 것이 생각이 났다.

광고 클릭 유도 문구 노출하기

• 블로깅의 원동력은 뭐니뭐니 유저들의 광고 클릭이 아니겠나. (작고 소중한 우리내 광고 수익..)
• 그래서 블로그 모든 포스트를 마지막에 '광고 클릭 유도(구걸) 문구'를 달아 보고 싶어졌다.
  • (혹자는 염치가 없는 것 아니냐 할 수도 있겠지만 이해 바람)
• 이것도 일종의 신규 기능이니 기능 플래그를 이용해서 해당 문구의 노출 여부를 control 해보도록 하겠다.

 

Hackle

• 기능 플래그를 제공하는 SaaS 는 많은데 (LaunchDarkly, Split 등등) 그 중 유일한 국내 솔루션인 Hackle 을 써보고자 한다. (친숙한 한국어)
• 제공하는 대시보드도 깔끔하고 생각보다 기능 플래그에서 제공하는 기능 자체가 다양해 보였다.

 

신규 기능 구현

• 먼저 신규 기능 부터 구현을 해보자.
• 해당 기능은 '이 글이 도움이 되었다면, Google 광고 한번씩 클릭 부탁 드립니다' 라는 문구를 모든 포스트의 제일 하단부에 추가한다는 스펙이다.
• 아래는 해당 스펙을 구현한 javascript 코드이다.

<script>
    window.addEventListener('load', (event) => {
        showTitle();                
    });

    function showTitle() {
        // 광고 문구
        const title = "이 글이 도움이 되었다면,&nbsp;Google 광고&nbsp;한번씩 클릭 부탁 드립니다. 🙏🙏🙏";
        const html = `<hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style3">
            <h2 data-ke-size="size26"><span>끝으로</span></h2>
            <p data-ke-size="size16"><span>` + title +`</span></p>
            <p data-ke-size="size16"><span>광고 클릭은 많은 힘이 됩니다!</span></p>
            <p data-ke-size="size16">&nbsp;</p>`;
        const element = document.createElement('div');

        element.innerHTML = html;

        //하단 구글 광고 바로 위에 넣어주기
        document.getElementsByClassName('revenue_unit_wrap')[1].parentElement.insertBefore(element, document.getElementsByClassName('revenue_unit_wrap')[1]);
    }
</script>

• 위 코드를 tistory 블로그 html 코드에 넣어준다. (방법은 간단하니 자세한 방법은 아래 포스팅을 참고)

Tistory 블로그 HTML 소스코드 수정 방법

• 넣은 후 블로그 포스트를 확인 해보면 의도한 대로 광고 문구가 노출되는 것을 확인할 수 있다.
  • 이제 이 기능에 기능 플래그를 붙여 control 해볼 것이다.

Hakcle 기능 플래그 생성

• 연동을 위해서 Hackle 계정을 생성하고 SDK Key 를 복사해두자.

• 핵클 대시보드에서 기능 플래그를 만들어보자.

• 기능 플래그 상세 페이지에서 기능 플래그키도 복사해두자. 연동에 필요하다.

SDK 를 통한 기능 플래그 코드 연동

• 아래 코드는 Hackle JavaScript SDK 를 연동하여 기능 플래그를 연동한 코드이다.
• 위에서 복사해둔 SDK_KEY 는 아래 코드의 HACKLE_SDK_KEY, 기능플래그 키는 HACKLE_FEATURE_FLAG_KEY 에 넣어준다.
• 위에서 했던 것과 동일하게 티스토리 HTML 을 수정해준다.

// 신규 추가
<script src="https://cdn.jsdelivr.net/npm/@hackler/javascript-sdk@11.3.0/lib/index.browser.umd.min.js"></script>
<script>
  // 운영환경 BROWSER SDK 키
  HACKLE_SDK_KEY = "cTyyDXS45JdqzCnqtZ1SQYmpNEFiDtL1";
  window.hackleClient = Hackle.createInstance(HACKLE_SDK_KEY);

  // 위에서 만든 기능 플래그키
  HACKLE_FEATURE_FLAG_KEY = 4
</script>

<script>
    window.addEventListener('load', (event) => {
          const isFeatureOn = hackleClient.isFeatureOn(HACKLE_FEATURE_FLAG_KEY);
          // 기능 플래그가 True 인 경우 광고 문구를 노출함.
          if(isFeatureOn) {
             showTitle();    
          }
    });


    // showTitle() 함수는 위와 동일 
</script>

• 이후에 포스트를 확인해보면 현재 기능 플래그는 꺼져 있기 때문에 문구가 노출되지 않는 것을 확인할 수 있다.

 

기능 플래그 조작

• 기능 플래그를 조작하여 여러가지 조건에 따라서 기능 출시를 컨트롤 할 수 있다.

 

전체 사용자 대상 출시

• 우리의 목적은 전체 사용자를 대상으로 배포를 하려고 한다. 
• 상단 기능 플래그 상태의 토글을 켜짐으로 변경하자.
  • 해당 토글은 기능 플래그의 최상위 활성/비활성 상태를 제어한다고 보면됨 꺼짐 상태에는 아래의 여러 설정들이 다 무시된다. 

• 그리고 제일 하단에 모든 사용자 설정에서 트래픽을 100% 로 올려주자. 
  • 해당 트래픽은 충분히 점진적으로 늘려갈 수 있다. 

 

특정 사용자 (테스터, 내부자) 대상 출시

• '개별 타겟팅' 항목에서는 특정 사용자 혹은 사용자 그룹을 어떤 상태로 적용할지 설정할 수 있다.
• 주로 내부 테스트 용도로 사용되며 '사용자 식별자' 를 지정할 수 있다. 

 

타겟팅 규칙으로 출시

• '사용자 타겟팅' 항목에서는 여러 규칙의 조합으로 규칙에 부합하는 사용자에 대해서 어떤 상태로 적용할지 설정할 수 있다.
  • ex) 모바일 앱의 기능을 출시하는 경우 Android 유저의 50%에게만 기능을 출시하고 싶은 경우 
• 추가적으로 규칙에 해당하는 사용자들에 대해서도 점진절으로 트래픽을 설정하여 출시할 수 있다. 

 

---

More Practice

• 좀 더 재밌는 것을 해보고 싶어졌다.
• 기능 출시를 통해서 광고 문구를 노출 시켰는데 문구가 맘에 안들 수도 있지 않은가? (그렇다고 하자)
  • 문구도 원하는 대로 수정하고 싶은 욕구가 생기지 않는가 ..
• 친절하게도 기능 플래그 기능 중 '파라미터 설정' 이라는 기능을 통해서 코드상에서 사용할 수 있는 파라미터를 동적으로 설정할 수 있다.

 

파라미터 설정

• 다행히 Hackle 에서도 해당 기능을 제공하기에 핵클 대시보드에서 파라미터 설정을 해보자.
• 파라미터 키는 간단하게 title 로 하고 value 는 광고 문구 변경 테스트 로 설정해보자.
  • 필자는 True 인 경우에만 문구를 노출하기 때문에 True 측 value 에만 값을 넣어주었다.
  • 프로플랜 지원 기능이라 업그레이드 요구를 하는데 카드 등록 없이 무료체험만 해도 되니 일단 해보자..

 

기능 플래그 연동 코드 수정

• 위에서 설정한 파라미터를 코드상에서 사용하게끔 수정을 해보자. (사실 이걸 위해서 title 을 변수화 시켜두었다..)
• 이전에 작성한 소스에서 title 을 설정하는 코드를 아래와 같이 수정을 하면 된다.
  • 혹여 파라미터를 가져오지 못하는 경우에는 SDK 에서는 우리가 설정한 default 값을 반환한다.
  • showTitle() 함수를 수정할 것이다.

<script>
    function showTitle() {
        // 광고 문구
        const defaultTitle = "이 글이 도움이 되었다면,&nbsp;Google 광고&nbsp;한번씩 클릭 부탁 드립니다. 🙏🙏🙏";

        //기능 플래그의 상태에 따른 파라미터 정보 (ex. True 로 결정된 경우 True 파라미터 정보만 내려옴)
        const parameters = hackleClient.featureFlagDetail(HACKLE_FEATURE_FLAG_KEY);

        //파라미터 키로 값 가져오기
        const title = parameters.get("title", defaultTitle);

        //아래 기존 코드는 동일 .. 
    }
</script>

• 위 코드를 한번 더 티스토리 html 에 수정하여 적용한다.

 

파라미터 값 업데이트

• 일단 수정한 코드를 반영한 뒤 포스트를 확인해보면 변경한 광고 문구가 보여지는 것을 볼 수 있다 !
  • 혹 업데이트가 안되는 경우 브라우저 캐시 때문일 수도 있으니 브라우저 '강력 새로고침'을 해주면 된다.

• 좋은 건 한번 더 보라고 대시보드에서 다른 값으로 변경하고 다시 확인을 해보자.

---

마무리 하며

눈물젖은 배포 해보셨습니까

• 위 과정을 돌아보면서 실제 Production 환경에 기능을 출시하는 상황이라고 생각을 해보면 한단계, 한단계가 '기능 수정 후 배포' 를 의미 할 것이다. 
  • 배포 과정을 생각해보면 그리 짧은 시간에 이뤄지지는 않은 것이라 생각한다. 그러다 장애라도 낸나면? 끔찍하지 않은가? 
  • 필자의 경우에는 소개팅이 있는 날 배포를 하다가 급한 마음에 단순한 클릭 실수를 해서 큰 장애를 낸 적도 있었다 .. 

• 이런 관점에서 본다면 기능 플래그는 그 자체로 사용할 의미는 충분하다고 본다. 요즘 많은 IT 회사들도 기능 플래그를 적극적으로 활용하는 것으로 알고 있다. 
  • 일례로 필자의 회사에서는 모든 기능에 기능 플래그를 달고 출시를 한다. 일종의 보험이 된 것 같다. 
  • 물론 연동 코드가 과도하게 쌓이다 보면 부채가 될 수도 있지만 ..

 

A/B Test

• 그리고 한편으로는 광고 문구를 붙이기는 했지만 이 문구가 정말 좋은 효과가 있을까?
  • 오히려 유저들의 심기를 건드려 안좋은 효과를 줄 수도 있지 않을까?
• 이럴 때 사용할 수 있는 방법이 최근에 관심도가 증가 하고 있는 A/B 테스트이다. 
  • 다음번 예제에서는 광고 문구 노출 기능을 A/B 테스트로 실제 유저들에게 미치는 효과를 살펴보고자 한다.