λ””μžμΈ μ‹œμŠ€ν…œ ν”„λ‘œν† νƒ€μž…μ„ λ§Œλ“€λ©΄μ„œ.
πŸ€”νšŒκ³ /ν”„λ‘œμ νŠΈ 회고

λ””μžμΈ μ‹œμŠ€ν…œ ν”„λ‘œν† νƒ€μž…μ„ λ§Œλ“€λ©΄μ„œ.

λ°˜μ‘ν˜•

 

😎 λ””μžμΈ μ‹œμŠ€ν…œμ„ κ΅¬μƒν•˜κΈ°λ‘œ λ§ˆμŒλ¨Ήμ—ˆλ‹€

 

 κ·Έλ™μ•ˆ κ°œλ°œν–ˆλ˜ μ„œλΉ„μŠ€λ§ˆλ‹€ λ””μžμΈμ΄ μž¬κ°κ°μ΄μ—ˆλ‹€. λ²„νŠΌ 색은 λͺ¨λ‘ λ‹¬λžκ³  λ‚΄λΉ„κ²Œμ΄μ…˜ λ°” λ””μžμΈμ€ νŽ˜μ΄μ§€λ§ˆλ‹€ λ‹¬λžλ‹€. μƒˆλ‘œμš΄ μ„œλΉ„μŠ€λ₯Ό λ§Œλ“€κ±°λ‚˜ κ°œμ„ ν•  λ•Œλ§ˆλ‹€ 이전 λ””μžμΈμ„ μ°Έκ³ ν•΄μ„œ μƒˆλ‘œ λ§Œλ“€μ–΄μ•Ό ν–ˆκ³  ν‘œμ€€ 없이 λ§Œλ“€λ‹€ λ³΄λ‹ˆ κ±Έλ¦¬λŠ” μ‹œκ°„μ€ 배둜 λŠ˜μ–΄λ‚¬λ‹€. 이토둝 ν†΅μΌλ˜μ§€ μ•ŠλŠ” λ””μžμΈ μš”μ†Œλ“€μ„ 개발 νš¨μœ¨μ„ μœ„ν•΄ λ””μžμΈ μ‹œμŠ€ν…œμœΌλ‘œ 묢을 ν•„μš”κ°€ 생겼닀.

 

 λ””μžμΈ μ‹œμŠ€ν…œμ΄λž€ λ””μžμΈ 원칙, μ»΄ν¬λ„ŒνŠΈ, UI νŒ¨ν„΄ 등을 ν¬ν•¨ν•œ λ””μžμΈ μ„ΈνŠΈλΌκ³  보면 λœλ‹€. λ””μžμΈ μ‹œμŠ€ν…œμ˜ μž₯μ μœΌλ‘œλŠ” 각각의 μ„œλΉ„μŠ€λ§ˆλ‹€ λ””μžμΈμ„ ν†΅μΌμ‹œμΌœμ£Όλ©° μ„œλΉ„μŠ€μ˜ 정체성을 ν™•κ³ ν•˜κ²Œ ν•  수 μžˆλ‹€. λ™μ‹œμ— λ””μžμΈ μ½”λ“œμ˜ λ°˜λ³΅μ„ 쀄여주고 λΉ λ₯Έ ν”„λ‘ νŠΈμ—”λ“œ 개발이 κ°€λŠ₯ν•˜κ²Œλ” ν•œλ‹€. 즉, λ””μžμΈ μ‹œμŠ€ν…œμ„ μ μš©ν•œλ‹€λ©΄ λΉ λ₯΄κ³ , ν™•μž₯μ„± 있고, 효율적인 κ°œλ°œμ„ κ°€λŠ₯ν•˜κ²Œ ν•  수 μžˆλ‹€.

 

 μ§€κΈˆκΉŒμ§€ μž‘μ„±λœ νšŒκ³ λ‘μ„ 보면 λͺ¨λ‘ νš¨μœ¨μ„±μ„ κ°•μ‘°ν•˜κ³  μžˆλ‹€. 도컀 μžλ™ λ°°ν¬λŠ” 두말할 ν•„μš”λ„ 없이 νš¨μœ¨μ„ κ°•μ‘°ν•˜κ³  NodeJS ν…œν”Œλ¦Ώ λ˜ν•œ λ§ˆμ°¬κ°€μ§€λ‹€. λ‹€λ§Œ μ΄λ•ŒκΉŒμ§€λ§Œ 해도 λ””μžμΈμ€ λͺ¨λ‘ μ—‰λ§μ΄μ—ˆλ‹€. 늘 그렇듯이 λΆ€νŠΈμŠ€νŠΈλž© 4 κΈ°λ°˜μ— 무거운 ShardUIλ₯Ό μ–Ήμ–΄ μ‚¬μ΄νŠΈ λ‘œλ”© 속도λ₯Ό μ§€μ—°μ‹œμΌ°κ³  λΆ€λΆ„μ μœΌλ‘œ 제이쿼리λ₯Ό λ™λ°˜ν•˜μ—¬ λͺ¨λ‹¬ 창을 λ„μ›Œμ•Όλ§Œ ν–ˆμ—ˆλ‹€. 이처럼 λ””μžμΈ μ‹œμŠ€ν…œμ„ 톡해 μ•žμœΌλ‘œ λ§Œλ“€μ–΄μ§ˆ μ„œλΉ„μŠ€μ˜ ν’ˆμ§ˆμ„ κ°œμ„ ν•  ν•„μš”κ°€ μžˆμ—ˆλ‹€.

 

 

⌨️ 기술 μŠ€νƒ

 

 λ¦¬μ—‘νŠΈλ₯Ό μ‚¬μš©ν•˜μ§€ μ•ŠκΈ°λ‘œ ν–ˆκΈ°μ—, μ›Ή μ»΄ν¬λ„ŒνŠΈλ₯Ό μ‚¬μš©ν–ˆλ‹€. κΈ°λ³Έ 틀은 λΆ€νŠΈμŠ€νŠΈλž© 5λ₯Ό μ‚¬μš©ν•˜κ³  순수 CSSλ₯Ό 버리고 SASSλ₯Ό 처음으둜 μ‚¬μš©ν•˜κ²Œ λ˜μ—ˆλ‹€. λ˜ν•œ ES6 문법 JS에닀가 HTML custom element 클래슀λ₯Ό λ²ˆλ“€λ‘œ λ¬ΆκΈ° μœ„ν•œ μ›ΉνŒ©λ„ 처음으둜 μ μš©ν•΄λ³΄μ•˜λ‹€. κ·Έλ™μ•ˆ μ μš©ν•΄λ³΄κΈ°λ‘œ λ§ˆμŒλ¨Ήμ—ˆλ˜ κΈ°μˆ μ„ λ””μžμΈ μ‹œμŠ€ν…œμ„ 톡해 μ‹€ν˜„ν•˜κ³ μž ν•˜λŠ” μ·¨μ§€μ—μ„œμ˜€λ‹€. μ—¬κΈ° μ‚¬μš©λœ κΈ°μˆ μ€ 어렡지 μ•Šκ²Œ μ μš©ν•  수 μžˆμ—ˆλ‹€. μ›ΉνŒ©μ˜ 경우 곡식 λ¬Έμ„œκ°€ 잘 λ˜μ–΄ 있고 μ›Ή μ»΄ν¬λ„ŒνŠΈλŠ” JSλ¬Έλ²•λ§Œ λΉ μ‚­ν•˜λ©΄ μΆ©λΆ„νžˆ κ΅¬ν˜„ν•  수 μžˆλŠ” λ‚œμ΄λ„μ˜€λ‹€. 

 

 μ‚¬μ‹€μƒ 기술 μŠ€νƒλ³΄λ‹€λŠ” λ””μžμΈ μ‹œμŠ€ν…œ κ·Έ μžμ²΄μ— μ‹ κ²½ 썼닀. Toss의 TDS, Line의 LINE Design System, Apple의 Human Interface Guidelines 등을 μ°Έκ³ ν–ˆλ‹€. μ΄μ€‘μ—μ„œλ„ ν† μŠ€μ˜ 영ν–₯을 κ°€μž₯ 많이 λ°›μ•˜λ‹€. 특히 https://www.youtube.com/watch?v=LmLchZ4tCXc&ab_channel=FEConfKorea μ΄ μ˜μƒμ΄ 도움이 λ˜μ—ˆλ‹€.

 

 

πŸ›  λΆ€νŠΈμŠ€νŠΈλž©5 기반, κ°„μ†Œν™”

 

 λ””μžμΈ μ‹œμŠ€ν…œμ„ κ΅¬μ„±ν•˜κ²Œ 된 κ°€μž₯ 큰 μ΄μœ λŠ” νš¨μœ¨μ„±μ΄λ‹€. μ‚¬μš©μΈμ›μ€ 단 ν•œ λͺ…. μ–΄λ–€ ν˜‘μ—…λ„ λ…Όμ˜λ„ ν•„μš”ν•˜μ§€ μ•Šλ‹€. 그렇기에 였직 κ°œλ°œμ— μžˆμ–΄μ„œ μ‹œκ°„μ„ λ‹¨μΆ•ν•˜κ³  λΆˆν•„μš”ν•œ μž‘μ—…μ„ μ€„μ΄λŠ” λ°μ—λ§Œ μ§‘μ€‘ν–ˆλ‹€. λ˜ν•œ ν™•μž₯μ„± μžˆλŠ” κΈ°λŠ₯에 λͺ¨λ°”μΌκΉŒμ§€ 지원해야 ν•˜κ³  이 λͺ¨λ“  κΈ°λŠ₯을 κ°–μΆ”λ €λ©΄ μ‹œκ°„μ΄ λ„ˆλ¬΄λ‚˜λ„ 였래 걸릴게 λ»”ν–ˆλ‹€. κ·Έλž˜μ„œ λΆ€νŠΈμŠ€νŠΈλž©μ˜ νž˜μ„ 빌리기둜 ν–ˆλ‹€.

 

 λΆ€νŠΈμŠ€νŠΈλž©μ„ 써본 μ‚¬λžŒλ“€μ€ κ³΅κ°ν•˜κ² μ§€λ§Œ 쓸데없이 λ³΅μž‘ν•˜λ‹€. divλ₯Ό λ‚¨λ°œν•˜λŠ” 건 물둠이고 λ””μžμΈ μΉœν™”μ μ΄μ§€ μ•Šμ€ λ„€μ΄λ°μœΌλ‘œ κ΅¬μ„±λ˜μ–΄ μžˆλ‹€. 예λ₯Ό λ“€μ–΄ λ²„νŠΌ 색을 μ§€μ •ν•˜λŠ”λ° btn btn-primaryλ₯Ό μ‚¬μš©ν•΄μ•Ό ν•˜λŠ” 일처럼 말이닀. λ˜ν•œ tint와 fill을 κ΅¬λΆ„ν•˜μ§€ μ•Šμ•„ 색 ν‘œν˜„μ— μžˆμ–΄μ„œλ„ ν•œκ³„κ°€ μžˆμ—ˆλ‹€.

 λ¨Όμ € 이같은 ν•œκ³„λ₯Ό κ·Ήλ³΅ν•˜κΈ° μœ„ν•΄μ„œλŠ” μ½”λ“œλ₯Ό κ°„μ†Œν™”ν•΄μ•Ό ν•œλ‹€. μ•„λž˜λŠ” λͺ¨λ‘ λͺ¨λ‹¬μ„ κ΅¬μ„±ν•˜λŠ” κΈ°λŠ₯이닀. λΆˆν•„μš”ν•œ ꡬ문을 μ—†μ• κ³  κΉ”λ”ν•˜κ²Œ ν•„μš”ν•œ κΈ°λŠ₯만 λ…ΈμΆœμ‹œν‚€λ©΄μ„œ 효과적으둜 κ°œμ„ ν–ˆλ‹€.

              ( λΆ€νŠΈμŠ€νŠΈλž©5 λͺ¨λ‹¬ ).                                                                                  ( 데벀트 λ””μžμΈ μ‹œμŠ€ν…œ λͺ¨λ‹¬ )

 

 

 

πŸ“ λ””μžμΈ

 

 λ””μžμΈ μ‹œμŠ€ν…œμ€ λ””μžμΈμ΄ 핡심이닀. 아무리 원칙이 ν›Œλ₯­ν•˜κ³  μ½”λ“œκ°€ λΉˆν‹ˆμ΄ 없어도 λ””μžμΈμ΄ 이λ₯Ό 뒷받침해주지 λͺ»ν•˜λ©΄ 빛을 λ°œν•˜μ§€ λͺ»ν•œλ‹€. λ‹¨μˆœν•˜κ²ŒλŠ” UI ꡬ성뢀터, 더 λ‚˜μ•„κ°€μ„œ UXκΉŒμ§€ κ³ λ €ν•΄μ•Ό ν™•μž₯μ„± μžˆλŠ” μ‹œμŠ€ν…œμ„ ꡬ좕할 수 μžˆλ‹€. 기껏 λ§Œλ“€μ–΄λ†“μ•˜λŠ”λ° 쓰지 λͺ»ν•˜λ©΄ 무슨 μ˜λ―Έκ°€ μžˆμ„κΉŒ. λ””μžμΈ μ‹œμŠ€ν…œμ„ 잘 ν™œμš©ν•˜κΈ° μœ„ν•΄μ„œλŠ” μ‹œμŠ€ν…œλ„ μ€‘μš”ν•˜μ§€λ§Œ, λ””μžμΈμ—λ„ 집쀑해야 ν•œλ‹€.

 

https://dds.devent.kr/

 

 μ§κ΄€μ μΈ DXλ₯Ό κ³ λ €ν•œλ‹€. μš°μ„  λΆ€νŠΈμŠ€νŠΈλž©μ˜ κΈ°λ³Έ λ²„νŠΌ 색 클래슀인 'btn btn-primary'와 같은 문ꡬλ₯Ό μ§κ΄€μ μœΌλ‘œ λ°”κΏ€ ν•„μš”κ°€ μžˆμ—ˆλ‹€. 이에 btn-blueλΌλŠ” μ§κ΄€μ μœΌλ‘œ 이해할 수 μžˆλŠ” 단어λ₯Ό μ„ νƒν•¨μœΌλ‘œμ¨ 클래슀 λͺ…λ§Œ 보고도 μ–΄λ–€ λ²„νŠΌμΈμ§€λ₯Ό λΉ λ₯΄κ²Œ μ•Œ 수 μžˆμ—ˆλ‹€. 

 ν†΅μΌκ°μ„ λΆ€μ—¬ν•œλ‹€. μ „μ²΄μ μœΌλ‘œ border-radiusλŠ” 10px을 κΈ°λ³Έ λ‹¨μœ„λ‘œ ν•˜κ³  λ²„νŠΌ padding 은 0.7rem 1.55rem을 κΈ°μ€€μœΌλ‘œ κ΅¬μ„±ν–ˆλ‹€. 이λ₯Ό 톡해 λ””μžμΈμ˜ 아이덴티티λ₯Ό κ°•ν™”ν•  수 있고, λ‹€λ₯Έ μ„œλΉ„μŠ€μ—λ„ λ””μžμΈ μ‹œμŠ€ν…œμ„ μ μš©ν•œλ‹€λ©΄ λΈŒλžœλ“œμ˜ 일관성을 μœ μ§€ν•  수 μžˆλ‹€. λ™μ‹œμ— 색상 뢀문은, 라이트 λͺ¨λ“œμ—μ„œλŠ” tintλ₯Ό 기본으둜, 닀크 λͺ¨λ“œμ—μ„œλŠ” fill을 기본으둜 ν•œλ‹€. 

 ν•˜λ‚˜λ₯Ό λ°”κΎΈλ©΄ 전체가 바뀐닀. 사싀상 λ””μžμΈ μ‹œμŠ€ν…œμ„ κ΅¬μ„±ν•˜κ²Œ 된 κ°€μž₯ 큰 λͺ©μ μ΄λ‹€. λ””μžμΈ μ‹œμŠ€ν…œμ˜ μ½”λ“œλ₯Ό λ°”κΎΈλ©΄ 전체 μ„œλΉ„μŠ€μ—λ„ λ™μΌν•˜κ²Œ μ μš©λœλ‹€. 예λ₯Όλ“€μ–΄ λ‚΄λΉ„κ²Œμ΄μ…˜ λ°”μ˜ padding값이 μ–΄μšΈλ¦¬μ§€ μ•Šλ‹€κ³  μƒκ°ν•˜λ©΄ λ””μžμΈ μ‹œμŠ€ν…œμ˜ μ½”λ“œ ν•œ μ€„λ§Œ λ°”κΎΈλ©΄ 전체 μ„œλΉ„μŠ€μ—μ„œλ„ ν•œ λ²ˆμ— μ μš©λœλ‹€. λ§Œμ•½ λ””μžμΈ μ‹œμŠ€ν…œμ΄ μ—†λ‹€λ©΄ ν•˜λ‚˜ν•˜λ‚˜ λ‹€ λ°”κΏ”μ£Όμ–΄μ•Ό ν•  텐데 말이닀. μ΄λŠ” μ„œλΉ„μŠ€μ˜ μˆ˜κ°€ λ§Žμ•„μ§€λ©΄ λ§Žμ•„μ§ˆμˆ˜λ‘ μž₯점으둜 λ‹€κ°€μ˜€λŠ” νš¨κ³Όκ°€ μžˆλ‹€.

 

 

 

πŸš€ 적용

 

 ν”„λ‘œν† νƒ€μž… 개발이 λλ‚œ ν›„μ—λŠ” κ°œλ°œμ€‘μΈ μ„œλΉ„μŠ€λ“€μ— μ μš©ν–ˆλ‹€. λΈ”λ‘œκ·Έ μ„œλΉ„μŠ€, devent-frame 기반의 μ˜€ν”ˆμ†ŒμŠ€ ν”„λ‘œμ νŠΈ λ“± μ΄ν›„λ‘œλ„ 개인적으둜 κ°œλ°œν•˜λŠ” ν”„λ‘œμ νŠΈμ—λŠ” λ””μžμΈ μ‹œμŠ€ν…œμ„ μ μš©ν•  μ˜ˆμ •μ΄λ‹€. ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμ— μžˆμ–΄ λŒ€λž΅ 4배의 μ‹œκ°„μ„ 쀄여쀀 λ””μžμΈ μ‹œμŠ€ν…œμ΄κΈ°μ— λ‚˜μ—κ²Œ μžˆμ–΄μ„œλŠ” 쓰지 μ•Šμ„ μ΄μœ κ°€ μ—†λ‹€.

 

 λ””μžμΈ μ‹œμŠ€ν…œμ„ ν™œμš©ν•˜λ©΄ 개발 κ³Όμ •μ—μ„œλΆ€ν„° 배포 λ‹¨κ³„κΉŒμ§€ μ΅œμ ν™”λ₯Ό ν•  수 μžˆλ‹€. 개발 λ‹¨κ³„μ—μ„œλŠ” κΈ°μ‘΄λŒ€λΉ„ 20%의 μ½”λ“œλ§Œ 적어도 κΈ°λŠ₯을 κ΅¬ν˜„ν•˜λŠ” 데에 μžˆμ–΄ 문제 λ˜μ§€ μ•ŠλŠ”λ‹€. μ΄λŠ” ν”„λ‘ νŠΈμ—”λ“œ ꡬ성에 μŸμ„ μ‹œκ°„μ„ μ ˆμ•½ν•˜λ©°, κΈ°λŠ₯μ΄λ‚˜ UX적인 츑면을 μš°μ„ μ μœΌλ‘œ κ³ λ €ν•  수 있게 λœλ‹€. λ˜ν•œ ν•œ 번 λ°°ν¬ν•œ 이후에 μžμž˜ν•œ λ””μžμΈμ„ 바꾸지 μ•Šμ•„λ„ λ˜λ‹ˆ 배포 ν›„ μ΅œμ ν™”μ—λ„ μš©μ΄ν•˜λ‹€. 

 

 ν˜Ήμ‹œλ‚˜ μ½”λ“œλ₯Ό 보고 μ‹ΆμœΌμ‹  뢄듀은 μ˜€ν”ˆμ†ŒμŠ€λ‘œ κ³΅κ°œλ˜μ–΄ μžˆμœΌλ‹ˆ μ°Έκ³ ν•˜μ‹œκΈ°λ₯Ό λ°”λž€λ‹€.

 

https://github.com/Team-DeVent/devent-designsystem

 

GitHub - Team-DeVent/devent-designsystem: βš™οΈ each service has one design, devent design system.

βš™οΈ each service has one design, devent design system. - GitHub - Team-DeVent/devent-designsystem: βš™οΈ each service has one design, devent design system.

github.com

 

 

 

πŸ“Œ μΆ”κ°€ 링크

 

[TDS λ…Έμ…˜] https://www.notion.so/toss-design-system-959822692bec4f879450e361c623cf2a

 

toss, design, system.

ν–‰μ‚¬μ˜ λͺ©μ 

www.notion.so

[APPLE Human Interface Guidelines] https://developer.apple.com/design/human-interface-guidelines/guidelines/overview

 

Human Interface Guidelines - Human Interface Guidelines - Design - Apple Developer

Human Interface Guidelines The HIG contains guidance and best practices that can help you design a great experience for any Apple platform. Featured Foundations Understand how fundamental design elements help you create rich experiences. Foundations Patter

developer.apple.com

 

λ°˜μ‘ν˜•