VSCode (비)활성화 탭 명확하게 구분하기: JSON 설정으로 맞춤 설정 가이드

VSCode에서 여러 파일을 열어 작업하다 보면 탭이 많아져 헷갈릴 때가 있습니다. 특히, 활성화된 탭과 비활성화된 탭을 구분하기 어려워 작업 효율이 떨어지는 경우도 발생합니다. 이럴 때 JSON 설정을 통해 탭의 색상이나 스타일을 변경하여 탭을 더욱 명확하게 구분할 수 있습니다.

이 글에서는 VSCode의 JSON 설정을 활용하여 (비)활성화 탭을 시각적으로 구분하는 방법을 자세히 알아보고, 다양한 예시를 통해 원하는 스타일로 커스터마이징하는 방법을 안내합니다.

 

728x90

왜 JSON 설정을 사용해야 할까요?

VSCode는 기본 설정 외에도 JSON 파일을 통해 다양한 설정을 커스터마이징할 수 있습니다. JSON 설정을 사용하면 VSCode의 거의 모든 부분을 사용자의 취향에 맞게 변경할 수 있습니다. 특히, 탭 관련 설정은 JSON 설정을 통해 매우 세밀하게 조절할 수 있습니다.

JSON 설정 파일 열기

1. 단축키: Ctrl+, (Windows, Linux) 또는 Cmd+, (macOS)를 누릅니다.
2. 메뉴: 상단 메뉴에서 파일 > 기본 설정 > 설정을 선택합니다.
3. 검색: 설정 검색창에 settings.json을 입력하고 설정(JSON) 열기를 클릭합니다.

JSON 설정으로 탭 스타일 변경하기

"workbench.colorCustomizations": {
    // 활성화된 탭 배경색
    "tab.activeBackground": "#282c34",
    // 활성화된 탭 글자색
    "tab.activeForeground": "#ffffff",
    // 비활성화된 탭 배경색
    "tab.inactiveBackground": "#303438",
    // 비활성화된 탭 글자색
    "tab.inactiveForeground": "#cccccc"
}

위 코드를 settings.json 파일에 추가하면 다음과 같은 효과를 볼 수 있습니다.

• 활성화된 탭: 어두운 회색 배경에 흰색 글자로 강조되어 현재 작업 중인 탭을 명확하게 구분할 수 있습니다.
• 비활성화된 탭: 조금 더 밝은 회색 배경에 회색 글자로 표시되어 활성화된 탭과의 차이를 시각적으로 구분할 수 있습니다.

다양한 설정 예시

• 탭 테두리 색 변경:

  "tab.border": "#404448"
  

• 탭 크기 조절:

  "workbench.editor.tabSizing": "fit-to-content" // 탭 크기를 내용에 맞게 조절
  

• 탭 위치 변경:

  "workbench.editor.tabPlacement": "bottom" // 탭을 아래쪽으로 이동
  

나만의 탭 스타일 만들기

위 예시들을 참고하여 다양한 색상과 스타일을 조합하여 자신만의 탭 스타일을 만들 수 있습니다. 색상 코드는 HTML 색상 코드를 사용할 수 있으며, 원하는 색상을 찾기 위해 색상 팔레트를 참고하면 좋습니다.

팁:

• 색상 조합: 활성화된 탭과 비활성화된 탭의 색상 차이를 명확하게 하기 위해 충분한 명도 차이를 두는 것이 좋습니다.
• 가독성: 배경색과 글자색의 조합이 눈에 피로를 주지 않도록 적절한 색상을 선택해야 합니다.
• 테마: 사용하는 VSCode 테마에 따라 탭 스타일이 달라질 수 있으므로 테마와의 조화를 고려해야 합니다.

728x90

VSCode의 JSON 설정을 활용하면 (비)활성화 탭을 명확하게 구분하여 작업 효율을 높일 수 있습니다. 다양한 설정을 조합하여 자신만의 맞춤형 개발 환경을 구축해 보세요.

주의:

• JSON 설정은 신중하게 변경해야 합니다. 잘못된 설정은 예상치 못한 문제를 발생시킬 수 있습니다.
• 변경하기 전에 반드시 백업을 해두는 것이 좋습니다.

참고:

• VSCode 공식 문서: [링크]
• 색상 팔레트: [링크]

궁금한 점이 있다면 언제든지 질문해주세요!

소스 박스:

"workbench.colorCustomizations": {
    "tab.activeBackground": "#282c34",
    "tab.activeForeground": "#ffffff",
    "tab.inactiveBackground": "#303438",
    "tab.inactiveForeground": "#cccccc"
}