소개
마캡처는 광고 대행사의 실무자를 대상으로 하는 광고 모니터링 서비스입니다.
광고 대행사에서는 고객사에게 결과 보고를 할 때 광고가 잘 노출되고 있는지 화면을 캡처하여 보고서에 첨부하는데요,
기존에는 이 화면을 담당자가 광고가 노출될 때까지 화면을 새로고침 하며 직접 캡처를 했습니다.
마캡처는 해당 업무를 자동화 해주는 서비스로 광고 이미지와 게재 지면, 게재 일시를 입력하면 프로그램이 업로드한 광고 이미지와 동일한 이미지가 게재 지면에 노출되면 자동으로 캡처하여 이메일로 보내드리는 서비스입니다.
해당 서비스의 프론트 영역을 Bubble로 빠르게 구현해보았습니다.
진행 방법
사용한 도구: 버블
활용한 기능
화면 크기 설정
데스크톱과 모바일을 모두 고려한 디자인을 진행하여 처음부터 화면 width를 375px로 설정하였습니다.
그룹
그룹을 만들고 그 안에 텍스트, 이미지 등 요소를 추가하여 레이아웃 및 워크플로우를 관리하였습니다.
대표적으로 위에서 설정 했던 화면 크기에 맞게 요소들이 노출될 수 있도록 중앙 정렬을 선택하고 그룹의 width 최대 크기를 375px로 지정하였습니다. 또한 요소들이 화면에 딱 붙지 않도록 상하좌우에 마진값을 두었습니다.
싱글페이지 방식 구현
유저가 자신의 광고 내용을 입력하는 화면과 신청 완료 화면을 한 곳에서 구현한 뒤 그룹을 Show, Hide 하는 싱글페이지 방식으로 구현하였습니다. 싱글페이지는 미리 모든 화면을 불러온 뒤 Show, Hide로 노출 여부를 표시하여 유저에게 화면 전환이 매우 빠르게 되는 '것 처럼' 보이는 장점이 있습니다.
싱글페이지 방식으로 구현하기 위해 '신청하기'화면과 '신청 완료' 화면을 각각의 그룹으로 묶은 뒤 '신청하기'화면은 페이지 로드 시 노출되게, '신청 완료'화면은 노출이 안되게 세팅하였고, 각 그룹은 노출되지 않을 때 영역을 차지하지 않게 세팅하였습니다.
워크플로우
유저가 '신청하기' 화면에서 모든 인풋값을 입력하고 '신청하기' 버튼을 눌렀을 때 이루어져야 하는 로직을 설계했습니다. (입력한 데이터 생성 -> 인풋 필드 초기화 -> '신청하기'화면 Hide -> '신청완료'화면 Show)
입력한 데이터는 미리 생성했던 데이터 타입과 필드에 맞게 매칭해주었습니다.
색상 스타일
반복적으로 써야 하는 색상이 있어 Style variables에 색상을 추가하였습니다. 디자인에서 색상을 고를 때도 편리하지만 나중에 색상 변경이 필요할 때 Style variables에서 변경하면 해당 색상을 사용한 요소들이 한 번에 모두 변경되기 때문에 관리 측면에서 매우 유용합니다.
텍스트별 색상 지정
인풋 필드에서 필수 입력값의 경우 별표(*) 로 표시해주는데요, 별표만 다른 색상으로 지정하였습니다.
텍스트를 선택하여 리치 텍스트 에디터에서 특정 문자만 스타일을 변경할 수 있으며, 특정한 색상의 경우에는 직접 색상코드를 입력하여 설정할 수 있습니다.
이미지 내 URL 삽입
서비스를 사용한 유저에게 피드백을 받기 위해 피드백을 유도하는 배너 이미지를 넣고 구글폼 링크를 연결하였습니다.
워크플로우에서 이미지 클릭 시 외부 링크로 연결되게 설정하였고 새로운 탭으로 열리게 하였습니다.
플러그인 활용
UX 측면에서 로딩이나 완료 표시 등 로티 파일을 자주 활용하는데 플러그인이 있길래 시도해봤습니다. 무료이기도 하고 플러그인으로 제이슨 파일을 업로드하니 굉장히 쉽게 로티를 활용할 수 있었습니다.
기타로 디테일한 디자인을 수정하고 싶은 부분이 있어 CSS Tools도 설치해보았습니다.
Chat GPT 활용
버블을 이용하면서 모르는 점이 굉장히 많았는데요, 물론 스터디장님과 닿님이 많은 도움을 주시기도 하셨지만 자잘한 것들은 Chat GPT를 많이 활용했습니다. 생각보다 자세하게 잘 알려주어 웬만한 것들은 혼자서 구현을 할 수 있었습니다.
결과와 배운 점
결과
마캡처 프론트 개발 완성 (https://wdpdevdev.bubbleapps.io/version-test)
데이터 정상적으로 수집됨
탭은 결국 구현 실패...
배운 점
간단한 서비스 정도는 버블로 충분히 만들 수 있음을 확인
앞으로의 계획
자체 개발한 서버와 연결하여 서비스 완성
광고 대행사에 무료로 서비스 배포하기