////
Search
πŸ“

μ΄μž¬μ€

챕터
UXUI 뢁/아티클 μŠ€ν„°λ”” (1)
μƒνƒœ
μ™„λ£Œ
뢁/아티클 μŠ€ν„°λ”” 링크
μ°Έκ³ λ¬Έν—Œ: μ‚¬μš©μžλ₯Ό μ‚¬λ‘œμž‘λŠ” UX/UI μ‹€μ „ κ°€μ΄λ“œ(κΉ€μ„±μ—°)

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

1-1 UX λ””μžμΈ? UI λ””μžμΈ?

UI(User Interface)
β€’
UIλŠ” μš°λ¦¬κ°€ 세상을 μ‚΄μ•„κ°€λ©° λ§ˆμ£Όν•˜λŠ” λ‹€μ–‘ν•œ μ‹œκ°μ  κ΅¬μ„±μš”μ†Œ
β€’
μ•±, μ›Ήμ‚¬μ΄νŠΈ 같은 λ””μ§€ν„Έ 기반의 λ””μžμΈμ—μ„œ UIλŠ” λΉ„μ£Όμ–Ό λ””μžμΈκ³Ό 같은 κ°œλ…
β€’
UIλŠ” μ•„μ΄μ½˜, νƒ€μ΄ν¬κ·Έλž˜ν”Ό λ“±κ³Ό 같은 μ‹œκ° μš”μ†Œλ‘œ μ œν’ˆμ΄λ‚˜ μ„œλΉ„μŠ€λ₯Ό κ²½ν—˜ν•˜λŠ” νŠΉμ • 행동 방식을 ν˜•μ„±
β€’
UX와 UIλŠ” μƒν˜Έλ³΄μ™„ 관계
UX(User Experience)
β€’
UXλŠ” μ‚¬μš©μžκ°€ μ–΄λ–€ μ œν’ˆμ΄λ‚˜ μ„œλΉ„μŠ€μ™€ μƒν˜Έμž‘μš―ν•˜λŠ” κ³Όμ •μ—μ„œ μ–»λŠ” 총체적 κ²½ν—˜μ„ 의미
β€’
β€˜UX λ””μžμΈβ€™μ΄λž€ 이런 κ²½ν—˜μ„ μ„œλΉ„μŠ€λ‚˜ μ œν’ˆμœΌλ‘œ κ΅¬ν˜„ν•˜κΈ° μœ„ν•΄ μ„€κ³„ν•˜κ³  μ‹€ν–‰ν•˜λŠ” 것
β€’
μ‚¬μš©μžμ˜ λ‹ˆμ¦ˆλ₯Ό νŒŒμ•…ν•˜λŠ” 것이 쒋은 UX의 κΈ°λ³Έ 쑰건이자 핡심
쒋은 UX의 μ˜ˆμ‹œ - ν•˜μΈμ¦ˆ 케첩 : 케첩이 λ°”λ‹₯에 λ‚¨λŠ” 것이 싫은 μ‚¬λžŒμ˜ λ‹ˆμ¦ˆλ₯Ό κ³ λ €ν•œ λ””μžμΈ
β€’
λ„ˆλ¬΄ 창의적인 κ΄€μ μœΌλ‘œ UXλ₯Ό 바라보면 였히렀 μ‚¬μš©μ„±μ„ λ–¨μ–΄λœ¨λ¦Ό
β€’
UX λ””μžμ΄λ„ˆλŠ” μ œν’ˆμ„ λ‘˜λŸ¬μ‹Ό λ§₯락 ν•œκ³„, 또 κ΄€μŠ΅μ μΈ 츑면을 μΆ©λΆ„νžˆ κ³ λ €ν•œ λ’€ μ΅œμ„ μ˜ κ²½ν—˜μ„ λ§Œλ“œλŠ” 것을 λͺ©ν‘œλ‘œ μ‚Όμ•„μ•Ό 함
ν”„λ‘œλ•νŠΈ λ””μžμ΄λ„ˆ
β€’
ν”„λ‘œμ νŠΈ λ””μžμ΄λ„ˆλŠ” 디지털을 λ‹€λ£¨λŠ” λ””μžμ΄λ„ˆμ΄λ©°, μ œν’ˆ 쀑심 쑰직에 속함
β€’
μ œν’ˆ 쀑심 μ‘°μ§μ΄λž€ β€˜κΈ°νš-λ””μžμΈ-κ°œλ°œβ€™μ²˜λŸΌ κΈ°λŠ₯ λ‹¨μœ„λ‘œ νŒ€μ„ κ΅¬λΆ„ν•˜μ§€ μ•Šκ³  기업이 κ°œλ°œλŠ” μ œν’ˆμ— 따라 파트λ₯Ό λ¬ΆλŠ”κ²ƒμ„ μ˜λ―Έν•¨ (μ˜ˆμ‹œ- 검색 νŒ€, 상세 νŽ˜μ΄μ§€ νŒ€, 탐색 νŒ€λ“±)
β€’
ν”„λ‘œνŠΈ λ””μžμ΄λ„ˆλŠ” μΈν„°νŽ˜μ΄μŠ€λ₯Ό λΉΌμ–΄λ‚˜κ²Œ λ§Œλ“œλŠ” κ²ƒλ§ŒμœΌλ‘œλŠ” λΆ€μ‘±ν•˜λ©° μ’…μ‚¬ν•œ 산업ꡰ에 λŒ€ν•œ κΉŠμ€ 지식이 ν•„μš”ν•¨
UX/UI λ””μžμΈμ˜ μ§„ν–‰ κ³Όμ •
β€’
UX/UI λ””μžμΈμ΄ μ§„ν–‰λ˜λŠ” 과정은 μ œν’ˆκ³Ό μ„œλΉ„μŠ€, 상황에 따라 달라짐
β€’
보편적인 UX/UI λ””μžμΈ κ³Όμ • - β€œλ”λΈ” 닀이아λͺ¬λ“œβ€
β€’
더블 닀이아λͺ¬λ“œλŠ” μ•„λž˜μ˜ 4λ‹¨κ³„λ‘œ κ΅¬μ„±λ˜μ–΄μ§
01. 발견 - λ¦¬μ„œμΉ˜ 단계: κ΄€λ ¨ 데이터λ₯Ό λͺ¨μœΌκ³  문제λ₯Ό 탐색 - μ–˜λ₯Ό λ“€μ–΄ 데슀크 λ¦¬μ„œμΉ˜, μ „λ¬Έκ°€ 인터뷰, 관찰쑰사, 포컀슀 κ·Έλ£Ή 인터뷰 등이 있음 02. μ •μ˜ - μ „λž΅ 및 컨셉 λ„μΆœ 단계 - μ–΄ν”Όλ‹ˆν‹° λ‹€μ΄μ–΄κ·Έλž¨, 페λ₯΄μ†Œλ‚˜, μ €λ‹ˆ λ§΅κ³Ό 같은 기법이 주둜 μ‚¬μš©λ¨ 03. λ°œμ „ - μ‹€μ§ˆμ μœΌλ‘œ ν•΄κ²°ν•  방법 ν˜Ήμ€ μ„±κ³΅μ μœΌλ‘œ κ΅¬ν˜„ν•  방법을 λ…Όμ˜ - 와이어 ν”„λ ˆμž„ μ œμž‘, IA 등이 이 λ‹¨κ³„μ—μ„œ μ§„ν–‰ 04. 전달 - λΉ„μ£Όμ–Ό λ””μžμΈμ΄ μ§„ν–‰λ˜λŠ” 단계 - λ‚΄λΆ€μ—μ„œ ν…ŒμŠ€νŠΈλ₯Ό μ§„ν–‰ν•˜μ—¬ 였λ₯˜λ‚˜ μ‚¬μš©μžκ°€ 어렀움을 κ²ͺ을 λ§Œν•œ 뢀뢄을 미리 λ°œκ²¬ν•¨

1-2 UI의 ꡬ쑰와 μš”μ†Œ

β€’
λ©˜νƒˆ λͺ¨λΈ - 사물이 μ–΄λ–»κ²Œ μž‘λ™ν•  것이라 μœ μΆ”ν•˜λŠ” μΈκ°„μ˜ 사고 과정을 ꡬ쑰화 ν•œ 것을 λœ»ν•¨ - 각 λΆ„μ•Όλ§ˆλ‹€ μ‚¬λžŒλ“€μ΄ κΈ°λŒ€ν•˜λŠ” UXκ°€ 닀름 - μ˜ˆμ‹œ) μž…λ ₯ 창을 보면 μž…λ ₯ν•  μ€€λΉ„λ₯Ό 함
β€’
λ©˜νƒˆ λͺ¨λΈ λΆ€μ‘°ν™” - μ‚¬λ¬Όμ˜ μž‘λ™ 방식이 μ˜ˆμƒμ—μ„œ λ²—μ–΄λ‚˜λŠ” 것을 μ˜λ―Έν•¨ - μ‚¬μš©μž κ²½ν—˜μ„ μ„€κ³„ν•˜λŠ” 것은 λ¬΄μ—μ„œ 유λ₯Ό λ§Œλ“œλŠ” μ°½μž‘ ν™œλ™κ³ΌλŠ” 닀름 - μ§€λ‚˜μΉ˜κ²Œ μ°½μ˜μ μ΄κ±°λ‚˜ κ΄€μŠ΅μ„ λ¬΄μ‹œν•˜κ³  UIλ₯Ό λ””μžμΈν•˜λ©΄ λ©˜νƒˆ λͺ¨λΈ λΆ€μ‘°ν™”κ°€ 일어남
UI의 ꡬ쑰
β€’
μ›Ήμ‚¬μ΄νŠΈ ꡬ쑰 - κ°€λ‘œ κ΅¬μ‘°ν˜•κ³Ό μ„Έλ‘œ κ΅¬μ‘°ν˜•μœΌλ‘œ λ‚˜λˆŒ 수 있음 - κ°€λ‘œ κ΅¬μ‘°ν˜•- μœ„μ—μ„œλΆ€ν„° 헀더, μ½˜ν…μΈ , ν‘Έν„°λ‘œ μ˜μ—­μ΄ λ‚˜λ‰˜μ–΄ 있음 - μ„Έλ‘œ κ΅¬μ‘°ν˜• - μ™Όμͺ½μ΄ 헀더, 였λ₯Έμͺ½ 상단이 μ½˜ν…μΈ , κ·Έ μ•„λž˜κ°€ ν‘Έν„°
β€’
λͺ¨λ°”일 μ‚¬μ΄νŠΈ ꡬ쑰 - λŒ€κ²Œ ν™”λ©΄ μœ„μ— λ‚΄λΉ„κ²Œμ΄μ…˜μ„ λ°°μΉ˜ν•˜κ±°λ‚˜ 맨 μ•„λž˜ νƒ­λ°”λ₯Ό λ‘  - λ‚΄λΉ„κ²Œμ΄μ…˜κ³Ό νƒ­λ°”λ₯Ό ν•¨κ»˜ μ‚¬μš©ν•΄ μ£Όμš” νŽ˜μ΄μ§€λ‘œ μ΄λ™ν•˜κ±°λ‚˜ κΈ°λŠ₯을 ν•œλˆˆμ— λ³Ό 수 있게 함

1-3 λͺ¨λ°”일 λ””μžμΈ νŠΈλ Œλ“œμ˜ λ³€ν™”

β€’
μŠ€νμ–΄λͺ¨ν”½ λ””μžμΈ - 사물을 μ‚¬μ‹€μ μœΌλ‘œ ν‘œν˜„ν•˜λŠ” 기법
β€’
ν”Œλž« λ””μžμΈ - ν˜„μ‹€μ„±μ΄ 사라진 ν‰ν‰ν•œ ν˜•νƒœμ˜ λ””μžμΈ
iOS 7 ν”Œλž«λ””μžμΈ vs iOS 6 μŠ€νμ–΄λͺ¨ν”½ λ””μžμΈ
β€’
머터리얼 λ””μžμΈ - ꡬ글이 μ°½μ•ˆν•œ λ””μžμΈ κ°€μ΄λ“œλ‘œ, κ·Έλ¦¬λ“œ 기반의 λ ˆμ΄μ•„μ›ƒκ³Ό κ³„νšμ μΈ 색상 섀계, μ˜λ„μ μΈ μ—¬λ°±μœΌλ‘œ λŒ€λ‹΄ν•˜κ³  κ·Έλž˜ν”½μ μΈ 비주얼을 μΆ”κ΅¬ν•˜λŠ” λ””μžμΈ 기법
β€’
뉴λͺ¨ν”Όμ¦˜ - ν”Œλž« λ””μžμΈμ΄λ‚˜ 머터리얼 λ””μžμΈκ³Ό 달리 λΉ›κ³Ό 그림자둜 μ‚¬μ‹€μ μ΄λ©΄μ„œ 미래적인 것이 νŠΉμ§• - Soft Uiκ°€ νŠΉμ§•

λŠλ‚€μ 

μ’‹μ•˜λ˜ 점 μ• λ§€λͺ¨ν˜Έν•˜λ˜ uxui의 κ°œλ…μ„ ν™•μ‹€ν•˜κ²Œ μ•Œκ²Œ λ˜μ–΄μ„œ μ’‹μ•˜λ‹€. μ‚¬μš©μžμ˜ λ‹ˆμ¦ˆλ₯Ό νŒŒμ•…ν•˜λŠ” 것이 UX의 ν•΅μ‹¬μ΄λΌλŠ” 것을 κΉ¨λ‹¬μ•˜μœΌλ©°, UX/UI의 λŒ€λž΅μ μΈ μ§„ν–‰ 과정을 μ•Œ 수 μžˆμ—ˆλ‹€. 기초적인 UI μš”μ†Œλ“€λ„ 책을 톡해 μ•Œκ²Œ λ˜μ—ˆμœΌλ©°, μ‹œλŒ€κ°€ 흐λ₯΄λ©΄μ„œ λ³€ν™”ν•œ UI의 νŠΈλžœλ“œκ°€ ꡉμž₯히 ν₯미둭게 λ‹€κ°€μ™”λ‹€.
μ•Œκ²Œλœ κ°œλ…
β€’
UX/UI의 κΈ°λ³Έ κ°œλ…κ³Ό UI의 기초적인 μš”μ†Œ
β€’
UI λ””μžμΈμ˜ λ³€ν™”ν•˜λŠ” νŠΈλžœλ“œ