λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
자격증πŸͺͺ/μ •λ³΄μ²˜λ¦¬κΈ°μ‚¬ πŸ“š

μ •λ³΄μ²˜λ¦¬κΈ°μ‚¬ μ‹€κΈ°_화면섀계 1πŸ“š

by @ENFJ 2022. 3. 14.

UI(user interface) μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€ : 넓은 μ˜λ―Έμ—μ„œ μ‚¬μš©μžμ™€ μ‹œμŠ€ν…œ μ‚¬μ΄μ—μ„œ μ˜μ‚¬μ†Œν†΅ν•  수 μžˆλ„λ‘ κ³ μ•ˆλœ 물리적, κ°€μƒμ˜ λ§€κ°œμ²΄μ΄λ‹€.

 

UI ν‘œμ€€ : λ””μžμΈ μ² ν•™κ³Ό 원칙 기반 ν•˜μ— 전체 μ‹œμŠ€ν…œμ— κ³΅ν†΅μœΌλ‘œ μ μš©λ˜λŠ” ν™”λ©΄ κ°„ 이동, 화면ꡬ성 등에 κ΄€ν•œ κ·œμ•½μ΄λ‹€.

 

UI μŠ€νƒ€μΌ κ°€μ΄λ“œ ꡬ성 : UI의 톡일과 일관적인 화면을 μœ„ν•΄μ„œ μ‹œμŠ€ν…œμ΄ μ§€μΌœμ•Ό ν•  UI μš”μ†Œ μ •μ˜μ™€ ν™”λ©΄ 섀계원칙을 μ œμ‹œν•œλ‹€.

 

ν”„λ‘œν† νƒ€μž…: 컴퓨터 μ‹œμŠ€ν…œμ΄λ‚˜ μ†Œν”„νŠΈμ›¨μ–΄ 섀계 λ˜λŠ” μ„±λŠ₯, κ΅¬ν˜„ κ°€λŠ₯μ„±, 운용 κ°€λŠ₯성을 ν‰κ°€ν•˜κ±°λ‚˜ μš”κ΅¬μ‚¬ν•­μ„ μ’€ 더 잘 μ΄ν•΄ν•˜κ³  κ²°μ •ν•˜κΈ° μœ„ν•˜μ—¬ 전체적인 κΈ°λŠ₯을 κ°„λž΅ν•œ ν˜•νƒœλ‘œ κ΅¬ν˜„ν•œ μ‹œμ œν’ˆμ΄λ‹€.

 

UI μ»¨μ…‰μ…˜: μ •λ¦¬λœ μš”κ΅¬μ‚¬ν•­μ„ κ΅¬μ²΄ν™”ν•˜λŠ” λ‹¨κ³„λ‘œ ν™”λ©΄ λ””μžμΈ 단계전에 λŒ€ν‘œ ν™”λ©΄ 섀계λ₯Ό μ§„ν–‰ν•˜λŠ” 단계이닀.

 


UX (User eXperience): μ‚¬μš©μž κ²½ν—˜ 

UI (User interface) : μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€

 

 

UI μœ ν˜• : CLI, GUI, NUI, OUI  [CG NO! 둜 μ™Έμš°λ©΄ 됨]

CLI: 정적인 ν…μŠ€νŠΈ 기반 μΈν„°νŽ˜μ΄μŠ€ , λͺ…λ Ήμ–΄λ₯Ό ν…μŠ€νŠΈλ‘œ μž…λ ₯ν•˜μ—¬ μ‘°μž‘ν•˜λŠ” μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€

GUI: κ·Έλž˜ν”½ λ°˜μ‘ 기반 μΈν„°νŽ˜μ΄μŠ€ , κ·Έλž˜ν”½ ν™˜κ²½μ„ 기반으둜 ν•œ λ§ˆμš°μŠ€λ‚˜ μ „μžνŽœμ„ μ΄μš©ν•˜λŠ” μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€

NUI: 직관적 μ‚¬μš©μž λ°˜μ‘ 기반 μΈν„°νŽ˜μ΄μŠ€ , ν‚€λ³΄λ“œλ‚˜ 마우슀 없이 신체 λΆ€μœ„λ₯Ό μ΄μš©ν•˜λŠ” μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€, ν„°μΉ˜, μŒμ„± 포함

OUI : 유기적 μƒν˜Έμž‘μš© 기반 μΈν„°νŽ˜μ΄μŠ€, ν˜„μ‹€μ— μ‘΄μž¬ν•˜λŠ” λͺ¨λ“  사물이 μž…μΆœλ ₯ μž₯치둜 λ³€ν™”ν•  수 μžˆλŠ” μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€.


 

UI 섀계원칙 : 직관성 , μœ νš¨μ„±, ν•™μŠ΅μ„±, μœ μ—°μ„± [ 정닡을 직접 μœ λ„ 그리고 ν•™μŠ΅ μœ λ„ ]

 

1) 직관성: λˆ„κ΅¬λ‚˜ μ‰½κ²Œ μ΄ν•΄ν•˜κ³  μ‚¬μš©ν•  수 μžˆμ–΄μ•Ό ν•œλ‹€.

 

2) μœ νš¨μ„±: μ‚¬μš©μžμ˜ λͺ©μ μ„ μ •ν™•ν•˜κ²Œ λ‹¬μ„±ν•˜μ—¬μ•Ό ν•œλ‹€.

 

3) ν•™μŠ΅μ„±: λˆ„κ΅¬λ‚˜ μ‰½κ²Œ 배우고 읡힐 수 μžˆμ–΄μ•Ό ν•œλ‹€.

 

4) μœ μ—°μ„±: μ‚¬μš©μžμ˜ μš”κ΅¬μ‚¬ν•­μ„ μ΅œλŒ€ν•œ μˆ˜μš©ν•˜λ©° 였λ₯˜λ₯Ό μ΅œμ†Œν™” ν•΄μ•Ό ν•œλ‹€.

 

 


 

이해 κ΄€κ³„μžλ“€κ³Όμ˜ ν™”λ©΄ ꡬ성을 ν˜‘μ˜ν•˜κ±°λ‚˜ μ„œλΉ„μŠ€μ˜ κ°„λž΅ν•œ 흐름을 κ³΅μœ ν•˜κΈ° μœ„ν•΄ ν™”λ©΄ λ‹¨μœ„μ˜ λ ˆμ΄μ•„μ›ƒμ„ μ„€κ³„ν•˜λŠ” UI ν™”λ©΄ 섀계 방식은 무엇인지 μ“°μ‹œμ˜€.

: 와이어 ν”„λ ˆμž„(wire-frame)

 

UI ν’ˆμ§ˆμš”κ΅¬ 사항

1) κΈ°λŠ₯μ„±

2) μ‹ λ’°μ„±

3) μ‚¬μš©μ„±

 -. 이해성 : μ†Œν”„νŠΈμ›¨μ–΄μ˜ 논리적인 κ°œλ…κ³Ό 적용 κ°€λŠ₯성을 λΆ„κ°„ν•˜λŠ”λ° ν•„μš”ν•œ μ‚¬μš©μžμ˜ λ…Έλ ₯ 정도에 λ”°λ₯Έ μ†Œν”„νŠΈμ›¨μ–΄ νŠΉμ„±

 -. ν•™μŠ΅μ„± : μ†Œν”„νŠΈμ›¨μ–΄ μ• ν”Œλ¦¬μΌ€μ΄μ…˜ μ΅νžˆλŠ” 데 ν•„μš”ν•œ μ‚¬μš©μžμ˜ λ…Έλ ₯ 정도에 λ”°λ₯Έ νŠΉμ„±

 -. μš΄μš©μ„± : μ†Œν”„νŠΈμ›¨μ–΄μ˜ ν™œμš©κ³Ό 운용 ν†΅μ œμ— ν•„μš”ν•œ μ‚¬μš©μžμ˜ λ…Έλ ₯ 정도에 λ”°λ₯Έ νŠΉμ„±

 

 

4) νš¨μœ¨μ„±

5) μœ μ§€ λ³΄μˆ˜μ„±

6) 이식성

 

 


UI 섀계지침 

: μ‚¬μš©μž 쀑심, 일관성, λ‹¨μˆœμ„±, κ²°κ³Ό 예츑 κ°€λŠ₯, κ°€μ‹œμ„±, ν‘œμ€€ν™”, μ ‘κ·Όμ„±, λͺ…ν™•μ„±, 였λ₯˜ λ°œμƒν•΄κ²° 이 μžˆλ‹€.

 

μ‚¬μš©μ„± ν…ŒμŠ€νŠΈ : μ΅œμ’… 고객인 μ‚¬μš©μžκ°€ 쓰기에 νŽΈν•œμ§€ μ—¬λΆ€ ν™•μΈν•˜λŠ” ν…ŒμŠ€νŠΈ