Projects

인시던트 대응 서비스

PagerWho

장애 알림부터 담당자 호출, 에스컬레이션과 해결까지 관리하는 서비스

  • Incident·Service·Operations 화면 개발
  • Ollama 기반 서비스 에이전트와 문서 검색 fallback
  • Workflow Canvas UX 개선 및 주요 흐름 E2E 검증
PagerWho의 예시 인시던트와 에스컬레이션 화면
담당 역할
풀스택 · 공동 개발
개발 인원
2명
개발 기간
2026.06 ~ 현재
담당 작업
운영 화면, 서비스 에이전트, Workflow Canvas UX, 분석 이벤트와 E2E 검증, AI 개발 하네스를 담당했습니다.
링크
pagerwho.comGitHub · 비공개 저장소
사용 기술
ReactTypeScriptViteExpressPostgreSQLPrismaPlaywrightOllamaAmplitude

프로젝트 소개

모니터링 알림을 인시던트로 만들고 상태·담당자·서비스·알림을 관리하는 서비스입니다. 온콜 담당자에게 알림을 보내고, 응답이 없으면 다음 담당자에게 에스컬레이션합니다.

주요 작업

  1. 01

    운영 화면과 인시던트 대응

    Incident, Service, Operations에 나뉜 정보를 확인하고 대응할 수 있도록 화면을 구성했습니다.

    • 인시던트 상세에 상태, 담당자, 타임라인과 알림 정보를 배치하고 주요 대응 액션을 연결했습니다.
    • Amplitude의 페이지·클릭 자동 수집과 incident_created 이벤트를 연결했습니다.
    • Playwright로 인시던트 생성·대응, 웹훅, 에스컬레이션, 온콜과 모바일 주요 흐름을 검증했습니다.
  2. 02

    서비스 에이전트

    Ollama 기반 모델로 서비스 사용법과 운영 절차를 안내합니다. 모델이 응답하지 않을 때는 문서 검색 결과로 안내를 이어가도록 구성했습니다.

    • 답변, 추가 정보 요청, 실행 계획과 실행 결과를 구분하고, 데이터 변경 제안은 승인 카드로 표시했습니다.
    • 작업 대상 프로젝트와 응답·실행 상태를 표시하고 실패한 결과도 확인할 수 있도록 했습니다.
    • 키보드 포커스 이동, Esc 닫기, 스크린리더 알림과 움직임 감소 설정을 적용했습니다.
  3. 03

    Workflow Canvas

    노드를 드래그할 때 다른 노드까지 다시 그려지던 문제와 연결·자동 정렬 동작을 개선했습니다.

    • 드래그 중 화면 상태는 React Flow의 useNodesState로 관리하고, 드래그가 끝날 때 저장용 폼에 위치를 반영했습니다.
    • 연결 규칙을 드래그 중에 검사하고 연결점과 판정 범위를 넓혔습니다.
    • BFS로 연결 깊이를 계산해 노드를 왼쪽에서 오른쪽으로 정렬했습니다.
  4. 04

    AI 개발 하네스

    여러 기능을 함께 개발하면서 변경 범위와 검증 기준을 놓치지 않도록 프로젝트 전용 개발 지침을 구성했습니다.

    • Planner·Implementer·Reviewer 역할을 나누고 구현 전에 변경 범위와 완료 조건을 정의했습니다.
    • 구현 후 diff 리뷰와 편집 후 검사 Hook으로 변경을 확인했습니다.
    • 파일 수정 시 lint와 typecheck를 실행하고, 범위 밖 작업은 별도 이슈로 분리했습니다.

다음 프로젝트

대한민국 철봉 지도