////
Search
πŸ“

ν•˜μ˜ˆλ¦Ό

챕터
UXUI 뢁/아티클 μŠ€ν„°λ”” (1)
μƒνƒœ
μ™„λ£Œ

μ‚¬μš©μžλ₯Ό μ‚¬λ‘œμž‘λŠ” UX/UI μ‹€μ „ κ°€μ΄λ“œ (κΉ€μ„±μ—°)

챕터 1. UX/UI μ œλŒ€λ‘œ μ΄ν•΄ν•˜κΈ°

1-1 UX λ””μžμΈ? UI λ””μžμΈ?
UI(User Interface)의 μ•½μžλ‘œ, μ‰½κ²Œ 말해 μš°λ¦¬κ°€ 세상을 μ‚΄μ•„κ°€λ©° λ§ˆμ£Όν•˜λŠ” λ‹€μ–‘ν•œ μ‹œκ°μ  κ΅¬μ„±μš”μ†Œ / μ΄λŸ¬ν•œ μ‹œκ° μš”μ†Œλ‘œ μ œν’ˆμ΄λ‚˜ μ„œλΉ„μŠ€λ₯Ό κ²…γ…‡ν˜ν•˜λŠ” μ‚¬μš©μžμ˜ νŠΉμ • 행동 방식을 ν˜•μ„±
β†’ UX/UIλŠ” κΌ­ ν•„μš”ν•œ μƒν˜Έλ³΄μ™„ 관계
UX(User Experience) μ‚¬μš©μžκ°€ μ–΄λ–€ μ œν’ˆμΈ μ„œλΉ„μŠ€μ™€ μƒν˜Έμž‘μš©ν•˜λŠ” κ³Όμ •μ—μ„œ μ–»λŠ” 총체적 κ²½ν—˜ 의미
UX λ””μžμΈμ΄λž€ μ†ŒλΉ„μžκ°€ κ²ͺλŠ” 총체적 κ²½ν—˜μ„ μ„œλΉ„μŠ€λ‚˜ μ œν’ˆμœΌλ‘œ κ΅¬ν˜„ν•˜κΈ° μœ„ν•΄ μ„€κ³„ν•˜κ³  μ‹€ν–‰ν•˜λŠ” 것을 의미
β€’
νŒŒκ²©μ μ€ λ³€ν™”λ§Œμ„ κ³ μ§‘ν•˜λŠ” UXλŠ” 독이 될 수 있음 >>> μ‚¬μš©μ„±μ„ λ–¨μ–΄λœ¨λ¦¬λŠ” 경우 λ°œμƒ
ν”νžˆ 창의적인 것은 μ’‹λ‹€κ³  λ°°μ› μœΌλ‚˜ UX μ˜μ—­μ—μ„œ κ΄€μŠ΅μ΄λž€ 였랜 μ‹œκ°„ μŒ“μ•„μ˜¨ μ‚¬μš©μžμ˜ 행동 νŒ¨ν„΄μ„ κΈ°λ‘ν•œ λ‚˜μ΄ν…ŒλΌκ³  ν•  수 μžˆλ‹€.
β€’
μ‚¬μš©μž κ²½ν—˜μ„ λ§Œλ“œλŠ” UX λ””μžμ΄λ„ˆλŠ” μ œν’ˆμ„ λ‘˜λŸ¬μ‹Ό λ§₯락과 ν•œκ³„, 또 κ΄€μŠ΅μ μΈ 츑면을 μΆ©λΆ„νžˆ κ³ λ €ν•œ λ’€ μ΅œμ„ μ˜ κ²½ν—˜μ„ λ§Œλ“œλŠ” 것을 λͺ©ν‘œλ‘œ μ‚Όμ•„μ•Ό 함
ν”„λ‘œλ•νŠΈ λ””μžμ΄λ„ˆ - μ œν’ˆ 쀑심 쑰직의 λ””μžμ΄λ„ˆ
: 디지털을 λ‹€λ£¨λŠ” λ””μžμ΄λ„ˆκ°€ 비ꡐ적 μ΅œκ·Όμ— 얻은 직함 / 쑰직 κ΅¬μ‘°μ—λŠ” 크게 μ œν’ˆ 쀑심 쑰직과 κΈ°λŠ₯ 쀑심 쑰직이 μžˆλŠ”λ° νŠΈλ‘œλ•νŠΈ λ””μžμ΄λ„ˆλŠ” μ œν’ˆ 쀑심 쑰직에 속함
μ›Œν„°ν΄ 방식 : κΈ°νšνŒ€ -> λ””μžμΈνŒ€ -> κ°œλ°œν‹° (κΈ°λŠ₯ 쀑심 쑰직)
μ œν’ˆ 쀑심 쑰직의 방식 : 상세 νŽ˜μ΄μ§€νŒ€ - ν”Όλ“œνŒ€ - μž₯λ°”κ΅¬λ‹ˆνŒ€ (μ„ΈλΆ„ν™”λœ 파트)
β€’
UX/UI λ””μžμΈ 진행 κ³Όμ •
더블 닀이아λͺ¬λ“œ ν”„λ‘œμ„ΈμŠ€ : 발견 - μ •μ˜ - λ°œμ „ - 전달
1.
발견 - λ¦¬μ„œμΉ˜ 단계 : μ‹œμž‘, λ¦¬μ„œμΉ˜, 데슀크 λ¦¬μ²˜μ‹œ, μ „λ¬Έκ°€ 인터뷰, κ΄€μ°° 쑰사, 포컀슀 κ·Έλ£Ή 인터뷰, κ²½μŸμ‚¬ 쑰사 λ“±
2.
μ •μ˜ - μ „λž΅ 및 컨셉 λ„μΆœ 단계 : μ‚¬μš©μžμ˜ 문제 νŒŒμ•…, μš°μ„ μˆœμœ„ μ •μ˜, μ–΄ν”Όλ‹ˆν‹° λ””μ•„μ–΄κ·Έλž¨, 페λ₯΄μ†Œλ‚˜, μ €λ‹ˆ 맡 λ“±
3.
λ°œμ „ - 와이어 ν”„λ ˆμž„ μ œμž‘ 단계 : μ‹€μ§ˆμ  문제 ν•΄κ²° 방법 및 성곡적 κ΅¬ν˜„ 방법 λ…Όμ˜, IA, 와이어 ν”„λ ˆμž„ λ“± 진행
4.
전달 - λΉ„μ£Όμ–Ό λ””μžμΈ 단계 : λΉ„μ£Όμ–Ό λ””μžμΈ 진행, λ””μžμΈ μ™„μ„± ν›„ λ‚΄λΆ€μ—μ„œ 직접 ν…ŒμŠ€νŠΈ, 였λ₯˜λ‚˜ 어렀움 λΆ€λΆ„ 미리 발견
1-2 UI의 ꡬ쑰와 μš”μ†Œ
λ©˜νƒˆ λͺ¨λΈ : 사물이 μ–΄λ–»κ²Œ μž‘λ™ν•  것이라 μœ μΆ”ν•˜λŠ” 사고 과정을 κ΅¬μ‘°ν™”ν•œ 것 / μ˜ˆμ‹œ) 링크λ₯Ό ν΄λ¦­ν•˜λ©΄ μƒˆλ‘œμš΄ 창이 뜰 κ±°λΌλŠ” κΈ°λŒ€κ°
λ©˜νƒˆ λͺ¨λΈ λΆ€μ‘°ν™” : μ‚¬λ¬Όμ˜ μž‘λ™ 방식이 μ˜ˆμƒμ—μ„œ λ²—μ–΄λ‚˜λŠ” 것
β†’ λ©˜νƒˆ λͺ¨λΈ λΆ€μ‘°ν™”κ°€ μΌμ–΄λ‚˜λ©΄ μ‚¬μš©μžλŠ” 즉각 μ„œλΉ„μŠ€λ₯Ό λΆˆνŽΈν•˜λ‹€κ³  λŠλ‚Œ / λ””μžμ΄λ„ˆλŠ” ν†΅μƒμ μœΌλ‘œ ν™œμš©ν•˜λŠ” UI ꡬ쑰와 μš”μ†Œμ— 무엇이 μžˆλŠ”μ§€ 또 각 μš”μ†ŒλŠ” μ–΄λ–€ 역할을 ν•˜λŠ”μ§€ νŒŒμ•…ν•΄μ•Ό 함
β€’
UI의 ꡬ쑰
1.
μ›Ήμ‚¬μ΄νŠΈ ꡬ쑰 :
κ°€λ‘œ κ΅¬μ‘°ν˜• - μœ„μ—μ„œλΆ€ν„° 헀더, μ½˜ν…μΈ , ν‘Έν„°
μ„Έλ‘œ κ΅¬μ‘°ν˜• - μ™Όμͺ½μ΄ 헀더, 였λ₯Έμͺ½ 상단이 μ½˜ν…μΈ , κ·Έ μ•„λž˜κ°€ ν‘Έν„° (λ³΄νŽΈμƒ ꡬ쑰)
2. λͺ¨λ°”일 μ‚¬μ΄νŠΈ ꡬ쑰 : ν™”λ©΄ μœ„ λ‚΄λΉ„κ²Œμ΄μ…˜, 맨 μ•„λž˜ νƒ­λ°”
UI의 μš”μ†Œ : μ²΄ν¬λ°•μŠ€, λΌλ””μ˜€ λ²„νŠΌ. λ“œλ‘­λ‹€μš΄ λͺ©λ‘, μŠ€ν”Όλ„ˆ, ν† κΈ€ λ²„νŠΌ, ν…μŠ€νŠΈ ν•„λ“œ, λ‚ μ§œ/μ‹œκ°„ 피컀, 검색 ν•„λ“œ, λΈŒλ ˆλ“œν¬λŸΌ, νŽ˜μ΄μ§•, μŠ¬λΌμ΄λ”, νƒœκ·Έ, 이미지 μΊλŸ¬μ…€, μ•Œλ¦Ό, 진행바, μŠ€ν”Όλ„ˆ λ‘œλ”©, ν‰…γ„ΉνŒ, νŒμ—…, μ•„μ½”λ””μ–Έ, νˆ΄λ°”, GNB, LNB, νƒ­λ°”, λͺ¨λ‹¬ μœˆλ„μš°, ν† μŠ€νŠΈ μ°Ήμ—…, 빈 ν™”λ©΄, μ½”μΉ˜ 마크 λ“± (*33p 이미지 μ°Έκ³  μΆ”μ²œ!)
1-3 λͺ¨λ°”일 λ””μžμΈ νŠΈλžœλ“œμ˜ λ³€ν™”
1.
μŠ€νμ–΄λͺ¨ν”½ λ””μžμΈ : 사물을 ν˜„μ‹€μ μœΌλ‘œ μž¬ν˜„, ν‘œν˜„ν•˜λŠ” 기법
2.
ν”Œλž« λ””μžμΈ : ꡬ성과 색상을 λ‹¨μˆœν™”ν•΄ μ§κ΄€μ μœΌλ‘œ ν‘œν˜„ν•˜λŠ” 2D κ·Έλž˜ν”½ λ””μžμΈ 기법
3.
머티리얼 λ””μžμΈ : ꡬ글이 μ°½μ•ˆν•œ λ””μžμΈ κ°€μ΄λ“œλ‘œ, κ·Έλ¦¬λ“œ 기반의 λ ˆμ΄μ•„μ›ƒκ³Ό κ³„νšμ μΈ 색상 섀계, μ˜λ„μ μΈ μ—¬λ°±μœΌλ‘œ λŒ€λ‹΄ν•˜κ³  κ·Έλž˜ν”½μ μΈ 비주얼을 μΆ”κ΅¬ν•˜λŠ” λ””μžμΈ 기법

Β μ½”λ©˜νŠΈ

ν”νžˆ 창의적인 것은 μ’‹λ‹€κ³  λ°°μ› μœΌλ‚˜ UX μ˜μ—­μ—μ„œ κ΄€μŠ΅μ΄λž€ 였랜 μ‹œκ°„ μŒ“μ•„μ˜¨ μ‚¬μš©μžμ˜ 행동 νŒ¨ν„΄μ„ κΈ°λ‘ν•œ λ‚˜μ΄ν…ŒλΌκ³  ν•  수 μžˆλ‹€.
β†’ 이 λΆ€λΆ„μ˜ λ¬Έμž₯이 인상 κΉŠμ—ˆλ‹€. λŒ€ν•™ μž¬ν•™ λ‹Ήμ‹œμ—” μ°½μ˜μ„±, ν¬μ†Œμ„±μžˆλŠ” λ””μžμΈλ§Œμ„ κ°•λ°•μ μœΌλ‘œ μΆ”κ΅¬ν•˜λ©° μž‘μ—…ν–ˆλ˜ 적이 λ§Žμ•˜λ˜ 것 κ°™λ‹€.(μ•„λ¬΄λž˜λ„ κ³Ό νŠΉμ„±μƒβ€¦) κ·ΈλŸ¬λ‹€λ³΄λ©΄ 맀우 λ‹Ήμ—°ν•œ 기초적인 뢀뢄을 λ‚˜λ„ λͺ¨λ₯΄κ²Œ λ†“μ³λ²„λ¦¬λŠ” κ²½μš°λ„ μžˆλŠ”λ°, 그럴 λ•Œλ§ˆλ‹€ 기초 κ°œλ…μ΄λž€ 것은 μ–Όλ§ˆλ‚˜ μ€‘μš”ν•œμ§€ κΉ¨λ‹«κ³ λŠ” ν–ˆμ—ˆλ‹€.
UX/UI λ””μžμΈμ€ 특히 기초λ₯Ό μ€‘μš”μ‹œν•˜λŠ” λ””μžμΈμ΄λΌκ³  λ“€μ—ˆλ‹€. μœ„μ˜ 인용문처럼, 였랜 μ‹œκ°„ μ‚¬μš©μžμ˜ 행동 νŒ¨ν„΄μ„ κΈ°λ‘ν•˜κ³  뢄석해 온 데이터이기 λ•Œλ¬Έμ—. 내일배움캠프 μ‹œμž‘ μ „λΆ€ν„° β€˜κΈ°μ΄ˆλ₯Ό λ‹¨λ‹¨νžˆ μ„Έμš°μžβ€™κ³  λ‹€μ§ν–ˆμ§€λ§Œ μ € λ¬Έμž₯을 읽음으둜써 λ‹€μ‹œκΈˆ λ§ˆμŒμ— μƒˆκΈ°λŠ” 계기가 된 것 κ°™λ‹€. (λ‡Œμ— 각인 μ‹œμΌœμ•Όμ§€β€¦)
β†’ μŠ€ν„°λ””λ₯Ό μœ„ν•΄ κΈ‰ν•˜κ²Œ κ΅¬λ§€ν•œ 책인데, λ‘λ£¨λ­‰μ‹€ν•˜κ²Œ κ°œλ…μ μœΌλ‘œλ§Œ μ•Œκ³  있던 λ‹¨μ–΄μ˜ μ •μ˜λ₯Ό μ‰½κ²Œ 풀이해주고, μ΄λ―Έμ§€λ‘œ ν•œλˆˆμ— λ³΄μ—¬μ€˜μ„œ λ¨Έλ¦Ώμ†μ—μ„œλ„ 잘 정리가 λ˜λŠ” λŠλ‚Œ?! κ΅³κ΅³
Made with