[색상모드] 모든 색상모드가 구체적인 요소별 색상을 변경하도록 하는 방안

[Yeonji-Lim]

제안

현재 색약 모드를 제외하고 다크 모드와 고대비 모드는 원본 html의 모든 색상을 무시하고 색상을 강제로 변환해주고 있음

색약 모드만 원본 html에서 색상을 모두 인식하여 색상을 하나하나 바꿔주고 있다.

다크 모드와 고대비 모드에서도 원본의 색상을 고려하여 변형된 html을 제공한다면, 테두리가 없더라도 요소별로 구분이 더 잘될 것임

문제 상황

이를 단순히 현재의 색약 모드와 똑같이 적용하려고 하면,

원본 html이 일단 한번 바뀌고 나서 다른 색상 모드를 사용하고자 할 때,

원하는 색상이 나오지 않는다.

예시

• 다크 모드 on : 원본 html이 각 요소별 색상이 어둡게 변한 채로 반환,
• 색맹 모드 on : 다크 모드의 스타일 시트는 삭제하고 있지만(services/manageStyleSheet.js 의 delStyle) 이미 바뀌어버린 html은 원본 색상이 아니라 다크 모드의 색상이다.

따라서 바뀌어버린 html을 다시 원본으로 돌려주어야 한다.

해결 방법

1. route/index.js의 cachedResult를 전역 변수로 만든다.
2. 프론트에서 url을 보내주면, 해당 하는 html을 cachedResult에서 찾는다.
3. 찾은 html을 색상모드에 맞게 변환하여 반환한다.

위 제안 내용은 refactoring-color-style branch에서 2번까지 진행되었으나, 하단의 이로 인해 생길 문제 상황 때문에 중지되었다.

이로 인해 생길 문제 상황

현재 이미지에 alt 속성을 붙여주는 기능은 사용자가 최초에 url을 입력하고 접속하였을 때 적용된다.

이는 프론트에서 동작하기 때문에 cachedResult에는 해당 기능이 적용되기 전의 html이 저장된다.

색상 모드는 cachedResult의 html을 사용하기 때문에, 색상모드가 반환한 html에 다시한번 alt 속성을 붙여주어야 한다.