[2025 최신] 버블에서 리피팅 그룹 각 셀마다 워크플로우를 실행하고 싶을 때 : 플러그인 오케스트라(Orchestra)

안녕하세요, 합리적인 외주 개발의 가치를 더하는 리트머스입니다!

오늘은 Bubble.io에서 가장 활용도가 높은 플러그인 Orchestra에 대한 기술블로그를 작성해보고자 합니다.

특히, 최근 플러그인이 업데이트 되면서 예전 버전과 바뀐 부분이 있는데요. 최신 버전으로 업데이트해서 알려드리려고 합니다.

이전 버전 글
↘︎ 버블에서 리피팅그룹 각 셀마다 워크플로우를 실행하고 싶을 때

이 포스트의 독자층은 보통 버블 입문자일 것 같은데요, 이번 포스팅을 잘 읽고 오케스트라의 사용방법을 자세히 익혀서 구현할 수 있는 기술 범위를 더 넓혀보시길 바랍니다!

버블에서는 데이터를 반복적인 형식으로 프론트에 나타내주는 작업이 빈번하게 나타나는데요, 이 때 사용하는 요소가 ‘Repeating group’입니다. 리피팅 그룹 내부에 표시해 줄 데이터 리스트를 지정하고, 가장 첫번째 셀에 각각의 데이터를 나타내 줄 형식을 디자인하면 지정한 데이터 리스트 내부의 모든 데이터가 같은 형식으로 나타나게 됩니다.

이 때에 이 리피팅 그룹 내부의 데이터리스트에 동일한 워크플로우를 실행시키고 싶을 때! 오케스트라를 사용할 수 있습니다.

버블 자체 기능만으로는 리피팅 그룹의 내부 데이터에 각각의 워크플로우를 실행시킬 수 있는 방법이 존재하지 않기에 Orchestra 플러그인이 아주 유용하게 사용될 수 있습니다.

‍

‍

예를 들어, 어떤 상품 리스트를 리피팅 그룹으로 나타내주었고, 각 셀에서 해당 상품의 수량을 지정한 후, 리피팅 그룹 하단의 저장 버튼을 누르면 각 셀의 상품의 수량 정보에 내가 지정한 수량이 들어가도록 하려는 상황을 가정해봅시다.

이 때에, 오케스트라의 ‘Maestro’가 어떤 ‘Musician'에게 명령(지휘)을 내릴 것인지 지정하고, 해당  ‘Musician'이 각 셀에서 어떤 워크플로우를 실행할 것인지를 지정해둔다면, 저장버튼을 눌렀을 때 이를 Trigger 할 수 있습니다. Trigger가 된 ‘Maestro’는 지정된 ‘Musician'에게 실행 명령을 내리고, 각 셀 내부의 ‘Musician'은 셀 하나하나마다 워크플로우를 실행합니다.

결과적으로 리피팅 그룹의 각 셀 내부에서 각각의 워크플로우가 실행되며  상품의 수량 정보에 내가 지정한 수량이 들어가도록 수정이 완료되는 것이죠.

이 작업은, 기존에 여러 개의 워크플로우를 만들어 각각을 실행시켜줘야하는 과정을 Trigger 한 번에 간편하게 실행될 수 있도록 해준다는 아주 큰 장점이 있습니다. 예를 들어, 기존에 수량을 변경하고 싶은 상품 정보가 5개였다면 5개의 워크플로우(Step)을 넣어주어야 하겠지만, 이 작업은 하나의 워크플로우에서 모든 작업이 끝나죠.

그럼 이제부터는, 이 강력한 플러그인을 어떻게 사용하는 것인지, 사용 방법에 대해 상세히 기술해보겠습니다!

같이 따라해보시면 도움이 많이 됩니다 :)

1. 일단, 플러그인을 먼저 설치해봅시다.

버블 좌측의 탭에서 Plugin탭을 클릭한 후, 우측 상단의 +Add plugins 을 클릭합니다.

검색창에 Orchestra를 입력하고, Install해줍니다. (created by Zeroqode)

2. Element 배치

먼저, 리피팅 그룹을 생성하고, 리피팅 그룹에 표시해 줄 데이터 리스트를 지정해준 후 하단에 Button을 배치해줍시다.

이때, App data에서 실제로 표시될 예시 데이터를 꼭 만들어줍시다!

오케스트라를 설치하면 디자인탭의 Visual element 탭에  Musicians과 Maestro가 생겨나는데요.

Musicians는 워크플로우를 작동시킬 리피팅 그룹 첫번째 셀 내부에, Maestro는 리피팅 그룹 외부에 배치해줍니다.

이 때 두 개 Element의 위치를 주의하세요!

Maestro > 리피팅 그룹 외부
Musicians > 리피팅 그룹 셀 내부

3. 워크플로우 3단계 설정

저는 리피팅 그룹에 뜬 상품 데이터에 수량을 각각 입력해주고, 오케스트라가 돌면서 변경한 상품 수량이 각 셀의 상품 데이터에 저장되도록 로직을 설계하려고 하는데요, 이 때에 워크플로우를 어떻게 설정할 지 보겠습니다.

오케스트라 실행을 위해서는 총 세 단계의 워크플로우가 필요합니다.

1단계 : Musicians-Initialize

먼저 실행할 Musicians들에게 이름을 부여해야 합니다.

워크플로우 탭에 들어가, “Click here to add an event…” 를 누르고 “Elements”탭을 호버해줍니다. ”A Musicians Revealed”를 선택! (Musician들이 보일 때)

선택 후 “Element”에 Initialize할 Musicians를 선택해줍니다.

Event를 추가 했다면, 다음은 Action을 추가해줍니다.

Action검색에 Musicians를 검색한 후 “Initialize musicians a Musicians” 를 선택!

여기서도 Initialize 할 뮤지션을 선택해줍니다.

자 이제 이부분이 중요한데요, 명령 받을 이름을 지어주는 겁니다. ”Musicians class”에 이름을 입력해주시면 됩니다.

저는 ‘piano’로 해볼게요.

2단계 : Action 설정

다음은 2단계입니다.

이제 어떤 연주를 할지 설정을 해줄건데요.

이벤트추가 버튼을 눌러주고 “Elements” 탭에서 “A Musicians Will run this workflow inside each cell”을 선택!

여기서도 실행할 Musicians들을 “Element”에 설정해줍니다.

이제 어떤 액션을 할것인지 설정해주면 되는데요.

저는 Musicians가 들어가있는 리피팅 그룹의 현재 셀의 상품 을 바꾸는 것으로 Action을 설정했습니다.

자 “2단계:Action 설정” 까지 완료되었습니다.

3단계 : 트리거 설정

이제 3단계입니다.

언제 이 작업을 할지 Trigger를 설정해주면 되는데요!

실행할 저장 버튼에서 Add workflow를 눌러 Event를 추가해줍니다.

이후 Action에서 Trigger를 검색해 “Trigger musicians under a Maestro”를 선택!

이 액션 안에서 설정해야하는 것은 아래와 같습니다.

1. Element : 실행할 마에스트로
2. Class to trigger : 실행할 Musicians들의 이름
3. Cell: 실행할 리피팅 그룹의 Cell

1. Element: 리피팅 그룹 바깥에 두었던 Maestro(지휘자)를 선택 (Maestro A)
2. Class to Trigger : 1단계에서 부여했던이름 (piano)
3. Cell : Cell은 4개의 인풋창이 있는데요

• (Single cell) Cell position to trigger : 하나의 셀에만 실행하는 경우 몇 번째 셀에 실행할지 숫자값을 넣어주면 됩니다.
• (Multiple cells) Trigger multiple cells : 여러개의 셀에 실행할 경우 yes 아닌경우 no를 입력해주면 됩니다.
• (Multiple cells) Cell position list : 어떤 셀에서 실행할지 숫자리스트를 넣어주시면 됩니다. ex) 1,3,4
• (All Cells) Trigger every cell: 모든 셀에서 실행할 경우 yes 아닌경우 no를 입력해주시면 됩니다.

지금같은 경우 모든 셀에 실행하면 되므로 (All Cells) Trigger every cell을 “yes”로 설정해두겠습니다.

자! 이제 3단계 까지 모든 준비가 완료 되었습니다.

한번 실행 해볼까요?

현재는 이름 옆에 있는 수량은 모두 0입니다.

수량 인풋에 값을 모두 넣어주고 저장을 눌러주세요.

짜잔! 수량이 모두 인풋값으로 바뀌었습니다.

이제 필수 기능 설정은 모두 완료되었는데요.

추가 기능 : 종료 트리거

기능을 구현하기 위한 필수적 단계는 3단계지만, 사실 추가 기능이 하나 더 존재합니다.

바로 “A Maestro Musicians finished” Event 인데요.

이 Event는 Musicians가 작업을 모두 완료하면 자동으로 트리거 되는 Event입니다.

저장 후 다른 페이지로 이동하거나 하고싶을 때 사용하면 되는데요.

이런식으로 Musicians가 작업을 모두 완료 한후 페이지 이동을 설정할 수 있습니다.

이제 당신도 Orchestra 마스터!

‍

주의사항! (예외 상황, 오류가 발생하는 상황 등)

예외 상황

만약 뮤지션이 들어있는 리피팅 그룹의 Data source가 비어있거나, 실질 데이터가 Empty 상태라면, 페이지를 프리뷰했을 때 로딩이 제대로 되지 않습니다. 상단에 로딩바가 계속 떠있는 문제가 발생하는데요. 이는 오케스트라가 실제 데이터가 담겨져있는 리피팅 그룹에서만 Initialize가 가능하기에 발생하는 문제입니다. 이 점을 고려해서 페이지 로드 당시에 리피팅 그룹에 들어갈 실제 데이터(임시)를 적어도 1개 이상 만들어줘야합니다.

이전에 진행했던 프로젝트로 예를 들어 볼게요. 인풋창에 입력하는 갯수만큼 데이터 생성, 생성한 데이터를 리피팅 그룹에 띄우고, 해당 데이터의 특정 정보를 각 셀에서 수정한 다음, 하단의 완료버튼을 눌러서 변경된 정보가 저장되게 하는 로직을 구현해야되는 상황이 있었는데요. 여기서 문제는, 리피팅 그룹 각 셀에서 워크플로우를 실행하려면 페이지가 로드되었을 때 리피팅 그룹에 들어가있는 실제 데이터가 있어야만 Initialize가 되지만 (페이지가 정상적으로 로드되지만), 제가 구현하려고 했던 로직은 초기에 데이터가 없는 상태에서 유저가 입력하는 갯수대로 데이터가 생성되는 방식이었다는 것입니다. 어찌보면 두 작업은 함께 구현할 수 없다고 생각되긴 하지만, 아래의 방법으로 문제를 해결할 수 있었습니다.

페이지가 로드되었을 때, 임시 데이터를 하나 생성해서 리피팅 그룹에 1개의 실제 데이터가 들어가있도록 하고, 사용자가 인풋창에 만들 데이터의 개수를 입력했을 때, 개수만큼 데이터를 생성하기 직전에 임시로 만들었던 데이터 1개를 삭제하는 것입니다. 다른 오류 없이 원하는대로 구현하기 위해선 약간의 컨디션을 조금 더 걸어주긴 해야겠지만, 이런 방식으로 두 상황을 절충할 수 있었습니다.

오류가 발생하는 상황

마이너한 일부 경우에서 오류가 생길 때도 있는데요.

예를 들어, 종료 Trigger가 오류가 발생할 때가 있습니다. Musician들이 다 완료한 다음에 발동해야 하는데, 종료 Trigger부터 발동되는 오류가 생긴 것인데요. 경험해 본 결과, 그럴 때는 다 지우고 다시 하는 방법밖에 없었습니다.

추가 사항

추가적으로, 마에스트로와 뮤지션을 Invisible하게 설정하면 Initialize 자체가 되지 않는 경우도 있으니 엘리먼트 사이즈를 최대한 작게 조절하고 Visible 상태를 유지하는 것이 좋습니다!

버블을 더 알고 싶다면?

오늘은 Bubble.io의 Orchestra 플러그인에 대해 알아봤습니다. 리피팅 그룹 안에 있는 리스트들을 하나하나 바꾸는 것이 번거로운데, 그럴 때 큰 도움이 되는 플러그인이 Orchestra인데요.

실제 작업을 하다보면 거의 대부분의 프로젝트에 사용되는 플러그인인만큼, 이 포스팅을 통해 오케스트라를 알고 자유자재로 사용하신다면 훨씬 많은 작업을 더 간편하게 구현하실 수 있을 겁니다!

Orchestra 플러그인 외에도 버블에 대해 더 많이 알고 싶다면, 리트머스와 함께하세요!

↘︎ 더 많은 버블 사용법을 알고 싶다면?
버블 꿀팁 바로 가기

📌 버블 외주 개발 맡기기 전, 3가지만 꼭 확인하세요!

✅ 버블 공식 에이전시인지 확인하세요.

리트머스는 전 세계 337곳 중 12위,

동아시아권에서는 1위입니다 🏆 (25.04.08 기준, 현재 공식 순위 보기)

✅ 버블 공식 자격증이 있는지 체크하세요.

리트머스는 전 세계 약 600명뿐인 버블 공식 자격증 보유자 중

6명의 전문가가 함께합니다 🎖️ (글로벌 TOP 10 규모!)

✅ 유사한 프로젝트 경험이 있는지 꼭 살펴보세요.

리트머스는 SaaS, ERP, AI, 마켓플레이스 등

다양한 웹과 앱을 성공적으로 구축한 경험이 있습니다 💻 (포트폴리오 보기)

버블 개발은 "할 수 있다"보다 "제대로 하는 게" 더 중요합니다.

리트머스가 실력과 경험으로 완성도 높은 결과를 약속드립니다!

언제든지 무료 문의 해보세요 ☺️

문의하러 가기 🚀