๐ cubic-bezier ๋?
cubic-bezier() function์ css์์ transition ์์ฑ ํน์ transition-timing-function ์์ฑ์์ bazier ๊ณก์ ์๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ ํ ์์๊ณผ ๋๊น์ง์ ํจ๊ณผ๋ฅผ ์ ์ดํ๋ ๋ฐ ์ฐ์
๋๋ค.
๐ ๋ฒ ์ง์ด ๊ณก์ ์ ๊ฐ๋
์ปดํจํฐ ๊ทธ๋ํฝ์์ ๋ฒ ์ง์ด ๊ณก์ ์ด๋ ์ฐ๋ฆฌ๊ฐ ๊ณก์ ์ ๋งค๋๋ฝ๊ฒ ์ ๊ทธ๋ฆด ์ ์๊ฒ๋ ํด์ฃผ๋ ๊ณก์ ์๊ณ ๋ฆฌ์ฆ์
๋๋ค. ๋ฒ ์ง์ด ๊ณก์ ์ย 1์ฐจ ๋ฒ ์ง์ด ๊ณก์ (linear-bezier-curve),ย 2์ฐจ ๋ฒ ์ง์ด ๊ณก์ (quadratic-bezier-curve),ย 3์ฐจ ๋ฒ ์ง์ด ๊ณก์ (cubic-bezier-curve)ย โฆย n์ฐจ ๋ฒ ์ง์ด ๊ณก์ ์ด ์๋๋ฐ, ์ฐ๋ฆฌ๊ฐ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉํ๋ ๊ฒ์ย 2์ฐจ์ย 3์ฐจย ์ ๋๊ฐ ๋ ๊ฒ ๊ฐ์ต๋๋ค.
* 1์ฐจ ๋ฒ ์ง์ด ๊ณก์ (linear-bezier-curve)
* 2์ฐจ ๋ฒ ์ง์ด ๊ณก์ (quadratic-bezier-curve)
* 3์ฐจ ๋ฒ ์ง์ด ๊ณก์ (cubic-bezier-curve)
* n์ฐจ ๋ฒ ์ง์ด ๊ณก์
๋์ผ๋ก ์ง์ ๊ทธ๋ํ๊ฐ ์์ง์ด๋ ๊ฒ์ ๋ณด๋ฉด์ ์ดํดํ๋ ๊ฒ์ด ๋ ๋น ๋ฅด๊ฒ ์ดํด๊ฐ ๋๊ธฐ ๋๋ฌธ์ย 1์ฐจ ๋ฒ ์ง์ด ๊ณก์ (linear-bezier-curve)์ ๊ทธ๋ํ๋ฅผ ๋์ผ๋ก ์ง์ ๋ณด๊ฒ ์ต๋๋ค.
1์ฐจ ๋ฒ ์ง์ด ๊ณก์ (linear-bezier-curve)

P0์์ P1์ผ๋ก M์ด ์์ง์ผ ๋์ ๋น์จ์ ๋ง์ถฐ t๊ฐ์ด ์ฌ๋ผ๊ฐ๊ณ ์์ต๋๋ค. 1์ฐจ ๋ฒ ์ง์ด ๊ณก์ ์ ์ ์ด ๋ชฉ์ ์ง๊น์ง์ ์์ง์์ผ๋ก์จ ์ด๋ ต์ง ์๊ฒ ์ดํดํ ์๊ฐ ์์ต๋๋ค.
๊ทธ๋ ๋ค๋ฉด ์ด์ 2์ฐจ ๋ฒ ์ง์ด ๊ณก์ ์ ์์ง์์ ๋ณด๊ฒ ์ต๋๋ค!
2์ฐจ ๋ฒ ์ง์ด ๊ณก์ (quadratic-bezier-curve)

2์ฐจ ๋ฒ ์ง์ด ๊ณก์ ์ P0, P1, P2๋กย ์ ์ด ํ๋๊ฐ ๋ ๋์ด๋ ํํ์ ๋๋ค. ์ต์ด๋ก ์ ์ ๊ทธ๋ฆฌ๊ธฐ ์ํด์ ๋ ๊ฐ์ ์ ์ ๊ฐ์ง๋ ๊ฒ์ด 1์ฐจ ๊ทธ๋ฆฌ๊ณ ์ค์ง์ ์ผ๋ก ๊ณก์ ์ ๊ทธ๋ฆฌ๊ธฐ ์ํด์ ๊ธฐ์ค์ ์ ํ๋ ๋๋ฆฐ ๊ฒ์ด 2์ฐจ ๋ฒ ์ง์ด ๊ณก์ ์ ๋๋ค.
์ฐ๋ฆฌ๊ฐ ๊ทธ๋ฆฌ๊ณ ์ ํ๋ ๊ณก์ ์ย ๋๊ฐ์ ์ ์ด ๊ฐ์์ ๋ชฉํ์ง์ ์ ํฅํด์ ์์ง์ด๋ฉด์ ์์ฐ์ค๋ฝ๊ฒ ๊ณก์ ์ ๊ทธ๋ฆฌ๊ฒ ๋ฉ๋๋ค. ๋ฒ ์ง์ด ๊ณก์ ์ ์ด๋ฌํ ํน์ฑ์ ๊ฐ์ง๊ณ ์์ง์ ๋๋ค. ์ฐ๋ฆฌ๊ฐ ์ด ๊ฒ์ ์์ผ๋ก ํํํ๋ฉด ์ง๊ด์ ์ผ๋ก ๋ณด์ด์ง ์์์ ๋ฐ๋ก ์ดํดํ๊ธฐ๊ฐ ์ด๋ ต์ง๋ง ์ด๋ ๊ฒ ๊ทธ๋ฆผ์ด ์ค์ง์ ์ผ๋ก ์์ง์ด๋ ์ดํด๊ฐ ๋ ์ฝ์ต๋๋ค.
์ด์ 3์ฐจ ๋ฒ ์ง์ด ๊ณก์ ์ ์์ง์์ ์ฝ๊ฐ์ ์์ํด๋ณด๋ฉด์ ๋ณด๊ฒ ์ต๋๋ค.
3์ฐจ ๋ฒ ์ง์ด ๊ณก์ (cubic-bezier-curve)

(4๊ฐ์ ์ปจํธ๋กค ํฌ์ธํธ๋ฅผ ๊ฐ์ง๋ Cubic-bezier curve)
3์ฐจ ๋ฒ ์ง์ด ๊ณก์ ์ 3๊ฐ์ ์ . ์ด๋ป๊ฒ ๋ณด๋ฉด 2๊ฐ์ ์ ์ด ์์ง์ด๋ ๊ฒ ์ฒ๋ผ ๋ณด์ ๋๋ค. ์ด๋ป๊ฒ ๋ณด๋ฉด 2์ฐจ ๋ฒ ์ง์ด ๊ณก์ ๊ณผ๋ ํฌ๊ฒ ๋ฌ๋ผ ๋ณด์ด๋ ์ ์ ์์ต๋๋ค. ์ด ์ดํ์ ๋ฒ ์ง์ด ๊ณก์ ๋ค ์ฆ, n์ฐจ ๋ฒ ์ง์ด ๊ณก์ ๋ค์ ์๊ฐํด๋ดค์๋๋ ๋์ถฉ ์์์ด ๋ฉ๋๋ค! ์ ์ด ๋์ด๋๊ณ ์ ์ด ๋์ด๋๊ฒ ์ฃ .
์ฐ๋ฆฌ๊ฐ ๊ณก์ ์ ๊ทธ๋ฆด ๋ 3์ฐจ ์ด์์ ๋ฒ ์ง์ด ๊ณก์ ์ ํฌ๊ฒ ํ์ํ์ง ์๊ธฐ ๋๋ฌธ์ ์ฌ๊ธฐ๊น์ง๋ง ์์๋ด๋ ์ข์ ๊ฒ ๊ฐ์ต๋๋ค.
์ฐ๋ฆฌ๊ฐ css๋ก transition-timing-function์ ์ฌ์ฉํ ๋ 3์ฐจ ๋ฒ ์ง์ด ๊ณก์ (cubic-bezier-curve)๋ฅผ ์ฌ์ฉํฉ๋๋ค.
์ผํ ๋ณด๋ฉด ์ฐ๋ฆฌ๊ฐ ์๊ฒ ๋ 3์ฐจ ๋ฒ ์ง์ด ๊ณก์ ์ ์ด์ฉํ ๋ ์ ์ด ๋ค ๊ฐ๋ก ์ด๋ฃจ์ด์ ธ ์์ด์ cubic-bezier์ ์ธ์๋ก ์ ์ ๊ฐ์ 4 ๊ฐ๊ฐ ๋ค์ด๊ฐ ๊ฒ์ฒ๋ผ ๋ณด์ด์ง๋ง, ์ฌ์ค์ (x1, y1, x2, y2)๋ก ์ด๋ฃจ์ด์ ธ ์์ต๋๋ค. (์ด๊ฒ๋ง ์๋ฉด ์ฌ์ธ ์๋ ์์ต๋๋ค.)
cubic-bezier(x1, y1, x2, y2) ์ ์ฌ์ค์ ๊ฐ์ต๋๋ค.
๊ทธ๋ฌ๋ฉด ๋๋จธ์ง ๋ ๊ฐ์ ์ ์ ์ด๋ ์์๊น์? ์ด๊ฒ์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ฐ์ํฅ์ ์ง์ ๊ทธ๋ํ๋ก ์ด์ฉํ๊ณ ์๊ธฐ์ ์ค์ ์ ์ ํด๋ ๋๋ ๊ฒ์ ๋๋ค. ๊ทธ๋ฆผ์ผ๋ก ๋ณด๊ฒ ์ต๋๋ค.

์ฐ๋ฆฌ๋ ๋๊ฐ์ง ๊ฒ์ ์ ์์์ ์์น๋ง ์กฐ์ ํด์ ์ ๋๋ฉ์ด์
์ ์์ง์์ ์กฐ์ ํ ์๊ฐ ์์ต๋๋ค. ์ด๋ ๊ฒ ๋ณด๋๊น ๋ ์ง๊ด์ ์ผ๋ก ์ดํดํ๊ธฐ๊ฐ ํ๋ ๊ฒ ๊ฐ์ต๋๋ค.ย ๊ณก์ ๊ณผ ์ ๋๋ฉ์ด์
์ ์์ง์์ด ์ด๋ ํ ๊ด๊ณ๋ฅผ ๊ฐ์ง๊ณ ์๋์ง ์ดํดํ๊ธฐ๊ฐ ์ด๋ ต์ต๋๋ค!
์์
๋ง๋ก๋ ์ดํด๊ฐ ํ๋๋ ์๋๋ ์ง์ ์ฝ๋๋ฅผ ๋ณด๊ฒ ์ต๋๋ค.
๊ทธ๋ฌ๋๊น transition ์์ฑ์ ์ฌ์ฉํ ๋ ์๋์ ๊ฐ์ ๊ฐ์ ๋ถ์ฌํ๋ฉด
.box {
ย /* property name | duration | timing function | delay */
ย transition: border-radius 0.5s cubic-bezier(0.25, 0.25, 0.75, 0.75);
ย background-color: rgb(255, 255, 0);
ย width: 3rem;
ย height: 3rem;
ย border: 1px solid rgb(255, 0, 0);
ย &:hover {
ย ย border-radius: 50%;
ย }
}
- ํด๋น ์๋ฆฌ๋จผํธ์
width๋ฅผ 0.5์ด ๋์ ์ ์ดํ๋ - 4๊ฐ์ ์ปจํธ๋กค ํฌ์ธํธ (0.25, 0.25, 0.75, 0.75) ๋ฅผ ๊ฐ์ง๋ cubic-bezier curve์ ์๊ฑฐํด ํจ๊ณผ๋ฅผ ์ฃผ๊ฒ ๋ค๋ ๋ป์ ๋๋ค.
- ์๋์ ์ฌ์ง์์ ๋ค๋ชจ๋ ์ ๋ค ๋ ๊ฐ์ ์์น๋ฅผ (0.25, 025 ์๋ ๋ค๋ชจ) ๊ทธ๋ฆฌ๊ณ (0.75, 0.75 ์ ๋ค๋ชจ)๊ฐ ์ ํ๊ณ ์๋ ๊ฒ์ ๋๋ค.
๊ทธ๋ํ๋ฅผ ๊ทธ๋ ค๋ณด๋ฉด ์๋์ ๊ฐ์ด ์ผ์ ํ ์๋๋ก ์งํ๋จ์ ์ ์ ์์ต๋๋ค.
์ฌ์ฉ
๊ธฐ๋ณธ์ ์ผ๋ก ์ ์ธ๋์ด ์๋ 5๊ฐ์ง ๊ฐ์ด ์์ต๋๋ค.
ease(default)
๊ธฐ๋ณธ๊ฐ์ผ๋ก, (0.25, 0.1, 0.25, 1.0) ์ ๊ฐ์ ๊ฐ์ง๋๋ค.
์ฒ์๊ณผ ๋์ ์๋์ ์ผ๋ก ๋๋ฆฌ๊ฒ, ์ค๊ฐ์ ๋น ๋ฅด๊ฒ.
linear
์์์ ์ค๋ช ํ ๊ฒ์ผ๋ก ์ง์ ๋ชจ์์ ๋๋ค.
(0.25, 0.25, 0.75, 0.75) ๊ฐ์ ๊ฐ์ง๋๋ค.
ease-in
์กฐ๊ธ์ฉ ์๋งํ๊ฒ ์์นํฉ๋๋ค.
์ฒ์์ ๋๋ฆฌ๊ณ ๊ฐ์๋ก ๋นจ๋ผ์ง๋๋ค.
๊ฐ์ (0.42, 0.0, 1.0, 1.0) ์ ๋๋ค.
ease-out
ease-in๊ณผ ๋ฐ๋๋ก ์ฒ์์ ๋น ๋ฅด๊ณ ๊ฐ์๋ก ๋๋ ค์ง๋๋ค.
๊ฐ์ (0.0, 0.0, 0.58, 1.0) ์
๋๋ค.

ease-in-out
๋ํดํธ๊ฐ์ธ ease์ ์ ์ฌํ์ง๋ง ์กฐ๊ธ ๋ ์๋งํ๊ณ ๋ถ๋๋ฌ์ด ๋๋์ ์ค๋๋ค.
๊ฐ์ (0.42, 0.0, 0.58, 1.0) ์
๋๋ค.

๋ ์ฐธ๊ณ ํด ๋ณผ ์ ์๋ ๊ธ(๐๊ฐ์ถ๐)
- ๐๋ฒ ์ง์ด ๊ณก์ ์ ์ ๋ฆฌ๋์ด ์๋ ๋ธ๋ก๊ทธ
๋ฒ ์ง์ด ๊ณก์ ์ด ์ ์ ๋ฆฌ๋์ด ์์ต๋๋ค. - ๐ https://matthewlein.com/tools/ceaser (๐๊ฐ์ถ๐)
์ ๋๋ฉ์ด์ ์ด๋ ํธ๋์ง์ ํจ๊ณผ๋ฅผ ์ค ๋ ์์ฃผ ํ์ฉ๋๊ฐ ๋์ ์ฌ์ดํธ๊ฐ ํ๋ ์์ต๋๋ค.
์ด ์ฌ์ดํธ์์ ์์ ๋ค๋ชจ ์ 2 ๊ฐ์ ์์น๋ฅผ ์์ ํด๊ฐ๋ฉด์ ์ขํ์ ์์น ๋ณํ๋ฅผ ํ์ธํ๊ณ ์์ง์์ ํ์ธํด๋ณด์ธ์. `cubic-bezier(x1, y1, x2, y2)` ์ ์ฌ์ค์ ๊ฐ๋ค๋ ๊ฒ์ ์๊ฒ ๋ ๊ฒ์ ๋๋ค. ๋ ๊ฐ์ ์ ์ผ๋ก ๋ง๋ ๊ทธ๋ํ์ ๊ธฐ์ธ๊ธฐ๊ฐ ๊ฐํ๋ฅผ์๋ก ๋ณํ๊ฐ ๊ธ๊ฒฉํ ๋นจ๋ผ์ง๋ฉฐ ์๋งํ๋ฉด ๋๋ฆฌ๊ฒ ๋ณํํฉ๋๋ค.
์ด ๊ธ์ ์ต์๋์ธ(Obsidian)์์ ์์ฑ๋์์ต๋๋ค. ํฐ์คํ ๋ฆฌ์์ ์๋๊ฒฝ๋ก ๋งํฌ๋ ์๋ํ์ง ์์ต๋๋ค. ํฐ ์ด๋ฏธ์ง ํ์ผ์ ์ ๋ก๋๋์ง ์์ ์ ์์ต๋๋ค.