1. 콘솔창을 꾸미는 이유

facebook 페이지에 들어가 개발자도구를 열어보면 왼쪽과 같은 경고창이 뜬다. 경고창 말고도 채용 공고나 쿠폰 번호가 뜨기도 한다. 이렇게 어떠한 정보를 알리기 위해 콘솔창을 꾸미기도 하지만 테스트를 위해 콘솔창을 꾸미기도 한다.

Untitled

2. 간단한 테스트

아래와 같이 콘솔창에서 간단한 테스트를 해볼 수 있다. CSS 스타일로 컬러나 크기, 위치 등을 꾸밀 수 있다. 아래와 같이 꾸미고 싶은 텍스트는 %c로 시작해야 한다.

// %s: String 
// %d: Number 
// %i: parseInt(value, 10)
// %f: parseFloat(value)
// %j: JSON
// %o: Object (including non-enumerable properties and proxies)
// %O: Object (not including non-enumerable properties and proxies)
// %c: CSS
// %%: single p

console.log("%chello world", "color:red;font-size:32px");

Untitled

한꺼번에 여러 텍스트를 꾸미고 싶다면 아래와 같은 코드로 입력할 수 있다.

console.log("%chello world%chello", "color:red;font-size:32px", "color:blue;font-size:16px");

Untitled

3. 더 꾸미기

이모지나 아래와 같은 사이트를 이용하여 콘솔을 더 화려하게 꾸밀 수 있다. 이미지를 텍스트 아트로 변환시킨다던지, 텍스트를 아스키코드로 바꿔주는 작업을 할 수 있다.