πŸ“±μ•± ν™”λ©΄ 섀계 독학이 λ§‰λ§‰ν•˜λ‹€λ©΄, UX/UI λ””μžμΈμ€ μ–΄λ–»κ²Œ μ‹œμž‘ν• κΉŒμš”?

λ””μžμΈ μ „κ³΅μ΄λ‚˜ κ·Έλ¦Ό μ‹€λ ₯이 없어도 μ‹œμž‘ν•  수 μžˆλŠ” UX κΈ°μ΄ˆλΆ€ν„° GUI λ””μžμΈκ³Ό ν™”λ©΄ μ„€κ³„κΉŒμ§€, 클래슀101의 UX/UI λ””μžμΈ κ°•μ˜λ₯Ό μ†Œκ°œν•©λ‹ˆλ‹€.

μ•± ν™”λ©΄ μ„€κ³„λŠ” λ””μžμΈ μ „κ³΅μ΄λ‚˜ κ·Έλ¦Ό μ‹€λ ₯이 없어도 μ‹œμž‘ν•  수 μžˆμŠ΅λ‹ˆλ‹€. UX/UI λ””μžμΈμ—μ„œλŠ” 예쁜 화면보닀 μ‚¬μš©μžμ˜ λΆˆνŽΈμ„ μ°Ύκ³  ν•„μš”ν•œ κΈ°λŠ₯을 μ΄ν•΄ν•˜κΈ° μ‰½κ²Œ λ°°μΉ˜ν•˜λŠ” 과정이 μ€‘μš”ν•©λ‹ˆλ‹€. 처음 λ°°μš΄λ‹€λ©΄ μ‹€μ œ μ•± 뢄석뢀터 GUI λ””μžμΈ, λ””μžμΈ μ‹œμŠ€ν…œ, μ•± 기획 μˆœμ„œλ‘œ λ²”μœ„λ₯Ό λ„“ν˜€λ³΄μ„Έμš”.

μ•± ν™”λ©΄ 섀계, 정말 λ…ν•™μœΌλ‘œ 배울 수 μžˆμ„κΉŒμš”?

UX/UI의 κΈ°λ³Έ κ°œλ…κ³Ό λ””μžμΈ 도ꡬ μ‚¬μš©λ²•μ€ λ…ν•™μœΌλ‘œλ„ 읡힐 수 μžˆμŠ΅λ‹ˆλ‹€. λ‹€λ§Œ μ‹€μ œ 앱이 μ™œ 그런 ν™”λ©΄ ꡬ쑰λ₯Ό μ„ νƒν–ˆλŠ”μ§€ λΆ„μ„ν•˜λŠ” ν›ˆλ ¨μ΄ μ—†λ‹€λ©΄ 이둠과 싀무 μ‚¬μ΄μ˜ 간격이 컀질 수 μžˆμŠ΅λ‹ˆλ‹€. ν† μŠ€, λ‹Ήκ·Ό, μ§€κ·Έμž¬κ·Έ 같은 μ„œλΉ„μŠ€λ₯Ό μ‚΄νŽ΄λ³Ό λ•ŒλŠ” 화면을 κ·ΈλŒ€λ‘œ 따라 그리기보닀 λ‹€μŒ λ‚΄μš©μ„ 확인해 λ³΄μ„Έμš”.

  • μ‚¬μš©μžκ°€ 이 ν™”λ©΄μ—μ„œ ν•΄κ²°ν•˜λ €λŠ” 문제
  • κ°€μž₯ λ¨Όμ € λ³΄μ΄λŠ” 정보와 λ²„νŠΌ
  • λ‹€μŒ ν™”λ©΄μœΌλ‘œ μ΄λ™ν•˜λŠ” μˆœμ„œ

이처럼 화면을 μ‚¬μš©μž 문제 ν•΄κ²°μ˜ κ΄€μ μ—μ„œ λΆ„μ„ν•˜λ©΄ μ•± ꡬ쑰λ₯Ό μ΄ν•΄ν•˜λŠ” 데 도움이 λ©λ‹ˆλ‹€. 홍석희(킹홍)의 [IT μ£Όλ‹ˆμ–΄λ₯Ό μœ„ν•œ μ‹€μ „ UX λ””μžμΈ 개둠]은 μ‹€μ œ μ•± μ„œλΉ„μŠ€κ°€ μ‚¬μš©μžμ˜ λΆˆνŽΈμ„ μ–΄λ–€ ν™”λ©΄κ³Ό κΈ°λŠ₯으둜 ν•΄κ²°ν–ˆλŠ”μ§€ 사둀λ₯Ό μ€‘μ‹¬μœΌλ‘œ λ°°μš°λŠ” ν΄λž˜μŠ€μž…λ‹ˆλ‹€.

μ‚¬μš©μž λ¦¬μ„œμΉ˜μ™€ μ‚¬μš©μž μ—¬μ •, μ„œλΉ„μŠ€ ꡬ쑰, 아이디어λ₯Ό κ΅¬μ²΄ν™”ν•˜κ³  κ²€μ¦ν•˜λŠ” κ³Όμ •κΉŒμ§€ λ‹€λ£Ήλ‹ˆλ‹€. UXλ₯Ό 처음 μ ‘ν•˜κ±°λ‚˜ ν™”λ©΄ μ„€κ³„μ˜ 논리적인 흐름뢀터 μ΄ν•΄ν•˜κ³  싢은 μ‚¬λžŒμ—κ²Œ λ§žμŠ΅λ‹ˆλ‹€.

클래슀101μ—μ„œ γ€ˆIT μ£Όλ‹ˆμ–΄λ₯Ό μœ„ν•œ μ‹€μ „ UX λ””μžμΈ κ°œλ‘ γ€‰μ„ 확인해 λ³΄μ„Έμš”.

그림을 μ•ˆ 그렀봀어도 μ•± ν™”λ©΄ λ””μžμΈμ„ ν•  수 μžˆμ„κΉŒμš”?

κ°€λŠ₯ν•©λ‹ˆλ‹€. μ•± ν™”λ©΄ μ„€κ³„μ—μ„œλŠ” 손그림 μ‹€λ ₯보닀 λ²„νŠΌκ³Ό 이미지, κΈ€μžλ₯Ό 어디에 λ°°μΉ˜ν• μ§€ νŒλ‹¨ν•˜λŠ” λŠ₯λ ₯이 더 μ€‘μš”ν•©λ‹ˆλ‹€. 화면에 λ“€μ–΄κ°€λŠ” μš”μ†ŒλŠ” λ‹¨μˆœν•œ μž₯식이 μ•„λ‹™λ‹ˆλ‹€. μ‚¬μš©μžκ°€ ν˜„μž¬ μœ„μΉ˜μ™€ λ‹€μŒ 행동을 μ‰½κ²Œ μ΄ν•΄ν•˜λ„λ‘ μ•ˆλ‚΄ν•˜λŠ” 역할을 ν•©λ‹ˆλ‹€.

이 단계λ₯Ό μ±„μ›Œμ£ΌλŠ” κ°•μ˜κ°€ 유λ₯΄μ˜ [μ‹€λ¬΄μ—μ„œ λ°”λ‘œ μ μš©κ°€λŠ₯ν•œ GUI λ””μžμΈ νŠΈλ ˆμ΄λ‹] μž…λ‹ˆλ‹€. GUI λ””μžμΈμ˜ κΈ°λ³Έ 원칙과 μ‹€μ „ λ…Έν•˜μš°λ₯Ό λ°°μš°λŠ” ν΄λž˜μŠ€μž…λ‹ˆλ‹€. λ²„νŠΌκ³Ό μ•„μ΄μ½˜, 색상, λ ˆμ΄μ•„μ›ƒ 같은 κ·Έλž˜ν”½ μš”μ†Œλ‘œ μ‚¬μš©μžμ™€ μ†Œν†΅ν•˜λŠ” 방법을 λ‹€λ£Ήλ‹ˆλ‹€.

그림을 κ·Έλ €λ³Έ κ²½ν—˜μ€ μ—†μ§€λ§Œ μ•± ν™”λ©΄μ˜ μ‹œκ°μ μΈ κΈ°λ³ΈκΈ°λ₯Ό 읡히고 싢은 μ΄ˆλ³΄μžμ—κ²Œ λ§žμŠ΅λ‹ˆλ‹€.

클래슀101μ—μ„œ γ€ˆμ‹€λ¬΄μ—μ„œ λ°”λ‘œν•œ GUI λ””μžμΈ νŠΈλ ˆμ΄λ‹γ€‰μ„ 확인해 λ³΄μ„Έμš”.

ν™”λ©΄λ§ˆλ‹€ λ””μžμΈμ΄ 제각각이라면 μ–΄λ–€ ν΄λž˜μŠ€κ°€ 도움이 λ κΉŒμš”?

화면이 λŠ˜μ–΄λ‚ μˆ˜λ‘ λ²„νŠΌκ³Ό κΈ€μž, 색상, 여백을 μΌκ΄€λ˜κ²Œ κ΄€λ¦¬ν•˜λŠ” 기쀀이 ν•„μš”ν•©λ‹ˆλ‹€. λ””μžμΈ μ‹œμŠ€ν…œμ„ 읡히면 λ°˜λ³΅λ˜λŠ” μš”μ†Œλ₯Ό κ·œμΉ™μœΌλ‘œ 정리해 μ—¬λŸ¬ ν™”λ©΄μ˜ 톡일성을 μœ μ§€ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

이 λ‹¨κ³„μ—μ„œ ν•„μš”ν•œ μ •μ˜ν˜Έμ˜ [UIUX λ””μžμΈμ΄ μ‰¬μ›Œμ§€λŠ” λ””μžμΈ μ‹œμŠ€ν…œμ˜ λͺ¨λ“ κ²ƒ] λŠ” λ””μžμΈκ³Ό νŒ¨ν„΄, μ»΄ν¬λ„ŒνŠΈλ₯Ό μΌκ΄€λœ κΈ°μ€€μœΌλ‘œ κ΅¬μ„±ν•˜κ³  ν™œμš©ν•˜λŠ” 방법을 λ°°μš°λŠ” ν΄λž˜μŠ€μž…λ‹ˆλ‹€. 화면을 μ—¬λŸ¬ 개 λ§Œλ“€λ©΄μ„œ λ””μžμΈμ˜ 톡일성이 λ¬΄λ„ˆμ§€κ±°λ‚˜ λ°˜λ³΅λ˜λŠ” μš”μ†Œλ₯Ό μ²΄κ³„μ μœΌλ‘œ κ΄€λ¦¬ν•˜κ³  싢은 μ‚¬λžŒμ—κ²Œ λ§žμŠ΅λ‹ˆλ‹€.

클래슀101μ—μ„œ γ€ˆUIUX λ””μžμΈμ΄ μ‰¬μ›Œμ§€λŠ” λ””μžμΈ μ‹œμŠ€ν…œμ˜ λͺ¨λ“ κ²ƒγ€‰μ„ λ§Œλ‚˜λ³΄μ„Έμš”.

β“μžμ£Ό λ¬»λŠ” 질문

λ””μžμΈ 전곡이 μ•„λ‹ˆμ–΄λ„ μ•± ν™”λ©΄ 섀계λ₯Ό 배울 수 μžˆλ‚˜μš”?

λ„€. μ†Œκ°œν•œ ν΄λž˜μŠ€λŠ” μž…λ¬Έμžλ‚˜ μ΄ˆκΈ‰μžλ₯Ό κΈ°μ€€μœΌλ‘œ ꡬ성돼 전곡 지식을 μš”κ΅¬ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. UX/UI의 κΈ°λ³Έ κ°œλ…λΆ€ν„° μ‹€μ œ 화면을 λΆ„μ„ν•˜κ³  κ΅¬μ„±ν•˜λŠ” κ³Όμ •κΉŒμ§€ μˆœμ„œλŒ€λ‘œ 읡히면 λ©λ‹ˆλ‹€.

그림을 λͺ» 그렀도 UX/UI λ””μžμΈμ„ ν•  수 μžˆλ‚˜μš”?

κ°€λŠ₯ν•©λ‹ˆλ‹€. UX/UI λ””μžμΈμ€ 손그림 μ‹€λ ₯보닀 μ‚¬μš©μž 문제λ₯Ό λΆ„μ„ν•˜κ³  ν™”λ©΄ ꡬ쑰λ₯Ό λ…Όλ¦¬μ μœΌλ‘œ κ΅¬μ„±ν•˜λŠ” λŠ₯λ ₯이 μ€‘μš”ν•©λ‹ˆλ‹€. GUI λ””μžμΈκ³Ό λ””μžμΈ μ‹œμŠ€ν…œμ„ ν•¨κ»˜ 배우면 μ‹œκ°μ μΈ 기본기도 보완할 수 μžˆμŠ΅λ‹ˆλ‹€.

독학과 온라인 ν΄λž˜μŠ€λŠ” μ–΄λ–€ 차이가 μžˆλ‚˜μš”?

독학은 ν•„μš”ν•œ μžλ£Œμ™€ ν•™μŠ΅ μˆœμ„œλ₯Ό 직접 μ •ν•΄μ•Ό ν•©λ‹ˆλ‹€. 온라인 ν΄λž˜μŠ€λŠ” μ‹€λ¬΄μžκ°€ κ΅¬μ„±ν•œ μ»€λ¦¬ν˜λŸΌμ„ 따라가며 κ°œλ…κ³Ό 사둀, μ‹€μŠ΅μ„ μ—°κ²°ν•  수 μžˆμ–΄ μ‹œν–‰μ°©μ˜€λ₯Ό μ€„μ΄λŠ” 데 도움이 λ©λ‹ˆλ‹€.