하루만에 웹사이트를 만들어야했다. 개발자 없이!
금요일 오후 외주 요청이 하나 들어왔습니다.
웹사이트를 하나 만들어달라는 것이었는데,
기획과 디자인은 나와있고 개발만 하면 되는 상황이었습니다.
그런데,
다음 주 월요일에 런칭을 하고싶다는 클라이언트님.
충분히 가능합니다.
우리에게는 Bubble이 있으니까요!
프로젝트 개요
웹사이트 url : https://mozaiq.co.kr
프로젝트 기간 : 1일
투입 인력 : 1.5명
사용 툴 : bubble
주요 기능 :
- 슬라이드
- 폼 제출
- 슬랙 알림
- 카톡 알림(알리고)
- 페이스북 픽셀 및 GTM 세팅
프로젝트 상세 설명
만들고자하는 웹사이트는 프라이빗 별장 상담 신청을 위한 랜딩페이지인데요.
클라이언트의 기능 요청은 다음과 같습니다.
- 기획된 디자인대로 퍼블리싱 (슬라이드, pc/모바일 별 반응형 디자인 등)
- 고객이 상담 신청 시 이 정보를 팀의 슬랙 채널에 알림
- 고객이 상담 신청 시 접수 완료 카톡을 고객 번호로 전송
- 페이스북 마케팅을 위한 픽셀 및 GTM 설치
위 기능들은 모두 버블로 구현이 가능했는데요. 그렇다면, 지금부터 상세한 구현 방법들은 아래에서 설명해드리겠습니다.
주요 기능 설명
1. 이미지 슬라이드
슬라이드를 구현할 때 클라이언트의 요구사항은 다음과 같았어요.
- 슬라이드가 일정시간 뒤에 자동으로 넘어가야 한다.
- 터치가 불가능해야 한다 (유저가 터치하거나 조작해도 슬라이드가 반응하지 않도록)
- 슬라이드 넘어가는 속도가 매끄러워야 한다
1번은 구현 가능했지만, 2번과 3번 기능을 구현할 수 있는 플러그인을 찾을 수가 없었습니다.
그래서! 플러그인을 직접 만들었습니다
*위 플러그인은 Private 플러그인으로, 비공개 플러그인입니다. 혹시 사용을 원하시는 분이 있다면 문의 주시면 도움드리겠습니다!
위 스크린샷에서 우리가 만든 프라이빗 플러그인 바로 아래 위치한 Wonderful Image Slider에서 두개의 기능을 추가해 커스텀 플러그인을 만들었습니다.
이렇게 1. 슬라이드가 넘어가는 속도 (changespeed)와 2. 슬라이드의 터치/조작 가능 여부 (touchable) 기능이 추가되었습니다.
2. 카톡 알림
카톡 알림 기능 구현을 위해서는 실개발이 필요해요. 리트머스에서는 버블만으로 구현되지 않는 작업들을 자체적으로 api등을 개발해서 적용하고 있습니다. 카톡 알림 기능이 들어간 버블 앱 개발을 원하시면 리트머스와 함께하세요!
버블 개발에 대해 추가로 궁금하신 부분은 얼마든지 문의주세요.
버블(bubble.io) 전문 국내 외주 개발사를 찾으신다면, 리트머스와 함께하세요!
