프론트엔드 개발자 Rich, 배포 없이, 간단하게 핵클 대시보드 로고에 크리스마스 장식을 달아 보았습니다.
*이 글은 야무진 손끝을 가진 핵클의 프론트엔드 개발자 Rich님의 수기 컨텐츠 입니다.
모든 것은 연말을 맞아 핵클 대시보드에도 크리스마스 분위기를 내고자 하는 누군가 (MBTI=ENFP)에 의해 시작 되었습니다.
산타 모자 쓴 핵클 로고를 비롯한 여러가지 참신한 아이디어가 나왔지만...
.png)
논의 끝에 대시보드 로고를 크리스마스 리스로 변경해 보기로 결정했습니다.
핵클의 기능 플래그와 원격 구성을 조합하여 작업을 진행 했는데요.
기존의 로고는 front-end 코드에서 svg 이미지 파일을 통해서 보여주고 있었습니다.
하지만 이미지를 원격 구성으로 관리하는 가장 간편한 방법은 url을 사용해 이미지를 보여주는 것입니다.
이미지를 스토리지에 업로드한 뒤 해당 이미지의 url을 추출할 수 있습니다.
기존 로고와 새로 적용할 로고를 업로드해서 두개의 이미지 url을 생성했다면 준비 완료입니다.
이 기능 플래그에 ON으로 할당된 사용자는 새로 적용할 로고를 확인하게 됩니다.
반대로, OFF로 할당된 사용자는 기존의 로고를 확인하게 됩니다.
원격 구성이 기능 플래그의 ON/OFF 여부에 따라서 다른 값을 반환하도록 하는 게 이 단계의 궁극적인 목표입니다.
1번에서 생성했던 두 벌의 url을 사용해서 JSON 형태의 원격 구성을 구성합니다.
그리고 원격 구성의 타겟팅 기능을 활용하여 2번에서 생성한 기능 플래그를 타겟팅 합니다.
규칙 1, 즉 dashboard_logo_variation 기능플래그에 True로 할당된 사용자에게는 새로운 로고의 Url이 포함된 원격 구성 값이 내려가게 되고, 그 외의 경우에는 기존 로고의 Url이 포함된 원격 구성 값이 내려갑니다. 규칙을 추가하여 더 다양한 로고의 variation을 구성할 수도 있습니다.
원격 구성을 통해서 logoUrl과 height가 필드로 있는 객체를 받아옵니다.
받아온 값이 적절한지 Validation하는 과정을 거친 뒤, 대시보드에서 Logo를 보여줄 수 있도록 합니다.
놀라운 것은 디자인 선정부터 실제 대시보드 반영까지 반나절도 걸리지 않았다는 것!
고객향 서비스, 특히 글로벌 서비스를 운영하시는 제품팀 담당자분들, 마케터 분들이라면 연말 마케팅을 놓치고 싶지 않으실 텐데요. 실제 연말/연초에는 앱 스토어 로고만 단장해도 전환율이 올라가는 효과가 있어 마케팅으로 크리스마스 컨셉을 많이들 활용 하시죠.
기술적 제약으로 로고, 메인 페이지 디자인에 크리스마스 디자인을 입히거나 팝업창으로 연말 프로모션 메시지를 띄우고, 국가별로 다른 분위기를 가져가는 등 넘쳐나는 아이디어를 펼치지 못하고 계셨다면 기능 플래그와 원격구성을 조합하여 간단하게 구현해 보시면 어떨까요?
최초 1회만 대시보드를 셋팅해 놓으면 개발자 도움 없이도 마음껏 아이디어를 실현해 보실 수 있습니다.
핵클 대시보드에서 생성해보기👉 LINK
.png)
