Patent ID | KR102635963

컬러 시스템 자동화

스포츠 이벤트 페이지를 디자인 하면서 팬들의 몰입감을 더 높일 수 있는 방법을 많이 고민했는데요. 그중 하나가 각 리그의 컬러를 UI에 자연스럽게 녹여내는 것이었습니다. 팬들이 좋아하는 팀과 리그의 분위기를 화면에서도 느낄 수 있게 하고 싶었거든요.

다만 이를 구현하려면 리그 컬러를 체계적으로 관리하면서도 앱의 다크 모드 테마와 잘 어울리도록 만드는 시스템이 필요했습니다. 저희 플랫폼에는 이미 50개가 넘는 다양한 리그가 제공되고 있고, 계속해서 새로운 리그가 추가되고 있는 상황이었는데요. 그때마다 컬러 팔레트를 일일이 수작업으로 만들다 보니 번거롭기도 하고, 놓치는 부분이 생길 가능성도 있었습니다. 그래서 이 과정을 더 효율적으로 관리할 수 있는 방법을 고민하게 되었습니다.

구현 방식은 다음과 같습니다

스포츠 팀에서 리그의 브랜드 컬러를 입력하면, 클라이언트 사이드에서 해당 색상의 RGB 값을 HSLuv 값으로 변환합니다.

그 다음 디자인 가이드에 맞게 lightness 값을 조정하여, 다크 모드 앱 테마에 어울리는 리그별 컬러 팔레트를 자동으로 생성합니다.

또한 각 UI 컴포넌트에는 정해진 lightness 값이 할당되어 있어, 페이지 전체가 리그 테마에 맞게 자동으로 컬러가 적용되는 구조로 시스템화되었습니다.

시스템 적용 결과는 다음과 같습니다

그래서 저는 HSLuv 컬러 값을 활용하는 방법을 제안하게 되었습니다. 이 방식을 사용하면 엔지니어링에서 lightness 값을 동적으로 조정해, 다크 모드에 맞는 컬러 톤을 자동으로 만들어낼 수 있었는데요. 이렇게 하면 리그마다 컬러를 하나하나 수작업으로 조정할 필요 없이 시스템적으로 컬러를 생성하고 관리할 수 있게 됩니다.

이 아이디어를 구현하기 위해 엔지니어분들께 도움을 요청했고요. 다행히 팀에서도 컬러 시스템 자동화라는 방향에 공감해 주셔서, 함께 협업하며 해당 기능을 구현할 수 있었습니다.

Conclusion

엔지니어분들의 도움 덕분에, 저희 팀은 시간과 리소스를 절약할 수 있는 시스템을 성공적으로 구현할 수 있었습니다. 이 결과는 각자의 역할을 바탕으로 효율적으로 협업하며 만들어낸 팀워크의 성과라고 생각합니다.

한 단계 더 나아가자면, Sports Radar API에서 리그 컬러를 직접 불러와 전체 과정을 완전히 자동화하는 방법도 고려해볼 수 있었습니다. 다만 실제로는 스포츠 팀에서 시스템이 올바른 컬러를 사용하고 있는지 확인하는 과정이 필요했기 때문에, 정확성을 위해 최종적으로는 리그 컬러를 수동으로 검증하는 방식을 선택하게 되었습니다.

출시 전에 해당 자동 컬러 시스템의 아이디어에 대해 특허를 출원했으며, 현재는 특허번호 KR102635963으로 등록되어 있습니다.