스톱워치 위젯

[미니 프로젝트] 위젯 만들기

+ 결과물

사이드바(min-width가 769px일 때 등장)의 스톱워치 위젯이다. 웹사이트 내 공부 콘텐츠를 볼 때 유용할 것 같아 제작했다. 시작 버튼을 누르고 페이지를 정독한 뒤에 얼마나 걸렸는지 확인해 보자.

1-1 HTML

HTML에서 스톱워치를 구성하는 요소들을 나열하고 class를 부여했다. 이때 스톱워치는 studytimer를 줄여서 stdtimer라 부르기로 했다. 스톱워치를 구성하는 요소들의 class도 stdtimer-wrap, stdtimer-top, stdtimer-btns 등으로 정했다.

<div class="stdtimer-wrap">

  <div class="stdtimer-top">
    <div class="stdtimer-label">공부 시간</div>
    <div class="stdtimer-time" id="stdtimer-display">00:00:00</div>
  </div>

  <div class="stdtimer-btns">
    <button class="stdtimer-btn" id="stdtimer-startBtn">시작</button>
    <button class="stdtimer-btn" id="stdtimer-resetBtn">초기화</button>
  </div>

</div>

1-2 JS

스톱워치가 작동하도록 JS에서 stdtimerInit 함수를 정의하고 중첩 함수인 stdtimerFmt, stdtimerToggle, stdtimerReset까지 만들어줬다.

작동 원리는 다음과 같다. 기본적으로 setInterval을 이용해 경과 시간을 계산한다. 사용자가 시작 버튼을 누르면 Interval이 시작되고, 정지 버튼을 누르면 Interval이 멈춘다. Interval이 실행되는 동안 경과한 시간은 변수 stdtimerElapsed에 저장된다.

만약에 사용자가 다시금 시작 버튼을 누르면 경과 시간은 이어서 계산된다. 하지만 초기화 버튼을 누르면 stdtimerElapsed의 값이 0이 되므로 처음부터 다시 시작해야 한다.

<script>
//stdtimerInit 함수 정의
function stdtimerInit() {
  //변수 선언
  let stdtimerRunning = false;
  let stdtimerStartTime = null;
  let stdtimerElapsed = 0;
  let stdtimerInterval = null;

  //시간 형식 변환 중첩함수
  function stdtimerFmt(ms) {
    //밀리초(ms)를 초로 변환
    const t = Math.floor(ms / 1000);
    //시간, 분, 초 계산. %는 나눗셈의 나머지 계산.
    const h = Math.floor(t / 3600);
    const m = Math.floor((t % 3600) / 60);
    const s = t % 60;
    //숫자를 00:00:00 형식 문자열로 변환
    return String(h).padStart(2,'0') + ':' + String(m).padStart(2,'0') + ':' + String(s).padStart(2,'0');
  }

  //토글 버튼 중첩함수
  function stdtimerToggle() {
    //타이머가 실행 중이 아님 -> 사용자는 시작 버튼 작동 원함.
    if (!stdtimerRunning) {
      //시작 시점 기록
      stdtimerStartTime = Date.now() - stdtimerElapsed;
      //setInterval 시작, 1000ms(1초)마다 반복, 실행 중인 Interval의 ID 저장.
      stdtimerInterval = setInterval(() => {
        //경과 시간 계산
        stdtimerElapsed = Date.now() - stdtimerStartTime;
        //경과 시간 표시
        document.getElementById('stdtimer-display').textContent = stdtimerFmt(stdtimerElapsed);
      }, 1000);
      stdtimerRunning = true;
      document.getElementById('stdtimer-startBtn').textContent = '정지';
    } else {
    //타이머가 실행 중 -> 사용자는 정지 버튼 작동 원함.
      //setInterval 중지
      clearInterval(stdtimerInterval);
      stdtimerRunning = false;
      document.getElementById('stdtimer-startBtn').textContent = '시작';
    }
  }

  //초기화 함수
  function stdtimerReset() {
    //setInterval 중지
    clearInterval(stdtimerInterval);
    stdtimerRunning = false;
    //경과 시간 초기화
    stdtimerElapsed = 0;
    document.getElementById('stdtimer-display').textContent = '00:00:00';
    document.getElementById('stdtimer-startBtn').textContent = '시작';
  }

//사용자가 버튼을 누르면 함수 실행
  document.getElementById('stdtimer-startBtn').addEventListener('click', stdtimerToggle);
  document.getElementById('stdtimer-resetBtn').addEventListener('click', stdtimerReset);
}

//페이지 로딩 후 정의한 함수 호출
window.addEventListener('load', stdtimerInit);
</script>

1-3 CSS

CSS로 미니멀한 스톱워치 디자인을 구현했다.

코드에서 자식 요소들을 배치하기 위해 display: flex와 display: grid를 사용했다. 참고로 display: flex는 1차원(가로 또는 세로 한 방향), grid는 2차원(동시에 가로 세로 두 방향) 배치 방식이다.

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&family=Press+Start+2P&display=swap');

.stdtimer-wrap {
  /*크기*/
  width: 100%;    /*부모 요소 너비에 꽉 맞게 채우기*/
  aspect-ratio: 1; /*가로:세로 1:1*/
  container-type: inline-size;  /*cqw를 계산할 때 기준: 너비*/

  /*레이아웃*/
  display: flex;
  flex-direction: column;  /*자식 요소들을 flexbox 규칙에 따라 세로로 쌓음*/

  /*모양*/
  background: #FFFFFF;
  /*텍스트*/
  font-family: 'Noto Sans KR', sans-serif;
}


.stdtimer-top { 
  /*크기*/
  flex: 1;  /*부모 요소(wrap)의 남은 공간 최대한 채우기*/
  /*레이아웃*/
  display: flex; 
  flex-direction: column;  /*자식 요소들을 세로로 쌓음*/
  align-items: center;       /*가로 기준 가운데 정렬*/
  justify-content: center;  /*세로 기준 가운데 정렬*/
  gap: 4cqw;  /*자식 요소들의 간격: 컨테이너 너비의 4%*/
}

.stdtimer-label {
  font-size: 5cqw;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: #484644;
}
.stdtimer-time {
  font-family: 'Press Start 2P', monospace;
  font-size: 10cqw;
  line-height: 1;
  color: #111111;
}


.stdtimer-btns {
  display: grid;  /*자식 요소들을 그리드로 배치*/
  grid-template-columns: 1fr 1fr;  /*자식 요소들을 2열(1:1비율)로 배치*/
}

.stdtimer-btn {
  /*크기*/
  padding: 6cqw 0;

  /*모양*/
  background: transparent; 
  border: none;
  /*텍스트*/
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 5cqw;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #484644;

  /*인터랙션*/
  cursor: pointer; 
  transition: background 0.15s; 
}

.stdtimer-btn:hover {
  background: #F7F7F6; 
}
</style>

+ 정리

이번 글에서는 HTML, CSS, JS를 사용해 간단하게 스톱워치 위젯을 만드는 법을 알아봤다.