์ด ๋ฌธ์„œ์˜ ์›๋ณธ์€ ์™ธ๋ถ€ ์œ„ํ‚ค์—์„œ ๊ฐ€์ ธ์™”์Šต๋‹ˆ๋‹ค.



1. ๊ฐœ์š”2. ์ƒ์„ธ

1. ๊ฐœ์š”[ํŽธ์ง‘]


์ฒด์ฝ”์˜ ํ”„๋กœ๊ทธ๋ž˜๋จธ Ivan Kutskir(ํŠธ์œ„ํ„ฐ)๊ฐ€ ์ œ์ž‘ํ•˜์—ฌ 2013๋…„๋ถ€ํ„ฐ ๊ณต๊ฐœ์ค‘์ธ HTML5๊ณผ JavaScript ๊ธฐ๋ฐ˜์˜ ์›น ๊ทธ๋ž˜ํ”ฝ ์—๋””ํ„ฐ. Pixlr์˜ ์˜ํ–ฅ์„ ๋ฐ›์•„ ๋งŒ๋“ค์–ด์ง„ ์†Œํ”„ํŠธ์›จ์–ด์ง€๋งŒ Pixlr๊ฐ€ ์–ด๋„๋น„ ํ”Œ๋ž˜์‹œ ๊ธฐ๋ฐ˜์ด๋ผ ํ”Œ๋ž˜์‹œ๊ฐ€ ๋ฐฐ์ฒ™๋ฐ›๋Š” ํ˜„๋Œ€ ์›น ํ™˜๊ฒฝ์˜ ๊ฒฝํ–ฅ ๋•Œ๋ฌธ์— ์ ์  ์‚ฌ์šฉ์ด ์–ด๋ ค์›Œ์ง€๊ณ  ์žˆ๊ณ , HTML5 ์ง€์› ๋ฒ„์ „์€ ์œ ๋ฃŒ์ธ Pro์™€ ๊ธฐ๋Šฅ์ œํ•œ ๋ฒ„์ „์ธ X๋งŒ ์ง€์›ํ•˜๋ฉด์„œ Pixlr์˜ ๋Œ€์•ˆ์œผ๋กœ ์•Œ๋ ค์ง€๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค.

2. ์ƒ์„ธ[ํŽธ์ง‘]

Pixlr์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์–ด๋„๋น„ ํฌํ† ์ƒต์˜ UI๋ฅผ ์ฒ ์ €ํ•˜๊ฒŒ ๋ฒค์น˜๋งˆํ‚นํ–ˆ๋‹ค. ์—ญ์‹œ ํฌํ† ์ƒต์— ์ต์ˆ™ํ•œ ์‚ฌ์šฉ์ž๋ผ๋ฉด ์„ ํ–‰ํ•™์Šต ์—†์ด ๋ฐ”๋กœ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•  ์ •๋„๋กœ ์œ ์‚ฌํ•˜๋ฉฐ, ํฌํ† ์ƒต์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋ณธ์ ์ธ ๊ธฐ๋Šฅ์€ ์›ฌ๋งŒํ•˜๋ฉด ๊ฑฐ์˜ ์ง€์›๋œ๋‹ค. ๊ธฐ๋Šฅ ๋ฉด์—์„œ๋Š” Pixlr ์ด์ƒ์ด๋ผ์„œ ํŽœํˆด์ด๋‚˜ ํž๋ง ๋ธŒ๋Ÿฌ์‹œ ๊ฐ™์€ ๊ณ ๊ธ‰ ๊ธฐ๋Šฅ๋„ ์ œ๊ณตํ•˜๋ฉฐ ๋ฆฌํ€ดํŒŒ์ด ํ•„ํ„ฐ ๊ฐ™์€ ๊ฒƒ๋„ ์ œ๊ณตํ•ด์„œ ์ •๋ง ์ „๋ฌธ์ ์ธ ๋ชฉ์ ์ด ์•„๋‹Œ ์ด์ƒ์€ ํฌํ† ์ƒต์„ ์‚ฌ์ง€ ์•Š์•„๋„ ๋  ์ •๋„๋กœ ์ถฉ์‹คํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•œ๋‹ค. ์‚ฌ์šฉ๊ฐ๋„ ๋งค๋„๋Ÿฌ์šฐ๋ฉฐ ์‹ฌ์ง€์–ด ๋†€๋ž๊ฒŒ๋„ ๋””์ง€ํƒ€์ด์ €์˜ ์••๋ ฅ๊ฐ์ง€๊นŒ์ง€ ์ง€์›ํ•ด์ค˜์„œ ์›น ๋ธŒ๋ผ์šฐ์ €๋งŒ์œผ๋กœ ์ด๋Ÿฐ ๊ฒŒ ๋˜๋‚˜ ์‹ถ์„ ์ •๋„์˜ ์›น ์•ฑ์ด๋‹ค. ๊ธฐ์กด์— Pixlr๋ฅผ ์จ์˜ค๋˜ ์‚ฌ์šฉ์ž๋ผ๋„ ์ƒ๋‹นํžˆ ๋†€๋ž„๋งŒ ํ•œ ๊ธฐ๋Šฅ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ๋‹จ, ์••๋ ฅ๊ฐ์ง€๋Š” Windows Ink ๊ธฐ๋Šฅ์ด ์ผœ์ ธ์žˆ์–ด์•ผ๋งŒ ๊ฐ€๋Šฅํ•˜๋ฏ€๋กœ ์••๋ ฅ๊ฐ์ง€๊ฐ€ ์•ˆ๋œ๋‹ค๋ฉด ํƒœ๋ธ”๋ฆฟ์˜ ์„ค์ •์„ ์ž˜ ํ™•์ธํ•ด๋ณด์ž.

์‹ฌ์ง€์–ด ์ผ๋ฐ˜ ๋ชจ๋ฐ”์ผ๋กœ๋„ ํŽธ์ง‘ํ•  ์ˆ˜ ์žˆ๋‹ค.[1]

์ง€์›ํ•˜๋Š” ํฌ๋งท๋„ ๊ฝค ํญ๋„“์€๋ฐ, PSD, XD[2], sketch[3], XCF, CDR ๋“ฑ ๋‹ค์–‘ํ•œ ํฌ๋งท์„ ์ฝ์–ด๋“ค์ผ ์ˆ˜ ์žˆ๊ณ , ํŽธ์ง‘ํ•œ ์ด๋ฏธ์ง€์˜ ์ €์žฅ์€ PSD๋กœ ๊ฐ€๋Šฅํ•˜๋‹ค. ๋‚ด๋ณด๋‚ด๊ธฐ๋„ JPEG, PNG, TIFF๋Š” ๊ธฐ๋ณธ์ด๊ณ  PDF๋‚˜ SVG, WEBP ๊ฐ™์€ ํฌ๋งท์œผ๋กœ๋„ ๋‚ด๋ณด๋‚ผ ์ˆ˜ ์žˆ์–ด ์ด๋ฏธ์ง€ ํŽธ์ง‘์— ํ•„์š”ํ•œ ์›ฌ๋งŒํ•œ ํฌ๋งท์€ ๊ฑฐ์˜ ๋‹ค ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๋‹ค๊ณ  ๋ด๋„ ๊ณผ์–ธ์ด ์•„๋‹ ์ •๋„๋‹ค. ๊ทธ ๋•์— Pixlr๋ฅผ ์“ฐ๋‹ค๊ฐ€ Photopea๋กœ ์˜ฎ๊ฒจํƒ€๋Š” ์‚ฌ๋žŒ๋“ค์ด ๊ฝค ๋งŽ๋‹ค๊ณ  ํ•œ๋‹ค.

์œ ๋ฃŒํ”Œ๋žœ๋„ ์žˆ๋Š”๋ฐ ์›” 9๋‹ฌ๋Ÿฌ, ์—ฐ 40๋‹ฌ๋Ÿฌ๋กœ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ๋ฌธ์ œ๋Š” ์ด ์œ ๋ฃŒ ๊ฒฐ์ œ๋ฅผ ํ•œ๋‹ค๊ณ  ํ•ด์„œ ๋ฐ”๋€Œ๋Š” ๊ฑด ๋”ธ๋ž‘ ์šฐ์ธก์˜ ๊ด‘๊ณ  ์ œ๊ฑฐ๋กœ ํ™”๋ฉด์„ ์ข€ ๋” ๋„“๊ฒŒ ์“ธ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ๊ณผ ํžˆ์Šคํ† ๋ฆฌ๊ฐ€ 30๋‹จ๊ณ„์—์„œ 60๋‹จ๊ณ„๋กœ ๋Š˜์–ด๋‚œ๋‹ค๋Š” ๊ฒƒ ๋ฟ์ด๋ผ๋Š” ๊ฒƒ. ๋ฌด๋ฃŒ๋กœ๋„ ๊ธฐ๋Šฅ์€ ๋ชจ๋‘ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด ์‚ฌ์‹ค์ƒ ์œ ๋ฃŒ ์‚ฌ์šฉ์„ ํ†ตํ•ด ๋ญ˜ ํ•œ๋‹ค๊ธฐ๋ณด๋‹จ ๋„๋„ค์ด์…˜์— ๊ฐ€๊น๋‹ค. ์‹ฌ์ง€์–ด ํ˜œ์ž์ž–์•„!

[1] ๋ฌผ๋ก  PC๋‚˜ ํƒœ๋ธ”๋ฆฟ๋งŒํผ์˜ ์กฐ์ž‘๊ฐ์ด ์ข‹์ง€๋Š” ์•Š๋‹ค.
[2] ์–ด๋„๋น„์˜ UI/UX ํ”„๋กœํ† ํƒ€์ดํ•‘ ํˆด์ธ XD์˜ ์ „์šฉํฌ๋งท์ด๋‹ค.
[3] macOS์šฉ ๋ฒกํ„ฐ ์ด๋ฏธ์ง€ ํˆด์ธ Sketch์˜ ์ „์šฉ ํฌ๋งท์ด๋‹ค.