RegExer: 정규 표현식 기반의 웹 페이지 텍스트 분석 도구 개발일지

 

---

RegExer: Vue.js와 Side Panel로 만든 정규 표현식 도우미

안녕하세요! 오늘은 제가 최근 개발한 크롬 확장 프로그램, RegExer에 대해 이야기해볼까 해요. RegExer는 웹 페이지에서 텍스트를 검색하고 분석하는 데 유용한 도구인데요, 특히 정규 표현식(Regular Expression)을 사용해서 복잡한 텍스트 패턴을 간단하게 처리할 수 있도록 도와줍니다. 이 글에서는 어떻게 프로젝트를 시작했는지, 어떤 기술을 사용했는지, 그리고 개발 과정에서 겪었던 재미있는 경험들을 공유하려고 해요.

---

1. 왜 만들었을까?

1.1. 아이디어의 시작

이 프로젝트를 시작하게 된 이유는 간단합니다. 저도 예전에 웹 페이지에서 특정 정보를 긁어오거나 분석해야 할 때가 종종 있었거든요. 예를 들어, 이메일 주소나 전화번호 같은 데이터를 추출하거나, 특정 키워드가 포함된 문장을 찾는 일 말이에요. 이런 작업을 하다 보면 꼭 정규 표현식이라는 친구가 필요해지더라고요.

문제는 정규 표현식이 초보자에게는 진입장벽이 꽤 높다는 거예요. 저는 '이걸 조금 더 쉽게 접근할 수 있는 도구를 만들면 어떨까?'라는 생각을 하게 되었고, 그 결과 RegExer가 탄생했습니다.

특히 이번 프로젝트에서는 크롬의 새로운 Side Panel API를 활용해서 사용자가 웹 페이지를 벗어나지 않고도 편리하게 도구를 사용할 수 있도록 설계했어요. 이게 참 재미있더라고요!

---

2. 목표는 뭐였을까?

프로젝트를 시작하기 전에 몇 가지 목표를 세웠어요. 간단히 말하자면:

1. 사용하기 쉬운 인터페이스: 누구나 쉽게 정규 표현식을 입력하고 결과를 확인할 수 있게.
2. 실시간 피드백: 정규 표현식을 입력하면 바로바로 결과가 보이도록.
3. 확장성: 나중에 더 많은 기능을 추가할 수 있도록 코드 구조를 깔끔하게.
4. Side Panel 활용: 크롬의 사이드 패널을 통해 웹 페이지와 함께 사용할 수 있게.

---

3. 어떤 기술을 사용했을까?

이번 프로젝트에서는 Vue.js와 크롬 확장 프로그램의 Side Panel API를 중심으로 개발했어요. 사용한 기술 스택은 다음과 같아요:

• Vue.js: 반응형 UI를 만들기 위해 사용했어요. 컴포넌트 기반으로 작업하니까 정말 편하더라고요!
• Chrome Extension API: Side Panel API를 포함해서 크롬 확장 프로그램의 다양한 기능을 활용했어요.
• Regex.js: 정규 표현식을 다루는 데 필요한 기본적인 기능을 제공해주는 라이브러리.
• Tailwind CSS: 디자인은 최대한 심플하고 깔끔하게 하고 싶어서 Tailwind를 사용했어요.
• Vite: Vue.js 프로젝트를 빠르게 빌드하고 배포할 수 있는 도구. 정말 속도가 빨라서 좋더라고요!

개발 환경은 Visual Studio Code를 사용했고, 버전 관리는 Git과 GitHub로 진행했어요. 테스트는 당연히 크롬 브라우저에서 했고요.

---

4. 개발 과정

4.1. 처음에는 이렇게 설계했어요

프로젝트를 시작하기 전에 어떤 기능이 필요할지 먼저 정리했어요. 기본적으로 아래와 같은 기능들이 필요하다고 판단했죠:

1. 정규 표현식 입력 창: 사용자가 직접 정규 표현식을 입력할 수 있는 텍스트 박스.
2. 결과 출력 영역: 입력된 정규 표현식에 따라 매칭된 텍스트를 표시.
3. 옵션 설정: 대소문자 구분 여부, 글로벌 검색 여부 같은 옵션도 제공.
4. Side Panel 연동: 현재 열린 웹 페이지에서 텍스트를 가져와 분석 가능하도록.

4.2. 코드 구조를 살펴볼까요?

코드는 크게 두 부분으로 나눌 수 있어요:

1. 콘텐츠 스크립트(Content Script): 웹 페이지의 DOM을 조작하고 텍스트를 추출하는 역할.
2. Side Panel: 사용자가 정규 표현식을 입력하고 결과를 확인하는 UI.

4.2.1. 콘텐츠 스크립트

콘텐츠 스크립트는 chrome.tabs.executeScript API를 통해 실행되요. 이 스크립트는 현재 웹 페이지의 HTML을 파싱하고, 사용자가 입력한 정규 표현식에 따라 텍스트를 추출해요.

// content_script.js
function extractText(regexPattern, options) {
    const text = document.body.innerText;
    const regex = new RegExp(regexPattern, options);
    return text.match(regex);
}

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === "extract") {
        const result = extractText(message.regexPattern, message.options);
        sendResponse({ matches: result });
    }
});

4.2.2. Side Panel

Side Panel은 Vue.js로 개발했어요. Side Panel API를 통해 크롬 확장 프로그램의 사이드 패널에 UI를 표시하고, 사용자가 정규 표현식을 입력할 수 있는 환경을 제공했죠.

<!-- App.vue -->
<template>
  <div class="side-panel">
    <h5>RegExer</h5>
    <input v-model="regexPattern" type="text" placeholder="정규 표현식을 입력하세요" />
    <div class="options">
      <label>
        <input type="checkbox" v-model="caseSensitive" />
        <span>대소문자 구분</span>
      </label>
      <label>
        <input type="checkbox" v-model="globalSearch" />
        <span>전체 검색</span>
      </label>
    </div>
    <button @click="search">검색</button>
    <div class="result">
      <p v-for="(match, index) in matches" :key="index">{{ match }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      regexPattern: "",
      caseSensitive: false,
      globalSearch: false,
      matches: [],
    };
  },
  methods: {
    async search() {
      const options = `${this.caseSensitive ? "" : "i"}${this.globalSearch ? "g" : ""}`;
      const response = await chrome.runtime.sendMessage({
        action: "extract",
        regexPattern: this.regexPattern,
        options: options,
      });
      this.matches = response.matches || [];
    },
  },
};
</script>

<style scoped>
.side-panel {
  padding: 20px;
}
.result p {
  margin: 5px 0;
}
</style>

4.2.3. Side Panel 등록

크롬 확장 프로그램의 manifest.json 파일에서 Side Panel을 등록했어요. side_panel 속성을 사용해서 Vue.js 앱을 사이드 패널에 연결했죠.

{
  "manifest_version": 3,
  "name": "RegExer",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "side_panel": {
    "default_path": "sidepanel.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content_script.js"]
    }
  ]
}

---

5. 고민했던 점과 해결 방법

5.1. Side Panel API의 제한사항

Side Panel API는 비교적 새로운 기능이라 문서가 부족했어요. 그래서 크롬 개발자 도구를 적극 활용해서 API 동작을 분석했고, Vue.js와 통합하는 방법을 연구했죠.

5.2. Vue.js 상태 관리

Vue.js의 반응형 데이터 바인딩 덕분에 사용자의 입력을 실시간으로 처리하는 게 정말 편했어요. 특히 v-model 지시자를 사용해서 정규 표현식 입력과 옵션 설정을 간편하게 구현할 수 있었죠.

5.3. 크로스 도메인 문제

콘텐츠 스크립트와 Side Panel 간의 메시지 전송 시 크로스 도메인 문제가 발생할 수 있는데, chrome.runtime.sendMessage API를 사용해서 안전하게 데이터를 주고받았어요.

---

6. 앞으로의 계획

현재 RegExer는 기본적인 정규 표현식 분석 기능만 제공하고 있어요. 하지만 앞으로 더 많은 기능을 추가할 계획이에요:

1. CSV 내보내기: 매칭된 결과를 CSV 파일로 다운로드할 수 있게.
2. 고급 필터링 옵션: 사용자가 더 복잡한 조건을 설정할 수 있게.

---

7. 마무리

이렇게 RegExer를 개발하면서 Vue.js와 크롬 확장 프로그램의 Side Panel API를 효과적으로 통합하는 경험을 했어요. 특히 Side Panel API는 사용자 경험을 한 단계 업그레이드시켜준 것 같아요. 앞으로도 사용자들에게 더 좋은 경험을 제공할 수 있도록 계속 발전시킬 예정이에요!

읽어주셔서 감사합니다 :) 질문이나 피드백이 있다면 언제든 알려주세요!