100. 앱 테스트와 디버깅 (중급): 테스트와 디버깅 조언, 버블 안전모드 사용

이 섹션에서는 앱 테스트 및 디버깅에 대한 일반적인 조언을 다룹니다.

 

(1) 용어 정의

먼저, 실제 사용자를 위해 앱을 개발할 때 사용되는 용어에 대해 알아보겠습니다.

 

1. 테스트

애플리케이션의 다양한 단계를 시도하여 예상대로 작동하는지 확인하는 프로세스입니다.

• 뭔가 만약 문제가 있다면 테스트를 통해 이를 발견할 수 있습니다.
• 예상하지 못한 동작을 관찰하면 디버깅이 완료됩니다.
• 문제의 근본 원인을 파악하여 문제를 해결하는 과정입니다.

이 소개 가이드에서는 Bubble이 제공하는 도구를 살펴보기 전에 앱을 테스트하고 디버깅하는 방법에 대한 몇 가지 일반적인 조언을 제공합니다.

 

2. 개발 환경 및 라이브 환경

모든 Bubble 앱은 개발 및 라이브라는 두 가지 환경으로 구성됩니다.

 

1) 개발

• 당신 및 당신의 팀이 함께 작업하여 완성된 앱이 실제 어떻게 보일지 정확하게 확인할 수 있는 완전한 기능을 갖춘 앱 버전입니다.

 

2) Live

: 라이브환경은 사용자들이 보는 앱입니다.

• 두 환경에는 서로 완전히 독립적으로 작동하는 데이터베이스가 있습니다. 즉, 개발 환경에서는 라이브 앱에 영향을 주지 않는 데이터베이스 변경을 수행할 수 있으므로 필요한 방식으로 실험하기에 완전히 안전한 환경이 됩니다.
• 앱을 라이브에 배포하기 전에 항상 완전히 테스트 및 디버깅을 완료하는 것을 목표로 해야 합니다.

 

(2) 테스트

1. 테스트를 계획하고 여러 부분으로 나누기

• 테스트는 사용자처럼 앱을 사용하고 모든 페이지와 기능을 체계적으로 작업하여 문제를 식별하는 것입니다.
• 이 가이드에서는 체계적인 접근 방식이 어떤 것인지 설명하지는 않지만(사람마다 작동 방식이 다르기 때문에) 테스트 구성 방법에 유의하시기 바랍니다.

2. 메모

• 무언가를 테스트하고 있는데 다른 곳에서 문제가 발견되면 기록해 두고 현재 작업에 집중하세요.
• 초점을 한 곳에서 다른 곳으로 옮기는 것은 초점을 놓치기 쉬운 방법이므로 계획을 고수하고 눈에 보이는 다른 사항을 기록해 두고, 집중하고 있는 테스트가 끝나고 메모했던 테스트를 다시 보도록 합니다.

3. 테스트 데이터 추가

• 데이터가 없는 앱과 데이터가 많은 앱은 매우 다르게 동작할 수 있습니다. 테스트 데이터를 추가하면 디자인, 성능 및 보안과 관련된 문제를 식별하는 데 도움이 될 수 있습니다.

4. 다양한 화면 해상도 및 장치에서 테스트

• 앱을 다양한 화면과 기기에서 사용하려는 경우 다양한 해상도에서 테스트하고 연결 속도와 CPU를 제한하는 것도 좋은 습관입니다. Chrome 개발자 도구는 이러한 모든 작업을 수행할 수 있는 매우 유용한 장치 모드를 제공합니다.

5. 다른 사용자로 테스트

• 개인 정보 보호 규칙 및 조건을 도입하면 사용자는 앱을 다르게 경험하기 시작할 것입니다. 일부 사용자는 데이터베이스와 앱의 특정 부분에 액세스 할 수 있지만 다른 사용자는 그렇지 않을 수 있습니다. 이러한 경우에는 다른 사용자로서 앱을 테스트하는 습관을 들이는 것이 유용합니다.
• 예를 들어 user 및 admin이라는 두 가지 사용자 유형이 있는 경우 하나의 액세스 수준이 다른 것과 다를 가능성이 높으며 둘 중 하나로만 테스트하면 문제나 불일치를 놓칠 수 있습니다.

6. 다른 사용자로서 앱을 테스트하는 방법

• 특정 사용자로 앱을 사용하려면 내장된 데이터베이스 편집기에서 해당 사용자를 검색하고 Run as(다음 계정으로 실행)을 클릭하면 됩니다.

Run as 사용 예시

• Run as(다음 계정으로 실행) 기능을 사용하면 자격 증명을 알 필요 없이 다른 사용자로서 앱을 쉽게 테스트할 수 있습니다.

 

(3) 디버깅

1. 동일하게 재현할 수 있는지 확인하세요

• 앱을 계속 테스트하다 보면 가끔씩 예상치 못한 문제를 발견하게 될 것입니다. 걱정하지 마십시오. 숙련된 개발자에게도 이런 문제가 발생합니다!
• 디버깅을 시작할 때 중요한 초기 단계는 문제를 재현하기 위한 일관되고 예측 가능한 방법을 설정하는 것입니다. 여기에는 실제로 단계를 다시 추적하고 여러 테스트를 실행하여 문제가 매번 일관되게 동일하게 나타나는지 확인하는 작업이 포함됩니다.
• 이를 통해 문제를 확실히 해결하기 위해 먼저 문제를 확실히 파악할 수 있습니다.

2. 체계적으로 문제를 파악하기 위해 분해하세요

• 발견한 각 문제에는 두 가지 이상의 원인이 있을 수 있습니다. 그것을 식별할 때, 한 번에 하나씩 집중하십시오. 다음 단계로 넘어가기 전에 현재 작업 중인 원인이 해결되었는지 테스트하는 방법을 찾는 것이 유용할 수 있습니다. 다시 한번 말씀드리지만, 아무것도 놓치지 않도록 메모해 두세요.

3. 개인 정보 보호 규칙을 기억하세요

• 개인 정보 보호 규칙으로 인해 데이터를 사용할 수 없는 것과 관련된 많은 문제가 있습니다. 모든 요소(요소, 작업 흐름 및 조건)에 적용되므로 관련 데이터 유형에 대한 규칙을 확인하는 것이 좋습니다.

4. 정보를 수집하세요

• 사용자 중 한 명이 오류를 보고한 경우 오류가 발생한 상황에 대해 최대한 많은 정보를 수집해야 합니다.
• 어떤 사용자인가요?
• 어떤 종류의 기기와 브라우저를 사용하고 있나요?
• 그들은 어떤 종류의 광고 차단기나 스크립트 차단기를 사용하고 있습니까?
• 문제를 생성하기 위해 취한 정확한 단계는 무엇입니까?
• 안정적으로 재현할 수 있습니까? 혹시 단순한 인터넷 연결 상태가 좋지 않거나 기타 외부 원인 때문일까요?

5. 커뮤니티에 다가가세요

• Bubble은 문제 해결에 도움이 되는 커뮤니티를 보유하고 있습니다. 문제에 봉착한 경우 주저하지 말고 도움을 요청하세요! Bubble 포럼에서 문제를 공유하거나 , Bubble 팀에 문의하거나 , 전문가 코치 중 한 명을 고용하여 문제 해결을 도와주세요.

6. 휴식을 취하세요

• 때때로 문제는 밖에서 산책을 하거나, 샤워를 하거나, 소파에 누워서 해결되는 것이 가장 좋습니다. 다른 경우에는 화면으로 돌아가 검색을 계속하기 전에 마음을 새롭게 할 시간이 필요할 수도 있습니다.
• 두뇌도 근육이므로 세션 사이에 휴식이 필요합니다!

(4) 테스트 및 디버깅 도구

Bubble은 문제를 디버깅하는 두 가지 방법을 제공하며 각 방법은 특정 목적에 사용됩니다.

 

1. 디버거 [요소(element) 및 워크플로에서 오류가 발생하면 확인]

개발 단계에서 Preview로 앱을 실행할 때 화면 하단에 있는 작은 패널입니다.

디버거를 사용하면 다음을 수행할 수 있습니다.

1. 작업별로 워크플로를 실행하고 각 단계와 관련된 데이터(예: 검색 결과)를 확인
2. 페이지의 요소(element)를 검사하여 속성, 조건 및 관련 데이터를 확인

 

101. 버블 debugger (중급) : 디버거 모드 활성화, 워크플로 검사, 요소 검사

 

2. 서버 로그 [과거 문제 진단]

• 과거 문제를 진단하는 두 번째 도구는 서버 로그입니다.
• 이 기능을 사용하면 workflow에서 발생한 일을 소급, 검토하고 예상치 못한 동작이나 오류가 있는지 확인할 수 있습니다.

 

102. Server Logs 분석 (중급) : 로그 분석 필터, 고급필터 사용, 결과 보기

 

(5) 안전 모드 사용

안전 모드는 앱을 미리 실행해 볼 수 있는 방법으로써 디버깅 목적으로 특정 부분을 비활성화합니다.

• No Custom HTML - 페이지의 HTML 요소를 비활성화합니다.
• No Community plugins - 커뮤니티에서 만든 플러그인을 비활성화합니다.

안전 모드에서 문제가 저절로 해결된다면 플러그인이나 사용자 정의 코드로 인한 문제라는 것을 인지할 수 있습니다.

 

안전 모드를 활성화하는 방법

• 우측 상단의 Preview 버튼을 마우스 커서로 1초 동안 올리고 있거나 누르고 있으면 안전 모드가 드롭다운에 옵션 목록으로 표시됩니다.

안전모드 활성화 방법