2.8 앱인벤터와 비교해본 안드로이드 스튜디오 LOGIN 코딩

 

 

안드로이드 코드 작성이 까다로운 이유는 무엇일까? 배우기 쉬운 앱인벤터 코딩에서는 모든 코딩 작업이 가시적인 그래픽 방식에 의해서 이루어진다는 점이다. 가시적이라고 해서 다 좋은 것은 아니지만 적어도 코딩 작업에 관한한 시각적인 이해 정도면 웬만한 앱을 작성할 수 있다는 점이다. 쉽게 표현해서 윈도우즈의 그림판 소프트웨어를 다룰 정도라면 간단하게 앱 코드를 작성할 수 있다는 것이다. 이에 반하여 안드로이드 스튜디오 코딩은 텍스트 기반의 코딩으로서 동시에 가시적인 그래픽 지원도 따른다. 따라서 안드로이드 스튜디오 코딩을 제대로 배워나가기 위해서는 이미 블로그에 게재했던 계산기와 Camera 같은 예제에서처럼 안드로이드 스튜디오 특유의 코드 구조에 익숙해져야 한다. 결국 스마트폰 앱 코딩이기 때문에 작성하려는 앱 특유의 스마트폰 화면을 상정하고 필요한 구성 품(Components)들을 담을 수 있어야 한다. 구성 품이라 함은 앱인벤터의 버튼(button), 라벨(label), 텍스트 박스(textbox)와 같은 요소들을 의미하며 결구 안드로이드 스튜디오의 구성 품들과 일치하는 것들이다.

 

결국 본격적인 안드로이드 코딩에 들어가기 위한 초기의 핵심적인 연습으로서 너무나 보편적으로 사용해 왔던 LOGIN 화면 구성에 대해서 알아보기로 한다.

    안드로이드 스튜디오에서 다음 그림과 같이 res≻layout의 activity_logn.xml의 Design에서 전체적으로 LinearLayout을 잡은 상태에서 위에서 아래로 배치하되 마지막 2개의 textView 박스가 들어 있는 곳에서는 다시 LinearLayout을 한 번 더 사용한 구조이다. 문자열이나 그림의 크기는 사용자가 임의로 보기 좋을 정도의 디자인 값을 임의로 주도록 한다.

 

다음은 앱인벤터에서의 10분가량 소모된 신속한 디자인 결과이다. 앱인벤터는 안드로이드 스튜디오의 부분 집합적이기는 하지만 LOGIN activity 화면 정도는 큰 차이 없이 그래픽 방식의 코딩이 가능하며 Blocks 단계에서 퍼즐 끼워 맞추기 방식의 구성품들 간의 인터페이스 코딩이 따라야 한다. 앱인벤터에서 TextBox, Label, Button은 안드로이드에서는 TextView, EditText, Button에 각각 해당한다. 물론 안드로이드 스튜디오를 사용해야 정교한 스마트폰 앱을 코딩할 수 있겠지만 초보자 입장에서 배워야 할 쉬운 예제들은 앱인벤터로도 구현이 되므로 안드로이드 스튜디오 코딩이 이해되지 않을 때에는 앱인벤터 방식으로 생각하면 웬만한 의문사항은 충분히 풀어 낼 수 있을 것이다.

 

 

안드로이드 스튜디오에서 나머지 코딩 부분을 다루는 유튜브 동영상을 찾아서 연습해 보도록 하자.

한편 앱인벤터를 제대로 배우기 위한 지름길로서는 필자의 다음 블로그 검색 박스에서 앱인벤터로 검색하면 많은 유용한 자료를 찾아 볼 수 있을 것이다.

 

앱 인벤터 시작

http://blog.daum.net/ejleep1/481

 

Login 앱 작성에 있어서 현재는 안드로이드 로고를 임시로 불러서 붙여넣기 하였으나 그 보다는 build.gradle(Modeule:app)의 dependencies에 아래와 같이 android.support.design을 추가하도록 한다. 이 라이브러리는 구글이 제공하는데 버전 별로 업그레이드되어 현재 28.0.0 인데 바로 앞의 appcompat-v7:28.0.0 이 이미 입력되어 있는 것으로 봐사 안드로이드 스튜디오 3,5,3과 호환인 듯하다. 이 라이브러리의 지원 하에 material design에서 끌어온 이미지 파일들을 읽어 들일 수 있는 API 이다. 추가하자마자 Sync Now를 클릭하여 업그레이드 하도록 한다.

Login 레이아웃을 준비함에 있어 필요한 그림파일들이 있으므로 material design에서 다운 받던지 아니면 그림판에서 캡춰하여 png 파일로 준비했다가 res≻drawable 폴더에 하나씩 등록하여 저장하도록 하자.

준비된 icon_present.png 파일을 activity_login.xml 의 Text 모드에서 다음과 같이 바꾸어치기 하자. 그림파일의 크기는 matched_parent 또는 wrap_content를 사용하여 조절하고 필요하면 width 나 height 숫자 값을 부여하며 맞추면 된다. RUN ‘app’을 해 보도록 하자. 이로서 resource 즉 res 폴더의 drawable 의 역할을 알아보았다.

다음은 EditText에서 Hint로 처리되어 있는 Email 과 Password에서 데이터를 입력하면 사라졌다가 다시 나타나도록 처리하자. 이 부분은 특수한 HTML CSS 코딩 영역에 해당한다고 보여 진다. EditText 부분을 변경하기 위해서 그 앞에 ≺Input을 입력하면 2종류이 옵션이 나타나는데 TextInputLayout을 선택하자.

디음과 같이 ≺android.support.∙∙∙/> 코드를 추가 입력하면 오른쪽 그림에서 볼 수 있듯이 별도의 수평 레이아웃이 하나 더 생성되며 디바이스에서는 위첨자 위치로 이동한다. Password에 대해서도 비슷하게 처리하고 EditText를 제거하자.

Email 과 Password 각각을 사용할 때 다음과 같은 형태를 보여준다.

 

 

둥근 모서리를 가지는 하늘색 버튼을 생성하기 위해 drawable 폴더에 xml 파일을 하나 생성하도록 한다. ic_launcher_background.xml을 복사해서 drawable에 붙여넣기 한 후 파일명 btn_blue.xml 으로 처리하자. HTML에서 ≺SVG≻ 그래픽 처리에서 하듯이 btn_blue.xml을 다음과 같이 코딩하도록 한다. 한편 이 xml 은 activity_login.xml에서 그 주소를 반드시 참조해야 한다.

마지막으로 버튼이 클릭하였을 때(“presed”) 버튼 색깔을 변화 시킬 수 있도록 btn_blue.xml 코드를 다음과 같이 수정하자.

출력 결과 LOGIN 버튼을 클릭하면 노란 색으로 바뀐다.

 

앱인벤터 코딩이 비교적 간단하기는 하지만 안드로이드 스튜디오처럼 세밀한 디자인까지 지원하지는 않는다. 이와 같이 레이아웃 디자인이 어느 정도 준비되었으면 이 레이아웃을 사용하는 코딩을 엿보기로 한다.

 

첨부한 코드를 다운받아 살펴보고 사용자별로 Login 스크린 화면을 디자인해 보도록 하자.

LoginLayout.zip

 

 

 

LoginLayout.zip

0.14MB