🙌 기업 연계 캡스톤 : 앱 출시 + 출시하자마자 겪은 이슈 해결기

https://play.google.com/store/apps/details?id=com.boo.boo100word

Boo100-혼자그리며 배우는 100개의 영어단어 공부 - Google Play 앱

출시~!

방학동안 인턴을 진행했던 기업의 대표님께서 기업 프로젝트를 제안 주셔서 9월부터 개발 작업을 진행해왔다.

드디어 개발이 마무리되고 플레이 스토어에 출시되었다!!! 

 

규모가 큰 프로젝트는 아니었지만 동료 개발자분과 코드 리뷰도 나누고 여러 내용을 익힐 수 있어서 유익한 시간이었다.

---

바로 문제 발생....!!!!

그런데 출시된 앱을 기기에 설치하여 실행시켜본 순간 잘못되었음을 직감했다...

애뮬레이터를 통해 레이아웃도 수정하고 테스트해보며 앱이 출시되고 기능도 모두 정상작동했기에  당연히 아무 문제가 없을 것이라고 생각했다. 그런데  어플 설치 후 실행했을 때 레이아웃이 너무 크게 나와 화면을 가득 채우고 있었다. 

 

알아보니 애뮬레이터 사이즈에 맞추어서 절대적인 크기(dp)로 사이즈를 지정해준 것이 원인이었다. 화면 크기가 모두 다르기 때문에 레이아웃이 맞지 않았던 것이다.

 

해결 방법을 알아보던 중 비율을 통해 레이아웃을 지정하는 방법을 통해 문제를 해결할 수 있었다.

지금까지는 contraintLayout에서 뷰 간의 contraint를 설정해주는 것으로 상대적인 레이아웃 구성이 되는 줄 알고 있었는데,,, 이 속성들을 알고 그동안은 contraintLayout을 제대로 사용하지 않았다고 할 수 있겠구나... 하고 느꼈다!!

 

1 . layout_contraint[Height/Width]_percent  속성 

- layout_constraintHeight_percent

- layout_constraintWidth_percent

 

이 두 속성은 ConstraintLayout에서 뷰의 크기를 부모 컨테이너에 대한 비율로 설정할 수 있게 해주는 속성이다.

만약 app:layout_constraintWidth_percent="0.7" 라고 설정한 경우 너비가 부모 너비의 70%를 차지하게 된다.

 

이 때 부모 레이아웃의 경우 ConstraintLayout이어야하고, 해당 뷰의 너비는 0dp로 설정되어있어야한다.

 

이렇게 변경한 코드를 보면 아래와 같다. 

기존에는 현재 앱을 실행한 기기의 화면 상에서만 적합한 레이아웃이었다면, 변경을 통해서 다양한 크기의 화면에서도 원하는 레이아웃대로 보이도록 구현할 수 있게 되었다.

// 기존 
android:layout_width="200dp"
android:layout_height="120dp"

// 변경
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintWidth_percent="0.4"
app:layout_constraintHeight_percent="0.1"

 

2. Guideline 

GuideLine은 레이아웃에서 보이지 않는 가이드 선을 만들어서 뷰를 배치해줄 때 도움을 주는 뷰이다.

나도 배경이 되는이미지뷰 위에서 다른 뷰들을 배치할 때 부모를 기준으로 배치하는 것에 어려움을 있었는데, 이 가이드라인을 통해서 보다 편하게 원하는 레이아웃을 구현할 수 있었다.

// 1. 가이드 라인 설정
<androidx.constraintlayout.widget.Guideline
    android:id="@+id/boo_guide"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.4" />
    
// 2. 가이드라인을 기준으로 뷰 배치
app:layout_constraintTop_toBottomOf="@+id/boo_guide"

 

이 2가지 속성을 통해 상대적인 화면 크기에서도 원하는 형태의 디자인을 보여줄 수 있었다

아래는 이렇게 변경 후 테스트를 진행했을 때 화면이다 :D

---

변경 후 화면

플레이 스토어 상에서도 변경 사항이 반영되어 다시 설치 후 실행시켜보았다

 

마무리

이번에 레이아웃 관련 이슈를 겪으면서 다양한 화면 크기를 대응할 수 있는 레이아웃을 작성해야한다는 것 그리고 여러 화면 크기(작은 ~ 중간 ~ 큰) 화면에서 테스트를 해봐야함을 알 수 있었다!!

 

화면 크기에 맞는 레이아웃 코드를 작성하는 방법도 알게되었던 좋은 문제 해결 과정이었다~~!!