✏️ Study/자격증 | μ •λ³΄μ²˜λ¦¬κΈ°μ‚¬

[μ •λ³΄μ²˜λ¦¬κΈ°μ‚¬] 1κ³Όλͺ© μ†Œν”„νŠΈμ›¨μ–΄ 섀계 | ν™”λ©΄ 섀계

🩷 민영 2024. 1. 9. 15:45

* 개인 ν•™μŠ΅μ„ μœ„ν•œ μ •λ¦¬μž…λ‹ˆλ‹€.

1κ³Όλͺ© μ†Œν”„νŠΈμ›¨μ–΄ 섀계
2μž₯ ν™”λ©΄ 섀계


010. μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€

3. μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€μ˜ κ΅¬λΆ„
- CLI : λͺ…λ Ήκ³Ό μΆœλ ₯이 ν…μŠ€νŠΈ ν˜•νƒœ
- GUI : μ•„μ΄μ½˜+메뉴 λ§ˆμš°μŠ€λ‘œ μ„ νƒν•˜μ—¬ μž‘업을 μˆ˜ν–‰ν•˜λŠ” κ·Έλž˜ν”½ ν™˜κ²½
- NUI : λ§ / ν–‰λ™μœΌλ‘œ κΈ°κΈ° μ‘°μž‘

4. μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€μ˜ κΈ°λ³Έ μ›μΉ™
- μ§κ΄€μ„±
- μœ νš¨μ„±
- ν•™μŠ΅μ„±
- μœ μ—°μ„±

011. UI ν‘œμ€€ 및 μ§€μΉ¨

μ›Ήμ˜ 3μš”μ†Œ : μ›Ή ν‘œμ€€, μ›Ή μ ‘κ·Όμ„±, μ›Ή ν˜Έν™˜μ„±

λ‚΄λΉ„κ²Œμ΄μ…˜
: λ‚΄λΉ„κ²Œμ΄μ…˜μ€ μ‚¬μš©μžκ°€ μ‚¬μ΄νŠΈμ—μ„œ μ›ν•˜λŠ” 정보λ₯Ό λΉ λ₯΄κ²Œ 찾을 수 μžˆλ„λ‘ ν•œλ‚΄ν•˜λŠ” κ²ƒμœΌλ‘œ 자용자 쀑심


- μ›ν•˜λŠ” μ •보λ₯Ό μ‰½κ³  λΉ λ₯΄κ²Œ μ°Ύμ„ μˆ˜ μžˆλ„둝 λ‹€μ–‘ν•œ κ²½λ‘œ or λ°©λ²• μ œκ³΅
- λ©”뉴, μ‚¬μ΄νŠΈλ§΅, λ²„νŠΌ, λ§ν¬λ“±μœΌλ‘œ κ΅¬μ„±λ˜λŠ”λ°, μ΄λ“€ κ΅¬μ„± μš”μ†ŒλŠ” μ‚¬μš©μžκ°€ μ§κ΄€μ μœΌλ‘œ μ°Ύμ•„ μ‚¬μš©ν•  μˆ˜ μžˆλ„둝 μ„€κ³„, μ‚¬μš©μžκ°€ ν˜Όλ™ν•˜μ§€ μ•Šλ„둝 μ „체 νŽ˜μ΄μ§€μ—μ„œ μΌκ΄€μ„±μ΄ μžˆμ–΄μ•Όν•¨

 

012. UI 섀계 도ꡬ

2. 와이어 ν”„λ ˆμž„

: μ™€μ΄μ–΄ν”„λ ˆμž„μ€ 기획 λ‹¨κ³„μ˜ μ΄ˆκΈ°μ— μ œμž‘ν•˜λŠ” κ²ƒμœΌλ‘œ, νŽ˜μ΄μ§€μ— λŒ€ν•œ 개랡적인 λ ˆμ΄μ•„μ›ƒ. UI μš”μ†Œ 등에 λŒ€ν•œ λΌˆλŒ€λ₯Ό μ„€κ³„ν•˜λŠ” 단계

- 각 νŽ˜μ΄μ§€μ˜ μ˜μ—­ ꡬ뢄, μ½˜ν…μΈ , ν…μŠ€νŠΈ 배치 λ“± ν™”λ©΄ λ‹¨μœ„λ‘œ 섀계

- μ™€μ΄μ–΄ν”„λ ˆμž„ 툴 : 손그림, νŒŒμ›Œν¬μΈνŠΈ, ν‚€λ…ΈνŠΈ, μŠ€μΌ€μΉ˜, 일러슀트, 포토샡 λ“±

 

3. λͺ©μ—…

: μ™€μ΄μ–΄ν”„λ ˆμž„λ³΄λ‹€ μ’€ 더 μ‹€μ œν™”λ©΄κ³Ό μœ μ‚¬ν•˜κ²Œ λ§Œλ“  정적인 ν˜•νƒœ λͺ¨ν˜•

- λͺ©μ—… 툴 : νŒŒμ›Œ λͺ©μ—…, λ°œμ‚¬λ―Ή λͺ©μ—…

 

4. μŠ€ν† λ¦¬λ³΄λ“œ

: μ™€μ΄μ–΄ν”„λ ˆμž„μ— μ½˜ν…μΈ μ— λŒ€ν•œ μ„€λͺ…, νŽ˜μ΄μ§€ κ°„ 이동  흐름 등을 μΆ”κ°€ν•œ λ¬Έμ„œ

- λ””μžμ΄λ„ˆμ™€ κ°œλ°œμžκ°€ μ΅œμ’…μ μœΌλ‘œ μ°Έκ³ ν•˜λŠ” μž‘μ—… μ§€μΉ¨μ„œ

- μŠ€ν† λ¦¬λ³΄λ“œ 툴 : νŒŒμ›Œν¬μΈνŠΈ, ν‚€λ…ΈνŠΈ, μŠ€μΌ€μΉ˜, Axure λ“±

 

5. ν”„λ‘œν† νƒ€μž…

: μ‹€μ œ κ΅¬ν˜„λœ κ²ƒμ²˜λŸΌ ν…ŒμŠ€νŠΈκ°€ κ°€λŠ₯ν•œ 동적인 ν˜•νƒœ λͺ¨ν˜•

- μ‚¬μš©μ„± ν…ŒμŠ€νŠΈλ‚˜ μž‘μ—…μž κ°„ μ„œλΉ„μŠ€ 이해λ₯Ό μœ„ν•΄ μž‘μ„±ν•˜λŠ” μƒ˜ν”Œ

- ν”„λ‘œν† νƒ€μž… 툴 : HTML/CSS, Axure, Flinto, 넀이버 ν”„λ‘œν† λ‚˜μš°, 카카였 였븐 λ“±

 

013. UI μš”κ΅¬μ‚¬ν•­ 확인

014. ν’ˆμ§ˆ μš”κ΅¬μ‚¬ν•­

 

1. ν’ˆμ§ˆ μš”κ΅¬μ‚¬ν•­

- ISO/IEX 9126 : κΈ°λŠ₯μ„±, μ‹ λ’°μ„±, μ‚¬μš©μ„±, νš¨μœ¨μ„±, μœ μ§€λ³΄μˆ˜μ„±, 이식성

 

015. UI ν”„λ‘œν† νƒ€μž… μ œμž‘ 및 κ²€ν† 

1. UI ν”„λ‘œν† νƒ€μž…μ˜ κ°œμš”

: μ‚¬μš©μž μš”κ΅¬μ‚¬ν•­μ„ 기반으둜 μ‹€μ œ λ™μž‘ν•˜λŠ” κ²ƒμ²˜λŸΌ λ§Œλ“  동적인 ν˜•νƒœμ˜ λͺ¨ν˜•μœΌλ‘œ, ν…ŒμŠ€νŠΈ κ°€λŠ₯

- μ‚¬μš©μžμ˜ μš”κ΅¬μ‚¬ν•­μ„ κ°œλ°œμžκ°€ 맞게 ν•΄μ„ν–ˆλŠ”μ§€ κ²€μ¦ν•˜κΈ° μœ„ν•œ κ²ƒμœΌλ‘œ, μ΅œλŒ€ν•œ κ°„λ‹¨ν•˜κ²Œ λ§Œλ“€μ–΄μ•Ό ν•œλ‹€.

- 일뢀 핡심적인 κΈ°λŠ₯λ§Œμ„ μ œκ³΅ν•˜μ§€λ§Œ, μ΅œμ’… μ œν’ˆμ˜ μž‘λ™ 방식을 이해 μ‹œν‚€λŠ”λ° ν•„μš”ν•œ κΈ°λŠ₯은 λ°˜λ“œμ‹œ 포함

- μ‚¬μš©μžμ˜ μš”κ΅¬μ‚¬ν•­μ΄ λͺ¨λ‘ 반영될 λ•ŒκΉŒμ§€ ν”„λ‘œν† νƒ€μž…μ„ κ³„μ†ν•˜μ—¬ κ°œμ„ ν•˜κ³  보완

 

3. μ’…λ₯˜

- 페이퍼 ν”„λ‘œν† νƒ€μž…

- λ””μ§€ν„Έ ν”„λ‘œν† νƒ€μž…

 

** μ•„μ΄ν…μ²˜κ°€ ν™•μ •λœ 이후 ν”„λ‘œμ νŠΈμ˜ μ‹€μ œ λΆ„μ„μž‘μ—…μ΄ μ™„λ£Œ λ˜κΈ°μ „ μ§„ν–‰

 


였늘의 곡뢀 ν›„κΈ°

UI 뢀뢄은 μ›λž˜ μž¬λ―Έμžˆμ–΄ν–ˆκ³ , μ—¬λŸ¬ ν”„λ‘œμ νŠΈλ₯Ό μ§„ν–‰ν•˜λ©΄μ„œ 직접 λͺΈμœΌλ‘œ μ²΄ν—˜ν•˜κ³  느꼈던 λ‚΄μš©μ΄λΌ 쉽고 재미있게 곡뢀할 수 μžˆμ—ˆλ‹€!