03. 페이지 구조 설계 - 2) 유저가 페이지를 이동하게 하는 방법

유저가 내가 만든 사이트, 웹앱을 이용한다는 것은 내가 설계한 대로 유저가 페이지를 이동하는 것을 의미합니다. 페이지 이동이 잘 설계되어 있다면 그만큼 유저가 사이트를 이용하는데 좋은 경험을 얻게 되고, 나아가 비즈니스 성과로도 연결되겠죠.

 

이렇게 유저의 사이트 이용을 위해 설계된 페이지(사이트)를 보통 UI(User Interface)라고 부릅니다. 또 이런 UI를 설계하고 구축하는 작업을 프론트엔드(동의어 : 프론트, 앞단 등)라고 하는데요. 맨 앞에서 유저를 만나 유저의 사용 여정을 담당하기 때문에 이와 같이 부르고, 주로 HTML, CSS, Java Script를 다루는 웹디자이너와 퍼블리셔가 작업을 담당합니다.

(프론트엔드 디자이너, UI 디자이너라고도 함)

 

그리고 이렇게 설계된 UI로 유저가 경험하게 되는 것을 UX(User Experience)라고 합니다. (UX에 대해선 나중에 기회가 되면 따로 설명하도록 할게요!)

 

버블에서는 편집기의 디자인 탭에서 이와 같은 작업을 할 수 있습니다. 당연히 노코드툴이기 때문에 HTML이나 CSS, Java Script와 같은 언어를 다루지 못해도 누구나 UI를 설계할 수 있어요. 페이지 구조 설계를 하려면 가장 먼저 유저가 페이지를 이동하게 하는 방법부터 알아야 하겠죠? 버블에서는 2가지 방법으로 유저가 페이지를 이동할 수 있도록 할 수 있습니다.

 

1. 링크 요소 사용

'링크' 요소는 비주얼 요소 섹션에서 클릭으로 선택 후 편집기에 추가할 수 있습니다.

추가한 '링크 '요소를 선택하여 텍스트를 지정하고 도착 페이지(Destination page)를 설정할 수 있습니다.

비주얼 요소 중 '링크' 요소를 사용하는 방법입니다. 가장 기본적인 방법이기도 합니다. '링크' 요소를 사용하면 텍스트로 이동하려는 페이지를 설명할 수 있고, 유저가 해당 요소를 클릭하면 곧바로 정해진 페이지로 이동하게 됩니다. 만약 필요하다면 외부 URL로도 이동시킬 수 있습니다. 두 번째 방법인 '워크플로우 설정'보다 크게 2가지 장점이 있습니다.

 

-빠른 속도 : 유저의 페이지 이동 속도가 상대적으로 빠릅니다.

-새 탭에서 열기 : 유저가 마우스 우클릭을 이용해 새 탭에서 페이지를 열 수 있습니다.

 

2. 워크플로우 설정

클릭이 가능한 요소의 경우 '워크플로우'에서 유저의 페이지 이동을 설정할 수 있습니다. 원하는 요소 선택 후 'Start/Edit workflow'를 클릭해 워크플로우 설정 탭으로 이동하고, 액션의 'Navigation'탭에서 'Go to page'를 선택해 원하는 이동 페이지를 설정하면 됩니다. 이 방법은 다양한 요소를 페이지 이동 트리거로 선택할 수 있고, 원하는 데이터, path, paremeter 등의 쿼리값을 같이 보낼 수 있어 용이합니다. 주로 데이터 처리나 특정 워크플로우가 필요할 경우 많이 사용합니다.

*주의사항 : 워크플로우에서 'Go to page'는 다른 페이지로의 이동이기 때문에 해당 페이지에서의 작업이 종료되는 것을 의미하므로 반드시 마지막 액션이어야 합니다. 

 

'버튼' 요소 등 클릭이 가능한 요소의 'Start/Edit workflow'로 워크플로우 설정 탭으로 이동합니다.

요소 클릭이 트리거가 되고 액션에서 'Go to page'를 선택하면 위와 같이 목적지(Destination) 페이지를 선택할 수 있습니다. 'Data to send'나 'Send current page parameter로 해당 페이지 내의 데이터 또는 파라미터 값을 함께 보낼 수 있고 'Send more parameters'로 커스텀 동적 파라미터 값을 보낼 수도 있습니다.