์๋ ํ์ธ์ 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
๋๊ธ