⬇️ 아래 tech blog를 읽고 흥미로워 정리해본 글 입니다 ⬇️
원문: https://tech.kakao.com/posts/627
💡 광고 템플릿 프로젝트
- 광고주가 광고 이미지와 문구만 입력하면 카카오에서 미리 정의한 다양한 템플릿으로 조합하여 광고를 노출
- 광고주는 완성된 형태의 광고를 등록할 필요 X, 광고에 필요한 최소 정보만 제공 → 광고주 부담 ⬇
- 카카오에서 검수한 디자인에 따라 광고지면에 알맞은 크기와 형태로 광고 노출 → 안정적인 광고 노출 보장
🧐 문제 정의
1. 광고 색상 추출 작업의 목표
광고 이미지와 어울리는 색상을 추출하여 광고 템플릿에 적용
→ 여백 최소화, 전체 광고 일관성
그렇다면 “광고 이미지와 어울리는 색상” 이라는 것을 누가 어떻게 정의할 것인가?
광고주가 제출하는 경우
→ 아이디어 구현은 쉬워짐 BUT 색상이 채워진 광고에 대한 효과 입증이 안된 상태에서 요구하기엔 무리라고 판단
→ 광고주에게 별도의 요청 X
광고를 그려주는 템플릿에서 광고 이미지를 기반으로 적절한 색상을 추출하는 것을 구현
2. 대표 색상 정의
방법 1) 이미지 전체의 수치적 평균
전체 이미지가 비슷한 톤이라면 OK
BUT 여러 색상을 이루어진 이미지의 경우 엉뚱한 색상이 도출
방법 2) 전체 픽셀 RGB 값 중 최빈값
단색 위주의 이미지는 OK
BUT 사람 눈엔 비슷해보이지만 실제 RGB 값에 미세한 차이가 있는 경우는 전혀 다른 결과 도출
⭐️결론⭐️ 사람이 보기엔 비슷한 색상이지만 RGB 값에 미세한 차이가 있는 색상들을 “하나의 그룹”으로 묶은 후,
“가장 많은 픽셀”이 포함된 그룹을 선택하자!
⇒ K-means Clustering
🥳 문제 해결
색상은 RGB / HSV 3차원 값으로 표현 가능
3차원 색상 정보 간의 거리를 사용하여 거리가 짧은 픽셀끼리 군집화
- 몇 개의 그룹으로 묶을 것인가?
- 데이터의 유사도를 어떻게 정의할 것인가?
K-means Clustering
⬇️ K-means Clustering에 대해서는 별도의 페이지를 통해 정리하겠습니다!
👍 발전 단계
1. 스토리북을 이용한 웹 테스터
- 패널에 원하는 값을 넣어 테스트 할 수 있는 기능 제공
- 디자이너와 협업할 일이 있을 때 활용해보면 좋을 것 같음👌
2. 사내 라이브러리로 개발
라이브러리 형태에 적절한 input, ouput 정의
→ 기존 광고 템플릿 내에 적요했던 logic을 라이브러리 형태로 개발!
💻 글을 마무리 하며!
문제의 정의 → 해결 → 발전의 단계가 명확하게 드러나 있어서 어떤 것을 개발하는 행위에서의 가장 핵심적인 요소들이 잘 전달되었다. 더 나은 서비스를 제공하려는 과정에서 문제를 정의하고, 그 문제를 해결하기 위해 고려해야 하는 사항들을 통해 적절한 결과를 도출해내었다는 것이 인상깊었다. 또 마지막에 사내 라이브러리로 개발하여 해당 업무를 담당하는 팀에서도 효율적으로 해당 기술을 사용할 수 있게 했다는 것을 보며 조직에 속해있을 때 어떤 식으로 개발 업무가 진행되는지 정말 야아악간 엿볼 수 있었다…! 또 스토리북이라는 새로운 도구를 알게 되었는데 언젠가 써먹어보고 싶다!
