중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
목차
1. URL 구조 뜯어보기
브라우저에서 특정 웹 페이지에 들어갈 때, URL을 입력합니다. URL은 웹 페이지의 주소와 같습니다. URL은 (1) 프로토콜, (2) 도메인, (3) 패스와 (4) 파라미터로 구성됩니다.
1.
프로토콜 : 정보를 주고 받을 때, 사용하는 통신 규약입니다.
2.
도메인 : 숫자로 된 IP 주소를 사용자가 보기 쉽게 변환한 것입니다.
3.
페스 : 페이지가 속한 경로입니다. 컴퓨터의 파일 경로처럼 구성됩니다.
4.
파라미터 : 해당 페이지에 추가적으로 전달되는 데이터입니다.
URL 파라미터의 경우, “?” 뒤에 추가가 되며, key와 value가 쌍을 이룹니다. 이미지에서 “?”뒤에 “utm_source=intagram”가 입력됐습니다. 여기서 utm_soruce가 key가 되고, instagram이 value가 됩니다. 즉, utm_soruce라는 key에 instagram이란 value를 전달한다는 의미입니다.
그 뒤로 “&utm_medium=piad”가 입력됐습니다. URL에 여러 파라미터를 전달할 수 있으며, 각 파라미터는 “&”로 구분합니다. 즉, “utm_source=intagram&utm_medium=paid”는 utm_soruce라는 key에 instagram이란 value를 전달하고, utm_medium엔 paid라는 value를 전달합니다.
2. 버블에서 URL 파라미터를 왜 사용해요?
버블에서 페이지에 데이터 타입을 설정할 수 있습니다. 타입을 설정한 순간부터, 해당 페이지에는 관련된 데이터를 전달해야 합니다.
따라서 [Go to page] 액션을 활용해 해당 페이지로 이동시킬 때, [Data to send]로 데이터를 함께 전달해야 합니다.
이때, 전달 데이터는 기본적으로 1개의 유형 밖에 없습니다. 하지만 URL 파라미터를 사용하면, 페이지 이동 액션에서 여러 데이터를 동시에 전달해 이용할 수 있습니다.
페이지에 여러 데이터를 동시에 전달할 수 있습니다.
3. URL 파라미터를 버블에서 활용하기
a. 파라미터 전송하기
사용법을 차근차근 알아보겠습니다. [Go to page] 액션 에디터에서 [Send more parameter to the page]를 활성화하면, [Add another parameter] 버튼이 나옵니다. 이를 클릭해 URL 파라미터를 추가할 수 있습니다. 좌측에는 Key를, 우측에는 Value를 입력하면 됩니다.
다음 이미지를 보면, current cell’s product를 입력해 현재 셀의 product 레코드를 전달하려고 하지만, 오류가 났습니다. 즉 Value 입력 시, 레코드를 바로 입력할 수 없습니다. 파라미터 값은 String(a.k.a text) 타입으로만 전달할 수 있기 때문입니다.
만약 특정 레코드를 전달하고 싶다면, Unique id 필드 값을 사용해야 합니다.
해당 액션을 실행하고 URL을 보면, 다음처럼 channel_id 파라미터가 전달된 걸 볼 수 있습니다.
b. 파라미터 값을 글자로 사용하기
이제 URL 파라미터를 이동된 페이지에서 읽어와 활용하면 됩니다. [Get data from page URL]을 활용하면, URL 파라미터 값을 읽어올 수 있습니다.
상단 [Type]에 [Parameter]를 선택하고, [Parameter name]에 파라미터의 key를 입력합니다. 그리고 하단 [Type]에는 파라미터 value를 어떤 데이터 타입으로 읽어와 사용할지 선택합니다.
하단 [Type]으로 [text]를 선택했기에 channel_id 값이 텍스트로 다음처럼 나왔습니다.
c. 파라미터 값을 레코드로 사용하기
파라미터의 데이터 타입을 테이블로 선택해 레코드를 직접 불러와 사용할 수 있습니다. 하단 [Type]을 [channel]을 선택합니다.
테이블 타입을 이용할 경우, 해당 파라미터의 값은 unique id 필드 값이 되야 합니다. 그래야 unique id를 통해 레코드를 확인할 수 있습니다. 다음 이미지에서 channel_id 파라미터의 값으로 unique id 필드를 활용한 걸 볼 수 있습니다.
이제 [Get channel_id from page URL]의 후속 동적 표시로 채널 테이블의 필드에 접근할 수 있습니다.
확인해보면, 해당 Unique id 값을 지닌 채널 레코드의 name 필드 값이 나왔습니다.
4. 자동 입력 기능 구현하기
UTM 파라미터를 적절히 사용하면, 유저 경험을 크게 개선할 수 있습니다. 예를 들어, 유저가 게시글을 작성해서 공유하는 서비스를 만든다고 합시다. 카테고리 페이지에서 버튼을 클릭하면, 게시글 작성 페이지로 이동됩니다.
이때, 각 카테고리별로 서로 다른 게시물 작성 페이지를 만드는 건 비효율적입니다. 그래서 모두 동일한 게시물 페이지로 이동하고, 유저가 카테고리를 선택한다고 합시다. 유저 입장에선 이전 페이지에서 카테고리 버튼을 클릭했는데, 다시 카테고리를 선택하는 건 불편합니다. 이때, 이전에 눌린 버튼 정보를 파라미터로 전달해 자동 선택되게 만들 수 있습니다.
[Go to page] 액션에 카테고리 파라미터를 추가합니다. 이때 값으로 카테고리의 unique Id 값을 전달합니다.
게시글 작성 페이지에서 카테고리를 선택해야 하는 드롭다운에서 [Default value]에 [Get data from page URL]로 앞선 파라미터 값을 불러오도록 합니다.
이제 카테고리 버튼을 클릭하면, 해당 카테고리가 드롭다운에 자동으로 선택됩니다.
해당 내용은 제가 출판 준비 중인 버블 책에도 담겨진 내용입니다. 버블의 기초 개념부터 실제 서비스를 만드는 방법까지 상세히 작성하고 있습니다. 버블을 더 자세히 배워보거나, 기본기를 다지고 싶다면 아래에서 출간 알림을 신청해주세요…!
중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
버블박스가 버블을 주제로 책을 발행할 예정입니다. 출간 알림을 등록하면 추후에 안내 드릴게요!
+ 알림 신청자 중 일부에게 책을 무료로 드릴 예정입니다.
필요한 플러그인이 있다면, 버블박스에게 요청해주세요
햇갈리거나 잘 모르는 이론 및 개념이 있다면 아래에 남겨주세요.
버블 크레딧으로 더 저렴하게 시작하기
버블박스 l BubbleBox
