안드로이드 서버 연동 예제 화면 구성
이런저런 안드로이드 앱을 만들어보면서 공부를 하고 있는데 이번에는 서버와 연동하는 [회원가입] 예제를 만들어보면서 정리를 해보려고 합니다. 이 글은 누군가에게 정보를 제공한다는 의미보다는 제가 나중에 다시 참고하기 위해서 정리하는 글이라서 많이 부족한 점 이해 부탁드리고 참고하실 분들은 대충 다른 사람이 정리해 놓은 노트 보듯이 가볍게 봐주시면 감사하겠습니다.
현재 저는 윈도우에 VMware 가상머신을 설치해서 우분투 리눅스를 설치하고 아파치와 PHP 등으로 서버를 구축해 놓은 상태인데요. 그 과정은 아래 글 참고하시고...
이번 글부터는 안드로이드와 서버를 연동해서 회원가입 및 로그인하는 과정을 정리해보려고 합니다. 예제는 아주 간단한데요. 안드로이드 폰에서 아이디와 비밀번호를 설정해서 회원가입을 하면 서버에 데이터가 저장이 되고 폰에서 로그인을 하면 서버의 데이터를 기반으로 정상 로그인 되는 과정입니다.
먼저 안드로이드 프로젝트를 생성해서 UI 구성부터 하겠습니다.
▲ 대충 이렇게 만들어봤는데요. 우리가 하루에도 몇 번씩 접하는 익숙한 화면이죠? 레이아웃 XML 코드는 대충 다음과 같습니다.
▲ 에고...ㅠ.ㅠ Activity 이름을 적당히 변경을 했었어야 했는데.... Main을 그대로 두고 시작을 해버렸군요. 혹시 이 글을 보시는 분들이 만드실 때에는 Login 등 적당한 이름으로 변경하시는 게 좋겠죠?^^; 저는 그냥 두고 진행을 합니다. 화면 구성은 아이디와 비번을 입력할 수 있는 두 개의 EditTextView와 로그인하기 위한 Button, 그리고 회원가입 화면으로 넘어갈 TextView로 구성되어 있고요. 각각의 아이디를 적당히 설정했습니다.
이제 두 번째 화면을 구성할게요. 앱을 실행해서 위 화면을 처음 만나면 회원가입을 하기 위해서 맨 아래 있는 회원가입(TextView)을 선택할 테고 그 녀석을 누르면 회원 정보를 입력하고 가입할 수 있는 아래와 같은 화면이 필요하게 될 것입니다.
▲ 각종 정보를 입력할 화면 구성을 위한 액티비티를 하나 만들고요.
▲ 액티비티 이름은 Register로 설정을 했습니다.
▲ 그리고 아이디와 비밀번호를 설정할 수 있는 EditText 두 개와 회원가입을 위한 버튼을 배치했습니다. 실제로 이런 앱에서는 이보다 많은 정보가 필요하겠지만 서버 연동 개념을 정리하기 위한 글이니 최대한 간단하게 아이디와 비번만 입력해서 회원가입할 수 있게 하고 진행을 합니다. 여기에 입력한 아이디와 비번은 저 버튼을 누름과 동시에 서버로 전송이 될 것이고 이 화면을 빠져나가면서 처음 로그인 화면으로 돌아가게 될 것입니다.
▲ 회원가입 화면의 레이아웃 코드는 위와 같고요.
이제 마지막으로 로그인 화면에서 아이디와 비밀번호를 입력하고 로그인하면 나타나게 될 매인 페이지 화면을 구성하기 위해서 액티비티를 하나 더 만들고 화면 구성을 할게요.
▲ 액티비티 이름은 Welcome으로 했고요. 가운데 TextView를 하나 배치해서 환영한다는 메시지가 출력되도록 할 생각입니다.
▲ 대충 제 머리속에 있는 화면 구성은 끝난 거 같으니...
첫 로그인 페이지(MainActivity)에서 회원가입을 위한 페이지로 이동하기 위한 Intent 연결을 하겠습니다.
▲ 두 개의 EditText와 Button, 그리고 TextView를 각각 id로 찾아서 변수에 저장을 했고요. 마지막의 회원가입 (registerText) 텍스트를 클릭하면 가입을 위한 화면으로 전환되도록 Intent를 연결했습니다. 이제 앱을 실행해서 제대로 작동을 하는지 확인해볼게요.
▲ 이렇게 해서 안드로이드 서버 연동 예제 중 필요한 화면들만 구성을 해봤습니다. 그런데 '로그인' 화면과 '회원가입' 화면이 비슷해서 구분이 잘 안돼서 좀 그렇네요. ㅎ 제대로 만들면 주소나 이름, 이메일 등 더 다양한 정보들을 입력해야 할 테지만 이번 예제에서는 일단 아이디와 비밀번호 만으로 구성을 하고 넘어가기로 하고요.
다음 글에서는 회원가입 화면에서 아이디와 비번을 설정하고 가입 버튼을 누르면 서버로 데이터가 전달되는 내용을 정리하기로 하고 이번 글은 여기서 마무리할게요.