중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
목차
버블로 서비스를 빌드할 때, 어떻게 구현할지 막막한 기능들이 있습니다. 이런 순간에 다른 분이 만든 버블 플러그인을 다운 받아 사용해 해결할 수 있습니다. 버블 플러그인 마켓 플레이스에 엄청나게 많은 플러그인이 있는데, 버블박스가 주로 사용하는 플러그인 11종을 소개드립니다. 당연히 제가 만든 플러그인도 포함합니다.
여기에 소개하는 플러그인 외에도 많은 게 있으니, 마켓플레이스를 한 번 확인해보세요! 약 5천 개의 플러그인을 확인할 수 있습니다.
필수 플러그인 11종
매우 주관적인 의견이니 “이런 플러그인이 있구나” 정도로 참고해주시면 감사하겠습니다. 다만, 제 경험상 무조건 1개 이상은 빌드하는 서비스에 사용될거라고 확신합니다.
1. Rich Text Editor : 콘텐츠 입력의 끝판왕
유저가 텍스트를 입력할 수 있는 요소로 인풋 요소와 멀티라인 요소가 기본적으로 제공됩니다. 다만, 해당 요소들은 간단한 텍스트만 입력하게 도와줍니다. 텍스트의 스타일링이나 글에서 이미지 첨부 등은 불가능함니더.
Rich text edior 플러그인은 마크다운 언어를 작성할 수 있는 에디터 요소를 제공합니다. 해당 요소 안에 텍스트 스타일링도 가능하며, 이미지, 영상 등을 글 안에 첨부할 수 있습니다. 참고로 이미지, 영상 첨부 원리는 아래와 같습니다.
1.
버블 스토리지에 이들을 자동 업로드
2.
글에서 업로드 된 주소(url)을 대신 기록
3.
에디터가 url의 이미지, 영상 등을 출력
2. Toolbox : js, nodeJs 코드 실행하기
버블은 워크플로우에 방대한 액션을 제공합니다. 다만, 액션 중에 자신이 원하는 기능이 존재하지 않을 수 있습니더. 이때 해당 플러그인을 활용해 JS나 nodeJS 함수를 코딩해 실행시킬 수 있습니다. 특히 HTML 헤더에 JS 라이브러리를 불러온 후에 JS 액션에 활용하거나, nodeJS 액션에서 import로 외부 패키지를 불러와 사용할 수 있습니다. 코드만 다룰 줄 안다면, 사용 범위가 훨씬 넓어집니다. 코드를 모른다고해도 우리에게 chatGPT라는 도구가 있으니 안 쓸 이유가 없겠죠?
3. CSS Loading animator : 유저를 기다리게 만들기
버블에서 워크플로우나 do a search for을 사용할 때, 약간의 시간이 소요됩니다. 이때 유저한테 조금만 기다려달라는 표시로 해당 플러그인을 활용하면 좋습니다.
플러그인은 스피닝 로딩 요소를 제공합니다. 유저가 기다리는 시간 동안 condition 탭에서 visible을 설정하면 좋습니다.
4. Wonderful Image Slider : 이미지 여러 장 보여주기
버블의 이미지 요소는 1장의 이미지만 보여줍니다. 만약 여러 장의 이미지를 보여줘여 하는 경우, 해당 플러그인을 추천합니다. 여러 장의 이미지를 슬라이드 형식으로 보여줍니다. 슬라이드 속도, 현재 이미지 순서 표기 등 설정할 수 있는 부분도 많습니다.
5. Kakao, Naver Login : 간편 로그인
자체 이메일로 회원가입을 진행할 경우, 이메일 인증 기능도 필수적으로 구현해야 합니다. 그렇지 않으면 다른 누군가가 내 이메일로 회원가입을 할 수도 있죠. 다만, 이메일 인증 액션은 sendgrid 계정을 연동해야 합니다. 하루 100개의 이메일 전송은 무료고, 그 이상이 필요하다면 유료 플랜을 사용해야 합니다.
카카오와 네이버 간편 로그인 플러그인을 사용하면, 개인 인증과 회원가입을 한 번에 처리할 수 있습니다. 또한 번거로운 인증 과정도 없기에 유저한테도 매우 좋습니다.
6. Tosspayments-Basic : 결제를 더 간편하게
토스페이먼츠에서 직접 만든 토스 결제 플러그인입니다. 이상하게 마켓플레이스에서는 검색이 안 되고, 에디터 페이지의 플러그인 탭에서 TossPayments-Widget-Basic 를 검색해야 나옵니다. 토스에서 직접 만든 만큼, 결제 기능을 쉽게 구현할 수 있습니다. 또한 제작자분이 디스코드에서 질의응답도 받고 있습니다.
번외로 나이스페이로 결제 연동을 하고 싶다면, 제가 만든 나이스페이 플러그인도 확인해보세요.
7. Bottom Sheet : 모바일 최적화 팝업 만들기
버블이 제공하는 팝업 요소는 페이지 상단을 기준으로 나타납니다. PC에서는 문제 없지만, 모바일에 최적화된 포맷은 아닙니다. 이때 해당 플러그인을 사용하면, 팝업을 모바일 형식에 맞춰 바텀시트로 변환시켜줍니다.
8. KakaoAlimTalk : 유저에게 알림 보내기
버블은 웹앱 서비스이기에 브라우저를 나간 유저에게 알림을 보내지 못합니다. 대안책으로 카카오 알림톡을 활용해 유저에게 알림을 보낼 수 있습니다. 오히로 카카오로 알림이 전송되기에 유저가 훨씬 더 쉽게 열람하게 됩니다.
9. Slack message : 슬랙에 이벤트 메시지 보내기
많은 스타트업이 슬랙을 팀 소통 뿐만 아니라, 중요한 알림을 받는 용도로 사용합니다. 버블에서 구매, 문의 등 중요한 액션 이벤트가 발생할 때, 슬랙에 메시지를 보낼 수 있는 플러그인입니다.
10. Files pro : 외부 스토리지에 대용량 파일 업로드하기
버블에서 유저가 업로드한 파일은 자체 스토리지에 저장됩니다. 하지만 s3, 구글 드라이브 등 자체 클라우드 스토리지에 저장하고 싶다면, 해당 플러그인을 추천합니다.
대표적인 장점은 (1) 압도적인 속도, (2) 프리뷰, 그리고 (3) 업로드 및 삭제의 일원화입니다. 우선 고용량 파일이 여러 장이라도 금방 업로드합니다. 핸드폰 고화질 사진을 올려도 금방 업로드가 되며, 여러 장의 이미지를 동시 처리합니다. 솔직히 어떻게 이렇게까지 빠른지 아직도 의문입니다. 또한 업로드 완료한 파일을 프리뷰로 보여주고, 업로드된 이미지의 삭제도 별도 액션 없이 요소에서 제공합니다.
11. File download with progress : 다운로드 진행 상황 보여주기
간혹, 서비스에서 유저가 특정 파일을 다운로드할 수 있는 기능이 필요할 때가 있습니다. 당연히 파일 용량이 클 경우, 그만큼 다운로드 시간이 오래 걸립니다. 이때, 다운로드가 얼만큼 됐는지 보여줄 수 없다면, 유저 입장에서 답답해 미칠 수 밖에 없습니다. 해당 플러그인은 다운로드 기능을 지원하며, 얼만큼 남았는지까지 보여줍니다.
한국 유저를 위한 국내 플러그인 모음
버블박스에서 국내 서비스와 연동되는 다양한 플러그인을 만들고 있습니다. 한국 버블러라면, 카카오, 네이버, 스티비 등 다양한 플러그인을 확인해보세요! 필요한 플러그인도 요청을 남길 수 있습니다.
중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
버블박스가 버블을 주제로 책을 발행할 예정입니다. 출간 알림을 등록하면 추후에 안내 드릴게요!
+ 알림 신청자 중 일부에게 책을 무료로 드릴 예정입니다.
필요한 플러그인이 있다면, 버블박스에게 요청해주세요
햇갈리거나 잘 모르는 이론 및 개념이 있다면 아래에 남겨주세요.
버블 크레딧으로 더 저렴하게 시작하기
버블박스 l BubbleBox
