별도 서버 없이 HTML 파일 하나로 끝내는 '프로젝트 작업 히스토리 관리자' 활용법

프로젝트를 진행하거나 다양한 시설·장비를 유지보수할 때, 가장 중요한 것 중 하나가 바로 '작업 기록의 체계적인 관리'입니다. 하지만 매번 거창한 관리 시스템을 도입하거나 서버와 DB를 구축하는 것은 여간 번거로운 일이 아닙니다.

이번 글에서는 별도의 서버 설치 없이 브라우저에서 단 하나의 HTML 파일로 실행되는 '프로젝트 히스토리 관리자' 프로그램의 주요 기능과 사용법을 안내해 드리고자 합니다.

웹 기술(HTML5, Tailwind CSS, JavaScript)만으로 구성되어 있어 복잡한 과정 없이 파일을 열기만 하면 즉시 업무에 활용할 수 있습니다.

주요 기능 요약

이 관리 도구는 누구나 직관적으로 사용할 수 있도록 필수 기능 위주로 구성되어 있습니다.

• 서버 없는 자동 저장 (LocalStorage): 작성한 모든 기록은 브라우저 내부 저장소에 안전하게 자동 저장됩니다.
• JSON 백업 및 복원: 데이터를 파일 형태로 저장(export)하거나, 다른 PC에서 불러와(import) 이어 쓸 수 있습니다.
• 3단계 계층 구조 자동 정렬: 등록된 데이터는 프로젝트 ➔ 작업 일자 ➔ 대상 장비 순으로 자동 분류되어 정돈된 형태로 보여집니다.
• 원클릭 자동 입력 기능: 우측 히스토리에서 프로젝트명이나 장비명을 클릭하면 좌측 입력창에 해당 정보가 자동으로 세팅됩니다.
• 맞춤형 PDF 보고서 출력: 전체 내역은 물론, 특정 프로젝트 내역만 필터링하여 깔끔한 보고서 형태로 인쇄 또는 PDF 수록이 가능합니다.
• 실시간 검색 및 상태별 배지: 키워드 검색 기능과 함께 점검, 교체, 완료, 메모 등 작업 성격에 따라 색상별 배지가 부여되어 파악이 용이합니다.

화면 구성 및 레이아웃

화면은 작업 효율성을 극대화하기 위해 2단 분할 레이아웃(Split Screen) 구조로 설계되어 있습니다.

1. 상단 컨트롤 바 (Top Navigation)

• 주요 버튼: 전체 PDF/인쇄, 저장 (JSON), 불러오기, 전체 초기화
•  
• 전체 시스템의 제어 및 데이터 백업/복원을 담당하는 영역입니다.

2. 좌측 패널 (작업 등록 폼 & 현황 요약)

• 입력 항목: 프로젝트명, 대상 장비명, 작업 일자, 작업 구분, 세부 작업 내용(한 줄 요약), 상세 설명
• 스마트 자동 완성: 이전에 입력했던 프로젝트와 장비 이름이 목록으로 자동 추천되어 오탈자 없이 빠르게 입력할 수 있습니다.
• 전체 현황 요약: 현재 등록된 총 프로젝트 수와 전체 작업 건수를 실시간으로 집계해 보여줍니다.

3. 우측 패널 (타임라인 아코디언 트리)

• 검색 & 필터: 실시간 검색창과 프로젝트별 필터 드롭다운, 전체 접기/펼치기 버튼 제공
• 계층형 히스토리 카드: 프로젝트별로 그룹화되며, 날짜(최신순)와 장비별로 깔끔하게 접고 펼칠 수 있는 아코디언 형태로 나열됩니다.

핵심 동작 로직 살펴보기

프로그램이 작동하는 주요 핵심 로직 3가지를 간단히 소개해 드립니다.

1. 브라우저 저장소 및 JSON 데이터 백업

작성한 데이터는 브라우저의 localStorage에 즉시 저장되며, 파일 형태(JSON)로 손쉽게 내보내거나 가져올 수 있습니다.

// LocalStorage 데이터 읽기
function getHistories() {
    try {
        return JSON.parse(localStorage.getItem('project_work_histories') || '[]');
    } catch (e) {
        return [];
    }
}

// LocalStorage에 데이터 저장 후 화면 갱신
function saveHistories(data) {
    localStorage.setItem('project_work_histories', JSON.stringify(data));
    renderApp();
}

 

2. 3단계 계층 구조 자동 그룹화

입력된 개별 작업 데이터를 `프로젝트 ➔ 날짜 ➔ 장비` 형태의 중첩 구조로 자동 분류하여 화면에 트리 형태로 출력합니다.

// 데이터를 프로젝트/날짜/장비 순으로 그룹핑
const grouped = {};
filtered.forEach(item => {
    const pName = item.project || '기타 프로젝트';
    const eName = item.equipment || item.device || '미지정';
    const dStr = item.date;

    if (!grouped[pName]) grouped[pName] = {};
    if (!grouped[pName][dStr]) grouped[pName][dStr] = {};
    if (!grouped[pName][dStr][eName]) grouped[pName][dStr][eName] = [];
    
    grouped[pName][dStr][eName].push(item);
});

 

3. 인쇄 및 PDF 보고서 맞춤 스타일

인쇄 버튼을 누르면 문서 출력 시 불필요한 입력 폼이나 버튼 요소들은 자동으로 숨겨지며, 보고서 양식에 맞춰 깨끗하게 정돈됩니다.

/* 인쇄 및 PDF 출력용 CSS 규칙 */
@media print {
    body { background-color: #ffffff !important; color: #0f172a !important; }
    .no-print { display: none !important; } /* 화면용 UI 숨김 */
    .print-only { display: block !important; } /* 인쇄용 헤더 표시 */
    .accordion-body { display: block !important; } /* 접혀있는 모든 항목 펼침 */
}

 

---

## 📖 초보자도 쉬운 4단계 사용 가이드

1. **파일 실행하기**
   제공된 `프로젝트 관리 V1.0.html` 파일을 다운로드한 뒤, 크롬이나 Edge 등 일반 웹 브라우저로 클릭하여 실행합니다.
2. **작업 등록하기**
   좌측 폼에 프로젝트명, 장비명, 날짜, 세부 내용을 입력한 뒤 **[히스토리 등록]** 버튼을 누릅니다.
3. **데이터 검색 및 수정**
   우측 상단 검색창에 장비 이름이나 작업 내용을 입력해 원하는 기록을 빠르게 찾을 수 있으며, 항목별 **[수정]** 및 **[삭제]**가 가능합니다.
4. **보고서 출력 및 데이터 백업**
   상단의 **[전체 PDF / 인쇄]** 버튼을 통해 보고서를 출력하거나, **[저장 (JSON)]** 버튼을 눌러 소중한 기록을 파일로 안전하게 보관하세요.

---

별도의 서버 설치 없이 파일 하나만으로 완벽한 작업 일지 시스템을 구축할 수 있다는 점이 이 도구의 가장 큰 장점입니다. 현장 업무나 개인 프로젝트 관리 시 유용하게 활용해 보시기 바랍니다.

---

프로젝트 관리 V1.0.html

0.04MB