๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐ŸŽ iOS/UI

[iOS/UI] Core Animation์ด๋ž€? (feat. CALayer)

by Fomagran ๐Ÿ’ป 2022. 3. 16.
728x90
๋ฐ˜์‘ํ˜•

 

์•ˆ๋…•ํ•˜์„ธ์š” Foma ๐Ÿ’ป ์ž…๋‹ˆ๋‹ค!

 

์˜ค๋Š˜์€ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์ž‘๋™๋˜๋Š” ์›๋ฆฌ์— ๋Œ€ํ•ด ๋” ๊นŠ๊ฒŒ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด์„œ iOS์—์„œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹œ์Šคํ…œ์„ ๋‹ด๋‹นํ•˜๋Š” Core Animation์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

 

๋ฐ”๋กœ ์‹œ์ž‘ํ• ๊ฒŒ์š”~


Core Animation์ด๋ž€?

 

  • ๋ทฐ ๋ฐ ๊ธฐํƒ€ ์‹œ๊ฐ์  ์š”์†Œ์— ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ ์šฉํ•˜๊ธฐ ์œ„ํ•œ ๋ฒ”์šฉ ์‹œ์Šคํ…œ
  • ๊ทธ๋ž˜ํ”ฝ ๋ Œ๋”๋ง ๋ฐ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ธํ”„๋ผ
  • ๋ทฐ์™€ ํ†ตํ•ฉ๋˜์–ด ์ฝ˜ํ…์ธ  ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์œ„ํ•œ ๋” ๋‚˜์€ ์„ฑ๋Šฅ๊ณผ ์ง€์›์„ ์ œ๊ณตํ•˜๋Š” ๊ธฐ์ˆ 

 

์•„๋ž˜์™€ ๊ฐ™์ด UIKit ๋ฐ AppKit์˜ ๊ทผ๊ฐ„์ด ๋˜๋Š” ๊ธฐ์ˆ ๋กœ iOS ๋ฐ OS X๋ฅผ ์•ฑ์„ ๊ฐœ๋ฐœํ•˜๊ณ  ์žˆ๋‹ค๋ฉด ๋ฌด์กฐ๊ฑด Core Animation์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

 

Core Animation์„ ์ง์ ‘ ์‚ฌ์šฉํ•  ํ•„์š”๋Š” ์—†์ง€๋งŒ ์‚ฌ์šฉํ•  ๋•Œ Core Animation์ด ์–ด๋– ํ•œ ์›๋ฆฌ๋กœ ์ˆ˜ํ–‰๋˜๋Š”์ง€ ์ดํ•ดํ•  ํ•„์š”๋Š” ์žˆ์Šต๋‹ˆ๋‹ค.

 

ํŠนํžˆ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋” ๋งŽ์ด ์ œ์–ดํ•˜๊ฑฐ๋‚˜ ๋ ˆ์ด์–ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ทธ๋ฆฌ๊ธฐ ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ค๋ ค๋Š” ๊ฐœ๋ฐœ์ž๋“ค์„ ๋ฐ˜๋“œ์‹œ ์ดํ•ดํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

 


Core Animation์˜ ์›๋ฆฌ

 

Core Animation์€ ํ™”๋ฉด์— ๊ทธ๋ฆฌ๋Š” ์ž‘์—…์˜ ๋Œ€๋ถ€๋ถ„์„ ์˜จ๋ณด๋“œ ๊ทธ๋ž˜ํ”ฝ ํ•˜๋“œ์›จ์–ด๋กœ ๋„˜๊ฒจ ๋ Œ๋”๋ง์„ ๊ฐ€์†ํ™”ํ•ฉ๋‹ˆ๋‹ค.

 

์ด ์ž๋™ ๊ทธ๋ž˜ํ”ฝ ๊ฐ€์†์€ ์•ฑ ์†๋„๋ฅผ ๋Šฆ์ถ”์ง€ ์•Š์œผ๋ฉด์„œ ๋†’์€ ํ”„๋ ˆ์ž„ ์†๋„์™€ ๋ถ€๋“œ๋Ÿฌ์šด ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ œ๊ณตํ•˜๋Š”๋ฐ์š”.

 

ํŠนํžˆ View์™€ ํ†ตํ•ฉ๋˜์–ด ์ปจํ…์ธ  ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์œ„ํ•œ ๋” ๋‚˜์€ ์„ฑ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

 

๊ทธ ๋ฐฉ๋ฒ•์€ ๋ฐ”๋กœ View์˜ ์ปจํ…์ธ  ๋‚ด์šฉ์„ ๊ทธ๋ž˜ํ”ฝ ํ•˜๋“œ์›จ์–ด์—์„œ ์ง์ ‘ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋„๋ก "๋น„ํŠธ๋งต" ์œผ๋กœ ์บ์‹ฑํ•˜์—ฌ ๋™์ž‘์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

 

 

 

 

๋Œ€๋ถ€๋ถ„์˜ ์‹œ๊ฐ์  ๋ณ€๊ฒฝ ์‚ฌํ•ญ์€ ๊ฐœ์ฒด์˜ ์†์„ฑ ๋ฐ”๋€Œ๋Š” ๊ฒƒ๊ณผ ๊ด€๋ จ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

 

์‰ฝ๊ฒŒ ์˜ˆ๋ฅผ ๋“ค๋ฉด, ์œ„์น˜๊ฐ€ ๋ฐ”๋€๋‹ค๊ฑฐ๋‚˜ ํฌ๊ธฐ๊ฐ€ ์ปค์ง€๊ฑฐ๋‚˜ ์ž‘์•„์ง„๋‹ค๊ฑฐ๋‚˜ ๋ถˆํˆฌ๋ช…ํ•ด์ง€๋Š” ๋“ฑ์˜ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

 

Core Animation์€ ์ด๋Ÿฌํ•œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ์†์„ฑ์˜ ํ˜„์žฌ ๊ฐ’์—์„œ ๋ฐ”๋€ ์ƒˆ ๊ฐ’์„ ์บ์‹ฑํ•ด ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ ์šฉํ•˜๋Š” ๊ฒƒ์ด์ฃ .

 


Layer

 

Core Animation์€ ํ•˜๋“œ์›จ์–ด์—์„œ ์•ฑ ์ปจํ…์ธ ๋ฅผ ํ•ฉ์„ฑํ•˜๊ณ  ์กฐ์ž‘ํ•˜๊ธฐ ์œ„ํ•œ ์ธํ”„๋ผ์ธ๋ฐ, ์ด ์ธํ”„๋ผ์˜ ์ค‘์‹ฌ์—๋Š” "Layer"๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

 

์œ„์—์„œ Core Animation์€ ํ•˜๋“œ์›จ์–ด์—์„œ ์‰ฝ๊ฒŒ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋น„ํŠธ๋งต์„ ์บ์‹ฑํ•œ๋‹ค๊ณ  ๋งํ–ˆ์ฃ ?

 

๋ฐ”๋กœ ์ด ์—ญํ• ์„ Layer๊ฐ€ ๋‹ด๋‹นํ•ฉ๋‹ˆ๋‹ค.

 

๋” ๊ตฌ์ฒด์ ์œผ๋กœ ์„ค๋ช…๋“œ๋ฆฌ๋ฉด Layer๋Š” ์ปจํ…์ธ ์˜ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ์บก์ณํ•ด ์ €์žฅํ•˜๊ณ , ์ด๊ฒƒ์„ ํ•˜๋“œ์›จ์–ด์— ์ „๋‹ฌํ•˜์—ฌ ์†Œํ”„ํŠธ์›จ์–ด์—์„œ ๋ณด๋‹ค ํ›จ์”ฌ ๋น ๋ฅด๊ฒŒ ๋™์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

 

 

"๋งŒ์•ฝ View๋กœ ์ด๋Ÿฌํ•œ ์ž‘์—…์„ ํ•œ๋‹ค๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ์š”?"

 

View๋ฅผ ๋ณ€๊ฒฝํ•˜๋ฉด drawRect ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ƒˆ๋กœ์šด ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‚ด์šฉ์„ ๋‹ค์‹œ ๊ทธ๋ฆฌ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

์ด๋Ÿฐ ๋ฐฉ์‹์€ ๋ฉ”์ธ ์Šค๋ ˆ๋“œ์˜ CPU๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋น„์šฉ์ด ๋งŽ์ด ๋“ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

ํ•˜์ง€๋งŒ Layer๋Š” ์ด๋ฏธ ์บ์‹œ๋œ ๋น„ํŠธ๋งต์„ ์กฐ์ž‘ํ•˜์—ฌ ๋™์ผํ•˜๊ฑฐ๋‚˜ ์œ ์‚ฌํ•œ ํšจ๊ณผ๋ฅผ ์–ป์–ด ํ›จ์”ฌ ํšจ์œจ์ ์ด์ฃ .

 

๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— View์˜ ์–ด๋– ํ•œ ์‹œ๊ฐ์ ์ธ ๋ณ€๊ฒฝ์ด ์žˆ์„ ๋•Œ, ์˜ˆ๋ฅผ ๋“ค๋ฉด ๋ชจ์„œ๋ฆฌ๋ฅผ ๋‘ฅ๊ธ€๊ฒŒ ํ•œ๋‹ค๊ฑฐ๋‚˜ ํ…Œ๋‘๋ฆฌ์˜ ๋‘๊ป˜๋ฅผ ์ง€์ •ํ•  ๋•Œ ๋“ฑ์—์„œ 

 

์•„๋ž˜์™€ ๊ฐ™์ด View์˜ Layer์— ์ ‘๊ทผํ•˜์—ฌ ๋ณ€๊ฒฝํ•˜๊ฒŒ ๋˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

 

view.layer.cornerRadius = 10
view.layer.borderWidth = 1

์˜ค๋Š˜์€ Core Animation์ด ๋ฌด์—‡์ด๊ณ  ์–ด๋– ํ•œ ์›๋ฆฌ๋กœ ์ž‘๋™๋˜๋Š”์ง€์— ๋Œ€ํ•ด ๊ฐ„๋‹จํ•˜๊ฒŒ ์•Œ์•„๋ณด์•˜๋Š”๋ฐ์š”.

 

๊ธ€์„ ์ž‘์„ฑํ•˜๋‹ค๋ณด๋‹ˆ, Core Animation์˜ ํ•ต์‹ฌ์ธ Layer์— ๋Œ€ํ•œ ๋ถ€๋ถ„์ด ๋„ˆ๋ฌด ๋งŽ์•„ ๋‹ค์Œ ๊ธ€์—์„œ ๋”ฐ๋กœ Layer์— ๋Œ€ํ•ด ๋” ๊นŠ๊ฒŒ ์•Œ์•„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

 

(Layer์— ๋Œ€ํ•ด ๋” ์•Œ๊ณ ์‹ถ์€ ๋ถ„์€ ์—ฌ๊ธฐ ์—์„œ ํ™•์ธํ•ด ์ฃผ์„ธ์š”!)

 

ํ˜น์‹œ๋ผ๋„ ๊ถ๊ธˆํ•˜์‹  ์‚ฌํ•ญ์ด ์žˆ๋‹ค๋ฉด ์•„๋ž˜ ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์„ธ์š”!


Reference

 

 

About Core Animation

About Core Animation Core Animation is a graphics rendering and animation infrastructure available on both iOS and OS X that you use to animate the views and other visual elements of your app. With Core Animation, most of the work required to draw each fr

developer.apple.com

 

728x90
๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€