- ๋ฐฐ๊ฒฝ์ง์ 1 - ํฝ์
, ํฌ์ธํธ, Apple์
72ppi
- ๋ฐฐ๊ฒฝ์ง์ 2 - CSS ํฝ์ , DPPX(Device Pixel Ratio)
- ๊ทธ๋ฆฌ๋ ๊ตฌ์ฑ์์: Margin, Flowline, Module, Column, Row, Gutter
- 8ํฌ์ธํธ ๊ทธ๋ฆฌ๋ ์์คํ (8pt Grid System)
- ๋ฒ ์ด์ค๋ผ์ธ ๊ทธ๋ฆฌ๋(Baseline Grid)
- ๋จ์:
px
,rem
,em
- ์ปดํฌ์ง์ ๊ทธ๋ฆฌ๋(Composition Grids)
- ๋ชจ๋์ ์ค์ผ์ผ(Modular Scales)
- ๋ฐ์ํ ๊ทธ๋ฆฌ๋: Breakpoint ์์คํ , ๊ฑฐํฐ ๊ฐ ์ ํ๊ธฐ, ๊ฐ๋ก ๋ฐฉํฅ ๊ทธ๋ฆฌ๋
- Figma์์ ๊ตฌ์ถํ๊ธฐ: ์ปฌ๋ผ ๊ทธ๋ฆฌ๋, ๋ฒ ์ด์ค๋ผ์ธ ๊ทธ๋ฆฌ๋
ํฝ์
(px
)์ ๋์งํธ ํ๋ฉด์์ ๊ฐ์ฅ ๊ธฐ๋ณธ์ด ๋๋ ๋จ์์
๋๋ค. ํ๋ฉด์ ์ชผ๊ฐค ์ ์๋ ๊ฐ์ฅ ์์ ๋จ์๋ฅผ ํฝ์
, ์ฐ๋ฆฌ๋ง๋ก๋ ํ์๋ผ๊ณ ํฉ๋๋ค. ๋ฌผ๊ฑด์ ์ฌ์ด์ฆ๋ฅผ ์ธก์ ํ ๋ ์ฌ์ฉํ๋ mm
๋ inch
์ ๊ฐ์ด ๊ณ ์ ๋ ๊ฐ์ ๋ํ๋ด๋ ๋จ์๊ฐ ์๋๊ธฐ ๋๋ฌธ์ ๋์ผํ ํฌ๊ธฐ์ ํ๋ฉด์ด๋ผ๋ ํฝ์
์๋ ๋ค๋ฅผ ์ ์์ฃ . ๋ฐ๋ผ์ 1px
์ ์ค์ ๋ฌผ๋ฆฌ์ ํฌ๊ธฐ๋ ๋๋ฐ์ด์ค ํด์๋์๋ฐ๋ผ ์ ๊ฐ๊ฐ์
๋๋ค.
ํฌ์ธํธ(pt
)๋ฅผ ์ดํดํ๋ ค๋ฉด ์ญ์ฌ๋ฅผ ์กฐ๊ธ ์ดํด๋ด์ผํฉ๋๋ค. ํฌ์ธํธ๋ ๋์งํธ ๋๋ฐ์ด์ค๊ฐ ์๋ ์์ , ์ธ์๋ฌผ์ ํ์ดํฌ๊ทธ๋ํผ(Typography)์์ ์ฌ์ฉํ๋ ๊ฐ์ฅ ์์ ๋จ์์์ต๋๋ค. ์ค์ ์ธ์๋ ํ์์ ํฌ๊ธฐ๋ฅผ ๋ํ๋ด๋ ๋จ์์ด๋ฏ๋ก 1pt
๋ ํฝ์
๊ณผ ๋ฌ๋ฆฌ ๊ณ ์ ๋ ํ์ค ์ธ๊ณ์ ๊ฐ์ ๋ํ๋
๋๋ค. 1pt
๋ ๋๋ต 1/72inch
(0.3527mm
) ์ ๋๊ฐ ๋ฉ๋๋ค.
๊ทธ๋ฐ๋ฐ ์ด ํฌ์ธํธ ๋จ์๋ฅผ ํฝ์
๊ธฐ๋ฐ์ ๋์งํธ ๋๋ฐ์ด์ค๋ก ์ฎ๊ฒจ์ค๋ ๊ณผ์ ์์ ๋ง์ ์ฌ๋๋ค์ด ํผ์ ์ ๊ฒช๊ฒ ๋์๊ณ ์, Xerox PARC ์ฐ๊ตฌ์๋ ์ด๋ฅผ ํด์ํ๊ธฐ ์ํด ๋์งํธ ํ๋ฉด์ ํ์ค ํด์๋๋ฅผ 72 ppi(pixels per inch)
๋ก ์ฑํํฉ๋๋ค. ์ด๋ก์จ ํ์ค ํด์๋๋ฅผ ๊ฐ์ง ๋๋ฐ์ด์ค์์ 1pt = 1px
๊ฐ ์ฑ๋ฆฝํ๊ฒ ๋์์ต๋๋ค. ๋น์ 72 ppi
ํ์ค ํด์๋๋ฅผ ์ฑํํ Apple PC์ ์ฑ๊ณต์ผ๋ก 72 ppi
๊ฐ ๋ณดํธํ๋์๊ณ ์, Human Interface Guides ๋ฌธ์๋ฅผ ๋ณด๋ฉด ํ์ฌ๊น์ง๋ Apple ๋๋ฐ์ด์ค์์ ์ด ํ์คํด์๋๋ฅผ ์ฌ์ฉํ๊ณ ์์์ ์ ์ ์์ต๋๋ค.
๋ง์ฝ ์ด๋ค ๋๋ฐ์ด์ค์ ํด์๋๊ฐ @x2
(2๋ฐฐ)๋ผ๋ฉด ๋ฌผ๋ฆฌ์ ์ผ๋ก 1*1 pt
ํฌ๊ธฐ๋ฅผ ๊ตฌํํ๋๋ฐ 2*2 px
, ์ด 4๊ฐ์ ํฝ์
์ด ์ฌ์ฉ๋ฉ๋๋ค. ๊ฐ๋ก, ์ธ๋ก ๋ชจ๋ ์ธ์น๋น ํฝ์
์๊ฐ 2๋ฐฐ์ฉ ์ปค์ก์์ ์๋ฏธํ๊ธฐ ๋๋ฌธ์ด์ฃ .
spoqa ๊ธฐ์ ๋ธ๋ก๊ทธ ํฝ์ ๊ณผ ํฌ์ธํธ๊ฐ ๋์์ด ๋์์ต๋๋ค.
CSS ํฝ์
์ 72ppi
๊ฐ ์๋ 96ppi
ํด์๋๋ฅผ ๊ธฐ์ค์ผ๋ก ํฉ๋๋ค. ๋ฐ๋ผ์ ๊ฑฐ์ ๋ชจ๋ ์น ๋ธ๋ผ์ฐ์ ๋ 96ppi
๋ฅผ ํ์คํด์๋ ๊ท๊ฒฉ์ผ๋ก ์ฌ์ฉํฉ๋๋ค. Apple์ Safari๋ ๋ง์ฐฌ๊ฐ์ง์ฃ . ๋ฐ๋ผ์ CSS์์๋ ํ์คํด์๋๋ผ๊ณ ํด๋ 1pt = 1px
์ด ์ฑ๋ฆฝ๋์ง ์์ต๋๋ค. CSS 1px
์ 1/96inch
์
๋๋ค. ๊ฐ๋ น, CSS์์ 16px
๋ก ์ง์ ํ๋ฉด ๋ฌผ๋ฆฌ์ ํฌ๊ธฐ๋ 16pt
๊ฐ ์๋ 12pt
๊ฐ ๋ฉ๋๋ค.
div {
font-size: 16px; /* = 12pt */
}
์ฐธ๊ณ ๋ก 96ppi
๋ Microsoft๊ฐ ๊ฐ๋ฐํ๊ณ ์ฑํํ๋ ํด์๋ ๊ท๊ฒฉ์
๋๋ค.
๋๋ฐ์ด์ค ํ๋ฉด์ ์ต์ข
๋ ๋๋ง๋ ๋ ์ค์ํ ๊ฒ์ DPPX(Device Pixel Ratio)์
๋๋ค. DPPX๋ ๋๋ฐ์ด์ค ํฝ์
๊ณผ CSS ํฝ์
๊ฐ ๋น์จ์
๋๋ค. ๋ชจ๋ ๋๋ฐ์ด์ค๋ CSS์์์ 1px
์ด ์ค์ ํ๋ฉด์์ ๋ช ํฝ์
์ ์ฐจ์งํ๋์ง ์ ํด์ง ๋น์จ์ ๊ฐ์ต๋๋ค. ๊ฐ๋ น, ์ด๋ค ๋๋ฐ์ด์ค์ DPPX๊ฐ 2
๋ผ๋ฉด CSS 1*1 px
์ด ์ค์ ํ๋ฉด์ ๋ ๋๋ง๋ ๋ 2*2 px
์ ์ฐจ์งํฉ๋๋ค. ๋ค์์ CSS Length Explained์์ ๋ฐ์ทํ ์ค๋ช
์
๋๋ค.
In order to make sure that CSS pixels are sized consistently across every device that accesses the web (i.e. everything with a screen and network connection), device manufacturers had to map multiple device pixels to one CSS pixel to make up for itโs relative bigger physical size. The ratio of the dimension of CSS pixel relative to device pixels is the device pixel ratio (DPPX).
์ฐธ๊ณ ๋ก JavaScript์์๋ window.devicePixelRatio
์์ฑ์ ํตํด DPPX ๊ฐ์ ์ป์ ์ ์์ต๋๋ค. ๋ง์ฝ ์ด๋ค ์ด๋ฏธ์ง์ ํฌ๊ธฐ๋ฅผ CSS์์ 60*60 px
๋ก ์ง์ ํ๋ค๋ฉด DPPX๊ฐ 4
์ธ ๋๋ฐ์ด์ค์์ ์ด ์ด๋ฏธ์ง๋ ์ค์ ๋ก 24*24 px
์ ์ฐจ์งํ๊ฒ ๋ฉ๋๋ค. ๋ฐ๋ผ์ ์น๊ฐ๋ฐ์๋ 24*24 px
ํฌ๊ธฐ์ ์ด๋ฏธ์ง ํ์ผ์ ์ค๋นํ์ฌ ๋ก๋ฉ๋๋๋ก ํด์ผ๊ฒ ์ฃ . window.devicePixelRatio
์์ฑ์ ์ด์ฉํ๋ฉด DPPX์ ๋ฐ๋ผ ๋์ ์ผ๋ก ์๋ง์ ํฌ๊ธฐ์ ์ด๋ฏธ์ง๋ฅผ ๋ก๋ฉํ ์ ์์ต๋๋ค.
console.log(window.devicePixelRatio); // 4
๋ง์ง(Margin)์ ํ๋ ์์ ๊ฐ์ฅ์๋ฆฌ ์ฌ๋ฐฑ์ ๋๋ค.
ํ๋ฆ์ (Flowline)์ ํ๋ ์ ์ ์ฒด์ ํํํ๊ฒ ๋ฐฐ์น๋๋ ๊ฐ๋ก์ ์ ๋๋ค. ์ด ํ๋ฆ์ ๋ค์ ๊ธฐ๋ฐ์ผ๋ก ํ๋ ์ ๋ด์์ ํฐ ์์ญ๋ค์ ๋๋ ์ ์๊ณ , ์ฝํ ์ธ ๊ฐ ์์ํ๊ฑฐ๋ ๋๋๋ ๋ถ๋ถ์ ์ ํ๊ฒ ๋ฉ๋๋ค.
๋ชจ๋(Module)์ ๊ทธ๋ฆฌ๋์์ ์ธ๋ก์ ๊ณผ ๊ฐ๋ก์ (ํ๋ฆ์ )์ด ๊ต์ฐจํ๋ฉด์ ๋ง๋ค์ด๋ด๋ ๋ธ๋ก๋ค์ ์๋ฏธํฉ๋๋ค.
์ปฌ๋ผ(Column)์ ํ๋ ์์ ์ฒ์ฅ๋ถํฐ ๋ฐ๋ฅ๊น์ง ์ธ๋ก ๋ฐฉํฅ์ผ๋ก ์ธ์ ํ ๋ชจ๋๋ค์ ๊ทธ๋ฃน์ ๋๋ค.
ํ(Row)์ ํ๋ ์์ ์ผ์ชฝ๋ถํฐ ์ค๋ฅธ์ชฝ๊น์ง ๊ฐ๋ก ๋ฐฉํฅ์ผ๋ก ์ธ์ ํ ๋ชจ๋ค์ ๊ทธ๋ฃน์ ๋๋ค.
๊ฑฐํฐ(Gutter)๋ ์ปฌ๋ผ๊ณผ ์ปฌ๋ผ ์ฌ์ด, ํน์ ํ๊ณผ ํ ์ฌ์ด์ ๋น ๊ณต๊ฐ์ ๋๋ค. ๋ชจ๋ ๊ฑฐํฐ์ ๊ฐ์ ๋์ผํด์ผํฉ๋๋ค.
์ฌ์ง์ถ์ฒ : A Quick Look at Types of Grids for Creating Professional Designs
8ํฌ์ธํธ ๊ทธ๋ฆฌ๋ ์์คํ
์ ๊ทธ๋ฆฌ๋๋ฅผ ๊ตฌ์ฑํ ๋ 8
์ฉ ์ฆ๊ฐํ๋ ๊ฐ๋ค๋ง์ ์ฌ์ฉํ๋ ๋ฐฉ์์
๋๋ค. ๊ทธ๋ฆฌ๋๋ฅผ ๊ตฌ์ฑํ๋ ๊ฑฐํฐ, ๋ง์ง์ ๊ฐ์ 8
์ ๋ฐฐ์๋ก, ๊ทธ๋ฌ๋๊น ๊ฐ๋ น CSS์์๋ 16px
, 24px
๊ณผ ๊ฐ์ ๊ฐ๋ค๋ง ์ฌ์ฉํ๋ 8px ๊ทธ๋ฆฌ๋ ์์คํ
์ ์ฌ์ฉํ๋ฉด ๋ฉ๋๋ค. Material Design์์๋ Android ์ฑ์ ์ํ 8dp ๊ทธ๋ฆฌ๋ ์์คํ
์ ์ ์ํฉ๋๋ค. ๋ค๋ง, ์์ด์ฝ๊ณผ ๊ฐ์ด ์์ ์ฌ์ด์ฆ๊ฐ ํ์ํ ๊ฒฝ์ฐ์๋ 4dp ๊ทธ๋ฆฌ๋๋ฅผ ํ์ฉํฉ๋๋ค.
์ต๊ทผ์๋ ๊ณต๊ฐ์ ๋ ์ธ๋ฐํ๊ฒ ๋๋ ์ ์๋ 4ํฌ์ธํธ ๊ทธ๋ฆฌ๋๊ฐ ์ธ๊ธฐ๋ฅผ ์ป๊ณ ์์ต๋๋ค. ์ ๋ ํฌํธํด๋ฆฌ์ค ํ๋ก์ ํธ์ ๋์์ธ์์คํ ์ ๊ตฌ์ถํ๋ฉด์ Goodbye 8-point grid, hello 4-point grid? ๋ฑ์ ์ํฐํด์ ์ฐธ๊ณ ํ๋๋ฐ์, ๊ธฐ๋ณธ์ ์ผ๋ก 8ํฌ์ธํธ, ๊ฒฝ์ฐ์ ๋ฐ๋ผ 4ํฌ์ธํธ๋ฅผ ์ฌ์ฉํ๊ธฐ๋ก ํ์ต๋๋ค.
๊ทธ๋ฐ๋ฐ ์ 4
, 8
์ธ๊ฐ์? 2
์ 4
๋ก๋ง ๋๋ ์ ์์ด ๊ณ ํด์๋์์ ํฝ์
์ ๋ฐ ํ์์ ๋ฐฉ์งํ ์ ์๊ธฐ ๋๋ฌธ์
๋๋ค. ๊ณ ํด์๋ ๋๋ฐ์ด์ค๋ ์ผ๋ฐ์ ์ผ๋ก ํ์คํด์๋์ 1.5๋ฐฐ, 2๋ฐฐ, 3๋ฐฐ, 4๋ฐฐ ํด์๋๋ฅผ ์ฌ์ฉํฉ๋๋ค. @x1.5
, @x2
, @x3
, @x4
๋ก ํ์ํ๊ณ ์.
์๋ฅผ ๋ค์ด, ํ์คํด์๋์์ 1pt = 1px
์ด๊ณ , @x1.5
ํด์๋์ ๋๋ฐ์ด์ค์์ ๋ฌผ๋ฆฌ์ ์ผ๋ก 5*5 pt
ํฌ๊ธฐ๋งํ ์์ด์ฝ์ ๊ตฌํํ๋ค๊ณ ๊ฐ์ ํด๋ด
์๋ค. ์์ด์ฝ์ ํ ๋ฉด์ ํฝ์
์ฌ์ด์ฆ๋ 7.5px
(5 * 1.5
)์ด ๋๊ฒ ์ฃ . ์ด๋ฅผ ํฝ์
์ ๋ฐ ํ์์ด๋ผ๊ณ ํฉ๋๋ค. ์ ์ด์ ํฝ์
์ ํ๋ฉด์ ๊ตฌ์ฑํ๋ ๊ฐ์ฅ ์์ ๋จ์์ด๊ธฐ ๋๋ฌธ์ ์ ์(Integer) ๊ฐ์์ ๋ฒ์ด๋ ์์์ ์๋ ๊ฐ์ผ๋ก ์ธํด ๊ณ๋จ ํ์(Aliasing)์ด ๋ฐ์ํ ์ ์์ต๋๋ค. ๊ณ๋จํ์์ ์๋์ผ๋ก ๋ถ๋๋ฝ๊ฒ ์ฒ๋ฆฌํ๋ Anti-aliasing ๊ธฐ๋ฅ์ ํ์ฌํ ๋๋ฐ์ด์ค์์๋ ๊ฐ์ฅ์๋ฆฌ๊ฐ ํ๋ฆฟํด์ง ์ ์๊ณ ์. ๋๋ ๋ ๋๋ง ์์ง์ด ์๋์ผ๋ก ํฝ์
๊ฐ์ ๋ฐ์ฌ๋ฆผ ์ฒ๋ฆฌํ๋ฉด์ ๋์์ธ๊ณผ ๋ค๋ฅด๊ฒ ๋ ๋๋ง๋ ์ ์๋ ๋ฌธ์ ๊ฐ ์์ต๋๋ค.
4ํฌ์ธํธ, 8ํฌ์ธํธ ๊ทธ๋ฆฌ๋์์๋ ํฝ์
์ ๋ฐ ํ์์ด ์์ต๋๋ค. ๋ํ 4
์ 8
์ ์น ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๋ณธ ํฐํธ ํฌ๊ธฐ์ธ 16px
๊ณผ๋ ๋ง์๋จ์ด์ ธ์ ๋ฐธ๋ฐ์ค ์ ์ง์๋ ๋์์ด ๋๊ณ ์.
8ํฌ์ธํธ ๊ทธ๋ฆฌ๋ ์์คํ ์ ์ ์ฒด ํ๋ฉด ๋ ์ด์์์ด ์๋ ์ปดํฌ๋ํธ ๋์์ธ์ ์ ์ฉํ ๋ ๋ฌด์์ ๊ณ ๋ คํด์ผํ ๊น์? ์น/์ฑ์์ ํ๋ฉด์ ๊ทธ๋ฆด ๋ ์ฌ์ฉํ๋ ๋ฐ์ค๋ชจ๋ธ(Box Model)์ ํ๋์ ํ๋ฉด์ผ๋ก ์๊ฐํ๊ณ , ๋ชจ๋ ๊ตฌ์ฑ์์์ ํ ์คํธ์ 8ํฌ์ธํธ ๊ทธ๋ฆฌ๋๋ฅผ ์ ์ฉํ๋ฉด ๋ฉ๋๋ค. ๊ทธ๋ผ ์ปดํฌ๋ํธ๋ค์ ํ๋ฉด์ ๋ฐฐ์นํ์ ๋ ์ ์ฒด ๋ ์ด์์์ ๊ทธ๋ฆฌ๋์ ๋ง์๋จ์ด์ง๋๋ค.
ํ๋์ ๋ฐ์ค๋ฅผ ๊ตฌ์ฑํ๋ 4๊ฐ์ง ๊ตฌ์ฑ์์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ์ฝํ ์ธ (Content) : ๋ฐ์ค์ ์ฝํ ์ธ ์์ญ
- ํจ๋ฉ(Padding) : ๋ฐ์ค์ ์ฝํ ์ธ ๋ฅผ ๋๋ฌ์ผ ์ฌ๋ฐฑ
- ์ (Border) : ๋ฐ์ค์ ์
- ๋ง์ง(Margin) : ๋ฐ์ค ์ธ๋ถ์ ์ฌ๋ฐฑ, ์ฃผ๋ณ ์์์์ ๋ ์ด์์์ ์ฌ์ฉ
์ฌ์ง์ถ์ฒ : W3S ๋ฐ์ค๋ชจ๋ธ(Box Model)
์ปดํฌ๋ํธ๋ฅผ ๋์์ธํ๋ค๋ณด๋ฉด ์๋ฌด๋ฆฌํด๋ 4
๋ 8
๋ก ๋๋์ด๋จ์ด์ง์ง ์๋ ๊ฒฝ์ฐ๊ฐ ์์ต๋๋ค. 8ํฌ์ธํธ์ ์ต์ง๋ก ๋ง์ถ๋ค๋ณด๋ฉด ๋ฒํผ์ ์ฌ๋ฐฑ์ด ๋๋ฌด ๋๊ฑฐ๋ ์ข์์ง๋ ๊ฒฝ์ฐ, ํ
์คํธ๊ฐ ๋๋ฌด ํฌ๊ฑฐ๋ ์์์ง๋ ๊ฒฝ์ฐ๊ฐ ์์ฃ . ์ด๋ด ๋ ๋ค์ ๊ท์น์ ๊ณ ๋ คํด๋ณด์ธ์.
์ง์ผ์ผํ ๊ฒ
- ๋ฐ์ค์ ๋๋น, ๋์ด
- ํ ์คํธ ์ค๋์ด(Line Height)
ํฌ๊ธฐํด๋ ๋ ๊ฒ
- ๋ฐ์ค ๋ด์ ์ค์์ ๋ ฌ๋ ํฐํธ์ ์ฌ์ด์ฆ
๋ฐ์ค์ ํฌ๊ธฐ์ ํ
์คํธ ์ค๋์ด๋ ์ต์ 4
์ ๋ฐฐ์๋ฅผ ์ ์งํ๊ณ ํฐํธ ์ฌ์ด์ฆ(Font Size)๋ ๊ทธ๋ฆฌ๋์์ ์ด๋์ ๋ ๋ฒ์ด๋๋ ๊ด์ฐฎ๋ค๋ ๊ฒ์ด Material Design์ ์ค๋ช
์
๋๋ค. ๋ค์์ ๋ฐ์ท ๋ด์ฉ์
๋๋ค.
Type can be placed outside of the 4dp grid when itโs centered within a component, such as a button or list item. When placed outside of the grid but centered within a component, text can still appear vertically center-aligned.
๋ฒ ์ด์ค๋ผ์ธ ๊ทธ๋ฆฌ๋(Baseline Grid)๋ ํ์ดํฌ๊ทธ๋ํผ์์ ํ ์คํธ์ ๊ธฐ์ค์ ์ ์ก์์ฃผ๋ ๊ทธ๋ฆฌ๋ ๋ฐฉ์์ด๊ณ ์, ์ฝํ ์ธ ์ ๋ฆฌ๋ฌ์ ๋ง๋ค์ด์ฃผ๋ ๊ฒ์ด ํน์ง์ ๋๋ค. ์์์ ์๊ฐํ ๊ทธ๋ฆฌ๋ ๊ตฌ์ฑ์์ ์ค ํ๋ฆ์ (Flowline)์ ํด๋นํฉ๋๋ค.
์ฌ์ง์ถ์ฒ : A Quick Look at Types of Grids for Creating Professional Designs
์ผ๋ฐ์ ์ผ๋ก 8ํฌ์ธํธ ๊ทธ๋ฆฌ๋ ์์คํ ์์ 4ํฌ์ธํธ ๋ฒ ์ด์ค๋ผ์ธ์ ์ฌ์ฉํฉ๋๋ค. ํฝ์ ์ ๋ฐ ํ์์ ๋ฐฉ์งํ๋ฉด์, 8ํฌ์ธํธ ๋ฒ ์ด์ค๋ผ์ธ์ ๋นํด ํฐํธ ์ฌ์ด์ฆ์ ์ค๋์ด์ ๋ค์์ฑ์ ์ฃผ๊ธฐ ์ฉ์ดํ๊ธฐ ๋๋ฌธ์ ๋๋ค. ๋ค์์ Figma ๊ณต์ ๋ธ๋ก๊ทธ์ Our grid pro quo: Everything you need to know about layout grids in Figma์์ ๋ฐ์ทํ ๋ด์ฉ์ ๋๋ค.
In many 8pt grid systems, a 4pt baseline is used. This basic unit makes the math easy and scalable as you start to setup different type sizes and line-height combinations.
์ง๊ธ๊น์ง ํฝ์
์ ๊ฐ์ง๊ณ ์๊ธฐํ์ง๋ง, ์ฌ์ค ์น ๊ฐ๋ฐ์์๋ ๊ณต๊ฐ๊ณผ ํ์ดํฌ๊ทธ๋ํผ์ rem
์ ํํ ์ฌ์ฉํฉ๋๋ค. <html>
ํ๊ทธ์ ํฐํธ์ฌ์ด์ฆ(๊ธฐ๋ณธ์ ์ผ๋ก 16px
)์ 1rem
์ผ๋ก ํ์ฐํ๋ ์๋์ ๋จ์์ด๊ธฐ ๋๋ฌธ์, ๋จ ํ๋์ ํฝ์
๊ฐ์ ์กฐ์ ํจ์ผ๋ก์จ ๋ชจ๋ ํฐํธ์ ์ฃผ๋ณ ์ฌ๋ฐฑ ๊ฐ์ด ์๋์ผ๋ก ๋์ด๋๊ณ ์ค์ด๋ ๋ค๋ ์ฌ์ค ๋๋ฌธ์ด์ฃ . ์ด๋ ๋ ์ด์์์ ์ ์ฐ์ฑ๊ณผ ์ ๊ทผ์ฑ ์ธก๋ฉด์์ ์ฅ์ ์ผ๋ก ์์ฉํฉ๋๋ค. Tailwind CSS์์๋ padding
, margin
๊ฐ์ผ๋ก rem
์ ์ฌ์ฉํฉ๋๋ค.
ํ์ง๋ง ํญ์ rem
์ ์ฌ์ฉํด์ผ ํ๋ ๊ฒ์ ์๋๋๋ค. ์ด๋ค ์ปดํฌ๋ํธ๊ฐ ์ํฉ์ ๋ฐ๋ผ ๋ค์ํ ํฌ๊ธฐ๋ฅผ ๊ฐ๊ฒํ๋ ค๋ฉด ๋ณธ์ธ ์์์ ํฐํธ์ฌ์ด์ฆ๋ฅผ 1em
์ผ๋ก ํ์ฐํ๋ em
์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๊ณ , ๊ณ ์ ๋ ๊ฐ์ ๋ฐ๋์ ์ ์งํด์ผํ ๋๋ px
์ ์ฌ์ฉํ๋ ๊ฒ์ด ์ ํฉํฉ๋๋ค. ๊ทธ๋ฆฌ๋ ์์คํ
์์๋ px
, rem
, em
๊ฐ ๋จ์๋ ์ฉ๋์ ๋ง๊ฒ ์ฌ์ฉํ๋ฉด ๋์ง๋ง, ๊ทธ ๊ธฐ์ค์ ์ฐพ๊ธฐ๊ฐ ์ฐธ ์ด๋ ต์ต๋๋ค.
Create your design system, part 1: Typography์์ ์ผ์ด์ค ์คํฐ๋๋ฅผ ํด๋ณผ ์ ์์ต๋๋ค. Comprehensive Guide: When to Use Em vs. Rem๋ ๋์์ด ๋ฉ๋๋ค.
ํ ์คํธ๊ฐ ์ ๊ณ ์ถ์์ ์ด๋ฏธ์ง์ ๋ํ ์์ฃผ์ ํ๋ฉด์ ๋ฒ ์ด์ค๋ผ์ธ ๊ทธ๋ฆฌ๋๋ณด๋ค๋ ์ปดํฌ์ง์ ๊ทธ๋ฆฌ๋(Composition Grids)๊ฐ ์ ํฉํ ์ ์์ต๋๋ค. ํน์ ์์ด ์ฌ์ฉํ ์ ์๊ณ ์. ๋ ๊ฐ์ง ์ปดํฌ์ง์ ๊ทธ๋ฆฌ๋๋ฅผ ์๊ฐํฉ๋๋ค.
Rule of Thirds๋ ํ๋ฉด์ ๋๊ฐ์ ํฌ๊ธฐ์ 9๊ฐ ์กฐ๊ฐ์ผ๋ก ๋๋ ํ, ์ด๋ค์ ๋๋ ์ ๊ณผ ์ ๋ค์ ๊ต์ฐจ์ ์ ๊ธฐ์ค ์ผ์ ์ฝํ ์ธ ๋ฅผ ๋ฐฐ์นํ๋ ๋ฐฉ๋ฒ์ ๋๋ค. ์ฌ์ฉ์์ ์์ ์ด Z์๋ฅผ ๊ทธ๋ฆฌ๋ฉฐ ์ผ์ชฝ ์๋จ, ์ค๋ฅธ์ชฝ ์๋จ, ์ผ์ชฝ ํ๋จ, ์ค๋ฅธ์ชฝ ํ๋จ ์์๋ก ํ๋ฅธ๋ค๊ณ ๊ฐ์ ํฉ๋๋ค.
์ฌ์ง์ถ์ฒ : A Quick Look at Types of Grids for Creating Professional Designs
ํฉ๊ธ๋น(Golden Ratio)๋ ์์ฐ์์ ๋ฐ๊ฒฌ๋ ๋ฏธ์ ๋น์จ์์ ๊ฐ์ ธ์จ ๊ทธ๋ฆฌ๋ ๋ฐฉ๋ฒ๋ก ์ ๋๋ค. ํผ๋ณด๋์น ์์ด์์ ์ซ์๊ฐ ์ฆ๊ฐํ๋ ๋น์จ์ ์ฌ์ฉํ์ฌ ๊ทธ๋ฆฌ๋๋ฅผ ๊ตฌ์ฑํฉ๋๋ค.
์ฌ์ง์ถ์ฒ : A Quick Look at Types of Grids for Creating Professional Designs
์ผ๋ฐ์ ์ผ๋ก ํ์ดํฌ๊ทธ๋ํผ๋ ํน์ ๋น์จ๋ก ์ฆ๊ฐํ๋ ๊ฐ๋ค๋ก ๊ตฌ์ฑํฉ๋๋ค. ๊ทธ๋์ผ ์ฌ์ฉ์๊ฐ ์ฝํ ์ธ ๋ฅผ ์ฝ์ด๋ด๋ ค๊ฐ ๋ ๊ธ์ด ๋ฆฌ๋ฌ์ ๊ฐ๋๋ค๊ณ ๋ณด๊ธฐ ๋๋ฌธ์ ๋๋ค. ์ด๋ฌํ ๋ชจ๋์ ์ค์ผ์ผ์ ์ปดํฌ๋ํธ ๋์์ธ์๋ ์ ์ฉํ ์ ์์ต๋๋ค. ํน์ ๋น์จ๋ก ์ฆ๊ฐํ๋ ๊ฐ๋ค๋ก ์ปดํฌ๋ํธ์ ์ฌ์ด์ฆ๋ฅผ ๊ตฌ์ฑํด์ ํ๋ฉด ์ ์ฒด์ ๋ฆฌ๋ฌ๊ฐ์ ๊ธฐ์ฌํ ์ ์๊ธฐ ๋๋ฌธ์ ๋๋ค. Modular Scale ๋ฑ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ฉด ์ฆ๊ฐ ๊ฐ๋ค์ ๋น ๋ฅด๊ฒ ์ถ์ถํ ์ ์์ต๋๋ค.
์ฆ๊ฐ ๋น์จ๋ก๋ ์์์ ์๊ฐํ ํฉ๊ธ๋น 1.618
๋ ๋ง์ด ์ฌ์ฉ๋ฉ๋๋ค. ๋ง์ฝ ํฉ๊ธ๋น๋ก ์ฆ๊ฐํ๋ ์ฌ์ด์ฆ ๋ชจ๋์ ๊ตฌ์ฑํ๋ฉด์ 4px ๋ฒ ์ด์ค๋ผ์ธ ๊ทธ๋ฆฌ๋์๋ ๋ง์ถ๊ณ ์ํ๋ค๋ฉด, ์ถ์ถ๋ ๊ฐ ๊ฐ๋ค์ ๊ฐ์ฅ ๊ฐ๊น์ด 4
์ ๋ฐฐ์๋ก ๋ฐ์ฌ๋ฆผํ์ฌ ๊ตฌ์ฑํด๋ณผ ์ ์๊ฒ ์ต๋๋ค. ๊ฐ๋ น 16px
์ ๊ธฐ์ค์ผ๋ก ํฉ๊ธ๋น๋ก ์ฆ๊ฐํ๋ ๊ฐ๋ค์ ์ถ์ถํ๋ฉด 3.78
, 6.11
, 9.89
, 16
, 25.89
, 41.89
, 67.77
, 109.66
, 177.42
์ด๊ณ ์, ์ด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก 4px ๋ฒ ์ด์ค๋ผ์ธ ๊ทธ๋ฆฌ๋์์ ์ฌ์ฉํ ๋ชจ๋ ๊ฐ๋ค์ ๊ตฌ์ฑํ๋ฉด ์๋์ ๊ฐ์ด ํ ์ ์์ต๋๋ค.
:root {
--base-size: 4;
}
:root {
--modular-size-1: calc(var(--base-size) * 1); /* 4 */
--modular-size-2: calc(var(--base-size) * 2); /* 8 */
--modular-size-3: calc(var(--base-size) * 4); /* 16 */
--modular-size-4: calc(var(--base-size) * 6); /* 24 */
--modular-size-5: calc(var(--base-size) * 10); /* 40 */
--modular-size-6: calc(var(--base-size) * 17); /* 68 */
--modular-size-7: calc(var(--base-size) * 27); /* 108 */
--modular-size-8: calc(var(--base-size) * 44); /* 176 */
}
์ดํ ํ์์ ๋ง๊ฒ ๋จ์๋ฅผ ํ์ฐํด ์ฌ์ฉํฉ๋๋ค.
:root {
--box-size-1: calc(var(--modular-size-1) * 1px); /* 4 */
--box-size-2: calc(var(--modular-size-2) * 1px); /* 8 */
--box-size-3: calc(var(--modular-size-3) * 1px); /* 16 */
--box-size-4: calc(var(--modular-size-4) * 1px); /* 24 */
--box-size-5: calc(var(--modular-size-5) * 1px); /* 40 */
--box-size-6: calc(var(--modular-size-6) * 1px); /* 68 */
--box-size-7: calc(var(--modular-size-7) * 1px); /* 108 */
--box-size-8: calc(var(--modular-size-8) * 1px); /* 176 */
}
:root {
--margin-size-1: calc(var(--modular-size-1) / 16rem); /* 0.25rem */
--margin-size-2: calc(var(--modular-size-2) / 16rem); /* 0.5rem */
--margin-size-3: calc(var(--modular-size-3) / 16rem); /* 1rem */
--margin-size-4: calc(var(--modular-size-4) / 16rem); /* 1.5rem */
--margin-size-5: calc(var(--modular-size-5) / 16rem); /* 2.5rem */
--margin-size-6: calc(var(--modular-size-6) / 16rem); /* 4.25rem */
--margin-size-7: calc(var(--modular-size-7) / 16rem); /* 6.75rem */
--margin-size-8: calc(var(--modular-size-8) / 16rem); /* 11rem */
}
์ง๊ธ๊น์ง ํฝ์ ๊ธฐ์ค์ผ๋ก๋ง ์๊ธฐํ์ง๋ง, ๋ชจ๋ ๋๋ฐ์ด์ค์์ ์ผ๊ด๋ ๋ ์ด์์์ ์ ๊ณตํ๊ธฐ ์ํด ๋ฐ์ํ ๊ทธ๋ฆฌ๋๋ฅผ ์ค๊ณํด์ผํฉ๋๋ค. ๋ฐ์ํ ๊ทธ๋ฆฌ๋์์๋ ๋ทฐํฌํธ(Viewport)์ ๋๋น(Width), ๋์ด(Height)์ ๋ฐ๋ผ ์ ์ ํ ์ปฌ๋ผ์ ์, ์ปฌ๋ผ ๋๋น, ๊ฑฐํฐ, ๋ง์ง ๊ฐ์ด ์ ์ฉ๋๋๋ก ๊ตฌ์ฑํฉ๋๋ค. ๋งค๋ ์๋ก์ด ํฌ๊ธฐ์ ๋ทฐํฌํธ๋ค์ด ๋ฑ์ฅํ๊ธฐ ๋๋ฌธ์ ๋ชจ๋ ๋ทฐํฌํธ๋ฅผ ํ๋์ฉ ๋ค๋ฃจ์ง์๊ณ , ๋ทฐํฌํธ์ ๋๋น๋ฅผ ํน์ ๋ฒ์๋ก ๊ทธ๋ฃจํํ Breakpoint ์์คํ ์ ๋ฐ๋ฅธ ๊ทธ๋ฆฌ๋๋ฅผ ๊ตฌ์ฑํ๋ฉด ๋ฉ๋๋ค. ์ฐธ๊ณ ๋ก Adobe์ Spectrum, Google์ Material Design, Bootstrap ๋ฑ ๊ฑฐ์ ๋ชจ๋ ๋์์ธ ๊ฐ์ด๋์์ ์๋ก ๋ค๋ฅธ Breakpoint ์์คํ ์ ์ ์ํ๊ณ ์์ต๋๋ค.
๋ค์์ Material Design์ Breakpoint ์์คํ ์ด๊ณ ์, ๊ฐ ๊ทธ๋ฃน๋ง๋ค ์ ์ ํ ์ปฌ๋ผ์ ์์ ๋ง์ง ๊ฐ์ ๋ํ ๊ฐ์ด๋๋ฅผ ์ป์ ์ ์์ต๋๋ค.
-
ํด๋ํฐ (
600dp
๋ฏธ๋ง) : 4 ์ปฌ๋ผ,16dp
๋ง์ง -
ํ๋ธ๋ฆฟ (
600dp
~904dp
) : 8 ์ปฌ๋ผ,32dp
๋ง์ง -
ํฐ ํ๋ธ๋ฆฟ (
905dp
~1239dp
) : 12 ์ปฌ๋ผ,840dp
๋ฐ๋, Scaling ๋ง์ง -
๋ ธํธ๋ถ (
1240dp
~1439dp
) : 12 ์ปฌ๋ผ,200dp
๋ง์ง -
๋ฐ์คํฌํ (
1440dp
์ด์) : 12 ์ปฌ๋ผ,1040dp
๋ฐ๋, Scaling ๋ง์ง
ํฐ ํ๋ธ๋ฆฟ, ๋ฐ์คํฌํ์ ๊ฒฝ์ฐ, ์ฝํ
์ธ ๊ฐ ๋ด๊ธฐ๋ ๋ฐ๋(Body)์ ํฌ๊ธฐ๋ฅผ 840dp
, 1040dp
๋ก ๊ณ ์ ์ํค๊ณ ๋ง์ง ๊ฐ์ ๋จ๋ ๊ณต๊ฐ์ ์ฑ์ฐ๋๋ก ํ๋ ๊ฒ์ ์ฃผ๋ชฉํด๋ณผ ์ ์์ต๋๋ค. CSS์์๋ ์๋์ ๊ฐ์ด ์ง์ ํ๊ฒ ๋ฉ๋๋ค.
.wrapper {
width: 100%;
max-width: 840px; /* ๋๋ 1040px */
margin-left: auto;
margin-right: auto;
}
์ฃผ์ ๋๋ฐ์ด์ค๋ค์ ๋ทฐํฌํธ ํฌ๊ธฐ๋ค์ด Material Design ๊ฐ์ด๋์์ ๊ฑฐ์ ๋ฒ์ด๋์ง ์์๊ธฐ ๋๋ฌธ์ ์ ๋ Material Design์ ์์คํ
์ ๊ทธ๋๋ก ๋ฐ๋ฅด๊ธฐ๋ก ํ์ต๋๋ค. ๋ค๋ง, ๋
ธํธ๋ถ ๊ธฐ์ค์์ ๋ฒ์ด๋๋ 15" Macbook์ ์ํด ๋ฐ์คํฌํ์ผ๋ก ์๋ณ๋๋ ์ต์๊ฐ์ 1440px
์์ 1441px
๋ก ์์ ํ์ต๋๋ค.
๊ฑฐํฐ์ ๊ฐ์ 16px
, 24px
๊ณผ ๊ฐ์ด 8px ๋ฒ ์ด์ค๋ผ์ธ๊ณผ ๋ง์ ๋จ์ด์ง๊ฒ ํ๋ ๊ฒ์ด ์ผ๋ฐ์ ์ด๊ณ ์, ๋ง์ง๊ณผ ๊ฐ๊ฑฐ๋ ์์ ๊ฐ์ผ๋ก ์ง์ ํฉ๋๋ค. ๋ค์์ Spectrum์์ ๋ฐ์ทํ ๋ด์ฉ์
๋๋ค.
Gutters are the gaps between the columns. Gutter widths are fixed values (16 px, 24 px, etc.) based on breakpoints.
Grid margins are the outer margins of the grid. They can be the same width as the gutters or greater.
๊ฑฐํฐ ๊ฐ ๊ณ์ฐ์ ์ํด Grid Calculator๋ฅผ ์ฌ์ฉํ์๊ณ ์, ๊ฒฐ๊ณผ์ ์ผ๋ก ์ ์ Breakpoint ์์คํ ์ ์๋์ ๊ฐ์ด ์ ๋ฆฌ๋์์ต๋๋ค.
-
ํด๋ํฐ (
600px
๋ฏธ๋ง) : 4 ์ปฌ๋ผ,16px
๋ง์ง,16px
๊ฑฐํฐ -
ํ๋ธ๋ฆฟ (
600px
~904px
) : 8 ์ปฌ๋ผ,32px
๋ง์ง,16px
๊ฑฐํฐ -
ํฐ ํ๋ธ๋ฆฟ (
905px
~1239px
) : 12 ์ปฌ๋ผ, ์๋ ๋ง์ง,840px
๋ฐ๋,16px
๊ฑฐํฐ,44px
ํจ๋ฉ -
๋ ธํธ๋ถ (
1240px
~1440px
) : 12 ์ปฌ๋ผ,200px
๋ง์ง,24px
๊ฑฐํฐ -
๋ฐ์คํฌํ (
1441px
์ด์) : 12 ์ปฌ๋ผ, ์๋ ๋ง์ง,1040px
๋ฐ๋,24px
๊ฑฐํฐ,52px
ํจ๋ฉ
๊ฐ๋ก ๋ฐฉํฅ์ ๊ทธ๋ฆฌ๋๋ ์๋จ์ ์ฑ๋ฐ(App Bar) ์์ญ์ ์ ์ธํ๊ณ ๊ตฌ์ฑํฉ๋๋ค.
์ฌ์ง์ถ์ฒ : Material Design
Figma์์ ๊ทธ๋ฆฌ๋๋ ์ฐ์ธก Design
ํญ์ Layout Grid
์์ญ์์ ์์ฑํ ์ ์์ต๋๋ค. +
๋ฒํผ์ ๋๋ฌ ๊ธฐ๋ณธ ๊ทธ๋ฆฌ๋๋ฅผ ์ถ๊ฐํ ํ, ์ถ๊ฐ๋ ๊ทธ๋ฆฌ๋์ ์ผ์ชฝ ์์ด์ฝ์ ํด๋ฆญํ๋ฉด ๊ทธ๋ฆฌ๋๋ฅผ ์ค์ ํ ์ ์๋ ์์ญ์ด ์๊น๋๋ค.
๊ทธ๋ค์ ๊ฐ์ฅ ์๋จ์์ ๊ทธ๋ฆฌ๋ ์ข
๋ฅ๋ฅผ Columns
๋ก ๋ณ๊ฒฝํฉ๋๋ค.
๊ทธ๋ค์ Count
, Margin
, Gutter
๊ฐ์ ์ง์ ํด์ฃผ๋ฉด ๋ฉ๋๋ค.
๊ทธ๋ฆฌ๋ ์์ฑ์ด ์๋ฃ๋์์ผ๋ฉด, ์๋์ ๊ฐ์ด Styles
๋ฒํผ์ ํด๋ฆญํ์ฌ ๋ชจ๋ ์์ญ์ ์ด๊ณ , +
๋ฒํผ์ ํด๋ฆญํ์ฌ ์๋ก์ด ๋ชจ๋๋ก ์ถ๊ฐํด์ค๋๋ค.
๋ฐ๋ ์์ญ์ ํฌ๊ธฐ๊ฐ 840px
, 1040px
๋ก ๊ณ ์ ๋ ๊ทธ๋ฃน์ ๊ฒฝ์ฐ, 2๊ฐ์ ์ปฌ๋ผ ๊ทธ๋ฆฌ๋๋ฅผ ํจ๊ป ์ฌ์ฉํฉ๋๋ค.
์ปฌ๋ผ ๊ทธ๋ฆฌ๋๊ฐ 2๊ฐ ํ์ํ ์ด์ ๋ ๊ณ ์ ๋ ๋ฐ๋ ์์ญ์ ํ์ํ๊ธฐ ์ํจ์
๋๋ค. ์ปฌ๋ผ ์ 1
, ์ปฌ๋ผ ํ์
Center
, ์ปฌ๋ผ ๋๋น 840
/1040
, ๊ฑฐํฐ 0
์ ์ ํํ์ฌ 1๊ฐ์ ์ปฌ๋ผ ๊ทธ๋ฆฌ๋๋ฅผ ์ถ๊ฐ๋ก ์ฌ์ฉํ๋๊ฑฐ์ฃ . ๋ฐ๋ ์์ญ์ด ์ด๋ค ํ๋ ์์์๋ ์ค์์ ์ ๋ ฌ๋๋๋ก 2๊ฐ์ ๊ทธ๋ฆฌ๋ ๋ชจ๋ ์ปฌ๋ผ ํ์
์ Center
๋ก ์ ํํ๊ณ ์ปฌ๋ผ์ ๊ณ ์ ๋ ๋๋น ๊ฐ์ ์ง์ ํด์ค๋๋ค.
๊ทธ๋ค์ ์ด 2๊ฐ์ ์ปฌ๋ผ ๊ทธ๋ฆฌ๋๋ฅผ ๋ฌถ์ด 1๊ฐ์ ๊ทธ๋ฆฌ๋ ๋ชจ๋๋ก ์ถ๊ฐํด์ค๋๋ค.
๊ฐ์ ๋ฐฉ์์ผ๋ก 5๊ฐ ๊ทธ๋ฃน์ ๋ํ ๊ธฐ๋ณธ ๊ทธ๋ฆฌ๋ ๋ชจ๋์ ๊ฐ๊ฐ ์ถ๊ฐํ์๊ณ ์, ๊ฐ ๊ทธ๋ฃน์ ๊ธฐ๋ณธ ๊ทธ๋ฆฌ๋์์ ํ์ฅ๋ ์ปฌ๋ผ ๊ทธ๋ฆฌ๋๋ค์ ์ถ๊ฐํ ์ ์์ต๋๋ค. ์ปฌ๋ผ์ ์๋ฅผ ๋ค๋ฅด๊ฒ ํ์ฌ ๋์์ธ ์์ ์ ํ ๋ ๋น ๋ฅด๊ฒ ๋์์ ๋ฐ์ ์ ์์ฃ . ์ด๋ ๊ธฐ๋ณธ ์ปฌ๋ผ ๊ทธ๋ฆฌ๋์ ๋ง์ ๋จ์ด์ง๋ ์ปฌ๋ผ ์๋ฅผ ์ฌ์ฉํด์ผํฉ๋๋ค. ์๋ฅผ ๋ค์ด 8 ์ปฌ๋ผ ๊ทธ๋ฆฌ๋๋ฅผ ์ฌ์ฉํ๋ ๊ทธ๋ฃน์์๋ 2 ์ปฌ๋ผ, 4 ์ปฌ๋ผ ๊ทธ๋ฆฌ๋๋ฅผ ํจ๊ป ์ฌ์ฉํ ์ ์์ง๋ง, 3 ๋๋ 6 ์ปฌ๋ผ์ผ๋ก ๋๋์์ ๋๋ ๊ธฐ๋ณธ์ด ๋๋ 8 ์ปฌ๋ผ ๊ทธ๋ฆฌ๋์ ๋ง์๋จ์ด์ง์ง ์๊ธฐ ๋๋ฌธ์ ์ ํฉํ์ง ์์ต๋๋ค.
...
Figma์์ ๊ทธ๋ฆฌ๋ ์์คํ ์ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ์ ๋ํ ์์ธํ ๋ด์ฉ์ Figma ๊ณต์ ํํ์ด์ง์์ Create layout grids with grids, columns, and rows, Our grid pro quo: Everything you need to know about layout grids in Figma ์ํฐํด์ ํ์ธํ์ธ์.
- Understanding layout | Material Design
- Adaptivity and Layout | Human Interface Guidelines
- Responsive grid | Spectrum
- Our grid pro quo: Everything you need to know about layout grids in Figma
- A Quick Look at Types of Grids for Creating Professional Designs
- Pixel | Wikipedia
- CSS pixel | MDN
- Absolute Lengths: the cm, mm, Q, in, pt, pc, px units | W3C Editor's Draft
- CSS Length Explained
- ํฝ์ ๊ณผ ํฌ์ธํธ | Spoqa ๊ธฐ์ ๋ธ๋ก๊ทธ
- Point vs Pixel: What is the difference? | StackExchange
- CSS Box Model | W3C Schools
- Window.devicePixelRatio | MDN
- Baseline grids | Figma
- Baseline grids & design systems
- Goodbye 8-point grid, hello 4-point grid?
- Why weโre using a 4-point grid in Webflow
- The 8-Point Grid | Spec.fm
- A framework for creating a predictable & harmonious spacing system for faster design-dev handoff
- Comprehensive Guide: When to Use Em vs. Rem
- ๋์์ธ ์์คํ ๊ตฌ์ถํ๊ธฐ 3๋ถ : ํฌ๊ธฐ์ ๊ฐ๊ฒฉ
- 1px ๋ณด๋ค ์์ ๋์์ธ โ ๋ผ์ธ ํธ