outsystems - kiosk(interface, logic, data)

이번 글에서는 실제로 outsystesm플랫폼 안에서 키오스크를 어떻게 구현했는지 설명드리겠습니다.

진행을 하면서 어려웠던 부분이나 이슈들을 해결한 글들은 제가 이전글(프로젝트)에 포스팅했습니다. 참고해주세요.

 

먼저 시현영상보여드리겠습니다.

https://www.youtube.com/watch?v=SUS0NIazBq4 

---

1. 인터페이스

먼저 인터페이스입니다. 실제 인터페이스는 스크린2개 블록 4개로 구성했습니다. 

First Screen이 앱을 처음 실행했을때 화면이고 MainScreen이 실제로 주문을 진행하는 화면입니다. 

 

1.1 초기화면

초기화면의 구성은 크게 2개의 컨테이너로 구성했습니다. 

위의 컨테이너에는 매장을 소개하는 글과 이미지로 구성을 했습니다. 이를 위해 Adaptive/Columns2 위젯을 이용해 2개의 구역으로 구성했습니다. 

아래의 컨테이너에는 버튼2개로 구성했습니다. 사용자가 원하는 매장식사,포장하기를 클릭하면  해당정보가 주문목록에 포함됩니다. 버튼을 클릭하면 메인화면으로 넘어가게 됩니다.

 

1.2 메인화면

초기화면에서 넘어온 메인화면입니다. 메인화면은 크게 3가지 부분으로 구성되어있습니다. 

왼쪽에 카테고리 영역은 List로 구현, 가운데 영역은 Scroll로 구현, 오른쪽 영역은 CardSection으로 구성했습니다. 

카테고리의 ListItem을 클릭하면 각 카테고리에 맞는 메뉴들이 가운데 스크롤영역에 업데이트 됩니다. 

그리고 메뉴를 담으면 오른쪽 주문서에 선택한 메뉴가 담기게 됩니다. 

 

1.3 메뉴상세화면

메뉴를 클릭했을 때 화면입니다. 

팝업으로 구현하고 안에 블록을 추가해주었습니다.(스크린으로 해도 되지 않나요? 라는 생각이 들 수도 있습니다. 저희도 그렇게 생각했었는데 많은 스크린이 추가되면 앱의 실행속도가 줄어들 수 도 있다는 글을 봐서 팝업으로 구현했습니다.)

 

블록화면입니다. 

블록은 크게 3가지 영역으로 구현하였습니다. 

왼쪽은 메뉴의 설명, 가운데는 선택옵션 필수옵션, 오른쪽은 선택한 옵션표시, 가격, 수량 입니다. 

가운데 선택옵션 부분은 체크박스로 구현했습니다. 

List안에 체크박스를 두어 각 메뉴에 해당하는 옵션들이 표시되게 하였습니다. 

각 메뉴에 맞는 선택옵션들이 어떻게 표시되는지 잠깐 설명드리면 해당 List의 Source로 이미작성한 아래의 데이터를 블럭에 불러오게 되는데 데이터 탭에서 미리 먼저 아래와 같이 각 메뉴의 옵션들을 연결시켜줍니다. 

불러온 데이터의 필터를 다음과 같이 설정해주면 됩니다. 

 

하지만 필수선택은 어려웠습니다. 

필수선택은 하나의 옵션만 선택되어야 하기 때문에 새로운 블록으로 구성했습니다. 자세한 설명은 아래의 글을 참조고해주세요. https://myeongsu0257.tistory.com/111

outsystems - 5.5 필수옵션

 

마지막으로 선택된 옵션영역입니다.

선택옵션은 List로 구현하였고 필수옵션은 하나의 값만 있으므로 Expression위젯을 사용했습니다.

 

1.4 결제화면

결제화면입니다. 결제화면도 PopUp(팝업)으로 구현하였습니다. 

사용자가 선택한 주문들을 보여주기 위해 마찬가지로 Scroll위젯을 사용하였습니다. 

결제 수단은 버튼위젯으로 구현했습니다. 

 

 

1.5 주문목록

주문목록입니다. 주문목록화면도 팝업으로 구현하였고

Scroll안에 List로 주문한 목록들을 보여주었습니다. 

 

---

2. 로직, 변수

각 화면이나 블록 팝업에서 사용된 변수나 로직에 대해 자세히 설명드리고 싶으나 설명하기에 좀 많습니다.. 그래서 하나 정도 설명드리려고합니다.(참고로 로직은 어플리케이션 뒤에서 동작하는 방법 이라고 생각하시면 됩니다)

아래는 메인화면에서의 로직과 변수들입니다. 엄청 많습니다.. 물론 저희도 처음 사용하는거라 어수선한점 양해부탁드립니다. 

다 설명드리기에는 무리가 있는거 같아 메뉴상세화면에서 담기버튼을 클릭하였을 때의 로직에 대해 설명드리겠습니다. 

다만 제가 하면서 중요하거나 어렵다고 생각한 로직의 구현은 이전 포스팅에 있으니 참고바랍니다. 

먼저 아래의 빨간색버튼의 담기버튼을 눌렀을때입니다. 

버튼의 이벤트는 다음과 같이 속성에서 쉽게 설정할 수 있습니다. 저는 버튼을 클릭하였을때의 로직을 설정해보겠습니다.

담기 버튼을 눌렀을때의 로직입니다. 

처음에 필수옵션을 선택 안 하고 담기 버튼을 클릭했을때의 메시지를 출력하기 위해 If문을 사용했습니다. 

다음으로 ListFilter를 사용해 선택옵션중에서 체크한 값들을 반환해주었습니다.(ListFilter는 Outsystems에서 제공하는 기능)

그리고 트리거(Trigger)를 이용해 메인화면(주문서영역에 표시될)에 값들을 전달해주었습니다.(선택옵션, 필수옵션, 가격, 개수 등) 마지막으로 옵션화면에서 초기화가 필요한 값들을 초기화해주었습니다. 

이렇게하면 로직이 종료됩니다. 

 

---

3. 데이터

데이터는 다음과 같이 구성했습니다. 클릭한번으로 엔터티를 쉽게 생성 삭제 할 수 있고 관계(참조)를 드래그 만으로 구현할 수  있습니다.(1:1, N:M, 1:N 등 가능)

아래는 메뉴엔터티의 데이터입니다. 오른쪽 탭에서 속성(Attribute)를 쉽게 생성삭제할 수 있고 왼쪽아래의 Add row 버튼을 이용해 엔터티의 값을 추가할 수 있습니다. 각엔터티에는 ID라는 고유의 Primary key가 자동으로 생성됩니다. 

추가로 오른쪽에 각 엔터티의 값들을 추가,삭제,수정 할 수 있는 로직들이 자동으로 생성됩니다. 

 

추가로 사장님 앱에서 아래처럼 Dependencies 기능을 이용하여 위의 키오스크에 엔터티를 불러와 CRUD작업을 할 수 도 있습니다. (이 기능을 이용해 Kiosk에서 주문한 주문 목록을 보여주었음) 

---

6. 느낀점

Outsystems(로우코드 장점)

• 데이터 통합 : Outsystems 내장된 데이터 통합
• 데이터 모델링 : 시각적 데이터 모델구성
• 1-Click Publish : 클릭 한번으로 배포, 테스트
• 풀스택 통합 개발 환경 : UI설계, 로직구현 통합
• 프론트엔드 높은 효율성 : 시각적개발환경, 통합된 스타일 및 테마 관리

Outsystems(로우코드 단점)

• 제한된 커스터마이징(덜 유연한 UI/UX 디자인) : 맞춤형 구현 어려움
• 형상관리의 어려움 : 원할환 팀 작업 관리 및 추적 제한
• 오프라인 개발 불가 : 클라우드 기반의 개발환경 작동

개선할점

• 디버깅 : 상세한 오류메시지, 런타임 변수 모니터링, 스택 추적 기능
• 최신기술과 디자인 트렌드를 반영한 다양한 위젯 제공
• 형상관리의 구체화 : 브렌치 관리기능, 외부형상관리도구통합(Git)

Outsystems를 활용한 권장개발 방안

• outsystems의 한정적인 인터페이스를 고려한 UI/UX디자인
• 인터페이스, 데이터 처리 중점인 어플리케이션 개발
• Agile 개발 방법론 적용

---

7. 아쉬운점

• 알림기능 : 알림기능을 구현하기 위해서는 Forge의 Plguin을 다운받아 구현을 해야합니다. 관련문서를 찾아보니 배포를 하고 구현을 해야하는데 IOS는 배포를 할려면 결제를 해야하고 안드로이드는 무료배포인데 안드로이드 기기가 없었고 공기계를 구했었는데 기기 버전이 낮아 앱 설치자체가 안되어서 구현을 하지 못했음
• 결제 기능 : Apple pay, Google pay까지는 현재 Outsystems에서 제공하는데 실제로 카드결제까지 하는 기능까지 구현하지 못한것

 

---

8. 프로젝트를 마무리하며

학교에서 진행하는 산학실전캡스톤(졸업작품)수업에서 이 주제를 선택하고 outsystems로 어플을 제작하려고하니 엄청 막막했습니다. 일단 한국에서 사용하는 사람과 자료가 없었습니다. 그래서 처음에는 유튜브에서 해외에서 다른 분들이 하시던 데모들을 보면서 연습을 했었습니다. 이때까지만 하더라도 간단한 계산기정도를 구현했었습니다.. 

하지만 주제를 주신 담당 회사와 컨텍을 하고 줌미팅, 자료제공, 오프라인 교육도 해주시고 정말 많은 도움을 받았습니다. 도움을 주신 클로잇(Cloit)회사 분들 정말 감사드립니다. (아마 회사에서 도움을 주지 않으셨다면 프로젝트 완성을 하지 못 했을거 같습니다..)

outsystems를 이용해 프로젝트를 진행하면서 평소에 접해보지도 못했던 로우코드에 대한 경험을 할 수 있었습니다. 프로젝트를 진행하기 전까지 프론트엔드를 공부하고 있었는데 로우코드가 프론트엔드 부분에서 큰 효율성을 가져올 수 있다는 생각을 했습니다. 끝으로 로우코드가 국내에는 이제 도입되는 단계이지만 미래에는 정말 많이 상용화 될 수 있을 수 도 있을거 같습니다.