개발자

픽시브릭스 리뷰 | 웹사이트에 맞춤 기능을 추가하는 마법 같은 도구

JR Raphael | Computerworld 2022.07.28
웹은 수많은 장점을 가지고 있지만 맞춤 서비스 측면에서는 조금 부족한 부분이 있다. 웹은 있는 그대로 받아들여야 하는 존재다. 특히 요즘은 브라우저 기반 도구와 서비스에 의존하는 경우가 많아서, 웹 경험의 유용성과 효율성은 높이기 쉽지 않다. 
 
ⓒ Getty Images Bank

픽시브릭스(PixieBrix)은 이런 문제를 해결하기 위해 설립됐다. 픽시브릭스 기술을 활용하면 웹을 통합해 관리하면서 원하는 대로 운영할 수 있다. 즉 웹사이트 인터페이스를 단순하게 만들면서 방해 요소를 없애 환경을 최적화한다. 그뿐 아니라 웹 사이트에 필요한 요소를 추가해 자신만의 맞춤 작업 공간을 만들어 업무 중에 활용할 수 있다. 
 

웹 페이지에서 애플리케이션 바로 실행하기

픽시브릭스의 핵심은 ‘브릭(Brick)’이라고 부르는 확장 프로그램이다. 크롬과 연동되고 외부 프로그램과 통합되는 브릭은 궁극적으로 웹 사이트의 겉모습과 작동 방식을 변경한다. 브릭(Brick)의 종류는 다양하다. 페이지의 특정 문장은 강조하는 기능부터 이메일 템플릿을 생성하는 기능까지 수행한다. 특히 아사나, 구글 워크스페이스, 허브스팟, 세일즈포스, 재피어(Zapier) 같은 생산성 도구를 활용해 작업을 자동화하는 브릭이 많다. 

픽시브릭스가 실제 어떤 모습인지 구체적으로 살펴보자. 먼저 이미 만든 브릭을 ‘블루프린트(blueprint)’라는 도구로 쉽게 활용할 수 있다. 블루프린트의 예시는 다음과 같다.
 
  • ‘페이지 제목을 슬랙으로 전송(Send to Slack with page title)’이라는 블루프린트를 활성화하면, 웹 사이트에 버튼을 추가해 바로 사이트의 URL과 제목을 슬랙 채널에 공유할 수 있다. 이 과정에서 사용자는 웹사이트에서 나가 슬랙을 실행하지 않아도 되며, 모든 과정은 웹 사이트 내에서 이뤄진다. 
  •  ‘선택된 텍스트로부터 새로운 지라 이슈 생성(New Jira issue from selected text)’이라는 블루프린트를 활성화하면, 웹페이지 우클릭 메뉴에 지라 이슈 생성 기능이 추가된다. 따라서 웹사이트의 특정 텍스트를 드래그하고 오른쪽 버튼 클릭하면 웹 브라우저 안에서 바로 지라 이슈를 생성하고, 이슈 내용에 대한 상세한 정보도 추가할 수 있다. 
  •  ‘새 트렐로 카드(New Trello card)’라는 블루프린트도 비슷하게 웹사이트 내에서도 바로 트렐로의 카드를 생성한다. 


나만의 웹 페이지 만들기

블루프린트 같은 도구 외에도 픽시브릭스에는 원하는 기능을 마음대로 만들 수 있다. 누구나 쉽게 도전하기에는 어려울 수 있으나 로우코드에 익숙하다면 시도해볼 만하다. 기업의 경우 IT 담당 직원이 초기 구성을 먼저 해놓고 사용 방법을 나머지 팀원과 공유하면 좋다. 

픽시브릭스의 크롬 확장 프로그램을 설치했다면, 크롬 개발자 도구를 통해 픽시브릭스에 접근할 수 있다. Ctrl-Shift-I(또는 ⌘-Shift-i) 단축키를 이용하면 개발자 도구를 바로 실행할 수 있다. 개발자 도구는 화면 하단에 위치해야 하는데, 다른 곳에 있다면 모서리에 있는 점 3개 메뉴 아이콘을 클릭하여 옮길 수 있다. 그다음 개발자 도구 메뉴에서 픽시브릭스 섹션을 찾으면 된다.

픽시브릭스에서 가장 중요한 기능은 패널 왼쪽의 ‘추가(Add)’ 버튼이다. 추가 버튼을 클릭하면 현재 보고 있는 웹 사이트에 추가할 수 있는 요소 목록이 나온다. 다음은 링크드인 페이지에 필자가 원하는 요소를 추가한 예시다. 
 
ⓒ 추가(Add) 버튼을 적용한 예시. 출처:Computerworld/JR Raphael

  • 픽시브릭스의 ‘버튼(Button)’ 옵션을 사용해 링크드인 프로필 상단에 버튼을 추가한다. 버튼을 클릭하면 해당 페이지에서 사람 또는 회사의 이름을 불러온 후 관련된 구글 검색 결과를 가져올 수 있다. 가져온 정보는 참조용으로 공유 문서나 채팅 채널로 전송할 수 있다.
  • 링크드인에 버튼을 생성해서, 페이지의 특정 정보를 추출한 후 공유 스프레드시트의 특정 칼럼으로 보내는 기능을 구현할 수 있다. 관심 있는 구직자 정보를 그룹 형태로 만들고, 링크드인 프로필 정보를 가져오는 이 모든 과정을 버튼 하나를 클릭해서 완성할 수 있다.
  • ‘사이드바 패널(Sidebar Panel)’ 옵션을 사용해 링크드인 페이지에 나온 이름이 나온 기사를 웹사이트 오른쪽에 나열할 수 있다. 
 
ⓒ 사이드바 패널을 활용한 예시. 출처:Computerworld/JR Raphael

이와 같은 사례는 픽시브릭스 기능의 일부에 불과하다. 픽시브릭스는 앞으로 더 다양한 옵션을 지원할 예정이며, 옵션을 개발하기 위해 자금을 공개적으로 모으고 있다. 

픽시브릭스의 단점은 맞춤 웹 서비스를 만드는 과정이 직관적이지 않다는 점이다. 필자는 기술에 관심이 많은 편임에도 불구하고, 픽시브릭스의 기술을 이해하는데 조금 버거웠다. 따라서 기업에서 일반 직원은 픽시브릭스의 핵심을 잘 다루지 못할 가능성이 높다. IT 담당 직원이 초기 필요한 구성을 만들고 픽시브릭스의 자체 팀 관리 대시보드를 사용한다면, 특정 사용자나 부서에 필요한 기능을 더 쉽게 개발할 수 있다. 

이런 과정으로 픽시브릭스는 수익을 만든다. 개인 및 소규모 팀 사용자는 픽시브릭스를 무료로 사용할 수 있지만 사용자가 6명 이상이 되면 비용을 지불해야 한다. 특정 기능을 이용하기 위해서도 유료 서비스를 이용해야 한다. 입문자가 이용하는 프로(Pro) 요금제는 사용자당 월 10달러이며, 모든 기능을 제공하는 비즈니스(Business) 요금제는 사용자당 월 30달러다.
editor@itworld.co.kr

회사명 : 한국IDG | 제호: ITWorld | 주소 : 서울시 중구 세종대로 23, 4층 우)04512
| 등록번호 : 서울 아00743 등록발행일자 : 2009년 01월 19일

발행인 : 박형미 | 편집인 : 박재곤 | 청소년보호책임자 : 한정규
| 사업자 등록번호 : 214-87-22467 Tel : 02-558-6950

Copyright © 2024 International Data Group. All rights reserved.