๊ฐœ๋ฐœ ์ผ์ง€๋ผ์„œ ํŽธํ•˜๊ฒŒ ์“ฐ๊ฒ ์Œ. ๊ฐœ๋ฐœ ์ผ์ง€๋ผ๊ณ  ๋ณ„ ๊ฑด ์•„๋‹ˆ๊ณ , ์˜ค๋Š˜ ์ž์ž˜ํ•œ ๋ฌธ์ œ๋กœ ์˜ค๋žซ๋™์•ˆ ์‚ฝ์งˆ ํ•˜๋‹ค๋ณด๋‹ˆ๊นŒ

๋น„์Šทํ•˜๊ฒŒ ๋ฌธ์ œ ์ƒ๊ธฐ๋Š” ์‚ฌ๋žŒ ์žˆ์œผ๋ฉด ๋„์›€๋ ๊นŒ ์‹ถ์–ด์„œ ์˜ฌ๋ ค๋ด„.


<์„œ๋ก >- ํ˜„์žฌ ์ƒํ™ฉ

2D๋กœ ์ˆœ์ˆ˜ํ•˜๊ฒŒ ํ™”๋ คํ•œ ์•ก์…˜์—๋งŒ ์น˜์ค‘ํ•˜๋Š” ์•ก์…˜๊ฒŒ์ž„ ๋งŒ๋“ค์–ด๋ณด๊ณ  ์‹ถ์–ด์„œ ํ”ฝ์…€ ์•„ํŠธ ์—ฐ์Šตํ•˜๊ณ  ์žˆ์Œ.

๋ฐฐ๊ฒฝ์€ ๊ทธ๋Ÿญ์ €๋Ÿญ ๊ณ ํ€„์€ ์•„๋‹ˆ๋”๋ผ๋„ ๋‚˜์˜์ง€๋Š” ์•Š์€ ๋А๋‚Œ์œผ๋กœ ์ฐํžˆ๋Š”๋ฐ ์บ๋ฆญํ„ฐ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ํฐ ๋ฌธ์ œ์ž„.

๊ทผ๋ฐ ๋˜ ๊ฒŒ์ž„์— ์บ๋ฆญํ„ฐ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ๊ต‰์žฅํžˆ ๋งŽ์ด ๋“ค์–ด๊ฐ€์•ผํ•ด์„œ ์ข€ ๋ง‰๋ง‰ํ•œ ์ƒํ™ฉ์ž„.


ํ•™๊ต ๋‹ค๋‹ˆ๋ฉด์„œ ์ด๋Ÿฐ์ €๋Ÿฐ ํ•‘๊ณ„๋กœ ๊ฒŒ์ž„ ์ถœ์‹œ๋Š”ย ๋ชป ํ•˜๊ณ  ๋งจ๋‚  ๊นจ์ž‘๋Œ€๋Š” ๋А๋‚Œ์ด๋ผ์„œย ๋ฐฐ๊ฒฝ ์ฐ์€ ๊ฑธ๋กœ ์ผ๋‹จ์€ ๊ฒŒ์ž„ ํ•˜๋‚˜๋ฅผ ์ข€ ๋‚ด๋ ค๊ณ  ํ•จ.

๊ทธ๋ž˜์„œ ์ง€๊ธˆ์€ ๊ทธ๋ฆผ ์—ฐ์Šตํ•˜๋ฉด์„œ ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋Š” ์ค‘์ž„. ๊ฒŒ์ž„์— ํ•„์š”ํ•œ ์ฝ”๋”ฉ์€ ๋‹ค ํ–ˆ๊ณ  ์ด์ œ ๊ทธ๋ฆผ ์ถ”๊ฐ€, ๊ทธ๋ฆผ์„ ๊ฒŒ์ž„์— ์˜ฎ๊ธฐ๋Š” ์ž‘์—…,

์ถœ์‹œ์— ํ•„์š”ํ•œ ๋งˆ๋ฌด๋ฆฌ ์ฝ”๋”ฉ ์ •๋„ ๋‚จ์€ ์ƒํ™ฉ์ž„.


<๋ณธ๋ก >- ์˜ค๋Š˜ ์‚ฝ์งˆํ•œ ๋‚ด์šฉ

์‚ฝ์งˆํ•œ ๊ฑฐ ๊ณต์œ ํ•ด๋ณด์ž๊ณ  ํ•˜๋Š”๋ฐ ์†”์งํžˆ ๋Œ€๋‹จํ•œ ๋‚ด์šฉ ์•„๋‹˜.


1. ์ด๋ฏธ์ง€ ๋ฒ„ํŠผ์„ ์“ฐ๋Š”๋ฐ ์ด์ƒํ•˜๊ฒŒ ๋ช‡๋ช‡ ์ด๋ฏธ์ง€๋งŒ ์˜†์œผ๋กœ ํผ์ง€๊ฑฐ๋‚˜ ์œ„๋กœ ๊ธธ์ญ‰ํ•˜๊ฒŒ ๋‚˜์™”์Œ. ๊ทธ๋ž˜์„œ ์ผ๋ถ€ ์ •์ƒ์ ์œผ๋กœ ๋‚˜์˜ค๋Š” ์ด๋ฏธ์ง€๋“คํ•˜๊ณ  ๋น„๊ตํ•ด๋ณด๋‹ˆ๊นŒ

๋น„์œจ์ด ์ด์ƒํ•ด์ง„ ์ด๋ฏธ์ง€๋“ค์€ ๊ฐ€๋กœ๋ž‘ย ์„ธ๋กœ๊ฐ€ ๊ฐ™์ง€ ์•Š์•˜์Œ. ์ด๊ฒŒ Rect Transform ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋‹ฌ๋ ค์žˆ๋Š” ์• ๋“ค์€ ๊ธฐ๋ณธ์ ์œผ๋กœ Width Height์— ๋งž๊ฒŒ ๋งž์ถฐ์ฃผ๋‹ค๋ณด๋‹ˆ

์ด๋Ÿฐ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ๊ฑฐ ๊ฐ™์•˜์Œ. ๊ทธ๋ž˜์„œ Scale์„ ๊ฐ€๋กœ, ์„ธ๋กœ์˜ ๋น„์™€ ๊ฐ™๊ฒŒ ์„ค์ •ํ•ด์ค˜์„œ ํ•ด๊ฒฐํ•จ.


2. Unity์—์„œ ์ œ๊ณตํ•˜๋Š” Sprite Editor๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ border๋ฅผ ์ง€์ •ํ•ด์ฃผ๋ฉด UI ๊ฐ™์€ ๊ฑฐ ๋Š˜๋ฆด ๋•Œ ํ…Œ๋‘๋ฆฌ๋Š” ๋ƒ…๋‘๊ณ  ์ค‘์•™ ๋ถ€๋ถ„๋งŒ ๋Š˜์–ด๋‚˜๋„๋ก ํ•ด์ค„ ์ˆ˜ ์žˆ์Œ.

์ด ๊ธฐ๋Šฅ์„ ์—ฌํƒœ ์จ๋ณธ์ ์ด ์—†์–ด์„œ ๋Œ€์ถฉ ์•Œ๊ณ  ์žˆ์—ˆ์Œ. ์—ฌํƒœ๊นŒ์ง€๋Š” ํ•ด๋‹น ๊ธฐ๋Šฅ ํ•„์š”ํ•  ๋•Œ ๊ทธ๋ƒฅ ๋‹ค๋ฅธ ๋ฐฉ์‹์œผ๋กœ ํ–ˆ์—ˆ๋Š”๋ฐ ๊ณต๋ถ€ํ•  ๊ฒธ ์‹œ๋„ํ•ด๋ณด๋ ค ํ•œ ๊ฑฐ์ž„.

๊ทธ๋Ÿฐ๋ฐ ๋„ˆ๋ฌด ๋Œ€์ถฉ ์•Œ๊ณ  ์žˆ์—ˆ์–ด์„œ ์ ์šฉํ•˜๋Š”๋ฐ ๋งŽ์ด ์• ๋ฅผ ๋จน์—ˆ๊ณ  ๊ฒฐ๊ตญ์—๋Š” ๋‚ด ๊ฒฝ์šฐ์—๋Š” ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค๋Š” ๊ฒƒ๋„ ์•Œ๊ฒŒ ๋์Œ.

https://docs.unity3d.com/Manual/9SliceSprites.html

9-slicing ๋ถ€๋ถ„ ์ฝ์œผ๋ฉด ๋  ๊ฑฐ์ž„. ์ด ๊ฑธ ๋‚ด๊ฐ€ ์‚ฌ์šฉ ๋ชป ํ•˜๋Š” ์ด์œ ๋Š” UI ๋ฐ”์— ์“ธ ๊ฑด๋ฐ Image ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” Image Type์„ slice๋กœ ๋ฐ”๊ฟ”์ค˜๋„ ํฌ๊ธฐ ์กฐ์ ˆํ•˜๋Š”๊ฒŒ

์•ˆ ๋ณด์ž„. ๊ทธ๋ ‡๋‹ค๊ณ  ์šฐํšŒํ•ด์„œ ์“ฐ์ž๋‹ˆ ๋” ๋ณต์žกํ•ด ๋ณด์—ฌ์„œ ํฌ๊ธฐ.


3. Aseprite๋กœ ๊ทธ๋ฆผ ์ž‘์—…ํ•ด์„œ Unity์—์„œ ์“ฐ๊ณ  ์žˆ๋Š”๋ฐ ์•„๋ž˜ ๋ณด์ด๋Š” ๊ฑฐ ์ฒ˜๋Ÿผ ์Šคํ”„๋ผ์ดํŠธ๋ฅผ ๋ณ€๊ฒฝํ•ด์„œ ์ €์žฅํ•ด์คฌ๋Š”๋ฐ ์ด์ƒํ•˜๊ฒŒ ์ƒ‰์ด ๋ณ€ํ•ด ์žˆ์—ˆ์Œ.

๊ทธ๋ž˜์„œ ํ™•์ธ ํ•ด๋ณด๋‹ˆ๊นŒ ์•„๋ž˜์— ํ”ฝ์…€์ˆ˜๋ž‘ ์••์ถ•์— ๊ด€ํ•œ ์ •๋ณด๊ฐ€ ์žˆ๋Š”๊ฒŒ ๋‹ฌ๋ž์Œ.

๊ทธ๋ž˜์„œ ์ฒ˜์Œ์—๋Š” ๋‚ด๊ฐ€ Aseprite ์„ค์ •์„ ์ž˜๋ชปํ•ด์„œ ๋ฐ”๊ฟจ๋‚˜ ์‹ถ์–ด์„œ ๊ด€๋ จ ์‹คํ—˜ ํ•ด๋ณด๋‹ˆ๊นŒ ์•„๋‹ˆ์—ˆ์Œ.

๋ฌธ์ œ๋Š” ์ €๋ ‡๊ฒŒ ๋ฐ”๊พธ๋Š” ๊ณผ์ •์—์„œ ํˆฌ๋ช…ํ•œ ๋ถ€๋ถ„์ด ์‚ฌ๋ผ์กŒ๋Š”๋ฐ ๊ทธ๋ ‡๊ฒŒ ํ•˜๋ฉด ์ž๋™์œผ๋กœ RGBA 8bits ์••์ถ• ๋ฐฉ์‹์„ RGB 4bits ๋กœ ๋ฐ”๊ฟจ๋˜ ๊ฑฐ์ž„.

๊ทธ๋ž˜์„œ ์–‘ ์˜†์œผ๋กœ ํˆฌ๋ช…ํ•œ ์นธ ๋„ฃ์–ด์ฃผ๋Š” ๊ฑธ๋กœ ํ•ด๊ฒฐํ•จ.



์œ„ ๋ฌธ์ œ๋“ค์— ๋Œ€ํ•œ ๋” ์ข‹์€ ํ•ด๊ฒฐ์ฑ… ์žˆ์œผ๋ฉด ์ข€ ์•Œ๋ ค์ฃผ์„ธ์š”! ๋‹ค๋“ค ์ฆ๊ฑฐ์šด ๊ฐœ๋ฐœ ๋˜์„ธ์š”~