단기 집중을 통한 업무 효율 극대화(뽀모도로 기법, 구글 집중 시계) 방안을 위한 MVP 만들기

집중이 업무 효율과 성과에 미치는 영향

  • 원씽(the one thing) : 성공을 위해서는 단 하나의 가장 중요한 목표에 집중해야 한다. 가장 중요한 일에 모든 자원을 집중해야 하고, 그를 위해서는 시간관리가 핵심이다

  • 세계 최고의 인재들의 대표적인 시간관리법

    • 우선 순위 결정: 중요하고 긴급한 일을 먼저 처리, 아이젠하워 매트릭스를 활용

      • 아이젠하워 매트릭스(중요하고 긴급한 일(빨간색), 중요하지만 긴급하지 않은 일(파란색), 중요하지 않지만 긴급한 일(노란색), 중요하지도 긴급하지도 않은 일(초록색 구역)

        한국어 한국어 한국어 한국어 한국어 한국어 한국어 한국어
    • 타임 블로킹(Time Blocking) : 일정 시간을 특정 작업에만 집중하도록 시간을 블록으로 나눠서 관리

    • 집중력 유지 : 집중력 방해 요소를 최소화하고 한가지 일에 몰입

  • 뽀모도로 기법(Pomodoro) : 짧게 자주 업무 집중, 25분 집중해서 일하고, 그 후 5분 휴식의 사이클을 지속적으로 반복(시작과 끝을 기록)하여 효과적으로 시간을 관리하고 작업 효율을 극대화(단기간 집중력 향상, 장기간 업무와 학습 부담 축소)

  • 구글 집중 시계(Google Focus Timer) : 사용자가 집중해야 하는 작업에 대한 시간을 설정하고 관리(뽀모도로 기법과 연계 1개 사이클(집중 25분, 휴식 5분)을 완료한 후 15~30분간의 긴 휴식 설정)

    작업의 계기 : 달의이상님이 뽀모도로 시계(https://reasonofmoon.github.io/pomodoro-timer/)를 소개한 것을 보고 이걸 Claude로 만들어 보면 좋겠다 싶어져서 시작함

    한�국어 앱 스크린샷
  • 위에 프로그램이 제공된 후에 갑자가 the better 커뮤니티에서 MC스퀘어 풍의 포모도로와 40Hz 주파수 이야기와 다양한 형태의 포모도로 시간관리법에 대한 이야기가 오고 감

    ※그 중 필즈상 수상자 허준이 교수의 15분짜리 모래시계로 집중-휴식하는 이야기도 나옴

    ※결국 할일을 집중해서 결과를 내는 것이 중요함

    입력과 출력의 과정을 보여주는 다이어그램
  • 이 개발을 위한 과정은 우선 기존 프로그램을 chatGPT로 돌려서 분석한 결과를 Claude에게 주서 기능을 재설계하였음 > 설계한 프로그램을 코드로 구성해 보라고 함 > 프로그램의 UI/UX를 화면 캡쳐해서 비슷하게 작업해달라고 함 > 1차 최종 코드를 작성하여 프로그램을 구현시킴 > 완성된 프로그램을 시뮬레이션해 달라고 요청함

    ※최종적으로는 파이선 프로그램으로 인터프리터 하라고 나옴

    python pomodoro_timer.py 
  • 프로그램을 동작시키는 것을 못하고, 구글 집중 시계의 기능을 추가해서 듀얼 모드 작업을 구현시킴 > 그 결과를 다시 시뮬레이션시켜서 점검하도록 요청함 > 개선된 2차 최종 코드를 작성하기를 요청함

  • 여기서 react 기능이 생각나서 react로 구현해 달라고 요청함

한국어로 된 타이머 스크린샷
  • 이 단계에서 몇 번의 작업을 거쳐서 구글 집중 시계로 명칭을 바꾸고, 이때 시간 입력시 즉시 반영되도록 몇가지 사안을 수정 요청하고 시뮬레이션 및 react기능으로 확인함

    한국어로 된 타이머 스크린샷

한국어로 된 타이머 스크린샷
  • 최종적으로는 작은 윈도우 팝업 형태로 만들어서 작업 중에 볼 수도 있고, 시간이 종료될 때 알람도 울리고, 윈도우를 움직이기도 하는 추가 기능을 구현해 달라고 함 > 시뮬레이션으로 최종 점검을 함

    이 최종 버전은 다음과 같은 개선사항을 포함하고 있습니다:
    
    입력값 유효성 검사 추가 (validateInput 함수)
    알람음 반복 재생 방지 (playAlarm 함수 수정)
    시스템 트레이 기능 추가 (Electron 메인 프로세스에 구현)
    윈도우 크기 조정 가능하도록 설정
    
    React로 확인하는 방법:
    
    위 코드를 적절한 파일 구조로 저장합니다.
    프로젝트 루트 디렉토리에 public 폴더를 만들고, 그 안에 alarm.mp3 파일(알람음)과 icon.png 파일(트레이 아이콘)을 넣습니다.
    터미널에서 프로젝트 폴더로 이동합니다.
    npm install 또는 yarn install을 실행하여 의존성을 설치합니다.
    개발 모드에서 앱을 실행하려면:
    
    npm run electron-dev 또는 yarn electron-dev를 실행합니다.
  • 최종 완성품이 팝업 윈도우로 작동하는 것은 단순 react 기능으로는 실행되지 않음

  • 지금까지 뭘하면 좋을까와 그 유사한 제품의 분석, 그것을 설계하고, 구현하는 작업, UI&UX 작업까지를 해보고, 실제 코드로 작성한 것을 시뮬레이션으로 확인하는 작업을 반복하면서 간단하게 완성

    ※react 기능으로 곧바로 확인할 수 있다는 것을 제대로 몰라서 헤맸던 부분이 있고, 그럼에도 코드가 복잡해지고, 어떤 기능들은 직접 확인할 수 없게 되는 점도 알게 됨

  • 달의이성님이 새로운 수정본을 올렸네요.(https://reasonofmoon.github.io/pomodoro/)

3

👉 이 게시글도 읽어보세요