시간에 따라 달라지는 HTML title과 favicon 만들기

Taskgrow라는 뽀모도로 프로젝트에서 UX를 개선하기 위한 작업을 시작했다.

현 서비스는 뽀모도로(타이머를 활용해서 25분간 집중해서 일하고, 5분간 휴식하는 기법)를 제공하고 있다.
페이지에서 타이머 시작을 클릭해놓고 다른 페이지에서 작업을 진행할 때 몇 분이 남았는지 매번 확인하기 위해서는 페이지를 방문해야하는 불편함이 있다.

이를 해결하기 위해 HTML title에 남은 시간을 표시하고 favicon은 시간의 흐름에 따라 시간의 흐름을 보여주면
1. 유저가 굳이 페이지를 클릭후 남은 시간을 확인할 필요없이 title로 남은 시간 확인 가능
2. favicon으로 시각적으로도 어느정도 흘렀는지 체크 가능
UX 개선이 가능했다.

---

항상 정적으로 만들다가 동적으로 처음 만들어보는 거라서 어렵지 않을까 했었지만.. 생각보다 쉬웠다.

1. title

document.title = timerState === 'RUNNING' ? `${minute} : ${second}` : 'Taskgrow';

타이머가 RUNNING일 때(타이머 시작 버튼 눌렀을 경우) 현재 시간과 초를 나타내도록 하고 그 외는 서비스명인 Taskgrow가 보이도록 한다.

2. favicon

원래는 시간의 흐름에 따라 실시간으로 재생되는 favicon을 만들고 싶었고 canvas를 생각해보았으나 복잡해서 시간이 오래 걸리고 다른 구현해야할 게 있었기에.. 우선순위에서 뒤에 있다고 생각돼서 우선 정적인 이미지를 만들어놓고 시간의 흐름에 따라 달리 보여주는 것으로 만들었다.

추후 여유가 있다면 실시간으로 변경되는 favicon을 만들어보고 싶다.

시간의 흐름에 따라 보여줄 favicon 이미지 12개를 피그마로 만들어줬다.

favicon으로 변환하는 작업이 필요하기에 

https://www.favicon-generator.org/

Favicon & App Icon Generator

여기서 png 파일을 ico로 변경할 수 있다.

const useFavicon = (percent: number, timerState: string) => {
  const selectClock = (percent: number) => {
    if (timerState !== 'RUNNING') {
    //기존 Taskgrow의 favicon
      return '../public/favicon.ico';
    } else {
      const totalImages = 12;
      const imageIndex = Math.ceil((percent / 100) * totalImages);
      return `../public/timer/timer${imageIndex}.ico`;
    }
  };

  const link = document.querySelector("link[rel~='icon']") as HTMLLinkElement;
  if (link) {
    link.href = selectClock(percent);
  }
};

export default useFavicon;

selectClock에는 타이머가 재생되고 있을 때가 아니라면 기존 Taskgrow의 favicon이 나오도록 하고
재생되고 있다면 12개의 이미지를 기준으로 현재 퍼센트에 따라 몇번째 이미지를 보여줄 지 결정하였다.

이미지는 timer0 ~ timer12까지 이루어져있기에 timer{imageIndex}로 해주면 된다.

const link = document.querySelector("link[rel~='icon']") as HTMLLinkElement;
에서 타입 단언을 한 이유는 link.href에서 'Element' 형식에 'href' 속성이 없습니다. 라는 에러가 떠서 확인해보니
document.Selector가 HTMLLinkElement 나 null을 반환할 수 있고 실제 HTMLElement에 href속성이 없기 때문에 명시적으로 HTMLLinkElement로 지정해주었다.

타이머 재생 중이 아닐 때

타이머 재생시