[앱시트 입문] 05. 앱 만들어보기 - (4) 앱 꾸미기

안녕하세요.

계속해서 커뮤니티 앱을 만들어 보겠습니다. 지금까지는 앱을 만들고 필요한 기능을 추가하는 작업이었다면 이제부터는 앱을 꾸며주는 작업을 진행하게 될 텐데요, 시작하기 전에 이전 글들도 꼭꼭 확인해 주세요!

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

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

[앱시트 입문] 04. 앱 만들어보기 - (3) 댓글과 좋아요

오늘은 각 화면(View)의 타입, 이름과 아이콘을 바꾸고, 버튼의 모양과 위치를 조정하고, 글씨체를 바꿔주도록 하겠습니다.

그럼 시작해 볼까요?

 

 

● 화면(View) 꾸미기

화면(View)은 UX 메뉴의 View 탭에서 꾸미기가 가능합니다. 먼저 화면을 하나 선택한 뒤, Display 메뉴를 열어 보면 아래와 같이 아이콘과 화면 이름(Display name)을 지정할 수 있습니다.

적절한 아이콘을 찾아서 선택해 주시면 됩니다. 저는 아래와 같이 메뉴 아이콘을 설정해 주었습니다.

메뉴가 훨씬 눈에 잘 들어오죠?

다음은 뷰 타입을 설정해 보겠습니다. 앱시트의 뷰 타입은 아래와 같습니다.

뷰 타입	설명	예시
Calendar	달력 형식으로 일별, 주별, 월별 일정 확인
Card	데이터 내용과 관련 액션을 묶어서 보여줌
Chart	히스토그램, 도넛 차트 등 데이터 시각화
Dashboard	한 화면에서 여러 뷰를 동시에 확인 (예시는 캘린더 뷰 + 차트 뷰)
Deck	행 데이터를 덱 형식으로 출력
Detail	한 행의 데이터를 상세하게 출력, 이전이나 다음 버튼을 눌러 다른 데이터 확인
Form	앱 사용자의 입력을 받음
Gallery	이미지 위주로 데이터 출력
Map	지도 상에 주소, XY, 좌표 데이터 표시
Onboarding	신규 사용자를 위한 소개 페이지
Table	행 데이터를 테이블 형식으로 출력

원하는 뷰 타입을 고른 후 View options 에서 데이터 표시 방식, 데이터의 정렬 순서 등을 지정해 주시면 됩니다. 저같은 경우 게시판을 보기 위해 Card 뷰를 선택하였습니다.

Card 뷰는 이미지와 같이 Layout이라는 항목이 있는데요, 이 메뉴를 통해 화면에 데이터가 어떻게 표시될지 정할 수 있습니다. 예를 들어 저는 이미지를 넣지 않았기 때문에 이미지를 클릭한 뒤, Column to show 를 None으로 선택해 주었고, Title 란에는 작성자 데이터를 넣어 주었습니다. 설정이 끝난 결과입니다.

여기서 좋아요 수를 표시해 주기 위해 표시를 위한 가상 열을 추가해 주었습니다.

여기서는 CONCATENATE()라는 함수를 사용하여 "좋아요 수: " 라는 텍스트와, 좋아요 갯수를 합쳐서 표시해 주었습니다.

CONCATENATE(): 순서에 따라 입력된 값을 합친 새로운 텍스트를 반환합니다.
  예 - CONCATENATE("Good morning, ", [First Name], "!")
    => 결과: Good morning, Martin!

베스트 게시판에도 CONCATENATE() 함수를 활용하여 '유형 표시' 라는 가상 열을 추가 후 카드에 표시해 주었습니다.

이제 Detail 화면과 Form 화면을 수정해 보겠습니다. 앱시트에서 화면(View)를 하나 생성하면, 시스템에서 자동으로 해당 화면의 데이터를 클릭했을 때 그에 대한 세부 항목을 보여주는 Detail 화면과 새 데이터를 추가하기 위한 Form 화면을 추가해 줍니다. 이런 시스템 뷰는 UX > Views 의 Show system views 버튼을 눌러 확인 가능합니다.

현재 앱의 Detail 페이지는 PID, 좋아요 등 표시할 필요 없는 항목까지 표시해주고 있기 때문에 이를 표시하지 않도록 수정해 주도록 하겠습니다. 방법은 Column order라는 항목에 표시하기 원하는 정보를 순서대로 추가해주면 됩니다.

Display 메뉴를 열어 앱에 표시할 이름도 적절히 변경해 줍니다.

똑같은 방법으로 다른 Detail 및 Form 화면에 대한 Column order 및 표시할 이름도 지정해 줍니다. 완성된 모습은 이와 같습니다.

앱이 드디어 모양새를 갖춰나가고 있네요.

 

 

● 버튼 꾸미기

댓글 작성과 좋아요 버튼의 아이콘을 바꿔 줍니다. Behavior 메뉴의 Actions 탭에서 버튼을 선택한 후 Appearance 메뉴를 열어 원하는 아이콘을 선택해 줍니다.

또, Prominence 메뉴도 원하는 디자인으로 바꿔 줍니다. Display overlay는 우측 하단에 버튼이 고정되는 방식이고, Display prominently는 페이지 상단에 버튼이 고정되며, Display inline은 특정 데이터 컬럼 옆에 버튼이 고정됩니다. 원하는 방식으로 적절히 수정해 주시면 됩니다.

같은 메뉴에서 Show all 버튼을 눌러 시스템 버튼에 대한 설정도 가능합니다.

설정을 마친 화면입니다. 좀더 보기 좋아졌군요.

 

 

● 글씨 꾸미기

마지막으로 글씨체, 글씨 크기와 색깔을 조금 바꿔주겠습니다. 이는 UX 메뉴의 Format Rules 탭에서 설정 가능합니다. 우선 좋아요 수가 눈에 잘 띄지 않아 해당 부분을 먼저 수정해 보겠습니다. New Format Rule 버튼을 눌러 새로운 서식을 생성합니다.

필요하다면 서식을 적용할 조건을 걸어줄 수 있습니다. 예를 들면 좋아요가 10개가 넘는 경우에는 색을 다르게 한다던가 하는 방식으로요. 저는 따로 조건을 넣어주지는 않았습니다. 저는 '좋아요 표시'를 선택하고 서식을 적용해 주었습니다.

위와 같이 텍스트와 함께 표시할 아이콘, 색깔, 크기 및 포맷을 지정해 주었습니다. 변경 결과는 아래와 같습니다.

이런 식으로 앱에 표시되는 글씨를 꾸며줄 수 있습니다. 원하는대로 앱을 꾸며주시면 됩니다.

오늘은 이렇게 앱을 예쁘게 꾸며 보았습니다. 설정 전과 후를 비교하면 엄청난 차이가 있는 것을 보실 수 있을 거예요. 이제 진짜로 앱을 사용할 때가 된 것 같습니다. 다음 시간에는 앱을 공유, 테스트 및 배포하는 방법을 알아보도록 하겠습니다. 같이 열심히 공부해 보았으면 좋겠습니다~