Page Magic: 자연어로 웹페이지 외관을 직접 수정하는 Chrome 확장 프로그램
Page Magic은 ai를 활용하여 웹페이지 외관을 맞춤 설정할 수 있는 Chrome 확장 프로그램으로, AI 기술을 통해 모든 웹페이지의 외관을 변경할 수 있습니다. 사용자는 간단한 명령어를 통해 PageMagic에 원하는 변경 사항을 알려줄 수 있으며, 예를 들어 레이아웃 조정, 색상 수정 또는 요소 추가 등이 가능합니다. 동일한 페이지에 대해 여러 번 변경할 수 있으며, 언제든지 변경 사항을 활성화, 비활성화 또는 삭제할 수도 있습니다.

주요 기능
사용자 인터페이스:간결한 팝업 창을 제공하며, 사용자가 명령을 입력하면 웹페이지의 변화를 실시간으로 확인할 수 있습니다.
설정 옵션:사용자가 API 키를 추가하고, AI 모델을 선택하며, API 사용 비용을 확인할 수 있습니다.
실시간 미리보기:변경 명령을 입력하면 웹페이지에 효과가 즉시 표시됩니다.
설치 방법
Chrome 웹 스토어를 통한 설치
PageMagic은 Chrome 웹 스토어에 등록되어 있으므로, 사용자는 스토어에서 직접 다운로드하여 설치할 수 있습니다.
Chrome 웹 스토어 링크(실제 확장 프로그램 ID로 교체 필요).
로컬 빌드 및 설치
사용자가 직접 확장 프로그램을 빌드하여 설치하기를 원하는 경우, 다음 단계를 따라 진행할 수 있습니다:
GitHub 저장소를 클론합니다.
의존성 설치:npminstall을 실행합니다.
확장 프로그램 빌드:npmrunbuild를 실행합니다.
Chrome에서 chrome://extensions/를 열고 개발자 모드를 활성화합니다.
"압축 해제된 확장 프로그램 로드"를 클릭하고 클론한 저장소 디렉터리를 선택합니다.
확장 프로그램 목록에서 PageMagic을 찾아 "옵션"을 클릭하여 구성합니다.
Anthropic API 키를 추가하고 사용할 모델을 선택합니다.
"저장"을 클릭하여 설정을 저장합니다.
사용 방법
임의의 웹페이지를 엽니다.
PageMagic 확장 프로그램 아이콘을 클릭합니다.
팝업 창에서 변경 명령을 입력합니다.
"적용" 버튼을 클릭하면, 변경 사항이 몇 초 내에 적용됩니다.
변경 사항은 누적 방식으로 적용되며, 사용자는 동일한 페이지에 대해 여러 번 변경할 수 있고, 변경 사항을 활성화, 비활성화 또는 삭제할 수도 있습니다.
적용 시나리오
맞춤형 웹페이지:사용자는 선호도에 따라 웹페이지의 색상, 글꼴, 레이아웃 등을 조정할 수 있습니다.
개발 테스트:개발자는 수동으로 코드를 수정하지 않고도 웹페이지 변경 효과를 빠르게 테스트할 수 있습니다.
보조 도구:시각 장애가 있는 사용자가 웹페이지의 접근성 설정을 조정하는 데 도움이 될 수 있습니다.
프로젝트 주소
Github:https://github.com/khaledh/pagemagic
대본 기획 도우미▸
AI 앱
AI 뉴스 