크롬 확장 프로그램을 개발할 때 사용자 인터페이스(UI)를 설계하는 것은 매우 중요한 과정입니다. 특히 팝업(Popup)과 사이드 패널(Side Panel)은 사용자와 상호작용하는 주요 창구로, 각각의 특성과 기능을 이해하고 적절히 활용하는 것이 중요합니다. 이 글에서는 팝업과 사이드 패널의 차이점을 비교하고, 각각의 구현 방법을 코드와 함께 설명하겠습니다. 또한, 이를 지원하는 크롬 버전에 대한 정보도 다룰 예정입니다.

1. 팝업(Popup) vs 사이드 패널(Side Panel): 기본 개념 및 차이점

1-1. 팝업(Popup)

팝업은 크롬 확장 아이콘을 클릭했을 때 나타나는 작은 창으로, 사용자에게 즉각적인 정보 제공 또는 간단한 상호작용을 목적으로 합니다.

  • 특징
    • 크롬 확장 아이콘 클릭 시 열림.
    • 임시적으로 표시되며, 사용자가 다른 영역을 클릭하면 자동으로 닫힘.
    • UI는 일반적으로 작고 간단하며, 복잡한 작업에는 적합하지 않음.
    • HTML, CSS, JavaScript로 구현 가능.
  • 적용 사례
    • 설정 메뉴 제공
    • 간단한 상태 표시
    • 빠른 액션 수행 (예: 북마크 추가, 번역 실행)

1-2. 사이드 패널(Side Panel)

사이드 패널은 브라우저의 오른쪽 또는 왼쪽에 위치하는 독립적인 패널로, 사용자가 더 많은 정보를 보거나 상호작용할 수 있는 공간을 제공합니다.

  • 특징
    • 크롬 114 이상에서 정식 지원됨.
    • 탭 내에서 고정된 형태로 유지되며, 팝업처럼 쉽게 사라지지 않음.
    • 더 넓은 공간을 활용할 수 있어 복잡한 UI에도 적합.
    • HTML, CSS, JavaScript로 구현 가능.
  • 적용 사례
    • 문서 편집 도구
    • 실시간 분석 대시보드
    • 채팅 또는 알림 패널

1-3. 팝업과 사이드 패널의 차이점 요약

항목 팝업(Popup) 사이드 패널(Side Panel)
표시 방식 확장 아이콘 클릭 시 임시 표시 탭 내 고정된 형태로 표시
사용자 경험 간단하고 빠른 작업에 적합 복잡한 작업이나 지속적인 상호작용에 적합
UI 크기 제한적 넓은 공간 활용 가능
지원 버전 모든 크롬 버전 크롬 114 이상

2. 팝업(Popup) 구현 방법

2-1. 기본 구조

팝업은 manifest.json 파일에서 action.default_popup 속성을 통해 정의됩니다. 아래는 간단한 팝업 예제입니다.

manifest.json

{
  "manifest_version": 3,
  "name": "Popup Example",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "permissions": []
}

popup.html

<!DOCTYPE html>
<html>
<head>
  <title>Popup</title>
  <style>
    body {
      width: 200px;
      font-family: Arial, sans-serif;
    }
    button {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h3>Popup Example</h3>
  <button id="clickMe">Click Me!</button>

  <script src="popup.js"></script>
</body>
</html>

popup.js

document.getElementById('clickMe').addEventListener('click', () => {
  alert('Button clicked in popup!');
});

2-2. 동작 설명

위의 코드는 팝업 창에 버튼 하나를 배치하고, 클릭 시 경고창을 띄우는 간단한 예제입니다. 팝업은 popup.html 파일을 통해 정의되며, 관련 스타일과 스크립트를 포함할 수 있습니다.

3. 사이드 패널(Side Panel) 구현 방법

3-1. 기본 구조

사이드 패널은 manifest.json 파일에서 side_panel 속성을 통해 정의됩니다. 아래는 간단한 사이드 패널 예제입니다.

manifest.json

{
  "manifest_version": 3,
  "name": "Side Panel Example",
  "version": "1.0",
  "side_panel": {
    "default_path": "sidepanel.html"
  },
  "permissions": []
}

sidepanel.html

<!DOCTYPE html>
<html>
<head>
  <title>Side Panel</title>
  <style>
    body {
      width: 300px;
      font-family: Arial, sans-serif;
      padding: 10px;
    }
    h3 {
      margin-bottom: 20px;
    }
    input {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
    }
    button {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h3>Side Panel Example</h3>
  <input type="text" id="textInput" placeholder="Enter text here">
  <button id="submitBtn">Submit</button>

  <script src="sidepanel.js"></script>
</body>
</html>

sidepanel.js

document.getElementById('submitBtn').addEventListener('click', () => {
  const text = document.getElementById('textInput').value;
  alert(`You entered: ${text}`);
});

3-2. 동작 설명

위의 코드는 사이드 패널에 입력 필드와 버튼을 배치하고, 버튼 클릭 시 입력된 텍스트를 경고창으로 표시하는 예제입니다. 사이드 패널은 sidepanel.html 파일을 통해 정의되며, 팝업보다 넓은 공간을 활용할 수 있습니다.

4. 크롬 버전 호환성

4-1. 팝업(Popup)

팝업은 크롬 확장 프로그램의 초기 버전부터 지원되어 왔으며, 현재까지 모든 크롬 버전에서 사용 가능합니다. 따라서 특별한 호환성 문제는 없습니다.

4-2. 사이드 패널(Side Panel)

사이드 패널은 크롬 114 이상에서 정식으로 지원되기 시작했습니다. 따라서 이 기능을 사용하려면 사용자의 크롬 브라우저가 최신 버전인지 확인해야 합니다. 만약 낮은 버전의 크롬에서도 동작하게 만들고 싶다면, 조건부 로직을 사용하여 팝업을 대체 옵션으로 제공할 수 있습니다.

버전 확인 예제

if (chrome.sidePanel) {
  // 사이드 패널 지원
  chrome.sidePanel.setOptions({
    path: 'sidepanel.html',
    enabled: true
  });
} else {
  // 팝업 사용
  console.log('Side panel is not supported. Using popup instead.');
}

5. 결론

팝업과 사이드 패널은 크롬 확장 프로그램에서 사용자 인터페이스를 제공하는 두 가지 중요한 방법입니다. 팝업은 간단하고 빠른 작업에 적합하며, 사이드 패널은 더 복잡하고 지속적인 상호작용을 필요로 하는 경우에 유리합니다. 또한, 사이드 패널은 크롬 114 이상에서만 지원되므로, 개발자는 사용자의 환경을 고려하여 적절한 UI를 선택해야 합니다.

위에서 제공된 코드 예제를 바탕으로 자신만의 크롬 확장을 개발해 보세요. 팝업과 사이드 패널을 적절히 활용하면 사용자 경험을 크게 향상시킬 수 있을 것입니다.

참고 자료:

'Dev' 카테고리의 다른 글

Node.js로 chrome webapp 이미지 자동 리사이징하기: sharp와 fs-extra 활용  (0) 2025.04.04
크롬 확장 프로그램의 핵심, manifest.json 가이드  (0) 2025.04.02
크롬 웹앱에서 다국어 지원  (5) 2025.03.23
크롬 브라우저 성능 극대화 가이드: 하드웨어/소프트웨어 최적화 전략  (2) 2025.03.10
크롬 브라우저 숨은 기능 10가지: 초보자도 따라하는 완벽 가이드  (6) 2025.03.10

티스토리툴바