πŸ’» UI λ””μžμΈ κ°€μ΄λ“œ λ§Œλ“€κΈ° #1._Icon naming

KLleon Product Center
11 min readOct 11, 2022

--

Posting : 05.10.2022
Designer : 김세원
#Icon #Naming #DesignSystem #Guide

μ•„μ΄μ½˜κ³Ό μ΄λ―Έμ§€μ˜ 넀미밍 약속 [made by.sewon]

λ””μžμΈ κ°€μ΄λ“œ μ œμž‘κΈ° #1. Icon κ³Ό Button의 넀이밍을 μ •ν•΄λ³΄μž.

[ν”„λ‘ νŠΈ κ°œλ°œνŒ€κ³Ό ν•¨κ»˜ν•œ λ””μžμΈ κ°€μ΄λ“œ λ§Œλ“€κΈ°]

κ°œλ°œμžμ™€ μ†Œν†΅ν•  λ•Œλ§ˆλ‹€ μ•„μ΄μ½˜μ„ 말할 λ•Œλ§ˆλ‹€ λ„ˆλ¬΄λ‚˜λ„ μ€‘κ΅¬λ‚œλ°©μ΄κ³ , νšŒμ‚¬μ˜ 규λͺ¨κ°€ 점차 μ»€μ§€λ©΄μ„œ β€œλ‹€λ₯Έ λ””μžμ΄λ„ˆμ™€ ν˜‘μ—…ν•  μ‹œμ— κ°€μ΄λ“œ μž‘μ—…μ„ κΌ­ ν•„μš”ν•˜κ² λ‹€.” 라고 생각을 ν•˜κ²Œ λ˜μ—ˆλ‹€.

μ„œλΉ„μŠ€λ₯Ό λ“€μ–΄κ°€λŠ” μ΄ˆμž…λΆ€μ— μ§€κΈˆ ν™•μ •ν•˜μ§€ μ•ŠμœΌλ©΄ 눈덩이처럼 λΆˆμ–΄λ‚˜κ²Œ 될 μ‹œλ ¨μ΄ μ˜ˆμƒλ˜μ—ˆκ³ , ν•˜λ£¨ 빨리 λ§Œλ“€μ–΄μ•Όκ² λ‹€λŠ” 생각이 λ“€μ–΄ κ°œλ°œμžλΆ„μ—κ²Œ μ œμ•ˆμ„ ν–ˆλ‹€. 닀행이 ν”μΎŒνžˆ μˆ˜λ½ν•΄μ£Όμ…”μ„œ*(ν”μΎŒνžˆ μˆ˜λ½ν•΄μ£Όμ‹œκ³ , νž˜μ¨μ£Όμ‹  개발자 λ™λ£Œμ—¬λŸ¬λΆ„ κ°μ‚¬ν•©λ‹ˆλ‹€)* μ„œν΄μ„ λ§Œλ“€μ–΄ μž‘μ—…μ„ μˆ˜ν–‰ν•˜κ²Œ λ˜μ—ˆλ‹€.

Progress 01_일단 μ‹œκΈ‰ν•œ 것뢀터, λ²”μœ„λ₯Ό μ •ν•΄λ³΄μž!

[μ»΄ν¬λ„ŒνŠΈλŠ” μ™œ ν•„μš”ν•œκ°€μ— λŒ€ν•œ λ‹ˆμ¦ˆ 정리]

일단 κ°€μž₯ μ‹œκΈ‰ν•œ 건 μ•„μ΄μ½˜μ΄μ—ˆλ‹€. κ·Έ μ€‘μ—μ„œ 넀이밍을 μ •ν•˜λŠ” 것이 급선무라고 νŒλ‹¨μ„ ν–ˆλ‹€.

각각의 κ°œλ°œμžμ™€ λ””μžμ΄λ„ˆκ°€ λŠλΌλŠ” needs 사항을 μ •λ¦¬ν•΄μ„œ 이 μž‘μ—…μ΄ μ™œ ν•„μš”ν•˜κ³ , μ–΄λ–»κ²Œ κ°œμ„ μ΄ λ˜μ–΄μ•Όν• μ§€ 정리λ₯Ό ν•΄λ³΄μ•˜μ—ˆλ‹€.

[μ‹œκΈ‰ν•œ μš°μ„ μˆœμœ„λΆ€ν„° 업무 λ²”μœ„ μ •ν•˜κΈ°]

κ·Έλž˜μ„œ 결둠적으둜 큰 [μΉ΄ν…Œκ³ λ¦¬]λ‘œλŠ” Icon, 그리고 [업무 scope] 은 Icon naming, νŒ¨λ”©κ°’, Button naming (Button naming은 좔후에 또 닀루도둝 ν•˜κ² λ‹€.) κΉŒμ§€λ₯Ό 이번 μ—…λ¬΄λ‘œ μ§€μ •ν–ˆλ‹€. 이 μ—­μ‹œ Icon에 λŒ€ν•΄μ„œ μš°λ¦¬κ°€ 무엇이 ν•„μš”ν•œμ§€ κ°œλ°œμžμ™€ λ””μžμ΄λ„ˆλŠ” 각각 μ–΄λ–€ needs 사항듀이 μžˆλŠ”μ§€λ₯Ό μ •λ¦¬ν–ˆλ‹€.

Progress 02_μž‘μ—…μ„ μˆ˜ν–‰ν•˜κΈ° μœ„ν•΄ λ¦¬μ„œμΉ˜, 레퍼런슀 μ°ΎκΈ°

λ””μžμΈ μ‹œμŠ€ν…œκ³Ό κ°€μ΄λ“œ μž‘μ—…μ„ μˆ˜ν–‰ν•˜κΈ° μœ„ν•΄ μ—¬λŸ¬ κΈ°μ—…λ“€μ˜ λ””μžμΈ μ‹œμŠ€ν…œ μ‚¬μ΄νŠΈλ“€μ„ μ°Έκ³ ν•˜μ˜€λ‹€. (λ””μžμΈ μ‹œμŠ€ν…œμœΌλ‘œ λ§Œλ“€λ €κ³  ν–ˆμœΌλ‚˜ λ‚œκ΄€μ„ λ°œκ²¬ν•˜μ—¬ κ°€μ΄λ“œλ₯Ό μš°μ„ μ μœΌλ‘œ μž‘μ—…ν•˜λŠ” κ²ƒμœΌλ‘œ ν–ˆλ‹€. ν•΄λ‹Ή λ‚œκ΄€ μŠ€ν† λ¦¬λŠ” μΆ”ν›„ λΈ”λ‘œκ·Έμ— μ˜¬λ¦¬λ„λ‘ ν•˜κ² λ‹€.)

[레퍼런슀 링크]
-
Ant λ””μžμΈ
- κ΅¬κΈ€μ˜ 타이포, μ•„μ΄μ½˜ ν™”
- μ•„ν‹€λž€μ‹œμ•ˆμ˜ μ»΄ν¬λ„ŒνŠΈ μ‹œμŠ€ν…œ νŽ˜μ΄μ§€

레퍼런슀 같은 경우 μˆ˜λ§Žμ€ κΈ°μ—…μ˜ μ‚¬μ΄νŠΈκ°€ μžˆμ—ˆκ³ , κ°€μ΄λ“œλ„ μžˆμ—ˆμœΌλ‚˜ νšŒμ‚¬μ˜ λ‚΄λΆ€ 방식에 λ§žλŠ” 즉, λ””μžμ΄λ„ˆμ™€ κ°œλ°œμžκ°€ ν•¨κ»˜ 이해할 수 있고 κ΄€λ¦¬ν•˜κΈ° μ ν•©ν•œ νŽ˜μ΄μ§€λ“€μ˜ 뢀뢄듀을 μ°Έκ³ ν•˜μ˜€λ‹€.

λ””μžμΈ μ‹œμŠ€ν…œκ³Ό κ°€μ΄λ“œλ₯Ό μ„€κ³„ν•˜κΈ° μœ„ν•΄ μ°Έκ³ ν•œ μžλ£Œλ“€β€¦[made by.sewon]

κ²°κ΅­ λ‚΄λ Έλ˜ 결둠은 μ„œλΉ„μŠ€μ™€ λ””μžμ΄λ„ˆ, κ°œλ°œμžμ—κ²Œ λ§žλŠ” μ•„μ΄μ½˜ λ„€μ΄λ°μ˜ 약속을 μ •ν•˜λŠ” 것이 κ°€μž₯ ν˜„λͺ…ν•˜κ² λ‹€λŠ” νŒλ‹¨μ„ ν–ˆλ‹€.

Progress 03_넀이밍 μž‘μ—…μ„ μˆ˜ν–‰ν•΄λ³΄μž!

결과적으둜 λ§Œλ“€μ–΄μ§„ Icon naming guide [made by.sewon]

λ§Žμ€ λ…Όμ˜μ™€ μƒμ˜ 끝에 μš°λ¦¬μ—κ²Œ κ°€μž₯ λ§žλŠ” λ°©μ‹μœΌλ‘œ μœ„μ™€ 같이 넀이밍 κ·œμΉ™μ„ μ •ν–ˆλ‹€. 이 λ•Œ 쀑점을 λ’€λ˜ 뢀뢄은 β€™κ΄€λ¦¬ν•˜κΈ° νŽΈν•œκ°€?’ + β€˜ν•œ λˆˆμ— μ–΄λ–€ μ•„μ΄μ½˜μΈμ§€ 인지가 κ°€λŠ₯ν•œκ°€?β€™μ˜€λ‹€.

01. κ΄€λ¦¬ν•˜κΈ° νŽΈν•œκ°€

μΉ΄ν…Œκ³ λ¦¬μ˜ λΆ„λ₯˜λ₯Ό 보면 /둜 ꡬ뢄을 ν–ˆλ‹€. /둜 ν‘œν˜„ν–ˆμ„ λ•Œ figma μ—μ„œ variantλ₯Ό μ‰½κ²Œ 관리할 수 있고, variant 의 μš”μ†Œλ“€μ„ DopDown 클릭만으둜 μ‰½κ²Œ μ•„μ΄μ½˜μ„ λ°”κΏ€ 수 μžˆλ‹€.

ν”ΌμŠ€λ§ˆλ‚˜ μŠ€μΌ€μΉ˜μ—μ„œ /둜 κ΅¬λΆ„ν•œ μ•„μ΄μ½˜λ“€μ€ Export ν•˜κ²Œ 되면 μžλ™μœΌλ‘œ νŒŒμΌμ„ μƒμ„±ν•΄μ„œ κ΄€λ¦¬ν•˜κΈ° νŽΈν•˜λ„λ‘ ν•΄μ€€λ‹€. 개발자 μ½”λ“œμ— 파일 μ•ˆμœΌλ‘œ λ“€μ–΄κ°€λŠ” μ½”λ“œκ°€ /λ₯Ό μ‚¬μš©ν•˜κΈ° λ•Œλ¬Έμ— λ”°λ‘œ νŒŒμΌκ΄€λ¦¬ ν•˜μ§€ μ•Šμ•„λ„ λ°”λ‘œ μ½”λ“œλ‘œ μ•„μ΄μ½˜ 적용이 κ°€λŠ₯ν•˜λ‹€.

ν”Όκ·Έλ§ˆ νŽ˜μ΄μ§€λ₯Ό μ΄μš©ν•΄ 개발자 export μš©μ„ λ‚˜λˆ λ†“μ•˜λ‹€.

λ˜ν•œ ν”Όκ·Έλ§ˆμ—μ„œ λ””μžμ΄λ„ˆλ“€μ΄ 관리할 수 μžˆλŠ” asset νŽ˜μ΄μ§€μ™€ κ°œλ°œμžλ“€μ΄ ν•œ λ²ˆμ— λͺ¨λ“  μ•„μ΄μ½˜, 이미지, 둜고, gif λ₯Ό λ‹€μš΄λ°›μ„ 수 μžˆλŠ” νŽ˜μ΄μ§€λ₯Ό λ‚˜λˆ λ†“μ•˜λ‹€.

κ°œλ°œμžλ“€μ€ ν”Όκ·Έλ§ˆμ—μ„œ export ν•œ λ²„νŠΌλ§Œ λˆ„λ₯΄λ©΄ λ””μžμ΄λ„ˆκ°€ μ„€μ •ν•œ 파일둜 κ΄€λ ¨λœ λͺ¨λ“  μ•„μ΄μ½˜λ“€μ„ ν•œ λ²ˆμ— λ‹€μš΄λ°›μ„ 수 있게 λœλ‹€. μ΄λ ‡κ²Œ ν–ˆμ„ λ•Œ κ°œλ°œμžλ“€μ€ μ•„μ΄μ½˜λ“€μ„ μ°Ύμ•„μ„œ 일일이 λ‹€μš΄λ°›κ±°λ‚˜ ν•˜μ§€ μ•Šμ•„λ„ 되고, κ°„νŽΈν•΄μ Έμ„œ νŽΈλ¦¬ν•˜λ‹€λŠ” ν”Όλ“œλ°±μ„ μ£Όμ—ˆλ‹€.

02. ν•œ λˆˆμ— μ–΄λ–€ μ•„μ΄μ½˜μΈμ§€ 인지가 κ°€λŠ₯ν•œκ°€?

[ 02–01. 넀이밍 μˆœμ„œ ]

μœ„μ˜ 넀이밍 κ°€μ΄λ“œλ₯Ό μ •ν•˜κΈ° 전에 λ§Žμ€ 도움이 λ˜μ—ˆλ˜ μ‚¬μ΄νŠΈμ™€ λ‹€μ–‘ν•œ κΈ°μ—…λ“€μ˜ μ‹œν–‰μ°©μ˜€λ“€μ„ μ‚΄νŽ΄λ³΄μ•˜λ‹€. κ·ΈλŸ¬λ©΄μ„œ μš°λ¦¬μ—κ²Œ λ§žλŠ” μ•„μ΄μ½˜μ˜ 방식을 μ •ν•˜κΈ° μœ„ν•΄ μ•„μ΄μ½˜λ“€μ˜ νŠΉμ„±μ„ λ‚˜νƒ€λ‚Ό 수 μžˆλŠ” 큰 [μΉ΄ν…Œκ³ λ¦¬]κ°€ prefix, suffix 에 λ“€μ–΄κ°€κ²Œ λ˜μ—ˆλ‹€.

[ν‘œκΈ°λ²•]
주둜 파슀칼 ν‘œκΈ°λ²•μ„ λ”°λžλ‹€. κ°œλ°œμƒμ—μ„œ ν•œλˆˆμ— μ§κ΄€μ μœΌλ‘œ νŒŒμ•…ν•  수 μžˆλ„λ‘ 함이닀. κ·Έ μ€‘μ—μ„œ direction-property와 colorλŠ” directionκ³Ό propertyκ°€ λ‘˜ 쀑 ν•˜λ‚˜, ν˜Ήμ€ λ‘˜λ‹€ μ‚¬μš©λ˜λŠ” κ²½μš°κ°€ 있고, color도 gradient둜 μž‘μ—…λ˜μ–΄ 색상이 2κ°€μ§€κ°€λ˜λŠ” κ²½μš°κ°€ μžˆμ–΄, ν•œ μΉ΄ν…Œκ³ λ¦¬ λ‚΄μ—μ„œ νŠΉμ„±μ˜ λΆ„λ₯˜λ₯Ό μœ„ν•΄ μΌ€λ°₯ ν‘œκΈ°λ₯Ό λΆ€λΆ„μ μœΌλ‘œ μ°¨μš©ν–ˆλ‹€.

[Prefiix]
Prefixμ—μ„œλŠ” Icon, Image, Logo, gif 둜 크게 4κ°€μ§€λ‘œ λ‚˜λˆ„μ—ˆλ‹€. κΈ°λŠ₯λ³„λ‘œ μ½”λ“œμž‘μ—…μ΄λ‚˜ νŠΉμ„±λ“€μ΄ λ‹¬λΌμ§€λŠ” 것을 μœ„μ£Όλ‘œ 크게 λΆ„λ₯˜λ₯Ό ν–ˆλ‹€. Icon 의 경우, ν”„λ‘ νŠΈμ—μ„œ .svg둜 μž‘μ—…ν•˜λ©° λ””μžμ΄λ„ˆλ“€μ˜ μž‘μ—…μ—λ„ μΌμ •ν•œ 크기, νŒ¨λ”©κ°’μ΄ μ‘΄μž¬ν•˜μ§€λ§Œ, ImageλŠ” .png의 ν™•μž₯자둜 μž‘μ—…ν•˜κ³  νŒ¨λ”©κ°’μ΄ μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ”λ‹€.
prefixλŠ” λΆ„λ₯˜λ§Œ 크게 되면 되기 λ•Œλ¬Έμ— μ‰½κ²Œ μ•Œμ•„λ³Ό 수 있고 μ½”λ“œμ˜ 길이λ₯Ό 쀄일 수 μžˆλŠ” μ€„μž„λ§μ„ μ‚¬μš©ν–ˆλ‹€.

[Suffix]
suffix μ—μ„œλŠ” 주둜 μ‚¬μš©λ˜λŠ” μƒνƒœκ°’κ³Ό ν‘œν˜„ν•  수 μžˆλŠ” νŠΉμ„±λ“€μ„ μ°¨λ‘€λ‘œ λ‚˜μ—΄ν•˜μ˜€λ‹€.

03. 결과적으둜 μ†Œν†΅ν•˜κΈ°κ°€ νŽΈλ¦¬ν•΄μ‘Œλ‹€!

결과적으둜 κ°œλ°œμžμ™€ λ””μžμ΄λ„ˆ λͺ¨λ‘ μ•„μ΄μ½˜μ„ 보고 ν•œ μ€„λ‘œ ν‘œν˜„ν•  수 있게 λ˜μ—ˆκ³ , ν•œ 쀄을 보고도 μ–΄λ–€ μ•„μ΄μ½˜μΈμ§€ λ°”λ‘œ νŒŒμ•…μ΄ κ°€λŠ₯ν•˜κ²Œλ˜μ—ˆλ‹€. 이λ₯Ό 톡해, μŠ¬λž™μœΌλ‘œ μ›Œλ”©λ§Œ μž…λ ₯ν–ˆμ„ λ•Œ, ν˜Ήμ€ 말둜 μ „λ‹¬ν–ˆμ„ λ•Œ, λ°”λ‘œ μ†Œν†΅μ΄ κ°€λŠ₯ν•΄μ‘Œλ‹€.

κ·Έ μ „μ—λŠ” μš”μ²­μ΄ 였게되면 β€œ γ…‡γ…‡λ‹˜, μš”κΈ° μš” μ•„μ΄μ½˜μ΄μš”.” ν•˜λ©΄μ„œ 화면을 λ³΄λ©΄μ„œ μ–˜κΈ°ν•˜κ±°λ‚˜ μΊ‘μ³ν•˜κ±°λ‚˜ ν–ˆμ„ν…λ° κ°œλ°œμžμ—κ²Œ λ¬Έμ„œ μž‘μ„±ν•˜κΈ°λ„ 훨씬 μˆ˜μ›”ν•΄μ§€κ³  μ†Œν†΅ν•˜κΈ°λ„ νŽΈλ¦¬ν•΄μ‘Œλ‹€.

Insight_넀이밍 μž‘μ—…μ„ 마치며..

01. λ‚œκ΄€ _ λ§ˆν¬μ—… 개발자의 ν•„μš”μ„±μ„ κΉ¨λ‹¬μŒ.

(이 뢀뢄은 μΆ”ν›„ λ‚œκ΄€μ΄λ‚˜ μš°μ—¬κ³‘μ ˆμ— λŒ€ν•΄μ„œ 글을 써볼 κ³„νšμ΄λ‹€.)

넀이밍을 μ§„ν–‰ν•˜λ©΄μ„œ μ„œλ‘œ μ΄ν•΄λ„μ˜ 차이가 μžˆμ—ˆλ‹€. κ°œλ°œμžμ™€ λ””μžμ΄λ„ˆ μ„œλ‘œ μƒκ°ν•˜λŠ” 게 λ‹¬λžλ˜ 것이닀.

β†’ λ§ˆν¬μ—… κ°œλ°œμžκ°€ λ”°λ‘œ μ•„μ΄μ½˜μ„ μ½”λ“œν™” μž‘μ—…μ„ ν•΄μ„œ ν”„λ‘ νŠΈ κ°œλ°œμžκ°€ μ½”λ“œλ‘œ λΉ λ₯΄κ²Œ μ μš©κ°€λŠ₯ν•˜λ„λ‘ λ§Œλ“€μ–΄μ•Όν•˜λŠ” 과정이 μ‹œμŠ€ν…œμ„ λ§Œλ“€ λ•Œ ν•„μš”ν•˜λ‹€λŠ” 것을 μ•Œκ²Œ λ˜μ—ˆλ‹€.

02. 개발자의 언어에 따라 type, 넀이밍 방식이 λ³€ν™”λœλ‹€.

개발자의 언어방식에 λ”°λΌμ„œ $λ‚˜ / ,λ“± 써야 ν•˜λŠ” 방식이 λ‹¬λΌμ‘Œλ‹€. λ˜ν•œ, class λ₯Ό 지정할 지, νƒ€μž…λ³„λ‘œ 지정할 지가 달라진닀.

그렇기에 넀이밍을 μ •ν•  λ•Œ ν˜‘μ—…ν•˜λŠ” κ°œλ°œμžλ“€κ³Ό μ—„μ²­λ‚œ μ†Œν†΅μ„ ν•¨κ»˜ ν•˜λ©΄μ„œ λ””μžμ΄λ„ˆλ“€μ˜ 방식과 κ°œλ°œμžλ“€μ΄ μ‚¬μš©ν•˜λŠ” 방식을 λ§žμΆ°λ‚˜κ°€μ•Ό ν•œλ‹€.

또 λ„€μ΄λ°μ—λŠ” μˆœμ„œκ°€ μžˆλŠ”λ°, κ°œλ°œμžλ“€μ΄ 업무에 μ μš©ν•  λ•Œ μˆœμ„œλŠ” μ€‘μš”ν•˜μ§€ μ•Šλ‹€. κ·ΈλŸ¬λ‚˜, μ†Œν†΅μ„ ν•  λ•Œ μ΄λŠ” μ—­λŸ‰μ„ λ°œνœ˜ν•œλ‹€. μˆœμ„œλŠ” κ°œλ°œμžμ™€ λ””μžμ΄λ„ˆκ°€ μ•„μ΄μ½˜μ˜ μƒνƒœλ₯Ό 말할 λ•Œ μΌμ’…μ˜ μ•½μ†μ²˜λŸΌ 역할을 ν•˜κ²Œ 되기 λ•Œλ¬Έμ— μ€‘μš”ν•˜λ‹€κ³  ν•  수 μžˆλ‹€. λ˜ν•œ, λ””μžμ΄λ„ˆλ“€μ—κ²Œ νŒŒμΌκ΄€λ¦¬μ™€ asset 관리λ₯Ό μœ„ν•΄μ„œλŠ” 넀이밍 μˆœμ„œλŠ” μ€‘μš”ν•˜λ‹€.

03. μ•„μ΄μ½˜ 넀이밍 μ˜μ—­μ—λŠ” 좔후에 λ””μžμ΄λ„ˆ μ˜μ—­κ³Ό 개발자 μ˜μ—­μ˜ ꡬ뢄 ν•„μš”

(Progress 3 에 μ°Έμ‘°)

ν˜„μž¬ 방식은 λ””μžμ΄λ„ˆμ˜ asset 관리와 κ°œλ°œμžκ°€ λ°”λ‘œ νŒŒμΌμ— 넣을 수 μžˆλŠ” λ°©μ‹μœΌλ‘œ 진행을 ν–ˆλŠ”λ°, 이 λ°©μ‹μ˜ μž₯단점과 λ‚±κ°œ 파일의 μž₯단점이 μžˆκΈ°μ— 각자 μ‹€λ¬΄μžλ“€μ΄ 업무λ₯Ό 효율적으둜 ν™œμš©ν•  수 μžˆλŠ” 방식을 κ³ λ―Όν•˜μ—¬ 넀이밍을 μ •ν•΄μ•Όκ² λ‹€λŠ” 생각이 λ“€μ—ˆλ‹€.

04. 파일둜 정리 vs ν•œ νŒŒμΌμ— λ‚±κ°œλ‘œ 정리

ν˜„μž¬ ν•„μž(UX/UIλ””μžμ΄λ„ˆ)의 방식은 파일둜 정리λ₯Ό ν•˜λŠ” 방법을 νƒν–ˆλ‹€. 그러자 ν”„λ‘ νŠΈ κ°œλ°œμžλΆ„λ“€μ˜ λ°©μ‹μ—μ„œ λ‘˜λ‹€ 상관은 μ—†μœΌλ‚˜ 각각 μž₯단점이 μžˆλŠ” λ“― ν•΄ λ³΄μ˜€λ‹€.

μ•žμœΌλ‘œ ν•΄μ•Όν•  것.

μš°λ¦¬νŒ€μ˜ λ””μžμΈ κ°€μ΄λ“œκ°€ ν•„μš”ν•œ μΉ΄ν…Œκ³ λ¦¬λ“€μ΄ 많기 λ•Œλ¬Έμ— ν•œ μΉ΄ν…Œκ³ λ¦¬λ₯Ό 깊이있게 ν•˜λŠ” 것은 μž μ‹œ 미뀄두고, ν•œ μΉ΄ν…Œκ³ λ¦¬λ“€μ˜ 큰 ν‹€λΆ€ν„° μ •λ¦½ν•΄λ‚˜κ°€μžκ³  결둠을 λ‚΄λ¦¬κ²Œ λ˜μ—ˆλ‹€.

  1. μ•žμœΌλ‘œ 해야될 것은 λ§Žμ§€λ§Œ, 이 λ‹€μŒμœΌλ‘œλŠ” Color Guide λ₯Ό μ™„μ„±ν•΄ λ‚˜κ°ˆ κ³„νšμ΄λ‹€.
  2. μ§€κΈˆ ν˜„μž¬λ‘œμ„œλŠ” svg νŒŒμΌμ„ μ½”λ“œμ—μ„œ color값을 λ°”λ‘œ λ°”κΏ€ 수 μ—†μ–΄μ„œ μ»¬λŸ¬λ³„λ‘œ λ””μžμ΄λ„ˆκ°€ μ•„μ΄μ½˜μ„ λ§Œλ“€κ³  κ°œλ°œμžκ°€ λ‹€μš΄ λ°›μ•„μ„œ μ‚¬μš©ν•˜λŠ” ν˜•νƒœμ˜€λ‹€. 이의 단점은, νŒŒμΌμš©λŸ‰μ΄ μ»€μ§€λ©΄μ„œ 웹이 λŠλ €μ§€κ²Œ 되기 λ•Œλ¬Έμ— 이λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄ svg λ₯Ό μ½”λ“œν™”ν•˜μ—¬ μš©λŸ‰μ„ μ€„μ΄λŠ” 방식을 λ‹€μŒ μ•„μ  λ‹€λ‘œ κ°€μ Έκ°ˆ μ˜ˆμ •μ΄λ‹€.

μ°Έμ‘°(κ΄€λ ¨)링크

--

--