고객이 직접 입력한 데이터를 기준으로 전체 현황, 상세 내역, 날짜별 기록, 현금흐름, 목표 기준, CSV 업로드, 백업 및 복원 기능을 사용할 수 있도록 구성한 웹 대시보드 제작 사례입니다. HTML, CSS, JavaScript 기반의 정적 웹 화면으로 제작했으며, 별도의 로그인이나 서버 데이터베이스 없이 브라우저에서 직접 사용할 수 있는 구조로 구성했습니다. 복잡한 엑셀이나 여러 파일에 흩어진 기록을 한 화면에서 확인하고 관리할 수 있도록 화면 구조, 항목 구성, 입력 기능, 데이터 관리 기능을 함께 설계했습니다.

개인 기록 관리용 웹 대시보드의 전체 콘셉트를 보여주는 대표 이미지입니다. 엑셀, CSV, 메모 등 여러 곳에 흩어진 데이터를 하나의 웹 화면에서 확인하고 관리할 수 있는 서비스 방향을 시각적으로 한 눈에 볼 수 있도록 정리했습니다

대시보드의 전체 현황 화면입니다. 주요 수치, 항목별 비중, 전체 흐름을 한 화면에서 확인할 수 있도록 구성했습니다. 사용자가 여러 데이터를 따로 열어보지 않아도 현재 상태를 빠르게 파악할 수 있는 요약 화면입니다.

그룹별 상세 내역을 확인할 수 있는 화면입니다. 여러 항목으로 나뉜 데이터를 목적별로 분리해 보여주고, 각 그룹의 구성과 상태를 비교할 수 있도록 설계했습니다. 고객의 관리 기준에 맞게 항목명과 분류를 조정할 수 있습니다.

날짜별 기록을 타임라인 형태로 정리한 화면입니다. 입력한 데이터가 시간 순서대로 표시되며, 날짜, 분류, 수량, 금액, 메모 등 세부 내용을 함께 확인할 수 있습니다. 반복적으로 쌓이는 기록을 관리하기 쉽게 구성했습니다.

현재 상태와 목표 기준을 비교할 수 있는 화면입니다. 사용자가 정한 기준값과 현재 데이터를 함께 보여주어 관리 방향을 확인하기 쉽게 만들었습니다. 장기적으로 추적해야 하는 항목이나 목표 비중이 있는 경우 활용할 수 있습니다.

월별 현금흐름을 정리하는 화면입니다. 월별 기록, 항목별 금액, 누적 흐름을 확인할 수 있도록 구성했습니다. 정기적으로 발생하는 수입, 지출, 입금, 현금성 기록 등을 별도로 관리하고 싶은 경우에 적합합니다.

CSV 업로드와 백업 및 복원 기능을 안내하는 화면입니다. 기존에 사용하던 표 데이터를 업로드해 활용할 수 있고, 입력한 데이터를 백업 파일로 저장하거나 다시 불러올 수 있도록 구성했습니다. 직접 관리하는 데이터의 보관과 이동을 고려한 화면입니다.