공부나 업무 효율을 높여주는 '뽀모도로 기법'을 아시나요? 45분 집중하고 15분 휴식하는 패턴을 반복하는 시간 관리 방법인데요.
오늘은 복잡한 앱 설치 없이, HTML 파일 하나로 평생 쓸 수 있는 나만의 뽀모도로 타이머를 만들고, 심지어 친구들에게 링크로 공유하는 방법까지 소개해 드립니다.
1. 내가 만든 뽀모도로 타이머 소개
시중의 타이머 앱들은 광고가 있거나, 기능이 너무 복잡해서 오히려 집중을 방해하곤 합니다. 그래서 저는 꼭 필요한 기능만 담은 심플한 웹 앱을 만들었습니다.
✨ 주요 기능
- 45분 집중 / 15분 휴식 자동 전환
- 시간 종료 시 부드러운 알람 소리 (깜짝 놀라지 않아요!)
- 다크 모드/라이트 모드 자동 테마 (집중: 붉은색, 휴식: 초록색)
- 설정 저장 기능: 내가 원하는 시간으로 변경 가능
- 설치 불필요: 파일 하나만 있으면 어디서든 실행
2. 소스 코드 다운로드 (무료 배포)
이 앱은 HTML, CSS, React가 하나의 파일에 통합되어 있어 관리가 매우 쉽습니다. 아래 코드를 다운로드하거나 복사해서 메모장에 저장하세요.
📂 파일 다운로드: 첨부 참조
3. 내 컴퓨터에서 바로 실행하기
다운로드한 index.html 파일을 더블 클릭해 보세요. 크롬(Chrome), 엣지(Edge), 웨일 등 웹 브라우저가 열리면서 타이머가 바로 실행됩니다.
인터넷이 없어도 작동하기 때문에 도서관이나 비행기 안에서도 사용할 수 있습니다.
4. 친구들에게 공유하기 (Netlify로 배포)
이 좋은 도구를 나만 쓸 순 없겠죠? 내 컴퓨터에 있는 파일을 **인터넷 주소(URL)**로 변환해서 인스타그램이나 쓰레드(Threads)에 공유하는 방법을 알려드릴게요. 서버 비용은 0원입니다.
준비물: 방금 저장한 index.html 파일
단계 1: 폴더 만들기 바탕화면에 새 폴더를 만들고(예: my-timer), 그 안에 index.html 파일을 넣습니다. 주의: 파일 이름이 반드시 index.html이어야 합니다!
단계 2: Netlify Drop 접속 Netlify Drop 사이트(클릭)에 접속합니다.
[Netlify Drop 사이트 화면 스크린샷을 넣어주세요]
단계 3: 드래그 앤 드롭 방금 만든 폴더(my-timer)를 통째로 사이트의 "Drag and drop your site folder here" 영역으로 끌어다 놓습니다.
단계 4: 주소 확인 업로드가 완료되면 random-name.netlify.app 같은 주소가 생성됩니다. 이 주소를 클릭하면 내 타이머가 인터넷에 배포된 것을 확인할 수 있습니다!
5. 마무리
이제 생성된 주소를 복사해서 카카오톡이나 SNS에 공유해보세요. 앱 내에 있는 **'공유 버튼'**을 누르면 쓰레드(Threads)로 바로 포스팅도 가능합니다.
여러분의 생산성을 높여줄 뽀모도로 타이머, 직접 만들어서 사용해 보시길 바랍니다! 🍅