가독성 파괴, 멈춰!

앱을 만들다보면 이미지 위에 텍스트를 올리는 상황이 빈번하게 찾아온다. 그런데, 아무리 디자인 감각이 없는 사람이라도 이러한 레이아웃에선 텍스트의 가독성이 심각하게 떨어지는 사실은 인지할 수 있다.

예시로 윗쪽 레이아웃의 경우, 내부에 있는 텍스트를 쉽사리 읽을 수 없다. 따라서 필자는, 아래 레이아웃 처럼 이미지에 검은색 반투명 컬러 필터를 적용함으로써 가독성을 높일 수 있는 두 가지 방법을 소개하고자 한다.

1. 프로그래매틱한 방법

Activity 및 Fragment 파일에서 해당 ImageView 에 접근하여, setColorFilter() 를
아래와 같이 호출해주면 투명한 검은색 필터가 적용된다.

imageView.setColorFilter(Color.parseColor("#ffff0000"), PorterDuff.Mode.SRC_IN);

2. XML 속성을 통한 방법

XML 속성 추가를 통한 방법도 있다. src 속성을 통해 배경 이미지를 적용해둔 ImageView 에 아래와 같은 속성을 추가해주자. 헥스코드 상으로 투명도를 부여한 검은색을 이미지 위에 씌우게 된다.

<ImageView
    app:tint="#80000000"
    android:tintMode="src_atop" />

필자는 아래 방법을 더 선호하는 편이다. 레이아웃 프리뷰 상으로 필터가 적용된 모습을 볼 수 있기 때문이다. 이렇듯 간단하게 컬러 필터를 적용해볼 수 있으니 언젠가 필요하게 될 가독성 향상을 위해 알아두면 좋을 것 같다.