Figma

hyena_leeΒ·2023λ…„ 2μ›” 16일
0

UX/UI

λͺ©λ‘ 보기
1/2
post-thumbnail

πŸŒ– UI/UX λž€ λ¬΄μ—‡μΌκΉŒ?

UI(User Interface, μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€)λŠ” μ‚¬λžŒλ“€μ΄ 컴퓨터와 μƒν˜Έ μž‘μš©ν•˜λŠ” μ‹œμŠ€ν…œμ„ μ˜λ―Έν•©λ‹ˆλ‹€. 보톡 UI라고 ν•˜λ©΄ λ– μ˜€λ₯΄λŠ” ν™”λ©΄μƒμ˜ κ·Έλž˜ν”½ μš”μ†Œ 외에도, ν‚€λ³΄λ“œ, 마우슀 λ“±μ˜ 물리적 μš”μ†Œλ„ 컴퓨터와 μƒν˜Έ μž‘μš©ν•˜κΈ° μœ„ν•œ μ‹œμŠ€ν…œμ΄λ―€λ‘œ UI라고 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

UX(User Experience, μ‚¬μš©μž κ²½ν—˜)의 사전적 μ˜λ―ΈλŠ” μ‚¬μš©μžκ°€ μ–΄λ–€ μ‹œμŠ€ν…œ, μ œν’ˆ, μ„œλΉ„μŠ€λ₯Ό μ§β€’κ°„μ ‘μ μœΌλ‘œ μ΄μš©ν•˜λ©΄μ„œ 느끼고 μƒκ°ν•˜λŠ” 총체적 κ²½ν—˜μž…λ‹ˆλ‹€. μ œν’ˆ, μ„œλΉ„μŠ€ κ·Έ μžμ²΄μ— λŒ€ν•œ κ²½ν—˜μ€ λ¬Όλ‘ , 홍보, μ ‘κ·Όμ„±, 사후 처리 λ“± μ§κ°„μ ‘μ μœΌλ‘œ κ΄€λ ¨λœ λͺ¨λ“  κ²½ν—˜μ„ μ‚¬μš©μž κ²½ν—˜μ΄λΌκ³  ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 말 κ·ΈλŒ€λ‘œ 총체적 κ²½ν—˜μΈ κ²ƒμž…λ‹ˆλ‹€.

πŸ‘‰UI λ””μžμΈμ˜ 업무

  • λ²„νŠΌ, 폰트, 색, μ•„μ΄μ½˜, λ ˆμ΄μ•„μ›ƒ 같은 μ‹œκ°μ  μš”μ†Œ μ œμž‘ 및 배치 (ν”„λ‘œν† νƒ€μ΄ν•‘)
  • μ œν’ˆμ˜ κΈ°λŠ₯을 효과적으둜, μ§κ΄€μ μœΌλ‘œ μ‚¬μš©μžμ—κ²Œ μ•ˆλ‚΄
  • μ‹œκ°μ μœΌλ‘œ μ‚¬μš©μžμ—κ²Œ 즐거움, κ°€μ΄λ“œ 제곡
  • νšŒμ‚¬μ˜ λΈŒλžœλ”©, μΌκ΄€λœ λ””μžμΈ λž­κ·€μ§€ 전달

πŸ‘‰UX λ””μ§€μ΄λ„ˆμ˜ 업무

  • μ‚¬μš©μž λ¦¬μ„œμΉ˜λ₯Ό ν†΅ν•œ λ‹ˆμ¦ˆ νŒŒμ•… (참고둜 UX λ¦¬μ„œμΉ˜λΌλŠ” μž‘μ—…λ„ μžˆλ‹€.)
  • μ œν’ˆμ˜ ꡬ쑰 및 μ½˜ν…μΈ  λ ˆμ΄μ•„μ›ƒ 섀계
  • μ‚¬μš©μž μ‚¬μš© 흐름(Flow)섀계 -> μ™€μ΄μ–΄ν”„λ ˆμž„ μ œμž‘
  • μ œν’ˆμ„ ν…ŒμŠ€νŠΈν•  수 μžˆλŠ” ν”„λ‘œν† νƒ€μ΄ν•‘ μ œμž‘

πŸŒŽμ™€μ΄μ–΄ν”„λ ˆμž„

건물을 μ§€μšΈ λ•Œ κ°€μž₯ λ¨Όμ € 섀계도λ₯Ό 그릿듯이 ν•˜λ‚˜μ˜ μƒˆλ‘œμš΄ 디지털 μ œν’ˆ(μ„œλΉ„μŠ€)을 λ§Œλ“€κΈ° μœ„ν•΄ 섀계도가 ν•„μš”ν•©λ‹ˆλ‹€.

πŸ‘‰μ™€μ΄μ–΄ ν”„λ ˆμž„ = μ œν’ˆμ˜ 섀계도

와이어 ν”„λ ˆμž„μ€ μ„œλΉ„μŠ€ μ œμž‘ 과정에 섀계도면 역할을 ν•©λ‹ˆλ‹€.
기획자, λ¦¬μ„œμΉ˜, λ””μžμ΄λ„ˆ, 개발자 λ“±λ“± μ‚¬λžŒμ΄ λͺ¨μ—¬μ„œ ν•˜λ‚˜μ˜ μ„œλΉ„μŠ€λ₯Ό λ§Œλ“€κ²Œ λœλ‹€.

πŸ‘‰μ™€μ΄μ–΄ ν”„λ ˆμž„ μž‘μ„± 방법

  • 세뢀적인 μ•„μ΄μ½˜, 색 λ“± λ””μžμΈμ μΈ μš”μ†ŒλŠ” μ΅œλŒ€ν•œ λ°°μ œν•  것.
  • κ°€μž₯ μ€‘μš”ν•œ μ„œλΉ„μŠ€μ˜ κΈ°λŠ₯, ꡬ쑰, νλ¦„λ§Œ ν‘œν˜„ν•œλ‹€.

그리고 쒋은 와이어 ν”„λ ˆμž„μ„ μž‘μ„±ν•˜λ €λ©΄ λ˜λ„λ‘ μƒμ„Έν•œ λ””μžμΈμ΄ 듀어가지 μ•ŠλŠ”κ²Œ 게 μ’‹μŠ΅λ‹ˆλ‹€. λ””μžμΈ ν•˜λ‚˜λ₯Ό μ‹ κ²½ μ“°κ²Œ 되면 제일 μ€‘μš”ν•œ 것에 집쀑할 수 μ—†κ²Œ λœλ‹€. κ·Έλž˜μ„œ 보톡 κ°„λ‹¨ν•œ κ°„λ‹¨ν•œ λ„ν˜•μ΄λ‚˜ xν‘œλ₯Ό μ‚¬μš©ν•΄μ„œ ν‘œν˜„ν•˜λŠ” 것이 μ’‹λ‹€.
κ·Έλ ‡λ‹€λ©΄ 와이엍 ν”„λ ˆμž„μ—λŠ” μ–΄λ–€ μ’…λ₯˜κ°€ μ—ˆμ„κΉŒμš”? μš°λ¦¬κ°€ μ‚¬μš©ν•˜λŠ” 도ꡬ에 λ”°λΌμ„œ λ‹€λ₯Έ μ’…λ₯˜μ˜ 와이어 ν”„λ ˆμž„μ„ λ§Œλ“€ 수 μžˆλ‹€.

그리고 와이어 ν”„λ ˆμž„μ— μžˆμ–΄μ„œ 와이어 ν”„λ ˆμž„μ„ λ°”νƒ•μœΌλ‘œ ν”„λ‘œν† νƒ€μ΄ν•‘ μ΄λΌλŠ” κ³Όμ •μœΌλ‘œ 이어진닀.

πŸ“Œ μ •λ¦¬ν•˜κΈ°

  • 와이어 ν”„λ ˆμž„ = 디지털 μ œν’ˆμ˜ 섀계도
  • 와이어 ν”„λ ˆμž„ μž‘μ„± μ‹œ μ„œλΉ„μŠ€μ˜ κΈ°λŠ₯, ꡬ쑰, 흐름을 ν‘œν˜„ν•˜λŠ”λ° μ§‘μ€‘ν•œλ‹€.

πŸŒ–ν”„λ‘œν† νƒ€μ΄ν•‘μ΄λž€

ν”„λ‘œν† νƒ€μ΄ν•‘ = 검증!

μ›λž˜ ν”„λ‘œν† νƒ€μž…μ΄λΌλŠ” 말은 ν”„λ‘œν† νƒ€μ΄ν°μ΄λΌλŠ” κ·Έλ¦¬μŠ€μ–΄μ—μ„œ κ°€μ Έμ˜¨ 것이닀. μ‹€μ œμ²˜λŸΌ μž‘λ™ν•˜λŠ” 초기 λͺ¨ν˜•μ„ λœ»ν•œλ‹€.
ν”„λ‘œν† νƒ€μ΄ν•‘μ€ λ™μ‚¬ν˜•μœΌλ‘œ μ œν’ˆμ˜ 초기 λͺ¨ν˜•μ„ λ§Œλ“ λ‹€λŠ” λœ»μ΄λ‹€. ν”„λ‘œν† νƒ€μ΄ν•‘μ€ λ™μ‚¬ν˜•μœΌλ‘œ μ œν’ˆμ˜ 초기 λͺ¨ν˜•μ„ λ§Œλ“ λ‹€λŠ” λœ»μ΄λ‹€. ν”„λ‘œν† νƒ€μž…μ€ ν…ŒμŠ€νŠΈλ₯Ό λͺ©μ μœΌλ‘œ μ œμž‘ν•˜λŠ” λͺ¨ν˜•μ œν’ˆμž…λ‹ˆλ‹€.

πŸ‘‰ν”„λ‘œν† νƒ€μ΄ν•‘μ΄ ν•„μš”ν•œ 이유

초기 λ‹¨κ³„μ—μ„œ ν”„λ‘œν† νƒ€μ΄ν•‘ κ³Όμ •μ˜ κ°€μž₯ 큰 λͺ©μ μ€ λ°”λ‘œ λ‚΄κ°€ μƒκ°ν•œ μ„œλΉ„μŠ€κ°€ κ³Όμ—° μ‚¬μš©μžμ—κ²Œ ν•„μš”ν• κΉŒ? λΌλŠ” 가섀을 κ²€μ¦ν•˜λŠ” 것이닀.

ν”„λ‘œν† νƒ€μž…μ˜ 원칙

ν”„λ‘œν† νƒ€μ΄ν•‘ κ³Όμ •μ—μ„œ ꡉμž₯히 μ€‘μš”ν•œ 원칙이 μžˆλ‹€. ν•˜λ‚˜μ˜ μ»¨μ…‰λ§Œ λΆ™μž‘κ³  λ°œμ „μ‹œμΌœλ‚˜κ°€κΈ°λ³΄λ‹¨ μ—¬λŸ¬κ°€μ§€ λ‹€μ–‘ν•œ 컨셉을 μ‹œλ„ν•΄μ•Ό ν•œλ‹€. 그리고 μ„œλΉ„μŠ€μ˜ 핡심 κΈ°λŠ₯에 집쀑할 ν•„μš”κ°€ μžˆλ‹€.

πŸ‘‰ν”„λ‘œν† νƒ€μ΄ν•‘ μœ ν˜•κ³Ό 도ꡬ

  1. Low-fi - 쒅이와 νŽœμ„ μ΄μš©ν•˜λŠ” μ•„λ‚ λ‘œκ·Έ 방식
  2. Mid-fi - λ―Έλ“œνŒŒμ΄ 버전은 와이어 ν”„λ ˆμž„μ—μ„œ ν™”λ©΄λ§Œ μ΄λ™ν•˜λŠ” μˆ˜μ€€
  3. High-fi - ν•˜μ΄νŒŒμ΄ 버전은 μ‹€μ œ λ””μžμΈκΉŒμ§€ 적용된 μœ ν˜•

profile
μ‹€μˆ˜λ₯Ό λ‘λ €μ›Œ 말고 계속 도전 ν•˜λŠ” 개발자의 μ—¬μ •!

0개의 λŒ“κΈ€