크롬 웹앱 개발일지: 테이블 익스포트

Review

크롬 웹앱 개발일지: 테이블 익스포트

snowday 2025. 4. 9. 09:22

1. 프로젝트 시작 배경

데이터는 현대 비즈니스와 연구에서 중요한 자원입니다. 하지만 웹사이트에서 필요한 데이터를 추출하는 과정은 종종 번거롭고 시간이 많이 소요됩니다. 특히, 복잡한 웹페이지에서 표 데이터를 수집할 때는 수작업으로 복사-붙여넣기를 반복해야 하는 경우가 많았습니다. 이러한 문제를 해결하기 위해 "테이블 익스포트"라는 크롬 확장 프로그램을 개발하게 되었습니다.

이 도구의 목표는 사용자가 웹페이지의 표 데이터를 손쉽게 추출하고 CSV 또는 Excel 파일로 저장할 수 있도록 돕는 것입니다. 이를 통해 데이터 수집 작업의 효율성을 극대화하고, 사용자의 생산성을 높이는 것이 주요 목표였습니다.

2. 초기 기획 단계

2.1 요구사항 정의

프로젝트를 시작하기 전에 다음과 같은 요구사항을 정의했습니다:

자동 테이블 감지: 웹페이지 내 모든 표를 자동으로 감지하고 사용자에게 보여줄 것.
간편한 데이터 추출: 원하는 표를 선택하면 한 번의 클릭으로 데이터를 다운로드할 수 있도록 설계.
사용자 친화적 인터페이스: 직관적이고 간단한 UI/UX 제공.
보안성 강화: 사용자의 데이터를 안전하게 처리하며 확장 프로그램 자체도 신뢰할 수 있는 방식으로 개발.

2.2 기술 스택 선정

확장 프로그램 개발을 위해 다음과 같은 기술 스택을 선택했습니다:

HTML/CSS/JavaScript: 기본적인 웹 기술을 활용하여 UI를 구현.
Chrome Extensions API: 크롬 확장 프로그램의 핵심 기능 구현을 위한 API 활용.
Xlx (xlsx): Excel 파일 생성을 위한 라이브러리.
rv-grid: 데이타를 표기할 라이브러리

3. 개발 과정

3.1 첫 번째 단계: 테이블 감지 기능

웹페이지에서 표를 감지하는 것은 프로젝트의 핵심 기능 중 하나였습니다. 이를 위해 JavaScript의 DOM(Document Object Model) 트리를 탐색하는 코드를 작성했습니다.

function detectTables() {
    const tables = document.querySelectorAll('table');
    return Array.from(tables).map((table, index) => ({
        id: index,
        html: table.outerHTML,
        data: parseTableData(table)
    }));
}

function parseTableData(table) {
    const rows = table.querySelectorAll('tr');
    return Array.from(rows).map(row => {
        const cells = row.querySelectorAll('td, th');
        return Array.from(cells).map(cell => cell.innerText.trim());
    });
}

위 코드는 웹페이지 내 모든 <table> 요소를 찾아 데이터를 파싱합니다. 이 과정에서 표의 구조를 유지하며 데이터를 2차원 배열로 변환했습니다.

3.2 두 번째 단계: UI 구현

UI는 사용자가 쉽게 데이터를 선택하고 다운로드할 수 있도록 설계되었습니다. 크롬 확장 프로그램의 팝업 창을 활용해 다음과 같은 요소를 포함했습니다:

테이블 목록: 감지된 표들의 미리보기 제공.
다운로드 버튼: CSV 또는 Excel 형식 선택 후 데이터 다운로드.

<div id="popup">
    <h3>감지된 표 목록</h3>
    <ul id="table-list"></ul>
    <button id="download-csv">CSV로 다운로드</button>
    <button id="download-xlsx">Excel로 다운로드</button>
</div>

3.3 세 번째 단계: 데이터 변환 및 다운로드

CSV와 Excel 파일로 데이터를 변환하는 기능을 구현했습니다. Excel 변환에는 SheetJS 라이브러리를 활용했습니다.

Excel 변환 예제:

function exportToExcel(data, filename) {
    const worksheet = XLSX.utils.aoa_to_sheet(data);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    XLSX.writeFile(workbook, filename + '.xlsx');
}

3.4 네 번째 단계: 보안 및 성능 최적화

확장 프로그램의 보안성을 강화하기 위해 다음과 같은 조치를 취했습니다:

권한 제한: 필요한 최소한의 권한만 요청.
데이터 처리: 사용자의 데이터는 로컬에서만 처리되며 서버로 전송되지 않음.
성능 최적화: 대규모 표 데이터를 처리할 때 메모리 사용량을 줄이는 알고리즘 적용.

4. 테스트 및 피드백 반영

4.1 테스트 환경

테스트는 다양한 웹사이트에서 진행되었으며, 다음 사항을 중점적으로 확인했습니다:

다양한 형태의 표(복잡한 테이블, 중첩된 테이블 등)를 정상적으로 감지하는지.
CSV 및 Excel 파일로 변환된 데이터가 올바른 형식인지.
사용자 인터페이스가 직관적이고 사용하기 쉬운지.

4.2 사용자 피드백 반영

초기 버전 출시 후 사용자들로부터 다음과 같은 피드백을 받았습니다:

다국어 지원 요청: 영어 외 다른 언어로도 사용할 수 있도록 다국어 지원 필요.
더 나은 미리보기 기능 요청: 표 데이터를 더 명확하게 미리볼 수 있는 기능 필요.

이를 반영하여 업데이트를 진행했으며, 현재는 다음과 같은 기능을 추가로 제공합니다:

다국어 지원: 영어, 한국어, 일본어 지원.
미리보기 개선: 표 데이터를 더 명확히 보여주는 UI 개선.

5. 결과 및 성과

"테이블 익스포트"는 사용자들에게 큰 호응을 얻으며 크롬 웹 스토어에서 긍정적인 평가를 받고 있습니다. 특히 리서치, 데이터 분석, 마케팅 분야에서 유용하게 활용되고 있으며, 다음과 같은 성과를 거두었습니다:

시간 절약: 수작업으로 데이터를 수집하던 시간을 크게 단축.
오류 감소: 수작업으로 발생할 수 있는 오류를 최소화.
사용자 만족도 향상: 직관적인 인터페이스와 안정적인 성능으로 사용자 경험 향상.

6. 향후 계획

현재 "테이블 익스포트"는 안정적인 서비스를 제공하고 있지만, 지속적인 개선을 위해 다음과 같은 계획을 가지고 있습니다:

클라우드 통합: 데이터를 클라우드 스토리지(Google Drive, Dropbox 등)에 직접 저장할 수 있는 기능 추가.
커뮤니티 지원: 사용자 커뮤니티를 통해 더 많은 피드백을 수집하고 빠르게 반영.

7. 결론

"테이블 익스포트"는 웹페이지의 표 데이터를 손쉽게 추출하고 활용할 수 있도록 돕는 크롬 확장 프로그램입니다. 개발 과정에서 사용자 중심의 설계와 안정적인 기술 구현을 통해 높은 완성도를 달성했으며, 앞으로도 지속적인 개선을 통해 더 많은 사용자에게 가치를 제공할 계획입니다.

마지막으로, 이 프로젝트는 데이터 수집과 처리의 새로운 가능성과 효율성을 제시하며, 많은 사람들에게 실질적인 도움을 줄 수 있다는 점에서 의미 있는 도전이었습니다.