λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
μ‹œλ„/ꡭ비지원

[D+54] ν™”λ©΄ 섀계

by πŸ‡λ°•λ΄‰λ΄‰πŸ‡ 2022. 12. 7.

 

 

ꡭ비지원 D+54

-  ν™”λ©΄ 섀계 -

 


 

화면섀계

• μ†Œν”„νŠΈμ›¨μ–΄ μ•„ν‚€ν…μ²˜

- μ•„κΈ°ν…μ²˜λŠ” κ°œλ°œν•˜κ³ μž ν•˜λŠ” μ†Œν”„νŠΈμ›¨μ–΄μ˜ 사전 μž‘μ—…μ„ ν†΅ν•˜μ—¬ μ†Œν”„νŠΈμ›¨μ–΄ κ°œλ°œμ„ μ‰½κ²Œ ν•˜λ„λ‘ κΈ°λ³Έ 틀을 λ§Œλ“œλŠ” 것이닀.

- 비ꡐ적 κ°„λ‹¨ν•œ μ†Œν”„νŠΈμ›¨μ–΄ κ°œλ°œμ—λŠ” μ†Œν”„νŠΈμ›¨μ–΄ μ•„ν‚€ν…μ²˜λ₯Ό ν•˜μ§€ μ•Šμ•„λ„ ν°λ¬Έμ œκ°€ λ˜μ§€λŠ” μ•ŠλŠ”λ‹€.

- κ°œλ°œν•˜κ³ μž ν•˜λŠ” μ†Œν”„νŠΈμ›¨μ–΄ μ‹œμŠ€ν…œμ„ λ‹€μ–‘ν•œ μ‹œκ°μ—μ„œ λͺ¨ν˜•ν™”ν•˜κ³  문제의 νŠΉμ„±κ³Ό λ³Έμ§ˆμ„ νŒŒμ•…ν•˜κ³  ν•„μš”μ— 따라 ν™œμš©ν•  λ°©μ•ˆμ΄ μš”κ΅¬λ˜λ©΄μ„œ μ•„ν‚€ν…μ²˜κ°€ ν•„μš”λ‘œ ν•΄μ‘Œλ‹€.

 

• UI

- μ‚¬μš©μžμ™€ 컴퓨터 μƒν˜Έ κ°„μ˜ μ†Œν†΅μ„ μ›ν™œνžˆ ν•˜κ²Œ λ„μ™€μ£ΌλŠ” μ—°κ³„μž‘μ—…μ΄λ‹€.

- ν˜„μž¬μ— μž‘μ—… μˆ˜ν–‰ 내역을 ꡬ체적으둜 μž‘μ„±ν•˜λŠ” κΈ°λŠ₯ μœ„μ£Όμ—μ„œ λ‹¨μˆœν•œ κΈ°λŠ₯ 전달이 μ•„λ‹Œ μ •λ³΄μ˜ λ‚΄μš©κ³Ό κ·Έ μ•ˆμ— ν¬ν•¨λœ λœ»μ„ μ „λ‹¬ν•˜λŠ” ν‘œν˜„ λ°©λ²•μœΌλ‘œ λ³€ν™”ν•˜μ˜€λ‹€.

 

UI 섀계 원칙 (λͺ©μ  - "κ°œμΈν™”")

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

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

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

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

 

UI 섀계 지침

- μ‚¬μš©μž 쀑심 : μ‚¬μš©μžκ°€ μ΄ν•΄ν•˜κΈ° νŽΈν•˜κ³  μ‰½κ²Œ μ‚¬μš©ν•  수 μžˆλŠ” ν™˜κ²½μ„ μ œκ³΅ν•˜λ©° μ‹€μ‚¬μš©μžμ— λŒ€ν•œ 이해가 바탕이 λ˜μ–΄μ•Ό ν•œλ‹€.

- 일관성 : λ²„νŠΌμ΄λ‚˜ μ‘°μž‘ 방법을 μ‚¬μš©μžκ°€ κΈ°μ–΅ν•˜κΈ° 쉽고 λΉ λ₯Έ μŠ΅λ“μ΄ κ°€λŠ₯ν•˜κ²Œ μ„€κ³„ν•˜μ—¬μ•Ό ν•œλ‹€.

- λ‹¨μˆœμ„± : μ‘°μž‘ 방법은 κ°€μž₯ κ°„λ‹¨ν•˜κ²Œ μž‘λ™μ΄ κ°€λŠ₯ν•˜λ„λ‘ ν•˜μ—¬ 인지적 뢀담을 κ°μ†Œμ‹œμΌœμ•Ό ν•œλ‹€.

- κ²°κ³Ό 예츑 κ°€λŠ₯ : μž‘λ™μ‹œν‚¬ κΈ°λŠ₯만 보고도 κ²°κ³Ό 예츑이 κ°€λŠ₯ν•˜μ—¬μ•Ό ν•œλ‹€.

- κ°€μ‹œμ„± : μ£Όμš” κΈ°λŠ₯을 메인 화면에 λ…ΈμΆœν•˜μ—¬ μ‘°μž‘μ΄ 쉽도둝 ν•˜μ—¬μ•Ό ν•œλ‹€.

- ν‘œμ€€ν™” : λ””μžμΈμ„ ν‘œμ€€ν™”ν•˜μ—¬ κΈ°λŠ₯ ꡬ쑰의 μ„ ν–‰ ν•™μŠ΅ 이후 μ‰½κ²Œ μ‚¬μš©ν•  수 μžˆμ–΄μ•Ό ν•œλ‹€.

- μ ‘κ·Όμ„± : μ‚¬μš©μžμ˜ 직무, μ—°λ Ή, 성별 λ“± λ‹€μ–‘ν•œ 계측을 μˆ˜μš©ν•˜μ—¬μ•Ό ν•œλ‹€.

- λͺ…ν™•μ„± : μ‚¬μš©μžκ°€ κ°œλ…μ μœΌλ‘œ μ‰½κ²Œ μΈμ§€ν•˜μ—¬μ•Ό ν•œλ‹€.

- 였λ₯˜ λ°œμƒ ν•΄κ²° : μ‚¬μš©μžκ°€ 였λ₯˜μ— λŒ€ν•œ 상황을 μ •ν™•νžˆ 인지할 수 μžˆμ–΄μ•Ό ν•œλ‹€.

 

μ†Œν”„νŠΈμ›¨μ–΄ μ•„ν‚€ν…μ²˜ ν’ˆμ§ˆ μš”κ΅¬μ‚¬ν•­ νŠΉμ„±

- κΈ°λŠ₯μ„±(Functionality) : μš”κ΅¬λœ κΈ°λŠ₯이 μ œκ³΅λ˜λŠ”κ°€?

- μ‹ λ’°μ„±(Reliability) : λ―Ώμ„λ§Œν•œ μ†Œν”„νŠΈμ›¨μ–΄μΈκ°€?

- μ‚¬μš©μ„±(Usability) : μ‚¬μš©ν•˜κΈ° μ‰¬μš΄ μ†Œν”„νŠΈμ›¨μ–΄μΈκ°€?

- νš¨μœ¨μ„±(Efficiency) : μ–Όλ§ˆλ‚˜ 효율적인 μ†Œν”„νŠΈμ›¨μ–΄μΈκ°€?

- μœ μ§€ λ³΄μˆ˜μ„±(Maintainability) : μˆ˜μ •μ΄ μš©μ΄ν•œ μ†Œν”„νŠΈμ›¨μ–΄μΈκ°€?

- 이식성(Portability) : ν™˜κ²½ μ „ν™˜μ΄ μš©μ΄ν•œκ°€?

 

• Prototype

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

- μ„€νŠΉκ³Ό 이해λ₯Ό 돕기 μœ„ν•΄ λ§Œλ“ κ²ƒμ΄λ‹€.

- 검증을 μœ„ν•œ κ²ƒμ΄λ―€λ‘œ μ΅œλŒ€ν•œ κ°„λ‹¨ν•˜κ²Œ λ§Œλ“ λ‹€.

 

• UI 섀계 원리

μ‹€ν–‰μ°¨λ₯Ό 쀄이기 μœ„ν•œ UI 섀계 원리

1) μ‚¬μš© μ˜λ„ νŒŒμ•…

2) ν–‰μœ„ μˆœμ„œ κ·œμ •

3) ν–‰μœ„μ˜ μˆœμ„œλŒ€λ‘œ μ‹€ν–‰ 

 

평가 μ°¨λ₯Ό 쀄이기 μœ„ν•œ UI 섀계 원리

1) μˆ˜ν–‰ν•œ ν‚€ μ‘°μž‘μ˜ κ²°κ³Όλ₯Ό μ‚¬μš©μžκ°€ λΉ λ₯΄κ²Œ μžκ°ν•˜λ„λ‘ μœ λ„

2) ν‚€ μ‘°μž‘μœΌλ‘œ λ³€ν™”λœ μ‹œμŠ€ν…œμ˜ μƒνƒœλ₯Ό μ‚¬μš©μžκ°€ μ‰½κ²Œ μΈμ§€ν•˜λ„λ‘ μœ λ„

3) μ‚¬μš©μžκ°€ 가진 μ›λž˜ μ˜λ„μ™€ μ‹œμŠ€ν…œ κ²°κ³Ό κ°„μ˜ μœ μ‚¬ 정도λ₯Ό μ‚¬μš©μžκ°€ μ‰½κ²Œ νŒŒμ•…ν•˜λ„λ‘ μœ λ„

 

 

λ°˜μ‘ν˜•

λŒ“κΈ€