커맨드 팔레트 35부: VS Code Task Terminal을 아이콘과 색으로 빠르게 구분하기

VS CODE 초보자 시리즈 · 커맨드 팔레트 35부

Task Terminal을 아이콘과 색으로 빠르게 구분하기

tasks.json의 icon.id와 icon.color로 비슷한 Task Terminal을 한눈에 구분합니다.

이번 편의 핵심

테스트 Task에는 초록색 beaker, 패키지 Task에는 청록색 package 아이콘을 지정합니다.

완료 기준은 두 Task를 한 번씩 실행한 뒤 Terminal 탭과 출력 TASK_ICON_LAB_TEST, TASK_ICON_LAB_PACKAGE를 모두 확인하는 것입니다.

목차

1. 시작하기 전에
2. 알아둘 핵심 개념
3. 순서대로 진행하기
4. 완료 확인하기
5. 문제가 생겼다면
6. 핵심 정리와 공식 자료

1. 시작하기 전에

한국어 초보자 · Windows 11 · VS Code Stable 1.136.0 · Windows PowerShell 환경을 기준으로 합니다. 배포·삭제·외부 전송 없이 Write-Output 두 줄만 실행합니다.

준비할 것

• 새 빈 연습 폴더 — 실제 프로젝트와 섞이지 않는 위치에 만듭니다.
• Workspace 신뢰 여부 — Restricted Mode라면 내용을 먼저 읽고 신뢰할 수 있는 연습 폴더에서만 Task를 실행합니다.
• .vscode/tasks.json — 이미 존재하면 덮어쓰지 말고 다른 새 연습 폴더를 사용합니다.

실행 전 사람 확인 두 Task의 command가 정확히 powershell.exe이고 args가 안내된 Write-Output뿐인지 확인하세요. 외부 경로, 자격 증명, 설치·삭제·배포 명령이 보이거나 기존 tasks.json이 있다면 중단합니다.

2. 알아둘 핵심 개념

icon은 Task 최상위 속성

icon은 label, command, presentation과 같은 깊이에 둡니다. presentation 안에 넣으면 의도한 Terminal 아이콘 설정으로 해석되지 않습니다.

id는 Codicon 이름

beaker, package처럼 VS Code의 내장 제품 아이콘 ID를 문자열로 입력합니다. $(beaker) 표기나 그림 문자를 넣지 않습니다. Product Icon Theme에 따라 모양은 조금 달라질 수 있습니다.

color는 정해진 Terminal ANSI 테마 색

임의의 색 이름이나 #00ff00 같은 HEX 값을 쓰지 않습니다. Stable 스키마가 허용하는 값은 terminal.ansiBlack, terminal.ansiRed, terminal.ansiGreen, terminal.ansiYellow, terminal.ansiBlue, terminal.ansiMagenta, terminal.ansiCyan, terminal.ansiWhite의 여덟 가지이며 대소문자를 구분합니다.

panel: "dedicated"는 비교를 안정화

각 Task에 전용 Terminal을 배정해 두 탭을 나란히 확인하기 쉽게 합니다. 아이콘 기능 자체의 필수 조건은 아닙니다.

3. 순서대로 진행하기

각 단계의 정상 결과를 확인한 뒤 다음 단계로 이동하세요.

1. 새 연습 폴더 열기

목적 기존 Workspace 설정과 실습을 완전히 분리합니다.

1. 빈 폴더 jcos-task-icon-lab을 만들고 File > Open Folder...로 엽니다.
2. Explorer에서 .vscode/tasks.json이 없는지 확인합니다.

입력 위치 Windows 파일 탐색기와 VS Code Explorer

jcos-task-icon-lab\
└─ (비어 있음)

정상 결과 Explorer에 새 폴더만 보이고 기존 Task 파일은 없습니다.

확인 창 제목과 Explorer 루트가 jcos-task-icon-lab인지 확인합니다.

실패 신호 소스 파일이나 기존 .vscode 폴더가 보입니다.

복구 어떤 파일도 바꾸지 말고 새 빈 폴더를 다시 연 뒤 Step 1부터 재개합니다.

2. Workspace Task 파일 만들기

목적 설정 범위를 이 연습 폴더에만 한정합니다.

1. Explorer에서 .vscode 폴더를 만듭니다.
2. 그 안에 tasks.json 파일을 만듭니다.

입력 위치 VS Code Explorer

jcos-task-icon-lab\
└─ .vscode\
   └─ tasks.json

정상 결과 편집기 탭에 연습 폴더 아래의 .vscode/tasks.json이 열립니다.

확인 탭 경로가 User Tasks가 아닌 현재 Workspace 경로인지 확인합니다.

실패 신호 다른 프로젝트의 Task 파일이나 사용자 범위 파일이 열립니다.

복구 저장하지 말고 Step 1의 연습 폴더로 돌아와 파일을 다시 만듭니다.

3. 아이콘이 다른 두 Task 입력

목적 실행 내용은 단순하게 유지하고 시각 구분만 비교합니다.

1. 아래 JSON 전체를 붙여넣고 저장합니다.

입력 위치 .vscode/tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "JCOS 테스트 확인",
      "type": "process",
      "command": "powershell.exe",
      "args": ["-NoProfile", "-Command", "Write-Output 'TASK_ICON_LAB_TEST'"],
      "problemMatcher": [],
      "icon": { "id": "beaker", "color": "terminal.ansiGreen" },
      "presentation": { "reveal": "always", "panel": "dedicated", "clear": true, "showReuseMessage": false }
    },
    {
      "label": "JCOS 패키지 확인",
      "type": "process",
      "command": "powershell.exe",
      "args": ["-NoProfile", "-Command", "Write-Output 'TASK_ICON_LAB_PACKAGE'"],
      "problemMatcher": [],
      "icon": { "id": "package", "color": "terminal.ansiCyan" },
      "presentation": { "reveal": "always", "panel": "dedicated", "clear": true, "showReuseMessage": false }
    }
  ]
}

정상 결과 JSON에 빨간 밑줄이 없고 두 icon 객체가 각각 Task 최상위에 있습니다.

확인 첫 Task는 beaker/terminal.ansiGreen, 둘째는 package/terminal.ansiCyan인지 읽습니다.

실패 신호 icon이 presentation 안에 있거나 색 값에 밑줄이 생깁니다.

복구 위 예제와 중괄호 위치·대소문자를 다시 맞춘 뒤 Step 3에서 재개합니다.

4. 실행 전에 설정값 읽어 확인

목적 명령을 실행하기 전 JSON과 아이콘 값을 독립적으로 검사합니다.

1. Terminal > New Terminal을 엽니다.
2. 아래 읽기 전용 명령을 실행합니다.

입력 위치 연습 폴더의 Integrated Terminal

$config = Get-Content -Raw -LiteralPath .\.vscode\tasks.json | ConvertFrom-Json
$config.tasks | Select-Object label,
  @{Name='IconId';Expression={$_.icon.id}},
  @{Name='IconColor';Expression={$_.icon.color}}

정상 결과 두 행에 beaker / terminal.ansiGreen과 package / terminal.ansiCyan이 표시됩니다.

확인 행의 label과 아이콘 값이 Step 3과 일치하는지 대조합니다.

실패 신호 JSON 변환 오류, 빈 IconId, 예상과 다른 색이 표시됩니다.

복구 Task를 실행하지 말고 오류 위치를 고쳐 저장한 뒤 Step 4 명령을 다시 실행합니다.

5. 초록 비커 Task 실행

목적 첫 번째 Terminal 탭의 아이콘·색·출력을 확인합니다.

1. Ctrl+Shift+P를 누릅니다.
2. Tasks: Run Task를 실행하고 JCOS 테스트 확인을 선택합니다.

입력 위치 Command Palette와 Task 선택 목록

Tasks: Run Task
JCOS 테스트 확인

정상 결과 Terminal 탭에 초록 계열 비커 아이콘이 보이고 본문에 TASK_ICON_LAB_TEST가 출력됩니다.

확인 종료 코드 오류가 없고 출력 문자열이 정확한지 확인합니다.

실패 신호 다른 명령이 실행되거나 출력이 다르거나 아이콘이 기본 모양입니다.

복구 실행을 중단하고 Step 3에서 첫 Task의 label, command, args, icon 위치를 다시 확인한 뒤 Step 5로 돌아옵니다.

6. 청록 패키지 Task 실행

목적 두 번째 전용 Terminal을 만들어 시각 차이를 비교합니다.

1. 다시 Tasks: Run Task를 실행합니다.
2. JCOS 패키지 확인을 선택합니다.

입력 위치 Command Palette와 Task 선택 목록

Tasks: Run Task
JCOS 패키지 확인

정상 결과 별도 Terminal 탭에 청록 계열 패키지 아이콘이 보이고 TASK_ICON_LAB_PACKAGE가 출력됩니다.

확인 Terminal 탭 목록에서 초록 비커 탭과 청록 패키지 탭을 번갈아 선택합니다.

실패 신호 탭이 하나뿐이거나 두 아이콘이 동일하게 보입니다.

복구 두 Task의 panel이 모두 dedicated인지 확인하고 각각 한 번씩 다시 실행한 뒤 Step 6에서 재개합니다.

7. 완료 조건 독립 확인

목적 설정값과 실행 결과를 서로 다른 방법으로 확인합니다.

1. Step 4의 PowerShell 조회를 다시 실행합니다.
2. 두 Task를 차례로 다시 실행하고 각 전용 Terminal의 문자열을 확인합니다.
3. Terminal 탭 목록에서 비커/초록과 패키지/청록이 구분되는지 확인합니다.

입력 위치 Integrated Terminal, Command Palette, Terminal 탭 목록

JCOS 테스트 확인   → beaker  → terminal.ansiGreen → TASK_ICON_LAB_TEST
JCOS 패키지 확인   → package → terminal.ansiCyan  → TASK_ICON_LAB_PACKAGE

정상 결과 설정 두 행, 출력 두 문자열, 서로 다른 두 Terminal 탭이 모두 일치합니다.

확인 아이콘 모양만이 아니라 label·색·출력을 함께 대조합니다.

실패 신호 세 확인 항목 중 하나라도 불일치합니다.

복구 불일치한 Task만 Step 3에서 수정하고 Step 4부터 다시 확인합니다.

8. 아이콘 설정 되돌리기

목적 Task 명령은 유지하면서 시각 설정만 안전하게 제거합니다.

1. tasks.json에서 두 icon 객체만 삭제하고 저장합니다.
2. 한 Task를 다시 실행해 기본 Terminal 아이콘으로 돌아왔는지 확인합니다.

입력 위치 .vscode/tasks.json

삭제할 블록:
"icon": {
  "id": "beaker",
  "color": "terminal.ansiGreen"
}

정상 결과 command·args·출력은 그대로이고 사용자 지정 아이콘과 색만 사라집니다.

확인 Write-Output 줄과 두 label이 남았는지 확인합니다.

실패 신호 Task 자체가 목록에서 사라지거나 JSON 오류가 생깁니다.

복구 실행 취소로 삭제 범위를 복원하고 쉼표까지 포함해 icon 속성만 제거한 뒤 Step 8을 반복합니다. 연습 폴더 삭제는 자동으로 하지 않습니다.

4. 완료 확인하기

아래 항목을 모두 만족하면 실습이 끝났습니다.

• icon이 각 Task의 최상위에 있었고 presentation 안에 들어가지 않았습니다.
• 첫 전용 Terminal은 beaker·terminal.ansiGreen, 둘째는 package·terminal.ansiCyan으로 구분됐습니다.
• TASK_ICON_LAB_TEST와 TASK_ICON_LAB_PACKAGE가 정확히 출력됐습니다.
• 되돌리기에서는 두 icon 객체만 제거했고 실행 명령은 유지했습니다.

관찰 포인트 제품 아이콘 테마가 바뀌면 glyph의 세부 모양은 달라질 수 있으므로 ID·색·label·출력을 함께 확인하는 것이 가장 확실합니다.

5. 문제가 생겼다면

아이콘 ID에 빨간 밑줄이 생겨요

"id": "beaker"처럼 Codicon ID만 입력했는지 확인하고 Ctrl+Space의 제안을 사용하세요. $(beaker)는 쓰지 않습니다.

색 값이 거부돼요

terminal.ansiGreen처럼 허용된 여덟 ANSI 테마 색 중 하나를 정확한 대소문자로 입력하세요. HEX와 green은 이 속성의 값이 아닙니다.

아이콘 모양이 화면 예시와 달라요

Product Icon Theme이 Codicon 모양을 다시 정의할 수 있습니다. id가 맞다면 오류가 아닐 수 있으며, 필요하면 Preferences: Product Icon Theme에서 현재 테마를 확인합니다.

Terminal 탭이 하나만 보여요

두 Task를 각각 한 번씩 실행하고 첫 탭을 닫지 마세요. 두 Task의 panel이 dedicated인지 확인합니다.

출력은 맞는데 아이콘이 기본 모양이에요

icon이 presentation의 내부가 아니라 Task 객체의 최상위 형제 속성인지 확인하고 Task를 다시 실행합니다.

6. 핵심 정리와 공식 자료

• icon.id에는 Codicon ID를, icon.color에는 허용된 Terminal ANSI 테마 색 ID를 사용합니다.
• icon은 Task 최상위 속성이며 panel: "dedicated"는 두 전용 Terminal 비교를 돕습니다.
• 아이콘은 시각 신호일 뿐이므로 안전성은 실행 전 command·args를 직접 읽어 확인합니다.

공식 자료

• VS Code Tasks 공식 문서
• VS Code 제품 아이콘 참조
• VS Code 1.69 릴리스 노트 — Task 아이콘과 색
• Stable 1.136.0 Task JSON 스키마
• Stable 1.136.0 Task 설정 파서
• Stable 1.136.0 Terminal Task 구현

다음 편 예고 커맨드 팔레트 36부에서는 실행이 끝난 Terminal 탭에서 같은 Task를 바로 다시 실행하고, 전용 Terminal 재사용과 출력까지 확인합니다.