Javascript : 뽀모도로 타이머 만들기 (1)

우리는 시간이 곧 재산인 시대에 살고있다.
이 시간을 얼마나 효율적으로, 그리고 생산적으로 쓰느냐에 따라 능력을 인정 받는다.
여기, 구글 타이머로 유명한 시계가 있다.
구글의 수석디자이너가 생산성 향상을 위해 꼭 필요로 한다는 시계로,
사실 어느 한 주부가 아이를 위해 고안해냈다고 한다.


누가 만지더라도 그 사용법을 알 수 있을만큼 아주 쉽고 직관적인 시계다.
가운데에 있는 조절기를 돌려 시간을 정해놓으면 그 시간에 맞춰 초침이 흘러가고,
남은 시간이 얼마인지 슥 보더라도 알 수 있게 빨간 색상이 지표가 된다.
.
.


사람이 최대로 집중할 수 있는 시간이 1시간도 채 되지 않기에 시간을 정해 놓고 집중하는 것은 좋은 방식이다.
뽀모도로(Pomodoro) 는 이러한 시간 관리 방법론의 하나로,
25분을 집중한 후 나머지 5분은 휴식하는 방법이다.
아래 pomodoro-time 버튼을 눌러 뽀모도로 타이머를 이용해 보자.

뽀모도로 타이머

CodePen을 이용하면 자바스크립트 코드가 한 눈에 들어오지 않아 아래에 덧붙혀 달았다.
먼저 내가 자바스크립트에서 addEventListener를 이용한 클릭 이벤트를 주지 않은 이유는
html의 onclick 속성을 사용하여 재클릭을 방지하기 위함이다.
이벤트 리스너를 주었을 때는 재클릭이 가능해 재클릭시 pomoStart 함수가 계속 실행되는 문제가 있었다.
따라서 this.onclick='';" 을 속성을 통해 타이머가 돌아가는 도중에 사용자가 하는 클릭을 막았다.

- Javascript Code -

const pomoBtn = document.querySelector(".btn");
-
let pomoInterval;
let restInterval;
let pomoTime = 1500;
let restTime = 300;
-
function pomoStart() {
  pomodoro();
  pomoInterval = setInterval(pomodoro, 1000);
}
-
function pomodoro() {
  const minutes = String(Math.floor(pomoTime / 60)).padStart(2, "0");
  const seconds = String(pomoTime % 60).padStart(2, "0");
  pomoTime -= 1;
  pomoBtn.innerHTML = `${minutes} : ${seconds}`;
  if (pomoTime < 0) {
                      clearInterval(pomoInterval);
                      restStart();
                      restInterval = setInterval(restStart, 1000);
                      beep();
  }
}
-
function restStart() {
  const restMinutes = String(Math.floor(restTime / 60)).padStart(2, "0");
  const restSeconds = String(restTime % 60).padStart(2, "0");
  restTime -= 1;
  pomoBtn.innerHTML = `${restMinutes} : ${restSeconds}`;
  if (restTime < 5 && restTime >= 0) {
                                       beep();
  } else if (restTime < 0) {
                             clearInterval(restInterval);
                             window.location.reload(true);
  }
}
-
function beep() { 
const snd = new Audio("https://t1.daumcdn.net/cfile/tistory/99412B355CF6B93806?original");
      snd.play(); 
} 

주요 로직은
     뽀모도로 버튼 클릭시 25분 타이머(pomoStart) 실행
-> 뽀모도로 타이머 종료 알림음이 울린 후 5분 타이머(restStart) 실행
-> 휴식 타이머 종료 알림음이 울린 후 페이지 새로고침(reload) 이다.
이 로직을 구현하며 내가 시행착오를 겪었던 부분은 크게 두 가지였다.

> 시행착오 (1)

첫 시행착오는 타이머를 구현하는 것이었다.
사실 처음엔 5분단위로 이루어진 버튼 중 하나를 클릭하면 그 타이머를 작동시키는 원대한 꿈을 그렸었다.
하지만, 막상 타이머를 만드려고보니 어떻게 만들어야할지 모르겠는거다..ㅎ
지정한 시간에서 1초씩 빼야하는 건 알겠는데, 지정한 시간을 변수에 담을 생각을 못했었다.

그 변수를 60으로 나눈 몫과 나머지로 분과 초를 만들 수 있다는 단순한 로직을 알고 유레카를 외쳤던..
정말 코딩은 더러운 코드를 짜면 뭔가 잘못되어가고 있다고 빨리 눈치채야 한다.

> 시행착오 (2)

첫번째 시행착오랑 비슷한 실수를 했다.
시간이 0초보다 줄어들면 setInterval을 종료시키고 싶었으나,
pomodoro 함수에서 이를 종료시킬래도 pomoInterval이 지역변수라 쓸 수가 없던 것이다.

블록 밖에서 let으로 pomoInterval을 선언하여 전역변수로 만들면 될 일이었다.
변수가 가장 쉬운 개념이라며 무심코 넘겼었는데,
가장 중요한 개념이었음을 뽀모도로 타이머를 만들며 깨달았다.

마치며

1년전 읽은 책에서 뽀모도로 타임을 알게되고, 종종 사용해오고 있다.
이렇게 직접 이 타이머를 구현해보면서 그동안 내가 얕게 알고 있던 개념도 바로잡고,
로직을 몇번이고 머릿속으로 그려보며 자바스크립트를 동적으로 활용하는 방식을 이해할 수 있어 좋았다.
다음에는 사진상의 그림처럼 사용자가 마우스를 컨트롤하여 시간을 지정하면, 매 분마다 빨간 부분의 각도가 1도씩 줄어드는 제대로 된 뽀모도로 타이머를 구현해보고 싶다.