다른 창 위에 뜨는 타이머를 만든 이유

01

PipTim은 무엇인가

PipTim에는 세 가지 시간 도구가 있습니다. 시간을 정해 두고 세는 타이머, 집중과 휴식을 자동으로 반복하는 집중 사이클, 0초부터 재는 스톱워치입니다. 셋 다 브라우저에서 바로 열리고, 설치하거나 가입할 것이 없습니다.

차별점은 PiP 버튼입니다. 누르면 타이머가 브라우저 밖으로 나와 작은 창이 되고, 그 창은 문서든 코드 편집기든 영상이든 다른 창 위에 계속 떠 있습니다. 데스크톱 Chrome과 Edge에서는 이 창 안에서 시작·정지·1분 추가까지 할 수 있고, 지원되는 모바일 환경에서는 시간이 보이는 창으로 뜹니다. 이름의 PiP는 Picture-in-Picture에서 왔습니다.

02

왜 만들었나

타이머는 이미 충분히 많습니다. 그런데 코딩을 하면서 타이머 탭을 열어 두면, 편집기로 돌아가는 순간 타이머는 보이지 않습니다. 25분 집중이 40분이 되고, 5분 휴식이 20분이 됩니다. 타이머가 없어서가 아니라 가려져서 생기는 문제였습니다.

2023년에 Chrome이 동영상이 아닌 웹 문서를 작은 창으로 띄우는 Document Picture-in-Picture 기능을 내놓았습니다. 그때부터 브라우저만으로 '항상 위에 떠 있는 타이머'가 가능해졌습니다. 운영체제 유틸리티를 설치하거나 모니터를 하나 더 두지 않아도 됩니다. PipTim은 그 기능 위에 타이머를 얹은 것입니다. 이 방법을 다른 방법과 비교한 글은 따로 정리해 두었습니다.

03

운영 원칙

• 설치도 가입도 없습니다주소를 열면 바로 씁니다. 계정을 만들라고 하지 않고, 앱을 깔라고 하지 않습니다. 남의 컴퓨터에서 열어도 똑같이 됩니다.
• 서버에 아무것도 저장하지 않습니다고른 시간, 화면 색상, 알림음 설정은 사용 중인 브라우저의 로컬 저장소에만 남습니다. 운영자는 누가 몇 분 타이머를 썼는지 알지 못하고, 알 필요도 없습니다.
• 기능보다 정확함을 우선합니다다른 탭에 가 있어도, 노트북이 잠깐 잠들었다 깨어나도 남은 시간이 밀리지 않도록 종료 시각을 기준으로 계산합니다. 그래도 브라우저가 통제하지 못하는 한계가 있고, 그 한계는 도움말에 숨기지 않고 적어 두었습니다.
• 무료로 유지합니다비용은 광고로 충당합니다. 광고는 타이머 화면을 가리지 않는 자리에만 둡니다.

04

만드는 사람

PipTim은 한국의 1인 개발자가 만들고 운영합니다. 회사가 아니라 개인 프로젝트이고, 2026년 9월에 공개했습니다. 기능 요청과 버그 신고는 한 사람이 읽고 답합니다. 그래서 답이 며칠 걸릴 수는 있지만, 자동 응답으로 넘기지는 않습니다. 연락 방법은 문의 페이지에 있습니다.

사이트에 실린 글은 타이머를 잘 쓰기 위한 배경 지식을 다룹니다. 뽀모도로 기법이나 20-20-20 규칙처럼 널리 알려진 방법은 출처를 밝히고, 근거가 약한 부분은 약하다고 씁니다. 의학적 조언이 아니며, 눈이나 건강에 관한 결정은 전문가와 상의하세요.

05

기술

PipTim은 빌드 과정 없는 정적 웹사이트입니다. HTML, CSS, 자바스크립트 파일이 그대로 서버에 올라가고, 외부 프레임워크나 런타임 의존성이 없습니다. 페이지가 가볍고 빨리 열리는 이유입니다.

• Document Picture-in-Picture데스크톱 Chromium 계열 브라우저에서 조작 가능한 PiP 창을 엽니다.
• 비디오 PiP 폴백Document PiP가 없는 환경에서는 타이머 화면을 캔버스에 그려 비디오 PiP로 띄웁니다. 조작은 안 되지만 시간은 보입니다.
• 종료 시각 기준 계산1초씩 빼지 않고 끝나는 시각을 저장한 뒤 매번 현재 시각과 비교합니다. 백그라운드 탭에서도 시간이 밀리지 않는 이유이며, 자세한 설명이 있습니다.
• 화면 켜짐 유지브라우저가 지원하면 타이머가 도는 동안 화면이 꺼지지 않도록 요청합니다.
• 서비스 워커한 번 방문한 뒤에는 핵심 파일을 캐시해 두어 느린 연결에서도 빨리 열립니다.

06

광고와 비용

도메인과 서버 비용은 Google AdSense 광고로 충당합니다. 광고는 타이머 아래 영역에만 표시되고, PiP 창이나 설정 화면에는 들어가지 않습니다. 광고가 시간을 보는 것을 방해한다면 그건 잘못 놓인 것이니 알려 주세요.

광고 사업자가 쿠키를 어떻게 쓰는지, 맞춤 광고를 어떻게 끄는지는 개인정보처리방침에 적혀 있습니다. 방문자 수 파악에는 개인을 식별하지 않는 Cloudflare Web Analytics를 씁니다.

07

언어

한국어와 영어 페이지는 전체가 있고, 아랍어는 홈과 가이드, 자주 쓰는 프리셋 몇 개만 있습니다. 기계 번역으로 언어를 늘리지 않습니다. 확인할 사람이 없는 언어는 틀린 문장을 그대로 내보내는 것과 같기 때문입니다. 주소의 경로가 언어를 정하며, /en/ 아래는 영어, /ar/ 아래는 아랍어, 나머지는 한국어입니다.