Readers 크롬 앱 개발 일지

 

---

1일차: 아이디어에서 프로토타입까지

오늘은 Readers 크롬 앱 개발의 첫 번째 날이었습니다. 독서 경험을 최적화하기 위한 도구를 만든다는 목표 아래, 다양한 작업을 진행하며 구체적인 기능 정의와 기본 프레임워크를 완성했습니다.

아이디어 구체화

처음에는 단순히 "광고 제거"라는 개념에서 시작했지만, 더 나아가 사용자가 콘텐츠에 몰입할 수 있도록 돕는 도구를 만들기로 결정했습니다. 특히 웹사이트에서 방해 요소를 제거하고, 눈에 편안한 레이아웃을 제공하는 것이 핵심 목표였습니다.

핵심 요구사항 정의

프로젝트를 본격적으로 시작하기 전, 필요한 기능들을 다음과 같이 정리했습니다:

1. 불필요 요소 제거: 광고, 배너, 애니메이션 등 본문과 무관한 요소를 자동으로 제거.
2. 개인화 설정 지원: 글꼴 크기, 줄 간격, 색상 모드 등을 사용자 취향에 맞게 조정.
3. 빠른 처리 속도: 큰 문서에서도 빠르게 동작하도록 최적화.
4. 사용자 친화적 인터페이스: 직관적이고 간단한 사용법 제공.

기술 스택 선정

개발 환경과 도구를 선택하는 과정에서 고민이 많았습니다. 특히 크롬 확장 프로그램의 특성을 고려하여 다음 기술 스택을 선정했습니다:

• Chrome Extensions API: 크롬 확장 프로그램의 기본 기능을 활용.
• Content Script: 웹페이지의 DOM을 분석하고 수정.
• CSS Selector: 불필요한 요소를 식별하고 제거.
• Local Storage: 사용자 설정 데이터 저장 및 관리.
• Mozilla Readability 라이브러리: 본문 콘텐츠 추출 알고리즘 구현.

Mozilla Readability 라이브러리 도입

웹사이트에서 본문 콘텐츠를 정확하게 추출하는 작업은 생각보다 매우 복잡했습니다. HTML 구조가 사이트마다 다르고, 광고나 기타 요소들이 본문과 혼합되어 있는 경우가 많았습니다. 이를 해결하기 위해 Mozilla Readability 라이브러리를 도입하기로 결정했습니다.

Mozilla Readability는 Firefox 브라우저의 리더 모드(Reader Mode) 기능을 위해 개발된 오픈소스 라이브러리입니다. 이 라이브러리는 다음과 같은 강력한 기능을 제공합니다:

1. 본문 콘텐츠 식별: HTML 문서에서 주요 텍스트를 자동으로 감지하고 추출.
2. 노이즈 제거: 광고, 메뉴, 사이드바 등 불필요한 요소를 효과적으로 제거.
3. 다양한 웹사이트 호환성: 수많은 웹사이트에서 안정적으로 작동하는 검증된 알고리즘.

첫 번째 장애물: DOM 요소 식별

초기에는 직접 DOM 트리를 분석하고, CSS 클래스명이나 태그 이름을 기반으로 필터링 로직을 작성하려 했습니다. 하지만 다음과 같은 문제점들이 발생했습니다:

1. 웹사이트마다 다른 구조: 각 사이트마다 HTML 구조와 클래스명이 달라 일반화하기 어려움.
2. 동적 콘텐츠 처리: JavaScript로 동적으로 생성되는 요소들은 초기 로딩 시점에서는 존재하지 않아 처리가 어려움.
3. 예외적인 경우: 일부 사이트에서는 본문에도 광고와 비슷한 클래스명이 사용되기도 함.

이러한 문제를 해결하기 위해 Mozilla Readability를 도입한 후, 본문 콘텐츠 추출 작업이 크게 단순화되었습니다. Readability는 이미 수많은 웹사이트에서 테스트된 알고리즘을 제공했기 때문에, 복잡한 DOM 분석 로직을 직접 작성할 필요가 없어졌습니다.

첫 번째 프로토타입 완성

하루가 끝날 무렵, Mozilla Readability를 통합한 기본적인 광고 제거와 텍스트 추출 기능을 갖춘 프로토타입을 완성했습니다. 몇몇 대표적인 뉴스 사이트와 블로그에서 테스트를 진행했으며, 양호한 결과를 확인할 수 있었습니다. 하지만 아직 UI/UX와 성능 최적화가 필요하다는 점을 느꼈습니다.

---

2일차: 완성도를 높이는 과정

두 번째 날은 프로토타입을 보다 완성된 형태로 다듬는 시간이었습니다. 사용자 경험(UX)과 성능 최적화에 중점을 두고 작업을 진행했습니다.

UI/UX 개선

사용자에게 더 나은 경험을 제공하기 위해 인터페이스를 크게 개선했습니다:

1. 툴바 아이콘 추가: 크롬 툴바에 간단한 아이콘을 추가하여 한 번의 클릭으로 기능을 활성화할 수 있도록 구현.
2. 설정 패널 구성: 사용자가 원하는 옵션을 쉽게 조정할 수 있는 설정 메뉴를 만들었습니다.
3. 테마 선택 기능: 다크 모드와 라이트 모드를 자유롭게 전환할 수 있도록 구현.

특히, Mozilla Readability로 추출된 본문을 깔끔하고 일관된 레이아웃으로 재구성하는 작업을 진행했습니다. 글꼴 크기, 줄 간격, 여백 등을 조정하여 읽기 편한 환경을 제공했습니다.

개인화 기능 추가

사용자마다 독서 스타일이 다르다는 점을 고려하여 다양한 개인화 옵션을 추가했습니다:

• 글꼴 크기 조절: 12px부터 24px까지 선택 가능.

특히 개인화 기능을 구현하면서 Local Storage를 효율적으로 활용하는 방법을 연구해야 했습니다. 사용자의 설정을 실시간으로 저장하고, 다시 방문했을 때 동일한 설정을 유지하도록 하는 작업이 필요했습니다.

성능 최적화

대부분의 웹사이트에서 잘 작동했지만, 일부 대용량 문서에서는 성능 문제가 발생했습니다. 이를 해결하기 위해 다음과 같은 최적화 작업을 진행했습니다:

1. DOM 파싱 속도 개선: Mozilla Readability의 알고리즘을 더욱 효율적으로 활용하도록 코드를 리팩토링.
2. 메모리 사용량 감소: JavaScript 객체를 효율적으로 관리하고, 메모리 누수를 방지.
3. 비동기 처리 적용: 큰 문서를 처리할 때 UI가 멈추지 않도록 비동기 작업을 도입.

멀티 디바이스 테스트

PC, 태블릿, 스마트폰 등 다양한 기기에서 테스트를 진행했습니다. 각 화면 크기에 맞는 반응형 디자인을 적용했으며, 특히 모바일 환경에서의 사용성을 높이는 작업에 집중했습니다. Mozilla Readability의 출력을 기반으로 화면 크기에 맞는 레이아웃을 자동으로 조정하는 기능을 추가했습니다.

예외 처리 강화

테스트 과정에서 다음과 같은 예외적인 상황을 발견하고 해결했습니다:

1. 동적 콘텐츠 로딩: JavaScript로 동적으로 생성되는 요소를 처리하기 위해 MutationObserver를 활용.
2. 언어별 최적화: 다양한 언어의 텍스트를 효과적으로 처리하도록 알고리즘 개선.

최종 테스트 및 버그 수정

대규모 테스트를 통해 발견된 버그들을 수정했습니다:

• 특정 사이트에서 본문이 잘못 추출되는 문제 해결.
• 다크 모드에서 텍스트 가독성을 높이기 위한 색상 조정.
• 설정 패널에서 옵션이 즉시 반영되지 않는 문제 수정.

---

결론

48시간 동안 Readers 크롬 앱을 개발하면서 많은 도전과 성장을 경험했습니다. 특히 Mozilla Readability 라이브러리를 도입함으로써 복잡한 DOM 분석 작업을 크게 단순화할 수 있었습니다. 사용자들에게 깔끔하고 몰입감 있는 독서 경험을 제공하기 위한 노력이 결실을 맺었다고 생각합니다. 앞으로도 지속적인 업데이트와 개선을 통해 더 나은 서비스를 제공할 계획입니다.

 

 

https://chromewebstore.google.com/detail/readers/nabelljdipjhndmkdhnhongbbmopfchh

Readers - Chrome 웹 스토어