버그 해결 | 티스토리 다크모드 글자색 전환 안 되는 버그 해결하기

1. 문제 상황

올해 초, 블로그 플랫폼을 티스토리로 옮긴 뒤 포스팅을 작성하다가 당황스러운 일을 겪었다.

라이트모드에서는 분명 글씨가 잘 보였는데

다크모드로 전환하면 꼭 글자 일부가 안 보이더라.

 

예시)

위쪽 이미지가 에디터 상에서 작성한 글,

아래 이미지가 실제 포스트에서 렌더링된 결과이다.

뭔가 보일듯 말듯 안 보이는 글자를 확인할 수 있다.

 

 

2. 문제 원인

문제를 좀 더 명확히 정의해보자면,

다크모드로 전환됨에 따라 기본 텍스트 컬러가 함께 반전이 되어야 하지만,

어째서인지 일부 텍스트에는 적용이 안 되는 상황인 것.

 

문제가 발생한 부분들을 작성했던 때를 되돌아보면

대부분 노션, 메모장, 다른 웹페이지 등, 에디터 이외의 곳에서 텍스트를 복붙해온 경우였다.

• 텍스트를 복사하는 과정에서 HTML 태그 내부에 있는 properties가 따라와서 발생했거나,
• 붙여넣는 과정에서 에디터에서 태그를 제대로 붙이지 못해서 발생하는 것으로 보인다.

(유사한 버그 관련 글도 찾아보니 대부분 이러한 경우에서 발생하는 것으로 확인된다)

 

또한 에디터 내에서만 작업하는 경우에도 문제가 발생할 수 있다.

스타일, 특히 색상을 적용한 텍스트를 잘라내고 붙여넣는 과정에서 태그가 꼬이며 발생하는 것도 확인했다.

 

버그 재현)

HTML

에디터 HTML 모드에서 스크립트를 확인해보면 대충 위와 같이 property에 불청객이 껴있는 것을 확인할 수 있다.

정상적인 경우에는 style property가 없어야 한다.

(사실 위의 케이스는 버그 재현을 위해 뻘짓을 해둔 스크립트라서 실제 버그 발생 시와는 약간의 차이가 있을 수 있다)

 

 

3. 해결법

"상남자식 해결법"

사실 가장 확실한 방식은 그냥 에디터 내에서 복붙이나 잘라내기를 사용하지 않는 것이다.

근데 그러면 생산성이 (개같이) 떨어진다...

 

해결책 적용 예시

그래서 아래와 같은 flow로 작성하는 것을 추천한다.

1. 일단 하던대로 편하게 작성을 한다.
2. 최종 검토 단계에서 에디터 '미리보기' 기능을 통해 버그 발생 여부를 확인한다.
3. 버그가 발생한 경우에는 에디터 HTML 모드로 진입한다.
4. 아래 코드를 복사해서 에디터 최상단에 붙여넣는다.

 

해결용 코드) Final edit: 25-08-19

<script>
document.addEventListener("DOMContentLoaded", function () {
    // p 태그와 모든 헤더(h1~h6) 태그를 한 번에 선택
    const elements = document.querySelectorAll("p, h1, h2, h3, h4, h5, h6");

    elements.forEach(el => {
        // 1. style 속성 내부 처리
        if (el.style.color) {
            el.style.color = '';
        }

        // 2. 다른 속성들 처리
        // 보존할 속성 목록
        const attributesToKeep = ['data-ke-size', 'style'];

        const currentAttributes = [...el.attributes];

        currentAttributes.forEach(attr => {
            // 보존할 속성 목록에 없는 속성은 제거
            if (!attributesToKeep.includes(attr.name)) {
                el.removeAttribute(attr.name);
            }
        });
        
        // 3. 마무리 작업 
        // style 속성이 비어있게 되면 속성 자체를 제거
        if (el.getAttribute('style') === '') {
            el.removeAttribute('style');
        }
    });
});
</script>

- Update logs -

25-08-19:
- text-align 속성을 제거하지 않도록 수정
- 헤더 태그에서 발생하는 문제에도 대응할 수 있도록 수정

일단은 의도적인 줄바꿈과 의도적인 텍스트 스타일 변경은 최대한 유지하도록 코드를 짰다.

그냥 간단하게 <p> 태그를 정리해주는 스크립트라고 생각하면 된다.

혹시나 추후에 해결되지 않는 케이스가 발견된다면 업데이트를 해둘 예정이다.

(댓글로 자세한 버그 상황을 알려주면 그것도 반영할 예정)

 

 

+)

당장 이 글을 작성하면서도 이 버그가 발생했다.

이쯤되면 티스토리에서 자체적으로 버그 픽스를 해주는 게 좋지 않을까 싶은데...

참으로 아쉬운 부분이다.

 

++)

GitHub - MintCat98/tistory-useful-scripts: 티스토리에서 여러모로 불편한 부분들을 해결할 수 있는 스크립

티스토리를 사용하면서 겪는 문제들에 대한 해결 스크립트 아카이빙 레포를 만들었다.

추가가 필요하다고 여겨지는 기능이 있다면 언제든 issue 혹은 pull request를 올려주기 바란다.