안녕하세요. 아이들나라 Android 개발자 어혜령입니다.
아이들나라의 독서 모드에는 “아이에게 책을 읽어주는 오디오북 유형”과 “아이가 직접 조작하여 책을 읽을 수 있는 리딩북 유형”이 새롭게 추가되었습니다. 이에 따라 도서의 다양한 콘텐츠 유형으로 재생할 수 있도록 하는 독서 콘텐츠 상세 화면이 추가되었습니다.
독서 콘텐츠 상세 화면은 도서와 관련된 다양한 정보를 제공하고, 비슷한 도서를 추천해주고, 독서일기, 퀴즈, 워크지와 같은 다양한 독후활동으로 이어질 수 있도록 구성되었습니다. 이런 다양한 정보를 잘 전달하기 위해서는 디자인이 중요했습니다.
독서 콘텐츠 상세 화면의 디자인을 더 잘 구현하기 위해서, 안드로이드에서는 이전까지 사용해오던 common_dp 방식에서 벗어나서 고정된 dp 방식을 사용하게 되었습니다. 이번에 안드로이드에서 처음으로 고정 dp 방식을 적용하면서 생겼던 이야기를 공유드리고자 합니다.
common_dp가 무엇인가?
common_dp는 지정된 dp를 사이즈를 각 기기의 화면 크기에 맞게 비율대로 늘려서 보여지는 방식입니다. 화면 크기 별로 보여질 dp의 크기를 미리 직접 계산해서 리소스 파일을 넣어둔 것입니다.
화면 크기 별로 정의된 파일
아래 보이는 사진은 sw600dp-xhdpi 파일의 일부입니다. <dimen ="common_20dp">33.3dp</dimen> 는 sw360dp를 기준으로 20dp로 지정했다면, sw600dp의 화면에서는 33.3dp로 보여진다는 것을 의미합니다.
sw600dp-xhdpi
common_dp 방식은 아이들나라 개발 내재화 전부터 사용하던 방식입니다. 이전 아이들나라 디자인은 아이들이 사용하기 때문에 화면이 커지면 기존 화면을 더 크게 보여주자! 라는 니즈가 있어서 이런 방식을 사용했던 것으로 생각됩니다.
common_dp를 사용하면 개발자는 한벌의 UI 작업만 하면 모든 기기에 같은 화면으로 대응이 가능하기 때문에 편리하다는 장점이 있습니다.
common_dp를 왜 바꾸려고 할까?
common_dp는 분명 개발하기 편리하고, 여러 장점이 있지만 몇가지 큰 문제점이 있었습니다.
이상하게 보이는 화면
화면 크기 별로 정의된 파일을 보면, 7가지의 화면 크기만 정의된 것을 알 수 있습니다.
당연히 안드로이드의 다양한 화면 크기는 7가지로 정의가 불가능합니다. 그러다 보니 정의되지 않은 화면 크기는 가장 비슷한 파일을 찾아서 사용하게 됩니다.
그렇기 때문에 특이한 크기의 태블릿에서는 디자인 가이드와는 다른 이상한 비율로 보여지기도 합니다. 그러면 해당 기기를 사용하는 사용자는 불편한 UX를 경험하게 됩니다.
다양한 콘텐츠를 노출하고 싶은 니즈에 맞지 않음
기존과는 다르게 현재 아이들나라 디자인 가이드를 살펴보면, 다양한 콘텐츠가 사용자에게 노출되기를 원하는 것을 볼 수 있습니다.
하지만 모바일을 일정 크기대로 늘려서 보이고 있기 때문에, 태블릿의 장점을 살리기 어려웠습니다.
•
예시
인기 Top 10 지면을 기준으로 극단적인 예시를 들어보겠습니다.
태블릿 디자인 가이드에서는 화면에 약 9개의 콘텐츠가 노출되는 것을 기대합니다. 하지만 정의가 되지 않은 특정 크기의 태블릿에서는 약 4개의 콘텐츠만 노출되고 있습니다.
독서 콘텐츠 상세에서 고정 dp 시도한 이유
제가 독서 콘텐츠 상세 화면에서 common_dp의 편리함을 버리고 고정 dp를 시도하게 된 이유는 여러가지가 있습니다.
독립적인 화면
앱은 하나로 동작하기 때문에 특정 부분만 다른 방식으로 구현을 하게 되면, 비율이 다르기 때문에 어색하게 느껴지게 됩니다. 하지만 독서 콘텐츠 상세의 화면은 기존 화면과 같이 나오는 부분이 없이, 전체 화면을 새롭게 구현을 하는 분리된 화면이기 때문에 적용을 하기 적합했습니다.
아이들나라 앱에서 WebView의 영역이 늘어남
이 시점에서 아이들나라 모바일에서 여러가지 이유로 WebView 사용이 많아지기 시작했습니다. 웹은 고정 dp처럼 화면이 그려지기 때문에 앱과 WebView의 어색함을 줄이기 위해서 고정 dp를 사용해야하는 필요성이 생겼습니다.
common_dp의 단점 개선
독서 콘텐츠 디자인 작업을 맡으신 예지님과 common_dp를 사용하면서 나오는 어색한 화면들에 대해서 열띤 대화를 하게 되면서, common_dp가 가진 단점을 개선하고 싶었습니다. 홈 화면도 개선하기 위한 회의도 진행했지만, 여러 허들이 있어서 개선 작업을 할 수 없었습니다.
하지만 새롭게 그려질 독서 콘텐츠 상세 화면은 예지님과 제가 모든 결정을 할 수 있었기 때문에, 고정 dp로 대응을 하는 도전을 하게 되었습니다.
디자인 팀과 모바일 팀 모두 모바일/폴드/태블릿 3가지의 디자인 작업을 해서 오는 작업 시간 증가와 기존 방식과 달라지면서 겪게 되는 여러 어려움을 잘 헤쳐나가야 했습니다.
개발하면서 겪은 어려움과 해결한 방식
다양한 크기의 Android 기기를 어떻게 대응할까?
기존 구현 방식은 모바일 기준으로 작업을 하고, 다른 기기는 화면 크기만큼 확대해서 보여지는 방식이기 때문에 다양한 크기의 기기가 크게 문제가 되지 않았습니다. 태블릿 기기인 경우, 특정 부분만 다르게 표현하는 방식을 주로 사용하고 있었습니다.
하지만 독서 콘텐츠 상세 화면은 고정 dp로 대응을 하면서 모바일/태블릿의 레이아웃이 다르게 디자인이 되었습니다.
이 때, 중간 크기의 Galaxy Z Fold가 문제가 되었습니다. 모바일 화면을 적용을 하면, 아래 콘텐츠 정보 표시 화면의 여백이 많아져서 화면이 어색했습니다. 태블릿 화면을 적용을 하면, 태블릿과 다르게 정사각형 형태이기 때문에 포스터만 보여지고 아래 콘텐츠 정보 표시 화면은 노출되지 않았습니다.
한 쪽으로 결정을 하게 되면 폴드의 장점을 살릴 수 없고, 어색함을 가질 수 밖에 없었습니다. 그래서 예지님과 여러 테스트와 고민 끝에 폴드의 경우에는 상단 포스터 부분은 모바일 화면을 적용하고, 하단 콘텐츠 정보 표시 화면은 태블릿 화면을 적용하는 것으로 결정했습니다.
폴드 디자인 가이드
폴드 디자인 가이드
폴드를 추가로 대응하게 되면 개발 시간 증가, 코드의 복잡성 증가 등의 어려움이 생기게 됩니다. 따라서 대부분의 화면은 폴드 대응을 하지는 않지만, 독서 콘텐츠 상세의 경우 디자인을 중요하게 생각하고 있기 때문에 대응을 하는 것으로 결정하게 되었습니다.
폴드까지 추가로 대응을 하게 되면서 개발 시간을 줄이고, 코드를 최대한 간결하게 구현하는 것이 더욱 중요해졌습니다.
어떻게 개발 시간을 줄일 수 있을까?
모바일 UI 작업을 할 때, 미리 태블릿을 고려해서 확장이 가능한 공통 컴포넌트로 분리를 해서 구현을 했습니다. 크게 포스터 영역, 기본 정보 영역, 책 정보 영역 등으로 나누어서 컴포넌트 정리를 했습니다.
어떻게 적용을 했는지 포스터 영역을 예시로 들어보겠습니다.
모바일과 태블릿, 세로와 가로의 차이점을 정리하고, 이 부분은 특정 값에 따라서 다르게 표현이 되도록 구현을 했습니다. 위의 사진을 참고해보면, 포스터 영역에서는 유삐 리소스, 유삐와 쿠키의 유무, 포스터 크기, 그림자 크기, 양 옆 여백 크기, 읽는 중 뱃지, 강화 역량 뱃지의 크기 등이 있는 것을 알 수 있습니다.
이렇게 처음부터 확장성을 고려해서 작업을 했기 때문에, 태블릿 작업은 모바일 작업보다 수월하게 진행할 수 있었습니다.
공통 컴포넌트 사용으로 생긴 어려움
공통 컴포넌트를 사용으로 어려움을 겪은 영역도 있었습니다. 아래 사진에서 분홍색 박스로 표현된 기본 정보 영역이 그 중 하나입니다.
모바일
태블릿 세로
태블릿 가로
1.
스크롤 문제: 콘텐츠 상세 화면은 스크롤이 되는 영역과 스크롤이 되지 않는 배경 영역으로 분리되는데, 기본 정보 영역은 태블릿의 가로/세로에서 서로 다른 영역에 속함
2.
팝업 노출: 아래 영역을 침범해서 표현이 필요한 “프리미엄 구독 팝업”
공통 컴포넌트를 가지고 작업을 했기 때문에, 태블릿에서 수정을 하면 모바일이 문제가 생기고, 그 반대의 경우도 계속 발생을 했습니다.
여러 시행 착오 끝에 다음과 같은 구조를 생성했습니다.
1.
스크롤이 되는 레이아웃을 담당하는 컴포넌트 생성
2.
content라는 이름의 Composable 파라미터를 넣어 컴포넌트를 전달 할 수 있도록 함
3.
스크롤 레이아웃의 최상단에 content 인자로 받은 컴포넌트가 노출되도록 함
해당 방식을 사용해서 스크롤의 최상단 영역을 레이아웃에 맞게 다양하게 구현을 할 수 있었고, 해당 영역이 하나의 스크롤 영역(LazyColumn)에 속하게 되어서 프리미엄 구독 팝업이 자연스럽게 아래 영역을 침범할 수 있었습니다.
다양한 해상도 대응
안드로이드는 설정에서 화면 크기를 변경할 수 있습니다. 사용자가 화면 크기 변경을 하면, 전체 화면의 dp가 달라지게 됩니다. 모바일에서 표현하는 전체 화면의 크기가 태블릿보다 커질 수도 있게 되는 것입니다. 그래서 모바일/폴드/태블릿으로 구분하기 위한 기준이 필요했습니다.
처음으로 고정 dp를 사용했기 때문에 이전에 사용하던 기준이 없어서, 직접 기준을 정해야 했습니다.
1.
기준점을 잡기 위한 기기 선정
2.
화면의 dp 사이즈를 측정하는 함수 생성
3.
기기의 설정에서 화면 크기를 변경하면서 화면 dp 사이즈 기록
4.
초기 설정 및 dp 사이즈를 비교하면서 모바일/폴드/태블릿 기준 선정
이렇게 기준점을 잡게 되면서, 사용자가 설정에서 값을 변경해도 화면에 맞게 UI가 그려지도록 작업을 할 수 있었습니다.
마무리
편리하게 사용하던 방식 대신 고정 dp를 적용하면서 여러가지 어려움이 있었고, 개발에도 시간이 더 소요됐습니다. 하지만 디자인이 중요한 독서 콘텐츠 화면을 잘 표현할 수 있었던 것 같아서 만족스럽고 재밌는 작업이었습니다.
완벽하지는 못했지만 처음 시도한 고정 dp 방식은 안드로이드에서 계속 발전해가며 여러 화면에서 사용될 예정입니다. 앞으로는 다양한 기기와 다양한 설정에도 유연하게 대처하는 화면이 늘어날 것이기 때문에, 아이들나라 앱의 완성도가 보다 더 올라가는 것을 기대해도 좋을 것 같습니다!
많은 애정을 가지고 작업을 한 독서 콘텐츠 상세 화면이 아이들의 독서 활동에 많은 도움이 되기를 바랍니다
감사합니다.