URL 모니터링 개발기

2019년 4월 22일

whatap_url_monitoring_open

오늘도 열일하는 와탭의 프론트 개발자 이상우입니다. 제가 와탭에서 URL 모니터링 서비스를 직접 개발하면서 있었던 일들을 회고하는 차원에서 글을 쓰려고 합니다.

작년 12월 와탭 랜딩페이지가 오전 근무시간 동안 접속되지 않는 장애를 고객을 통해 전달 받았습니다. 서버의 운영 최적화 과정에서 운영자의 사소한 실수로 발생한 장애였습니다. 장애는 바로 해결했지만 우리가 고객보다 먼저 문제를 발견하지 못한 과정에 대해 토의하는 과정에서 랜딩 사이트를 정기적으로 모니터링하는 서비스를 만들기로 하였습니다.

웹 사이트를 정기적으로 모니터링하는 서비스 개발과정에서 저는 기획과 화면을 책임지는 역할을 맡았습니다. 와탭에서의 지난 일 년 열심히 화면 개발에 참여했지만 제가 직접 서비스 구현을 리드한 적은 없었기에 긴장도 많이 했었던 것 같습니다. 그래도 다행히 20년 가까운 경력의 백엔드 개발자분들께서 제가 기획한 서비스에 맞춰서 데이터 구조와 백엔드 서비스를 만들어 주셔서 생각보다 빠르게 서비스를 만들 수 있었습니다.

서비스 기획

url_monitoring_define

URL 모니터링은 누구나 쉽게 웹사이트의 상황을 확인하는 모니터링 서비스로 아래와 같이 문제, 대상 방법, 비즈니스 4가지 항목으로 나누어 기획하였고 기획 의도에 맞춰서 화면을 개발하였습니다.


문제:

“기업이 자사의 웹 서비스 접근이 안되는 경우를 확인하지 못하는 문제를 해결한다”

최근 운영 서비스가 개발자에 영역으로 넘어오면서 경험 많은 개발자들은 URL 기반의 웹 서비스 체크 기능을 직접 만들어 사용하고 있지만 대부분의 개발자들은 기능을 개발하기에 바쁜 것이 현실입니다. 그리고 서버 모니터링 서비스나 애플리케이션 분석 서비스를 사용하더라도 외부망 문제로 발생하는 장애는 따로 확인해야 합니다.


대상:

"IT 기획자, 개발자, 운영자"

대상을 IT 기획자로 한 것은 최근 많은 스타트업의 기획자들이 서비스의 운영 업무를 일부분 가져가고 있기 때문입니다. 그리고 IT 서비스를 개발하는 개발자들 또한 운영 업무에 있어서는 잘 모르는 경우가 많기 때문에 대상을 IT 기획자에 맞추었습니다.


방법:

"URL 정보를 통해 웹사이트에 방문하여 웹사이트의 헬스 상태를 확인한다."

웹 서비스의 상태를 확인하는 방법은 라이브러리를 제공하여 개발 과정에서 코드를 직접 수정하여 모니터링 하는 방법과 개발 과정과 무관하게 외부에서 URL로 접근하는 방법이 있습니다. 저희는 사용 편의성을 중요하게 생각하여 URL로 접근하는 방법을 사용하였으며, 라이브러리를 제공하여 웹 클라이언트의 성능과 장애를 확인하는 서비스는 향후 별도 서비스로 개발하기로 하였습니다.


비즈니스:

"10개의 URL까지 고객에게 무료로 제공한다. 11번째 URL부터는 과금을 시작한다."

URL 모니터링은 그리 어려운 기능이 아닙니다. 사내에서 간단하게 체크하는 서비스를 만든다면 1시간이 안 걸릴 듯합니다. 다만 데이터를 어딘가 저장하고 관리하려고 하는 순간 여러 가지 귀찮은 일들이 생기기 시작합니다. 그래서 만들려고 하면 귀찮고 유료로 사용하기엔 비용이 아까운 서비스이기도 합니다. 그래서 무료로 제공하는 URL 개수를 충분히 제공하자는 의견이 개발 과정에서 발의되었고 현재는 10개의 URL을 고객에게 무료로 제공하고 있습니다. 많은 스타트업들이 기본적인 URL 체크는 와탭 서비스를 통해 모니터링했으면 하는 바람입니다.

URL 설정하기

url_monitoring_setting

그럼 이제 간단하게 서비스를 어떻게 만들었는지 화면을 기준으로 말씀드리겠습니다.

처음에 URL 설정 화면을 만들때는 약간 기계적으로 만들었습니다. 그러다 보니 사용자의 의도와 상관없이 입력해야 하는 정보가 많아 졌습니다. 막상 초기 버전을 공개하고 나니 저는 필요하다고 생각한 디테일한 정보들에 대해 이해하기 힘들다는 부정적인 의견이 많았습니다. 기획의도에 맞춰서 IT 기획자가 이해할 수 있는 데이터만을 표시하기로 하면서 아래 3가지 정보만 입력하도록 개발하였습니다.

  • 이름: 사용자가 지정하는 이름입니다.
  • URL: 웹사이트의 URL 정보입니다. 포트 정보를 포함할 수 있습니다.
  • 체크포인트: 웹 서비스의 건강 상태를 체크하는 포인트 지점입니다. 현재 서울과 도쿄 지역을 제공하고 있습니다.

그 외에는 설정을 수정하고 제거하는 기능에 신경을 많이 썼습니다. 단순한 화면인데도 버그가 많아서 고생을 많이 했습니다.

HTTP 상태코드 확인하기

url_monitoring_http_check

HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 여부를 알려줍니다. 응답은 100에서 599까지의 번호와 각각의 번호가 의마하는 상태 메시지로 주어지며 백의자리 숫자에 따라 5개의 그룹으로 나누어집니다.

  • 1XX: 정보를 제공하는 응답
  • 2XX: 성공적인 응답
  • 3XX: 리다이렉트
  • 4XX: 클라이언트 에러
  • 5XX: 서버 에러

2XX와 3XX의 상태는 사용자에게 정상적인 화면으로 제공하고, 나머지는 에러 화면으로 대체되기 때문에, 대부분의 국내의 업타임 모니터링 제품은 '정상' 또는 '비정상'의 두 가지 상태값만을 화면상에 나타내고 있었습니다. 상태의 종류를 단순화하면, 화면 UI가 간결해지고 상태 구분을 위한 색상 디자인이 편리하다는 장점이 있지만, 100 ~ 599번대의 임의의 상태코드값들을 정상/비정상으로 단편화하기 때문에, 경우에 따라서는 정상 상태의 범위라 할 지라도 주의가 필요한 응답상태를 무시할 가능성이 있습니다.

결정적으로, 사용자가 테스트 페이지를 설계하여 특정 URL에서 특정 상태코드를 반환받는 식으로 보다 적극적으로 모니터링을 실시하고자 하는 유스케이스가 있을 수 있는 데, 이런 경우엔 단편화한 상태값 표시만으로는 실용에 제한이 있습니다.

그렇다고 100 ~ 599의 모든 상태값을 필터링없이 화면상에 표현하자면, 예상되는 몇가지 우려 사항이 있습니다.

첫 번째는 화면상에 표현하는 내용이 많을 때, 데이터에 대한 가독성이 전체적으로 떨어질 수 있다는 점입니다. 두 번째는 만약 사용자가 상태 보드에 대한 지식이 없다면 서비스가 더욱 어렵게 느껴질 것이라는 점입니다.

와탭 URL 모니터링 서비스에서는 화면 개발 과정에서 다음과 같이 문제를 해결하였습니다.

  • 상태코드를 그룹화하여 위험도에 따라 색상을 배분하였습니다.
    정상을 나타내는 색상계열: 2XX(녹색), 3XX(청색)
    비정상을 나타내는 색상계열: 4XX(주황), 5XX(진한 빨강), 기타(연한 빨강)
  • 정상/비정상이 아닌 상태코드 값을 사용자에게 제공합니다.
    상태코드 값은 정상/비정상의 단순정보 뿐만 아니라 사용자에게 의미있는 여러 메시지를 포함하고 있습니다.
  • 이상 구간에 한해 상태별 지정색을 차트 배경색으로 표시하여 상태 히스토리를 보여줍니다.
  • 조회기간 범위 내, 정상 상태(2XX, 3XX)를 수치로 환산하여 표시합니다.

응답시간 확인하기

url_monitoring_code

응답시간은 쉽게 말해 브라우저에 URL을 입력해서 응답을 받기까지 걸린 시간을 의미합니다. 상태가 정상으로 떨어졌다 하더라도 응답시간이 높다면 실제 사용자에게 정상적인 서비스를 제공한다고 보기 어려울 것입니다. 반대로 현재 경과시간이 낮다 하더라도 그 이유가 정상적인 요청 및 응답이 이뤄지지 않아서 중간에 서비스가 중단된 결과일수 있으므로 전후와 비교해서 상대적으로 현저히 낮은 응답시간에 대해서도 주의를 기울여야 합니다.

결국 제대로 된 업타임 모니터링을 위해선 응답시간의 시계열 변화와 함께 해당 시간의 상태코드를 함께 볼 수 있는 복합 차트가 필요했습니다. 여러 사용자 시나리오를 가정한 화면 연구 끝에, 문제 상황 식별이 용이하고 데이터 조회가 간편한 복합 차트를 URL 모니터링에 적용했습니다.

  • URL간 같은 타임라인을 사용하며, 전체 URL 중 응답시간 최대값을 기준으로 차트 높이를 산정하기 때문에, URL간 지표값 비교를 통한 이상현상 식별이 용이합니다.
  • 복합차트를 통해 탐지 가능한 이상현상은 다음과 같습니다.
    4XX, 5XX, 기타 상태코드 구간
    응답시간 최고치 기록 구간
    전체 URL 또는 개별 URL의 시간대별 상대적으로 현저히 낮은 응답시간 기록 구간
    상태코드가 정상이거나, 응답시간이 상대적으로 높은 구간
  • 복합차트의 블록 구간을 '클릭'하거나 '드래그'하면 상세원인 등 데이터 조회가 가능합니다.

알림기능 제공하기

url_monitoring_alarm

모니터링 서비스에서 가장 필수적인 기능입니다. 사용자가 모니터링 화면을 계속해서 들여다볼 수 없기 때문입니다. 이벤트 설정에는 알림 조건을 위한 규칙이 필요합니다. 이벤트 규칙을 사용자가 쉽게 이해할 수 있도록 설정 옵션들을 정리하여 키보드 입력란을 최소화했습니다. 그 결과 다음과 같은 입력 양식으로 표현하였습니다.

결국 제대로 된 업타임 모니터링을 위해선 응답시간의 시계열 변화와 함께 해당 시간의 상태코드를 함께 볼 수 있는 복합 차트가 필요했습니다. 여러 사용자 시나리오를 가정한 화면 연구 끝에, 문제 상황 식별이 용이하고 데이터 조회가 간편한 복합 차트를 URL 모니터링에 적용했습니다.

    이벤트 설정 내용은 다음과 같습니다.
  • 상태 이벤트 : 선택한 상태코드 옵션에 따라 알림을 발행합니다. *복수개 선택 가능
  • 경과 시간 이벤트 : 실시간으로 수집한 경과시간 값이 해당 임계치를 초과(또는 미달)한 경우 알림을 발행합니다.
  • 상태별 경과시간(복합) 이벤트 : 상태코드 옵션과 경과 시간 설정을 동시에 적용한 조건으로 알림을 발행합니다.

마무리하며

제 주변에는 다양한 IT 분야에서 오랜 기간 경력을 쌓은 개발자분들이 계십니다. 신규 제품의 화면 기획부터 개발까지 다양한 경험의 기회를 누릴 수 있었던 이유는, 선태 개발자분들의 경험을 기반으로 다양한 피드백과 화면단의 효율을 위한 이면에서의 부단한 처리가 있었기 때문입니다.

서비스의 화면을 기획하고 개발하는 과정에서 용어 사용과 화면의 컨트롤 표현에 대해서 많이 고민해 볼 수 있었고 업무 프로세스에 관리에 있어서 우선순위의 중요성을 깨달을 수 있었습니다. 정말 많은 조언을 들으면서 개발에 매진했기 때문에 조금은 자랑할 수 있는 서비스가 되었으면 좋겠습니다

와탭의 Mission, 'IT 서비스를 운영하는 개발자와 운영자에게 도움이 되는 것'처럼 URL 모니터링이 많은 IT 기획자, 개발자, 운영자에게 도움이 되었으면 좋겠습니다. URL 모니터링을 사용하실 때마다 저를 기억해주시면 좋겠습니다. 이상우 포에버~~

URL 모니터링 사용자 가이드 바로가기

이상우(swlee@whatap.io)
항상 겸손하고 예의 바른 그리고 조금은 잘생긴 와탭의 프론트 개발자
<  이전 글

다음 글  >

최신글