Gallery

No code Tool 어떻게 사용하는가 ?

Project Brief Overview

No-code tool 어떻게 사용하는가?

Tasks

Sales & Marketing Plan

Retrospective

Explore

No-code tool 어떻게 사용하는가?

Glide no-code 앱

⁠
`Glide`⁠
는 구글 스프레드시트를 가지고 모바일 앱을 만들 수 있게 해 주는 빌더입니다. 여기서 구글 스프레드시트는 모바일 앱에 들어갈 자료를 저장하는 데이터베이스 역할을 합니다. Glide는 레이아웃에 있어서 자유도가 좀 제한되지만 대신 정말 빠르고 쉽게 모바일 앱을 만들 수 있습니다.

이 페이지에서는 Glide를 사용해서 간단한 직원 정보 앱부터 가상화폐 가격을 API로 가져와서 보여주는 앱 등 모바일 앱 7가지를 함께 만들어 봅니다. 아래의 비디오 튜토리얼들에서 Step-by-Step으로 따라하면 구현할 수 있고, 실제 상용앱 만큼 복잡한 것으로 구현하지는 않습니다. 그래서 생각보다 훨씬 쉽게 만들어 볼 수 있어요.

스프레드시트의 데이터 처리 방법

스프레드시트 → 모바일 앱

시트 → 탭

행 (row, record) → 아이템을 리스트 형태로 보여줌

컬럼 → 리스트의 아이템을 선택하면 보여주는 아이템의 상세 정보

행이 중간에 비어 있으면 글라이드가 인식을 못할 수 있다 (?)

새롭게 시트를 추가하거나 컬럼을 추가하면 Tab이나 Component를 직접 추가해 줘야함

글라이드는 원본 칼럼이 어떤 데이터 타입인지 추측해서 Data Editor 상에 표시

데이터 타입을 바꾸려면?

칼럼에 이미지에 해당하는 링크를 넣어두면 글라이드는 이미지 칼럼으로 인식

앱 내의 네비게이션

스프레드시트 워크북에 시트를 추가하는 방식으로 Tab을 늘리기

컴포넌트에 페이지를 여는 링크를 추가한 다음, 특정 시트를 보여주는 페이지를 구성하기

이미지

이미지 컴포넌트를 URL로 지정해 주면 Record에 따라 바꾸지는 않는다

이모지를 시트에 입력하고 이미지로 지정해도 된다

Data Editor에 이미지를 업로드 하는 것이 가장 Scalable하다

사용자 입력 받기

오른쪽 패널 상단의 ADD 선택하여 어떤 항목을 추가할 수 있는지 설정

구글 스프레드시트는 최초에 빈 행(row)을 1,000개 추가하기 때문에 그 밑에 입력될 수 있음

마찬가지로 오른쪽 패널 상단의 EDIT을 선택하여 사용자가 항목을 수정할 수 있게 할 수 있음

글라이드는 아직 사용자별 권한 관리를 지원하지 않는다

하지만 Per User Data로 사용자별 데이터를 따로 관리할 수는 있음

아이템을 Edit 할 때 권한 관리를 따로 할 수는 있다

뭐가 안되는 걸까?

사용자 로그인 방식

로그인 없는 공개앱

이메일 + 임의로 생성된 4자리 숫자를 이메일로 보내는 방식의 로그인

이메일 화이트리스트 관리해서 특정 이메일만 접근할 수 있게 하기

앱 자체에 공통 패스워드를 부여하기

구글 로그인 - 이메일을 사용하는 경우, 구글 로그인으로 대체 가능

데이터 관계

스프레드시트에 정의된 2개의 테이블(시트)를 Data Editor에서 관계(Relation) 정의하여 연관 시킬 수 있다

두 개의 테이블이 공통된 값 범위를 가지는 컬럼을 가지고 있을 때 관계를 정의할 수 있다

관계를 정의 = 둘 중 하나의 테이블에 Relation을 나타내는 컬럼을 추가하는 것. 이 칼럼은 Data Editor에서만 보이고 원본 시트에는 없음.

예) 직원 테이블, 오피스 지점 테이블이 있을 때 직원 테이블에 직원의 소속 오피스를 넣고 싶을 때

동일한 테이블(시트) 내의 컬럼들을 관계(Relation) 정의할 수도 있다

예) 직원 리스트에 각 직원의 매니저 직원을 정의하고 싶을 때

"Has a" 혹은 "Has many" 관계는 Match multiple 체크박스로 정의

각 행의 record를 정확히 참고하기 위해서 Row Unique ID 사용해야 함

각 행은 번호가 ID로 쓰일 경우, ADD/DELETE 명령 이후 바뀌게 됨

글라이드의 데이터 관계는 방향성이 있어서, 참조하는 방향에 따라 정의해야 할 관계가 다르다

직원이 속한 오피스를 보여주기 위해서는 직원 → 오피스 관계 정의

오피스에 속한 직원들을 보여주기 위해서는 오스피 → 직원들 관계 정의

양방향으로 트리 관계를 정의하면 계층 구조로 탐색할 수 있는 리스트를 만들 수 있음 (

예시⁠

)

사용자별 데이터

목적 - 사용자별로 리스트 필터링 하고 싶을 때, 사용자별 화면(프로필 화면)을 구성하고 싶을 때

Setting > Privacy > Sign In 방식이 Public with Email 혹은 Email Whitelist 이어야 함

Filter에 Email이 Sign-in 사용자의 Email과 맞는지 조건을 추가하면 된다

혹은 컴포넌트에 Conditional Visibility를 Sign-in 사용자로 설정할 수도 있다

왼쪽 패널의 Preview As 아이콘을 클릭해 사용자별로 어떻게 실행되는지 볼 수 있다

Row owner vs. Per user filtering

아이템이 특정 사용자에게만 보여야 하는 경우는 Row Owner

아이템을 다 볼 때도 있고, 특정 사용자 조건으로 볼 때도 있는 경우는 Per user filtering

폼으로 입력 받기

Form Button을 추가하여 입력을 받을 수 있다

입력 받을 수 있는 데이터

사용자 입력 데이터 + 특수 값 (사용자 이메일, 만든 시각, Unique ID) + 부모 컴포넌트의 데이터

예) 부모 컴포넌트의 데이터 = 어떤 상품에 대한 리뷰인지 상품 정보를 자동으로 남기기

인라인 리스팅

화면 중간에 수평으로 스크롤링을 하는 리스트를 추가할 수 있음

⁠
`오버레이`⁠
⁠

이미지 위에 태그, 아바타(사용자 프사), 캡션, 버튼 등을 추가하는 것

타일, 카드 레이아웃 상에서 사용할 수 있음

⁠
`여러 칼럼의 카테고리`⁠
⁠

칼럼의 이름을 똑같이 하되 숫자를 1, 2, 3 이렇게 붙이면 Array Column으로 인식 (최대 3개 칼럼까지)

해당 Array Column을 지정해 주려면 Mutiple items 체크박스를 체크해야 함

⁠
`데이터 에디터`⁠
⁠

다른 칼럼의 데이터를 가지고 새로운 칼럼을 만들어 내는 기능

관계(Relation) 만들기

문구를 자동으로 만들어 내기

같은 값을 가지는 칼럼 만들기

IF-THEN-ELSE 칼럼 (텍스트, 일자, True/False, 숫자)

스프레드시트의 포뮬라 기능으로 구현하면 안되나?

실습

실습 진행 사항

실습 진행 사항

⁠

To-Do List

To-Do List

Done

Priority

Task

Due Date

High

Create personal to-do list

Medium

Create list of to-dos

Low

Prioritize to-dos

There are no rows in this table

⁠

실습 - 프로덕트 헌트 클론 앱 만들기

⁠

제품 리스트 + 사용자 리스트 (메이커) + 카테고리 리스트

수준: Basic (per user data 다루는 것 없음)

레슨

스프레드시트는 벌크 데이터 입력에 필요. 이후는 Data Editor를 쓰게 됨

스프레드시트의 칼럼의 포맷팅을 위해서는 칼럼에 해당 포맷의 데이터를 넣어야 함. 예) 이미지 링크를 넣어 두면 이미지로 인식

링크가 걸려 있지 않은 inline list를 만들지 못함 ← 간단하지만 안되는 기능

입력 받을 때 Choice라는 컴포넌트를 사용해 드랍다운 메뉴를 만들 수 있음

⁠

Glide⁠

는 구글 스프레드시트를 가지고 모바일 앱을 만들 수 있게 해 주는 빌더입니다. 여기서 구글 스프레드시트는 모바일 앱에 들어갈 자료를 저장하는 데이터베이스 역할을 합니다. Glide는 레이아웃에 있어서 자유도가 좀 제한되지만 대신 정말 빠르고 쉽게 모바일 앱을 만들 수 있습니다.

이 커리큘럼에서는 Glide를 사용해서 간단한 직원 정보 앱부터 가상화폐 가격을 API로 가져와서 보여주는 앱 등 모바일 앱 7가지를 함께 만들어 봅니다. 아래의 비디오 튜토리얼들에서 Step-by-Step으로 따라하면 구현할 수 있고, 실제 상용앱 만큼 복잡한 것으로 구현하지는 않습니다. 그래서 생각보다 훨씬 쉽게 만들어 볼 수 있어요.

⁠

1주차

Glide 기초 알아 보기

Glide의 문서 중

Quick starts⁠

및

Deep dive⁠

에 해당하는 부분을 학습하기

글이 많지 않고 대부분 튜토리얼 비디오를 포함하고 있습니다.

⁠

2주차

프로젝트 #1 - 설문조사 앱 만들기 (9분)

⁠

프로젝트 #2 - 프로덕트-헌트 클론 앱 만들기 (21분)

⁠

3주차

프로젝트 #3 - 피트니스 앱 만들기 (18분)

⁠

프로젝트 #4 - 가상화폐 정보 앱 만들기 (18분)

⁠

4주차

프로젝트 #5 - 직원 명부 앱 만들기 (48분)

⁠

5주차

프로젝트 #6 - 컨퍼런스 앱 만들기 (49분)

⁠

6주차

프로젝트 #7 - 인스타그램 클론 만들기 (45분)

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.