터미널에서 console.log() 스타일 지정

실패한 그래픽 디자이너로서 가독성의 중요성은 항상 제 과정에서 강조되었습니다. 사용자가 무언가를 명확하게 읽을 수 없다면 문제입니다!

나는 델리 라인을 모방한 콘솔 프로그램을 만들어야 하는 과제를 한창 하고 있었습니다. 나는 해야 할 많은 console.logs를 따라가는 데 어려움을 겪고 있음을 깨달았습니다. 그래서 궁금했는데.. 어떻게 하면 더 읽기 쉽게 만들 수 있을까요?

검색하다가 터미널의 console.log 기능 내에서 모든 종류의 항목을 변경할 수 있는 기능 세트를 찾았습니다. 이러한 일련의 함수는 다음과 같습니다.

console.log("\x1b[93m\x1b[3m%s\x1b[0m", "Phrase") 
// displays "Phrase" in yellow and italic

알아, 알아, 이건 미친 것 같아! 분해합시다.

먼저 이스케이프 시퀀스를 사용하여 터미널에 "정보를 받을 준비를 하세요!"라고 알려야 합니다. \x1b 를 입력하면 됩니다. 이를 ANSI 이스케이프 시퀀스라고 합니다. \x1b는 이스케이프 키의 ANSI입니다. 이는 JavaScript 문자열에서 이스케이프 문자 "\"를 사용하는 것과 같습니다.

ANSI 이스케이프 시퀀스를 사용한 후 콘솔에 함수를 도입할 것이라고 알립니다. [ 키를 사용하여 이 작업을 수행합니다. CSI(Control Sequence Introducer)입니다.

CSI 다음에는 함수가 사용할 몇 가지 매개변수(이 경우 숫자)를 나열합니다. 여기에서 원하는 스타일 지정에 대해 생각합니다. 이들은 SGR(Select Graphic Rendition) 기능인 m 라는 기능의 매개변수가 됩니다. 다음은 확인할 수 있는 매개변수 목록입니다.


매개변수
설명


0
콘솔 스타일 재설정

1
굵게 또는 증가된 강도(설정에 따라 다름)

삼
이탤릭체

4
밑줄

7
색상 반전

8
숨겨진

9
취소선

30-37
기본 팔레트에서 글꼴 색상 설정

38
256색/24비트 팔레트에서 글꼴 색상 설정: 38:5:#를 사용하여 256색 테이블에서 선택하거나 38;2;r;g;b를 사용하여 24비트 색상에서 선택합니다. (RGB 사용)

40-47
배경색 설정

48
256색/24비트 팔레트에서 배경색 설정: 48:5:#를 사용하여 256색 테이블에서 선택하거나 48;2;r;g;b를 사용하여 24비트 색상에서 선택합니다. (RGB 사용)

90-97
밝은 글꼴 색상 설정

100-107
밝은 배경색 설정


사용할 수 있는 색상을 보려면 Wikihttps://en.wikipedia.org/wiki/ANSI_escape_code#3-bit_and_4-bit에서 색상표를 확인하십시오.
\x1b 및 다른 스타일 코드/함수를 추가하여 여러 스타일을 함께 연결할 수 있습니다. 예를 들어 밝은 청록색 취소선 콘솔 로그의 경우 \x1b[96m\x1b[9m를 사용합니다.



스타일링 코드를 완성한 후에는 메시지로 표시할 내용을 터미널에 알려야 합니다. 우리는 이것을 두 가지 방법으로 할 수 있습니다. 한 가지 방법은 다음과 같이 스타일 지정 코드 바로 뒤에 텍스트를 추가하는 것입니다(끝\x1b[0m의 의미는 잠시 후에 논의하겠습니다).

console.log("\x1b[48;5;49mMint Background\x1b[0m")

또는 다음과 같이 '자리 표시자'%s를 사용하고 console.log에 두 번째 문자열 인수를 전달할 수 있습니다.

console.log("\x1b[48;5;49m%s\x1b[0m", "Mint Background")

중요한 참고 사항: 스타일 지정을 마치면 터미널이 스타일을 종료할 위치를 알 수 없습니다. 따라서 콘솔을 기본 설정으로 재설정하려면 문자열 또는 자리 표시자 끝에 \x1b[0m를 사용하여 스타일을 재설정해야 합니다.

이제 다음 프로젝트를 위한 멋진 터미널 콘솔 로그가 있습니다!

아래는 VSCode 및 Windows 터미널의 내 콘솔에서 다양한 색상이 어떻게 보이는지 보여주는 스크린샷입니다.



아래 코드를 사용하여 터미널에서 어떻게 보이는지 확인하세요. 재미있게 즐기세요!

console.log("\n\n")
console.log("***** BASE TERMINAL EXAMPLES *****\n")
console.log("- \\x1b[0m", "  | \x1b[0mReset\x1b[0m")
console.log("- \\x1b[1m", "  | \x1b[1mBold/Bright\x1b[0m")
console.log("- \\x1b[3m", "  | \x1b[3mItalic\x1b[0m")
console.log("- \\x1b[4m", "  | \x1b[4mUnderline\x1b[0m")
console.log("- \\x1b[7m", "  | \x1b[7mReverse\x1b[0m")
console.log("- \\x1b[8m", "  | \x1b[8mHidden\x1b[0m - hidden")
console.log("- \\x1b[9m", "  | \x1b[9mStrike-through\x1b[0m")

console.log("- \\x1b[30m", " | \x1b[30mBlack\x1b[0m")
console.log("- \\x1b[31m", " | \x1b[31mRed\x1b[0m")
console.log("- \\x1b[32m", " | \x1b[32mGreen\x1b[0m")
console.log("- \\x1b[33m", " | \x1b[33mYellow\x1b[0m")
console.log("- \\x1b[34m", " | \x1b[34mBlue\x1b[0m")
console.log("- \\x1b[35m", " | \x1b[35mMagenta\x1b[0m")
console.log("- \\x1b[36m", " | \x1b[36mCyan\x1b[0m")
console.log("- \\x1b[37m", " | \x1b[37mWhite\x1b[0m")

console.log("- \\x1b[40m", " | \x1b[40mBlack Background\x1b[0m")
console.log("- \\x1b[41m", " | \x1b[41mRed Background\x1b[0m")
console.log("- \\x1b[42m", " | \x1b[42mGreen Background\x1b[0m")
console.log("- \\x1b[43m", " | \x1b[43mYellow Background\x1b[0m")
console.log("- \\x1b[44m", " | \x1b[44mBlue Background\x1b[0m")
console.log("- \\x1b[45m", " | \x1b[45mMagenta Background\x1b[0m")
console.log("- \\x1b[46m", " | \x1b[46mCyan Background\x1b[0m")
console.log("- \\x1b[47m", " | \x1b[47mWhite Background\x1b[0m")

console.log("- \\x1b[90m", " | \x1b[90mBright Black\x1b[0m")
console.log("- \\x1b[91m", " | \x1b[91mBright Red\x1b[0m")
console.log("- \\x1b[92m", " | \x1b[92mBright Green\x1b[0m")
console.log("- \\x1b[93m", " | \x1b[93mBright Yellow\x1b[0m")
console.log("- \\x1b[94m", " | \x1b[94mBright Blue\x1b[0m")
console.log("- \\x1b[95m", " | \x1b[95mBright Magenta\x1b[0m")
console.log("- \\x1b[96m", " | \x1b[96mBright Cyan\x1b[0m")
console.log("- \\x1b[97m", " | \x1b[97mBright White\x1b[0m")

console.log("- \\x1b[100m", "| \x1b[100mBright Black Background\x1b[0m")
console.log("- \\x1b[101m", "| \x1b[101mBright Red Background\x1b[0m")
console.log("- \\x1b[102m", "| \x1b[102mBright Green Background\x1b[0m")
console.log("- \\x1b[103m", "| \x1b[103mBright Yellow Background\x1b[0m")
console.log("- \\x1b[104m", "| \x1b[104mBright Blue Background\x1b[0m")
console.log("- \\x1b[105m", "| \x1b[105mBright Magenta Background\x1b[0m")
console.log("- \\x1b[106m", "| \x1b[106mBright Cyan Background\x1b[0m")
console.log("- \\x1b[107m", "| \x1b[107mBright White Background\x1b[0m")

console.log("\n***** 24-BIT RGB COLOR EXAMPLES *****\n")
console.log("- \\x1b[38;2;150;56;78m", "| \x1b[38;2;150;56;78mCustom RGB 'Rose' Font\x1b[0m")
console.log("- \\x1b[38;2;229;255;0m", "| \x1b[38;2;229;255;0mCustom RGB 'Yellow' Font\x1b[0m")

console.log("\n***** 256-COLOR (8-BIT) COLOR EXAMPLES *****\n")

console.log("- \\x1b[48;5;49m", "| \x1b[48;5;49mMint Background\x1b[0m")
console.log("- \\x1b[48;5;45m", "| \x1b[48;5;45mCyan Background\x1b[0m")
console.log("- \\x1b[38;5;33m", "| \x1b[38;5;33mBlue Font\x1b[0m")
console.log("- \\x1b[38;5;61m", "| \x1b[38;5;61mPurple Font\x1b[0m")

console.log("\n\n")

Sources:
https://davidlozzi.com/2021/03/16/style-up-your-console-logs/
https://simplernerd.com/js-console-colors/
https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
https://tforgione.fr/posts/ansi-escape-codes/