πŸ“— CS/μ •λ³΄μ²˜λ¦¬κΈ°μ‚¬

[μ •λ³΄μ²˜λ¦¬κΈ°μ‚¬] 6. ν™”λ©΄ 섀계

Dongwoongkim 2024. 4. 15. 22:17

A - 237. UI(User Interface)/UX(User eXperience)

  • UI
    • UIλŠ” μ‚¬μš©μžμ™€ μ‹œμŠ€ν…œ κ°„μ˜ μƒν˜Έμž‘μš©μ΄ μ›ν™œν•˜κ²Œ 이뀄지도둝 λ„μ™€μ£ΌλŠ” μž₯μΉ˜λ‚˜ μ†Œν”„νŠΈμ›¨μ–΄λ₯Ό 의미
    • μ„Έ 가지 λΆ„μ•Ό
      • μ •λ³΄μ œκ³΅κ³Ό 전달을 μœ„ν•œ 물리적 μ œμ–΄μ— κ΄€ν•œ λΆ„μ•Ό
      • μ½˜ν…μΈ μ˜ 상세적인 ν‘œν˜„κ³Ό 전체적인 ꡬ성에 κ΄€ν•œ λΆ„μ•Ό
      • λͺ¨λ“  μ‚¬μš©μžκ°€ νŽΈλ¦¬ν•˜κ³  κ°„νŽΈν•˜κ²Œ μ‚¬μš©ν•˜λ„λ‘ ν•˜λŠ” κΈ°λŠ₯에 λŒ€ν•œ λΆ„μ•Ό
  • UX
    • μ‚¬μš©μžκ°€ μ‹œμŠ€ν…œμ΄λ‚˜ μ„œλΉ„μŠ€λ₯Ό μ΄μš©ν•˜λ©΄μ„œ λŠλΌλŠ” κ²½ν—˜
    • UIκ°€ μ‚¬μš©μ„±, μ ‘κ·Όμ„±, νŽΈμ˜μ„±μ„ μ€‘μ‹œν•œλ‹€λ©΄ UXλŠ” μ‚¬μš©μžκ°€ λŠλΌλŠ” 만쑱, 감정을 μ€‘μ‹œ

 

A - 238. UI의 ꡬ뢄

  • CLI(Command Line Interface) : λͺ…λ Ήκ³Ό 좜λ ₯이 ν…μŠ€νŠΈ ν˜•νƒœλ‘œ μ΄λ€„μ§€λŠ” μΈν„°νŽ˜μ΄μŠ€
  • GUI(Graphic User Interface) : μ•„μ΄μ½˜μ΄λ‚˜ 메뉴λ₯Ό 마우슀둜 μ„ νƒν•˜μ—¬ μž‘μ—…μ„ μˆ˜ν–‰ν•˜λŠ” κ·Έλž˜ν”½ ν™˜κ²½μ˜ μΈν„°νŽ˜μ΄μŠ€
  • NUI(Natural User Interface) : λ§ˆμš°μŠ€λ‚˜ ν‚€λ³΄λ“œ μ‚¬μš©μ—†μ΄ μ‚¬μš©μžμ˜ μ›€μ§μž„μ„ 기기둜 μ‘°μž‘ν•˜λŠ” μΈν„°νŽ˜μ΄μŠ€

 

A - 239. UI의 κΈ°λ³Έ 원칙

  • μ§μœ ν•™μœ 
    • 직관성 : λˆ„κ΅¬λ‚˜ μ‰½κ²Œ μ΄ν•΄ν•˜κ³  μ‚¬μš© κ°€λŠ₯ν•΄μ•Ό 함
    • μœ νš¨μ„± : λͺ©μ μ„ μ •ν™•ν•˜κ³  μ™„λ²½νžˆ 달성해야 함
    • ν•™μŠ΅μ„± : λˆ„κ΅¬λ‚˜ μ‰½κ²Œ 배우고 읡힐수 μžˆμ–΄μ•Ό 함
    • μœ μ—°μ„± : μ‚¬μš©μžμ˜ μš”κ΅¬μ‚¬ν•­μ„ μ΅œλŒ€ν•œ μˆ˜μš©ν•˜κ³  μ‹€μˆ˜λ₯Ό μ΅œμ†Œν™” ν•΄μ•Ό 함

 

240. UI ν‘œμ€€ / 지침

  • UI ν‘œμ€€ : 전체 μ‹œμŠ€ν…œμ— ν¬ν•¨λœ λͺ¨λ“  UI에 κ³΅ν†΅μ μœΌλ‘œ 적용될 λ‚΄μš©μœΌλ‘œ, ν™”λ©΄ κ΅¬μ„±μ΄λ‚˜, ν™”λ©΄ 이동 등이 포함
  • UI 지침 : UI μš”κ΅¬μ‚¬ν•­, κ΅¬ν˜„ μ‹œ μ œμ•½μ‚¬ν•­ λ“± UI κ³Όμ •μ—μ„œ κΌ­ μ§€μΌœμ•Ό ν•  κ³΅ν†΅μ˜ 쑰건
  • UI μŠ€νƒ€μΌ κ°€μ΄λ“œ μž‘μ„± μˆœμ„œ : κ΅¬λ ˆλ„€κΈ°κ΅¬
    • 1. ꡬ동 ν™˜κ²½ μ •μ˜
    • 2. λ ˆμ΄μ•„μ›ƒ μ •μ˜
    • 3. λ„€λΉ„κ²Œμ΄μ…˜ μ •μ˜
    • 4. κΈ°λŠ₯ μ •μ˜
    • 5. κ΅¬μ„±μš”μ†Œ μ •μ˜

 

B - 241. UI 섀계 도ꡬ / μ™€μ΄μ–΄ν”„λ ˆμž„

  • νŽ˜μ΄μ§€μ— λŒ€λž΅ 개랡적인 λ ˆμ΄μ•„μ›ƒ, λΌˆλŒ€λ₯Ό μ„€κ³„ν•˜λŠ” 도ꡬ
  • 기획 λ‹¨κ³„μ˜ μ΄ˆκΈ°μ— μ œμž‘
  • 진행 μƒνƒœ 곡유λ₯Ό μœ„ν•΄ μ‚¬μš©

 

B - 242. UI 섀계 도ꡬ / λͺ©μ—…

  • 와이어 ν”„λ ˆμž„λ³΄λ‹€ μ’€ 더 μ‹€μ œ ν™”λ©΄κ³Ό μœ μ‚¬ν•˜κ²Œ λ§Œλ“  정적인 ν˜•νƒœμ˜ λͺ¨ν˜•
  • μ‹œκ°μ μœΌλ‘œ κ΅¬μ„±μš”μ†Œλ§Œ λ°°μΉ˜ν•˜λŠ” κ²ƒμœΌλ‘œ μ‹€μ œλ‘œ κ΅¬ν˜„λ˜μ§„ μ•ŠμŒ

 

B - 243. UI 섀계 도ꡬ / μŠ€ν† λ¦¬λ³΄λ“œ

  • μ™€μ΄μ–΄ν”„λ ˆμž„μ— μ½˜ν…μΈ μ— λŒ€ν•œ μ„€λͺ…μ΄λ‚˜, νŽ˜μ΄μ§€ 이동 흐름을 μ„€λͺ…ν•œ λ¬Έμ„œ
  • λ””μžμ΄λ„ˆ, κ°œλ°œμžκ°€ μ΅œμ’…μ μœΌλ‘œ μ°Έκ³ ν•˜λŠ” μž‘μ—… μ§€μΉ¨μ„œ
  • μ„œλΉ„μŠ€ ꡬ좕을 μœ„ν•œ λͺ¨λ“  정보가 λ‹΄κΉ€

 

B - 244. UI 섀계 도ꡬ / ν”„λ‘œν† νƒ€μž…

  • μ‹€μ œ κ΅¬ν˜„λœ κ²ƒμ²˜λŸΌ ν…ŒμŠ€νŠΈκ°€ κ°€λŠ₯ν•œ 동적인 ν˜•νƒœμ˜ λͺ¨ν˜•
  • μ‚¬μš©μžμ˜ μš”κ΅¬μ‚¬ν•­μ„ κ°œλ°œμžκ°€ 맞게 ν•΄μ„ν–ˆλŠ”μ§€ κ²€μ¦ν•˜κΈ° μœ„ν•΄ μ‚¬μš©
  • ν”„λ‘œν† νƒ€μž… μ’…λ₯˜ : 페이퍼 ν”„λ‘œν† νƒ€μž…, 디지털 ν”„λ‘œν† νƒ€μž…
    • 페이퍼 ν”„λ‘œν† νƒ€μž… : μŠ€μΌ€μΉ˜, κ·Έλ¦Ό, 글을 μ΄μš©ν•˜μ—¬ μ†μœΌλ‘œ 직접 μž‘μ„±ν•˜λŠ” μ•„λ‚ λ‘œκ·Έμ μΈ 방법
    • 디지털 ν”„λ‘œν† νƒ€μž… : νŒŒμ›Œν¬μΈνŠΈ, μ•„ν¬λ‘œλ±ƒ, λ“± ν”„λ‘œκ·Έλž¨μ„ μ‚¬μš©ν•˜μ—¬ μž‘μ„±ν•˜λŠ” 방법

 

245. UI 섀계 도ꡬ / μœ μŠ€μΌ€μ΄μŠ€

  • μ‚¬μš©μžμ˜ μš”κ΅¬μ‚¬ν•­μ„ κΈ°λŠ₯ λ‹¨μœ„λ‘œ ν‘œν˜„ν•˜λŠ” 것
  • μ‚¬μš©μžκ°€ μ›ν•˜λŠ” λͺ©ν‘œλ₯Ό λ‹¬μ„±ν•˜κΈ° μœ„ν•΄ μˆ˜ν–‰ν•  λ‚΄μš©μ„ 기술
  • 일반적으둜 λ‹€μ΄μ–΄κ·Έλž¨ ν˜•μ‹μœΌλ‘œ λ¬˜μ‚¬

 

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

  • μƒˆλ‘œ κ°œλ°œν•  μ‹œμŠ€ν…œμ— μ μš©ν•  UI κ΄€λ ¨ μš”κ΅¬μ‚¬ν•­μ„ μ‘°μ‚¬ν•΄μ„œ μž‘μ„±ν•˜λŠ” 단계
  • UI μš”κ΅¬μ‚¬ν•­ 확인 μˆœμ„œ
    • 1. λͺ©ν‘œ μ •μ˜ : 인터뷰λ₯Ό ν† λŒ€λ‘œ μ‚¬μš©μžλ“€μ˜ 의견이 수렴된 λΉ„μ¦ˆλ‹ˆμŠ€ μš”κ΅¬μ‚¬ν•­ μ •μ˜
    • 2. ν™œλ™μ‚¬ν•­ μ •μ˜ : 쑰사항 μš”κ΅¬μ‚¬ν•­μ„ ν† λŒ€λ‘œ μ•žμœΌλ‘œ ν•  ν™œλ™ 사항 μ •μ˜
    • 3. UI μš”κ΅¬μ‚¬ν•­ μž‘μ„± : 개발 λͺ©μ μ— 맞게 μ‚¬μš©μž μ€‘μ‹¬μœΌλ‘œ μž‘μ„±
  • UI μš”κ΅¬μ‚¬ν•­ μž‘μ„± μˆœμ„œ
    • 1. μš”κ΅¬μ‚¬ν•­ μš”μ†Œ 확인 : νŒŒμ•…λœ μš”κ΅¬μ‚¬ν•­ μš”μ†Œμ˜ μ’…λ₯˜μ™€ 각각의 ν‘œν˜„ 방식 등을 κ²€ν† 
    • 2. μ •ν™© μ‹œλ‚˜λ¦¬μ˜€ μž‘μ„± : λͺ©ν‘œλ‹¬μ„±μ„ μœ„ν•΄ μˆ˜ν–‰ν•˜λŠ” 방법을 순차적으둜 λ¬˜μ‚¬
    • 3. μš”κ΅¬μ‚¬ν•­ μž‘μ„± : μ •ν™© μ‹œλ‚˜λ¦¬μ˜€λ₯Ό ν† λŒ€λ‘œ μš”κ΅¬μ‚¬ν•­ μž‘μ„±

 

247. μš”κ΅¬μ‚¬ν•­ μš”μ†Œ

  • 데이터 μš”κ΅¬ 
  • κΈ°λŠ₯ μš”κ΅¬  
  • μ œν’ˆ/μ„œλΉ„μŠ€μ˜ ν’ˆμ§ˆ
  • μ œμ•½μ‚¬ν•­

 

A - 248. ν’ˆμ§ˆ μš”κ΅¬μ‚¬ν•­

  • ISO/IEC : 9126 μ†Œν”„νŠΈμ›¨μ–΄μ˜ ν’ˆμ§ˆ νŠΉμ„±κ³Ό 평가λ₯Ό μœ„ν•œ ꡭ제 ν‘œμ€€
  • ISO/IEC 25010 : ISO/IEC 9126에 ν˜Έν™˜μ„±κ³Ό λ³΄μ•ˆμ„±μ„ κ°•ν™”ν•˜μ—¬ κ°œμ •ν•œ μ†Œν”„νŠΈμ›¨μ–΄ μ œν’ˆμ— λŒ€ν•œ κ΅­μ œν‘œμ€€
  • ISO/IEC 12119 : νŒ¨ν‚€μ§€ μ†Œν”„νŠΈμ›¨μ–΄μ˜ 일반적인 μ œν’ˆ ν’ˆμ§ˆ μš”κ΅¬μ‚¬ν•­ 및 ν…ŒμŠ€νŠΈλ₯Ό μœ„ν•œ ꡭ제 ν‘œμ€€
  • ISO/IEC 14598 : μ†Œν”„νŠΈμ›¨μ–΄ ν’ˆμ§ˆμ˜ μΈ‘μ •κ³Ό 평가에 ν•„μš” 절차λ₯Ό κ·œμ •ν•œ ν‘œμ€€

 

A - 249. ISO/IEC 9126의 μ†Œν”„νŠΈμ›¨μ–΄ ν’ˆμ§ˆ νŠΉμ„± - κΈ°μ‹ μ‚¬νš¨μœ μ΄

  • κΈ°λŠ₯μ„± : μš”κ΅¬μ‚¬ν•­μ„ μ •ν™•ν•˜κ²Œ λ§Œμ‘±ν•˜λŠ” κΈ°λŠ₯을 μ œκ³΅ν•˜λŠ”μ§€ μ—¬λΆ€
  • μ‹ λ’°μ„± : 주어진 μ‹œκ°„λ™μ•ˆ 주어진 κΈ°λŠ₯을 였λ₯˜μ—†μ΄ μˆ˜ν–‰ν•  수 μžˆλŠ” 지 μ—¬λΆ€
  • μ‚¬μš©μ„± : μ‚¬μš©μžμ™€ 컴퓨터 사이에 λ°œμƒν•˜λŠ” μ–΄λ– ν•œ ν–‰μœ„μ— λŒ€ν•˜μ—¬ μ‚¬μš©μžκ°€ μ •ν™•ν•˜κ²Œ μ΄ν•΄ν•˜κ³  μ‚¬μš©ν•˜λ©°, ν–₯ν›„ λ‹€μ‹œ μ‚¬μš©ν•˜κ³  싢은 정도λ₯Ό λ‚˜νƒ€λƒ„
  • νš¨μœ¨μ„± : μ‚¬μš©μžκ°€ μš”κ΅¬ν•˜λŠ” κΈ°λŠ₯을 μ–Όλ§ˆλ‚˜ λΉ λ₯΄κ²Œ μ²˜λ¦¬ν•  수 μžˆλŠ” 지 정도
  • μœ μ§€ λ³΄μˆ˜μ„± : ν™˜κ²½μ˜ λ³€ν™” λ˜λŠ” μƒˆλ‘œμš΄ μš”κ΅¬μ‚¬ν•­μ΄ λ°œμƒν–ˆμ„ λ•Œ μ†Œν”„νŠΈμ›¨μ–΄λ₯Ό κ°œμ„ ν•˜κ±°λ‚˜ ν™•μž₯ν•  수 μžˆλŠ” 정도
  • 이식성 : λ‹€λ₯Έ ν™˜κ²½μ— μ–Όλ§ˆλ‚˜ μ‰½κ²Œ μ μš©ν•  수 μžˆλŠ” 지 정도

 

250. UI μ‹œλ‚˜λ¦¬μ˜€ λ¬Έμ„œ

  • UI μ‹œλ‚˜λ¦¬μ˜€ λ¬Έμ„œμ˜ μš”κ±΄(완일이 κ°€μˆ˜μΆ”)
    • μ™„μ „μ„± : λˆ„λ½λ˜μ§€ μ•Šλ„λ‘ μ΅œλŒ€ν•œ μƒμ„Έν•˜κ²Œ κΈ°μˆ ν•΄μ•Ό 함.
    • 일관성 : λͺ¨λ‘ 일관성을 μœ μ§€ν•΄μ•Ό 함.
    • 이해성 : λˆ„κ΅¬λ‚˜ μ‰½κ²Œ 이해할 수 μžˆλ„λ‘ μ„€λͺ…
    • 가독성
    • μˆ˜μ • μš©μ΄μ„±
    • 좔적 μš©μ΄μ„±

 

251. HCI

  • μ‚¬λžŒμ΄ μ‹œμŠ€ν…œμ„ 보닀 νŽΈλ¦¬ν•˜κ³  μ•ˆμ „ν•˜κ²Œ μ‚¬μš©ν•  수 μžˆλ„λ‘ μ—°κ΅¬ν•˜κ³  κ°œλ°œν•˜λŠ” ν•™λ¬Έ
  • μ΅œμ’… λͺ©ν‘œλŠ” μ‹œμŠ€ν…œμ„ μ‚¬μš©ν•˜λŠ” 데 μžˆμ–΄ 졜적의 μ‚¬μš©μž κ²½ν—˜μ„ λ§Œλ“œλŠ” 것

 

252. 감성곡학

  • μ‚¬μš©μžμ˜ 감성에 μ•Œλ§žλ„λ‘ 섀계 μ œμž‘ν•˜λŠ” 기술

 

 

237. 

 

UX, UI

 

238. 

CLI, GUI

 

NUI

 

239.

ㅁ

μœ νš¨μ„±

 

240.

 

a c b e d

 

241.

 

μ™€μ΄μ–΄ν”„λ ˆμž„

 

 

242.

 

λͺ©μ—…

 

243.

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

 

244.

 

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

 

245.

μœ μŠ€μΌ€μ΄μŠ€

 

 

 

246.

μ‚¬μš©μž

 

247.

γ…‚γ……γ„΄γ„·

 

248.

ISO/IEC 12119

 

249.

μƒν˜Έ μš΄μš©μ„±, λ³΄μ•ˆμ„±

 

 

250.

UI μ‹œλ‚˜λ¦¬μ˜€ λ¬Έμ„œ

 

251.

HCI

 

252.

 

감성곡학

μ €μž‘μžν‘œμ‹œ (μƒˆμ°½μ—΄λ¦Ό)