ANSI 이스케이프 코드

이스케이프 시퀀스를 이용해서 콘솔에 찍히는 문자열의 색상을 바꿀 수 있다. 이스케이프 시퀀스란 백슬래쉬 다음으로 오는 숫자와 문자들의 조합으로 일반적으로 제어 문자를 표현할 때 주로 사용된다. 많이 사용되는 이스케이프 시퀀스로 개행을 뜻하는 \n과 탭을 넣을 수 있는 \t 등 다양한 이스케이프 시퀀스가 존재한다.

Nodejs 환경에서 콘솔에 문자열을 찍으면 검은색 글자로 출력된다. (다크 테마인 경우 하얀색)

글에서는 검은색과 하얀색이라고 했지만 각각 콘솔 환경에 따라 검은색이 완전 검은색rgb(0, 0, 0)으로 표현되는 콘솔(터미널)이 있고 완전 검은색이 아닌 콘솔이 있다. 색상명과 색상 코드는 표준으로 지정되어 있지만 그 색상이 어떻게 표현될지는 콘솔 환경에 따라 다르다는 얘기다.

이 이스케이프 시퀀스를 이용해서 출력되는 문자열의 서식이나 색상을 변경할 수 있다. 또한 배경색까지 설정할 수 있다.

console.log('\x1b[31m%s', 'Hello World')

예를 들어서 위의 \x1b[31m 이라는 이스케이프 시퀀스를 주게 되면 콘솔에서 이를 처리해서 다음에 오는 문자열을 이스케이프 시퀀스에 맞는 서식, 글씨 색, 배경 색으로 처리한다. 아래는 위의 코드로 출력 된 문자열이다.

Hello World라는 문자열이 빨강색으로 출력된 걸 볼 수 있다. 이렇듯 이스케이프 시퀀스를 이용하면 다양한 문자열 처리를 할 수 있다.

서식을 바꿀 수 있는 이스케이프 시퀀스

다양한 서식을 지정할 수 있는 이스케이프 시퀀스가 있다.

\x1b[1m / \x1b[2m

표준으로 지정된 코드는 1번 효과는 Bold or increased intensity 즉, 글씨의 굵기를 키운다. 2번의 효과는 Faint (decreased intensity) 글씨를 얇게 한다. 'Dim'이라고도 부른다.

\x1b[3m / \x1b[4m

각각 3번과 4번 코드에 지정된 이스케이프 시퀀스, 이탤릭체로 표시하는 시퀀스와 밑줄을 추가하는 시퀀스다. 이탤릭체는 모든 콘솔에서 지원하지 않으며 일부 콘솔에서는 지원하지 않는 경우도 있다.

색상을 바꿀 수 있는 이스케이프 시퀀스

\x1b[7m

글씨색과 배경색을 바꾼다. 예를 들어 배경색이 빨간색으로 되어 있고 글씨 색깔이 검은색으로 되어 있다면 배경색은 검은색으로 바꾸고 글씨 색을 빨간색으로 바꾼다.

\x1b[30-37 / \x1b[40-47

30번부터 37번 코드까지는 표준으로 지정된 색들이고 40번부터 47번까지는 배경색에 대한 설정이다. 각각의 코드에 지정된 색상명이 있으며 순서대로 Black, Red, Green, Yellow, Blue, Magenta, Cyan, White가 있다.

자세한 색상 코드와 콘솔마다 다른 색상 표기

이스케이프 시퀀스 사용하기

콘솔에서 문자열을 출력하는 과정에서 %s라는 문자를 만나면 뒤에 오는 인자의 문자열로 처리한다. 그 방법을 이용해서 다양한 색상을 콘솔에 입혀보자

console.log(
  '\x1b[30m%s\x1b[31m%s\x1b[32m%s\x1b[33m%s\x1b[34m%s\x1b[35m%s\x1b[36m%s\x1b[37m%s',
  'Black',
  'Red',
  'Green',
  'Yellow',
  'Blue',
  'Magenta',
  'Cyan',
  'White'
)

사용하고 있는 에디터가 VSCode인데, 테마가 다크 테마라 검은색이 잘 보이지 않는다. 그 외 색상들은 매우 잘 변경되어 있는걸 볼 수 있다. 30번부터 37번까지는 글씨 색상에 대한 코드이고 40번부터 47번까지는 배경색에 관한 코드이니 배경색을 한번 바꿔본다.

배경색도 마찬가지로 변경이 아주 잘 된다.

너무 귀찮아...

당연하게도 이런 이스케이프 시퀀스를 통해서 문자열의 색상을 바꿔서 출력하는 것은 매우 귀찮은 일이다. 다음에 오는 문자열도 이전에 적용된 이스케이프 시퀀스 효과를 상속받아 출력되는데, 이걸 막기 위해 늘 이스케이프 시퀀스를 적용한 뒤에는 다른 시퀀스를 이용해서 리셋을 해줘야한다.

다행히도 이런 귀찮음을 덜어주는 라이브러리가 있다. 바로 chalk라는 라이브러리다.

chalk 라이브러리 사용

yarn add chalk

일단 라이브러리를 설치해준다.

const chalk = require('chalk')

console.log(chalk.blue('Blue'))

이제 바로 파란색 문자열이 나올 수 있는 걸 볼 수 있다. 라이브러리를 사용하면 복잡한 이스케이프 시퀀스를 알아야될 필요 없이 손쉽게 사용할 수 있다. chalk에서 제공하는 다양한 메소드를 통해 다채로운 색상으로 표현할 수 있다.

console.log(chalk.blue.bgRed('Blue and red background'))

각각의 메소드는 인스턴스를 반환해서 체이닝 형식으로 사용할 수 있다. 위는 글씨를 파란색으로 지정하고 빨간 배경색을 입힌 문자열이다. 라이브러리를 사용하지 않고 이스케이프 시퀀스를 사용했을 때에는 뒤에 오는 문자열에 대해 리셋을 해줘야되었지만 chalk를 사용하면 그 리셋을 해야되는 번거로움을 자동으로 처리해준다.

chalk 라이브러리를 사용하는 방법은 매우 직관적이고 쉬우니 저장소를 참고해서 사용법을 익히는 것이 좋다.