이 기사에서는 다음 내용을 알아보실 수 있습니다:
- Tulip 앱 편집기의 다양한 구성 요소
- 앱에 추가할 수 있는 기본 시각적 요소(위젯이라고도 함)
- 버튼을 사용하여 기본 로직을 추가하는 방법
- 데이터를 기록하는 앱을 완성하는 방법
This topic is featured in the Introduction to app building course in Tulip University.
아직 튤립 앱 에디터에 익숙하지 않으신 분이라면 이 글이 도움이 될 것입니다. 작업 지침 앱을 예로 들어 앱 에디터의 주요 도구들을 하나씩 살펴보겠습니다.
앱 편집기를 사용하면 코드를 작성하지 않고도 작업자를 위한 앱을 구축할 수 있습니다.
다음은 앱 에디터의 모습입니다:
앱 에디터에서는 프로세스의 시각적 요소를 구성하는 일련의 ‘단계(Steps )’를 생성할 수 있습니다.
소개 동영상
We're constantly improving the applications that come in new instances. If you joined Tulip recently, the apps in your instance might look different than what you see in images in this article. No worries, the ideas are the still same even if the content is a little different.
앱 에디터 구성
앱 편집기는 앱을 제작하고 편집하는 공간입니다. 다음 다이어그램은 앱 편집기를 구성하는 여러 부분을 보여줍니다:
- 단계/단계 그룹 추가 - 새로운 단계 또는 단계 그룹을 추가합니다
- 단계/레코드 패널 - 단계 탭을 통해 단계를 확인하거나, 레코드 탭으로 전환하여 사용된 테이블을 확인합니다
- 작업 공간 - 앱 인터페이스를 제작하는 공간
- 자산 위젯 추가 - 앱에 도형, 아이콘 또는 로고를 추가합니다
- 버튼 위젯 추가 - 앱에 버튼을 추가합니다
- 입력 위젯 추가 - 앱에 입력 필드를 추가합니다
- 텍스트 위젯 추가 - 앱에 텍스트 상자를 추가합니다
- 위젯 삽입 - 이미지, 분석, 기계 속성 등 다양한 위젯을 삽입합니다
- 카메라 위젯 추가 - 일반 카메라 또는 바코드 카메라로 찍은 사진을 추가하세요
- 번역 - Tulip Player는 Tulip 프로필을 통해 앱을 사용자가 선택한 언어로 자동 번역합니다
- 스냅샷 생성 - 앱의 현재 버전을 저장하여 복제본을 만듭니다
- 테스트 - 개발자 모드를 통해 앱 테스트하기
- 실행 - Tulip Player에서 앱을 실행합니다
- 게시 - 앱을 게시합니다
- 앞으로/뒤로 - 작업 공간 내의 요소를 다른 요소 앞이나 뒤로 이동합니다.
- 사이드 패널 - 위젯 탭, 단계 탭 및 앱 탭에서 트리거와 스타일 구성 요소를 설정합니다.
팬 및 확대/축소 도구를 사용하여 다음을 수행할 수 있습니다:
- 앱의 편집 영역을 이동할 수 있습니다
- 확대 또는 축소
왼쪽의 단계 목록 에는 기본 레이아웃을 포함한 단계 목록이 표시됩니다.
기본 레이아웃
기본 레이아웃에 적용한 서식이나 레이아웃 편집 내용은 앱의 각 단계에 자동으로 적용됩니다.
오른쪽의 ‘컨텍스트 창’에서 개별 요소의 ‘잠금 해제’를 통해 단일 단계의 기본 레이아웃을 변경할 수 있습니다.
기본 레이아웃에 대한 자세한 내용은 여기에서 확인하세요.
단계
단계를 클릭하면 해당 단계에 포함된 요소를 볼 수 있습니다.
단계를 마우스 오른쪽 버튼으로 클릭하면 해당 단계를 복제하거나, 여러 단계를 그룹으로 묶거나, 삭제할 수 있습니다.
단계에 대한 자세한 내용은 여기에서 확인하세요.
도구 모음
화면 상단의 도구 모음에는 앱에 추가할 수 있는 시각적 요소들이 포함되어 있습니다. 여기에는 도형, 사진, 텍스트, 동영상, 버튼 등의 요소가 있습니다. 앱에 새로운 시각적 요소를 추가하려면, 해당 요소를 클릭한 후 원하는 위치로 드래그하기만 하면 됩니다.
도구 모음의 오른쪽에는 Tulip 앱 편집기에서 개체를 레이어링하는 데 사용할 수 있는 추가 도구가 있습니다.
컨텍스트 창
화면 오른쪽에 있는 컨텍스트 패널은 앱의 모든 서식 및 논리를 처리하는 곳입니다. 위젯 구성에 대한 자세한 내용은 여기에서 확인하세요.
세 개의 탭이 있습니다:
- 단계 탭
- 앱 탭
- 위젯 탭
'Step' 탭
'단계' 탭 에서는 다음을 확인할 수 있습니다:
- 전체 단계에 대한 서식 지정 옵션
- 이 단계의 목표 사이클 시간을 지정할 수 있습니다
- 기본 레이아웃에 지정된 레이아웃으로 재설정할 수 있습니다
- 현재 단계를 삭제할 수 있습니다
- 이 단계가 열리거나 닫힐 때마다 실행될 로직을 구성할 수 있습니다. 트리거에 대해서는 나중에 더 자세히 설명하겠습니다.
앱 탭
앱 탭:
- 앱 내의 단계를 인쇄할 수 있습니다
- 앱 전체의 사이클 타이머를 조정할 수 있습니다
- 이 앱과 관련된 모든 변수 목록을 표시합니다
- 의도한 인터페이스에 맞게 앱 해상도를 지정할 수 있습니다.
- 여러 관리자가 변경 사항을 검토하는 경우 주석을 추가할 수 있습니다
- 이 앱이 시작, 완료 또는 취소될 때마다 실행될 로직을 구축할 수 있습니다
위젯 탭
앱 내의 요소를 클릭하면 사이드 패널에 '위젯 탭'이라는 또 다른 탭이 표시됩니다. 이곳에서 앱의 다양한 시각적 요소의 형식과 상호작용 시의 동작을 조정할 수 있습니다.
앱에 로직 추가하기
로직은 사용자가 앱과 상호작용할 때 앱에서 어떤 동작이 일어날지를 결정합니다. 먼저, 트리거가 적용된 간단한 버튼을 사용하여 단계별로 이동해 보겠습니다.
- 도구 모음에서 ‘버튼’을 클릭하고 ‘버튼’을 선택합니다.
- 버튼을 원하는 위치로 드래그합니다.
- 버튼에 레이블을 추가하고, 오른쪽에 있는 컨텍스트 패널을 사용하여 서식 및 색상 옵션을 조정하세요.
- 버튼에 로직을 추가하려면 측면 패널의 ‘트리거 ( Triggers )’ 옆에 있는 ‘+’를 클릭하세요.
트리거를 사용하면 코드를 작성하지 않고도 애플리케이션에 로직을 추가할 수 있습니다. 트리거는 'when', 'if', 'then', 'else' 순서로 작동합니다.
여기서 만들 트리거는 다음과 같은 논리를 갖습니다:
When: 버튼이 눌림
Then: 현재 시간을 변수에 저장
전환: '다음' 단계로 이동.
- '저장'을 클릭합니다.
이 버튼은 사용자를 다음 단계로 이동시킵니다. 일반적으로 사용자가 이전 단계로 돌아갈 수 있도록 하는 버튼도 추가하는 것이 좋습니다.
애플리케이션의 기본 로직을 구축한 후에는 오른쪽 상단의 ‘테스트’를 클릭할 수 있습니다. 그러면 애플리케이션이 개발자 모드로 실행되어 앱을 테스트할 수 있습니다.
앱 완료 및 데이터 기록
'완료' 버튼을 추가하면 Tulip이 각 운영자와 관련된 모든 앱 데이터를 기록합니다.
이 예제에서는 앱의 마지막 단계에 버튼을 하나 더 추가해 보겠습니다.
- 앱의 마지막 단계를 선택합니다.
- '버튼(Buttons)'을 클릭하고 '완료(Complete)'를 선택합니다.
- 새 버튼을 원하는 위치로 드래그하세요.
추가 자료
다음 단계별 가이드를 활용하여 이러한 개념을 바탕으로 완전한 앱을 구축해 보세요:
원하는 정보를 찾으셨나요?
community.tulip.co에 방문하여 질문을 올리거나, 다른 분들이 비슷한 질문을 한 적이 있는지 확인해 보세요!