개발

[WebStorm] 웹스톰 에디터 배경색 변경하기

알파카털파카 2023. 7. 16. 20:46
[WebStorm] 웹스톰 에디터 배경색 변경하기

 

 

나는 시력이 나쁘기도 하고 눈 건강이 좋지 못해서, 안구 건강을 지키기 위해 할 수 있는 일은 다 해보려고 한다. 개발자들이라면 대체로 IDE 색상 설정을 어두운 배경에 흰 글씨로 해두는 것이 디폴트일텐데, 이런 '다크모드'가 눈 건강에 좋지 못하는 얘기를 들었다. 요약하자면 전체적으로 어두운 색상 때문에 빛의 양이 줄어들어 동공이 커지고, 난시와 근시가 심해진다는 내용이다. 그래서 IDE의 설정을 밝은 테마로 바꾸어 보았다. 테마 변경 가이드는 찾으면 나오지만, 배경색만 교체하는 글은 찾기 어려워서 혹시 나같이 눈이 시려 개발에 어려움을 겪는 사람이 있다면 돕고 싶어 글을 작성해 본다.

 

 

 

 

 

 

1. 기존 색상 테마

기존에는 웹스톰의 Darcula 테마를 사용했다. 추가로 커스텀한 것이 있다면 레인보우 브라켓 정도였다. 

 

기존에 사용하던 색상 테마
레인보우 브라켓

 

이 테마가 자극적인 색상이 없고 배경색도 나름 다른 테마에 비해 밝은(?) 편이라 좋았는데, 그래도 다크모드이기 때문에 아쉽지만 교체했다. 

 

 

 

2. 색상 테마 변경하기

맥북에서는 command + (쉼표), 를 누르면 세팅창이 뜬다. 혹은 상단에서 WebStorm > Preferences를 클릭한다. 나는 웹스톰의 언어 설정을 한글로 해두어서 영어로 쓰는 분들에겐 스크린샷의 내용이 익숙하지 않을 수도 있다. 

 

전체적인 색상 테마를 교체하려면 에디터 > 색 구성표 > 언어 디폴트 값 에 들어간다. 미리 지정되어 있는 테마를 직접 변경하기보다는 개발자답게 불변성 유지를 위해 복제를 눌러준다. 밝은 색상으로 구성되어 있는 Classic Light 테마를 활용할 것이기 때문에 해당 테마를 복제해서 적용한다. 설정창 하단에 미리보기도 뜨기 때문에 이것 저것 본인에게 맞는 테마를 고를 수 있다. 

 

전체 테마 변경

 

 

나는 코드를 작성하는 부분과 터미널만 밝은 테마로 변경하고 싶었다. 온통 흰 색으로 해두면 인터넷 창과 구분이 잘 되지 않아서 그랬다. 그럴 경우 WebStorm 테마 변경 확인 창에서 '아니오'를 클릭하면 된다.  

 

전체 테마 변경 확인창

 

 

 

3. 에디터 배경 색상 변경하기

 에디터 > 색 구성표 > 일반 을 클릭한 후, 텍스트 > 디폴트 텍스트를 확인한다. 이 Classic Light 테마는 기본적으로 배경이 #FFFFFF 색상으로 설정되어 있다. 나는 이 테마로 한 달쯤 사용하다가 눈이 너무 시려서 조금 어둡게 하고싶었다. 그럴 경우, 오른쪽 상세 설정에서 배경 색을 조절해 주면 된다. 우선 연한 회색으로 해 보았다. (참고로 #F7F7F8 색상은 라이트모드를 사용할 때 챗 지피티의 답변 색상이다😂)

 

배경 색상 변경

 

ChatGPT. 하단의 답변 색상이 #F7F7F8이다

 

 

 

4. 라이트 테마 완성

이 배경 색상으로 당분간 해보다가 눈이 불편하면 또 교체해서 사용해볼 예정이다. 사실 이렇게 쓰면 에디터가 되게 못생겨진다. 특히 배경이 흰 계통이라는 것 빼고 이 클래식 라이트 테마는 굉장히 못 생겼다. 특히 저 6번째 줄에 소괄호를 클릭했을 때의 색상을 보시라! 하지만 눈 건강을 지켜야 하기 때문에 어쩔 수 없는 타협점이랄까... 환경설정을 자세히 찾아보면 괄호 색상도 그렇고 여러가지 세세하게 변경할 수 있는 내용이 많으니 각자 알아서 기호에 맞게 설정하면 된다. 나는 이 글을 작성하다가 나름 커스텀해놓은 라이트 테마의 설정들을 날려먹었다.🥲 아무튼 누군가에게 도움이 되는 글이 되었길 바라며 글을 마친다.

 

완성 예시