프론트엔드가 이미지 색상을 실시간으로 바꾸는 법 - mix-blend-mode

??은 답을 알고 있다.

• 기록을 남긴다는 것은 여러모로 참 좋은 행동이다.
• 왜냐면 이번에 이 기록을 통해 이번 해결법의 핵심 키워드를 잡았으니까!
• 그렇다면 ??은 무엇일까?
• 정답은 “나를 제외한 모든 사람들” 이다. 하하하..

디자이너분들은 답을 알고 있다.

• 내 생각에는 디자이너님들의 아이디어에서 출발한 것 같다.
• 포토샵에는 서로 다른 요소(ex.레이어)를 겹쳐서 색상에 대한 효과를 주고 싶을 때 블렌드 모드라는 것을 사용해서 그 효과를 준다고 한다.
• 이걸 css에서 사용하면 이런 느낌인데

• 이것을 이용해서 우리가 바꾸고자 하는 이미지 하나와
• 그 이미지의 배경이 될 단색 이미지 하나 총 두 개를 겹쳐서
• css의 필터값을 이용해 색상을 변경하면 해결완료이다!

박사님은 답을 알고 있다.

• svg를 파며 한참 삽질에 열중일때 내가 디자이너분들께 svg이미지를 달라고 한적이 있었다.
• 그러자 박사님께서는 디자이너분과 나에게 위의 이미지로 해달라고 하셨다.
  • 위의 이미지는 우리 서비스에서 저 기능이 들어갈 부분에 들어가는 이미지가 아니다.
• 나는 그때까지도 “응? 이거 아니지 않나?”라는 생각을 했었다.
  • 아닌건 바로 svg를 파고 있는 내 대가리인데도 말이다..
• 추가로 이 이미지로 테스트를 했던 스레드가 있었는데 선임개발자분의 조언을 듣고 그제서야 다시 이 스레드를 눈여겨 보기 시작한 것이다..
  • svg팜 → 이미지제공(스레드동봉) → 정신못차림 → 선임개발자조언 → 다시 스레드봄 → 아하!
  • 이제 보니까 디자이너분들도 내가 svg관련 코드 질문하니까 이 스레드에 있는 코드아니냐고 태그해 주셨다. ㅋㅋㅋ ㅠㅠ

그럼 내가 알아내야 하는 것은?

• 당연히 svg가 아니라!

1. 유저에게 ux적으로 컬러를 쉽게 정할 수 있게 해주는 팔레트 라이브러리
2. 그 팔레트로부터 나오는 정보를 배경에 입히는 방법

• 이렇게 두가지이다.
• 첫번째야 많은 라이브러리들이 있어서 해결은 된다.
• 그렇다면 두번째는?

출처

우리 회사분들 아이디어..