😶‍🌫️ 제작 동기

기존에 사용하고 있던 비주얼 타이머 앱에서 디자인이나 기능면에서 아쉬운 점이 있어 이를 개선하고자 시작하게 된 개인 프로젝트입니다.

일반적으로 앱은 모바일이나 웹 중 한 가지 플랫폼에서만 제공되는 경우가 많지만, 웹과 모바일에서 모두 설치하여 앱처럼 사용할 수 있도록 PWA(Progressive Web App)로 개발하였습니다.

요즘 To-do list, 타이머 사용 시간 통계 등 굉장히 리치한 기능을 갖춘 타이머 앱들이 많은데, 타이머의 기본적인 기능에 집중하면서도 직관적이고 실용적인 사용자 경험을 제공하는 컴팩트한 앱을 만드는 것을 목표로 했습니다.

⏱️ Visual Timer 바로가기

사용자 친화적인 디자인과 기본 타이머부터 순차 실행이 가능한 루틴 타이머까지 다양한 타이머를 직관적으로 제공하는 웹·모바일 지원 PWA 비주얼 타이머입니다.

• ‍🐈‍⬛ GitHub : https://github.com/do0ori/visual-timer

• 📝Blog : https://velog.io/@do0ori/Visual-Timer-쉽고-간단하게-시각적으로-시간-관리하기

※ iOS 기기에서는 무음 모드를 해제(🔕→🔔)해야 타이머 완료 시 소리가 납니다.

✨ 주요 기능

1. 기본(Default) 타이머 (메인 페이지)

• 드래그와 클릭만으로 시간을 자유롭게 설정해 바로 사용할 수 있는 기본 타이머입니다.

2. 사용자 정의 타이머

• Basic 타이머

  • 단일 타이머로 기본적인 시간 관리에 적합합니다.

• Routine 타이머

  • 여러 Basic 타이머를 그룹으로 묶어 순차적으로 실행 가능합니다.

  • 각 타이머의 실행 간격, 시작 시점, 반복 횟수(1회/무한)를 설정할 수 있어 다양한 활용이 가능합니다.

  • 활용 예시:

    • 뽀모도로 타이머(집중 시간 + 휴식 시간 반복).

    • 운동 루틴 관리.

    • 기본 타이머의 60분 제한을 넘어서는 긴 시간을 설정하고 싶을 때도 유용.

3. 다양한 테마

• 베이지, 퍼플, 블랙 세 가지 테마로 원하는 디자인을 선택할 수 있습니다.

• 타이머 디스크 색상도 별도로 설정할 수 있습니다.

• 사용자 정의 테마를 추가할 수 있습니다.

4. 화면 유지 기능

• 타이머 실행 중 화면이 꺼지지 않도록 유지되어 작업이나 운동 중 실시간으로 타이머를 확인할 수 있습니다.

5. 백그라운드 알림 기능

• 타이머가 백그라운드에서도 동작하며, 알림을 통해 남은 시간과 종료 알림을 실시간으로 확인 가능.

6. 직관적인 동작과 조작 방식

• ESC 키로 타이머 닫기, 뒤로가기 버튼으로 작업 취소 등 익숙하고 직관적인 조작 방식을 지원합니다.

7. 가로/세로 모드 최적화

• 디바이스의 방향에 따라 자동으로 화면이 최적화되어 더 편리하게 사용 가능합니다.

8. 웹과 앱에서 모두 사용 가능

• PWA 지원: 브라우저에서 사용할 수 있을 뿐만 아니라 설치하여 앱처럼 사용할 수 있습니다.

(Chrome으로 웹사이트에 접속해 주소 표시줄 오른쪽의 모니터 모양의 버튼을 클릭하면 설치 가능)

• 앱처럼 사용 가능: 모바일 환경에서도 독립적인 앱으로 설치해 활용 가능합니다.

(Chrome으로 웹사이트에 접속하면 자동으로 설치 알림이 뜸)

(알림이 뜨지 않는다면 오른쪽 위 점 세 개에서 스마트폰 모양의 앱 설치/홈 화면에 추가 버튼을 클릭해 설치)

저는 개인적으로 컴퓨터로 공부하거나 작업할 때 뽀모도로 타이머용으로 자주 사용하는 편이에요. 집에서 홈트하거나 요리할 때는 모바일 앱을 사용합니다. ☺️

읽어주셔서 감사합니다 :)