___ _____ ______________ ___ ____ ______
/ | / ___// ____/ _/ _/ / | / __ \/_ __/
/ /| | \__ \/ / / / / / / /| | / /_/ / / /
/ ___ |___/ / /____/ /_/ / / ___ |/ _, _/ / /
/_/ |_/____/\____/___/___/ /_/ |_/_/ |_| /_/
TL;DR
- 이미지 대신 ASCII art를 쓰면 용량을 아끼고 로딩이 빨라진다
- figlet: 텍스트를 큰 글자로 변환 (18개 폰트)
- ascii-image-converter: 이미지를 ASCII로 변환 (braille, complex 등 다양한 옵션)
- asciiart.eu: 수작업 아트 아카이브
- 기술블로그 대문에 쓰기 딱 좋다
왜 ASCII Art인가
블로그에 이미지를 넣으면 한 장에 수백 KB에서 수 MB까지 나간다. ASCII art는 텍스트 몇 줄이면 끝이다. 로딩 속도, 저장 용량, 렌더링 비용 전부 이긴다. 무엇보다 코드 블록 안에 들어가니까 기술블로그 분위기와 잘 맞는다.
1. figlet - 텍스트를 큰 글자로
설치: sudo apt install figlet
|
|
18가지 폰트를 비교해봤다.
banner
# # ####### # # #######
# # # # # # #
# # # # # # #
####### ##### # # # #
# # # # # # #
# # # # # # #
# # ####### ####### ####### #######
big
_ _ ______ _ _ ____
| | | | ____| | | | / __ \
| |__| | |__ | | | | | | | |
| __ | __| | | | | | | | |
| | | | |____| |____| |___| |__| |
|_| |_|______|______|______\____/
slant
__ __________ __ ____
/ / / / ____/ / / / / __ \
/ /_/ / __/ / / / / / / / /
/ __ / /___/ /___/ /___/ /_/ /
/_/ /_/_____/_____/_____/\____/
small
_ _ ___ _ _ ___
| || | __| | | | / _ \
| __ | _|| |__| |_| (_) |
|_||_|___|____|____\___/
future
╻ ╻┏━╸╻ ╻ ┏━┓
┃━┃┣╸ ┃ ┃ ┃ ┃
╹ ╹┗━╸┗━╸┗━╸┗━┛
digital
+-+-+-+-+-+
|H|E|L|L|O|
+-+-+-+-+-+
bubble
_ _ _ _ _
/ \ / \ / \ / \ / \
( H | E | L | L | O )
\_/ \_/ \_/ \_/ \_/
standard
_ _ _____ _ _ ___
| | | | ____| | | | / _ \
| |_| | _| | | | | | | | |
| _ | |___| |___| |__| |_| |
|_| |_|_____|_____|_____\___/
shadow
_ _| ____| _ \ |
| | | | | |
___ | __| | | |
_| _|_____|___| ___|_____|
smblock
▐▌▛▀▘▌ ▌ ▞▀▖
▐▌▙▄ ▌ ▌ ▌ ▌
▐▌▌ ▌ ▌ ▌ ▌
▐▌▀▀▘▀▀▘▀▀▘▝▀
2. asciiart.eu - 수작업 아트 아카이브
https://www.asciiart.eu 에는 수천 개의 수작업 ASCII art가 있다. 카테고리별로 블로그 대문에 쓸 수 있다.
Computer (by Joan G. Stark)
.----.
.---------. | == |
|.-""""""-.| |----|
|| || | == |
|| || |----|
|'-......-'| |::::|
`"")---(""` |___.|
/:::::::::::\" _ "
/:::=======:::\`\`\
`""""""""""""""` '-'
Sick Computer (by Joan G. Stark)
_______
|.-----.|
||x . x||
||_.-._||
`--)-(--`
__[=== o]___
|:::::::::::|\
`-=========-`()
Docker Whale
## .
## ## ## ==
## ## ## ## ===
/""""""""""""""""\___/ ===
{ / ===-
\______ O __/
\ \ __/
\____\_______/
Linux Tux
.--.
|o_o |
|:_/ |
// \ \
(| | )
/'\_ _/`\
\___)=(___/
Laptop
+--------------+
|.------------.|
|| ||
|| ||
|| ||
|| ||
|+------------+|
+-..--------..-+
.--------------.
/ /============\ \
/ /==============\ \
/____________________\
\____________________/
Network
+---+
| |
+--+ +--+
| |
+-+--+ +--+-+
| | | |
| PC | | PC |
+----+ +----+
\ /
\ /
+------+
|ROUTER|
+------+
|
+------+
| WEB |
+------+
3. ascii-image-converter - 이미지를 ASCII로
설치: https://github.com/TheZoraiz/ascii-image-converter
이미지 하나로 여러 스타일을 뽑을 수 있다. 방패 아이콘(512x512 PNG, 26KB)으로 비교했다.
default
........... ..
....:----------------: ..
....:=#@@@@@@@@@%%%%%%%%%*=. .
...:=#@@%*++++++++-------=+#%%*-...
...-@@#+++++++++++----------=*@@- .
...-@@++++++++++++-----------=%%- .
...-@@++++++++++++----+%#=---=%%- .
...-@@++++++++++++--+#@#+=---=%%- .
...-@@+++++#%*+++++#@%+------=%%- .
...-@@+++++#@@%**%@%+--------=%%- .
...:%@#++++++#@@@@+----------*@#...
...=@@*+++++++*#+----------+%%- ..
...=@@#+++++++++---------*@%- ..
...-#@%*+++++++-------=#@*: ..
....=%@%*+++++-----+#@#=. .
...:=%@@#+++--=*%@#=. ..
....-*@@@#*#%%*-. ..
....:=*%%+-. .
...... .
...
negative
@@@@@@@@@%%%%%%%%%%%@@@@@@@@%%@@@@@@@@@@
@@@@@@@%%%%#****************#@@%%@@@@@@@
@@@@%%%%#+: .........-+%@@%@@@@@
@@%%%#+: .-========*******+=:..-*%%%@@@
@@%%%* :===========**********+- *@%@@@
@@%%%* ============***********+..*@%@@@
@@%%%* ============****=.:+***+..*@%@@@
@@%%%* ============**=: :=+***+..*@%@@@
@@%%%* =====:.-=====: .=******+..*@%@@@
@@%%%* =====: .--. .=********+..*@%@@@
@@%%%#. :======: =**********- :%%%@@@
@@@%%%+ -=======-:=**********=..*@%%@@@
@@@@%%%+ :=========*********- .*@%%@@@@
@@@@@%%%*: .-=======*******+: -#@%%@@@@@
@@@@@@%%%%+. .-=====*****=: :+%@%@@@@@@@
@@@@@@@@%%%#+. :===**+-. :+%@%%@@@@@@@@
@@@@@@@@@@%%%%*- :-:..-*%@%%@@@@@@@@@@
@@@@@@@@@@@@%%%%#+-..=*%@@%@@@@@@@@@@@@@
@@@@@@@@@@@@@@@%%%%%%@@%@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@%%%@@@@@@@@@@@@@@@@@@@
braille
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣠⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠈⠙⠿⣿⣿⣦⣄⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⣿⣿⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⣠⣾⣷⡄⠀⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⣠⣾⣿⡿⠋⠀⠀⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣠⣾⣿⡿⠋⠀⠀⠀⠀⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠋⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⣿⡿⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠘⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⣿⣿⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠘⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⣴⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠈⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⣠⣾⣿⡿⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⣠⣾⣿⡿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⣿⣿⣿⣿⣿⠀⠀⢀⣴⣾⣿⡿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠻⣿⣿⣿⣿⣤⣾⣿⣿⠟⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠻⢿⡿⠟⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
braille + dither
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣄⣾⣯⡿⣿⣻⢿⣻⢿⣻⢿⣺⡺⣺⡺⣺⢺⡺⣮⡻⡦⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢀⣠⡶⣿⣻⢗⢏⢎⢲⠸⡘⡌⡎⡪⡪⠀⠄⢂⠠⠐⡀⠄⠄⠙⠽⣺⢽⣢⢄⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢐⣯⣿⡫⡱⡑⡅⡇⡕⢕⢕⢱⢑⢕⢜⠀⠅⠄⠂⢂⠐⠠⢁⠁⡂⠌⢙⢾⢽⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢐⣿⣽⢪⢸⢘⢌⢎⢜⠜⡌⡎⡪⡢⡣⢈⠐⡈⢐⠠⢈⠐⡀⢂⠐⠐⢐⡽⣽⠀⠀⢀⠀⠀⠀
⠀⠀⠀⠀⠁⠠⣿⣯⢣⢱⢑⢅⢇⢕⠕⡕⢜⢌⢆⢇⠂⡐⢀⠂⣰⡺⣦⢂⠐⡈⠨⢀⣟⢾⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠨⣿⣾⢱⢑⢕⢅⢇⢕⢕⢱⢑⢅⢇⢎⠄⢂⢰⢮⣗⡟⠊⡀⠂⠄⠡⠠⣯⣻⠀⠀⠄⠀⠀⠀
⠀⠀⠀⠀⠐⢈⣿⣾⢱⢑⢕⠜⡔⣵⣮⡪⡊⡎⢆⢇⢰⢼⣝⡗⠃⠄⠡⠀⠅⠨⠐⠐⡷⣽⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠐⣿⣾⡱⡑⡅⡇⣍⢻⢽⣿⣳⣜⢜⣼⢽⡳⠃⠄⠡⠈⠄⠡⠈⠄⠡⢈⣟⢾⠀⠀⢀⠀⠀⠀
⠀⠀⠀⠀⠁⠀⢿⣻⣎⢎⢪⢸⠰⡑⡕⡝⣯⣿⣟⡿⠩⠐⠈⠄⠡⠈⠄⠡⠁⠌⡈⣰⢽⡝⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢀⠀⠘⣿⣽⣎⢪⢢⠣⡣⢣⠪⡢⡫⢏⢎⠂⡁⠡⠈⠄⠡⠁⠌⠠⢁⢰⣝⡷⠁⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠘⢿⣾⢮⢢⢣⠣⡣⢣⠣⡪⢪⢒⢀⠂⠡⠈⠄⠡⠈⠄⡁⣢⣟⡮⠃⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠄⠀⠈⢻⡿⣷⣅⢇⢣⠣⡃⡇⡣⡣⠐⡈⠄⠡⠈⠄⠡⢡⢮⣳⠗⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡀⠀⠙⢯⣿⢾⣌⢎⢎⢪⢪⠸⢀⠐⡈⠄⡁⢅⡮⡯⡗⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣻⡷⣎⡎⢆⢫⠀⢂⢐⡰⡮⣯⠯⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⠀⠀⠀⠈⠻⢿⣻⣷⣕⡬⣲⢽⡽⠝⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⠀⠀⠀⠀⠉⠳⢿⠽⠚⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
complex
`:i!llllllll,,,,,,,,::".
.,lill-|((||||(}[[[[[[[<,,::^.
."Iill_rpBB8%888%8aaaaaaa*#O\i,,:,`.
Iii<tZ8$#Ocvvvvvvu|||||||/zpMoJ)l;;,
I>l($$wznnuuuuuuun(((((((())/JW&[,;,
I>l(@8cuvvuuuuuuvu|(|()()(||)/a#[,I,
I>l($%Yuvuuvvvuuvu|()(ckw/(((joM[,I,
I>l($%Xuvuunuuvvvu()vb&bz\(()foM[,I,
I>l($%XuvucdhUuuunvd&kc()((()foM[,I,
I>l($%Xuvucp%$oJC*&kc()(|((((foM[,;,
:>i~#$mnvuuncZ&$$&X()(|((((|1UWd!:;^
.i>l\@@QnuvvunuOmu((|((((|(1v#M{,I:
`i>l/%$wuuvvvuuuu|(((((()(J&o1,I;'
`!>l[d$MCnuuvvvu|((|())xb%O+,I:'
.I>!!rM$#Lnnuvu|()1)np8b\:,I,.
^!>l<xo$8qXnn)1fJhWq/I";:`
"!ili(0&$WwJbMaU[:"::`
^Ii!l~/0#kY1l",:,'
."I!ll>I",:,^.
."Il:,`.
custom map: ░▒▓█
░░░░░░░░░░░░░░░░░░
░▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
░▒▒▒░░░░░░░▒▒░
░▒▒░░░░░░░░░░▒▒░
░▒▒░░░░░░░░░░░▒▒░
░▒▒░░░░▒░░░▒▒░
░▒▒░░▒░░░▒▒░
░▒▒▒▒▒░░░░░░▒▒░
░▒▒▒▒▒▒▒▒░░░░░░░░▒▒░
░▒▒▒▒▒▒░░░░░░░░░░▒
▒▒░░░░░░░░░░▒▒░
▒▒░░░░░░░░░▒▒░
░▒▒░░░░░░░▒░
▒▒▒░░░░░▒
░▒▒▒░░▒▒
░▒▒▒▒▒░
░▒▒░
Wrap Up
이미지 한 장이 수백 KB를 먹을 때, ASCII art는 수백 바이트면 충분하다. CDN도 필요 없고, 느린 네트워크에서도 즉시 렌더링된다. 무엇보다 코드와 텍스트로 이루어진 기술블로그에서 이질감 없이 녹아든다.
물론 한계는 있다. 사진이나 스크린샷을 완전히 대체할 수는 없고, 모바일에서 가로 스크롤이 생기기도 한다. 결국 어디에 어떤 형태의 시각 요소를 쓸지는 선택의 문제다.
나는 slant가 좋아 보이는데. 여러분은 어떤게 마음에 드시나요?