Impact

출시 후 3개월 후인 11월부터 꾸준히 증가하여 1년 가량 지난 지금 사용자 수 7000% 증가

평점 5.0 유지 중

Background

The Limits of Physical Timers?

Time management is important for living a productive life. Many people use timers to stay on track. However, physical timers often have their limits. First, even when a timer goes off, we may ignore it if we’re too focused on something else. Second, we have to look away from what we’re doing to check the timer, which can distract us. Third, if the timer is placed far away, it’s hard to respond quickly when it rings.

These issues can make physical timers less effective, especially when working in a digital environment. When we’re browsing the web or working on a computer, it’s easy to lose track of time and forget the timer completely. So, how can we solve this problem?

A visual timer built into the browser could be a great solution. By displaying the time clearly on the screen, users can stay aware of the time without getting distracted or forgetting the timer, improving focus and productivity.

Research

Title

Timers are a helpful tool that many people use to manage their time. To better understand how people use them, I interviewed six of my former teammates (four front-end developers and two back-end developers) who had experience with timers. Through these interviews, I wanted to learn why they used timers, how they used them, and to find out the benefits and problems with the usual timer methods.

Through the insights gathered, it became clear that while timers are essential for managing time, there are significant issues with the traditional timer methods. These problems often hinder users’ ability to manage their time effectively, particularly in digital environments. The three main problems identified are:

1. Broken Focus

• Problem: To check a physical timer, users must shift their attention away from the screen, breaking their focus and causing distractions. This disrupts the workflow, leading to inefficiencies in completing tasks.

2. Ignored Alarm

• Problem: Users frequently ignore physical timers or digital alarms when they are deeply focused on their work. This results in missed reminders and extends the time spent on tasks, reducing the timer’s effectiveness as a time management tool.

3. Invisible Time

• Problem: Traditional timers often lack integration into digital workspaces, making it difficult for users to maintain awareness of the passing time. Without continuous visual feedback, users can easily lose track of time, leading to poor time management.

These issues highlight the limitations of conventional timers and the need for a more integrated, visual solution that can provide constant feedback without disrupting the user’s workflow.

Ideate

Bringing the Timer to the Browser?

In response to the issues identified in the research phase, I began brainstorming how to create a solution that would solve these problems without disrupting the user’s focus or workflow. While contemplating visibility, the Time Timer module I usually used came to mind. When used alongside a PC, it required shifting focus away from the screen to check the time, negatively impacting productivity. This gave me an idea: what if I could bring the timer directly into the browser?

Many users rely on the Chrome browser for daily tasks, so creating a browser extension seemed like the most intuitive and effective solution. By integrating a visual timer directly into the browser, users could manage their time without having to divert their attention from the screen.

Based on these insights, I set the following goals to address the problems identified in the research:

1. Ignored Alarm → Provide Continuous Visual Feedback

The timer should be visually and intuitively displayed to users at all times, making it harder to ignore. By providing constant visual feedback, users can stay aware of time even while focused on their tasks.

2. Broken Focus → Integrate Timer into Digital Environment

The timer should be seamlessly integrated into the digital workspace, allowing users to keep track of time without shifting their attention away from the screen. This will help maintain workflow while still managing time effectively.

3. Invisible Time → Ensure Persistent Visual Feedback

A timer that offers continuous visual feedback within the digital workspace will allow users to manage their time more easily during work. This solution ensures users remain aware of the passing time, enhancing overall productivity.

Build

개발을 시작하기 전, Chrome extension만의 독특한 설계 구조를 먼저 이해해야 했습니다. 시간이 좀 걸렸지만, 다음의 이미지처럼 구조를 시각화하여 이를 명확히 이해하려 노력했습니다. 더 자세한 정보는 이 문서를 참고했습니다.

간단히 설명하자면, Chrome 브라우저에서 확장 프로그램을 클릭하면 popup.html이 등장하고, 이때 popup.js에서 사용자가 입력한 정보나 인터랙션을 처리합니다. 그러나 popup이 사라진 후에도 타이머와 같은 동작이 유지되려면 background.js가 필요합니다.

background.js는 브라우저가 실행되는 동안 백그라운드에서 계속 동작하며, 타이머와 같은 중요한 상태를 관리합니다. 이때, content.js에 명령을 보내 canvas를 사용해 브라우저 내에 그림을 그리게 합니다. 그러나 매 초마다 canvas에 계속 그림을 그리는 작업은 브라우저에 큰 부하를 줄 수 있습니다.

이 문제를 해결하기 위해 worker.js를 도입하여 메인 스레드와 작업을 분리하였습니다. 웹 워커를 사용하면, 무거운 연산이나 애니메이션 같은 작업을 메인 스레드에서 분리하여 성능 저하 없이 부드럽게 동작할 수 있도록 할 수 있습니다. worker.js는 canvas에 주기적으로 그림을 그리는 복잡한 작업을 처리하면서, 메인 스레드에 부담을 주지 않도록 설계되었습니다.

이러한 구조는 브라우저 내에서 효율적인 타이머 동작과 시각적 피드백을 제공하면서도, 브라우저 성능을 유지하는 데 중요한 역할을 했습니다.

Challenges

1. 실제 타이머와 같은 자연스러운 시간 흐름 구현

실제 타이머는 초마다 지속적으로 움직이는 시각적 효과를 제공하므로, 웹에서도 이 효과를 재현하는 것이 중요한 목표였습니다. 이를 위해 canvas를 특정 프레임마다 다시 그려서 시간이 부드럽게 줄어드는 비주얼 효과를 구현했습니다. 매 초당 60 프레임을 그리도록 설정하여, requestAnimationFrame을 통해 타이머의 자연스러운 움직임을 유지했습니다. 또한, 타이머가 실시간으로 갱신되면서도 성능을 저하시키지 않도록, worker.js를 사용해 메인 스레드와 작업을 분리하여 성능을 최적화했습니다.

(구글 시계 줄어드는 이미지 + 웹에서 줄어드는 이미지 추가)

2. Popup이 열려있지 않으면 타이머가 작동하지 않음

기본적으로 popup.html에 표시된 UI를 통해 popup.js가 동작하며, popup이 열려 있을 때에만 타이머가 실행되는 문제가 있었습니다. 하지만 사용자가 popup을 닫으면 타이머가 멈추는 상황을 해결하기 위해 background.js를 도입했습니다. background.js는 브라우저가 실행되는 동안 백그라운드에서 계속 실행되며, 타이머가 popup이 닫힌 후에도 유지되도록 설계되었습니다. background.js는 popup.js와 타이머 상태를 공유하며, 타이머가 중단되지 않고 계속 실행되도록 합니다. 이를 통해 popup이 닫혀도 웹 서핑 중 타이머가 정상적으로 작동할 수 있게 만들었습니다.

(popup 열렸을 때 타이머 작동, 닫힐 때 멈추는 GIF 이미지 추가)

3. 페이지 새로고침 문제

유튜브 시청이나 웹 서핑 중에 다른 링크로 이동하거나 페이지를 새로고침하면, canvas에 그려졌던 비주얼 요소가 사라지는 문제가 발생했습니다. 타이머는 계속 작동하지만 시각적 피드백이 없어져 사용자가 시간을 인식하지 못하는 문제가 있었습니다. 이 문제를 해결하기 위해, sessionStorage를 사용하여 타이머 상태를 저장하고 페이지가 새로고침되거나 탭을 이동하더라도 타이머와 비주얼 피드백이 복원될 수 있도록 구현했습니다. 이를 통해 새 탭을 열거나 새로고침을 해도 canvas가 유지되고, 타이머 상태가 연속적으로 유지되었습니다.

(새로고침 시 리셋되는 이미지 추가)

Before development began, I had to first understand the unique architecture of a Chrome extension. This process took some time, but by visualizing the structure and reviewing key documentation, I learned how the different components interacted. Chrome extensions are built with popup.html and popup.js for handling user interaction, but popup functionality only works when it is open.

To keep the timer running when the popup was closed, I introduced background.js. This allowed the extension to remain functional even when the user navigated away from the popup, as background.js continues to run in the browser’s background, managing important states like the timer.

In addition, I used content.js to send commands to draw on a canvas element within the browser. Drawing the timer on canvas at every second, however, imposed a heavy load on the browser. To resolve this, I employed worker.js to separate the work from the main thread. By using Web Workers, I ensured smooth performance without negatively impacting the user’s overall browser experience.

This setup allowed the timer to operate efficiently, maintain its visual feedback, and run without interruptions, all while preserving browser performance.

Challenges

1. Implementing Smooth, Real-Time Timer Feedback

The visual timer needed to provide a smooth time flow to replicate the real-world experience of watching time pass. To achieve this, I used requestAnimationFrame to redraw the timer on the canvas at 60 frames per second, ensuring the transition was visually smooth. This, coupled with worker.js, allowed me to handle the heavy processing without affecting the browser’s performance.

2. Popup Dependency

Initially, the timer only worked while popup.html was open, which meant that if the user closed the popup, the timer would stop. I resolved this by integrating background.js, which allowed the timer to continue running even when the popup was closed, ensuring the timer stayed active throughout the user’s session.

3. Maintaining State After Page Refresh

A common issue was that refreshing the page caused the canvas rendering to disappear, even though the timer itself was still running. To solve this, I used sessionStorage to store the timer’s state and restore it when the page was reloaded. This ensured the visual timer remained functional, even after page navigation or refresh.

User Test

개발 후, 타이머 기능의 실사용 피드백을 얻기 위해 인터뷰에 응해준 3명을 대상으로 User Test를 진행하였습니다. 테스트의 목표는 타이머 사용 중 발생하는 문제점과 개선할 부분을 파악하는 것이었습니다.

피드백 내용:

1. 일시정지 기능이 없었으면 좋겠다.

• 사용자는 타이머를 멈추는 과정에서 자기 자신을 합리화하게 되어 타이머의 효율적인 사용이 방해되었다고 느꼈습니다. 이로 인해 타이머를 중단한 후 작업을 재개하지 못하거나 타이머를 포기하는 경우가 있었습니다.

2. 비주얼을 키고 끌 수 있었으면 좋겠다.

• 사용자는 타이머를 사용할 때 시각적 피드백이 항상 필요하지 않다고 느꼈으며, 비주얼 타이머를 켜고 끌 수 있는 옵션이 있으면 더 유용할 것이라고 제안했습니다. 단순히 타이머만 필요한 경우도 있었기 때문입니다.

3. 새로고침 후 타이머의 속도가 비정상적으로 증가한다.

• 페이지를 새로고침하거나 이동할 때 타이머의 시간이 배로 증가하는 문제가 발생하여, 타이머가 실제 시간과 다르게 동작하는 현상이 보고되었습니다.

(하단에 이미지로 피드백을 시각적으로 표현)

After development, I conducted a user test with three of the team members who had participated in the initial interviews. This test aimed to gather feedback on the timer’s usability and highlight any remaining issues.

Here’s what they said:

1. “It would be better without a pause function.”

Users found themselves rationalizing breaks when the pause button was available, which hindered the timer’s effectiveness for maintaining productivity.

2. “I’d like to turn the visual timer on and off.”

Not all users needed the visual aspect of the timer at all times. Having the option to toggle the visual component would make the timer more flexible.

3. “The timer speed doubles after refreshing.”

After refreshing the page, the timer would sometimes run faster than normal, creating inconsistencies in time management.

Iteration

사용자들의 피드백을 반영하여 타이머의 사용성을 개선하기 위해 다음과 같은 수정 사항을 최종적으로 반영하였습니다:

1. 일시정지 기능 삭제

• 사용자들이 타이머를 자주 멈추는 과정에서 작업 흐름이 깨지고 집중력이 분산된다는 의견을 수용하여, 타이머의 일시정지 기능을 삭제하였습니다. 이를 통해 타이머가 사용자의 주의를 방해하지 않고, 효율적으로 시간 관리를 할 수 있도록 개선하였습니다.

2. Visual On/Off 기능 추가

• 타이머의 시각적 피드백이 항상 필요하지 않다는 의견을 반영하여, 비주얼 타이머를 켜고 끌 수 있는 On/Off 기능을 추가하였습니다. 사용자는 상황에 맞게 타이머의 시각적 요소를 제어할 수 있으며, 단순히 시간이 필요할 때는 비주얼 타이머를 끌 수 있습니다.

이러한 수정 사항을 반영한 후 최종적으로 데모 버전을 완성하였고, 더 나은 사용자 경험을 제공할 수 있게 되었습니다.
(링크)

Based on the feedback received from the user test, I made the following improvements:

1. Removed the Pause Function

By removing the pause feature, users were encouraged to maintain continuous focus without the temptation of interrupting their work.

2. Added a Visual On/Off Toggle

I introduced a toggle feature that allows users to turn the visual timer on or off, giving them control over when they want to see visual feedback.

With these modifications, I was able to enhance the user experience and finalize a demo version of the timer extension.

Learning

이번 프로젝트를 진행하며, 디자인과 개발 과정에서의 괴리를 직접 경험할 수 있었습니다. 초기에는 타이머의 시각적 요소를 설계하는 데 집중했지만, 실제로 이를 Chrome extension으로 구현하는 과정에서 많은 기술적인 도전을 마주하게 되었습니다. 앞으로는 기술의 기본적인 구조와 동작 방식을 디자인 과정에서 미리 파악하고, 개발자와의 협업 시 이를 고려하여 설계하는 것이 매우 중요하다는 것을 깨달았습니다.

또한, 유저 인터뷰와 사용자 테스트를 통해 얻은 인사이트는 매우 유용했지만, 실제 사용 중에 예상치 못한 불편함이 발생할 수 있다는 것을 다시 한번 느꼈습니다. 이로 인해 유저 인터뷰와 테스트가 얼마나 중요한지, 그리고 사용자 중심의 피드백이 디자인과 개발에 필수적이라는 점을 실감했습니다.

마지막으로, 예상치 못한 문제들이 발생하면서 iteration 과정의 중요성을 깊이 깨달았습니다. 프로젝트의 초기 설계 단계에서 모든 문제를 예측할 수 없기 때문에, 테스트를 통해 발견된 문제들을 반영하고 반복적으로 개선해 나가는 과정이 얼마나 중요한지 다시 한번 확인할 수 있었습니다.

Throughout this project, I learned the importance of understanding both the design and development process early on. While initially focused on visual design, I encountered several challenges when translating these ideas into a functional Chrome extension. This taught me the value of knowing the technical constraints ahead of time and how important it is to collaborate with developers or approach technical designs with practicality in mind.

Additionally, conducting user interviews provided valuable insights, but it became clear that real-world use often surfaces new challenges. This experience highlighted the necessity of continuous user testing and the iterative design process. Unexpected issues arose, reinforcing how critical it is to revisit and refine your work.

Lastly, I realized that iteration is essential. The project’s complexity revealed itself through repeated testing and improvements, and it became clear that anticipating all potential problems is impossible. It’s only by testing and improving that you can achieve a polished product.

Future

처음 이 프로젝트의 목적은 **“생산성 향상”**에 있었습니다. 앞으로는 단순히 브라우저 안에서만 머무르지 않고, 데스크탑, 랩탑, 모바일 기기 등 다양한 플랫폼에서도 시각적 타이머를 제공하여, 사용자가 어디에서든지 시간을 효과적으로 관리할 수 있도록 확장할 계획입니다.

이를 위해 크로스 플랫폼 개발 도구를 사용해, 다양한 기기에서 동일한 타이머 기능을 사용할 수 있도록 구현할 예정입니다. 데스크탑이나 모바일 앱 형태로 확장함으로써, 브라우저 외에서도 생산성을 향상시킬 수 있는 도구로 발전시키고자 합니다.

이러한 확장을 통해, 다양한 기기에서 일관된 사용자 경험을 제공하고, 사용자가 디지털 환경뿐만 아니라 물리적 공간에서도 시간을 효과적으로 관리하여 더 나은 생산성을 유지할 수 있도록 돕고자 합니다.

The initial goal of this project was to enhance productivity. Moving forward, I plan to expand the timer’s reach beyond the browser to desktop, laptop, and mobile devices, allowing it to seamlessly integrate into the user’s physical and digital environments.

I aim to use cross-platform development tools to extend the timer’s functionality across multiple devices. By creating desktop and mobile applications, the timer will not only remain useful within the browser but also serve as a tool for improving productivity across all devices.

In the future, this extension will provide a consistent user experience across different platforms, allowing users to manage their time effectively, regardless of the environment.