ASCII Art: 이미지 없이 블로그 꾸미기

    ___   _____ ______________   ___    ____  ______
   /   | / ___// ____/  _/  _/  /   |  / __ \/_  __/
  / /| | \__ \/ /    / / / /   / /| | / /_/ / / /   
 / ___ |___/ / /____/ /_/ /   / ___ |/ _, _/ / /    
/_/  |_/____/\____/___/___/  /_/  |_/_/ |_| /_/

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

1

figlet -f slant "HELLO"

18가지 폰트를 비교해봤다.

#     # ####### #       #       ####### 
#     # #       #       #       #     # 
#     # #       #       #       #     # 
####### #####   #       #       #     # 
#     # #       #       #       #     # 
#     # #       #       #       #     # 
#     # ####### ####### ####### #######

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가 좋아 보이는데. 여러분은 어떤게 마음에 드시나요?