실제 서비스 화면: 25분 집중 모드
프로젝트 개요
- 해결 과제
- 짧은 집중 세션을 시작할 때 설치와 계정, 복잡한 설정 없이 바로 실행할 수 있는 타이머가 필요했다.
- 접근 방식
- 집중·휴식 상태와 타이머, 상태별 색상 변화를 한 화면에 두고 필요한 설정만 남겼다.
- 담당 기여
- 사용 흐름과 시각 상태를 설계하고 HTML, CSS, Vanilla JavaScript로 타이머를 구현했다.
- 결과
- 데스크톱과 모바일 브라우저에서 바로 실행되는 집중 타이머를 배포했다.
몰입을 위한 도구
25분 집중과 5분 휴식을 반복하는 뽀모도로(Pomodoro) 방식을 브라우저에서 바로 실행할 수 있도록 만든 타이머입니다. 계정, 앱 설치, 복잡한 통계 없이 세션을 시작하고 현재 상태를 확인하는 기능에 집중했습니다.
집중·짧은 휴식·긴 휴식의 세 가지 상태를 시간과 배경색으로 구분하고, 데스크톱과 모바일에서 같은 흐름으로 사용할 수 있게 구성했습니다.
주요 기능 (Features)
- 집중된 화면: 타이머와 현재 모드를 중심에 두고 Pretendard 서체와 반투명 패널로 정보를 구분했습니다.
- 상태별 색상: 현재 세션을 빠르게 구분할 수 있도록 배경색이 전환됩니다.
- 집중 (25분): 테라코타 레드
- 짧은 휴식 (5분): 뮤트 틸
- 긴 휴식 (15분): 스틸 블루 - 무설치 웹앱: 데스크톱, 태블릿, 스마트폰의 브라우저에서 바로 실행하며 홈 화면에 추가해 사용할 수 있습니다.
- 시각적 알림: 무음 모드이거나 이어폰을 끼고 있을 때를 대비해, 타이머 종료 시 화면 전체가 부드럽게 깜빡이며 시각적으로 알려줍니다.
실제 서비스 화면: 5분 짧은 휴식 모드
English
A Minimalist Web Timer for Deep Focus
Focus Timer runs 25-minute focus sessions and 5- or 15-minute breaks directly in the browser. It omits accounts, installation, and detailed analytics so a session can begin immediately.
A centered timer and translucent panel keep the current state visible. Background colors distinguish focus, short break, and long break modes. The timer is implemented with Vanilla JavaScript and CSS and works on desktop and mobile browsers.
