중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
목차
1. 페이지 뎁스를 만들 수 있다고요?
콘텐츠 소재를 요청 받던 중 버블 오픈톡방에서 흥미로운 영상과 질문을 받았습니다.
해당 영상을 봐보니 “페이지 뎁스를 추가하는 방법”을 소개합니다. 명백히 말하면 진짜 페이지 뎁스를 만드는 건 아니고, URL 상으로만 그렇게 보이도록 만드는 것입니다. 어쨋든, 페이지 뎁스를 이런 식으로 보여줄 수 있다는 사실을 처음 알았네요. 역시 버블의 세상은 넓습니다.
이번 글에서는 영상을 뜯어 설명하기 보다, “어떻게 영상처럼 작동하는거지?”는지 핵심 이론과 적용 방법을 콕 집어서 설명드리겠습니다. 해당 글을 이해한 후에 위 영상을 보는 걸 추천드립니다.
일타강사 버블박스 멋지다…! (출처 : 럭키짱)
2. 버블의 페이지 URL 구조 이해하기
“뎁스를 만드는 게 그렇게 신기한건가?”라는 의문을 가질 수 있습니다. 그렇다면 당신은 초보자…! 이게 왜 신기한지 이해하려면, 버블이 페이지 URL을 어떻게 만드는지를 알아야 합니다. 우선, 버블에서 만든 앱의 URL의 구조는 다음과 같습니다.
Dev : https://{domain}/version-test/{page name}/{data id}
Live : https://{domain}/{page name}/{data id}
Python
복사
여기서 {page name}은 자신이 에디터에서 생성한 페이지의 이름입니다. 예를 들어, 아래처럼 ‘product’라는 페이지를 만들었으면, 해당 페이지의 URL은 “https://{domain}/version-test/product”가 됩니다.
이 상태에서 페이지의 [Type of content]에 특정 테이블을 지정하면, 이제 URL 마지막에 해당 테이블에 존재하는 행(=레코드)의 unique id 값이 하위 뎁스로 들어갑니다. 즉, https://{domain}/version-test/{page name}/{data id} 형식으로 존재하게 됩니다. 예를 들어, 아래에는 [Type of content]를 [product]로 지정했습니다.
그리고 product 테이블에 존재하는 행을 확인하면, 각 행마다 unique id 값이 있는 걸 확인할 수 있습니다. 이 중 선택한 행의 id 값은 1720539215607x620759588213076400 입니다.
해당 값이 페이지 url의 마지막 뎁스로 적용이 됩니다. 만약 페이지가 해당 데이터를 사용하면, 페이지 URL은 “https://{domain}/version-test/product/1720539215607x620759588213076400”가 됩니다. 이는 product 페이지에 해당 Id 값을 지닌 행의 데이터가 전달된 것을 의미합니다.
여기서 눈치 챘나요? 영상을 보면 URL이 “getprospace-inc.bubbleapps.io/version-test/pros/customers/169…/cus-invocies”로 나옵니다. 페이지 이름이 “pros”인 건 알겠는데, 뒤에 하위 뎁스로 “customers”, “1695…”, “cus-invocies”가 존재합니다. 즉, 영상에선 4계층 뎁스가 존한다는 말입니다.
앞서 작동 방식을 보면, 버블이 처리하는 URL은 (1) page name와 (2) data id, 이렇게 2계층 뎁스 밖에 없습니다. 어떻게 영상에서는 4계층 뎁스를 처리한걸까요? 걱정마세요. 차근차근 알려드리겠습니다.
헉…! 어… 어떻게 이런 일이? (출처 : 무한도전)
3. 페이지 뎁스가 ‘있는 것’처럼 보여주는 방법
사실 이건 보여주기식 트릭입니다. 앞서 말했듯 진짜 페이지 뎁스를 만드는 건 아니고, URL 상으로만 그렇게 보이도록 만드는 것입니다. 저렇게 설정한 URL이 구글 검색을 통해 노출되지 않으며, 링크 공유도 하기 어려울 겁니다. 빨리빨리 한국인을 위해 결론부터 말하자면, (1) [type of content]를 설정하지 않고 (2) [go to page] 액션으로 페이지 뎁스를 때려 박은 것이라 보면 됩니다.
사실 보여주기식 트릭이였던 거임! (출처 : 침하하)
엥? 하위 페이지 뎁스는 type of content를 설정해야 나오는데, 이걸 쓰지 않다니? 무슨 뚱딴지 같은 소리일까요? 앞서 말했듯, 아래 URL 구조에서 {data id} 부분은 [type of content]에 의해 결정 됩니다. 만약 이를 설정하지 않으면, 1개의 페이지 뎁스만 존재합니다.
[type of content 설정 O]
Dev : https://{domain}/version-test/{page name}/{data id}
Live : https://{domain}/{page name}/{data id}
[type of content 설정 X]
Dev : https://{domain}/version-test/{page name}
Live : https://{domain}/{page name}
Python
복사
근데, 신기한 부분이 [type of content]를 페이지에 설정하지 않아도 [Go to page] 액션을 설정할 때, [Data to send]에 값을 입력할 수 있다는 겁니다. 저도 처음 알았어요
그러면 만약 [Data to send]에 아무 값이나 입력하면 어떻게 될까요? 놀랍게도 페이지 이름 뒤에 하위 뎁스로 [Data to send]에 입력한 값이 그대로 적용됩니다. 아래 영상을 보면, 버튼을 클릭했을 때 위 이미지의 워크플로우가 작동되어 페이지 URL이 “product/데이터를 입력할 수 있어요”가 된 걸 볼 수 있습니다. 참고로 %는 url에서 스페이스를 인식할 수 없어서 자동 변환된 겁니다.
이제 트릭을 아셨나요? 트릭의 비밀은 (1) 페이지의 [type of content]를 설정하지 않고 (2) [go to page] 액션을 등록한 다음에 (3) [Data to send]에 “category/plugin/abc”같이 슬래쉬(/)를 인위적으로 입력해 하위 페이지 뎁스가 있는 것처럼 보이는 겁니다. 트릭이 간파되는 순간입니다.
4. 옵션 세트로 다중 뎁스 만들기
a. 환경 세팅하기
[Data to send]는 dynamic value를 입력할 수 있기에 테이블에 저장된 값이나 옵션 세트 등을 활용해 다중 뎁스를 보여줄 수 있습니다. 영상에서도 이런 방식을 사용합니다. 한 번 가볍게 알아봅시다.
“/product/{cateogry name}/{subcategory name}” 형식의 다중 뎁스를 한 번 만들어보겠습니다. 우선 {cateogry name}에 들어갈 데이터를 옵션 세트로 다음처럼 만듭니다. 일단 카테고리로 (1) plugin과 (2) blog를 만들었습니다.
이제 {subcategory name}에 들어갈 옵션 세트를 만들어야 합니다. 앞선 플러그인과 블로그 카테고리에 들어갈 만한 서브 카테고리를 아래처럼 만들어 봅시다.
이때, 서브 카테고리는 앞선 카테고리에 종속되야 합니다. 가령, 플러그인 카테고리라면 플러그인과 관련된 서브 카테고리만 있어야 합니다. 이를 위해 해당 옵션 세트에 속성(attribute)를 추가합니다. 이때 type은 상위에 속하는 카테고리 옵션 세트를 지정합니다.
그리고 서브카테고리의 옵션 값들에 연관 속성을 저장합니다.
b. 다중 뎁스 네비게이션 만들기
이제 다중 뎁스 URL을 실행하는 네비게이션을 만들어 보겠습니다. 페이지에 반복 그룹 요소를 만들고, [type of content]를 [category] 옵션으로 지정하고, 모든 카테고리 옵션을 불러오도록 하겠습니다. 이제 각 셀에는 개별 카테고리 옵션 값이 들어갑니다.
다시 셀 안에 하위 반복 그룹 요소를 추가하겠습니다. 그리고 [type of content]를 [subCategory]로 지정하고, 현재 셀이 지닌 카테고리에 종속된 서브 카테고리 옵션 값을 필터로 불러오겠습니다.
마지막으로 하위 반복 그룹 요소 안에 버튼을 생성하고, [Label]을 “{카테고리 이름}/{서브카테고리 이름}”으로 부르도록 지정하겠습니다.
그러면 이제 다음 이미지처럼 버튼이 나오게 됩니다.
여기서 버튼 클릭 시, 동작하는 워크플로우를 만듭니다. [Go to page] 액션을 추가하고, [Data to send]에 [arbitrary text]를 선택합니다. 이를 선택하는 이유는 저희가 사용하려는 dynamic value는 (1) category 옵션 값과 (2)subCategory 옵션 값, 2개이기 때문입니다. 아래처럼 등록을 해줍시다.
이제 실행을 해보면, 아래처럼 URL의 페이지 뎁스가 “product/{category}/{subCategory}”처럼 적용됩니다.
원본 영상에서 다루는 기본 원리는 이와 같습니다. 다만, 제가 다룬 부분은 핵심만 설명한거니 서비스에 더 디테일하게 담아내고 싶다면, 영상을 한 번 봐보는 걸 추천드립니다.
앞서 말했듯이 저도 이렇게 쓸 수 있는 걸 몰랐습니다. 버블을 다룬지 꽤 오래됐지만, 매번 새롭게 배우는 게 있네요. 평소 궁금하거나 이해가 안 가는 개념이 있다면, 페이지 최하단의 링크를 통해 질문을 남겨주세요. 함께 버블을 공부해보죠!
배움에는 끝이 없다 (출처 : 쿵푸팬더)
중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
버블박스가 버블을 주제로 책을 발행할 예정입니다. 출간 알림을 등록하면 추후에 안내 드릴게요!
+ 알림 신청자 중 일부에게 책을 무료로 드릴 예정입니다.
필요한 플러그인이 있다면, 버블박스에게 요청해주세요
햇갈리거나 잘 모르는 이론 및 개념이 있다면 아래에 남겨주세요.
버블 크레딧으로 더 저렴하게 시작하기
버블박스 l BubbleBox
