본문 바로가기
버블 개발/중급

26. Version Control (중급): 버블의 버전관리 시스템, git 처럼 관리하자, 브랜치 관리, 핫 픽스(hot fix) 배포, 세이브 포인트 관리

by 스타트업 사업가 마르코 2023. 7. 3.
이 섹션에서는 버블의 버전 제어 시스템에 대해 다룹니다.

 

기본적으로 애플리케이션은 개발 및 라이브라는 두 가지 개별 환경으로 구성됩니다.

 

  • 라이브(Live) 되고 있는 앱을 변경하지 않고 앱을 계속 개발할 수 있도록 병렬로 존재합니다. 개발 환경의 변경이 완료되면 배포(인터넷에)하여 라이브로 푸시(Push)할 수 있습니다.

 

버블의 버젼관리 시스템
버블의 버젼관리 시스템

 

(1) 버블 버전관리 시스템의 특징

1. 두 환경의 데이터베이스는 독립적으로 완전히 분리되어 있습니다.

2. 라이브의 데이터베이스는 읽기 전용이며 개발환경의 데이터베이스는 모두 편집 가능합니다.

  • 앱을 배포하고 활성 사용자가 있으면 개발환경에서 새 기능을 빌드, 앱을 유지 관리하고, 사용자를 방해하지 않고 테스트할 수 있습니다.

3. 앱이 확장되기 시작하면 거기에서 수행하는 모든 변경사항과 업데이트를 추적하는 것이 중요합니다.

  • 에러 방지를 위해서 별도의 팀에서 개발 중인 두 개 이상의 주요 새 기능과 같이 한 번에 여러 개의 더 큰 업데이트를 작업해야 할 수도 있습니다.

4. Bubble의 버전 제어 시스템을 사용하면 프로젝트 개발을 독립적인 부분으로 나눌 수 있습니다.

  • 프로젝트에 액세스 할 수 있는 여러 편집자들은 다른 부분에 영향을 주지 않고 앱의 한 부분을 계속해서 개발할 수 있습니다.
  • 이를 통해 여러 작업 스트림을 동시에 진행하고 각 작업이 개발에서 테스트, 배포로 진행될 때 변경 사항을 파악하는 데 도움이 됩니다.

 

현재 유료요금제에서 버전관리가 가능하며 상위요금제로 갈수록 관리에 대한 다양한 기능 제공

 

(2) 버전의 환경 및 브랜치(Branch)

1. 환경

배포된 모든 Bubble 애플리케이션은 두 가지 환경으로 구성됩니다.

 

1) 개발환경

  • 개발 환경을 사용하면 앱을 배포할 때의 모습 그대로 앱을 개발하고 미리 볼 수 있습니다.
  • 개발 환경에서 분기의 변경 사항을 테스트할 때 개발 데이터베이스는 데이터 탭으로 이동하고 개발 데이터베이스로 전환하여 볼 수 있는 테스트 데이터로 채워집니다.

 

2) 라이브환경

  • 라이브 환경에는 읽기 전용인 라이브 앱이 포함되어 있습니다.
  • 사용자가 라이브 앱과 상호 작용할 때 라이브 데이터베이스는 라이브 데이터로 채워지며 데이터 탭으로 이동하고 라이브 데이터베이스로 전환을 클릭하여 라이브 데이터베이스로 전환하여 볼 수 있습니다.

 

이 두 환경은 앱 개발을 계속할 수 있는 안전하고 예측 가능한 방법을 제공합니다.
이러한 변경사항을 특별히 Live에 배포하지 않는 한 라이브 사용자는 앱이나 데이터의 변경사항을 알아차리지 못할 것입니다.

 

2. 브랜치 (Branch)

 

브랜치(Branch)는 독립적으로 개발할 수 있는 앱의 독립적인 복사본입니다.

 

  • 두 개의 셀이 분할되는 것과 같이 앱을 두 개의 복사본으로 분할하여 브랜치(Branch)의 생성을 볼 수 있습니다. 세포는 처음에는 유전적으로 동일한 클론이지만 서로 독립적으로 계속 진화할 수 있습니다.

 

두 환경(개발 및 라이브) 각각에서 새 브랜치(Branch)가 자동으로 설정됩니다.
  • 라이브 환경은 앱의 읽기 전용 브랜치(Branch)입니다. 라이브 데이터베이스와 함께 라이브 환경의 일부입니다.
  • Main 분기는 앱이 배포되기 전에 개발되고 테스트되는 곳입니다. Main분기는 개발 환경에 있습니다. 이것은 단독 개발자 또는 소규모 업데이트가 있는 프로젝트에 종종 충분한 기본 버전 제어 설정입니다.

 

버전관리 종류
버전관리 종류

 

프리미엄 버전관리는 두 개의 기본 브랜치인 Main 및 Live 간의 관계를 발전시켜서 관리합니다.
  • 프리미엄을 사용하면 프로젝트를 처리하고 구성하는 새로운 방법으로 개발자의 팀을 강화할 수 있는 다양한 고급 브랜치 기능을 잠금 해제할 수 있습니다.
  • 예를 들어 프리미엄에는 Main에서 사용자 지정 브랜치를 만들고 , 필요에 따라 브랜치를 병합하거나 동기화하고, Live에서 특별한 핫픽스 브랜치를 만드는 기능이 제공됩니다.

 

: 기본 및 프리미엄 버전 제어를 제공하는 앱 계획에 대한 자세한 내용은 아래 표를 참조하십시오.

 

프리미엄 버전관리 가능 요금제
프리미엄 버전관리 가능 요금제

 

3. 환경과 브랜치(Branch)의 차이점

 

1) 환경

  • 개발 및 라이브의 두 가지 환경만 있습니다.
  • 환경에는 별도의 데이터베이스가 있습니다.
  • 환경을 생성하거나 삭제할 수 없습니다.

 

2) 브랜치(Branch)

  • 브랜치(Branch)는 환경 하위에 존재합니다.
  • 라이브 브랜치(Branch)는 하나만 있을 수 있지만 개발 브랜치(Branch)는 여러 개 있을 수 있습니다.
  • 라이브 브랜치(Branch)에는 자체 데이터베이스가 있으며 개발 환경의 모든 브랜치(Branch)는 하나의 데이터베이스를 공유합니다.
  • 상위 계층 계획에는 Live에서 분리되지만 개발 데이터베이스를 사용하는 핫픽스 브랜치(Branch)도 있습니다.

 

(3) 버전관리 시스템 접속

메인 에디트 페널의 우측 상단을 살펴보면 현재 접속하고 있는 버전의 이름을 나타내고 있습니다. 그 이름을 클릭하면 환경, 브랜치를 변경할 수 있는 페널이 열립니다.

우측 상단의 환경, 브랜치
우측 상단의 환경, 브랜치

(4) 커스텀 브랜치(Branch)

1. 커스텀 브랜치(Branch)의 의미

기본 버전 제어를 사용하면 기본 Main브랜치가 유일한 개발 브랜치입니다.
  • 그러므로 변경할 수 있는 유일한 분기입니다.
  • 변경사항을 Live에 배포하기 전에 Main 브랜치(Branch)에서 변경 사항을 빌드하고 테스트합니다.

 

  • 유료의 상위 요금계획에서는 프리미엄 버전 관리에 접속할 수 있으므로 앱의 특정 부분에서 독립적으로 작업할 사용자 지정 브랜치(Branch)를 만들 수 있습니다. 사용 가능한 사용자 지정 브랜치(Branch)의 총 수는 앱 요금계획에 따라 다릅니다.

 

사용자 지정 브랜치(Branch)를 생성할 수 있으므로 Main에 대해 다르게 생각해야 합니다.

 

  • 이전에는 Main이 변경할 수 있는 유일한 브랜치(Branch)였으므로 동일한 브랜치(Branch)에서 모두 편집하고 배포해야 했습니다. 이제 작업에 대한 사용자 지정 분기를 만들 수 있으므로 Main은 배포용으로만 유지되어야 합니다.

 

  • 일반적으로 배포를 위해 최상위 브랜치(Branch)를 유지하는 것이 프로젝트 구성을 유지하는 가장 좋은 방법입니다.
  • 탐색하려는 새로운 변경사항이나 기능에 대해 각 작업에 대한 사용자 지정 브랜치(Branch)를 만들 수 있습니다.
  • 사용자 지정 브랜치(Branch)의 이 계층 구조가 더 깊어질수록 빌드 및 테스트에 더 집중하게 됩니다. 그리고 테스트를 마치면 원하는 모든 변경사항이 Main에 통합되고 배포 준비가 될 때까지 변경 사항을 계층 백업으로 병합합니다.

 

2. 브랜치(Branch) 이름 및 고유 ID

 

새 브랜치(Branch)를 만들 때 제공한 이름은 버전 제어 대시보드에서 레이블로 사용됩니다. 
Bubble은 또한 브랜치(Branch)에 대한 고유 ID를 생성합니다.

 

참고:

  • 지점의 이름과 고유 ID는 서로 독립적이며 일치하지 않을 수 있습니다.
  • 고유 ID는 영구적이며 브랜치를 삭제해도 재사용되지 않습니다.
  • 앱을 preview로 미리 볼 때 URL에 표시되고 그 형태는 "version-[고유한 ID]"로 나타나고 만약 버블 에디터에서 보면 "version=[고 유한 ID]" 형태로 URL에 표시됩니다.
    • URL로 특정 브랜치를 참조하려면 브랜치 ID를 사용하십시오.

 

3. 커스텀 브랜치 만들기 (Cusom Branch)

브랜치(Branch)들은 브랜치(Branch)가 부모-자식 관계를 형성하는 나무와 같은 구조로 구성됩니다.

 

  • 생성한 첫 번째 사용자 지정 브랜치(Branch)는 기본 브랜치(Branch)를 복제하고 하위 브랜치(Branch)가 됩니다.
  • 그런 다음 해당 하위 브랜치(Branch)를 계속 개발하고 서로 다른 방향으로 발전함에 따라 두 버전이 달라지는 것을 볼 수 있습니다.
  • 브랜치(Branch)는 다른 브랜치(Branch)에서 파생되어 필요한 만큼 많은 계층의 부모-자식 관계를 생성할 수 있습니다.
  • 이렇게 하면 적합하다고 생각되는 프로젝트의 모든 부분을 분리할 수 있으므로 앱 개발에 대한 높은 수준의 제어가 가능합니다.

커스텀 브랜치 만들기
커스텀 브랜치 만들기

(5) 브랜치 병합 ( Branch Merge )

브랜치를 병합하면 앱의 한 브랜치에서 변경한 사항을 다른 브랜치에 추가할 수 있습니다.
  • 하위 브랜치(Branch)에서 상위 브랜치(Branch)로, 상위 브랜치(Branch)에서 하위 브랜치(Branch)로 또는 한 형제 브랜치(Branch)에서 다른 브랜치(Branch)로 변경 사항을 병합할 수 있습니다.

 

계층 구조의 위치에 관계없이 병합은 한 브랜치(Branch)에서 생성된 변경 사항을 다른 브랜치(Branch)에 통합합니다.

  • 궁극적으로 한 브랜치(Branch)에서 다른 브랜치(Branch)로 모든 작은 변경 사항을 복사하여 붙여 넣는 번거로움을 줄여주는 강력한 기능입니다. 그리고 Bubble은 전체 병합 프로세스를 안내하는 직관적인 단계별 흐름을 제공합니다.

 

다음은 자식 브랜치(Branch)에서 부모 브랜치로 변경 사항을 병합하는 예를 살펴보겠습니다.

 

1단계: 지점 선택

  • 병합을 시작하기 전에 기본 브랜치(Branch)로 이동하십시오.
  • 그런 다음 병합을 시작할 때 병합 흐름의 첫 번째 단계는 통합하려는 변경 사항이 포함된 소스 브랜치(Branch)를 선택하는 것입니다.
  • Bubble은 병합이 수행되기 전과 후에 기본 브랜치(Branch)에 자동 저장점을 생성합니다.

 

2단계: 변경사항 검토

  • 병합할 브랜치(Branch)를 선택한 후의 다음 단계는 충돌하지 않는 변경 사항을 미리 보고 확인하는 것입니다. 버블은 이러한 변경 사항을 페이지별로 그룹화하여 나열합니다.

브랜치 병합 예시
브랜치 병합 예시

  • 이 예시에서는 price-change라는 브랜치(Branch)의 변경 사항을 병합하고 있으며 Bubble은 변경 사항이 있음을 알려줍니다. 변경사항을 클릭하면 변경된 매개변수로 바로 이동합니다(관련 요소 또는 작업 흐름이 삭제된 경우 제외)
  • 이렇게 하면 두 브랜치(Branch) 간에 충돌을 일으키지 않는 변경 사항을 검토하여 팀이 수행한 작업을 파악하고 충돌 해결로 이동하기 전에 이러한 변경 사항을 확인할 수 있습니다.

브랜치 볍합 예시2
브랜치 볍합 예시2

 

3단계: 충돌 해결

경우에 따라 한 브랜치(Branch)에서 요소(element)나 워크플로(workflow)가 변경되고 동일한 요소(element)나 워크플로(workflow)가 다른 브랜치(Branch)에서 다르게 변경됩니다.

 

:버튼 디자인이라는 가격 책정 페이지의 하위 브랜치(Branch)를 설정하고 다양한 버튼 스타일을 실험하고 있다고 가정해 보겠습니다.

  1. 기본 브랜치(Branch)(버튼 디자인)에서 버튼의 색상은 #0018 CC(파란색)입니다.
  2. 소스 브랜치(Branch)(가격 책정 페이지)에서 버튼 색상은 #229 A44(녹색)입니다.

브랜치(Branch) 1과 2를 병합하려는 경우 충돌이 있는 것처럼 보입니다. 버튼의 색상은 무엇이어야 합니까?

 

  • Bubble은 이와 같은 충돌을 인식하고 페이지별로 그룹화된 목록으로 제시합니다. 왼쪽 열에는 기본 브랜치(Branch)가 표시되고 오른쪽 열에는 소스 브랜치(Branch)가 표시됩니다.
  • 각 행에는 각 브랜치(Branch)에서 변경 사항이 어떻게 보이는지 검토할 수 있는 확인란이 있습니다.

 

  • 아래 애니메이션에서 각 브랜치(Branch)의 상자를 선택하여 충돌하는 변경 사항을 검토할 수 있음을 알 수 있습니다.
  • 브랜치(Branch) 자체 옆에 있는 상자를 선택하면 해당 페이지의 모든 충돌을 하나의 브랜치(Branch)로 자동 전환할 수 있습니다.
  • 변경 사항을 하나씩 승인하려면 각 행의 확인란을 사용할 수 있습니다. 목록의 각 페이지는 접을 수 있습니다.

 

병합 충돌 설정
병합 충돌 설정

 

  • 이후 병합을 완료할 준비가 되었습니다. X 선택 확인 및 병합 버튼을 클릭합니다.
  • Bubble이 병합을 시작하기 전에 병합을 진행할지 확인하는 마지막 시간을 묻는 메시지가 표시됩니다. 병합 취소 및 병합 종료 버튼을 사용하여 병합을 쉽게 실행 취소할 수 있습니다.

 

(6) 라이브 및 메인 브랜치에서 동기화

앱의 서로 다른 브랜치(Branch)에서 작업하는 여러 팀이 있는 경우 개발 환경의 일부 브랜치(Branch)가 아직 개발 중인 동안 라이브 브랜치(Branch)가 업데이트되는 인스턴스가 있을 수 있습니다.

 

  • Live에 핫픽스 브랜치를 배포하는 경우에도 마찬가지입니다.
  • 이러한 경우 라이브 브랜치(Branch)에서 작업 중인 브랜치(Branch)로 변경사항을 병합하여 라이브 앱과 일관성을 유지하는 것이 가장 좋습니다.

Bubble은 현재 브랜치(Branch)가 Live와 동기화되지 않았다는 경고를 표시할 수 있으며 동기화 버튼을 클릭하여 현재 작업 중인 브랜치(Branch)를 업데이트할 수 있습니다.

 

(7) 핫픽스 브랜치(Branch)

핫픽스 브랜치(Branch)는 Live에 직접 배포할 수 있는 Main 이외의 유일한 브랜치입니다.
이 브랜치(Branch)의 목적은 이름에서 알 수 있듯이 신속하게 해결할 수 있는 긴급한 문제를 해결하는 것입니다.

 

예를 들어 중요한 고객 문의 양식의 제출 버튼이 작동하지 않고 즉시 수정해야 한다는 사실을 발견하고 핫픽스 (Branch)를 설정하고 필요한 변경을 수행한 후 즉시 라이브로 배포할 수 있습니다.

 

이런 기능은 Main이 아직 게시할 준비가 되지 않은 변경 사항을 포함할 수 있기 때문에 유용합니다.

 

1. 핫픽스 브랜치 속성

핫픽스 브랜치는 다음과 같은 속성이 있습니다.

  • 하나의 핫픽스 브랜치만 가질 수 있으며 하나를 생성할 때만 존재합니다.
  • 핫픽스 브랜치는 개발 데이터베이스에 연결됩니다.
  • 핫픽스 브랜치가 존재하는 동안 다른 브랜치에 접근할 수 있지만 메인 브랜치에서 배포할 수는 없습니다.
  • 핫픽스 분기에서 라이브 분기로 병합하면 핫픽스 분기가 삭제됩니다.

 

2. 핫픽스 브랜치 만들기

핫픽스 분기를 만들려면 아래 지침을 따르십시오.

  1. 먼저 라이브 환경으로 이동합니다.
  2. 핫픽스 만들기를 클릭합니다.

 

3. 핫픽스 배포

앱에 필요한 변경을 수행하면 핫픽스 브랜치를 Live에 배포할 준비가 된 것입니다.

 

  • 이 프로세스를 시작하려면 'Deploy to Live' 버튼을 클릭하십시오.
  • 핫픽스 분기는 라이브 분기의 하위 항목으로 표시됩니다.
  • 핫픽스 브랜치를 배포하면 개발 브랜치가 Live와 동기화되지 않게 된다는 점에 유의해야 합니다.

 

모든 것이 최신상태인지 확인하려면 핫픽스 브랜치가 성공적으로 배포된 후 모든 개발 브랜치를 Live와 동기화하는 것이 좋습니다.

 

(8) 브랜치 삭제

브랜치가 더 이상 필요하지 않으면 삭제할 수 있습니다.

 

  • Live에 변경사항을 배포하지 않고 핫픽스 브랜치를 제거하려는 경우가 포함됩니다.
  • 브랜치는 수명이 짧고 최소한의 변경 사항만 포함하는 것이 좋습니다. 브랜치는 정기적으로 생성, 병합 및 삭제되어야 합니다.

 

삭제하려면 다음 단계를 따르세요.

  1. 삭제하려는 브랜치를 활성화합니다.
  2. 지점 이름 옆에 있는 드롭다운 메뉴를 클릭합니다.
  3. 삭제를 클릭하고 확인

 

(9) 세이브포인트

모든 브랜치에서 특정 시점에 해당 브랜치의 스냅숏을 생성하는 세이브포인트(savepoint)를 생성할 수 있습니다.

 

다음과 같은 경우 세이브포인트(savepoint : 저장점)가 자동으로 생성됩니다.

  • 라이브에 배포
  • 병합을 시작
  • 병합을 완료
  • 병합 취소
  • 다른 브랜치로 가져올 때
  • 브랜치 복원하기 직전

또한 특정 브랜치에서 변경한 사항을 롤백해야 하는 경우 필요한 만큼 사용자정의 세이브포인트(savepoint : 저장점)를 생성할 수 있습니다.

 

세이브포인트(savepoint : 저장점)을 만들려면 저장하려는 브랜치를 열고 기록 탭을 클릭한 다음 세이브포인트(savepoint ) 만들기를 클릭합니다. 분기 패널의 오른쪽 상단 모서리 메뉴에서도 접속할 수 있습니다. 설명을 추가하라는 메시지가 표시되며 생성 이유에 대한 정보를 제공하는 것이 좋습니다.

 

1. 브랜치를 라이브로 재설정

브랜치(Branch)를 라이브로 재설정할 수도 있습니다.

 

이렇게 하면 브랜치(Branch)의 모든 항목이 라이브 브랜치(Branch)의 복제본으로 대체됩니다. 이는 브랜치(Branch)에서 다시 시작해야 하지만 새 브랜치(Branch)를 생성할 준비가 되지 않은 Main을 변경한 경우에 유용합니다.

 

2. 브랜치(Branch) 복원

작업을 되돌려야 하는 경우 언제든지 브랜치를 세이브포인트(savepoint : 저장점)로 복원할 수 있습니다.

 

세이브포인트(savepoint : 저장점)는 지정된 지점에서 자동으로 생성되지만 필요한 만큼 수동 세이브포인트(savepoint : 저장점)를 만들고 브랜치를 해당 상태로 복원할 수도 있습니다.

 

브랜치를 복원하려면:

 

  • 버전 제어 패널의 히스토리 탭으로 이동합니다.
  • 복원하려는 저장점이 있는 라디오 상자를 선택합니다.
  • 이 저장점으로 복원을 클릭합니다.