Design System
๋น์ฃผ์ผ ์์ด๋ดํฐํฐ
& ์ํคํ
์ฒ
ํจ๋ํ๋ ๋จ์ํ ํจ์ ๋ ์ด๋ธ์ด ์๋๋๋ค. ์ฐ๋ฆฌ๋ ์ฌ์ฑ๋ณต ์์ง๋์ด๋ง ํ์ฐ์ค์ ๋๋ค.
์ฐ๋ฆฌ๋ ์ํํธ์จ์ด ์ํคํ ์ฒ์ ๊ธฐ๊ณ ๊ณตํ์ ์๊ฒฉํจ์ ์๋ฅ์ ๋๋ ์ดํ, ๊ตฌ์กฐ, ์๋ช ์ฃผ๊ธฐ์ ์ ์ฉํฉ๋๋ค. ์ฐ๋ฆฌ์ ๋น์ฃผ์ผ ์์ด๋ดํฐํฐ๋ ์ด๋ฌํ ์ด์ค์ฑ์ ๋ฐ์ํด์ผ ํฉ๋๋ค. ์ ๋ฐํ๋ฉด์๋ ์ฐ์ํ๊ณ , ์ฒด๊ณ์ ์ด๋ฉด์๋ ๊น์ด ์ธ๊ฐ์ ์ ๋๋ค.
๋ชจ๋ ์์ , ์์, ํ์ดํฌ๊ทธ๋ํผ ์ ํ์ ํ์ฅ ๊ฐ๋ฅํ ๋๊ท๋ชจ ๋์์ธ ์์คํ ์ ์๋์ ์ธ ๊ตฌ์ฑ ์์์ ๋๋ค. ๋ธ๋๋๋ ์๋ฆฌ์น์ง ์์ต๋๋ค. ์ธ์ฌํ ์คํ์ ํตํด ์กฐ์ฉํ ์์ ๊ฐ์ ๋ณด์ฌ์ค๋๋ค.
02. ๋ก๊ณ ์์คํ
๊ฐ๋กํ ์๋๋งํฌ
๋ค๋น๊ฒ์ด์ ๋ฐ, ํค๋ ๋ฐ ๋์ ํฌ๋งท์ ์ํ ๊ธฐ๋ณธ ๋ก๊ณ ์ ๋๋ค.
์ ๋ฐฉํ / ํ๋กํ ๋ก๊ณ ๋งํฌ
์์ ๋ฏธ๋์ด ์๋ฐํ, ํ๋กํ ์ฌ์ง ๋ฐ ์ ๋ฐฉํ ์ ์ฝ ์กฐ๊ฑด์ ์ต์ ํ๋์์ต๋๋ค.
ํ๋น์ฝ / ๋ง์ดํฌ๋ก
๋ธ๋ผ์ฐ์ ํญ, ์ฑ ์์ด์ฝ ๋ฐ ๊ทน์ํ ์ฌ์ฉ(16px - 32px) ์ ์ฉ์ ๋๋ค.
03. ์ต์ ์ฌ๋ฐฑ ๋ฐ ํฌ๊ธฐ
์ต์ ์ฌ๋ฐฑ (Clear Space)
๊ฐ๋ ์ฑ๊ณผ ์ํฉํธ๋ฅผ ๋ณด์ฅํ๊ธฐ ์ํด ๋ก๊ณ ์ฃผ๋ณ์๋ ํญ์ ์ต์ํ์ ์ฌ๋ฐฑ์ด ์์ด์ผ ํฉ๋๋ค. ์ด ์ฌ๋ฐฑ์ ์๋๋งํฌ์ ์๋ฌธ์ "k" ๋์ด๋ก ์ ์๋ฉ๋๋ค.
์ต์ ํฌ๊ธฐ (Minimum Size)
ํด์๋์ ๊ฐ๋ ์ฑ์ ์ ์งํ๊ธฐ ์ํด ์๋๋งํฌ๋ ์ธ์ ๋ฐ ๋์งํธ ๋งค์ฒด์์ ์๋ ์ง์ ๋ ์น์๋ณด๋ค ์๊ฒ ํ์๋์ด์๋ ์ ๋ฉ๋๋ค.
04. ์ค์ฉ ์ฌ๋ก
ํจ๋ํ ๋ก๊ณ ๋ ๋ธ๋๋ ๋ฌด๊ฒฐ์ฑ์ ์ ์งํ๊ธฐ ์ํด ์ผ๊ด๋๊ฒ ์ฌ์ฉ๋์ด์ผ ํฉ๋๋ค. ๋ก๊ณ ๋ฅผ ์ด๋ ํ ๋ฐฉ์์ผ๋ก๋ ๋ณ๊ฒฝ, ์๊ณก ๋๋ ์์ ํ์ง ๋ง์ญ์์ค. ์๋๋ ์ค์ฉ ์ฌ๋ก์ ๋๋ค.
Incorrect Usage
Incorrect Usage
Incorrect Usage
Incorrect Usage
Incorrect Usage
Incorrect Usage
05. ์ปฌ๋ฌ ์ํคํ ์ฒ
์ฐ๋ฆฌ์ ์ปฌ๋ฌ ์์คํ ์ CSS ์ํคํ ์ฒ์ ์ง์ ๋งคํ๋ฉ๋๋ค. ์ต์๋์ธ๊ณผ ๋ก์ฐ ์คํฌ ์ฌ์ด์ ๊ทน๋ช ํ ๋๋น์ ์์กดํ์ฌ ๊ตฌ์กฐ๋ฅผ ๋ง๋ค๊ณ , ์๋งจํฑ ์ปฌ๋ฌ๋ ๊ธฐ๋ฅ์ ํผ๋๋ฐฑ์ ์ํด์๋ง ์๊ฒฉํ๊ฒ ์ ์ฉ๋ฉ๋๋ค.
ํ์ด๋ฐ์ด์ ํ๋ ํธ
Obsidian
--color-bg-primary์ฃผ ๋ฐฐ๊ฒฝ / ๊ธฐ๋ณธ ๊ตฌ์กฐ
HEX
#0c080a
RGB
12, 8, 10
Raw Silk
--color-text-primary์ฃผ์ ํ ์คํธ / ๋ฐ์ ๋ฐฐ๊ฒฝ
HEX
#f4ece6
RGB
244, 236, 230
Rose Dust
--color-accent๋ธ๋๋ ๊ฐ์กฐ / ์ธํฐ๋ํฐ๋ธ ์์
HEX
#cda49f
RGB
205, 164, 159
๊ตฌ์กฐ์ ํ๋ ํธ
Carbon Thread
--color-surface์์ ํ๋ฉด / ์นด๋ / ๋ชจ๋ฌ ๋ฐฐ๊ฒฝ
HEX
#1a1618
RGB
26, 22, 24
Pattern Paper
--color-text-secondary๋ณด์กฐ ํ ์คํธ / ์ฐจ๋ถํ ๋ฐฐ๊ฒฝ
HEX
#e6ddd7
RGB
230, 221, 215
Steel Pin
--color-borderํ ๋๋ฆฌ / ๊ตฌ๋ถ์ / ๋นํ์ฑ ์ํ
HEX
#4a4548
RGB
74, 69, 72
์๋งจํฑ ๋ฐ ํผ๋๋ฐฑ ํ๋ ํธ
Cochineal
--color-error
์ญ์ ์ก์ / ์ค๋ฅ (์ฝ์น๋ ๋ ๋)
Verdigris
--color-success
๊ฒ์ฆ ์๋ฃ / ์ฑ๊ณต (์ฐํ๋ ๊ทธ๋ฆฐ)
Brass
--color-warning
๊ฒฝ๊ณ / ๋๊ธฐ ์ํ
06. ํ์ดํฌ๊ทธ๋ํผ
์ฐ๋ฆฌ์ ํ์ดํฌ๊ทธ๋ํผ ์์คํ ์ ๋ฌธํ์ , ์๊ฐ์ ๋ฌด๊ฒฐ์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด ์ธ์ด๋ณ๋ก ์๊ฒฉํ๊ฒ ๋ถ๋ฆฌ๋์ด ์์ต๋๋ค. ์ธ์ด๋ฅผ ์ ํํ์ฌ ํด๋น ํ์ดํฌ๊ทธ๋ํผ ๊ฐ์ด๋๋ฅผ ํ์ธํ์ธ์.
Noto Serif KR
Primary / Display / Headings
Weights: Light (300), Regular (400)
๋ฅํ ํฌ์ ๊ต์ฐจ์ .
์ฐ์ํจ์ด๋ ๋์ ๋๋ ๊ฒ์ด ์๋๋ผ, ๊ธฐ์ต์ ๋จ๋ ๊ฒ์ด๋ค.
Pretendard
Secondary / Body / UI
Weights: Light (300), Regular (400), Medium (500)
๊ธด ๊ธ ์ฝ๊ธฐ, ๋จ๋ฝ ๋ฐ ๊ธฐ๋ฅ์ UI ์์์ ์ฌ์ฉ๋ฉ๋๋ค. ํํ๋ ฅ์ด ํ๋ถํ ์ธ๋ฆฌํ์ฒด์ ๋๋น๋์ด ๋ช ํ์ฑ๊ณผ ํ๋์ ์ธ ์ค๋ฆฝ์ฑ์ ์ ๊ณตํฉ๋๋ค.
ํจ๋ํ๋ ๊ตฌ์กฐ์ ์ ๋ฐํจ๊ณผ ์์ฌ์ ํ์ ์ ํตํด ์ฌ์ฑ๋ณต์ ์ฌ์ ์ํ๋ ์์ง๋์ด๋ง ํ์ฐ์ค์ ๋๋ค.
JetBrains Mono
Numerals / Data / Code
Weights: Light (300), Regular (400)
๋ธ๋๋์ ์์ง๋์ด๋ง ์ธก๋ฉด์ ๊ฐ์กฐํ๊ธฐ ์ํด ๊ธฐ์ ๋ฐ์ดํฐ, ์น์ ๋ฐ ์ ๋ฐํ ์์น ์ ๋ณด์ ์ฌ์ฉ๋ฉ๋๋ค.
0 1 2 3 4 5 6 7 8 9 & @ # % * ! ?
๋ง์ดํฌ๋ก ํ์ดํฌ๊ทธ๋ํผ ๋ฐ ์ค์ผ์ผ
Display 1
Display 2
Heading 1
Body Large
Body Regular
์๊ฐ์ ์ฌ๋ฐฑ ์ ๋ ฌ
๋ฐ์ดํ๋ ํ์ดํ ๊ฐ์ ๋ฌธ์ฅ ๋ถํธ๋ ํ ์คํธ ๋ธ๋ก ๋ฐ๊นฅ์ผ๋ก ๋ด์ด์ฐ๊ธฐ(Hanging punctuation)ํ์ฌ ์๋ฒฝํ ์์ง ์ฌ๋ฐฑ์ ์ ์งํด์ผ ํฉ๋๋ค.
์ธ์ด๋ณ ํน์ ๊ท์น
์๋์ด๋ ๋ณต์กํ ์ด์ผ๋๋ฅผ ์์ฉํ๊ธฐ ์ํด 15-20% ๋ ๋์ ์ค ๊ฐ๊ฒฉ์ด ํ์ํฉ๋๋ค. ํ์ค์ผ(CJK) ํฐํธ๋ ๋ผํด ๋ฌธ์๋ณด๋ค ์ฝ๊ฐ ๋ ๋์ ์๊ฐ์ด ํ์ํฉ๋๋ค.
07. ํฐํธ ํผ์ฉ ๋ฒ์น
"ํจ๋ํ ํ์ดํฌ๊ทธ๋ํผ ๋ฐฉ์ ์"์ ์คํธ ์ฟ ํ๋ฅด(์ธ๋ฆฌํ)์ ๋ฅํ ํฌ(์ฐ์ธ๋ฆฌํ)๋ผ๋ ์ฐ๋ฆฌ์ ์ด์ค์ฑ์ ์๊ฐ์ ์ผ๋ก ํํํ๊ธฐ ์ํด ์ธ๋ฆฌํ์ ์ฐ์ธ๋ฆฌํ์ ์๋์ ์ธ ํผ์ฉ์ ์ ๊ทน ํ์ฉํฉ๋๋ค.
๋ฒ์น 01: ์๋ํ ๋ฆฌ์ผ ํผ์ฉ (์ ๋ชฉ)
๋์คํ๋ ์ด ๋ฐ ์ ๋ชฉ(Heading)์์๋ ์ฐ์ธ๋ฆฌํ(๋๋ฌธ์)์ ์ธ๋ฆฌํ ์ดํค๋ฆญ์ ์ ๊ทน์ ์ผ๋ก ํผ์ฉํ์ฌ ๊ฐ๋ ฌํ๊ณ ๊ณ ๊ธ์ค๋ฌ์ด ์๋ํ ๋ฆฌ์ผ ๋ฃฉ์ ์ฐ์ถํฉ๋๋ค.
The Blueprint of Fashion
Correct (Display Mixing)
๋ฒ์น 02: ๋ณธ๋ฌธ ํ ์คํธ์ ๊ฐ์กฐ
๋ณธ๋ฌธ(Body) ํ ์คํธ๋ ๊ฐ๋ ์ฑ์ ์ํด ์ฐ์ธ๋ฆฌํ๋ฅผ ๊ธฐ๋ณธ์ผ๋ก ํ์ง๋ง, ๋จ๋ฝ ๋ด์์ ํต์ฌ ์ฉ์ด๋ ๊ฐ๋ ์ ๊ฐ์กฐํ ๋๋ ์ธ๋ฆฌํ ์ดํค๋ฆญ(๋๋ ์ค๋ธ๋ฆฌํฌ)๊ณผ ๋ธ๋๋ ๊ฐ์กฐ์์ ํผ์ฉํฉ๋๋ค.
Kyndof is an engineering house.
Correct (Body Emphasis)
๋ฒ์น 03: ์ ๋๋ฒ์ค ์ค๋ธ๋ฆฌํฌ (์ดํค๋ฆญ์ ์ฌ์ ์)
์ ํต์ ์ธ CJK(ํ์ค์ผ) ํ์ดํฌ๊ทธ๋ํผ๋ ์ดํค๋ฆญ์ ๊ธฐํผํ์ง๋ง, ํจ๋ํ๋ ๋น๋ผํด ๋ฌธ์์ ์ ๋ฐํ๊ฒ ๊ณ์ฐ๋ ๊ธฐ์ธ๊ธฐ(Oblique)๋ฅผ ์๋์ ์ผ๋ก ์ ์ฉํฉ๋๋ค. ์ด๋ฌํ ์์ง๋์ด๋ง์ ์ ๊ทผ์ ๋ชจ๋ ๊ธ๋ก๋ฒ ์ธ์ด์์ ํํํ์ง ์๋ ํต์ผ๋ ์๊ฐ์ ์ ์ฒด์ฑ์ ๋ณด์ฅํฉ๋๋ค.
ํจ์ ์ ๋ธ๋ฃจํ๋ฆฐํธ.
Correct (Engineered Oblique)
08. ํค ์ค ๋งค๋
์ ๋ฐํ๊ณ ํ๊ตฌ์ ์ธ
์ฐ๋ฆฌ๋ ์์ง๋์ด์ ๊ถ์์ ์ฟ ํ๋ฆฌ์์ ์ธ๋ จ๋จ์ผ๋ก ๋งํฉ๋๋ค. ๊ณผ์ฅ, ๋ง์ผํ ์์ฌ, ์ง๋์น๊ฒ ๊ฐ์ ์ ์ธ ์ธ์ด๋ ํผํฉ๋๋ค. ์ฌ์ค, ๋ฐฉ๋ฒ๋ก , ๊ฒฐ๊ณผ๋ฅผ ๋ช ํํ๊ฒ ์์ ํฉ๋๋ค.
"๊ตฌ์กฐ์ ์๋ช ์ ์ํด ์์ง๋์ด๋ง ๋์์ต๋๋ค."
ํํํ์ง ์๋
์ฐ๋ฆฌ์ ์ด์กฐ๋ ์ฐ๋ฆฌ์ ๊ธฐ์ค์ ๋ฐ์ํฉ๋๋ค. ์ฐ๋ฆฌ๋ ๋ณต์ก์ฑ์ ๋ํด ์ฌ๊ณผํ์ง ์๊ณ , ๊ทธ๊ฒ์ ์กฐ๋ช ํฉ๋๋ค. ์ฐ๋ฆฌ๋ ์ฒญ์ค์ ์ง์ฑ์ ์กด์คํ๋ฉฐ ์กฐ์ฉํ๊ณ ์ ๋์ ์ธ ์์ ๊ฐ์ผ๋ก ํ์ ์ ์ ์ํฉ๋๋ค.
"๋น์ ์ด ์ ์ด๋ณผ ๊ฐ์ฅ ์๋ฆ๋ค์ด ๋๋ ์ค!"