Read-tracker 크롬 확장프로그램 개발기 - (1)

 

Read-tracker 크롬 확장프로그램 개발기 - (1) 개발 배경과 아이디어

 

크롬 확장 프로그램을 만들게 된 계기

웹 서핑을 하다 보면 긴 글을 읽게 되는 경우가 많습니다. 특히 E-book을 읽을 때처럼 '내가 지금까지 얼마나 읽었고, 앞으로 얼마나 남았는지'를 확인하는 습관이 있다 보니, 웹에서도 같은 기능이 있으면 좋겠다는 생각이 들었습니다.

 

일부 웹사이트에서는 읽기 진행률을 시각적으로 보여주기도 하지만, 이는 특정 사이트에 한정된 기능이었습니다. 포탈마다 위치가 다르고 일관성이 없기 때문에, 다양한 웹사이트에서 공통적으로 사용할 수 있는 확장 프로그램을 만들고자 했습니다.

 

또한, 모바일에서는 화면 상단을 터치하면 자동으로 최상단으로 이동하는 기능이 기본 제공되지만, PC에서는 이런 기능이 없어 불편함을 느꼈습니다. 따라서 상단 이동 버튼 기능도 함께 추가하면 보다 편리한 사용자 경험을 제공할 수 있을 것이라 생각했습니다.

---

아이디어 기획 과정

Read-tracker를 개발하면서 가장 중요하게 고려한 부분은 사용자 경험(UX)과 실용성이었습니다. 따라서 다음과 같은 주요 기능을 구상했습니다.

📌 주요 기능

1. 읽기 진행률 표시: 현재 읽고 있는 위치를 %로 표시하여 가시성을 높임
2. 읽은 시간 및 남은 시간 추정: 사용자의 평균 읽기 속도를 기반으로 남은 시간을 예측하여 제공
3. 상단 이동 버튼: 클릭 한 번으로 페이지 최상단으로 이동하는 기능 추가

💡 UX 고려 요소

크롬 확장 프로그램은 기존 웹페이지 위에 새로운 요소를 추가하기 때문에, 사용자에게 방해가 되지 않도록 UI를 설계해야 했습니다. 특히, 다음과 같은 UX 요소를 고려했습니다:

• 위치 조정 가능: 일부 웹사이트에서는 추가된 버튼이 기존 UI를 가릴 수 있기 때문에, 사용자가 드래그 앤 드롭으로 버튼 위치를 조정할 수 있도록 함
• 사이트별 활성화 설정: 특정 포탈에서는 기능이 필요하지 않을 수도 있기 때문에, 별도의 설정 페이지에서 사이트별로 기능을 On/Off할 수 있도록 구현
• 성취감: 다 읽었으면 축하해주는 이모지를 통해서 축하해해주기. 🥳

---

기술 스택 및 개발 환경

크롬 확장 프로그램을 개발하기 위해 기본적으로 HTML, CSS, JavaScript를 사용했습니다. 개발 도구로는 CursorAI를 활용하여 효율적으로 개발을 진행했습니다.

🛠 사용 기술 / 도구

사용기술

• HTML / CSS / JavaScript: UI 및 기능 구현
• Manifest V3: 보안 강화 및 최신 정책 적용

도구

• Cursor : AI 기반 통합 개발 환경(IDE)

Manifest V3를 적용한 이유는 다음과 같습니다:

• 기존 Manifest V2의 보안 문제 해결
• 크롬 웹스토어 정책에 맞추어 향후 업데이트 유지보수 용이
• 백그라운드 스크립트 대신 서비스 워커를 사용하여 성능 최적화

---

마무리

이렇게 Read Tracker의 초기 아이디어와 개발 배경을 정리했습니다. 다음 2부에서는 실제 개발 과정에 대해 다룰 예정입니다.

기대해주세요! 🚀