[앱시트 입문] 02. 앱 만들어보기 - (1) 앱 생성

안녕하세요.

이번에는 한 번 직접 앱을 만들어 보면서 앱을 만드는 과정과 완성된 앱의 모습을 확인해 보도록 하겠습니다. 글을 몇 개만 읽으면서 따라해 보시면 앱시트로 앱을 만드는 기본적인 방법은 다 파악할 수 있을 거예요. 그만큼 쉽고, 또 간단합니다.

먼저 앱을 만들기 위해서는 아이디어가 있어야 하겠죠? 저는 간단한 커뮤니티 앱을 한 번 만들어보려고 합니다. 유머, 자유, 베스트, 정보, 나눔 게시판을 만들어서 글도 올리고, 좋아요도 누르고 댓글도 달 수 있게 해보겠습니다. 이번 글에서는 앱을 만들고, 만들어진 앱이 어떻게 생겼나 확인해 볼 예정이구요, 다음 글에서는 만들어진 앱을 편집해서 원하는 기능을 넣어볼 생각입니다.

이 글을 읽고 계신 여러분들도 글만 슬쩍 보고 넘기기보다는 같이 앱을 만들어 보았으면 좋겠어요. 아무래도 처음이다 보니까 어색하게 느껴질 수도 있겠지만, 천천히 따라하시다 보면 금방 적응할 수 있을 거예요!

그럼 시작해 볼까요?

 

● 앱시트 접속하기

먼저 아래 배너를 클릭하면 앱시트에 접속하실 수 있습니다.

Google AppSheet | Build apps with no code

앱시트를 사용하기 위해서는 앱시트 계정이 필요한데요, 우측 상단의 Get started 혹은 Sign in 버튼을 눌러 앱시트 계정을 생성하거나 생성된 계정에 로그인할 수 있습니다. 

저같은 경우는 Google 계정으로 로그인을 했습니다. 그 외에 Microsoft 나 Apple 등 다른 계정으로 로그인하셔도 상관 없지만, 처음으로 앱시트를 시작하시는 분들께는 구글 계정을 사용하시는 것을 추천드립니다. 앱시트는 아무래도 Google Drive나 Google Calendar 등 구글 제품들과의 연관성이 좋기 때문에 구글 계정을 써야 더 효율적으로 관리가 가능합니다. 저도 그래서 웬만하면 구글 계정 기준으로 말씀을 드릴테니, 혹시 질문이 있으시면 댓글 남겨주세요!

[참고: Google 계정 만들기]

로그인을 하고 나면 아래와 같이 앱시트에서 내 계정에 대한 권한을 요청하게 됩니다. 구글 드라이브, 특히 스프레드시트에 대한 권한을 요청하는데요, 허용 버튼을 눌러주시면 됩니다.

아래와 같은 홈 화면이 나왔으면 성공입니다.

 

 

● 앱 만들기

앱시트 앱을 만들기 위해서는 데이터가 필요합니다. 먼저 홈 화면에서 Make a new app 버튼을 눌러보겠습니다.

Start with your own data는 미리 준비한 데이터 테이블이 있어야 합니다. 이렇게 처음부터 데이터를 만드는 방법도 있겠지만, Start with a template 에서 적절한 템플릿을 선택하면 좀더 빠르고 쉽게 작업을 할 수가 있습니다. 앱시트에는 수십 개의 템플릿이 있는데요, 아래 사이트에서 Explore 버튼을 눌러 템플릿 앱들을 미리 확인 후 적절한 앱을 복사해서 사용하면 됩니다. 이름을 잘 보고 고르시면 생각보다 금방 원하는 템플릿을 찾을 수 있을 겁니다.

AppSheet : mobile apps from spreadsheets : App templates

 

 

● 앱 에디터 메뉴

저같은 경우에는 FAQ Directory(클릭 시 템플릿 앱을 직접 확인해볼 수 있습니다) 라는 템플릿을 복사했습니다. 복사를 마치고 나면 아래와 같은 앱 에디터(앱 편집기) 화면이 보일 것입니다. 우선 화면을 좀 살펴보겠습니다.

화면의 왼쪽 부분에는 여러 가지 메뉴들이 있고, 가운데에는 해당 메뉴에서 설정할 수 있는 옵션들을 볼 수 있습니다. 오른쪽에는 제작한 앱에 대한 미리보기 화면을 볼 수 있습니다. 미리보기 상단의 버튼을 눌러 모바일, 태블릿 및 브라우저에서 어떻게 보이는지 확인해 볼 수 있습니다. 그 위에는 공유를 하거나 작업 내용을 저장할 수 있는 버튼이 있습니다.

왼쪽에 위치한 각 메뉴에 대해서 간단히 표로 정리해 보았습니다.

메뉴 이름	설명
Home	앱 개발을 위한 팁, 앱시트 기능에 대한 소개
Info	앱에 간단한 설명 추가, 버전 정보 확인, 기본 앱 경로를 지정, 앱의 전체 구성을 그래프로 확인
Data	데이터 추가, 데이터 속성 정의, 데이터 자르기
UX	실제로 사용자가 보게 될 화면(View) 구성, 앱의 디자인과 표시되는 안내 문구 커스터마이징
Behavior	버튼 생성, 사용자가 버튼을 눌렀을 때 앱의 동작을 결정
Automation	특정 이벤트(데이터 변동에 의한 이벤트, 일정에 의한 이벤트)가 실행되었을 때 자동으로 실행되는 동작들을 정의
Security	로그인 조건, 암호화, 보안 필터(데이터에 대한 선별적 접근) 등 보안 관련 기능
Intelligence	Smart Assistant(음성 인식), Prediction(값 예측), OCR(이미지 상의 글자 인식) 와 같은 인공지능 모델을 학습 및 앱에 적용
Manage	앱의 로그인 및 사용 기록 등 앱을 관리하는 데 필요한 로그 확인, 버전 관리, 앱 배포 진행

 

 

● 앱 데이터 확인

그럼 Data 메뉴로 가서 이 앱의 데이터가 어떻게 구성되어 있는지 확인해 보겠습니다. 아래 그림과 같이 Answers, Questions, Votes 의 세 개의 테이블이 등록되어 있네요. 데이터 source 는 구글 드라이브에 있는 Questions 라는 스프레드시트임을 알 수 있습니다.

Answers를 클릭해 보면 아래와 같이 나타납니다.

테이블의 이름이 나와 있고, 사용자들은 이 테이블의 행들을 업데이트, 추가 및 삭제할 수 있습니다. View source 버튼을 누르면 원본 데이터 소스에 접근이 가능합니다. 원본 데이터는 아래와 같이 생겼습니다.

Questions 라는 스프레드시트 파일에 있는 Answers 라는 이름의 시트가 열렸습니다. 여기서 Questions, Answers, Votes는 앱시트에서 각각 별개의 테이블로 인식됩니다. 첫번째 행은 굵은 글씨로 각 열의 이름을 보여주고 있고, 두번째 행부터는 실제 데이터가 들어가 있습니다. 첫번째 열은 ID로 표시되고 있는데요,  이 ID를 통해서 각 행을 구분하거나 참조할 수 있기 때문에 모든 테이블에 꼭 넣어주시는 것을 권장드립니다.

여기서 참조란 무엇일까요? 참조는 다른 테이블의 특정 행을 지정하는 행위입니다. 예를 들어 아래와 같은 Questions 테이블이 있다고 가정해 봅시다.

ID	Question
Q1	앱시트 좋나요?
Q2	앱시트 해볼까요?

사용자들이 질문에 응답을 하게 되면 Answers 테이블에 기록이 될 것입니다. 그런데 그 응답은 순서대로 입력된다는 보장도 없고, 한 개의 질문에 대한 여러 개의 응답이 기록될 수도 있죠. 기록된 응답이 어떤 질문에 대한 응답인지 알기 위해서는 참조가 필요합니다.

ID	Question	Answer
A1	Q1	좋습니다!
A2	Q2	꼭 해보세요!
A3	Q2	추천드려요~

이러한 참조 기능이 포함된 데이터 베이스 구조를 관계형 데이터베이스라고 합니다.

앱시트에서는 이러한 참조 기능과 더불어 데이터 자르기, 화면(View) 생성 등으로 모든 데이터가 연결되어 있습니다. Info 메뉴의 Spec이라는 탭에서 데이터가 어떻게 연결돼 있는지 그래프 형식으로 한 눈에 확인이 가능합니다.

■ : 테이블 / ◆ : 자른 테이블 / ● : 생성된 화면(View) / → : 데이터 관계

 

오늘은 앱시트에 접속하는 방법, 앱시트 앱을 어떻게 만드는지, 앱 에디터가 어떻게 생겼는지, 앱을 만들기 위해서 어떤 데이터가 필요한지 알아 보았습니다. 아직 템플릿 앱을 확인 안해보신 분들은 여기에서 꼭 확인해 보시기 바랍니다!! 다음 글에서는 만들어진 템플릿 앱의 데이터를 변형해서 유머, 자유, 베스트, 정보, 나눔 의 각 게시글 데이터가 구분되어 표시되도록 설정해 보기로 합죠! 같이 열심히 공부해 보아요~