1. 프로젝트 개요
Bubble을 활용하여 강의 웹사이트를 제작하는 과정에서 YouTube에 업로드한 강의 영상을 DB에 저장하고 목록을 표시하는 기능을 구현하고 있습니다. 해당 프로젝트는 '노코드 마케터'의 Bubble 웹사이트 제작 영상을 참고하며 진행하고 있으며, 개발 과정에서 발생하는 오류들은 Perplexity 및 14기 버블 단톡방을 활용하여 해결하고 있습니다.
--
동영상을 따라하면서, 추가하고 싶은 기능을 설계해보고 발전시켜가고 있습니다^^;
프로젝트 소개: 선생님과 학생이 학습을 관리할 수 있는 LMS시스템
<설계>
학생이 학습 영상 강의 시청, QnA
선생님이 Quiz출제
학생이 self_Test를 통한 학생 스스로 학습
<기대효과>
학생은 스스로 학습
선생님이 피드백을 수월하게
모바일 애플리케이션의 프로세스를 보여주는 다이어그램
2. 주요 도전 과제 및 해결 과정
(1) Workflow와 DB에서 값 가져와 가공하기
Bubble을 처음 접하면서 가장 어려웠던 부분은 Workflow 설정과 DB에서 값을 가져와 가공하는 과정이었습니다. 영상의 흐름을 따라가며 설정해야 하는 값들이 많아 화면을 놓치는 경우가 있었으며, 일부 편집된 영상에서는 빠진 부분을 스스로 추측하여 해결해야 하는 상황도 있었습니다.
(2) 아직은 생소한 기능들 알아가기. 'option set(데이터베이스를 활용. dropdown할 때 사용했음)', 'custom stats(임시 저장소)', 부모-자식 관계, 'do a search for', 'filtering', 'text값 넣어야 하는데, 리스트 자료형일 때' 등등..
(3) 주요 오류 사례 및 해결 과정
[ 만드는 과정도 길고, 영상에서 없던 부분을 추측하며 삽질하던 부분이었다..😂 ]
🔹 Case 1: Custom States 설정 오류
문제:
특정 클립을 가져오기 위해 **"Current Page's 클래스's 클립 리스트:item #1"**을 사용했으나 오류 발생
참고한 영상에서는 정상적으로 작동하였으나, 실제 구현 시 빨간색 오류 메시지가 발생
해결 과정:
14기 버블 단톡방과 Perplexity를 활용하여 해결 방법을 탐색
Perplexity에서 "데이터 구조를 확인해야 한다"는 조언을 받고 데이터 관계를 점검
DB에서 클립 데이터를 'text'가 아닌 자료형으로 설정해야 한다는 점을 발견
해당 문제를 수정한 후 정상 작동
🔹 Case 2: 필터링 조건 설정 오류
문제:
강의실 레이아웃을 설계하는 과정에서 각 챕터당 소제목이 나타나도록 리피팅 그룹을 중첩하여 구현
필터링을 위해 "챕터 = ~~" 조건을 설정하려 했으나 Bubble의 List filter 옵션에 '=' 연산자가 표시되지 않음
다양한 옵션이있는 웹 페이지의 스크린 샷
문제1> 영상에서는 =연산자가 나오지만, 현재 나의 데이터에서는 선택할 수 있는 옵션이 없어 "문제의 발단"이 시작!! ㅠㅠ
해결 과정:Perplexity를 활용하여 문제를 설명하며 질문 진행
프롬프트 예시: "빨간 사각표시처럼 '챕터 =' 으로 설정하고 싶은데, '=' 연산자가 나타나지 않고 있습니다. DB의 어떤 부분을 확인해야 할까요?"
한국 웹 사이트의 스크린 샷
Perplexity의 답변: "Bubble에서는 데이터 타입에 따라 List filter의 연산자가 다르게 표시되므로 데이터 타입을 확인해야 함"
DB 설정을 점검한 결과, 챕터 필드의 데이터 타입이 올바르게 설정되 지 않아 '=' 연산자가 표시되지 않았음
필드 타입을 수정하여 정상적으로 필터링 가능해짐
버튼을 가리키는 빨간색 화살표가있는 화면 스크린 샷
숫자가 강조된 화면의 스크린 샷
문제1-해결> '클립리스트'를 list로 만드는 것까지는 알겠는데, 너무나 당연하게 text로 설정했던 것이 문제였음..을 발견하고, custom states를 만들었던 'OS 챕터의 리스트형'으로 변경 성공!
<그 후 이어지는 문제가 또 있었으니....>
filter문제라고만 생각했던 것이 위의 데이터 field를 삭제하고 다시 생성하는 과정에서 생긴 일과 맞물려 데이터가 나타나지 않는 사건이 벌어졌다. 😱
중국어와 중국어 텍스트가있는 웹 페이지의 스크린 샷
상황1> 챕터의 목록들이 잘 나옴. but, chapter별 목록이 아닌 전체이므로 filter작업 필요.
비디오를 보여주는 웹 페이지의 스크린 샷
상황2> 또 문제 발생! .. filter작업을 했으나, 아예 목록이 안 보임 ㅜㅜ.
스프레드 시트에 항목 목록을 보여주는 화면
상황3> 해결: DB에서 챕터 부분이 삭제되었 것을 발견! (위의 <문제1-해결>과정 중, '클립리스트'를 'OS 챕터의 리스트형'으로 변경하는 과정에서...)
DB의 캡쳐부분에 값을 입력하여 정상으로 목록 생성 성공 함.
YouTube 비디오의 스크린 샷
상황3 -해결>
(4) 새롭게 알게 된 몇 가지 기능 설정했던 부분도 이미지로 공유해보려 한다.
4-1) DB에 초 단위로 넣었는데, 분초로 바꾸어 data표시 하는 예시
Adobe Adobe Adobe Adobe Adobe Adobe Adobe
4-2) 강의자료 배포 구현. 버블에서는 화일 upload하면 database에서 외부url 주소를 불러오는 방식.웹 페이지의 스크린 샷이있는 웹 페이지의 스크린 샷
4-3) 화면에 QnA를 사용자가 입력하면 alert로 표시하도록 구현함. .. BEP plugin사용
Adobe Adobe Adobe Adobe Adobe의 스크린 샷
4-4) 이미지 upload하면 custom status(임시저장소)를 사용하여 저장하고, x아이콘을 누르면 삭제하도록 구현. ... 데이터를 가져와 minus명령어를 사용하여 해당 내용을 임시저장소에서도 지운다.Adobe Adobe Adobe Adobe Adobe의 스크린 샷
3. 배운 점과 향후 계획
Bubble에서 데이터 구조 설계의 중요성을 다시금 깨닫게 되었으며, 데이터 타입이 잘못 설정되면 Workflow에서 예상치 못한 오류가 발생할 수 있음을 확인했습니다.
영상 play하는 화면을 구현하는데 "한땀한땀 만들어줘야 해요~"라는 그룹장님의 말이 또 한번..^^; 기능들이 방대하고, 아직 익숙치 않아 캡처로 기억 담기 위해 흔적 남겨봅니다.
영상을 참고할 때 편집된 부분이 있을 수 있으므로, Bubble의 공식 문서나 추가 자료를 활용하여 보완하는 습관이 필요하다는 점을 배웠습니다.
향후에는 더 많은 자동화 기능을 추가하고, 강의 콘텐츠 관리 시스템(LMS)을 최적화하는 방향으로 개선해 나갈 계획입니다.
4. 참고 자료
Perplexity AI를 활용한 문제 해결 과정
14기 버블 단톡방/Zoom미팅 에서 받은 피드백
