[Desk-tools] 업무 도구 모음 - 기본 기능

2026. 3. 29. 17:37Builder Journal

이 프로젝트의 가장 베이스인 부분으로 생각을 하고 구현을 했습니다. 다만 오프라인이다 보니 협업에서 사용하는 툴은 거의 없습니다. 협업보다는 오히려 스스로 작업 계획을 하고, 오히려 인수인계를 위한 자료 같은게 될 것 같습니다.

사실 제가 사용하는 방법도 원맨쇼를 위한 툴에 가깝습니다.

그리고 보면 사실 크게 특별할 것도 없는 기능들입니다. 그리고 굳이 여기 이렇게 만들 필요가 있어? 라고 생각 할 수 도 있는 부분이지만 구현항목을 보면 거의 내가 작업한 히스토리를 남기고 내가 작업하기 조금 편하게 하기 위한 내용들이 대부분입니다.

 

https://zafrem.github.io/Desk-tools/

  • 작업의 흐름을 한눈에: 칸반보드 (Kanban Board)
    • 작업 생성: "New Task" 버튼으로 새 작업 추가
    • 진행 상황 추적: 프로그레스 값(progress) 변경으로 진행도 업데이트
    • 드래그 앤 드롭: KanbanBoard 컴포넌트에서 구현
    • 작업 편집/삭제: 각 작업에 대해 수정 및 삭제 가능
    • 데이터 관리: Dexie.js의 ganttTasks 테이블에 저장
    • 타임스탬프: createdAt, updatedAt으로 생성/수정 시간 추적
  • 생각의 정리: 메모장 (Notepad)
    • 노트 생성: "New Note" 버튼으로 신규 노트 추가
    • 마크다운 지원: 링크, 볼드, 이탤릭 등 서식 지원
    • 태그 시스템: 노트에 태그 추가로 분류
    • 좌측: 노트 리스트 (검색, 삭제 가능)
    • 우측: 에디터 (마크다운 프리뷰 지원)
    • NoteEditor 컴포넌트: 풍부한 편집 기능
  • 루틴의 관리: 일일 할 일 (Daily Tasks)
    • 일일 체크리스트: 매일 반복되는 작업
    • 완료 추적: 각 작업의 완료 여부 체크
    • 재설정 기능: 매일 자정에 자동 리셋 (또는 수동 리셋)
    • 완료율 표시: 오늘 완료한 작업의 진행률
  • 시각적 아이디어: 화이트보드 (Whiteboard)
    • 자유형 드로잉: Konva.js + react-konva 사용
    • 펜/지우개/색상 선택: 다양한 그리기 도구
    • 캔버스 조작: 줌, 팬(이동) 기능
    • 도형 그리기: 직선, 사각형, 원 등
    • PNG 내보내기: 스크린샷 다운로드
    • 캔버스 초기화: 전체 지우기
  • 시간의 재구성: 스케줄 (Weekly Scheduler)
    • 주간 그리드: 7일 x 시간대별 셀
    • 셀 클릭: 특정 시간에 작업 추가
    • 작업 입력: 텍스트 + 소요 시간(duration) 설정
  • 나만의 지식 창고: 용어정리 (Terms Dictionary)
    • 용어 추가: "+" 버튼으로 새 용어 등록
    • 카테고리 분류: 용어를 그룹으로 관리
    • 검색 기능: 용어명, 정의, 카테고리로 검색
    • 편집/삭제: 기존 용어 수정 또는 삭제
    • 다이얼로그: 입력 폼 다이얼로그
  • 빠른 길찾기: 북마크 (Bookmarks)
    • 북마크 추가: URL + 제목 + 설명 입력
    • 그룹화: 카테고리별 폴더 구성
    • 드래그 앤 드롭: @dnd-kit으로 순서 조정
    • 빠른 링크: 클릭으로 즉시 이동
    • 아이콘 표시: 웹사이트 파비콘 표시
    • 검색: 북마크 검색

마치며: 모든 데이터는 내 브라우저 안에

이 모든 기능은 Dexie.js를 통해 브라우저 내부 DB에 안전하게 보관됩니다. 인터넷 연결이 끊겨도, 혹은 민감한 내부 데이터를 다루고 있어도 안심할 수 있습니다. 필요할 땐 언제든 파일로 출력하여 백업할 수 있는 구조입니다.

특별할 것 없는 기능들이지만, 이 기능들이 한곳에 모여 '나만의 업무 히스토리'가 될 때 Desk-tools는 비로소 완성됩니다. 저와 같이 '나만의 안전한 작업실'이 필요한 분들에게 작은 도움이 되길 바랍니다.