From 712d48982714267eac7bd1ca3a91686cc9f2c270 Mon Sep 17 00:00:00 2001 From: Chanmin Date: Sun, 29 Sep 2024 22:19:11 +0900 Subject: [PATCH] docs(ko/webextensions): add korean translation of 'user_interface' page (#23248) --- .../webextensions/user_interface/index.md | 215 ++++++++++++++++++ 1 file changed, 215 insertions(+) create mode 100644 files/ko/mozilla/add-ons/webextensions/user_interface/index.md diff --git a/files/ko/mozilla/add-ons/webextensions/user_interface/index.md b/files/ko/mozilla/add-ons/webextensions/user_interface/index.md new file mode 100644 index 00000000000000..c2662e022bacdd --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/user_interface/index.md @@ -0,0 +1,215 @@ +--- +title: 사용자 인터페이스 +slug: Mozilla/Add-ons/WebExtensions/user_interface +l10n: + sourceCommit: 668b38a4f6cd96609b9a969fe4653b46aec4e712 +--- + +{{AddonSidebar}} + +WebExtension API를 사용하는 확장 프로그램은 사용자에게 기능을 제공할 수 있도록 몇몇 사용자 인터페이스 옵션을 제공합니다. 이러한 옵션들의 요약은 아래에 제공되며, 각 사용자 인터페이스 옵션에 대한 자세한 소개는 이 섹션에서 다룹니다. + +> [!NOTE] +> 확장 프로그램에서 UI 컴포넌트를 사용해 훌륭한 사용자 경험을 만들기 위한 조언을 얻고 싶다면 [User experience best practices](https://extensionworkshop.com/documentation/develop/user-experience-best-practices/)를 참고하세요. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UI 옵션내용예시
+ 툴바 버튼 + (브라우저 동작) + + 클릭했을 때 확장 프로그램에 이벤트를 전달하는 브라우저 툴바의 버튼입니다. 이 버튼은 기본적으로 모든 탭에서 보입니다. + + 툴바(브라우저 동작) 버튼을 보여주는 예시 +
+ 팝업이 있는 툴바 버튼 + + 브라우저 툴바의 버튼을 클릭하면 열리는 팝업입니다. 팝업은 HTML 문서에 정의되어 사용자 상호작용을 처리합니다. + + 툴바 버튼의 팝업 예시 +
+ 주소 바 버튼 + (페이지 동작) + + 클랙했을 때 확장 프로그램에 이벤트를 전달하는 브라우저 주소 바의 버튼입니다. 이 버튼은 기본적으로 모든 탭에서 보이지 않습니다. + + 주소 바 버튼(페이지 액션)을 보여주는 예시 +
+ 팝업이 있는 주소 바 버튼 + + 주소 바의 버튼을 클릭하면 열리는 팝업입니다. 팝업은 HTML 문서에 정의되어 사용자 상호작용을 처리합니다. + + 주소 바 버튼의 팝업 예시 +
+ 맥락 메뉴 항목 + + 하나 이상의 브라우저 맥락 메뉴의 메뉴 항목, 체크박스, 라디오 버튼입니다. 또한, 구분선을 추가하여 메뉴를 구조화할 수도 있습니다. 메뉴 항목들이 클릭되면 이벤트가 확장 프로그램에 전달됩니다. + + context-menu-demo 예제에서 WebExtension이 추가한 컨텍스트 메뉴 항목의 예시 +
+ 사이드바 + +

+ 웹 페이지 옆에 표시되는 HTML 문서로 페이지마다 고유한 콘텐츠를 표시할 수 있습니다. 사이드바는 확장 프로그램이 설치될 때 열리며, 이후 사용자의 사이드바 가시성 선택을 따릅니다. 사이드바 내의 사용자 상호작용은 해당 HTML 문서에서 처리됩니다. +

+ 		사이드바의 예시
+ 옵션 페이지 + + 확장 프로그램의 설정을 정의할 수 있는 페이지로 사용자가 이 설정을 변경할 수 있습니다. + 사용자는 브라우저의 애드온 관리자에서 이 페이지에 접근할 수 있습니다. + + 즐겨찾는 색상 예시에서 옵션 페이지에 추가된 내용을 보여주는 예시. +
+ 확장 프로그램 페이지 + + 확장 프로그램에 포함된 웹 페이지를 사용하여 창이나 탭 내에서 양식, 도움말 또는 필요한 기타 콘텐츠를 제공할 수 있습니다. + + 분리된 패널로 표시되는 간단한 번들 페이지의 예시 +
+ 알림 + + 운영체제의 알림 메커니즘을 통해 사용자에게 표시되는 일시적인 알림입니다. 사용자가 알림을 클릭하거나 알림이 자동으로 또는 사용자의 요청으로 닫힐 때, 확장 프로그램으로 이벤트가 전달됩니다. + + 확장 프로그램에 의해 트리거된 시스템 알림의 예시 +
+ 주소 바 제안 + + 사용자가 키워드를 입력할 때 맞춤 주소 표시줄 제안을 제공합니다. + + firefox_code_search 확장 프로그램이 주소 표시줄 제안을 커스터마이즈한 결과를 보여주는 예시. +
+ 개발자 도구 패널 + + 브라우저의 개발자 도구에 표시되는 HTML 문서가 연결된 탭. + + Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions. +
+ +다음의 사용 방법 가이드에서는 이러한 사용자 인터페이스 옵션 중 일부를 만드는 방법을 단계별로 안내합니다. + +- [접근성 가이드라인](https://extensionworkshop.com/documentation/develop/build-an-accessible-extension/) +- [툴바에 버튼 추가하기](/ko/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar) +- [브라우저 스타일](/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) +- [개발자 도구 확장하기](/ko/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools) +- [설정 페이지 구현하기](/ko/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page)