ทันเอไอ

Console의 텍스트를 꾸미는 Styled Logging 기능 소개, 14년 전 Firebug 플러그인에서 유래

정부 웹사이트 TH AI Passport의 Developer Console에 표시된 거대한 “멈추세요” 문구에 많은 이들이 궁금증을 보였지만, 사실 이는 2012년 Firebug 플러그인 시절부터 있던 Styled Logging 기능이다

최근 태국 인터넷 사용자 다수가 정부 웹사이트 TH AI Passport에 접속한 채로 Developer Console(브라우저에 숨겨진 개발자 도구)을 열었다가 커다랗고 눈에 띄는 “멈추세요”라는 문구를 보고 놀라곤 했다. 많은 이들이 콘솔에서 이렇게 멋지게 서식이 적용된 텍스트를 표시할 수 있다는 사실을 처음 알았지만, 사실 이 기능은 개발자들에게 십여 년 전부터 개방되어 있었다.

이 기능의 이름은 Styled Logging으로, console.log 명령어에서 %c 지정자를 텍스트 앞에 붙이고 뒤에 CSS(웹페이지 스타일을 지정하는 언어) 값을 넣어 Console의 텍스트를 꾸미는 방식이다. 글자 색상, 폰트 크기, 배경색 등을 지정할 수 있다. 예를 들어 console.log("%c문구", "color: red; font-size: 20px;")라고 입력하면 콘솔에 표시되는 문구가 즉시 커다란 빨간 글자로 바뀐다.

2006년으로 거슬러 올라가면, 당시 브라우저에는 지금처럼 내장 Developer Console이 없었다. 이에 Netscape 출신 소프트웨어 엔지니어이자 Firefox 프로젝트 공동 창립자인 Joe Hewitt이 개발자들이 브라우저에서 직접 웹을 디버깅(오류를 찾아 수정)할 수 있도록 Firebug라는 플러그인을 만들었다. 이후 2012년 Firebug 버전 1.11에서 %c를 통한 Styled Logging 기능이 추가되어 하나의 로그에 여러 CSS 스타일을 지정할 수 있게 되었고, 이것이 이 기능이 알려지기 시작한 계기가 되었다.

이후 주요 브라우저들이 이 기능을 자체 도구에 차례로 탑재했다. Firefox는 2014년 버전 31부터 Styled Console Logs를 기본 도구로 포함했고, Chrome, Edge, Safari 역시 이를 지원한다. 현재 %c는 WHATWG Console Specification에 국제 표준으로 명시되어 있다.

TH AI Passport 사례의 경우, 콘솔에 큰 경고 문구를 표시하는 것은 일반 사용자가 콘솔에 낯선 코드를 붙여 넣지 않도록 경고하기 위해 웹사이트들이 즐겨 쓰는 기법이다. 사기꾼에게 속아 위험한 명령을 실행하게 될 수 있기 때문이다. 따라서 이런 문구를 보더라도 놀랄 필요는 없으며, 낯선 사람의 지시에 따라 어디선가 복사한 코드를 붙여 넣지만 않으면 안전하다.