화면섀계: UI μš”κ΅¬μ‚¬ν•­

UI (User Interface) κ°œμš”

μ‚¬μš©μžμ™€ 컴퓨터 μ‚¬μ΄μ˜ 연계 μ‹œμŠ€ν…œμΈ UIλŠ” λ‹€μŒκ³Ό 같이 λ°œμ „ν•΄μ™”μŠ΅λ‹ˆλ‹€:

  • λ‹¨μˆœν•œ μƒν˜Έμž‘μš©μ—μ„œ μ‹€ν–‰ 였λ₯˜λ₯Ό 쀄이기 μœ„ν•œ UI둜 λ°œμ „
  • λ‹¨μˆœν•œ κΈ°λŠ₯의 μ „λ‹¬μ—μ„œ 의미λ₯Ό μ „λ‹¬ν•˜λ„λ‘ λ°œμ „

UI λΆ„μ•Ό

  • 물리적 μ œμ–΄
  • ꡬ성과 ν‘œν˜„
  • κΈ°λŠ₯적 λΆ„μ•Ό (의미λ₯Ό 전달)

UI μ’…λ₯˜

  • CLI: λͺ…λ Ή λ¬Έμžμ—΄
  • GUI: 메뉴, μ•„μ΄μ½˜κ°™μ€ κ·Έλž˜ν”½ μš”μ†Œ
  • NUI: μ‚¬λžŒμ˜ μŒμ„±, 촉각

UI ν‘œμ€€κ³Ό μ§€μΉ¨

ꡬ뢄

  • UI ν‘œμ€€: κ³΅ν†΅μ μœΌλ‘œ μ μš©λ˜μ–΄μ•Ό ν•  것
  • UI μ§€μΉ¨: μ§€μΌœμ•Ό ν•  μ„ΈλΆ€ 개발 λ°©ν–₯, κ°€μ΄λ“œ

λ ˆμ΄μ•„μ›ƒ ꡬ성 μš”μ†Œ

μœ„μ—μ„œ μ•„λž˜λ‘œ λ‹€μŒ μˆœμ„œλ‘œ ꡬ성:

  1. Indicator
    • μƒνƒœμ•Œλ¦Ό
  2. Header
    • νšŒμ‚¬μ˜ 둜고
    • μ‚¬μ΄νŠΈλͺ…
  3. Navigation
    • ν˜„μž¬ μœ„μΉ˜
    • λ‹€λ₯Έμ„œλΉ„μŠ€ 이동(메뉴)
  4. Contents
    • λ‚΄μš©
  5. Button
    • λ³„λ„μ˜ μš”μ†Œ
    • νŠΉμ • 정보 μ ‘κ·Ό
  6. Footer
    • νšŒμ‚¬ 정보
    • μ €μž‘κΆŒ

UI κΈ°λ³Έ μš”μ†Œ

  • ν…μŠ€νŠΈλ°•μŠ€
  • λΌλ””μ˜€ λ²„νŠΌ
  • ν† κΈ€ λ²„νŠΌ
  • 콀보 λ²„νŠΌ
  • 체크 λ°•μŠ€
  • λͺ…λ Ή λ²„νŠΌ

μ›Ή μ ‘κ·Όμ„± μ§€μΉ¨

ν•œκ΅­ν˜• μ›Ή μ½˜ν…μΈ  μ ‘κ·Όμ„± μ§€μΉ¨

  • μ›Ή ν‘œμ€€: λ™μΌν•˜κ²Œ κ΅¬ν˜„
  • μ›Ή μ ‘κ·Όμ„±: λˆ„κ΅¬λ‚˜ μ–΄λ–€ ν™˜κ²½μ—μ„œλΌλ„ μ‚¬μš© κ°€λŠ₯ (예: μ‹œκ°μž₯애인을 μœ„ν•œ μŒμ„±λ©”λ‰΄ μ•ˆλ‚΄)
  • μ›Ή ν˜Έν™˜μ„±: λ‹€λ₯Έ μ‹œμŠ€ν…œν™˜κ²½μ—μ„œλ„ λ™λ“±ν•œ μ„œλΉ„μŠ€

μ›Ή μ½˜ν…μΈ  μ ‘κ·Όμ„±μ˜ μ€‘μš”μ„±

  • λ””μ§€ν„Έμ•½μž(μž₯애인, 노인)λ₯Ό μœ„ν•œ λŒ€μ²΄ ν˜•μ‹μ˜ μ½˜ν…μΈ  제곡이 μ ‘κ·Όμ„±μ˜ 핡심
  • μ „μžμ •λΆ€μ˜ μ›Ή μ‚¬μ΄νŠΈλŠ” λͺ¨λ“  ꡭ민이 μ΄μš©ν•΄μ•Ό ν•˜λ―€λ‘œ:
    • ν‘œμ€€ν™”λ˜μ§€ μ•Šμ€ 기술 적용 κΈˆμ§€
    • ν™”λ €ν•˜κ³  λ©‹μ§„ λ””μžμΈλ³΄λ‹€ μ ‘κ·Όμ„± μš°μ„ 
    • ν‘œμ€€ μ ‘κ·Όμ„±κ³Ό ν˜Έν™˜μ„±μ„ μ—„κ²©ν•˜κ²Œ μ€€μˆ˜

4κ°€μ§€ 큰 원칙 (μ•”κΈ°!)

  • 인식
  • 운용
  • 이해
  • 견고성

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

κΈ°λ³Έ κ°œλ…

  • μ‹œμ œν’ˆ 성격
  • μ΄ν•΄ν•˜λŠ”λ° ν•„μš”ν•œ μš”μ†Œλ§Œ 포함
  • μ§€μ†μ μœΌλ‘œ 보완, κ°œμ„ 
  • μž₯점: μ‚¬μš©μž 섀득, 사전 결함 발견
  • 단점: 반볡적 μž‘μ—…μœΌλ‘œ μΈν•œ λΉ„μš© 증가
  • ν”„λ‘œμ„ΈμŠ€: 뢄석 β†’ ν”„λ‘œν† νƒ€μž… μž‘μ„± β†’ ν”Όλ“œλ°±

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

Paper Prototype

  • μž₯점: 사전 지식 없이 μˆ˜ν–‰ κ°€λŠ₯
  • 단점:
    • ν…ŒμŠ€νŠΈκ°€ λΆˆκ°€λŠ₯
    • UI μš”μ†Œ κ°„μ˜ μƒν˜Έκ΄€κ³„ λ‚˜νƒ€λ‚΄κΈ° 어렀움

Digital Prototype

  • μž₯점:
    • νŒŒμ›Œν¬μΈνŠΈμ™€ 같은 μ†Œν”„νŠΈμ›¨μ–΄λ‘œ μ œμž‘
    • ν…ŒμŠ€νŠΈκ°€ κ°€λŠ₯
    • μˆ˜μ •μ΄ 용이
  • 단점:
    • μ „λ¬Έκ°€κ°€ ν•„μš”
    • μˆ™μ§€ μ‹œκ°„μ΄ ν•„μš”

고렀사항

  • κΈ°κ°„ 및 λΉ„μš©μ„ κ³ λ €
  • νš¨μœ¨μ„± μ€‘μ‹œ!