개발자 도구 console 창 꾸미기
웹 페이지의 개발자 콘솔
가끔 웹 페이지를 돌아다니면서 개발자 도구를 보곤 한다. elements의 class name을 보면 대충 어떤 스택으로 개발했는지가 보이고, header의 tag를 보면 seo를 위해 어떤 작업을 했는지 알 수 있기 때문이다. 또한 개발자 도구에서 console 창을 보면 만들어진 웹 페이지의 완성도가 보인다. 어떤 페이지는 개발 중에 남겨놓은 콘솔이 노출되어 스택이 그대로 노출되기도 하고 어떤 웹 페이지는 귀여운 캐릭터로 콘솔 창을 꾸미기도 한다. 물론 엔지니어가 아니라면 개발자 도구까지 볼 일이 없겠지만, 이런 세세한 부분에서 웹 페이지를 만든 엔지니어의 애착과 만든 팀의 분위기가 느껴지기도 한다.
위의 이미지는 토스 홈페이지의 콘솔 창이다. 위의 정보를 토대로 toss는 next js를 사용하고 있다는 것을 알 수 있다. 또한 onelink를 사용하는 것을 보면 appsflyer 서비스를 이용하고 있고 사용자의 액션이 추적되고 있으며, 토스 어플리케이션도 appsflyer를 사용하리라 예측해볼 수 있다. 물론 이러한 정보는 보안상 문제가 되는 것은 아니다. 하지만 엔지니가 실수로 API 주소라든가 token 값이래든가를 console에 노출하게 되면 보안상 문제가 될 수 도 있으니 주의해야 한다.
콘솔의 중요성을 논하고자 적은 글이 아니니 각설하고.. 위의 두 이미지는 각각 오늘의 집과 쿠팡의 개발자 console이다. 별거 아닌 것 같지만 엔지니어의 디테일이 느껴진다. 예상이지만 아마 기획서에 개발자 console에 대한 기획은 없었을 것이다. 물론 퍼블리셔분이나 디자이너분이 요청한 것일 수도 있고 엔지니어가 아닌 분이 작업한 것일 수도 있지만 누가 했던 작업자에게 경의를 표한다.
콘솔을 꾸미는 법
콘솔 창을 꾸미는 방법은 어렵지 않다. Template strings 방식으로 모양을 만들어 주면 된다. template strings는 여러 줄로 이뤄진 문자열과 문자 보간 기능을 사용하는 방식(cf. mozilla home page)인데, 아래와 같은 방식으로 console log를 찍으면 눈에 보이는 모양대로 log를 노출할 수 있다.
javascriptconsole.log(` ▄▄ ▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄▄▄ ▄▄ ▄▄▄▄▄▄▄▄▄▄▄ ▐░░▌ ▐░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌ ▐░▌░▌ ▐░▐░▌▐░█▀▀▀▀▀▀▀█░▌▐░█▀▀▀▀▀▀▀▀▀ ▐░█▀▀▀▀▀▀▀█░▌ ▐░▌▐░▌ ▐░▌▐░▌▐░▌ ▐░▌▐░▌ ▐░▌ ▐░▌ ▐░▌ ▐░▐░▌ ▐░▌▐░█▄▄▄▄▄▄▄█░▌▐░▌ ▄▄▄▄▄▄▄▄ ▐░▌ ▐░▌ ▐░▌ ▐░▌ ▐░▌▐░░░░░░░░░░░▌▐░▌▐░░░░░░░░▌▐░▌ ▐░▌ ▐░▌ ▀ ▐░▌▐░█▀▀▀▀▀▀▀█░▌▐░▌ ▀▀▀▀▀▀█░▌▐░▌ ▐░▌ ▐░▌ ▐░▌▐░▌ ▐░▌▐░▌ ▐░▌▐░▌ ▐░▌ ▐░▌ ▐░▌▐░▌ ▐░▌▐░█▄▄▄▄▄▄▄█░▌▐░█▄▄▄▄▄▄▄█░▌ ▐░▌ ▐░▌▐░▌ ▐░▌▐░░░░░░░░░░░▌▐░░░░░░░░░░░▌ ▀ ▀ ▀ ▀ ▀▀▀▀▀▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀▀▀▀ `);
"오늘의 집" 콘솔의 고양이 볼과 꼬리의 빨간 특수문자와 "쿠팡" 콘솔의 다채로운 색은 어떻게 표현한 것일까? console.log는 엔지니어들이 많이 사용하는 명령어지만, console log에 스타일을 입힐 수 있다는 것은 대부분 잘 모른다. html에 css스타일을 적용하듯 console.log의 두번째 인자로 스타일을 넘겨주면 해당 스타일이 적용된 log를 볼 수 있다. 쿠팡과 같이 log를 찍기 위해서는 문자마다 색상 값을 하나씩 입혀야 하는 수고로움이 필요하지 않을까 싶다.
javascriptconsole.log( "%cMAGOMERCY BLOG", "font-size:30px; background:red; color:black; " );
쉽게 모양 만들기
Template strings 을 이용해서 눈에 보이는 대로 출력할 수 있다고는 하지만 특수문자를 하나씩 사용하여 모양을 만드는 것은 쉬운 일이 아니다. 가이드 디자인을 해야 하고, 디자인에 맞게 보이게 특수문자를 찾아야 한다. 하지만 다행이게도 문자의 모양에 맞춰 특수문자를 배열해주는 웹 페이지(🔗 http://patorjk.com)가 있다.
위와 같이 해당 페이지에서 빨간 부분의 input 값만 바꿔주면 원하는 모양을 얻을 수 있다. 폰트와 사이즈도 직접 조절 할 수 있어 생각보다 디테일한 부분까지 꾸며 볼 수 있다. 다만 아쉬운 것은 한글지원이 안 된다. 현재 마고자비 블로그는 제일 기본적인 스타일링을 적용한 상태이다. 다음에 시간적 여유가 많다면 오늘의 집과 같은 캐릭터 모양으로 다채롭게 만들어 보고 싶다.