001. 버튼 누르면 글자가 바뀌는 앱

1.작품 미리보기

Thunkable이라는 사이트에서 이번에 만들 모바일 앱은 "버튼 글자 변경 앱"입니다.

다음의 이미지를 참고해 주세요.

---

2.Thunkable 앱 개발하기

2.1.구글 로그인하기

Thunkable은 구글 소셜 로그인을 지원하기 때문에, 구글 회원가입 후, 구글 사이트에 로그인을 먼저 진행합니다.

구글 사이트는 www.google.com

---

2.2.Thunkable 사이트 로그인 하기

Thunkable 사이트를 구글에서 검색하여 들어가, 로그인을 합니다.

 

---

2.3.새 프로젝트 만들기

Thunkable 사이트에 로그인이 완료된 후, "Start Building"을 눌러 줍니다.

 

 

그러면 아래와 같이 화면이 뜹니다.

Project Name은 "change_letters_by_button" 이라고 했습니다. 이 부분은 아무렇게나 하셔도 상관없습니다.

그리고 오른쪽 아래에 "Try it out"을 체크해주세요. 이 부분은 앱 디자인을 드래그 앤 드랍 형태로 쉽게 할 수 있게 해주는 부분입니다. 그리고 "Create"을 누르면 새로운 앱 개발 환경이 만들어 집니다.

---

2.4.디자인 하기

가운데 모바일 화면에 버튼 하나를 마우스로 끌어 놓습니다. 그리고 버튼의 크기를 마우스로 적당히 크게 해줍니다.

 

 

 

버튼의 글자크기(Font Size)를 35로 해줍니다.

 

버튼의 글자(Text) = "Click me" , 버튼의 배경색(Background Color) = 초록색 으로 변경해줍니다.

 

 

---

2.5. 코딩하기

이제 앱 디자인은 모두 마쳤습니다. 앱을 작동시키기 위해 코딩을 해야 합니다. 

[1] 왼쪽 상단의 "Blocks"를 클릭하여 코딩 화면으로 갑니다.

 

[2] 버튼을 누르면~ 이라는 명령블록(when Button1 Click)을 하나 가져옵니다.

 

 

[3] 버튼을 눌렀을 때 버튼의 글자(Text)가 "Click me"이라면 글자를 "Welcome to my Apps"로 변경되게 해주고

"Welcome to my Apps"라면 "Click me"로 되돌려 주는 동작을 만들려고 합니다.

 

그래서 먼저, 만약 ~ 라면, 아니면(if~else) 블록에 ~와 같은지(=)를 체크하는 블록을 끼워 넣어 줍니다.

 

 

[4] 버튼을 눌렀을 때, 버튼의 글자(Button1's Text)가 "Welcome to my Apps"와 같다면, 버튼의 글자를 "Click me"로 변경해 줍니다.

 

[5] 버튼을 눌렀을 때 버튼의 글자가 "Welcome to my Apps"가 아니라면(else) 버튼의 글자를 "Click me"로 변경해줍니다.

 

---

3.앱 테스트 해보기

화면 오른쪽 위의 "Web Preview"를 클릭하여 앱 실행 테스트를 해봅니다.