플러스프로젝트 배경
<사이트 헬스체커(Health Checker) 시스템 구축>
1) 포트폴리오 소개
서비스 카테고리: 운영 모니터링 시스템, DevOps 도구, 인프라 헬스체크 플랫폼
메인 타깃:
• 스타트업/중소기업 개발팀
• 인프라/DevOps 엔지니어
• 모니터링 도구가 부족한 비전문가 운영팀
• 웹사이트/관리자 페이지의 가용성을 관리해야 하는 서비스 운영자
웹사이트 및 관리자 시스템의 가용성, 응답 시간, 장애 발생 여부를 자동으로 점검하고 시각화하는 실시간 웹 헬스체커(Health Checker) 대시보드를 구축.
별도의 모니터링 인력이 없어도 사이트 정상 여부를 즉시 판단할 수 있도록 직관적인 UI와 상세 로그 기반 점검 기능을 제공.
2) 작업 범위
개발 역할
• 전체 서비스 기획 및 UI/UX 설계
• 반응형 웹 기반 프런트엔드 개발
• 백엔드 API 개발 및 헬스체크 로직 구성
• 서버 환경 구축 및 자동화 스케줄러 구현(Cron 기반)
• 시스템별 상세 로그 저장 및 시각화
지원 환경
• Web (반응형 PC/Mobile)
• 관리자용 웹 콘솔
• Node.js 기반 스케줄러 / Python(Django) 기반 API
• Chart.js 기반 실시간 그래프 시각화
• AWS EC2 기반 서버 운영
3) 주요 업무 및 구현 기능
● 사이트 상태 모니터링
• 실시간 사이트 접근 가능 여부 체크
• HTTP Status Code 기반 정상/오류 상태 판별
• 마지막 체크 시간, 누적 체크 횟수 자동 집계
• 성공/실패 상태를 직관적인 색상 및 아이콘으로 표시
● 응답 시간 분석
• 최근 1시간 / 24시간 / 7일 기준으로 필터링
• 요청 평균 응답 시간 그래프화
• 스파이크(응답 지연) 포인트 자동 표시
• 단일 사이트 및 전체 시스템 기준 비교 그래프 제공
● 로그인 체크(선택 기능)
• 로그인 페이지 접근 가능 여부 확인
• 인증 실패 여부를 기록하고 알림
● 시스템 대시보드
• 전체 사이트 개수
• 정상 사이트 개수 / 오류 사이트 개수
• 최근 24시간 성공/실패 추세 그래프
• 시스템별 헬스 상태 비교(메인 사이트 vs 관리자 페이지)
● 상세 로그 (최근 50개 / 최근 24시간)
• 체크 시간
• 사이트명
• HTTP Response Code
• 응답 시간
• 에러 메시지
• 200/301/500 등 상태별 그룹화
• 최신순 정렬 및 Infinite Scroll 방식 지원
● 사이트별 상세 화면
• 최근 체크 결과 한눈에 요약
• 사이트별 시간 필터 기반 로그 확인
• 사이트별 응답 시간 변화 그래프 제공
4) 개발 및 디자인 시 주안점
1) 운영자가 ‘즉시 판단’할 수 있는 UI
• 한 번의 시선으로 “정상/오류”를 판단할 수 있도록
색상(초록/노랑/빨강)과 아이콘을 일관성 있게 구성
• 단일 화면에서 “전체 + 시스템별 + 사이트별” 정보 구조화
2) 실제 운영에 필요한 데이터만 노출
• 불필요한 복잡도를 제거하고
“상태”, “응답 시간”, “로그”만 핵심 정보로 구성
• 누구나 바로 이해할 수 있는 간결한 형태 유지
3) 장기 운영을 위한 로그 구조 설계
• 모든 체크 결과를 로그로 남기는 구조
• 날짜별/사이트별 필터링 기능으로 장애 추적 용이
• 복잡한 DevOps 도구 없이 엔드유저도 활용 가능하도록 구성
4) 확장 가능성 고려
• 새로운 사이트/관리자 페이지 추가 시 자동 반영
• 로그인 체크, 모듈별 장애 알림 등 기능 확장 가능
• 대시보드 → 사이트 상세 → 체크 기록의 일관된 탐색 흐름
1) 포트폴리오 소개
서비스 카테고리: 운영 모니터링 시스템, DevOps 도구, 인프라 헬스체크 플랫폼
메인 타깃:
• 스타트업/중소기업 개발팀
• 인프라/DevOps 엔지니어
• 모니터링 도구가 부족한 비전문가 운영팀
• 웹사이트/관리자 페이지의 가용성을 관리해야 하는 서비스 운영자
웹사이트 및 관리자 시스템의 가용성, 응답 시간, 장애 발생 여부를 자동으로 점검하고 시각화하는 실시간 웹 헬스체커(Health Checker) 대시보드를 구축.
별도의 모니터링 인력이 없어도 사이트 정상 여부를 즉시 판단할 수 있도록 직관적인 UI와 상세 로그 기반 점검 기능을 제공.
2) 작업 범위
개발 역할
• 전체 서비스 기획 및 UI/UX 설계
• 반응형 웹 기반 프런트엔드 개발
• 백엔드 API 개발 및 헬스체크 로직 구성
• 서버 환경 구축 및 자동화 스케줄러 구현(Cron 기반)
• 시스템별 상세 로그 저장 및 시각화
지원 환경
• Web (반응형 PC/Mobile)
• 관리자용 웹 콘솔
• Node.js 기반 스케줄러 / Python(Django) 기반 API
• Chart.js 기반 실시간 그래프 시각화
• AWS EC2 기반 서버 운영
3) 주요 업무 및 구현 기능
● 사이트 상태 모니터링
• 실시간 사이트 접근 가능 여부 체크
• HTTP Status Code 기반 정상/오류 상태 판별
• 마지막 체크 시간, 누적 체크 횟수 자동 집계
• 성공/실패 상태를 직관적인 색상 및 아이콘으로 표시
● 응답 시간 분석
• 최근 1시간 / 24시간 / 7일 기준으로 필터링
• 요청 평균 응답 시간 그래프화
• 스파이크(응답 지연) 포인트 자동 표시
• 단일 사이트 및 전체 시스템 기준 비교 그래프 제공
● 로그인 체크(선택 기능)
• 로그인 페이지 접근 가능 여부 확인
• 인증 실패 여부를 기록하고 알림
● 시스템 대시보드
• 전체 사이트 개수
• 정상 사이트 개수 / 오류 사이트 개수
• 최근 24시간 성공/실패 추세 그래프
• 시스템별 헬스 상태 비교(메인 사이트 vs 관리자 페이지)
● 상세 로그 (최근 50개 / 최근 24시간)
• 체크 시간
• 사이트명
• HTTP Response Code
• 응답 시간
• 에러 메시지
• 200/301/500 등 상태별 그룹화
• 최신순 정렬 및 Infinite Scroll 방식 지원
● 사이트별 상세 화면
• 최근 체크 결과 한눈에 요약
• 사이트별 시간 필터 기반 로그 확인
• 사이트별 응답 시간 변화 그래프 제공
4) 개발 및 디자인 시 주안점
1) 운영자가 ‘즉시 판단’할 수 있는 UI
• 한 번의 시선으로 “정상/오류”를 판단할 수 있도록
색상(초록/노랑/빨강)과 아이콘을 일관성 있게 구성
• 단일 화면에서 “전체 + 시스템별 + 사이트별” 정보 구조화
2) 실제 운영에 필요한 데이터만 노출
• 불필요한 복잡도를 제거하고
“상태”, “응답 시간”, “로그”만 핵심 정보로 구성
• 누구나 바로 이해할 수 있는 간결한 형태 유지
3) 장기 운영을 위한 로그 구조 설계
• 모든 체크 결과를 로그로 남기는 구조
• 날짜별/사이트별 필터링 기능으로 장애 추적 용이
• 복잡한 DevOps 도구 없이 엔드유저도 활용 가능하도록 구성
4) 확장 가능성 고려
• 새로운 사이트/관리자 페이지 추가 시 자동 반영
• 로그인 체크, 모듈별 장애 알림 등 기능 확장 가능
• 대시보드 → 사이트 상세 → 체크 기록의 일관된 탐색 흐름
프로젝트 성과
사이트 장애 탐지 시간 90% 단축
기존에는 장애 발생 시 평균 30~60분 후에야 인지했으나, 자동 헬스체커 도입 후 실시간 통보 체계가 구축되어 장애 감지 시간이 35분 이내로 단축됨
운영팀 수동 점검 업무 80% 감소
일일 수동 모니터링(약 20~30분/회)이 자동화되어, 운영팀의 반복적인 점검 업무가 80% 이상 감소하고 운영 리소스를 다른 업무에 재배치 가능해짐.
사이트 가용성 99% 이상 유지
체계적 모니터링 및 장애 알림 도입으로 사이트 다운타임을 월 평균 2~3시간 → 10분 이하로 축소하며, 전반적인 가용성이 99% 이상으로 유지됨.
응답 지연 문제 진단 시간 70% 단축
응답 시간 스파이크 지점 자동 기록·시각화를 통해 문제 원인 파악 시간이 기존 12시간 → 20, 30분으로 단축됨.
운영 로그 분석 생산성 2배 향상
최근 24시간/50건 로그 자동 축적 및 필터링 기능으로, 로그 분석 속도가 기존 대비 2배 이상 향상되며, 운영팀의 장애 원인 추적 효율이 크게 증가함.
핵심 기능
실시간 사이트 상태 체크
지정된 사이트를 10~30초 주기로 자동 점검하여 HTTP 상태코드 기반으로 정상·오류 여부를 실시간 표시.
응답 시간 모니터링 및 그래프 시각화
최근 1시간·24시간·7일 단위로 응답 속도를 수집해 그래프로 시각화하여 지연·스파이크 구간을 한눈에 파악
상세 헬스 로그 저장 및 조회
최근 50건 또는 최근 24시간 기준으로 각 체크 결과를 저장하고, 시간·상태별로 필터링해 로그를 빠르게 조회
관리자 페이지 및 사이트별 상세 모니터링
운영 중인 모든 사이트의 상태를 목록으로 확인하고, 각 사이트별로 상태 그래프·응답 시간·로그를 상세 조회
로그인 페이지 체크 기능
로그인 페이지 접근 가능 여부를 별도 체크해 인증 장애 여부를 빠르게 확인
진행 단계
1주차 — 기획 · 요구사항 정의
2025.11.
• 모니터링 대상 사이트(메인/관리자) 확정
• 체크 주기(30초/10초), 응답 기준, 실패 기준 정의
• 응답 시간 저장 방식 및 지표 선정(최근 50개, 24시간)
• 알림 규칙(장애/복구 알림) 기획
• 체크 주기(30초/10초), 응답 기준, 실패 기준 정의
• 응답 시간 저장 방식 및 지표 선정(최근 50개, 24시간)
• 알림 규칙(장애/복구 알림) 기획
2주차 — UI/UX 디자인 · 시스템 설계
2025.11.
• 대시보드 와이어프레임 제작
(전체 사이트/시스템별 그래프/최근 로그 리스트)
• 사이트 상세 페이지 UI 설계
• 그래프 시각화 스타일 정의(성공/실패/응답시간 컬러)
• 반응형 구조 및 컴포넌트 설계
(전체 사이트/시스템별 그래프/최근 로그 리스트)
• 사이트 상세 페이지 UI 설계
• 그래프 시각화 스타일 정의(성공/실패/응답시간 컬러)
• 반응형 구조 및 컴포넌트 설계
3주차 — 개발 (FE + BE + 스케줄러)
2025.11.
프런트엔드
• 대시보드 개발
• 상세 로그 테이블 구현
• 필터(24시간, 7일, 1시간) 적용
백엔드
• 헬스체크 API 개발
•. 응답 시간·HTTP 코드 수집 로직 구현
• 로그인 체크 기능
• 대시보드 개발
• 상세 로그 테이블 구현
• 필터(24시간, 7일, 1시간) 적용
백엔드
• 헬스체크 API 개발
•. 응답 시간·HTTP 코드 수집 로직 구현
• 로그인 체크 기능
4주차 — 통합 테스트 · 런칭 · 운영 안정화
2025.11.
• 실제 사이트 연결 후 실시간 체크 테스트
• 장애 시나리오 테스트(Timeout, 500, Redirect 등)
• 응답 지연 스파이크 검증
• 그래프·로그 누락/지연 문제 점검
• 성능 튜닝(DB 인덱스)
• 장애 시나리오 테스트(Timeout, 500, Redirect 등)
• 응답 지연 스파이크 검증
• 그래프·로그 누락/지연 문제 점검
• 성능 튜닝(DB 인덱스)
프로젝트 상세
1) 포트폴리오 소개 : 서비스 카테고리(ex. 커머스, AI 등)와 메인 타깃(ex. 주부, 청소년) 등을 포함한 간략한 소개
- 예시 : 주부들을 위한 생활용품 커머스 개발
2) 작업 범위 : 개발에 참여한 범위 및 지원환경
- 예시) UI/UX 디자인 및 개발, 서버 구축, Front-end 개발, 관리자 페이지 개발 등
- 예시) 반응형 웹, Android, iOS 등
3) 주요 업무 : 해당 서비스의 주요 기능 및 주요 페이지
- 예시) 회원등급제 기능, 숙소 추천 로직 구성, GPS 기반 숙소 리스트, 실시간 예약 및 결제 페이지 등
4) 주안점 : 디자인, 개발 시 중점이 되었던 사항
- 예시) 개인 정보에 대한 보안, 고도화된 예약 프로세스 등
- 예시 : 주부들을 위한 생활용품 커머스 개발
2) 작업 범위 : 개발에 참여한 범위 및 지원환경
- 예시) UI/UX 디자인 및 개발, 서버 구축, Front-end 개발, 관리자 페이지 개발 등
- 예시) 반응형 웹, Android, iOS 등
3) 주요 업무 : 해당 서비스의 주요 기능 및 주요 페이지
- 예시) 회원등급제 기능, 숙소 추천 로직 구성, GPS 기반 숙소 리스트, 실시간 예약 및 결제 페이지 등
4) 주안점 : 디자인, 개발 시 중점이 되었던 사항
- 예시) 개인 정보에 대한 보안, 고도화된 예약 프로세스 등
대시보드 메인
사이트 헬스체크 기능 및 로그 관리
사이트 운영 기록 및 시계열 그래프
사이트 운영 기록 및 시계열 그래프
