노코드 툴 버블 bubble.io로 챌린지 앱 유캔두 클론 코딩 강의 - 1강. 뼈대만들기

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

노코드 툴 버블 bubble.io로 챌린지 앱 유캔두 클론 코딩 강의 - 1강. 뼈대만들기

노코드툴 버블(bubble.io)을 활용하여 챌린지 앱 '유캔두'를 클론 코딩하는 이 강의는, 앱 개발의 기본 뼈대 설계부터 시작하는 실용적인 가이드입니다. 심즈의 집 짓기 비유를 통해 초기 설계의 중요성을 강조하며, 메인 화면, 탐색 페이지, 상세 페이지 등 핵심 화면 구성 원리를 명확히 제시합니다. 특히, 글로벌 내비게이션 바(GNB)를 플로팅 그룹으로 구현하고 페이지 간 이동 워크플로우를 설정하는 과정을 직접 따라 하며, 데이터베이스(DB) 구조 설계와 더미 데이터 테스트를 통해 실제 앱 개발의 사이클을 경험할 수 있습니다. 복잡한 디자인보다는 기능 구현에 집중하여 MVP(최소 기능 제품)를 만드는 데 필요한 핵심 역량을 길러주는 강의로, 노코드개발에 입문하는 분들에게 실질적인 도움을 제공합니다.

1. 앱 개발의 기본 원칙: 설계의 중요성

1. 심즈 게임 비유를 통한 설계 강조
   1. 심즈에서 집을 지을 때 방의 크기나 구조를 미리 정해두지 않으면 나중에 변경하기 어렵다는 점을 언급한다.
   2. 실제 집 짓기나 애플리케이션 설계 시에도 이와 동일하게 초기 설계의 중요성을 강조한다.
   3. 거실과 주방이 벽 없이 연결된 구조처럼, 앱 설계에서도 유기적인 연결을 고려해야 함을 시사한다.

2. 클론 코딩할 챌린지 앱 '유캔두' 분석 및 목표 설정

2.1. '유캔두' 앱의 주요 기능 및 화면 구성 파악

1. '유캔두' 앱 소개
   1. 챌린지 앱으로, 다양한 카테고리(물 한 잔씩 마시기 등)의 챌린지를 탐색하고 참여할 수 있다.
   2. 참여 인원, 챌린지 내용, 그리고 인증 시스템 ( 사진 업로드)을 통해 서로 인증하는 방식이다.
   3. 강사는 앱을 직접 사용해보고 이 앱을 예시로 클론 코딩을 진행할 것임을 밝힌다.

1. 핵심 화면 구성
   1. 메인 화면: 앱의 시작점이다.
   2. 탐색 페이지: 카테고리를 통해 챌린지 리스트를 보여주는 화면이다. (리스트 뷰)
   3. 상세 페이지: 특정 챌린지를 클릭했을 때 나오는 상세 정보다.
   4. 대부분의 앱이 메인 → 탐색/검색(리스트 뷰/맵 뷰) → 상세 페이지의 구조를 가진다. (예: 쇼핑몰)

2.2. 클론 코딩의 목표 및 디자인 방향

1. MVP(최소 기능 제품) 개발 목표
   1. '유캔두'는 야나두 팀에서 약 2년간 개발한 앱이므로, 5일 만에 완벽히 카피하는 것은 불가능하다.
   2. 시장성 검증을 위한 MVP 버전 1을 만드는 것을 목표로 한다.
   3. 가장 중요한 기능과 서비스의 한 사이클을 돌려보는 데 집중한다.

1. 디자인에 대한 접근 방식
   1. 디자인 테크닉(배경 스크롤, 아이콘, 폰트, 여백, 색상, 로고 등)은 시간이 많이 소요된다.
   2. 강의에서는 기능 구현에 집중하고, 디자인은 각자 남는 시간이나 수업 외 시간에 다듬는 것을 권장한다.

3. 앱의 기본 뼈대 만들기: 페이지 구성 및 설정

3.1. 메인 페이지 생성 및 기본 설정

1. 기존 작업 초기화
   1. 기존에 작업했던 페이지를 모두 삭제하고 새롭게 시작한다.
   2. 컨트롤 A + Delete 키를 사용하여 한 번에 모든 요소를 지울 수 있다.

1. 새 메인 페이지 생성
   1. Add New Page 기능을 사용하여 빈 페이지를 생성한다.
   2. 페이지 이름은 본인이 알아볼 수 있도록 [본인 이름]-메인 등으로 설정한다.

1. 페이지 세팅
   1. 그리드 앤 보더스(Grid & Borders) 설정
      1. 우상단의 Grid & Borders를 클릭한다.
      2. Show element borders를 체크하여 그룹 등의 투명한 요소의 경계를 볼 수 있게 한다.
      3. On show hideable 체크를 해제한다.
   2. 페이지 너비 설정
      1. 빈 페이지를 클릭하여 페이지 자체 설정을 연다.
      2. Preset page width에서 모바일을 선택한다.
      3. Fixed width 체크를 해제한다.
      4. 페이지 너비가 자동으로 380 픽셀로 맞춰진다. (높이는 신경 쓰지 않아도 된다.)
   3. 이것이 앱의 메인 페이지의 방을 만든 것이다.

3.2. 추가 페이지 구성: 탐색 및 상세 페이지

1. 페이지 구성 전략 논의
   1. 홈 화면 외에 탐색 페이지를 별도의 페이지로 구성할지, 아니면 한 페이지 안에서 탭처럼 그룹을 전환하는 방식으로 구성할지 고민한다.
   2. 별도의 페이지로 구성하는 것이 더 쉬운 방법이다.

1. 탐색 페이지 생성
   1. Add New Page를 통해 별도의 탐색 페이지를 생성한다.
   2. 페이지 이름은 [본인 이름]-Browse 등으로 구별할 수 있게 짓는다.
   3. Clone from에서 기존 홈 화면을 선택하면 설정이 그대로 복사되어 편리하다.

1. 상세 페이지 생성
   1. 마찬가지로 Add New Page를 통해 별도의 상세 페이지를 생성한다.
   2. 페이지 이름은 [본인 이름]-Detail 등으로 설정한다.
   3. 총 세 개의 방(페이지)을 만들어야 한다.

3.3. 페이지 식별을 위한 텍스트 추가 및 모바일 크기 설정

1. 페이지 식별 텍스트 추가
   1. 각 페이지가 비어 있으므로, 페이지 이동 시 현재 어느 페이지에 있는지 알 수 있도록 텍스트(예: '디테일 페이지', '탐색 페이지')를 대충 추가한다.

1. 새 페이지 모바일 크기 설정
   1. 새로 만든 탐색 및 상세 페이지도 메인 페이지와 동일하게 380 픽셀모바일 크기로 설정한다.

4. 글로벌 내비게이션 바(GNB) 구현

4.1. GNB의 개념 및 플로팅 그룹 활용

1. GNB(Global Navigation Bar)의 역할
   1. 앱 하단에 위치한 홈, 랭킹, 두잇, 알림, 나 등의 메뉴 바를 의미한다.
   2. 스크롤해도 항상 화면에 고정되어 떠 있는 속성을 가진다.

1. 플로팅 그룹(Floating Group)으로 GNB 구현
   1. Floating Group 엘리먼트를 사용하여 GNB 영역을 그린다.
   2. Float to 설정을 Bottom으로 하여 화면 가장 하단에 고정되도록 한다.
   3. 플로팅 그룹을 화면 가장 아래에 붙여 배치한다.
   4. (선택 사항) 배경 스타일을 추가하여 그룹이 잘 보이도록 설정할 수 있다.

4.2. GNB 버튼 추가 및 워크플로우 설정

1. GNB 버튼 구성
   1. GNB 플로팅 그룹 안에 4개의 그룹을 추가하여 버튼처럼 활용한다. (알림은 제외)
   2. 버블의 Button 엘리먼트는 커스터마이징이 어려워 거의 사용하지 않고, 대신 그룹(Group)을 버튼처럼 만든다.
   3. 각 그룹 안에 이미지(아이콘)와 텍스트를 넣어 버튼을 구성한다. (예: 홈 아이콘 + '홈' 텍스트)
   4. 텍스트 폰트 크기는 10~12포인트정도로 작게 설정한다.
   5. 아이콘 소스는 Flaticon과 같은 사이트에서 무료로 얻을 수 있다.

1. 추가 페이지 생성 (랭킹, 두잇, 마이 페이지)
   1. GNB 버튼에 연결할 랭킹, 두잇, 마이 페이지를 각각 별도의 페이지로 생성한다.
   2. 각 페이지에도 현재 페이지를 알 수 있는 텍스트를 추가한다.
   3. 생성된 페이지들도 모바일 크기( 380 픽셀)로 설정한다.

1. 페이지 이동 워크플로우 설정
   1. 각 GNB 버튼(그룹)을 클릭했을 때 해당 페이지로 이동하는 워크플로우를 설정한다.
   2. 아이콘이나 텍스트가 아닌, 전체 그룹에 워크플로우를 설정해야 클릭 영역이 넓어진다.
   3. Start workflow를 클릭한 후 Go to page 액션을 추가하고, 이동할 페이지를 선택한다.
   4. 모든 GNB 버튼에 동일하게 워크플로우를 설정한다.
   5. Preview를 통해 GNB가 잘 작동하는지 테스트한다.

4.3. GNB 복사 및 붙여넣기 (Copy with Workflows)

1. GNB 복사 필요성
   1. 각 페이지마다 GNB를 개별적으로 만들면 비효율적이다.
   2. GNB 그룹과 그 안에 설정된 워크플로우를 통째로 복사하여 다른 페이지에 붙여넣는다.

1. 워크플로우 포함 복사
   1. GNB 플로팅 그룹을 선택하고 마우스 오른쪽 클릭 후 Copy with workflows를 선택한다.
   2. 이 기능은 그룹 내의 모든 워크플로우를 함께 복사한다.

1. 다른 페이지에 붙여넣기
   1. 랭킹, 두잇, 마이 페이지 등 GNB가 필요한 각 페이지로 이동한다.
   2. 페이지 빈 공간에 마우스 오른쪽 클릭 후 Paste with workflows를 선택한다.
   3. GNB가 제자리에 정확히 붙여넣어진다.
   4. 각 페이지에서 Preview를 눌러 GNB가 모든 페이지에서 정상 작동하는지 확인한다.

5. 메인 화면 구성: 데이터베이스(DB) 설계 및 더미 데이터 테스트

5.1. 화면 구성의 4단계 프로세스

1. DB 구성 상상: 화면을 보고 필요한 DB가 무엇인지 상상한다.
2. DB 구성: 필요한 DB를 실제로 만든다.
3. 더미 데이터 테스팅: DB에 테스트용 더미 데이터를 넣어본다.
4. 화면 구성 및 테스트: 실제 화면을 구성하고 테스트한다.
5. 이 과정은 피카츄 방 예시에서 했던 DB 구성 → 테스트 데이터 → 화면 구성 → 테스트와 동일한 흐름이다.

5.2. 메인 화면 DB 구조 설계: 챌린지 및 카테고리

1. 기존 데이터 초기화
   1. 기존에 있던 데이터는 유저를 제외하고 모두 삭제한다.

1. 챌린지 데이터 타입 생성
   1. 챌린지 앱의 핵심은 챌린지 자체이므로, Challenge라는 데이터 타입을 가장 먼저 생성한다.
   2. 이는 캐비닛에 '챌린지' 폴더를 만드는 것과 같다.

1. 챌린지 카테고리 데이터 타입 생성
   1. 챌린지에는 카테고리(건강, 다이어트 등)가 필요하므로, Challenge Category라는 별도의 데이터 타입을 생성한다.
   2. Challenge 데이터 타입안에 Category 필드를 추가하고, 타입은 Challenge Category로 설정한다.
   3. Category 필드는 단수로 설정한다. (하나의 챌린지에 하나의 카테고리)
   4. 이렇게 하면 데이터 관리가 용이해진다.

1. 챌린지 데이터 타입 필드 추가
   1. 제목(Title): 텍스트 타입, 단수.
   2. 소개글(Description): 텍스트 타입, 단수.

1. 리더(Leader) 필드 추가
   1. 챌린지를 만든 사람(예: 야나두 피트니스)을 나타내는 Leader 필드를 추가한다.
   2. Leader 필드의 타입은 User로 설정한다.
   3. 텍스트 타입으로 설정하면 리더의 계정 정보(프로필 사진 등)를 가져오기 어렵기 때문이다.

1. 유저(User) 데이터 타입 필드 추가
   1. User 데이터 타입에 프로필 사진(Profile Picture) 필드를 추가한다.
   2. 타입은 Image로 설정하고, 단수로 설정한다.

1. 추가 필드 고려
   1. 현재 랭킹, 열정 지수 등은 해당 기능 구현 시점에 추가한다.

5.3. 더미 데이터 입력: 챌린지 카테고리

1. 카테고리 이름 필드 추가
   1. Challenge Category 데이터 타입에 카테고리 이름(Category Name) 필드를 추가한다.
   2. 타입은 텍스트로 설정한다.

1. 카테고리 더미 데이터 입력
   1. App data 탭으로 이동하여 Challenge Category에 더미 데이터를 입력한다.
   2. 예시: 건강, 다이어트, 자기개발, 공부, 합격, 부자되기, 영어/외국어, 라이프스타일, 운동/스포츠, 행복/펀 등 8개 정도의 카테고리를 입력한다.

5.4. 메인 화면 디자인: 카테고리 리스트 구현

1. 기본 레이아웃 구성
   1. 메인 화면에 앱 로고(텍스트 또는 이미지)를 배치한다. (예: '유캔두' 텍스트)
   2. 더미 이미지를 크게 넣어 시각적 요소를 추가한다.
   3. '카테고리'라는 텍스트를 추가하고 폰트 크기를 18 정도로 설정한다.

1. 카테고리 리스트를 위한 리피팅 그룹(Repeating Group) 사용
   1. '카테고리' 텍스트 아래에 Repeating Group 엘리먼트를 추가한다.
   2. Rows는 2, Columns는 4로 설정하여 4x2 칸의 그리드를 만든다.
   3. Type of content는 Challenge Category로 설정한다.
   4. Data source는 Do a search for를 사용하여 Challenge Category의 모든 데이터를 가져온다. (필터링 없음)
   5. 리피팅 그룹의 첫 번째 칸에 디자인 요소를 추가한다.
      1. 이미지 엘리먼트를 추가한다.
      2. 텍스트 엘리먼트를 추가한다.
      3. 텍스트 엘리먼트의 Dynamic expression에 Current cell's Challenge Category's Category Name을 설정하여 각 카테고리 이름을 표시한다.
   6. Preview를 통해 카테고리 이름이 잘 표시되는지 확인한다.

1. 카테고리 이미지 필드 추가 및 적용
   1. 카테고리마다 이미지가 필요하므로, Challenge Category 데이터 타입에 카테고리 이미지(Category Image) 필드를 추가한다.
   2. 타입은 Image로 설정하고, 단수로 설정한다.
   3. App data 탭에서 각 카테고리에 해당하는 이미지를 업로드한다. (예: '부자되기'에 돼지저금통 이미지)
   4. 디자인 탭으로 돌아와 리피팅 그룹 내 이미지 엘리먼트의 Dynamic image에 Current cell's Challenge Category's Category Image를 설정한다.
   5. Preview를 통해 카테고리 이미지가 잘 표시되는지 확인한다.

1. DB 구조화의 장점
   1. 챌린지 카테고리를 텍스트가 아닌 별도의 데이터 타입으로 만들고 이미지 필드를 추가한 것은 체계적인 관리를 위함이다.
   2. 카테고리 이름이나 디자인이 변경될 경우, DB에서 한 번만 수정하면 모든 화면에 자동으로 반영된다.

1. 챌린지 리스트 뷰 구현
   1. '카테고리' 섹션 아래에 '현재 진행 중인 챌린지'와 같은 텍스트를 추가한다.
   2. 그 아래에 Repeating Group을 추가하여 챌린지 리스트를 표시한다.
   3. Type of content는 Challenge로 설정한다.
   4. Data source는 Do a search for를 사용하여 Challenge의 모든 데이터를 가져온다. (필터링 없음)
   5. 챌린지 데이터 타입에 썸네일(Thumbnail) 필드를 추가한다.
      1. 타입은 Image로 설정하고, 단수로 설정한다.
      2. App data 탭에서 챌린지에 썸네일 이미지를 추가한다.
   6. 리피팅 그룹 내에 이미지 엘리먼트를 추가하고 Dynamic image에 Current cell's Challenge's Thumbnail을 설정한다.
   7. Preview를 통해 챌린지 리스트 뷰가 잘 표시되는지 확인한다.
   8. 리피팅 그룹의 Layout style을 Horizontal scrolling으로 변경하여 횡 스크롤이 가능하게 한다.

6. 수업 마무리 및 다음 시간 예고

1. 오늘 학습 내용 요약
   1. 화면 구성 및 GNB(글로벌 내비게이션 바) 만들기.
   2. GNB 버튼에 워크플로우설정 및 복사/붙여넣기.
   3. DB 구성 (챌린지, 챌린지 카테고리, 유저) 및 더미 데이터 테스트.
   4. 리피팅 그룹을 활용한 카테고리 및 챌린지 리스트 뷰 구현.
   5. DB 설계 → 더미 데이터 → 화면 구성 → 테스트의 사이클을 반복한다.

노코드 툴 버블 bubble.io로 챌린지 앱 유캔두 클론 코딩 강의 – 2강. 같은 화면에 데이터만 바꿔서 바로가기

노코드 툴 버블 bubble.io로 챌린지 앱 유캔두 클론 코딩 강의 - 2강. 같은 화면에 데이터만 바꿔서 -