새로운 채널톡 버튼의 탄생

💬 버튼 디자인의 시작

기존 채널톡 버튼은 컬러가 지나치게 강조되어 엔드유저가 사이트 내용에 집중하는 데 어려웠습니다. 이는 특히 모바일에서 두드러졌죠. 바탕을 하얗게 처리하고 말풍선의 컬러감을 부드럽게 처리하도록 바꾸어 사이트 화면과 이질감이 없도록 하기 위해, 새로운 버튼 디자인을 시작했습니다.

📐 채널톡 버튼의 구조를 살펴봅시다

1. 웹에서의 채널톡 버튼 구조

Safari에서의 SVG 그래디언트(Gradient)

웹의 경우, SVG를 사용하게 되면 fill: #F48400 를 통해 색상을 채울 수 있습니다. 그림자의 경우에도 linearGradient, radialGradient 사용해 그릴 수 있습니다.

하지만, Safari에서는 SVG Gradient들을 제대로 지원하지 않고 있습니다. 위 이미지와 같이 왼쪽은 Chrome(정상), 오른쪽은 Safari(비정상) 입니다. 확대해서 보면 Drop Shadow가 흐릿하게 깨지고 몸통쪽 Gradient는 적용이 안된 것을 확인할 수 있습니다. 때문에 레이어를 순서대로 쌓는 형식으로 구현 되었습니다.

feColorMatrix 컬러값을 hex, rgba에서 변환하기

SVG의 구조를 살펴보면, 그림자(innerShadow)에 테마컬러를 적용해야 하는데, 이 부분은 그림자이기 때문에 단순히 fill을 통해 색상을 채우는 것이 아니라 feColorMatrix를 사용하게 됩니다.

feColorMatrix란, 행렬에 따라 픽셀의 각 색상값을 계산되어 색을 변화시키는 방법입니다. 5 x 5 색상 행렬을 곱하여 새로운 [R, G, B, A]를 만듭니다.

| R' |     | r1 r2 r3 r4 r5 |   | R |
| G' |     | g1 g2 g3 g4 g5 |   | G |
| B' |  =  | b1 b2 b3 b4 b5 | * | B |
| A' |     | a1 a2 a3 a4 a5 |   | A |
| 1  |     | 0  0  0  0  1  |   | 1 |

그러면, 테마컬러를 feColorMatrix의 value값으로 변환해봅시다.

우선은 서버에서 컬러값을 hex값으로 내려주고, feColorMatrix는 rgba를 사용하기 때문에 hex → rgba 변환을 먼저 합니다.

그 다음 feColorMatrix에서 사용하는 matrix value 값으로 변환해줍니다.

이렇게 변환하는 hexToRgbaCSS와 rgbaToMatrix 를 사용하여 hexToMatrix 를 합니다.

2. 모바일에서의 채널톡 버튼 구조

이미지 처리 및 tint color를 통해 테마컬러 채우기

모바일의 경우, 여러 그림자를 한 번에 처리하기 힘들어서, 모든 요소를 레이어를 나누어 쌓는 형식으로 구현되었습니다.

6개의 PNG 이미지로 나누어, 테마컬러가 들어가지 않는 그림자들은 이미지로 처리하고 테마 컬러가 들어간 부분 3개의 이미지만 tint color를 넣어 줍니다. 결과는 6개의 이미지가 하나의 겹쳐진 상태로 보이게 됩니다.

Android (tint color)

var tintColor: Int = getColor(context, R.color.custom_color)  
    set(value) {
        field = value

        binding.imageChannelFrontSymbolRootTintTarget.setTint(value)
        binding.imageChannelFrontSymbolBodyTintTarget.setTint(value)
        binding.imageChannelFrontSymbolFaceTintTarget.setTint(value)
    }

iOS (tint color)

🌟 NEW 채널톡 버튼

이렇게 되어 새로운 채널톡 버튼이 탄생되었습니다!

동글동글하니 훨씬 살아있는 것 같고 아주 귀엽습니다. 앞으로도 채널톡 버튼 많이 사랑해주세요 💜

하루 평균 2.6천만 번 이상 노출되는 채널톡 버튼! 함께 만들고 싶다면, 지금 바로 지원해주세요 🙌