비개발자도 노코드로 하루 만에 서비스 런칭합니다 (3)
데이터베이스 구축과 작동 로직 구현하기
목차
1. 버블로 데이터베이스 구축하기
2. 서비스 로직과 shortURL 기능 구현하기
3. 완성된 서비스 배포하기
4. 총 소요 시간 분석하기
그로잉피플의 강의 커리큘럼을 따라 24시간 만에 올인원 링크 관리 솔루션, 브릿지링크라는 서비스를 완성해 배포했습니다. 그로잉피플에서 서비스 기획부터 UI 디자인, 노코드 개발까지 모든 과정을 함께 해보면, 노베이스인 사람도 IT 서비스를 혼자서 만들 수 있습니다.
이번 주 강의 모집이 종료됩니다.
친구와 함께 수강하면, 페이백을 드려요!
(~ 23.08.27)
버블로 데이터베이스 구축하기
1. 데이터 모델링하기
이전 글에서 프론트엔드 작업을 끝냈으니, 백엔드 작업을 시작했습니다. 프론트엔드 작업을 위해 UI 디자인 작업이 선행됐다면, 백엔드 작업을 위해서 데이터베이스 모델링이 선행돼야 합니다.
데이터베이스 모델링을 위해 아래의 질문을 던졌습니다.
어떤 개체가 필요한가?
개별 개체의 속성은 무엇인가?
개체 사이의 관계는 어떻게 되는가?
여기서 개체(entity)는 ‘정의 가능한 사물 또는 개념’으로, 데이터베이스에서 테이블(table)로 대변됩니다. 속성(attribute)은 ‘개체가 갖고 있는 정보의 유형’으로, 테이블의 컬럼(column)으로 대변됩니다.
2. 개체, 속성과 관계수 정의하기
브릿지링크의 플로우 차트를 참고해 어떤 개체가 필요한지 정의했습니다. 전반적인 서비스 프로세스는 (1) 업무 공간에 여러 팀원을 초대하고 (2) 공간에서 URL과 UTM을 등록하며 (3) 배포 링크를 생성합니다. 이때, 필요한 경우에 (4) ShortURL을 생성하고 썸네일 등을 별도 설정합니다.
설명을 기준으로 도출한 개체와 개체 별 속성은 다음과 같습니다.
마지막으로 서로 다른 개체가 어떠한 관계 수를 맺고 있는지 생각했습니다. 예를 들어, 1개의 워크스페이스는 N명의 유저와 관계를 맺을 수 있습니다. 반대로, 1명의 유저는 N개의 워크스페이스에 참가할 수 있습니다. 이런 경우에 유저와 워크스페이스는 N:N의 관계를 맺고 있다고 말합니다.
3. 데이터베이스 구현하기
버블에서 클릭 몇 번으로 데이터베이스를 구현할 수 있습니다. 앞서 도출한 개체와 속성에 맞춰 테이블과 속성을 생성했습니다.
이렇게 생성한 테이블의 데이터는 버블에서 확인할 수 있습니다.
서비스 로직 구현하기
1. 페이지 이동 로직 구현하기
데이터베이스를 구현했으니, 이제 서비스 작동 로직을 처리할 차례입니다. 버블의 로직은 워크플로우 형태로 존재합니다. 워크플로우는 (1) 트리거 이벤트와 (2) 액션 이벤트로 구성되며, 트리거 이벤트가 작동되면, 연결된 일련의 액션 이벤트가 작동됩니다. 예를 들어 서비스에서 특정 이미지나 버튼을 클릭하면, 다른 페이지로 이동됩니다. 여기서 트리거 이벤트는 “특정 이미지나 버튼의 클릭”이고, 액션 이벤트는 “지정한 페이지로 이동”이 됩니다.
로직은 간단한 것부터 작업을 시작하기로 했습니다. 가장 먼저 작업한 기능은 페이지 이동 로직입니다. 해당 로직은 특정 요소를 클릭하면, 페이지를 이동하게끔 설정만 하면 됩니다.
버튼을 클릭했을 때, 특정 페이지로 이동하는 워크플로우를 만들었습니다. 워크플로우를 생성하고, 트리거 이벤트로 “시작하기 버튼 클릭”를, 액션 이벤트로 “페이지 이동”을 설정하면 페이지 이동 로직이 구현됩니다.
2. 데이터 로직 구현하기
CRUD는 데이터 로직인 Create, Read, Update, Delete의 줄임말입니다. 이 중에서 데이터 호출 로직(Read)을 먼저 처리했습니다. 그래야 데이터 생성, 수정 및 삭제 로직의 결과를 바로 확인해서 로직에 오류가 있는지 바로 확인할 수 있기 때문입니다.
Create : 데이터를 새로 생성하는 로직
Read : 기존 데이터를 호출하는 로직
Update : 기존 데이터를 수정하는 로직
Delete : 기존 데이터를 삭제하는 로직
텍스트, 이미지 등의 요소로 데이터베이스에 저장된 데이터를 불러올 때, Dynamic data 기능을 사용합니다. 이는 현재 페이지, 데이터베이스, 유저 정보 등을 변수 값으로 활용할 수 있는 기능으로, 사용한 변수 값은 파란색 글씨로 표기됩니다. 아래에 적힌 Current page’s workspace’name는 현재 페이지와 관련된 워크스페이스 데이터에서 name 값을 불러옴을 뜻합니다. 이런 식으로 모든 요소에 필요한 데이터를 호출했습니다.
호출 로직을 처리한 후, 데이터의 생성(Create), 수정(Update)과 삭제(Delete) 로직을 구현했으며, 이때 케이스 별 로직 처리를 고려해야 합니다. 예를 들어, URL 데이터를 생성할 때, 무작정 입력한 모든 값을 URL로 등록하면 안 됩니다. 현재 워크스페이스에 이미 등록된 URL이라면, 이를 등록하지 못하게 막아둬야 합니다.
앞선 예시에서는 동일한 버튼을 클릭했지만, 조건에 따라 다른 결과가 나왔습니다. 바꿔 말해, 트리거 이벤트는 동일하지만, 액션 이벤트만 다릅니다. 이런 경우에 하나의 워크플로우 안에 조건 별 액션 이벤트를 따로 설정하면 됩니다.
3. shortURL 구현하기
마지막으로 생성한 shortURL로 유저가 접속할 시, 연결된 링크로 리다이렉트를 시키는 로직을 구현했습니다. bitly 같은 단축 URL 서비스의 작동 원리는 아래와 같습니다.
1. 유저가 Short URL을 클릭해 페이지 접속
2. Short URL과 연결된 Original URL를 데이터베이스에서 확인
3. Original URL 값을 호출
4. 해당 URL로 페이지 리다이렉트
우선 Short URL을 클릭했을 때 나오는 빈 페이지를 생성했습니다. 그리고, 혹시 인터넷 문제로 리다이렉트가 지연될 경우에 유저에게 로딩 중이란 느낌을 줄 수 있도록, HTML 코드를 활용해 애니메이션 요소를 직접 생성했습니다. 버블의 기본 요소 중에 HTML 요소가 있는데, HTML 코드를 직접 입력해 요소를 생성할 수 있습니다.
그다음으로 페이지의 Title, Description과 Thumbnail Img를 유저가 설정한 데이터를 불러와 설정되게 만들었습니다. 이제 카카오, 슬랙 등의 채널에서 shortURL 링크를 공유했을 때, 설정한 값이 유저에게 보입니다.
마지막으로 페이지의 HTML Header에 연결된 링크를 불러온 후, 여기로 리다이렉트 시키는 메타 태그를 입력했습니다. 이제 페이지에 들어오면, 호출된 링크로 리다이렉트가 됩니다.
완성된 서비스 배포하기
1. GA 연결하기
이제 서비스 제작이 완료됐으니, 배포를 준비할 차례입니다. 유저들이 서비스를 어떻게 사용하는지 파악하기 위해 GA를 연결했습니다. 버블의 설정 페이지에서 현재 서비스를 구성하는 모든 페이지의 <Head>와 <body>에 코드를 삽입할 수 있습니다. 여기에 생성한 GA 계정의 트래킹 코드를 삽입하면 됩니다.
2. 링크 설정
초기에 서비스를 홍보할 때, 커뮤니티나 주변 지인에게 링크를 공유하는 방식을 사용합니다. 이때, 채널에서 자동으로 링크에 저장된 썸네일, 타이틀, 디스크립션 값을 불러와서 보여줍니다. 썸네일 이미지와 문구가 얼마나 매력적인지에 따라서 유저의 클릭율도 달라집니다.
설정 페이지에서 링크 공유 시 보여주는 기본 값을 설정할 수 있습니다. 썸네일 이미지로 서비스의 핵심 기능을 담은 목업을 설정하고, 타이틀에는 서비스 이름을, 디스크립션에는 서비스의 제공 기능을 요약해서 적었습니다.
3. 자체 도메인 연결
버블은 작업한 서비스에 bubbleapps.io라는 도메인을 기본 제공합니다. 예를 들어, 서비스 이름이 bridgelink라면, 서비스 URL은 bridgelink.bubbleapps.io이 됩니다. 기본 도메인이 마음에 들지 않는다면, 직접 구매한 도메인을 연결할 수도 있습니다. ShortURL 기능에서 bubbleapps.io 도메인은 길이가 길다고 판단해, 별도로 도메인을 구매해 사용하기로 했습니다. 어떤 도메인을 사용할까 고민하다, “Cloud”라는 도메인이 “링크를 공유한다”는 컨셉에 부합해 이를 구매해서 연결했습니다.
모든 세팅을 완료하고, 최종적으로 서비스를 배포했습니다. 버블은 유료 플랜에서 Dev와 Live 버전 서비스를 지원합니다. 이 둘은 독립적으로 존재하며, Dev는 개발용이고 Live는 유저용 서비스라 보면 됩니다. 버블에서 작업한 부분은 실시간으로 Dev에 반영됩니다. 작업을 완료한 Dev 버전을 배포하면, 그제야 Live 버전에 적용됩니다.
총 소요 시간 분석하기
약 24시간 만에 브릿지링크 서비스를 만들면서, 어떤 업무에서 시간이 많이 소요됐는지를 체크해 봤습니다. UI 디자인에서 가장 오랜 시간이 걸렸고, 그다음으로 프론트엔드 작업과 로직 설정에서 걸렸습니다. 로직 설정에서 시간이 걸린 이유는 케이스에 따른 로직을 고려해야 했기 때문입니다.
노코드로 방법론의 가장 큰 장점은 ‘가장 많은 걸 알고 있는 사람’이 모든 것을 다 결정하고 행동할 수 있다는 점입니다. 기획자, 디자이너, 개발자가 서로 협업하는 경우, 각자가 알고 있는 정보를 동기화하는 데 시간이 소요되고, 잘못된 정보 동기화로 이상한 결과물이 나올 수 있습니다. 하지만, 노코드 개발 방법은 기획부터 디자인과 개발까지 혼자서 처리할 수 있기에, 커뮤니케이션 오류와 비효율성이 전혀 발생하지 않습니다. 결과적으로, 일관적인 방향으로 서비스를 디벨롭할 수 있습니다.
Famelee가 국내 버블 유저를 위해 사이드 프로젝트를 시작했습니다. 공식 문서 번역부터 다양한 국내 플러그인과 버블 서비스 레퍼런스를 만나보세요
이번 주 강의 모집이 종료됩니다.
친구와 함께 수강하면, 페이백을 드려요!
(~ 23.08.27)
버블로 만든 서비스, 브릿지 링크를 아래서 확인할 수 있습니다.
