프론트엔드 개발자가 직접 이야기하는 7일간의 로우코드 도전기

프론트엔드 개발자가 직접 이야기하는 7일간의 로우코드 도전기

플렉스튜디오 팀은 전시회에 참가할 때마다 플렉스튜디오로 직접 만든 게임 이벤트를 준비하곤 합니다. 복잡한 설명 없이도 짧은 플레이만으로 플렉스튜디오의 가능성을 자연스럽게 느끼는 방법이라고 생각하기 때문이에요.

지난 12월 초 소프트웨이브 전시에서 선보인 ‘풍선 터트리기 게임’도 이런 취지에서 만들어졌습니다. 화면에 나타나는 플렉스튜디오 풍선을 터트리면 전시에 함께 참여한 영림원소프트랩의 다양한 제품군이 자연스럽게 노출됩니다. 제한 시간 동안 클릭한 횟수는 실시간 랭킹으로 이어져요. 덕분에 전시 현장에서는 많은 관람객들이 잠시 멈춰 게임을 즐기는 모습을 볼 수 있었죠.

이 프로젝트가 인상적인 이유는 단순히 빠르게 완성되었기 때문만은 아닙니다. React와 React Native 기반으로 개발해 오던 프론트엔드 개발자가 로우코드 환경인 플렉스튜디오에서 프론트엔드 개발자의 역할과 생산성이 어떻게 확장될 수 있는지를 보여준 사례이기 때문입니다. 로우코드가 처음이었던 김재영님이 개발하며 어떤 고민을 했고 어떤 선택으로 게임을 완성했는지, 그 과정을 함께 살펴보려 합니다.

플렉스튜디오로 개발한 '풍선 터트리기앱'

Q. 안녕하세요. 재영님! 자기소개 부탁드립니다!

안녕하세요! 플렉스튜디오 프론트엔드 개발자 김재영입니다.

Q. 현재 사용하고 계신 기술 스택은 무엇이며, 플렉스튜디오 합류 전에는 어떤 개발을 주로 하셨나요?

현재 플렉스튜디오에서는 Vanilla JavaScript로 개발하고 있고, 합류전에는 React, React Native를 활용하여 이커머스, 동영상 플랫폼 등을 개발했습니다.

Q. 로우코드 환경에서의 개발은 처음이셨을 텐데요. 플렉스튜디오를 처음 접했을 때 어떤 점이 가장 인상적이었나요?

가장 놀라웠던 점은 ‘개발 생산성의 극대화’였습니다. 보통 프로젝트를 시작하려면 환경 구축에 상당한 시간이 소요되는데, 플렉스튜디오는 별도의 세팅 없이 개발에 착수할 수 있다는 점이 매우 인상적이었습니다. 특히 복잡한 기능들을 복합적인 코드 작성 없이 클릭만으로 구현할 수 있도록 사전 준비된 컴포넌트, 컨트롤 등을 보며 로우코드의 강력한 잠재력을 느꼈습니다.

플렉스튜디오 시나리오에서 '풍선 터트리기앱'을 개발하는 모습

Q. 기존에 해오던 개발 방식과 비교했을 때 가장 크게 달랐던 점이 있다면 무엇인가요?

기존에는 ‘디자인 - 퍼블리싱 - 프론트엔드 개발 - 백엔드 연동’의 과정으로 개발을 했습니다. 하지만 플렉스튜디오에서는 디자인이 곧 퍼블리싱이 되고, Firestore나 FlexDB 연동을 통해 직접 데이터를 가져오는 방식으로 더미 데이터를 추가하는 것처럼 간단하게 데이터연동을 할 수 있었습니다.

Q. 이번 소프트웨이브 전시를 위해 만드신 풍선 터트리기 게임을 소개해 주세요.

이 게임은 플렉스튜디오의 기술력을 직관적으로 보여주기 위한 목적으로 만들게 되었는데요. 화면에 나타나는 플렉스튜디오 풍선을 터트리면, 영림원소프트랩의 다양한 제품군이 자연스럽게 노출되도록 기획되었습니다. 제한 시간 내에 풍선을 터트리면 실시간 랭킹에 등록되는 경쟁 요소를 도입하여, 전시회 방문객들의 흥미와 참여를 효과적으로 이끌어냈습니다.

플렉스튜디오의 게임 이벤트가 진행된 소프트웨이브 부스

Q. 풍선 터트리기 게임을 구현할 때 가장 먼저 고민하셨던 핵심 포인트는 무엇이었나요?

첫째는 '적절한 난이도 설계를 통한 도전 욕구 자극', 둘째는 '즉각적인 터치 피드백'입니다. 게임 특성상 사용자가 빠르게 터치했을 때 모든 터치에 풍선이 반응해야 몰입감이 깨지지 않기 때문에 로우코드 환경에서도 최적의 퍼포먼스를 내는 데 집중했습니다.

Q. 풍선 터트리기 게임의 전반적인 개발 과정을 설명해 주실 수 있나요?

컨셉 회의가 끝나자마자 플렉스튜디오 내에서 디자인과 퍼블리싱을 즉시 동시에 진행했습니다. 이후 로직 구현과 데이터 연동(기록 저장 및 실시간 랭킹 시스템)을 순차적으로 마무리했는데요. 사실 저도 플렉스튜디오 가이드의 튜토리얼까지만 진행해봐서 추가로 학습하며 진행했음에도 불구하고, 기획 단계부터 실제 배포까지 단 7일 만에 모든 과정을 완료할 수 있었습니다.

Q. 개발 과정에서 플렉스튜디오의 어떤 기능을 가장 많이 사용했나요?

'로드스크립트' 기능입니다. 기본적인 UI와 데이터 연동은 노코드 방식으로 처리하고, 게임의 핵심 로직이나 세밀한 인터렉션처럼 직접 개발이 필요한 부분은 로드스크립트를 통해 JavaScript코드로 제어할 수 있었습니다. 로우코드 플랫폼이 가진 한계를 개발자의 역량으로 자유롭게 확장할 수 있게 해주는 핵심 기능이라 생각합니다.

Q. 개발 과정에서 가장 어려웠던 부분과 해결 방법은 무엇인가요?

• 첫째는 터치 반응 속도 최적화 문제였습니다. 그룹 컴포넌트에서는 click과 scrollend 이벤트만 지원하다 보니 게임 특유의 빠른 터치감을 살리기 부족했습니다. 이를 해결하기 위해 로드스크립트에서 직접 DOM 요소에 접근하여 touchstart 이벤트를 등록했습니다.
  

• 둘째는 화면 이동 시 다이얼로그 상태 유지 문제였습니다. 플렉스튜디오의 기본 정책은 화면 이동 시 열려 있던 다이얼로그가 자동으로 닫히는 구조입니다. 하지만 이번 프로젝트에서는 사용자가 다른 화면에 다녀오더라도 기존 다이얼로그가 열린 채로 유지되어야 하는 상황이었습니다
  
  처음에는 가이드 문서에서 관련 해결 방법을 찾지 못해 고전했으나, 동료의 도움으로 f.frame.popup 기능을 활용해 문제를 해결할 수 있었습니다. 사실 문서에 해당 내용이 명시되어 있었음에도 불구하고, 어떤 상황에서 이 기능을 써야 하는지에 대한 설명이 부족해 직관적으로 와닿지 않았던 것 같습니다. 이 경험을 통해, 앞으로 창작자분들이 기능을 더 쉽게 발견할 수 있도록 가이드 문서를 사용자 시나리오 중심으로 개선해야겠다는 인사이트를 얻었습니다.

Q. 작업 중 예상치 못한 버그나 재밌는 해프닝이 있었나요?

풍선을 터트릴 때 점수에 따라 풍선 크기를 키우는 로직을 구현했는데, 처음에는 화면 전체를 reload() 시키는 방식을 써서 이미지가 깜빡이는 현상이 있었습니다. 사용자 경험을 위해 리로드가 아닌, CSS의 transform 속성을 직접 수정하여 부드러운 애니메이션 효과를 구현했습니다.

Q. 플렉스튜디오를 활용하면서 가장 유용했던 기능은 무엇인가요?

데이터 연결 기능입니다. 플렉스튜디오에서는 별도의 백엔드 API 명세서를 기다릴 필요 없이, DB를 생성하고 화면 요소에 연결만 하면 실시간 데이터 바인딩이 끝납니다.

또한, 데이터를 연결하기만 하면 실시간으로 화면에 반영되는 자동 바인딩 구조 덕분에, API 호출이나 상태 관리 로직을 구현하는 번거로운 과정이 줄어들었습니다. 결과적으로 프론트엔드 개발자로서 서비스의 완성도를 높이는 핵심 비즈니스 로직과 사용자 경험을 고도화하는 데만 집중할 수 있었던 점이 가장 만족스러웠습니다.

플렉스튜디오 유튜브에서 다양한 데이터 연동 방법 학습하기 👇

Q. 프론트엔드 개발자 동료들에게 플렉스튜디오를 소개한다면, 어떤 점을 강조하고 싶으신가요?

‘시각적 직관성’과 ‘확장성’입니다. 코드로만 상상하던 서비스 흐름을 화면을 보며 즉시 구축할 수 있어 전체적인 아키텍처 파악이 훨씬 쉽습니다. 단순한 PoC용 앱부터 실제 서비스 가능한 고사양 앱까지 모두 대응 가능하므로, 개발자의 생산성을 몇 배로 높여줄 수 있는 강력한 도구라고 확신합니다.

Q. 마지막으로 플렉스튜디오를 사용하시는 창작자분들께 한 마디 부탁드려요.

플렉스튜디오는 창작자의 상상력을 실현하기 위해 지금 이 순간에도 빠르게 진화하고 있습니다. 사용하시면서 필요한 기능이나 개선점이 있다면 언제든 말씀해 주세요. 여러분의 피드백이 플렉스튜디오의 기능이 되고, 그것이 다시 여러분의 더 멋진 결과물로 이어지는 선순환을 함께 만들어가고 싶습니다!

개발자의 가능성을 넓혀주는 새로운 개발 방식, 플렉스튜디오를 직접 사용해 보세요.