[앱시트 입문] 03. 앱 만들어보기 - (2) 데이터 작업

안녕하세요.

저번 글에 이어서 커뮤니티 앱을 계속 만들어 보겠습니다. 만들어진 템플릿 앱의 데이터를 변형해서 유머, 자유, 베스트, 정보, 나눔 의 각 게시글 데이터가 구분되어 표시되도록 설정해 보는 것이 오늘의 목표입니다.

혹시 저번 글을 못보신 분들이 있다면 아래 링크에서 먼저 내용을 확인해 주세요!

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

오늘은 한글화(Localization), 데이터 정리, 데이터 구조 변경(Regenerate Structure), 데이터 자르기(Slice), 화면(View) 만들기 작업을 진행해볼 예정인데요, 누구라도 이해할 수 있도록 자세히 설명해 보도록 하겠습니다.

그럼 시작해볼까요?

 

 

● 기본 설정

앱에 대한 모든 변경 사항은 자동으로 저장되지 않고, 우측 상단의 SAVE 버튼을 눌러야 합니다.

SAVE 버튼을 누를 때마다 앱에 오류가 있지는 않은지 자동으로 검증이 진행되며, 성공적으로 저장 시 앱의 새로운 버전이 생성되게 됩니다. 예를 들어 1.0001 버전에서 저장 시 1.0002 버전이 새로 생기게 되며, 데이터가 남아있는 동안에는 버전 백업이 가능합니다.

1. 앱 이름 변경

왼쪽 상단의 앱 이름을 클릭하여 앱 이름을 변경할 수 있습니다. 저는 커뮤니티 앱이라고 이름을 지었습니다.

2. 로고 및 기본 색상 변경

UX 메뉴의 Brand 탭에서 기본 색상(Primary color)을 빨간 색으로 변경해 주고, 앱 로고 아이콘을 바꿔 주었습니다. 저는 앱시트에서 기본 제공하는 모양으로 바꿨지만, 커스텀 이미지를 업로드하여 사용할 수도 있습니다.

3. 한글화(Localize)

UX 메뉴의 Localize 탭에서 시스템 안내 문구를 커스터마이징 해주었습니다. "Yes : 예", "No : 아니오" 처럼 적당히 원하는 문구를 넣어 주시면 됩니다.

 

 

● 데이터 정리

이제 데이터를 깔끔하게 정리해 보겠습니다. 일단 스프레드 시트의 이름을 '커뮤니티 앱 데이터'로 변경해 주겠습니다. 그 다음으로는 각 시트 이름을 바꿔준 다음 데이터에서 첫번째 행 빼고 다 지워주시면 됩니다. 첫번째 행도 열 이름을 한글로 착착 바꿔볼게요. 저는 아래와 같이 이름을 변경해 주었습니다.

시트 이름	열 이름
게시글	PID, 내용, 링크, 첨부파일, 작성자, 날짜 / 시간, 유형
댓글	CID, PID, 내용, 링크, 첨부파일, 작성자, 날짜 / 시간
좋아요	LID, PID, CID, 좋아요 누른 사람, 날짜 / 시간, 카운트

여기서 게시글 시트에 '유형'이라는 열을 추가해 주었는데요, 이에 대해서는 나중에 설명하겠습니다.

어쨌든 이렇게 앱 개발자가 알아보기 쉬워야 개발도 편하고 사용자들도 쉽게 쓸 수 있습니다. 정리는 언제나 번거롭지만, 언제나 시간을 아껴줍니다.

원본 데이터 이름을 변경했기 때문에 앱시트는 이를 아예 다른 테이블로 인식합니다. 기존의 테이블을 모두 삭제하고 새로운 테이블을 넣어주겠습니다.

추가가 완료된 모습입니다. 앗, 그런데 저 빨간 점들은 뭐죠? 네 맞습니다. 에러입니다. Info에서 목록을 보니 무려 11개의 에러와 5개의 경고 문구가 표시되었는데요, 이미 있었던 데이터를 기준으로 작성된 앱인데 그 데이터를 지우고 새로운 데이터를 추가했으니 에러가 나올 수밖에 없죠. 이럴 때는 에러와 경고가 표시된 항목들을 다 지워주면 됩니다.

항목을 삭제하기 위해서는 Delete 버튼을 누르면 됩니다. Data 메뉴의 Slice 탭, UX 메뉴의 Views와 Format Rules 탭, Behavior 메뉴의 에러가 표시되는 모든 항목들을 다 지워주겠습니다. 그러고 나면 아래와 같이 깔끔한 앱이 완성되죠.

이제야 드디어 제대로 앱을 수정할 준비가 되었네요.

 

 

● 데이터 구성

단언컨데, 앱시트에서 가장 중요한 것은 데이터입니다. 데이터가 어떻게 구성되고 어떤 항목을 포함하는지에 따라 만들어지는 앱이 달라집니다. 저번 글에서 이미 앱시트 데이터가 관계형 데이터베이스라는 것을 언급했었는데요, 정리된 아래의 표를 보시면 댓글 테이블은 게시글 테이블을, 좋아요 테이블은 게시글 테이블과 댓글 테이블을 참조하는 것을 볼 수 있습니다.

시트 이름	열 이름
게시글	PID, 내용, 링크, 첨부파일, 작성자, 날짜 / 시간, 유형
댓글	CID, PID, 내용, 링크, 첨부파일, 작성자, 날짜 / 시간
좋아요	LID, PID, CID, 좋아요 누른 사람, 날짜 / 시간, 카운트

이제 Data 메뉴의 Columns 탭에서 각 열의 세부정보를 설정해줄 건데요, 이 때 3가지 중요한 요소가 있습니다.

1. 데이터 타입(Type)

  : 데이터의 유형. (텍스트, 숫자, Enum 등)

2. 키(Key)

  : 각 데이터를 구분하기 위한 고유값

3. 초기값(Initial value)

  : 해당 열에 데이터가 추가됐을 때의 초기값을 지정합니다.

각 열의 용도에 맞게 아래와 같이 설정해 주었습니다.

시트 이름	열 이름
게시글	PID(Text)[UniqueID()], 내용(LongText), 링크(Url), 첨부파일(File), 작성자(Email)[UserEmail()], 날짜 / 시간(DateTime)[Now()], 유형(Enum)
댓글	CID(Text)[UniqueID()], PID(Text), 내용(LongText), 링크(Url), 첨부파일(File), 작성자(Email)[UserEmail()], 날짜 / 시간(DateTime)[Now()]
좋아요	LID(Text)[UniqueID()], PID(Text), CID(Text), 좋아요 누른 사람(Email)[UserEmail()], 날짜 / 시간(DateTime)[Now()], 카운트(Number)

키, (타입),[초기값]

보기가 꽤 복잡한데요, 참고용으로만 쓰셨으면 좋겠습니다. 키는 해당 데이터의 ID 열로 지정해 주시는 것이 가장 편합니다. 타입같은 경우에는 상식적으로 작성해 주시면 됩니다. 초기값은 작성 시에는 아래와 같이 수식 작성을 위한 창이 나오는데요, 입력칸에 파란 괄호 안에 있는 값을 그대로 복사 붙여넣기 해주시면 됩니다.

유형의 경우 데이터 타입이 Enum으로 지정되었습니다. Enum은 정해진 목록을 만들어 사용자가 해당 목록 중 하나를 고르게 하고 싶을 때 쓰기 좋은 타입입니다. 왼쪽의 수정 버튼을 눌러 목록 작성이 가능합니다. 저같은 경우 아래와 같이 유머, 자유, 정보, 나눔 의 4개의 게시판 유형 목록을 작성했습니다. 베스트 게시판은 모든 게시판에서 좋아요 수가 많은 글만 가져오기 위한 게시판이라서 따로 목록에 추가하지는 않았습니다.

이제 데이터 구성이 완료되었습니다. 다음으로는 데이터 자르기(Slice)를 통해 각 화면(View)에 표시될 데이터를 구분해 보겠습니다.

 

 

● 데이터 자르기(Slice)

Data 메뉴의 Slice 탭에 가면 New Slice 버튼을 눌러 데이터를 자를 수 있습니다. 저는 아래와 같이 먼저 유머 게시글만을 보기 위한 "유머"라는 이름의 데이터 슬라이스를 생성해 주었습니다.

여기서 데이터를 어떻게 자를지는 Row filter condition 에서 정의할 수 있는데요, 저는 게시글 시트의 데이터 중 [유형] 열이 "유머"인 게시글만 가져올 수 있도록 [유형] = "유머" 라는 수식(formula)을 작성해 주었습니다. Copy 버튼을 눌러 동일한 방식으로 "자유", "정보", "나눔" 데이터 슬라이스를 추가해 주었습니다.

모든 작업이 끝나면 저장 버튼을 꼭 눌러주세요!

 

 

● 화면(View) 만들기

마지막으로 UX 메뉴에서 각 게시글에 대한 화면(View)을 추가해 주도록 하겠습니다. New View 버튼을 눌러 이름 및 데이터, View type을 아래와 같이 지정해 줍니다.

마찬가지 방법으로 자유, 유머, 정보에 대한 화면(View)를 추가해 줍니다. 또, 마지막으로 전체 게시글 시트로 "베스트"라는 이름의 화면(View)를 추가해 줍니다.

이후 Position 이라는 항목을 조정하여 각 화면(View)의 위치를 설정해주면 끝입니다. 데이터가 제대로 나눠지는지 확인하기 위해 원본 데이터 '게시글' 시트에 아래와 같이 항목을 추가해 주었습니다.

PID	내용	링크	첨부파일	작성자	날짜 / 시간	유형
1	유머			korea.appsheet@gmail.com	8/11/2022 17:37:00	유머
2	자유			korea.appsheet@gmail.com	8/12/2022 17:37:00	자유
3	정보			korea.appsheet@gmail.com	8/13/2022 17:37:00	정보
4	나눔			korea.appsheet@gmail.com	8/14/2022 17:37:00	나눔

그럼 지금까지 완성된 앱의 모습을 보시죠!

보면 아시겠지만 디테일 화면 등 내가 만들지 않은 화면도 시스템이 알아서 생성해 줍니다. 개발하는 입장에서 공수를 줄여주는 아주 큰 장점 중에 하나입니다.

오늘은 만들어진 템플릿 앱의 데이터를 변형해서 유머, 자유, 베스트, 정보, 나눔 의 각 게시글 데이터가 구분되어 표시되도록 설정해 보았습니다. 한글화(Localization), 데이터 정리, 데이터 구조 변경(Regenerate Structure), 데이터 자르기(Slice), 화면(View) 만들기 작업을 진행해 보았는데요. 너무 어렵진 않았을까 걱정이네요. 댓글로 의견 주시면 반영해 보도록 하겠습니다! 다음 시간에는 댓글과 좋아요 기능을 구현해 보고 베스트 게시판을 정비하도록 하겠습니다. 같이 열심히 공부해 보아요~