[Thunkable] 썬커블로 코딩없이 만드는 이미지 인식 앱 - 01. 프로젝트 생성, 디자인

안녕하세요. Sooj입니다. 
저번 시리즈에서는 썬커블의 기본적인 사용법을 익히고 간단한 샘플 앱까지 제작해 보았습니다.
이번에는 공부한것을 바탕으로 Camera 앱 기능을 이용한 이미지 인식 앱을 만들어보려고 해요!

👇 썬커블을 처음 접해보시거나 기억나지 않으시면 저의 예전 포스팅을 참고해주세요!

[Thunkable] I. 썬커블로 시작하는 앱 개발 - 01. 썬커블을 선택한 이유

[Thunkable] I. 썬커블로 시작하는 앱개발 - 01. 썬커블을 선택한 이유

프로젝트 생성

프로젝트 생성은 이미 저번 포스팅에서 소개했으니 빠르게 넘어갈게요!

1. Create New App을 눌러 "이미지 인식기"라는 프로젝트를 생성하겠습니다.
2. 카테고리는 원하는대로 설정해주세요. 저는 Utilities로 설정했습니다.
3. Drag and Drop빌더를 사용할 예정이므로 Use the Drag and Drop builder 체크하고 생성하겠습니다.

어떻게 만들 것인가?

제작에 앞서 이 "이미지 인식기" 앱을 어떻게 만들 것인지 간단히 구상해 보겠습니다.

👉 화면에 촬영 버튼과 텍스트를 배치하고,
👉 촬영 버튼을 누르면 카메라가 호출되어 사진을 찍은 후
👉 다시 화면으로 돌아와 촬영한 결과 이미지와 함께 이 이미지를 인식한 결과를 텍스트에 표시한다.

이렇게 정리할 수 있겠네요. 그럼 구상한 대로 앱을 만들어 볼까요?

이미지 인식 앱 만들기 - Design

📌 화면을 구성하는 UI 컴포넌트를 배치하고 수정하여 앱의 겉모양을 디자인하겠습니다.

UI 컴포넌트를 배치하자

우선 화면에 필요한 UI 컴포넌트를 배치해 봅시다.
Image, Label, Button 컴포넌트를 스크린으로 끌어와 다음과 같이 적당한 자리에 배치해 줍니다.

그리고 앱트리에서 UI 컴포넌트의 이름을 변경할게요.
컴포넌트의 개수가 많아질수록 알아보기 힘들어지더라구요ㅠㅠ 그때그때 이름을 지어놓는 습관을 들이면 좋을 것 같습니다.

컴포넌트의 이름은, 앱트리에서 UI 컴포넌트에 마우스를 올리면 나오는 연필 아이콘을 클릭해 변경할 수 있습니다.
또는 오른쪽 속성 패널 상단의 UI 컴포넌트명을 클릭해도 변경할 수 있습니다.
위의 이미지를 참고하여 아래와 같이 UI 컴포넌트 이름을 변경해 주었습니다!

Screen1을 앱화면으로, Button1을 촬영버튼으로, Label1을 결과텍스트로, Image1을 이미지로 변경했습니다.

UI 컴포넌트의 속성 변경

이제 각 UI 컴포넌트의 속성을 변경할게요~ 앱 트리나 스크린에서 UI 컴포넌트를 선택한 후 오른쪽 속성 패널에서 속성을 변경할 수 있습니다.

"촬영 버튼" 의 속성 

1. Button 속성 변경에서 텍스트 입력 창에 "촬영하기"라고 입력하여 버튼의 텍스트를 변경해 주었습니다.
2. Layout 속성 변경에서 컴포넌트의 가로 폭을 100으로 변경했습니다.
3. Style 속성 변경에서 Background 색을 마음에 드는 색으로 조정했습니다.

"결과텍스트" 의 속성

1. Label 속성 변경에서 텍스트 입력 창에 "이미지를 촬영해 주세요."라고 입력하여 결과텍스트의 문구를 변경했습니다.
2. Label 속성의 Essentials에서 표시된 텍스트 정렬 아이콘을 클릭하여 중앙 정렬로 변경해 주었습니다.
3. Layout 속성의 컴포넌트 높이를 80, 폭을 240으로 조정하였습니다.

"이미지" 의 속성

1. Layout속성의 컴포넌트 높이를 200, 폭도 200으로 조정하였습니다.

컴포넌트의 속성을 변경한 후, 다시 UI 컴포넌트들을 드래그앤드롭하여 알맞은 위치로 편집하였습니다. 

배치가 끝난 것 같으니, 프로젝트 상단의 Web Preview 버튼을 눌러 현재까지의 앱 작업을 점검해 보겠습니다.

Web Preview 화면입니다.
편집 화면에서는 몰랐는데, Web Preview로 보니 촬영된 사진이 없는 상태의 이미지 컴포넌트 자리가 비어있어 허전하네요. 
사진이 없을 경우 임시 이미지를 넣어서 "여기에 촬영한 사진이 나올 것"이라는 걸 표시해주면 좋을 것 같아요.
다음 포스팅에서 에셋(Assets)을 활용하여 이 문제를 해결해 보도록 하겠습니다.

[Thunkable] 썬커블로 코딩없이 만드는 이미지 인식 앱 - 02. 에셋(Assets) 패널 사용하기

[Thunkable] 썬커블로 코딩없이 만드는 이미지 인식 앱 - 02. 에셋(Assets) 패널 사용하기

함께 해주셔서 감사합니다!