← 블로그 목록

인터벌 러닝 타이머를 다시 그렸습니다

1분 읽기

인터벌 러닝 타이머 페이지를 갈아엎었습니다.

목표

  • 달리면서 한눈에 남은 시간이 보일 것
  • 소리와 진동으로 구간 전환을 알릴 것
  • 프리셋과 직접 설정, 피라미드 훈련까지 지원할 것

디자인 결정

숫자는 스플릿플랩(엘리베이터·스톱워치) 방식으로 표시합니다. 숫자가 바뀔 때만 짧게 떨어지는 애니메이션이 들어갑니다.

진행 링은 숫자를 감싸지 않고 바깥 테두리로만 존재합니다. 링 두께와 안쪽 여백을 합쳐도 시계 박스와 부딪히지 않도록 계산해 두었습니다.

.ivr__dial   링 + 시계를 담는 정사각 영역
.ivr__ring   바깥 진행 링 (SVG)
.ivr__flip   안쪽 62% 에만 자리잡는 스플릿플랩

저장

설정값은 localStorage 에 저장해서 다음에 그대로 씁니다. 프리셋과 일치하는 조합이면 해당 프리셋 카드가 자동으로 활성화됩니다.

배경은 항상 어둡게, 글씨는 흰색. 포인트만 링피트 어드벤처의 강렬한 주황을 씁니다.