[Thunkable] 썬커블 번역기에 언어선택 추가하기 - 01. 화면 구성 / 컴포넌트 배치

안녕하세요 Sooj입니다.
이번 시리즈에서는 이전에 만들었던 번역기 앱에 썬커블 데이터소스를 이용하여 번역 결과 언어를 선택하는 기능을 추가하는 작업을 해보려고 합니다.

썬커블로 코딩없이 만드는 번역기 시리즈에서 만들었던 번역기 앱입니다.
이번에는 이 앱에 추가로 번역 언어 선택 기능을 넣어보려고 해요.
이 화면에서 바로 작업을 시작할 예정이니 이전 시리즈를 보지 않으신 분들은 아래 링크를 참고하여 주세요!

[Thunkable] 썬커블로 코딩없이 만드는 번역기 - 01. 컴포넌트 배치 / 복제 / 그룹

[Thunkable] 썬커블로 코딩없이 만드는 번역기 - 01. 컴포넌트 배치 / 복제 / 그룹

완성된 앱 미리보기

이번 프로젝트의 결과물이 될 완성된 앱을 미리 보겠습니다.

1. 초기화면 : 앱을 실행하면 나오는 화면의 모습입니다.
2. 언어선택 : 언어선택 버튼을 누르면 번역언어의 목록이 나오고, 언어를 선택하면 목록이 사라집니다.
3. 설정완료 : 언어선택 버튼의 텍스트가 선택된 언어로 변경됩니다.
4. 번역 : 입력 박스에 한글을 입력하고 번역 시작 버튼을 누르면, 선택한 언어로 번역됩니다.

👉 이번 글에서는 완성된 앱을 참고하여 컴포넌트를 배치해서 앱의 화면부터 구성 해보려 합니다. 

화면 구성하기

화면의 위쪽에 텍스트와 언어 선택 버튼을 배치하기 위해, group_result와 group_translation의 위치를 아래로 약간 조정해 주고 시작하겠 습니다.

Label 컴포넌트 배치

Label 컴포넌트를 드래그 앤 드롭하여 화면에 배치하고 이름을 label_select로 변경한 후 그림과 같이 label_select의 텍스트 내용을 변경하고 가운데정렬로 변경해 주었습니다.

Button 컴포넌트 배치

이어서 언어 선택 버튼을 배치해 봅시다.

Button 컴포넌트를 드래그 앤 드롭하여 label_select 아래쪽으로 배치하고, 이름을 btn_select로 변경했습니다.
크기를 적당히 조정해 주고 버튼의 텍스트를 선택해주세요 라고 변경하겠습니다.

List Viewer 컴포넌트 배치

이제 btn_select를 클릭했을때 나타날 언어 목록을 만들어 보겠습니다.

컴포넌트 리스트에서 List Viewer라는 컴포넌트를 드래그 앤 드롭하여 화면에 배치한 뒤 화면 전체를 덮도록 크기를 조정합니다.
이 컴포넌트의 이름은 list_lang으로 하겠습니다.

list_lang의 배경색을 흰색으로 변경해주고 btn_select를 클릭하기 전에는 list_lang이 보이지 않아야 하므로 Visible 속성의 눈 아이콘을 클릭하여 컴포넌트를 보이지 않게 해주겠습니다.

---

언어 선택 기능 추가를 위한 컴포넌트 배치가 완료되었습니다!
다음 글에서는 구글시트를 썬커블 데이터소스로 추가하는 방법을 알아보도록 하겠습니다😙

[Thunkable] 썬커블 번역기에 언어선택 추가하기 - 02. 구글시트에서 데이터소스 추가

[Thunkable] 썬커블 번역기에 언어선택 추가하기 - 02. 구글시트에서 데이터소스 추가