티스토리 뷰
안녕하세요 오랜만입니다.
다들 잘 지내셨나요?
제가 오늘 소개할 것은 바로 <이스터에그>입니다.
회사에서 풀스택으로 프로젝트를 진행하면서 프론트엔드를 조금씩 익히고 있던 와중 <이스터에그>를 알게 되었는데,
그 센스와 위트에 빠져버렸답니다.
오늘은 오직 개발자들만을 위한 재미있는 <이스터에그>에 대해 알아보고,
티스토리에 이스터에그를 설정하는 방법을 공유해 보겠습니다.
엄청 쉬우니 모두 재밌는 이스터에그를 설정해 보세요!
이스터에그(Easter Egg)
이스터에그는 영화, 게임, 소프트웨어 등에 숨겨진 메시지나 의미라는 뜻으로 쓰입니다.
이름에서 알 수 있듯 그 유래는 부활절인데요, 외국에서는 부활절에 '달걀 사냥(Easter Egg Hunt)'을 합니다.
'달걀 사냥(Easter Egg Hunt)'은 보물 찾기와 비슷한 게임으로 알록달록 예쁘게 꾸민 달걀을 여기저기 숨겨두고 찾아내는 게임입니다.
저도 제가 좋아하는 게임 <스타듀밸리>에서 매년 부활절에 이 '달걀 사냥' 이벤트에 참가해 열심히 달걀을 찾아다녔습니다.
이렇게 누군가 숨겨둔 비밀스러운 메시지 '이스터에그'는 영화, 게임, 소프트웨어 등등 여러 미디어에서 사용됩니다.
그중 오늘 다뤄볼 이스터에그는 오직 개발자들만이 만들 수 있고, 확인할 수 있는 개발자 도구 속 이스터에그입니다!
🔍개발자 도구 속 이스터에그 살펴보기
크롬이나 마이크로소프트 엣지에서 개발자 도구(F12) - 콘솔탭에 접속하면 개발자들이 숨겨둔 기발한 이스터에그를 찾을 수 있습니다.
대표적으로 쿠팡, 뱅크샐러드, 마이리얼트립 등등이 있는데요, 개발자들이 주로 사용하는 도구인만큼 개발자를 타겟으로 이스터에그 메시지와 함께 '개발자 채용 페이지' 링크를 걸어두는 귀여운 센스가 돋보입니다.
제가 가장 맘에 드는 이스터에그는 '오늘의 집' 이스터에그입니다.
로고나 글씨만 출력하는 다른 웹사이트와 다르게 '오늘의 집'은 귀여운 고양이가 등장합니다.
고양이의 등장으로 오늘의 집이라는 브랜드 이미지가 강렬하게 각인되었습니다. 그럼 이렇게 사용자에게 웃음을 주는 센스와 위트가 넘치는 이스터에그를 직접 만들어볼까요?
저는 오늘의 집 이스터에그를 참고해서 저만의 이스터에그를 만들고, 제 티스토리에 적용해 봤습니다.
지금 한 번 개발자 도구를 확인해 보시겠어요?
요즘 가장 사랑받는 '망그러진 곰' 캐릭터를 참고해 귀여운 이스터에그를 직접 제작하고 적용해 봤습니다.
그럼 어떻게 만들고 적용했는지 공유해 보겠습니다.
먼저 이스터에그를 만들어봅시다. 이스터에그 제작에 활용할 수 있는 유용한 사이트를 소개하겠습니다!
1. Text to ASCII Art Generator
위에서 보았던 구글, 마이리얼트립의 경우처럼 콘솔에 두꺼운 글씨로 본인의 브랜드를 출력하고 싶다면 여기 사이트를 활용해 보세요. 원하는 글자를 입력만 하면 여러 종류의 아스키 아트를 만들어줍니다.
https://patorjk.com/software/taag/#p=testall&f=Graffiti&t=WELCOME
사이트 접속 후 'WELCOME'이 적힌 텍스트 박스에 원하는 글자 입력 후 'Test all'하면 여러 종류의 아스키 아트가 출력됩니다. 그럼 원하는 아트를 고르고 복사하면 됩니다.
2. SNS.Keyboard
브랜드 로고에 귀여운 캐릭터나 이모지 아트를 추가하고 싶다면 여기를 참고하세요.
다양한 이모지아트 중 원하는 것을 골라서 다듬기만 하면 나만의 이스터에그를 만들 수 있습니다.
(카테고리 중 '도트아트'가 있는데 이것은 비추입니다. 맥북 환경에서는 다 깨지더라고요)
https://snskeyboard.com/emojiart/
🎨티스토리에 적용하기
'블로그 관리 - 꾸미기 - 스킨 편집 - html 편집'으로 들어가 주세요.
그럼 사용자가 자유롭게 커스텀할 수 있는 티스토리 HTML 편집기에 접속할 수 있습니다.
여기서 맨 아래에 바디 닫는 태그 </body> 위에 아래 스크립트를 복사해서 붙여 넣어주세요.
... (생략)...
<!-- 이스터에그 출력 구현부 -->
<script>
document.addEventListener('DOMContentLoaded', () => {
console.log(`%c
██╗ ██╗███████╗██╗ ██████╗ ██████╗ ███╗ ███╗███████╗
██║ ██║██╔════╝██║ ██╔════╝██╔═══██╗████╗ ████║██╔════╝
██║ █╗ ██║█████╗ ██║ ██║ ██║ ██║██╔████╔██║█████╗
██║███╗██║██╔══╝ ██║ ██║ ██║ ██║██║╚██╔╝██║██╔══╝
╚███╔███╔╝███████╗███████╗╚██████╗╚██████╔╝██║ ╚═╝ ██║███████╗
╚══╝╚══╝ ╚══════╝╚══════╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝╚══════╝
`,
'font-size: 12px; font-weight: bold; color: transparent; background: linear-gradient(to right, #0000ff, #00c6ff); -webkit-background-clip: text;');
});
</script>
</body>
</html>
콘솔 출력부에 원하는 이스터에그와 디자인 요소를 추가하면 티스토리에 이스터에그를 적용할 수 있습니다.
그럼 이번에는 귀여운 캐릭터와 이모지를 추가한 이스터에그를 만들어보겠습니다.
아래는 제가 도트아트를 사용해 만들어본 첫 이스터에그입니다.
<script>
document.addEventListener('DOMContentLoaded', () => {
console.log(`%c
⠘⡀ ⡜⠀
⠘⡀⠀⠀⠀⠀⠀ 안녕, 만나서 반가워요 ⠀⠀⠀ ⡜⠀⠀⠀
⠀⠀⠀⠑⡀ ⠀⠀당신에게 <버그 쉽게 고치기> 행운을 드릴게요🍀 ⠀ ⡔⠁⠀⠀⠀
⠀⠀⠀⠀⠈⠢⢄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⣀⣀ ⣀ ⣀⣀ ⣀⣀⣀⣀⠴⠊⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⢀⣀⣀⣀⣀⣀⣀⡀⠤⠄⠤⠄⠤⠄⠒⠒⠒⠒⠈⠈⠈⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠘⣀⠄⠊⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣀⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⠀⢀⣀⠀⠀⠀
⠀⠀⠀⢺⣿⣿⣿⣦⣀⣠⣤⣶⣶⣶⣶⣦⣤⣀⣀⣶⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀ ⠀ . ⢰⠋⠓⠇⠛⠆⠀⠀⠀˚
⠀⠀⠀⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣟⠃⠘⢿⣿⣿⣿⣿⣿⣧⡀⠀ ⠀⠀⠀ ⢧⠀ ⠀ ⡯⠏⣇⡀⠀ .
⠀⠀⠀⠙⢛⡟⠉⠉⣰⣿⣿⠋⠉⠹⣧⠀⠀⣸⠛⠛⣿⡿⠿⠃⠀ ⠀⠀ ₊⠀⠀ ⢹⡉⠉⠋⡑⡿⠁⠀ ⢀⠇⠀
⢀⣤⠤⠤⣴⡇⠀⢠⣿⡟⢉⡷⢠⣾⡿⠀⠀⣿⣦⢰⣹⣷⠀⠀⠀ ⢠⠃ ⡠⡴⠋⠉⠫⡍⠁⠁⠀⠀
⡞⠀⠀⣠⠬⢷⢠⡟⢁⠙⠻⠧⠾⡛⠁⠀⠀⠩⡙⡋⢡⠇⠀⠀⠀ ⠀⠀⠀⠀⠀ ⠀ ⠈⣩⠟⡇ ⢠ ⢹ ˚
⠛⠖⠋⠁⠀⠈⡿⣄⠀⠐⠐⠈⠁⠀⠘⠔⠋⠀⢈⡴⠋⠀ ⠀ ⢀⢄⠏⠁⠀⠉⠉⠉⠀⠀✶⠀⠀
⠀⠀⠀⠀⠀⣀⣁⣽⡒⠤⣄⣀⣀⣀⣀⣀⣤⠴⢮⡁⠀⠀⠀⠀⠀ ✿∘˚₊˚✶༄₊˚ ⠈⠉⠀
⠀⠀⠀⣰⡋⠁⠈⣿⣿⣿⡶⠃⠀⠀⠀⠀⡞⠀⢀⡇⠀⠀✶༄ ‧₊˚⠀
⠀⠀⠠⣿⠋⣢⣴⡇⢈⠟⠀⠀⠀⠀⠀⠀⠣⠤⠞⠀⠀⠀
⠀⠀⢀⣹⠿⠛⠁⡹⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⣴⣿⠀⠀⢠⡞⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⣼⣿⣃⣱⡶⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠙⠻⠛⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
`,
'font-size: 12px; font-weight: bold; font-family: monospace; line-height: 1.2; color: black;');
console.log('%c🌱GITHUB: https://github.com/JangYouJung',
'color: #000000; font-size: 14px;');
});
</script>
파워퍼프걸 도트아트는 위에서 소개드린 'SNS.keyboard'에서 가져왔고, 네잎클로버는 직접 만들었습니다.
열심히 만들고 적용했지만 문제가 있었습니다. 윈도우 크롬에서는 잘 출력되는 이스터에그가 맥북 크롬에서 모두 깨져 보였습니다.
그래서 결국 단순한 기본 특수문자만을 활용해 새로운 이스터에그를 만들게 되었습니다.
<script>
document.addEventListener('DOMContentLoaded', () => {
console.log(`%c
______________________________________________
⎢ ⎥
⎢ 안녕, 만나서 반가워요 ⎥
⎢ 당신에게 <버그 쉽게 고치기> 행운을 드릴게요 ⎥
⎢____ ____________________________________⎥
\\/
/ ̄\__/ ̄\\
.' '.
/ - - \\
( %c@%c • ᴥ • %c@%c ) 🍀
\\ / ✿∘˚₊˚✶༄₊˚
C づ ✶༄ ‧₊˚
| |
\../ ̄ ̄\\../
🌱GITHUB: https://github.com/JangYouJung
`,
'font-size: 12px; font-weight: bold; font-family: monospace; line-height: 1.2; color: black;',
'color: pink;',
'color: black;',
'color: pink;',
'color: black;');
});
</script>
그럼 모두들 귀여운 이스터에그 만들어 적용해 보시고 댓글 남겨주세요! 구경 가겠습니다:)
궁금한 점은 댓글 남겨주세요.
감사합니다.
모두 새해 복 많이 받으세요!