02 / 문제와 목표
정보를 찾는 데 쓰는 시간을
실제 업무에 쓸 수 있도록.
서버 이전 업무는 아지트와 텍스트 중심으로 관리했습니다. IDC 철거와 이전 작업이 늘어나면서 진행 상태, 희망 완료일, 세부 작업 내용을 여러 기록에서 찾아야 했습니다. 교대 근무자가 이어서 처리할 업무를 파악하는 데에도 같은 맥락이 필요했습니다.
Before기록을 찾아 현황을 재구성
분산된 요청과 업데이트를 확인하고, 작업별 일정과 진행 상황을 다시 정리.
After공통 화면에서 작업을 이어가기
오늘의 업무는 대시보드에서, 실행과 이력은 각 관리 화면에서 확인.
03 / 핵심 업무 흐름
현황을 파악하고,
작업을 실행하고, 기록을 남깁니다.
아래는 실제 업무 흐름을 바탕으로 디자인을 다듬은 인터랙티브 데모입니다. 탭 전환, 날짜 선택, 검색·필터와 작업 상세 보기를 체험할 수 있습니다. 모든 이름·일정·작업·수치는 Mock Data이며, 내부 원본 화면은 사용하지 않았습니다.
Module 01 / Overview
통합 운영 대시보드
작업 캘린더와 오늘의 업무를 함께 배치했습니다. 예정된 작업, 희망 완료일, 미완료 업무를 확인한 뒤 필요한 관리 화면으로 이어지는 구조입니다.
IDC OperationsReconstructed UI · Mock Data
통합 대시보드서버 이전일반 업무
업무 캘린더10월 · 예시
월화수목금토일
5
6이전 2
7
8작업 3기한 1
9
10
11
12기한 2
13
14작업 1
15
16이전 1
17
18
작업 예정일과 희망 완료일을 함께 확인
오늘 확인할 업무가상 작업
서버 이전센터 A → 센터 B예시 요청 01 · 서버 12대
일반 업무장비 점검 지원예시 요청 02 · 작업 예정
희망 완료일 확인예시 업무 1건
미완료 작업서버 이전 · 일반 업무한곳에서 확인
01 / 날짜를 선택하면 해당 작업이 표시됩니다. 작업을 누르면 가상 상세 기록을 확인할 수 있습니다.
- Problem
- 여러 작업의 일정을 확인하고 오늘 처리할 내용을 모아야 했습니다.
- Solution
- 캘린더와 업무 유형별 오늘의 작업을 한 화면에 배치했습니다.
- Result
- 작업 현황을 확인하는 공통 시작점을 마련했습니다.
Module 02 / Migration
서버 이전 관리
물리 서버 이전은 요청 한 건 안에도 여러 작업이 이어집니다. 요청·진행 중·완료 상태와 세부 체크리스트를 함께 관리해 전체 진행 상황과 남은 단계를 구분했습니다.
서버 이전 관리Reconstructed UI · Mock Data
이전 작업 등록가상 요청
이전 유형센터 간 이전
이전 경로센터 A → 센터 B
요청자가상 팀 A
서버 수12대
요청일2025-10-01
희망 완료일2025-10-15
부품 작업OS 설치서버 설정
작업별 체크리스트
- 작업 파일
- 서버 탈거
- 협력업체 작업
- IDC 이동
- 서버 장착
- 케이블 연결
전체 상태와 세부 작업 단계를 구분
02 / 검색과 상태 필터로 이전 작업을 찾고, 작업 상세에서 세부 체크리스트를 확인할 수 있습니다.
- Problem
- 짧은 상태 업데이트만으로는 어떤 세부 작업이 남았는지 알기 어려웠습니다.
- Solution
- 이전 요청의 맥락과 작업 단계, 완료 확인자·완료일을 기록하도록 구성했습니다.
- Result
- 다음 담당자가 작업 기록을 바탕으로 진행 상황을 확인할 수 있습니다.
검색·통계 등 세부 기능 보기
요청 정보와 작업 옵션
이전 유형, 출발·도착 센터, 서버 수, 요청자, 요청일, 희망 완료일, 협력업체, 메모와 관련 작업 옵션을 기록합니다.
검색과 기한 관리
요청자·센터·상태·기간으로 검색하고, 기한 임박 작업을 강조합니다. 정렬과 페이지 구분으로 목록을 확인합니다.
세부 체크리스트
부품 작업, OS 재설치, 서버 설정, 협력업체 작업, 탈거, IDC 이동, 작업 파일, 장착, 케이블 연결을 관리합니다.
통계와 Export
월별 작업·서버 수, 요청자별 상위 10개, 센터별 이동량과 IDC 간 히트맵을 확인합니다. 기간 필터와 필터 결과 기준 Excel / CSV 내보내기를 지원합니다.
Module 03 / Task Management
일반 업무 관리
서버 이전 외의 장비 운영, 자산, 기타 요청도 공통 형식으로 관리했습니다. 희망 완료일과 실제 작업 예정일을 구분하고, 요청 내용을 검색하거나 상태별로 모아볼 수 있도록 구성했습니다.
일반 업무 관리Reconstructed UI · Mock Data
03 / 일반 업무를 검색하거나 상태별로 확인할 수 있습니다. 실제 요청자·장비명·내부 링크는 포함하지 않았습니다.
- Problem
- 서로 다른 유형의 운영 요청에도 담당 맥락, 일정, 진행 상태가 필요했습니다.
- Solution
- 공통 등록 항목과 요청·진행·보류·완료 상태, 검색과 목록 내 일정·비고 수정을 제공했습니다.
- Result
- 다양한 요청을 같은 방식으로 조회하고 이어서 관리할 수 있습니다.
04 / 설계와 구현
작업 단위의 기록과
전체 현황을 연결하는 설계.
요약 화면과 작업 화면의 역할 구분
대시보드는 일정과 오늘의 업무를 모아 보여주고, 각 모듈에서는 등록·수정·진행 관리를 수행합니다. 전체 현황을 살피는 일과 세부 작업을 처리하는 일을 연결했습니다.
전체 상태와 세부 단계의 분리
서버 이전은 전체 진행 상태와 체크리스트를 함께 사용합니다. 일반 업무에는 보류 상태를 두어 업무 유형에 맞는 진행 흐름을 표현했습니다.
희망 완료일과 작업 예정일의 구분
요청자가 원하는 기한과 실제로 작업할 날짜를 별도로 기록합니다. 목록과 캘린더에서 두 일정의 의미를 구분해 확인할 수 있도록 했습니다.
Application Architecture
브라우저 화면과 데이터 접근을 REST API로 연결했습니다. 아래 구성은 기존에 정리한 서버 이전 모듈의 구현 기준이며, 내부 네트워크와 상세 인프라 구성은 생략했습니다.
사용자
↓
Browser UIHTML · CSS · Vanilla JavaScript
↓
내부 OpenStack VM · 프로세스 관리 PM2
Node.js / Express REST API업무 로직 및 데이터 접근
↓
PostgreSQL구조화된 서버 이전 기록
서버 이전 모듈의 논리적 구성. 데이터베이스의 상세 배치와 내부 주소는 표시하지 않습니다.
Tech Stack 전체 보기
- Frontend
- HTML · CSS · Vanilla JavaScript · Bootstrap · Bootstrap Icons
- Backend / Database
- Node.js · Express.js · PostgreSQL
- Reporting
- Chart.js · SheetJS / XLSX
- Infrastructure
- Internal OpenStack VM · PM2
05 / 운영 결과와 개선
실제 업무에 적용하고,
사용하면서 개선했습니다.
아래 수치는 서버 이전 모듈의 운영 실적입니다. 통합 대시보드와 일반 업무를 합산한 수치가 아니며, 시간 절감률이나 생산성 향상률을 의미하지 않습니다.
배포 이후의 개선
서버 이전 관리 시스템은 초기 버전과 CBT를 거쳐 실제 업무에 적용했습니다. 운영 중 받은 피드백을 바탕으로 검색, 완료 처리, 기존 IDC 범위와 통계를 다듬었습니다.
- 초기 버전
- CBT
- 실제 운영
- 피드백
- 개선
- 완료 처리 UX 개선
- 아지트 링크 처리
- 검색·필터 개선
- 통계 대시보드 고도화
- 작업 관리 편의 기능
06 / 배운 점
운영 경험이
시스템의 우선순위를 정합니다.
등록 항목을 정하는 일부터 어떤 정보를 첫 화면에 보여줄지까지, 판단의 기준은 실제 업무였습니다. 교대 근무자가 필요한 맥락, 작업자가 확인할 세부 단계, 운영 현황을 파악할 집계가 서로 연결되어야 했습니다.
개발 이후의 운영도 직접 맡으면서 기능 구현뿐 아니라 사용 과정에서 발견한 불편을 고치는 일이 중요하다는 것을 배웠습니다. 운영 경험과 개발을 연결한 이 방식은 앞으로의 프로젝트에도 이어갈 기준입니다.
이 Case Study는 재구성한 화면과 가상 데이터를 사용합니다. 실제 직원 이름, 장비 식별 정보, 내부 URL과 기밀 인프라 정보는 포함하지 않았습니다.