[뭐더라 앱 - UI/UX] Oval Shape ImageView

목차

1. CustomView 개발 목적

[왼쪽: 갤럭시 기본 앱 아이콘]     [가운데: 뭐더라 앱 커스텀뷰 적용 전]     [오른쪽: 뭐더라 앱 커스텀뷰 적용 후]

"뭐더라 서비스"에서는 계정을 저장할 때, 가시성을 위해 각 계정마다 대표 아이콘을 설정하도록 개발하였습니다. 안드로이드에서는 PackageManager 를 통해 개인의 스마트폰에 설치된 앱들의 아이콘을 불러올 수 있으며, 저장할 모든 계정들의 아이콘을 각 회사의 앱 아이콘으로 지정해줄 수 있다면 가장 이상적인 상황일 것 입니다.

 

그러나 모든 회사가 모바일 앱을 보유하고 있는 것이 아니며, 앱이 있더라도 사용자 휴대폰에 설치된 앱이 아니라면 앱 아이콘을 불러올 수 없기 때문에 이러한 계정들의 아이콘도 간편하게 설정해 줄 수 있는 방법을 마련해야 합니다.

 

따라서 아래와 같은 경우를 모두 고려해야 합니다.

1. 모바일 앱 서비스를 운영중인 회사
   1-1. 사용자 휴대폰에 앱이 설치된 계정
   1-2. 설치되지 않은 계정
2. 모바일 앱 서비스를 운영하지 않는 회사
   2-1. 대표 웹 사이트의 파비콘 자동 추출(미완성)
   2-2. 텍스트 아이콘
   3-3. 사용자 설정 이미지(미완성)

사용자가 계정을 새로 만들고 저장할 때, 사용자가 직접 아이콘을 찾아 설정하게 되는 번거로움을 최대한 줄이고자 위 로직에 따른 각각의 기능들에 대해 자동으로 아이콘을 찾아 삽입해주도록 구현하였습니다.

 

그러나 여기서 또 다른 문제가 발생하였는데, 각각의 로직마다 혹은 앱이나 웹사이트의 아이콘 테두리 모양이 제각각이라는 점 때문에 디자인 균형감을 잃게 된다는 것이었습니다.

그래서 위와 같이 테두리 모양을 안드로이드 앱 특유의 둥근 사각형 모양으로 잘라주는 CustomView를 개발하게 되었습니다.

 

2. Oval Shape

$$ \left|\frac{x}{a}\right|^{n}+\left|\frac{y}{b}\right|^{n}=1 $$

위 방정식은 타원 방정식에서 지수를 변수 n으로 설정한 식입니다.

 

영상에서 보면 지수 n이 1을 기점으로, 1에서 점점 커지면 볼록한 정도가 커지고, 1에서 점점 작아지면 오목한 정도가 깊어짐을 알 수 있습니다.

그리고 n=2 일 때는 타원, n=2 and a=b 가 되면 원이 됩니다.

 

이제 실제로 타원 방정식을 테두리에 적용한 CustomView 를 만들어서 안드로이드 앱 아이콘 테두리 모양과 가장 유사한 형태를 띄게 되는 지수 n 값을 찾아보겠습니다.

 

 

왼쪽 이미지는 일반 ImageView 에 삼성페이 앱 아이콘을 불러와서 삽입한 것이고, 오른쪽 이미지는 위 방정식을 기반으로 테두리 라인을 커팅한 CustomView 입니다.

 

양쪽 뷰를 겹쳐놓고 지수 n 값(oval)을 조정하는 영상이며, n=2.7 일 때 거의 일치함을 알 수 있습니다.

 

3. Auto Border Stroke

Google 앱과 같이 아이콘 배경색과 parent view 의 배경색이 같은 경우 테두리 경계가 모호해지면서 디자인 균형감을 잃게 됩니다. 이를 해결하기 위해 이미지가 삽입될 때, 삽입된 이미지의 배경색과 parent view 의 배경색을 비교하여 두 색상이 거의 일치하는 경우에는 자동으로 Border Stroke 을 그려주도록 해보겠습니다.

 

3-1. 앱 아이콘 이미지의 배경 색상 추출

먼저 삽입될 앱 아이콘 이미지의 색상을 추출하기 위해 androidx 패키지의 Palette 라이브러리를 사용해 보았습니다. Palette 라이브러리는 해당 이미지의 색상과 잘 어울리는 6가지의 Material Color 와 가장 많은 빈도수를 차지하는 dominant color 를 제공해 주는데, 원하는 목표와 완전히 부합되진 않지만 dominant color 로 테스트를 해보았습니다.

 

 

우선 일반적인 앱들의 경우 위와 같이 배경색 추출이 잘 됩니다.

 

 

그러나 위와 같은 앱들의 경우에는 Palette 에서 주는 dominant color 를 그대로 사용하면 왼쪽과 같은 결과가 나오게 되어 Drawable 을 직접 분해할 필요가 있습니다.

 

앱 아이콘에서 사용되는 Drawable 의 종류로는 대표적으로 AdaptiveIconDrawable, BitmapDrawable, VectorDrawable, ColorDrawable 등이 있습니다. 여기서 AdaptiveIconDrawable 은 background와 foreground로 나뉘는데 background(Drawable) 가 ColorDrawable 인 경우 배경색을 추출할 수 있습니다.

 

오른쪽은 이러한 과정을 거쳐 제대로 된 배경색을 얻은 모습입니다.

 

 

그럼에도 불구하고 위와 같은 앱들은 제대로 된 배경색이 추출되지 않았습니다.

대략 10 ~ 20% 정도의 앱 아이콘들이 부정확한 결과가 나타났고, 이는 생각보다 큰 수치이기 때문에 다른 방법을 고안하게 되었습니다.

 

 

앱 아이콘의 테두리를 자를 때 구했던 Path 좌표 집합에서 일정한 간격으로 떨어뜨린 20개의 좌표를 가져왔고, 각 좌표마다 1dp 씩 중심쪽으로 당겨진 점들입니다.

 

앱 아이콘 이미지의 비트맵에서 위 20개 좌표에 위치된 RGB color 값들을 추출하였고, 20개의 색상들 중 가장 비중이 높은 색상을 선택하여 Edge Dominant Color 로 지정하였습니다.

 

이렇게 하여 다시 테스트를 하였더니 100% 에 가까운 정확도를 얻을 수 있었습니다.

 

※ 각 회사에서 앱 아이콘을 구글에서 권장하는 적응형 런처 아이콘 모듈로 생성하지 않은 경우 배경색이 0 혹은 alpha 값이 들어가 있는 경우도 있기 때문에 이에 대한 처리도 필요합니다.

 

3-2. 두 색상의 유사도(Color Similarity)

이제 앱 아이콘의 edge color 와 주변 background color 를 얻었으니 두 색상의 유사도를 구해야 합니다.

 

처음에는 RGB 색공간에서의 유클리드 거리(Euclidean Distance, E·D)를 구하고, (1 - E·D / max(E·D)) * 100 으로 유사도를 백분율로 계산하여 실험을 해보았지만, RGB 색공간에서의 거리는 인간이 색차를 인지하는 정도와 조금씩 다르게 나타나기 때문에 정확한 실험 결과를 얻는데 한계가 있었습니다.

 

따라서 인간이 색을 인지하는 원리와 가장 유사하게 모델링한 CIE L*a*b* 의 균일한 색공간을 사용하여 유사도를 구하는 실험을 진행하였습니다.

 

 

https://github.com/Dev-Joco/android-color-space

위 사진은 4가지 색공간을 동시에 실험한 모습이며, 각각의 색공간마다 어느정도의 정확도 차이를 보이는지 눈으로 직접 확인해보기 위해 준비한 실험입니다.

 

처음에는 두 색상간의 거리차를 순수 유클리드 거리로 계산하여 실험하였는데, 특정 영역에서 정확성이 조금 떨어지는 결과가 나왔습니다.

 

그래서 Color Difference 를 구하는 방식에 대한 개선이 필요했고, 아래 링크 내용을 참고하여 계산식을 다시 적용한 뒤 실험한 모습입니다.

 

Color difference - Wikipedia

 

테스트하는 과정은 위 영상에서 볼 수 있습니다.

 

색조 및 밝기를 조금씩 조절해가며 다양한 색 영역에서 테스트 해 본 결과, RGB 와 LAB 색공간에서 유사도 정확성이 높게 나왔습니다. 그런데 RGB 의 경우 색조가 강한 영역에서 민감도가 조금 낮은 편이었고, LAB 은 밝기가 어두운 영역에서 민감도가 상대적으로 낮게 나왔습니다. 결국 RGB, LAB 두 색공간을 모두 사용하여 상호보완적인 유사도 계산 로직으로 구현하게 되었습니다.

 

 

각 쌍마다 왼쪽은 stroke 적용 X ,오른쪽은 Stroke 적용 O

위 사진은 실제로 커스텀뷰에 적용하여 다양한 색상의 배경과 앱 아이콘들을 삽입해 보며 테스트 한 결과입니다.

각 아이콘 쌍에서 왼쪽은 auto stroke 적용을 안 한 모습이고, 오른쪽은 auto stroke 을 적용한 모습입니다.

 

다양한 배경 색의 아이콘과 그라데이션이 있는 앱 아이콘도 stroke 이 자동으로 잘 삽입되는 모습을 확인하실 수 있습니다.

 

4. 결과물

왼쪽: CustomView 적용 전

오른쪽: CustomView 적용 후

 

위 내용들을 기반으로 CustomView를 실제로 구현하여 "뭐더라 서비스" 앱에 적용한 모습이며, 위 사진과 같이 모든 계정들의 아이콘 모양을 깔끔하게 통일시킴으로써 디자인 완성도를 높일 수 있었습니다.

 

[Github - Source Code]

GitHub - Dev-Joco/mwodeola-android: 뭐더라 서비스 - 안드로이드