Webflow에 Vue.js를 인라인으로 적용한 동적 화면 구현

프로젝트에서는 제가 참여하기 전부터 Webflow를 사용하고 있었습니다. Webflow로 디자인과 공통 스타일을 구성하는 작업은 효율적이었지만, 서버에서 데이터를 받아 값에 따라 화면을 바꾸는 부분은 당시 작업 방식만으로 구현하기 어려웠습니다.

기존 Webflow 환경에서 작업을 빠르게 진행해야 했기 때문에, 화면 구성과 함께 사용할 수 있는 동적 처리 방법이 필요했습니다.

서버 통신과 동적 값 관리를 위해 Vue.js를 인라인으로 적용했습니다. 당시에는 빠른 진행이 필요했고, 러닝 커브가 비교적 낮고 인라인으로 바로 적용할 수 있다는 점을 보고 골랐습니다.

두 도구의 역할은 다음과 같이 나눴습니다.

Webflow로 만든 화면 요소에 Vue 지시문을 붙여, 화면의 속성과 표시 값이 Vue에서 관리하는 상태를 참조하도록 구성했습니다.

서버를 호출해 받은 데이터를 Vue.js에서 관리하고, 그 값을 Webflow로 구성한 화면에 적용했습니다. watch 등을 활용해 값의 변화에 따른 동작도 처리했습니다.

구현 흐름은 서버 호출, Vue.js의 응답 데이터·상태 관리, Webflow 화면에 동적 값 적용 순서입니다. 화면 디자인과 공통 스타일 작업을 이어 가면서 서버 응답에 따라 달라지는 영역을 구현했습니다.

저는 내부 팀의 프론트엔드 개발자로 Webflow 작업과 Vue.js 적용을 담당했습니다. 개발 PM으로는 구현 흐름과 예상 작업 시간을 정리하고 현업 담당 책임자와 논의한 뒤 결정된 내용으로 개발을 진행했습니다.

기존 Webflow 화면에서 서버 응답과 값의 변화에 따라 화면이 달라지도록 구현했습니다. 구체적인 적용 사례로 캡스홈에서 옵션 선택에 따라 구독 요금이 즉시 표시되는 흐름을 만들었습니다. 해당 사례의 데이터 연동과 검수 과정은 구독 요금·결제 흐름 기록에 정리했습니다.