본문 바로가기
사업지속/AppSheet

014 AppSheet 최대장점 Ux (Views, Brand, Format Rules) 제공-1인기업, 틈새업무, 소상공인

by 자바라머신러닝_출판 2022. 8. 11.

AppSheet의 최대 장점은 정형화된 UI Template을 제공하여 사용자가 선택하게 끔하기에 UI 구성 시간을 절약해 줍니다. UI Template은 UI Type (UI유형), Branding (꾸미기), Conditional Formatting (조건부 표기)을 제공하며 이들을 설명합니다.

 

UX - Views - UI Type (UI유형) 

2000년 중반 모바일 혁명이 발생하면서 다양한 플랫폼에 다양한 앱들이 개발되면서 UI는 어느 정도 정형화되었습니다. AppSheet는 11가지 정형화된 UI유형을 제공하고 사용자로 하여금 선택하게 구성되어 있습니다.  웹 또는 앱 시스템 UI 구성은 사용자별로 시각적 안목이 다르고 UI 작동방식을 일일이 코딩을 하기 때문에 가장 많은 시간과 노력이 투입됩니다. 따라서 AppSheet는 제공하는 무난한 11 UI 유형 선택은 UI 구성 시간을 대폭 단축하지만 반대로 톡톡 튀는 UI 구성은 어렵습니다.

AppSheet 에서 제공하는 11가지 UI 유형
AppSheet 에서 제공하는 11가지 UI 유형

11가지 유형중 그나마 대중적인 UI 5가지를 설명하겠습니다.

달력형, 집중(deck)형, 테이블형, 차트형, 지도형
달력형, 집중(deck)형, 테이블형, 차트형, 지도형

calendar 유형의 경우 기한 일과 같이 특정일자를 달력에 표기할 때 사용합니다. 달력 유형은 기본적으로 제공되고 특정일자를 달력에 표기하고자 한다면 아래와 같이 Start date, End date, Description을 선택하면 됩니다. 아래 예시는 "업무 진척 현황" 테이블(워크시트)의 기한 일별 업무를 달력에 표기할 때 설정한 내용입니다.

Calendar 유형의 데이터를 표기하는 설정
Calendar 유형의 데이터를 표기하는 설정

deck형은 데이터 항목 중 핵심 항목을 Primary / Secondary header에서 정의하면 제일 왼쪽으로 표기하고 나머지 데이터를 나열합니다. 필자는 저작권 문제를 우회하기 위해 사진을 사용하지 않았지만 사원별 사진을 왼쪽에 표기할 수 있습니다.

deck 유형의 Primary / Secondary header 별 데이터 정렬 설정
deck 유형의 Primary / Secondary header 별 데이터 정렬 설정

AppSheet에서 기본적으로 제공하는 전화 걸기, 지도 열기, 메일 송신 등 기능을 별다른 설정 없이 사용할 수 있습니다. 이런 기능을 사용하기 위해서는 데이터 유형은 Phone, Address, E-mail로 지정되어 있어야 합니다.

Phone, Address, E-mail 로 지정 데이터 항목
Phone, Address, E-mail 로 지정 데이터 항목

table 은 구글 스프레드시트처럼 데이터를 나열하는 형식으로 UI에 표기하는데 다른 점은 정렬/집계 항목을 선택하여 이 기준대로 UI에 표기할 수 있습니다. 

table 유형에서 정렬/집계 기준과 집계 수치표기, UI에 보일 항목 선택 결과
table 유형에서 정렬/집계 기준과 집계 수치표기, UI에 보일 항목 선택 결과

map 유형은 AppSheet UI에 구글 맵 기능을 불러와 특정 위치에 표기해 줍니다. Map column에서 선택된 Address형 "주소" 데이터 항목을 선택합니다. 주의점은 구글 맵에 특정 위치를 표기하기 위해서는 데이터 유형이 Address 형이어야 합니다. 

Map유형에서 지도를 표기하기 위해, Map column에서 선택된 Address형 주소 데이터 항목
Map유형에서 지도를 표기하기 위해, Map column에서 선택된 Address형 주소 데이터 항목
Address형 으로 선택된 "주소" 항목
Address형 으로 선택된 "주소" 항목

chart 유형의 경우 엑셀의 차트 기능과 유사한데 엑셀 차트처럼 다양한 기능은 제공하지 않습니다. 특히 AppSheet의 차트는 1가지 유형의 차트만 제공하므로 엑셀에서 많이 사용하는 2중 차트선과 같이 y 축을 2개 사용하는 기능은 제공하지 않습니다. 따라서 AppSheet 데이터 간의 차트 비교는 어렵습니다. 차트형을 사용하기 위해서는 아래 그림에서 데이터 유형 (업무 진척 현황)을 선택한 뒤 밑에서부터 Chart coumns - Group aggregate - chart type 순으로 선택합니다.

char형에서 밑에서 부터 Chart columns - Group aggregate - chart type 순으로 선택한 결과
char형에서 밑에서 부터 Chart columns - Group aggregate - chart type 순으로 선택한 결과

UX - Branding (꾸미기)

UI는 사용자 별로 주관적으로 판단하기에 UI를 꾸미는 것은 많은 시간이 소요됩니다. AppSheet에서는 기본적인 UI 꾸밈 기능을 제공합니다. Brand 부분은 데이터나 앱 작동에 큰 영향을 미치지 못하므로 아래 그림으로 설명을 대체하겠습니다.

Brand 에서 설정된 내용에 따라 변경된 UI
Brand 에서 설정된 내용에 따라 변경된 UI

 

Ux - Conditional Formatting (조건부 표기)

지금 까지 UI 유형이나 UI를 꾸미는 것을 설명했다면 UI에 표기될 데이터 중 특정 조건에 부합되면 눈의 띄게 표현하는 방법을 알아보겠습니다. 아래 예시는 업무 진척 현황에서 기한일이 오늘 이후인 업무를 붉은색 밑줄로 표현하면서 데이터 앞에 번개 아이콘 표기한 결과입니다.

기한일이 오늘 이후인 업무를 붉은색 밑줄로 표현하면서 데이터 앞에 번개 아이콘 표기
기한일이 오늘 이후인 업무를 붉은색 밑줄로 표현하면서 데이터 앞에 번개 아이콘 표기

설정 설정 내용 주요 기능
For this data "업무 진척 현황" 선택 조건부 표기가 적용될 데이터(워크시트) 선택
If this condition is true [기한일]>TODAY() 조건 함수 정의
Format these columns and actions 업무, 우선순위, 기한일 : Ctrl + 클릭 표기가 적용될 항목 선택
Visual Format - Icon 번개 아이콘 선택 항목별로 표기될 아이콘 선택
Visual Format - Text color 붉은색 선택 표기 색상 선택
Text Format - Underline 활성화 선택 밑줄 활성화
Text Format - Bold 활성화 선택 굵은색 활성화

이 설정에서 중요한 것은 "If this condition is true"의 함수입니다. 필자가 본 내용을 작성한 날짜는 2022년 8월 8일로 이보다 큰 기한일은 모두 조건부 표기가 되는 것입니다. 그 함수가 "[기한일]>TODAY()"입니다. 

만약 오늘 이후 기한일에 해당하는 업무 중에 완료된 업무는 표기하지 말라고 함수를 정의하면 "AND([기한일]>TODAY(), [상태]<>'완료')"가 됩니다. 기한일이 오늘 이후 이면서 상태는 완료가 아니다는 의미입니다.

 

요약
  • UX - Views - UI Type (UI유형) : 기본 제공 11가지 UI 유형 중 1가지를 선택. 유형별로 상세 설정 (데이터 유형 주의)
  • UX - Branding (꾸미기) : Ui 디자인 설정을 기본적으로 제공함 (앱 아이콘, 색상, 중요 위치 글자 표기 등)
  • Ux - Conditional Formatting (조건부 표기) : 사용자 정의된 함수와 부합되는 데이터들만 선별하여 특별 표기 정의

댓글