λΆ‰μ€κ±°μœ„ / GoOSe

BBuzzArt UI-KIT

아티클 정보

λ‘₯μ§€
Tool & Service
λΆ„λ₯˜
External
등둝일
2019-06-27 04:57:48

BBuzzArt μ„œλΉ„μŠ€μ—μ„œ μ‚¬μš©ν•˜λŠ” μš”μ†Œλ“€μ„ ν†΅μΌν™”ν•˜κ³  μΆ”κ°€λ˜λŠ” 컨텐츠 μ œμž‘μ˜ 생산성을 κ°œμ„ ν•˜κΈ° μœ„ν•˜μ—¬ UI μ»΄ν¬λ„ŒνŠΈλ₯Ό μ •λ¦¬ν•˜λŠ” μž‘μ—…μ΄ κΌ­ ν•„μš”ν•˜λ‹€.

bbuzzart_ui-kit-001.jpg

κ·Έλž˜μ„œ μ„œλΉ„μŠ€μ™€ UI μ»΄ν¬λ„ŒνŠΈλ₯Ό λΆ„λ¦¬ν•˜λŠ”κ²Œ μ’‹μ„κ±°λΌλŠ” 계기가 λœκ²ƒμ΄ μ„œλΉ„μŠ€ ν”„λ‘œμ νŠΈκ°€ next.js둜 λ°”λ€Œκ²Œ λ˜λ©΄μ„œ ν”„λ‘œμ νŠΈ λ©μΉ˜κ°€ μ»€μ Έμ„œμΈμ§€ μ΅œμ ν™”μ— μ‹ κ²½μ•ˆμ¨μ„œμΈμ§€ λͺ¨λ₯΄κ² μ§€λ§Œ κ°œλ°œμ†λ„κ°€ λ¬Έμ œκ°€ λ³΄μ—¬μ„œ UI μž‘μ—…μ΄ λŒ€λ‹¨νžˆ νž˜λ“  ν™˜κ²½μ΄ λ˜μ–΄ ν”„λ‘œμ νŠΈλ₯Ό λΆ„λ¦¬ν•˜κ²Œ λ˜μ—ˆλ‹€.
예λ₯Όλ“€μ–΄ μ„œλΉ„μŠ€μ— λ§žλŠ” λΆ€νŠΈμŠ€νŠΈλž©κ°™μ€κ²ƒμ„ λ§Œλ“€κ³  μ„œλΉ„μŠ€μ™€ κ²°ν•©ν•˜λŠ” ν˜•νƒœλ₯Ό κ΅¬μƒν•˜κ²Œ 된 것이닀.

λΉ λ₯Έ 개발이 ν•„μš”ν• λ•Œ..

μ„œλΉ„μŠ€μ— 직접적인 연관이 μžˆλŠ” 뢀뢄이 μ•„λ‹Œ UI와 μ½”λ“œ λ¦¬νŒ©ν† λ§ μˆ˜μ€€μ΄λΌμ„œ λ§Žμ€ μ‹œκ°„μ„ ν• μ• ν•  수 μ—†μ—ˆκ³ , 짜투리 μ‹œκ°„μ„ μ΄μš©ν•΄μ„œ λ§Œλ“€κ²Œ λ˜μ—ˆλ‹€.
λ‹€ν–‰νžˆ 이미 λ§Œλ“€μ–΄μ Έ μžˆλŠ” μ„œλΉ„μŠ€μ—μ„œ μš”μ†Œλ“€μ„ λ‹€μ‹œ 그룹을 μ§“κΈ°λ§Œ ν•˜λ©΄ λ˜λŠ” μž‘μ—…λ“€μ΄μ–΄μ„œ 뢀담이 λœν–ˆλ‹€.

μ»΄ν¬λ„ŒνŠΈ λͺ©λ‘ μž‘μ„±κ³Ό λ””μžμΈ 정리

bbuzzart_ui-kit-002.jpg

본격적인 μž‘μ—…μ„ ν•˜κΈ° μ•žμ„œμ„œ 어떀것듀을 μ»΅ν¬λ„ŒνŠΈλ₯Ό λ§Œλ“€ 것인지 후보 λͺ©λ‘μ„ λ§Œλ“œλŠ”κ²ƒμ΄ μš°μ„ μ΄μ—ˆλ‹€.
μ»΄ν¬λ„ŒνŠΈλ₯Ό λ§Œλ“€ μ΅œμ†Œν•œμ˜ 쑰건은 μ΅œμ†Œ 2번 이상을 μ‚¬μš©ν•˜λŠ” 것이닀. 컨텐츠 μ „μš© UI듀은 λ”°λ‘œ λ§Œλ“€λ„λ‘ 두고 μ—¬λŸ¬λ²ˆ μ‚¬μš©ν•˜κ³  있고, μžŽμœΌλ‘œλ„ μ—¬λŸ¬λ²ˆ μ‚¬μš©ν•˜κ² λ‹€ 싢은 뢀뢄듀은 λͺ©λ‘μ— κΈ°λ‘ν•œλ‹€.

μ–΄λŠμ •λ„ κΈ°λ‘ν•˜κ³ λ‚˜μ„œ λ””μžμ΄λ„ˆμ—κ²Œ 디지인 κ°€μ΄λ“œλ₯Ό λ§Œλ“€μ–΄ 달라고 μš”μ²­ν•˜λ©΄μ„œ μ»΄ν¬λ„ŒνŠΈλ³„λ‘œ λ³€ν•˜λŠ” μƒνƒœλ“€μ„ 쒀더 μΆ”κ°€ν•˜κ²Œ λ˜μ—ˆλ‹€.
기본적으둜 μ•„μ΄μ½˜μ΄λ‚˜ λ²„νŠΌλ“€λ§Œ λ””μžμΈλœ κ°€μ΄λ“œλ₯Ό λ°›κ³  λ‚˜λ¨Έμ§€λŠ” μ½”λ”©ν•˜λ©΄μ„œ ν•„μš”ν•˜λ©΄ μ‘°μ ˆν•˜κΈ°λ‘œ λ°©ν–₯을 μ •ν•΄ λ‘μ—ˆλ‹€.

본격적인 개발

λͺ¨λ“  λ°‘μ€€λΉ„λ₯Ό 끝내고 λ°”λ‘œ κ°œλ°œμ„ μ‹œμž‘ν•˜κ²Œ λ˜μ—ˆλ‹€.
λ°”λ‘œ ν•΄μ•Όν•  일이 μ—†κ±°λ‚˜ μ‹œκ°„μ„ 쑰금 μͺΌκ°œμ„œ λ°”μ˜κ²Œ 코딩을 μ‹œμž‘ν–ˆλ‹€.

bbuzzart_ui-kit-003.png

μ„œλΉ„μŠ€μ˜ ν™˜κ²½μ€ next.jsμ΄μ§€λ§Œ 일반 react둜 ꡬ좕해놔도 μ‚¬μš©ν•˜λŠ”λ° μ§€μž₯이 μ—†μœΌλ―€λ‘œ μ΅œλŒ€ν•œ κ°„νŽΈν•˜κ²Œ 섀정을 ν–ˆλ‹€.
npm 같은곳에 μ†ŒμŠ€λ₯Ό κ³΅κ°œν•  수 μ—†λŠ” ν˜•νƒœμ΄κΈ°μ— μ»΄ν¬λ„ŒνŠΈλ₯Ό λ°”λ‘œ λΆˆλŸ¬μ™€μ„œ μ‚¬μš©ν•  수 μžˆλŠ” 방법은 git의 submodules κΈ°λŠ₯을 μ΄μš©ν•˜λŠ” κ²ƒμ΄μ—ˆλ‹€. μ„œλ‘œλ‹€λ₯Έ μ €μž₯μ†Œμ—μ„œ ν•©μ³μ„œ μ‚¬μš©ν•  수 μžˆλŠ” 쒋은 λ°©λ²•μ΄μ–΄μ„œ ν•œλ²ˆμ”© μ‚¬μš©ν•˜κ³€ ν–ˆλ‹€.

λ¨Όμ € 타이포 κ°€μ΄λ“œλΆ€ν„° 작고, cssλ§ŒμœΌλ‘œλ„ ν•΄κ²°ν•  수 μžˆλŠ” 뢀뢄듀을 ν•˜λ‚˜μ”© κΈ°μ΄ˆμž‘μ—…μ„ ν•΄λ‘λ©΄μ„œ λ°”λ‘œ λ¬Έμ„œμž‘μ—…μ„ 같이 μ§„ν–‰ν–ˆλ‹€. μ„Ήμ…˜λ³„λ‘œ κ°œλ°œλΆ€ν„° λ¬Έμ„œμž‘μ—…κΉŒμ§€ ν•œλ²ˆμ— ν•˜κ³  λ‹€μŒ μ„Ήμ…˜μœΌλ‘œ λ„˜μ–΄κ°€λŠ” λ°©μ‹μœΌλ‘œ κ°œλ°œν–ˆλ‹€.
μ΄λ ‡κ²Œ ν•œ μ΄μœ λŠ” μ „λΆ€ κ°œλ°œν•˜κ³  λ¬Έμ„œμž‘μ—…μ„ ν•˜λ©΄ μ‚¬μš©λ²•μ΄λ‚˜ μ˜΅μ…˜κ°™μ€κ²ƒλ“€μ„ 빼먹을 κ°€λŠ₯성이 컀지기 λ•Œλ¬Έμ— κ°œλ°œν•˜λ©΄μ„œ λ°”λ‘œ λ¬Έμ„œλ“€μ„ μž‘μ„±ν•˜κ³€ ν–ˆλ‹€.

μž‘μ—…ν•˜λ©΄μ„œ μ„œλΉ„μŠ€μ—μ„œ μ‚¬μš©λ˜λŠ” μ»΄ν¬λ„ŒνŠΈλ“€μ„ λ–Όμ˜€λ©΄μ„œ μ½”λ“œλ“€μ„ μ •λ¦¬ν•˜κ³  κΈ°λŠ₯μ΄λ‚˜ UI듀을 κ°œμ„ ν•˜λŠ” 계기가 λ˜λŠ” 쒋은 μž‘μ—…μ΄λΌλŠ”κ²ƒμ„ κΉ¨λ‹«κ²Œ λ˜μ—ˆλ‹€.
μ–΄λ–€ μ„œλΉ„μŠ€λ“ μ§€ μ˜€ν”ˆν•˜λ©΄ μ–΄λŠμ •λ„ μ‹œκ°„μ„ 두고 κΈ°λŠ₯뿐만 μ•„λ‹ˆλΌ UI λ¦¬νŒ©ν† λ§μ€ κΌ­ ν•„μš”ν•œ μž‘μ—…μ΄λΌλŠ”κ±Έ κΉ¨λ‹«λŠ” 계기가 λ˜μ—ˆλ‹€.

bbuzzart_ui-kit-004.png

reactμ—μ„œ 개인적으둜 λŒ€λ‹¨νžˆ μž¬λ―Έμžˆμ–΄ ν•˜λŠ” μž‘μ—…μ€ κ³΅ν†΅μ μœΌλ‘œ μ‚¬μš©λ˜λŠ” μ»΄ν¬λ„ŒνŠΈλ₯Ό λ§Œλ“œλŠ” 일이닀. 이 μ»΄ν¬λ„ŒνŠΈλ₯Ό λ‹€λ₯Έκ³³μ—μ„œ μ‘°λ¦½ν•΄μ„œ μ‚¬μš©λ˜λŠ”λ° μ“°μΈλ‹€λŠ”κ²ƒμ€ μ •λ§λ‘œ 기뢄쒋은 일이고, μ‚¬μš©ν•˜λŠ” μ‚¬λžŒμ΄ μ–΄λ–»κ²Œ μ‚¬μš©ν• μ§€μ— λŒ€ν•˜μ—¬ μƒμƒν•˜λ©΄μ„œ 인풋과 μ•„μ›ƒν’‹μ˜ 지점을 μ„€κ³„ν•˜κ³  μ»΄ν¬λ„ŒνŠΈμ˜ ν˜•νƒœλ₯Ό λ§Œλ“œλŠ” 과정은 λŒ€λ‹¨νžˆ λ©‹μ§„ μž‘μ—…μ΄λ‹€.
μ„œλΉ„μŠ€λ₯Ό λ§Œλ“œλŠ”κ²ƒλ³΄λ‹€ 도ꡬλ₯Ό λ§Œλ“œλŠ” 일이 λ‚˜μ—κ²Œ 더 적성에 λ§žλ‹€κ³  λŠκ»΄μ§„λ‹€.

λ ˆμ΄μ•„μ›ƒ 큰 μ„Ήμ…˜μœΌλ‘œ css μ»΄ν¬λ„ŒνŠΈλ“€μ„ λ§Œλ“€κ³ , μ»΄ν¬λ„ŒνŠΈ μ„Ήμ…˜μœΌλ‘œ react μ»΄ν¬λ„ŒνŠΈλ“€μ„ λ§Œλ“€μ—ˆλ‹€.

Icons μ»΄ν¬λ„ŒνŠΈλ‘œ μ„œλΉ„μŠ€μ— μ‚¬μš©ν•˜λŠ” μ•„μ΄μ½˜λ“€μ„ svg μ΄λ―Έμ§€λ‘œ μ»΄ν¬λ„ŒνŠΈμ— μ‹Έμ„œ μƒ‰μ΄λ‚˜ 크기λ₯Ό λ³€κ²½ν•˜λ©΄ μ‘°μ ˆλ˜λ„λ‘ λ§Œλ“€μ—ˆμ—ˆλ‹€.
κ·Έ 외에 μΆ”κ°€λ‘œ Dropdown, Modal, Progress, Toast, Loading, Tab.. μ»΄ν¬λ„ŒνŠΈλ₯Ό μΆ”κ°€μ μœΌλ‘œ λ§Œλ“€μ–΄μ„œ μ„œλΉ„μŠ€μ—μ„œ μΆ”κ°€λ‘œ κ°œλ°œν•˜λŠ” 뢀뢄듀에 λŒ€ν•΄μ„œ 도움이 λ˜λ„λ‘ 미리 λ§Œλ“€μ–΄ λ‘μ—ˆλ‹€.

bbuzzart_ui-kit-005.jpg

μ„œλΉ„μŠ€μ— 적용

μ–΄λŠμ •λ„ κ°œλ°œμ„ μ™„λ£Œν•˜κ³  μ λ‹Ήνžˆ ν…ŒμŠ€νŠΈλ₯Ό ν•˜κ³ λ‚˜μ„œ λ°”λ‘œ μ„œλΉ„μŠ€μ—μ„œ λ¦¬νŒ©ν† λ§μ„ μ‹œμž‘ν–ˆλ‹€.
μ•„λ¬΄λž˜λ„ μ μš©μ„ ν•˜λ©΄μ„œ λ¬Έμ œμ μ„ μ°Ύκ³  κ³ μΉ˜λŠ”κ²Œ λ‚˜μ„κ±° κ°™λ‹€κ³  νŒλ‹¨ν•΄μ„œ μž‘μ—…μ„ ν•΄λ³΄κ²Œ λ˜μ—ˆλŠ”λ° μžμž˜ν•œ μˆ˜μ •μ΄ 생기면 ui-kit μ €μž₯μ†Œμ—μ„œ 고치고 μ„œλΉ„μŠ€ μ €μž₯μ†Œμ— μ μš©ν•˜λŠ” μž‘μ—…μ΄ μƒλ‹Ήνžˆ λ²ˆκ±°λ‘­μ§€λ§Œ μ €μž₯μ†Œλ₯Ό λΆ„λ¦¬ν•˜λ €λŠ” λŒ€κ°€μΈκ²ƒμ„ λ°›μ•„λ“€μ—¬μ•Ό ν•˜λŠ” 뢀뢄이닀.

μ €μž₯μ†Œκ°€ privateλΌμ„œ λ‹€λ₯Έ λ™λ£Œκ°€ μ‚¬μš©ν•˜λŠ”λ° μ‰½μ§€μ•Šμ•„ λ³΄μ˜€λ‹€. public μ €μž₯μ†Œμ—μ„œ μ‚¬μš©ν• μ μ—λŠ” λͺ°λžλ˜ λΆ€λΆ„μ΄μ—ˆμ§€λ§Œ μ‚¬μš©ν•˜κΈ° λΆˆνŽΈν•¨μ΄ λŠκ»΄μ§€κΈ΄ ν–ˆμ§€λ§Œ μ–΄λŠμ •λ„ μ•ˆμ •ν™”κ°€ 되면 λ³„λ‘œ μ†λŒ€μ§€ μ•Šμ„κ±°λΌκ³  μ˜ˆμƒν•˜κ³  μžˆμ—ˆλ‹€.

마치며..

ui-kit을 μ„œλΉ„μŠ€μ— μ μš©ν•˜κ³ , λ¦¬νŒ©ν† λ§μ„ ν•˜λ©΄μ„œ css와 μ»΄ν¬λ„ŒνŠΈμ˜ μ†ŒμŠ€μ˜ 양을 많이 μ€„μ˜€λ‹€. μ•ˆκ·Έλž˜λ„ μ„œλΉ„μŠ€λ₯Ό κ°œλ°œν•˜κ³  λ‚˜μ˜¨ css의 ꡬ쑰가 많이 꼬이고, λ©μΉ˜κ°€ μ»€μ Έμ„œ 많이 μ»€μ§„κ²Œ κ±±μ •μ΄μ—ˆλ‹€.
μ™„λ²½ν•˜μ§€λŠ” μ•Šμ§€λ§Œ μ •λ¦¬ν•˜λŠ”λ° κ½€ λ§Žμ€ 도움이 λ˜μ—ˆλ‹€κ³  생각이 λ“€μ§€λ§Œ κ²‰μœΌλ‘œ 보기엔 μ°¨μ΄λŠ” μ•ˆ λŠκ»΄μ§€κ² μ§€...

많이 λΆˆμ•ˆν•˜κ³  λ˜₯μ€„νƒ€λ©΄μ„œ μž‘μ—…μ„ ν–ˆλ˜ λΆ€λΆ„μ΄μ—ˆμ§€λ§Œ 개인적으둜 λŒ€λ‹¨νžˆ μœ μ˜λ―Έν•œ μž‘μ—…μ΄ λ˜μ—ˆλ‹€. ν•˜μ§€λ§Œ κ·Έ 후에 잘 ν™œμš©λ˜μ§€ μ•Šμ•˜λ‹€λŠ” 것이 μ•„μ‰½κ²Œ λŠκ»΄μ§„λ‹€.

메타데이터

쑰회수
1446
μ’‹μ•„μš”
0