앱인벤터2 강좌 28: 로그인 화면 만들기

이번 시간에는 앱인벤터로 로그인 화면을 제작해 보겠다. 로그인 화면은 모든 웹, 앱의 기본사항으로 모두들 쉽게 제작할 수 있을 것이라고 생각하지만 막상 제작에 들어가 보면 상당히 까다로운 작업이 기다리고 있는 것을 알 수 있을 것이다. 로그인 화면을 다른 프로그램으로 제작하려고 하면 최소 1~2일이 걸리는 작업이지만 앱인벤터로는 1~2시간이면 충분히 제작할 수 있기 때문에 역시 쉽고 교육적인 프로그램인 것이 틀림없다. 

 

앱인벤터2 강좌 33: tinyWebDB를 이용한 로그인 화면 만들기

 

이제 디자이너 에디터 화면부터 시작해서 구체적으로 로그인 화면 제작에 대해 설명해 보기로 한다.

 

먼저 ID와 passWord를 입력하는 InputBox를 2개 배치하고 오른쪽에 LogIn 버튼을 배치한다. 앱인벤터에 경험이 많지 않은 사람이라면 화면처럼 요소들을 배치하는 것이 쉬운 일이 아니다. Components란을 잘 보면 HorizontalArrangement를 하나 두고 그 안에 VerticalArrangement를 둔다. 그런다음 VerticalArrangement 안에 위 아래로 ID와 passWord를 입력하는 InputBox를 2개 배치한다. 그리고  VerticalArrangement 를 벗어나서 그 오른쪽에 LogIn 버튼을 배치한다. 그렇게 하면 위와 같은 화면배치를 얻을 수 있다. 필자는 중간에 빈공간을 두기 위해 VerticalArrangement 대신 TableArragement를 하나 배치했다. ID는 TextBox를 쓰고, passWord는 PasswordTextBox를 쓰면 된다.

 

그 다음에는 회원가입 버튼, 회원가입시 필요한 ID InputBox와 newPassWordTextBox, 그리고 newPassWord를 재 확인하는 cofirmPassWordTextBox, 마지막으로 가입완료 버튼을 차례로 배치한다. 그리고 Non-visible components로는 ID와 passWord를 저장하기 위한 TinyDB 하나와 알림메시지를 출력하기 위한 Notifier를 하나씩 배치한다.

 

이제 ID InputBox와 newPassWordTextBox, 그리고 newPassWord를 재 확인하는 cofirmPassWordTextBox, 마지막으로 가입완료 버튼을 Visible Off 시켜서 실제 로그인에 필요한 요소들만 남긴다. 이렇게 한 상태에서 아직 회원가입을 하지 않은 사람은 회원가입 버튼을 눌러 회원가입을 할 수 있는 창으로 넘어가는 것이다. 회원가입 창은 첫번째 그림의 중단부분만 Visible On 시켜서 나타낸다.

 

 

이제 블럭 에디터로 가서 실제 프로그램은 어떻게 되는지 살펴보자. 앱을 처음 열었을때는 위 두번째 그림처럼 로그인 화면만 나타나야 한다. 처음 회원 가입을 하는 사람은 회원 가입 버튼을 눌러서 회원가입창으로 넘어가는 것이고 이미 회원가입이 된 사람은 ID와 passWord입력만으로 본 화면으로 넘어가도록 해야 하는 것이다.

Screen1.Initialize를 보면 회원가입창 부분에 해당하는 요소들은 Visible Off 시켜서 나타나지 않도록 했다. 상단의 로그인 Box들은 디자이너 화면에서 기본으로 Visible On 시켜놓은 상태이다. ID와 passWord를 받기위한 문자변수 2개도 설정한다. 

 

 

만약 회원가입이 되지 않은 사람이라면 회원가입 버튼을 눌러 회원가입을 해야한다. 회원 가입버튼을 누르면 로그인 화면에 나왔던 ID inputbox와 passWord inputbox는 보이지 않게 하고 newID와 newPassWord를 입력할 수 있는 창이 열려야 한다. 각요소들의 Visible을 On, Off 시킴으로서 필요한 화면을 얻을 수 있다.

 

 

이제 newID와 newPassWord, confirmPassWord를 입력하고 가입완료버튼을 누른후의 로직을 보자. 만약 newPassWord, confirmPassWord가 다르면 passWord가 다르므로 다시 입력하라는 메시지를 출력한다. newPassWord, confirmPassWord가 같다면 입력한 ID와 passWord를 TinyDB에 입력한다. 그런후 회원가입 창을 닫고 로그인 화면으로 넘어간다. 다시 한번 말하지만 창이 넘어가는 것은 각 요소들의 Visible을 On, Off 시키면 된다.

 

 

이제 가장 중요한 부분으로 넘어가자.  로그인 화면에서 ID와 passWord를 입력하고 'LogIn' 버튼을 누르면 어떤 로직으로 작동하는지 살펴보자. 먼저 'LogIn' 버튼을 누르면 TinyDB에서 ID와 passWord를 가져와서 'userID'와 'userPassWord' 변수에 입력한다. 그런후 사용자가 입력한 ID와 passWord가 예전에 입력한 ID, passWord와 같은지 비교한다. ID와 passWord가 같다면 Screen2가 열리게 된다. 그렇지 않고 ID와 passWord가 다르다면 'ID가 잘못되었거나 회원이 아닙니다. 회원이 아니면 회원가입부터 하 주세요.'란 메시지가 뜬다.

 

 

ID와 passWord가 같다면 Screen2가 열리면서 '로그인 성공입니다'라고 쓴 본 화면이 열린다.

 

 

테스트 화면이므로 Screen2의 내용은 아직 아무것도 없고 단지 스크린 종료만 할 수 있다.

 

여기까지 로그인 화면제작에 관해 설명을 했다. 로그인 화면을 제작하는 것은 쉬운 것 같으면서도 실제로 제작에 들어가면 여러가지 예외로 처리해야할 것들이 생겨서 꽤 까다롭다. 로그인 화면제작을 시도해 보고자 하는 사람은 위의 내용을 잘 숙지하고 여러가지 예외처리에 관한 사항도 잘 고려해서 제작해 보기 바란다.