Design System

์‚ฌ์šฉ์ž์˜ ๋””๋ฐ”์ด์Šค ํฌ๊ธฐ์— ๋”ฐ ์œ ๋™์ ์œผ๋กœ ๋ณ€๊ฒฝ๋˜๋Š” ์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ ๋Š” ์ ‘๊ทผ ๋ฐฉ์‹

CSS ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ, ๋””๋ฐ”์ด์Šค ํฌ๊ธฐ์— ๋”ฐ๋ผ ํ™”๋ฉด์˜ ๋ ˆ์ด์•„์›ƒ๊ณผ ์Šคํƒ€์ผ์„ ์กฐ์ •ํ•˜์—ฌ ๋ฐ˜์‘ํ˜• ์›น์„ ๊ตฌํ˜„ํ•œ๋‹ค.

Media Query

๋ฏธ๋””์–ด ํƒ€์ž…, ๋””๋ฐ”์ด์Šค ํ™”๋ฉด ๋„ˆ๋น„, ๋””๋ฐ”์ด์Šค ๋ฐฉํ–ฅ(๊ฐ€๋กœ ๋ชจ๋“œ) ๋“ฑ ๋‹ค์–‘ํ•œ ์กฐ๊ฑด์— ๋”ฐ๋ผ ์Šคํƒ€์ผ์„ ๋‹ค๋ฅด๊ฒŒ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

@media screen and (min-width: 767px) {
/* screen: ํ™”๋ฉด์ด ์žˆ๋Š” ๊ธฐ๊ธฐ๋ฅผ ์˜๋ฏธ (๋ชจ๋ฐ”์ผ, ํƒœ๋ธ”๋ฆฟ, ๋ฐ์Šคํฌํƒ‘), default๊ฐ€ screen ์ด๋ฏ€๋กœ ์ƒ๋žต ๊ฐ€๋Šฅ */
/* min-width: ์ตœ์†Œ ๋„ˆ๋น„ ์ง€์ •, 767px๋ณด๋‹ค ๋„“์€ ๊ธฐ๊ธฐ๋ฅผ ๋Œ€์ƒ์œผ๋กœ ์Šคํƒ€์ผ ์ ์šฉ */
}

@media screen and (orientation: landscape) {
/* orientation: ๊ฐ€๋กœ๋ชจ๋“œ๋ฅผ ์‹๋ณ„ํ•  ์ˆ˜ ์žˆ๋‹ค. landscape(๊ฐ€๋กœ๋ชจ๋“œ), portrait(์„ธ๋กœ๋ชจ๋“œ) */
}

@media print {
/* print: ํ”„๋ฆฐํŠธ ์ถœ๋ ฅ๋ฌผ์˜ ์Šคํƒ€์ผ์„ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. */
}

Mobile First

์ž‘์€ ํ™”๋ฉด์˜ ๋ชจ๋ฐ”์ผ ๊ธฐ๊ธฐ๋ฅผ ์šฐ์„ ์ ์œผ๋กœ ๊ณ ๋ คํ•˜์—ฌ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋””์ž์ธํ•˜๊ณ  ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐฉ์‹

๋ชจ๋ฐ”์ผ ๊ธฐ๊ธฐ์˜ ์ž‘์€ ํ™”๋ฉด์„ ๋จผ์ € ์ž‘์—…ํ•˜๊ณ , ์ ์ง„์ ์œผ๋กœ ๋” ํฐ ํ™”๋ฉด ํฌ๊ธฐ์— ๋งž๊ฒŒ ๋””์ž์ธ๊ณผ ๊ธฐ๋Šฅ์„ ํ™•์žฅํ•ด ๋‚˜๊ฐ„๋‹ค.

์™œ ๋ชจ๋ฐ”์ผ์„ ์šฐ์„ ์ ์œผ๋กœ ๊ณ ๋ คํ•ด์•ผํ• ๊นŒ?

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

  • ๋ชจ๋ฐ”์ผ ์ด์šฉ์ž ์ˆ˜๊ฐ€ ํ›จ์”ฌ ๋งŽ๊ธฐ ๋•Œ๋ฌธ์— ๋ชจ๋ฐ”์ผ ์นœํ™”์ ์ธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“œ๋Š”๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค.

  • ๊ธฐ๋Šฅ์„ ๋‹จ๊ณ„์ ์œผ๋กœ ํ™•์žฅํ•˜๋Š” ๊ฒƒ์ด ์ƒ๋Œ€์ ์œผ๋กœ ๋” ์‰ฝ๋‹ค.

Layout Grid

์ผ๊ด€๋˜๊ณ  ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ๊ฐ„๊ฒฉ์€ ๊ฐœ๋ฐœ ๋ฐ ๋””์ž์ธ์—์„œ ์ถ”์ธก์„ ์—†์• ๋Š”๋ฐ ๋„์›€์ด ๋œ๋‹ค.

8pt Grid

  • ๊ฐ€์žฅ ์ผ๋ฐ˜์ ์œผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ๋ ˆ์ด์•„์›ƒ ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ

  • ๋””์ž์ธ ๋‚ด๋ถ€ ์š”์†Œ์— 8์˜ ๋ฐฐ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ„๊ฒฉ, ํŒจ๋”ฉ ๊ฐ’์„ ์ง€์ •ํ•˜๋Š” ๊ฒƒ

  • 8๊ณผ ๊ฐ™์€ ์ง์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋””์ž์ธ์— ๊ณต๋ฐฑ์„ ๋‘๊ณ  ์š”์†Œ์˜ ํฌ๊ธฐ๋ฅผ ์ง€์ •ํ•˜๋ฉด ๊น”๋”ํ•˜๊ณ  ์ผ๊ด€์„ฑ์žˆ๊ฒŒ ํ™•์žฅ ๊ฐ€๋Šฅ

ํฌ์ธํŠธ(pt)๋ž€ ํ™”๋ฉด ํ•ด์ƒ๋„์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง€๋Š” ๊ณต๊ฐ„ ์ธก์ • ๋‹จ์œ„

@1x ํ•ด์ƒ๋„๋Š” 1pt โ†’ 1px, retina(@2x) 1ptโ†’ 2px, @3x 1pt โ†’ 3px

Retina Display๋ž€ ์• ํ”Œ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋””์Šคํ”Œ๋ ˆ์ด ๊ธฐ์ˆ ๋กœ, ๊ณ ๋ฐ€๋„ ํ™”์†Œ(px)์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ณด๋‹ค ๋” ์„ ๋ช…ํ•˜๊ณ  ๋ถ€๋“œ๋Ÿฌ์šด ํ™”๋ฉด์„ ํ‘œ์‹œํ•œ๋‹ค.

๋””์ž์ธ ์‹œ์Šคํ…œ(Design System)

์ œํ’ˆ์„ ๋งŒ๋“ค๋ฉด์„œ ์‚ฌ์šฉํ•˜๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋””์ž์ธ ์š”์†Œ๋“ค์„ ๋ชจ์•„๋‘” ์‹œ์Šคํ…œ ๋˜๋Š” ์›์น™์œผ๋กœ ์ œํ’ˆ์„ ํšจ์œจ์ ์ด๊ณ  ์ผ๊ด€๋˜๊ฒŒ ๋””์ž์ธ ๋ฐ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•๋Š”๋‹ค.

  • SSOT(Single Source Of Truth, ๋‹จ์ผ ์ง„์‹ค ์›์ฒœ)๋ฅผ ํ•ต์‹ฌ ๊ฐœ๋…์œผ๋กœ ์‚ผ๋Š”๋‹ค.

  • ๋””์ž์ธ ์‹œ์Šคํ…œ์€ ๊ฐœ๋ฐœ์ž์™€ ๋””์ž์ด๋„ˆ๊ฐ„ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์˜ ์ดํ•ด๋„๋ฅผ ๋†’ํžˆ๋Š” ํ˜‘์—… ๋„๊ตฌ๋กœ, ์—…๋ฌด ์ƒ์‚ฐ์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚จ๋‹ค.

  • ๊ฐœ๋ฐœ์ž์™€ ๋””์ž์ด๋„ˆ, ์„œ๋กœ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ๊ณตํ†ต๋œ ์šฉ์–ด๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

  • ์žฌ์‚ฌ์šฉ์ด ์‰ฌ์›Œ์•ผ ํ•˜๋ฉฐ, ๊ฐœ๋ฐœ์ž์™€ ๋””์ž์ด๋„ˆ์˜ ์—…๋ฌด ํšจ์œจ์„ฑ์— ํฐ ๋„์›€์ด ๋˜์–ด์•ผ ํ•œ๋‹ค.

SSOT๋ž€ ๋ฐ์ดํ„ฐ์˜ ์œ ์ผํ•œ ์ถœ์ฒ˜๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ, ๋ชจ๋“  ์‚ฌ์šฉ์ž๊ฐ€ ๋™์ผํ•œ ์ •๋ณด์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธ

๊ฐœ๋ฐœ์ž์—๊ฒŒ ์œ ์šฉํ•œ ํœด๋ฆฌ์Šคํ‹ฑ

  • ํ•˜๋‚˜์˜ UI ํŒจํ„ด์ด 3ํšŒ ์ด์ƒ ์‚ฌ์šฉ๋˜๋Š” ๊ฒฝ์šฐ, ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ UI ์ปดํฌ๋„ŒํŠธ๋กœ ๊ฐ„์ฃผํ•ฉ๋‹ˆ๋‹ค.

  • ํ•˜๋‚˜์˜ UI ์ปดํฌ๋„ŒํŠธ๊ฐ€ 3๊ฐœ ์ด์ƒ์˜ ํ”„๋กœ์ ํŠธ/ํŒ€์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๊ฒฝ์šฐ, ๋””์ž์ธ ์‹œ์Šคํ…œ์— ํฌํ•จ์‹œํ‚ต๋‹ˆ๋‹ค.

๋””์ž์ธ ์‹œ์Šคํ…œ ์š”์†Œ

  • Brand Identity โ†’ ์กฐ์ง์˜ ๋ธŒ๋žœ๋“œ๋ฅผ ๋Œ€ํ‘œํ•˜๋Š” ์‹œ๊ฐ์  ์š”์†Œ์˜ ์ง‘ํ•ฉ ์ƒ‰์ƒ, ํฐํŠธ, ๋กœ๊ณ  ๋“ฑ์˜ ์‹œ๊ฐ์  ์š”์†Œ์™€ ๋ธŒ๋žœ๋“œ์˜ ๋ชฉํ‘œ์™€ ๊ฐ€์น˜ ๋“ฑ์„ ๋ฐ˜์˜ํ•˜๋Š” ์š”์†Œ๋“ค์„ ํฌํ•จํ•œ๋‹ค.

  • Component & Pattern โ†’ UI์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋ฒ„ํŠผ, ํผ ๋“ฑ์˜ ์š”์†Œ(์ปดํฌ๋„ŒํŠธ)๋Š” ์ผ๊ด€์„ฑ ์žˆ๊ฒŒ ๋””์ž์ธ๋˜์–ด์•ผ ํ•˜๋ฉฐ ๊ทธ๊ฒƒ๋“ค์˜ ์กฐํ•ฉ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ผ๊ด€์„ฑ์ด ์žˆ์–ด์•ผ ํ•œ๋‹ค.

CTA(Call To Action) โ†’ ์‚ฌ์šฉ์ž์˜ ํŠน์ • ํ–‰๋™์„ ์œ ๋„ํ•˜๋Š” ๋””์ž์ธ ์š”์†Œ

์‚ฌ์šฉ์ž์˜ ๊ด€์‹ฌ์„ ๋Œ๊ณ  ๊ธฐ์—…์˜ ๋ชฉํ‘œ๋ฅผ ๋‹ฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ ๋™์ž‘์„ ์œ ๋„ํ•˜๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

๋””์ž์ธ ์‹œ์Šคํ…œ์—์„œ CTA์˜ ์ƒ‰์ƒ, ์œ„์น˜, ํฌ๊ธฐ ๋“ฑ์˜ ์Šคํƒ€์ผ์„ ์กฐ์ ˆํ•˜์—ฌ ์‚ฌ์šฉ์ž๊ฐ€ ์‰ฝ๊ฒŒ ์ธ์‹ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค.

Atomic Design

UI ๋””์ž์ธ์„ ์ž‘์€ ์š”์†Œ๋กœ ๋ถ„ํ•ดํ•˜์—ฌ ๊ด€๋ฆฌํ•˜๋Š” ๋””์ž์ธ ์‹œ์Šคํ…œ์„ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•๋ก 

  • Atoms(์›์ž) โ†’ ์ƒ‰์ƒ ํŒ”๋ ˆํŠธ, ๊ธ€๊ผด, ์‚ฌ์ด์ฆˆ, ์ปดํฌ๋„ŒํŠธ(๋ฒ„ํŠผ, ํผ) ๋ฐ ๋‹ค๋ฅธ ์›์ž์™€ ์กฐํ•ฉํ•ด์„œ ๋ถ„์ž๋ฅผ ๋งŒ๋“œ๋Š” ๋ชจ๋“  ์š”์†Œ๊ฐ€ ํฌํ•จ๋จ

  • Molecules(๋ถ„์ž) โ†’ ์›์ž๋ฅผ ์กฐํ•ฉํ•ด์„œ ๋งŒ๋“  ๋‹จ์ˆœํ•œ ์กฐ๊ฐ, ๋ ˆ์ด๋ธ”์ด ํฌํ•จ๋œ ์ž…๋ ฅํผ, ์ œ๋ชฉํ–‰์ด ์žˆ๋Š” ํ…Œ์ด๋ธ” ๋“ฑ

  • Organisms(์œ ๊ธฐ์ฒด) โ†’ ๋ถ„์ž๋“ค์„ ๊ฒฐํ•ฉํ•ด ๋””์ž์ธ ์š”์†Œ๋“ค ๊ฐ„์˜ ์ƒํ˜ธ ์ž‘์šฉ์ด ์ผ์–ด๋‚˜๊ธฐ ์‹œ์ž‘ํ•˜๋Š” ์ง€์ , ๊ฒ€์ƒ‰ ํ•„๋“œ, ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฉ”๋‰ด๋ฐ” ๋“ฑ์˜ ์ข€ ๋” ๋ณต์žกํ•ด์ง€์ง€๋งŒ ๋ฐ˜๋ณต ๊ฐ€๋Šฅํ•œ ์ œํ’ˆ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.

  • Template(ํ…œํ”Œ๋ฆฟ) โ†’ ๋ ˆ์ด์•„์›ƒ, ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ ๋“ฑ๊ณผ ๊ฐ™์ด ํ™”๋ฉด์˜ ๊ตฌ์กฐ๋ฅผ ์ •์˜ํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋จ

  • Page(ํŽ˜์ด์ง€) โ†’ ํ…œํ”Œ๋ฆฟ์—์„œ ์ •์˜๋œ ๊ตฌ์กฐ์™€ ๋””์ž์ธ ์š”์†Œ๋“ค์„ ๊ฒฐํ•ฉํ•ด ์‚ฌ์šฉ์ž๊ฐ€ ์‹ค์ œ๋กœ ๋ณผ ์ˆ˜ ์žˆ๋Š” ์ตœ์ข… ๊ฒฐ๊ณผ๋ฌผ

์•„ํ† ๋ฏน ๋””์ž์ธ ์‹œ์Šคํ…œ์„ ์ด์šฉํ•œ ์ปดํฌ๋„ŒํŠธ ํ™œ์šฉ

Last updated