kimwontae

Focus Timer UI

Focus Timer UI - 25m Focus Mode (Terracotta Red)

"오직 시간과 나만 남겨두는 포커스 타이머"

몰입을 위한 도구

25분 집중하고 5분 휴식하는 '뽀모도로(Pomodoro) 기법'은 작업 효율을 높이는 훌륭한 방법입니다. 하지만 시중에 나와 있는 타이머 앱들은 화면 절반을 가리는 배너 광고, 불필요한 앱 설치 요구, 그리고 데스크 셋업(Desk setup)을 방해하는 복잡한 디자인으로 가득 차 있었습니다.

앱 마켓을 뒤지며 느끼던 답답함을 해결하고자, 군더더기 없는 디자인과 직관적인 기능을 갖춘 브라우저 기반의 무설치 포커스 타이머를 직접 기획하고 개발했습니다.

주요 기능 (Features)

  • 글래스모피즘(Glassmorphism) UI: 투명한 유리 질감을 살린 디자인과 가독성이 뛰어난 폰트(Pretendard)를 사용하여, 아이패드나 모니터에 전체화면으로 띄워두면 훌륭한 인테리어 시계가 됩니다.
  • 감성적인 컬러 테마 전환: 현재 상태에 따라 배경색이 물 흐르듯 부드럽게 전환되어, 사용자가 직관적으로 상황을 인지할 수 있습니다.
    - 포모도로 (25분): 뇌를 깨워주는 차분한 테라코타 레드
    - 짧은 휴식 (5분): 눈이 편안해지는 안정적인 뮤트 틸
    - 긴 휴식 (15분): 깊이 있는 휴식을 위한 스틸 블루
  • 광고 제로, 무설치 웹앱: 웹 기반으로 제작되어 PC, 태블릿, 스마트폰 어디서든 접속 가능하며, '홈 화면에 추가(PWA)' 기능을 통해 기본 앱처럼 깔끔하게 사용할 수 있습니다.
  • 시각적 알림: 무음 모드이거나 이어폰을 끼고 있을 때를 대비해, 타이머 종료 시 화면 전체가 부드럽게 깜빡이며 시각적으로 알려줍니다.
Focus Timer Short Break Mode

Short Break Mode (Muted Teal)

A Minimalist Web Timer for Deep Focus

The Pomodoro Technique is highly effective for productivity, but existing timer apps are often cluttered with distracting ads, require unnecessary installations, and feature designs that ruin a clean desk setup. Frustrated by these limitations, I designed and developed Focus Timer, a minimal, web-based productivity tool.

Key features include a clean Glassmorphism UI and fluid color transitions that visually indicate the current mode: Terracotta Red for a 25-minute focus session, Muted Teal for a short break, and Steel Blue for a long break. Built entirely with Vanilla JavaScript and CSS, it offers a seamless, ad-free experience directly from the browser, doubling as an aesthetic desk clock.

Start Focusing Now

앱 설치 없이 브라우저에서 바로 포커스 타이머를 실행해 보세요.

Launch Focus Timer →

Explore Other Projects