"광고 안 나오는 소리 안나게 해라~" 웹 관제 시스템 개발기

서버개발자가 없던 팀에 내가 서버개발자로 들어간지 약 5개월.
우리 팀에서 나는 비용무새다.

 

쓸떼없이 돈을 쓰는걸 알게된 순간 나의 모습

"과장님 그렇게 사용하면 한 달에 비용이 얼마 나오는데 이렇게 하면 이 정도 비용이 나와서 다른 방법으로 한번..."

"아 그건 비용이 너무 크게 나와서... 이런 형태의 아키텍처는 어떤가요.." 등등 

그렇게 비용 관련 여러 지표를 보던 중 흥미로운 지표를 발견하게 된다.

 

나 : 이날은 광고 매출이 엄청 줄었네요?
담당자분 : 그날 새벽에 광고 서버 장애가 크게 있었는데, 대응이 늦어서 아침 광고를 많이 못 뿌렸어요. 
나 : 오호라..

 

예전부터 이런 모니터링을 자동으로 관제하는 것을 좋아하던 나는 재미있는 생각이 들었다.

 

나 : 왠지 크고 작은 장애가 많을 것 같은데, 이러한 부분을 모니터링해보면 꽤 재미있는 데이터가 나올 것 같은데?
그리고 우리가 최대한 빨리 알려줘야 그쪽도 대응이 빠를 거고.. 

그래서 가설을 세우고 웹 모니터링 시스템을 개발하기 시작하였다.

요구사항 정하기

- 외부 서비스 (광고 대행사)의 오류로 인한 지면 노출이 안 되는 이슈를 잡고 싶어요

- 외부 서비스 (티스토리) 등도 관제해보면 좋지 않을까?

- 하는김에 우리 서비스들도 같이 모니터링 하자 

 

어떻게 문제를 인지 할 것이냐?

어떤 방법론을 통해 광고가 노출되지 않거나, 사이트가 비정상적인것을 탐지할지에 대한 고민에 빠졌다.

생각해본 방법은 아래와 같았다.

 

(1) 이미지 유사도 비교 

방법 : 웹 사이트 전체 이미지의 유사도를 비교하는 방법이다.

장점 : 정말 이전과 동일하게 잘 되었는지 확인이 가능하다.

단점 :

- 정말 이전과 동일한 경우가 생각보다 적고, 타이밍 이슈로 다르게 판단할 수 있다 (배너 영역 & 네트워크 이슈)

- 양치기 소년이 될 가능성도 크다

- 광고의 경우는 심지어 어떤 이미지가 올지도 모른다.

- 주기적으로 이미지를 긁어야 한다.

 

(2) 전체 컬러 분포 비율 

방법 : 찍은 이미지에서 RGB별 분포 비율을 구하고, 특정 컬러(하얀색) 비율이 차지하는 비율이 이전보다 높아졌을 때 노티 

장점 : 광고의 경우는 해당 방법이 적합하다 (실제 노출이 안 되는 경우는 99.99% 이상이 하얀 지면일 것이다.)

단점 :

- 사이트의 큰 변화 시, 오탐의 가능성이 있다.

- 적은 확률이긴 하지만, 다른 색상이 덮어주면서 탐지를 못 할 가능성이 있다.

 

 

스크린샷 찍기

어떤 식으로 이미지를 받아보게 할까 고민을 하다가, 이전에 '흑역사 박제기' 프로젝트에서 사용 한 Selenium + Python 모듈을 활용하기로 하였다.

관심 있는 사람이라면 Google에 '개발할 언어 + Selenium'으로 검색을 해보도록 하자

 

스크린샷 찍기 - 이미지가 로딩ㅈ.... 찰칵 

어느 날 갑자기 알람이 발생하게 된다.

이미지가 업로드가 되었는데, 이미지를 받아오는 중에 사진을 찍어버린 것이다.

 

나의 경우는 'document.ready' status를 보고 특정 dom이 생성이 될 때까지 기다렸다가 처리하게 하였는데,

서버의 문제 거나, 체크 클라이언트의 일시적인 네트워크 이슈로 인하여, 이미지를 받아오는 과정에 사진이 찍히고, 탐지 로직이 돌아버린 것이다.

 

이 문제에 대해서는 기존의 timeout 값을 조정하여 일단은 해결하였고,

운영팀에서는 '로딩이 느린 것도 문제 아닌가?'라고 하여.. 넘어가긴 했지만 (버그 아닙니다 기능입니다)

근본적으로 해결 방법에 대해 고민해봐야 할 것 같다.

 

스크린샷 찍기 - 특정 브라우저에서 광고 노출이 안됩니다!

기본적으로 Chrome Browser에서만 동작 가능하게 코드를 작성하였는데.. 어느 날 이런 이슈가 접수되게 된다.

 

금일  IE에서 광고 노출 불가 이슈가 있었는데, 광고 모니터링엔 탐지가 안되었네요 ㅠㅠ  

과거에 '흑역사 박제기'를 만들던 당시에 나는 '이미지만 찍으면 장땡이다'라는 마인드와 함께

Chrome만 지원했지만.. 이러한 요구사항을 해결하기 위하여, Selenium에서 제공하는 브라우저들의 구현체만 주입하면

동작 가능하게 변경하였다. 

IEDriver에 이슈가 하나 있었지만.. 그건 다른 글에서 다루기로 한다

 

이미지 유사도 비교 방식 (1) 롤링 이미지, 그대의 유사도는 어찌 하리오?

일단 이 방식은 일반 웹사이트를 대상으로 했다. 

우리가 만든 사이트들부터, 외부 서비스를 활용하는 서비스까지 모니터링해보았다.

초반에는 꽤 성공적으로 동작하는 듯하였다.

(여기서 이런 멘트가 안 나오면 재미가 없을 것이다) 그러나..

 

초반에 예상했던 것처럼 타이밍 이슈가 나오기 시작한다.

정말 브라우저의 렌더링이 완료된 상태로 비교를 하니, 저런 광고 영역 혹은 내부 롤링 이미지 영역이 문제가 생기기 시작했다.

 

그래서 우리는 저 부분은 과감하게 무시하기로 했다.

이 방식으로 검사하는 부분에 대해서는 특정 DIV는 사진을 찍기 전 dom을 삭제하여 받아오기로 하였다.

그렇다고, 이 부분을 무시할 것이냐?

아니다. 다음에 설명할 흰 지면 탐지 시스템을 통해 다르게 탐지해서 보완하였다.

 

이미지 유사도 비교 방식 (2) 사이트의 디자인이 변경되었어요..?!

(1) 이슈를 잘 끝내고 보내고 있던 하루하루 중, 특이한 곳에서 알람이 발생하였다.

디버깅을 통해 확인을 해보니, 모니터링중인 사이트에 UX 개편이 일부 들어간 것이다.

 

당연히 매번 아무에게도 이야기하지 않고 진행을 했기 때문에

따로 공유받지 못했고, 그러면서 알람이 발생하게 된 것이다.

 

이러한 문제들은 하루에 한 번 원본 이미지를 주기적으로 찍고, 변경점이 설정한 임계치 이상인 경우에, 봇을 통하여 사이트 담당자에게 변경 여부를 물어보게 하는 형태로 처리하였다.

전체 컬러 분포 비율 

전체 컬러 분포 비율 (1) - 흰 지면을 잡아라! 

이제는 2번째 방법인 컬러 분포 비율을 통해 탐지해보기로 한다.

이 방식은 스크린샷의 특정 영역을 지정한 뒤, 그 영역에서 색상이 어느 정도 분포되어있는지 여부를 확인하여 탐지하는 방식이다.

 

우리가 잘 생각 해보았을때, 과연 광고가 나와야 하는 지면에 99.99%의 색이 하얀색일 수 있을까..? 

그 경우는 100% 장애 상황이라고 판단 할 수 있다고 본다 

(물량이 딸리는 경우는 내부 광고로 돌리든 해야하는게 맞는거지. 흰지면이 나오는것은 틀렸다고 생각했다.)

 

전체 컬러 분포 비율 (2) - '이미지 유사도 방식'의 허점을 잡아보아요

이미지 유사도 방식에 허점은 변화하는 이미지에 대해서 유사도 값에서 노이즈 역할을 하고 있었다.

해당 영역을 삭제하고 유사도 비교를 하게 되었지만.. 아래와 같은 고민이 들기 시작했다.

아 저 지면이 중요하면 어쩌지?

그러는 동시에 저런 경우는 대부분 이미지 일 거고, "나오냐" "안 나오냐"로 판단이 가능할 것이다.라는 가정을 세우게 되었다.

그래서 저 부분의 이미지를 지우는기전에, 따로 캡처를 저장하고, 따로 컬러 분포 검사 하게 하여, '이미지 유사도 방식'의 허점을 잡았다.

 

마치며

시스템을 도입하고, 생각보다 광고 지면에  문제가 꽤 많이 발생하고 있다는 것을 알게 되었다.

이를 통하여, 외부 웹 서비스의 장애가 발생하였을 때,

매번 발뺌을 하던 업체에게, 몇 시부터 몇 시까지 장애가 있었다는 증적 자료를 가지게 되었다.

 

또한, 문제 발생 시 운영팀에서 점검 페이지로 돌린다던지,  백업 광고로 돌린다던지 등의 작업이 가능하게 되었다.

 

나는 흔히 말하는 '휴먼 지능' 속된 말로 '노가다'를 되게 싫어한다.

자동으로 할 건하고, 다른 더 중요한 일을 했으면 하는 철학을 가지고 있다.

 

B2C 서비스의 매출 그 자체인 광고에 대해서는 '오류로 인한 미노출 여부'를 판단하고,

큰 점검이 있고 나서 사이트가 문제없는지 점검도 가능해진 것이다.

 

한달 정도 운영하면서 운영에 불편을 겪는 일부 이슈가 있지만, 그건 조금씩 고도화하려고 한다.

 

다음편 예고?

사실 운영 인력이 많이 부족해서 이런 체크는 직접 만들게 되는데

다음에는 API를 자동으로 관제 하기 위해 만들고 사용한 서비스에 대해 소개 해보겠다.