โ† ๋„๊ตฌ ๋ชจ์Œ

๐Ÿ”ฃ Base64 ์ธ์ฝ”๋”/๋””์ฝ”๋”

๋ณ€ํ™˜ ๋ฐฉํ–ฅ

์›๋ณธ ํ…์ŠคํŠธ๋Š” 100๋งŒ ์ž, ๋””์ฝ”๋”ฉํ•  Base64 ๋ฌธ์ž์—ด์€ 800๋งŒ ์ž๊นŒ์ง€ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

๐Ÿค” Base64 ์ธ์ฝ”๋”ฉ ๊ด€๋ จ Q&A
Base64 ์ธ์ฝ”๋”ฉ์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€์š”?
Base64๋Š” ์ด๋ฏธ์ง€ ํŒŒ์ผ, ์‹คํ–‰ ํŒŒ์ผ, ์ผ๋ฐ˜ ๋ฌธ์ž์—ด ๊ฐ™์€ 8๋น„ํŠธ ์ด์ง„ ๋ฐ์ดํ„ฐ๋ฅผ ์•ŒํŒŒ๋ฒณ ๋Œ€์†Œ๋ฌธ์ž, ์ˆซ์ž, +, /์˜ 64๊ฐœ ๋ฌธ์ž๋กœ ๋ฐ”๊ฟ” ํ‘œํ˜„ํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. 3๋ฐ”์ดํŠธ๋ฅผ 4๊ธ€์ž๋กœ ๋ฐ”๊พธ๊ธฐ ๋•Œ๋ฌธ์— ๊ฒฐ๊ณผ๋Š” ์›๋ณธ๋ณด๋‹ค ์•ฝ 33% ๊ธธ์–ด์ง€๊ณ , ๊ธธ์ด๋ฅผ 4์˜ ๋ฐฐ์ˆ˜๋กœ ๋งž์ถ”๊ธฐ ์œ„ํ•ด ๋์— = ํŒจ๋”ฉ์ด ๋ถ™์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ…์ŠคํŠธ๋งŒ ํ—ˆ์šฉํ•˜๋Š” ์ด๋ฉ”์ผ ๋ณธ๋ฌธ, JSON, HTML ์†์„ฑ ์•ˆ์— ๋ฐ”์ด๋„ˆ๋ฆฌ ๋ฐ์ดํ„ฐ๋ฅผ ๋„ฃ์„ ๋•Œ ์“ฐ์ด์ง€๋งŒ, ์•”ํ˜ธํ™”๋‚˜ ์ „์†ก ๋ณด์•ˆ์„ ์ œ๊ณตํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค. ํ•œ๊ธ€์ฒ˜๋Ÿผ ASCII ๋ฐ–์˜ ๋ฌธ์ž๋Š” ๋จผ์ € UTF-8 ๋ฐ”์ดํŠธ๋กœ ๋ฐ”๊พผ ๋’ค ์ธ์ฝ”๋”ฉํ•˜๋ฏ€๋กœ ํ•œ ๊ธ€์ž๊ฐ€ 3๋ฐ”์ดํŠธ๋กœ ๊ณ„์‚ฐ๋ฉ๋‹ˆ๋‹ค.
Base64๋Š” ์•”ํ˜ธํ™” ๋ฐฉ์‹์ธ๊ฐ€์š”?
์•„๋‹™๋‹ˆ๋‹ค. Base64๋Š” '์ธ์ฝ”๋”ฉ(Encoding)' ๋ฐฉ์‹์ผ ๋ฟ, ๋ณด์•ˆ์„ ์œ„ํ•œ '์•”ํ˜ธํ™”(Encryption)'๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ๋ˆ„๊ตฌ๋‚˜ Base64 ๋ฌธ์ž์—ด์„ ์›๋ณธ ๋ฐ์ดํ„ฐ๋กœ ๋‹ค์‹œ ๋””์ฝ”๋”ฉํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ, ๋น„๋ฐ€๋ฒˆํ˜ธ๋‚˜ ๊ฐœ์ธ์ •๋ณด ๊ฐ™์€ ๋ฏผ๊ฐํ•œ ๋ฐ์ดํ„ฐ๋Š” Base64๋กœ๋งŒ ์ฒ˜๋ฆฌํ•ด์„œ ๋…ธ์ถœํ•˜๋ฉด ์•ˆ์ „ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ฐ˜๋“œ์‹œ ๊ฐ•๋ ฅํ•œ ์•”ํ˜ธํ™” ์•Œ๊ณ ๋ฆฌ์ฆ˜ ์ฒ˜๋ฆฌ๋ฅผ ๋ณ„๋„๋กœ ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
URL-safe Base64์™€ JWT๋Š” ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•˜๋‚˜์š”?
ํ‘œ์ค€ Base64์˜ +์™€ /๋Š” URL์—์„œ ํŠน๋ณ„ํ•œ ์˜๋ฏธ๋ฅผ ๊ฐ€์ง€๋ฏ€๋กœ, URLยทํŒŒ์ผ ์ด๋ฆ„ยทJWT ํ† ํฐ์—์„œ๋Š” ์ด๋ฅผ -์™€ _๋กœ ๋ฐ”๊พธ๊ณ  ๋์˜ =๋ฅผ ์ƒ๋žตํ•œ URL-safe ํ˜•์‹์„ ์”๋‹ˆ๋‹ค. ๋””์ฝ”๋”ฉํ•  ๋•Œ๋Š” ๋‘ ํ˜•์‹์„ ์ž๋™์œผ๋กœ ๊ตฌ๋ถ„ํ•˜๊ณ , ๋น ์ง„ ํŒจ๋”ฉ๊ณผ ์ค„๋ฐ”๊ฟˆยท๊ณต๋ฐฑ, data:image/png;base64, ๊ฐ™์€ ์ ‘๋‘์–ด๋„ ์•Œ์•„์„œ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ์ (.)์œผ๋กœ ๋‚˜๋‰œ ์„ธ ๋ถ€๋ถ„์œผ๋กœ ๋œ JWT๋ฅผ ๋ถ™์—ฌ๋„ฃ์œผ๋ฉด ํ—ค๋”์™€ ํŽ˜์ด๋กœ๋“œ๋ฅผ ๊ฐ๊ฐ JSON์œผ๋กœ ํ’€์–ด ๋ณด์—ฌ ์ค๋‹ˆ๋‹ค. ๋‹ค๋งŒ ์„œ๋ช…์€ ๊ฒ€์ฆํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ํ† ํฐ์ด ์œ„์กฐ๋˜์ง€ ์•Š์•˜๋‹ค๋Š” ๋ณด์žฅ์€ ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
๋””์ฝ”๋”ฉ ๊ฒฐ๊ณผ๊ฐ€ '๋ฐ”์ด๋„ˆ๋ฆฌ ๋ฐ์ดํ„ฐ'๋กœ ๋‚˜์˜ค๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ธ๊ฐ€์š”?
๋””์ฝ”๋”ฉํ•œ ๋ฐ”์ดํŠธ๊ฐ€ ์˜ฌ๋ฐ”๋ฅธ UTF-8 ํ…์ŠคํŠธ๊ฐ€ ์•„๋‹ˆ๋ฉด ์–ต์ง€๋กœ ๊ธ€์ž๋กœ ๋ฐ”๊พธ์ง€ ์•Š๊ณ  ๋ฐ”์ด๋„ˆ๋ฆฌ ๋ฐ์ดํ„ฐ๋กœ ์•ˆ๋‚ดํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฏธ์ง€๋‚˜ PDF๋ฅผ Base64๋กœ ๋งŒ๋“  ๋ฌธ์ž์—ด์ด๋ผ๋ฉด ํŒŒ์ผ ๋จธ๋ฆฌ ๋ถ€๋ถ„์˜ ์‹๋ณ„ ๋ฐ”์ดํŠธ๋กœ PNGยทJPEGยทGIFยทWebPยทPDFยทZIP ๋“ฑ์˜ ํ˜•์‹์„ ํŒ๋ณ„ํ•ด ์•Œ๋งž์€ ํ™•์žฅ์ž๋กœ ์ €์žฅํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค. ํ…์ŠคํŠธ์˜€์–ด์•ผ ํ•˜๋Š”๋ฐ ๋ฐ”์ด๋„ˆ๋ฆฌ๋กœ ๋‚˜์˜จ๋‹ค๋ฉด ๋ณต์‚ฌ ๊ณผ์ •์—์„œ ๋ฌธ์ž์—ด ์ผ๋ถ€๊ฐ€ ์ž˜๋ ธ๊ฑฐ๋‚˜, UTF-8์ด ์•„๋‹Œ EUC-KR ๋“ฑ ๋‹ค๋ฅธ ์ธ์ฝ”๋”ฉ์œผ๋กœ ๋งŒ๋“ค์–ด์ง„ ๋ฌธ์ž์—ด์ผ ๊ฐ€๋Šฅ์„ฑ์ด ํฝ๋‹ˆ๋‹ค.
์ด๋ฏธ์ง€๋ฅผ Base64๋กœ ์–ธ์ œ ์ฃผ๋กœ ๋ณ€ํ™˜ํ•˜๋‚˜์š”?
HTML ๋ฌธ์„œ๋‚˜ ์ด๋ฉ”์ผ ํ…œํ”Œ๋ฆฟ ์•ˆ์— ์ž‘์€ ๋กœ๊ณ  ์ด๋ฏธ์ง€๋‚˜ ์•„์ด์ฝ˜์„ ์ง์ ‘ ๋„ฃ์„ ๋•Œ ์ฃผ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ํŒŒ์ผ ํƒญ์—์„œ ์ด๋ฏธ์ง€๋ฅผ ๊ณ ๋ฅธ ๋’ค ๋ณต์‚ฌ ํ˜•์‹์„ 'HTML <img> ํƒœ๊ทธ'๋‚˜ 'CSS background-image'๋กœ ๋ฐ”๊พธ๋ฉด <img src="data:image/png;base64,..."> ํ˜•ํƒœ๋ฅผ ๋ฐ”๋กœ ๋ถ™์—ฌ๋„ฃ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ณ„๋„์˜ ์ด๋ฏธ์ง€ ์š”์ฒญ์ด ์ค„์–ด๋“œ๋Š” ๋Œ€์‹  ๋ฌธ์„œ ์ž์ฒด๊ฐ€ ์ปค์ง€๊ณ  ๋ธŒ๋ผ์šฐ์ € ์บ์‹œ๋ฅผ ๋”ฐ๋กœ ํ™œ์šฉํ•˜์ง€ ๋ชปํ•˜๋ฏ€๋กœ, ์ˆ˜ ํ‚ฌ๋กœ๋ฐ”์ดํŠธ ์ดํ•˜์˜ ์ž‘์€ ์ด๋ฏธ์ง€์—๋งŒ ๊ถŒ์žฅ๋ฉ๋‹ˆ๋‹ค.
์ง€์› ๋ฒ”์œ„์™€ ์ฃผ์˜ํ•  ํ•œ๊ณ„๋Š” ๋ฌด์—‡์ธ๊ฐ€์š”?
ํ…์ŠคํŠธ ์ž…๋ ฅ์€ ์ตœ๋Œ€ 100๋งŒ ์ž, Base64 ๋””์ฝ”๋”ฉ ์ž…๋ ฅ์€ ์ตœ๋Œ€ 800๋งŒ ์ž, ํŒŒ์ผ์€ ํ˜•์‹๊ณผ ๊ด€๊ณ„์—†์ด ์ตœ๋Œ€ 10MB๊นŒ์ง€ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ๊ฒฐ๊ณผ๊ฐ€ ๋งค์šฐ ๊ธธ๋ฉด ํ™”๋ฉด์—๋Š” ์•ž๋ถ€๋ถ„๋งŒ ๋ฏธ๋ฆฌ ๋ณด์—ฌ ์ฃผ๊ณ , ๋ณต์‚ฌ์™€ ์ €์žฅ ๋ฒ„ํŠผ์€ ์ „์ฒด ๊ฒฐ๊ณผ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. Base64 ๊ฒฐ๊ณผ๋Š” ์›๋ณธ๋ณด๋‹ค ์•ฝ 33% ์ปค์ง€๋ฏ€๋กœ ํฐ ํŒŒ์ผ ์ „์†ก์ด๋‚˜ ์ €์žฅ ์šฉ๋„๋กœ๋Š” ์ ํ•ฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ๋ณ€ํ™˜์€ ๋ธŒ๋ผ์šฐ์ € ์•ˆ์—์„œ ์ฒ˜๋ฆฌ๋˜๋ฉฐ ์ž…๋ ฅํ•œ ํ…์ŠคํŠธ๋‚˜ ํŒŒ์ผ์„ ์„œ๋ฒ„๋กœ ์—…๋กœ๋“œํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.