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

안녕하세요 Sooj입니다. 어느덧 두 번째 프로젝트네요!
이번에는 번역기 앱을 코딩 없이 썬커블로 함께 만들어보도록 할게요.

이번 프로젝트부터는 프로젝트 생성에 대한 설명을 생략하도록 하겠습니다. 프로젝트 생성에 대한 설명이 필요하신 분들은 아래 포스팅을 참조해 주세요!

[Thunkable] 썬커블로 시작하는 앱 개발 - 02. 모바일 앱 설치, 프로젝트 생성

[Thunkable] 썬커블로 시작하는 앱개발 - 02. 모바일 앱 설치, 프로젝트 생성

혹시나 썬커블을 처음 접해보시는 분들이라면 🔗썬커블로 시작하는 앱 개발 시리즈를 먼저 읽고 오시면 도움이 될 것 같습니다.

어떻게 만들 것인가?

제작에 앞서서 번역기 앱을 어떻게 만들 건지 구상해 보는 시간을 가질게요.

👉 화면에는 번역하고자 하는 텍스트를 입력할 입력 박스, 번역 시작 버튼, 번역 결과가 출력될 박스 그리고 클릭 시 번역 결과를 음성으로 읽어주는 버튼을 배치할 예정입니다.
👉 번역할 한글 문구를 입력박스에 입력하고 번역 시작 버튼을 누르면, 번역된 결과가 출력 박스에 영어로 출력됩니다.
👉 번역 후 읽어주기 버튼을 누르면, 출력 박스의 문구가 음성으로 재생됩니다.

머리속에 만들 앱의 동작이 그려지시나요~? 이제 구상한대로 앱을 만들어 볼게요.

번역기 만들기 - Design

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

컴포넌트 배치하기

우선 앱트리에서 Screen1 컴포넌트에 마우스를 올리면 보이는 연필 아이콘이나, 속성 패널에 표시한 컴포넌트 이름을 클릭하여 Screen1 컴포넌트의 이름을 screen_translation 이라고 수정해 주겠습니다.
앞으로는 추가한 컴포넌트의 이름을 그때그때 지어주면서 진행할게요!

위 이미지를 참고하여 컴포넌트를 배치해 줍니다.

1. Text Input 을 배치하고 이름을 input_text라고 변경했습니다.
2. Button 을 배치하고 이름을 btn_start이라고 변경했습니다.
3. Label 을 배치하고 이름을 box_result라고 변경했습니다.

📌 읽어주기 버튼은 컴포넌트의 속성 변경이 끝난 후 번역시작버튼을 복사하여 만들어 줄 예정이므로, 지금은 배치하지 않았습니다.

속성 변경하기

컴포넌트의 속성을 변경하겠습니다. 컴포넌트를 선택한 후 오른쪽 속성 패널에서 변경하시면 됩니다.

input_text 컴포넌트 속성

1. Text Input 속성에서 Hint 입력란에 "번역할 내용을 입력하세요."라고 적어줍니다. Hint는 Text Input 이 비어있을때 출력되는 문구를 말합니다.
2. Adanced Properties의 Editable과 Multiline 토글버튼을 활성화 시켜주세요. Editable를 활성화하면 입력박스를 수정할 수 있게 되고, Multiline은 입력박스에 텍스트를 여러줄로 입력할 수 있게 해줍니다.
3. Layout 속성에서 크기를 높이 80, 폭 280으로 변경하였습니다. 

btn_start 컴포넌트 속성

1. Button 속성에서 텍스트 입력창에 "번역하기"라고 입력하여 버튼의 텍스트를 변경해 주었습니다.
2. Layout 속성에서 버튼의 사이즈를 높이 38, 폭 280으로 변경하였습니다.
3. Style 속성에서 Background 를 조정하여 버튼의 배경색을 변경해 주었습니다.

box_result 컴포넌트 속성

1. Label 속성에서 입력란에 "여기에 결과가 나옵니다."를 입력하여 결과박스의 기본 텍스트를 변경해 줍니다.
2. Layout 속성에서 높이를 80, 너비를 280으로 사이즈 조정해 줍니다.
3. Style의 Border속성을 변경하여 결과박스의 윤곽선을 보이게 변경해 주겠습니다. Border 클릭시 나오는 창에서 Width값을 조정하여 선 굵기를 변경하고, 선색도 변경해 주었습니다.

UI 컴포넌트 복제하기

앞서 컴포넌트를 배치할때 읽어주기 버튼을 제외하고 배치했었죠?
이제 btn_start의 스타일링이 끝났으니, 이 컴포넌트를 복제하여 읽어주기 버튼을 생성하겠습니다.

앱트리나 스크린에서 복제할 컴포넌트를 선택한 후 Control + C, Control + V (맥 사용자의 경우 Control을 Command로 변경) 하여 복사 붙여넣기 하거나, 속성 패널에서 컴포넌트 메뉴를 클릭한 후 Duplicate를 선택하는 방법으로 컴포넌트를 복제할 수 있습니다.

btn_start를 복제한 컴포넌트의 이름을 btn_read으로 변경하고 배치한 뒤, 버튼의 텍스트와 색을 변경해 주었습니다.

현재까지의 진행상황을 Web Preview로 점검해 줄게요.

이렇게 배치된 모습을 확인하실 수 있습니다.

그룹 지어주기

우리가 만들 번역기 앱은 크게 입력 하는 부분과 결과가 표시되는 부분 두 가지 부분을 가지고 있는데요.
이번에는 Group 컴포넌트를 이용해 연관있는 컴포넌트끼리 그룹을 지어주는 작업을 해보겠습니다.

Group 컴포넌트를 드래그 한 후, 적당한 크기로 조절해 주겠습니다.
Group 컴포넌트의 이름은 group_translation으로 변경하였습니다.

이제 만든 group_translation 안으로 input_text와 btn_start를 쏙쏙 넣어줍니다. 
앱트리에서도 group_translation 안으로 종속된 input_text와btn_start의 모습을 확인할 수 있습니다.

이제 group_translation을 선택해 드래그하여 배치해 보면 그룹 안에 종속된 컴포넌트들이 하나로 묶여 움직이는걸 확인할 수 있습니다.
같은 방법으로 Group 컴포넌트 group_result을 생성하여, box_result와 btn_read를 그룹으로 묶어 보세요.

이렇게 두개의 그룹을 가진 화면이 완성되었습니다.

✏️ 그룹 컴포넌트를 활용하면 복잡한 레이아웃을 하나로 묶을 수 있어 배치가 편해지고, 그룹을 통째로 복제하는것이 가능하므로 반복되는 디자인을 할 때 유용합니다.

다음 포스팅에서는 오늘 배치한 화면을 바탕으로 블록코딩을 진행해 보겠습니다.
읽어주셔서 감사합니다!

[Thunkable] 썬커블로 코딩없이 만드는 번역기 - 02. 블록코딩 / 테스트

[Thunkable] 썬커블로 코딩없이 만드는 번역기 - 02. 블록코딩 / 테스트