이 글은 독학으로 앱 만들어보기 시리즈로 앱을 만들기 위한 기술 공부와 기획 디자인 모두 다뤄볼 예정입니다. 이번 포스팅에서는 지루했던 이론들을 지나 드디어 화면을 구성하고 구성한 화면을 확인하는 방법에 대해 알아보겠습니다.
2021.09.28 - [개발] - (1) 독학으로 앱 만들어보기 (인터넷 검색, 공부 방법, 코틀린)
(1) 독학으로 앱 만들어보기 (인터넷 검색, 공부 방법, 코틀린)
독학으로 앱 만들기 시작 저는 평소에 아이디어가 넘치는 사람이고, 아이디어를 구현해내는 것을 좋아합니다. 그중에서 건강 관련하여 만들어보고 싶은 어플이 있어서 공부를 해보려고 합니다.
dev-nasus.tistory.com
화면 만들기?
우리가 보이는 화면, 핸드폰에서 보이는 화면을 레이아웃이라는 용어로도 부릅니다. 정확하게 화면이 레이아웃이다!라고 할 수는 없지만, 많은 레이아웃으로 화면을 만든다. 이렇게는 말할 수 있을 거 같습니다. 오늘도 학습 가이드에 따라 차근히 학습해 보겠습니다.
탐구하다 버튼을 눌러보면, 생일 카드 앱 디자인, 생일 카드 앱 만들기, Android 앱에 이미지 추가에 대한 내용이 있습니다. 첫번 째 생일 카드 앱 디자인은 이번 학습에서는 어떤 걸 학습할 것인지 알려주는 유튜브 영상입니다. 요약하자면 생일 축하하는 문구와 이미지를 보여주는 앱을 만들겠다는 내용입니다. 저는 바로 생일 카드 앱 만들기로 가보겠습니다.
이번 학습을 위해서는 두가지가 꼭 필요하다고 합니다. 안드로이드 스튜디오에서 새롭게 프로젝트 만드는 법, 그리고 애뮬레이터를 실행하여 앱 실행 화면을 확인하는 방법입니다. 이 두 가지를 모르고 지금 글을 보고 계시다면, 아래 기존 포스팅을 먼저 학습해주세요.
2021.12.17 - [개발] - (4) 독학으로 앱 만들어보기 (안드로이드 스튜디오 학습)
(4) 독학으로 앱 만들어보기 (안드로이드 스튜디오 학습)
이 글은 독학으로 앱 만들어보기 시리즈로 앱을 만들기 위한 기술 공부와 기획 디자인 모두 다뤄볼 예정입니다. 이번 포스팅에서는 앱을 만들기 위해 안드로이드 스튜디오 학습을 해보겠습니다
dev-nasus.tistory.com
이번에 학습할 내용에 Views, ViewGroups, TextView 이런 단어들이 보입니다. 저런 단어들과 개념을 이해하면 저기 보이는 Happy Birthday, Sam! 이라는 문구를 작성하고 보여줄 수 있는 거 같습니다. 다음으로 넘어가 보겠습니다.
View? Views? ViewGroup?!
이상한 단어들이 막 쏟아져 나옵니다. 아래와 같이 설명이 되어있는데,,, 음,,, 우선 한번 정독 해보시길 바랍니다. 제가 밑에 제가 이해한 내용을 풀어서 설명해보겠습니다.
지금 말하는 개념은 앱 개발 뿐만 아니라, 웹 홈페이지 만들 때나 디자인 툴을 다룰 때도 비슷한 개념으로 사용하오니 한번 잘 알아두시면 여러 분야에서 더 빨리 적응하실 거라 생각합니다.
View는 앱 화면에 표시되는 것. Views도 앱화면에 표시되는 것인데 사용자와 상호작용 할 수 있는 것. ViewGroup은 View와 Views의 그룹을 만들어 영역을 제한하는 것.입니다. 이게 기본적인 틀과 용어이고 세부적으로는 TextView, EditView 등등 용도에 따라 뷰의 이름을 다르게 부릅니다.
우리가 실제로 사용하는 앱을 예시로 설명해보겠습니다. 당근마켓 홈페이지에 들어가서 앱 화면을 보겠습니다.
마우스로 글씨를 작성해서 악필인데 양해부탁드립니다^^; 플로어 스탠드라고 적혀있는 건 눌러도 바꿀 수 없고 반응하지 않는 단순히 보여주는 용도의 텍스트입니다. 이런 것을 보고 View라고 합니다. 반면에 댓글이나 하트 누르기 기능은 화면을 누르면 어떠한 액션이 일어납니다. 이렇게 화면에 보이면서 액션이 일어나는 것을 Views라고 합니다. 마지막으로 View와 Views가 함께 있고 반복되는 영역을 ViewGroup으로 묶어서 관리합니다. 이해가 되시나요? 이해가 안 돼도 용어에 너무 집착할 필요는 없습니다. 어차피 우리가 하려는 것은 앱을 만드는 것이지 용어를 공부하는 게 아니니까요. 계속 이어서 따라 하다 보면 자연스럽게 이해가 되실 겁니다.
이제 용어 설명 이후에 안드로이드 스튜디오에서 View와 Layout 같은 화면들을 설정하는 방법에 대해 설명이 되어있습니다. 이것은 어려운 부분이 아니라고 생각되어 넘어가겠습니다. 천천히 읽어보시고 급하게 빠르게 이것저것 막 눌러보는 것보다 한 줄 한줄 읽어가면서 알려주는 대로 따라 하시는 걸 추천드립니다.
TextView
글자가 보이는 화면을 TextView라고 부르는 것 같습니다. 아래 그림과 같이 TextView를 선택하고 드래그 앤 드롭으로 빈 화면에 마우스를 갖다 놓으면 간단하게 TextView가 추가되고 글씨를 수정할 수 있습니다.
저는 아래 그림처럼 뷰의 위치를 이동시키는데 생각보다 매끄럽게 되지 않아서 살짝 당혹스러웠습니다. 여러분들도 하실 때 잘 읽고 시행착오를 몇 번 겪어보시면서 ConstrainLayout 이 어떻게 작용하는지 경험하시면 좋을 거 같습니다.
이렇게 글씨를 추가하고 위치도 원하는 곳에 배치하여 화면을 구성해보시면, 글씨의 크기나 폰트 같은 것이 좀 구리게(?) 느껴집니다. 그래서 이 학습에서 글씨의 크기와 폰트 등의 여러 가지 표현 방법에 대해 조절하는 것을 배우게 됩니다. 따라 하는데 당혹스럽거나 이해가 안 되는 부분이 없었어서 이번 포스팅은 여기서 마치고, 다음 포스팅에서는 이미지를 추가하는 방법에 대해 알아보겠습니다. 이번 학습을 따라 하게 되면 최종적으로 아래와 같은 화면을 만들 수 있습니다.
이번 학습을 통해 저번에 미리 구상해 두었던 화면을 어떻게 배치해야 할지 조금은 감이 잡히기 시작했습니다. 좀 더 학습하고 바로 적용해볼 수 있는 것들은 바로 적용하는 내용에 대해 작성해 보겠습니다.
'개발' 카테고리의 다른 글
| (9) 독학으로 앱 만들어보기 (스스로 만들어보기, 초보가 겪는 고통) (2) | 2022.06.08 |
|---|---|
| (8) 독학으로 앱 만들어보기 (화면에 이미지 넣기) (0) | 2022.04.22 |
| (6) 독학으로 앱 만들어보기 (자동 테스트란?) (0) | 2022.03.17 |
| (5) 독학으로 앱 만들어보기 (아이디어 도출, 구상하는 법) (0) | 2022.03.16 |
| Burp Suite 사용 방법 및 해킹 실습 (1) (0) | 2022.01.06 |
댓글