λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
자격증πŸͺͺ/μ •λ³΄μ²˜λ¦¬κΈ°μ‚¬ πŸ“š

μ •λ³΄μ²˜λ¦¬κΈ°μ‚¬ μ‹€κΈ°_화면섀계 3[μ’…ν•©]πŸ“š

by @ENFJ 2022. 3. 16.

2. UI 섀계 원칙 쀑 μœ μ—°μ„±(flexibility) λž€ 무엇인지 μ„œμˆ ν•˜μ‹œμ˜€.

: μ‚¬μš©μžμ˜ μΈν„°λž™μ…˜μ„ μ΅œλŒ€ν•œ ν¬μš©ν•˜κ³ , μ‹€μˆ˜λ₯Ό 방지할 수 μžˆλ„λ‘ μ œμž‘ν•΄μ•Ό ν•˜λŠ” UI 섀계원칙이닀.

 

3. ISO/IEC 9126 기반 UI ν’ˆμ§ˆ μš”κ΅¬μ‚¬ν•­ 쀑 이식성 상세 ν’ˆμ§ˆ μš”κ΅¬μ‚¬ν•­μœΌλ‘œ 고렀된 μ†Œν”„νŠΈμ›¨μ–΄μ˜ λͺ©μ μ„ μœ„ν•΄ 제곡된 μˆ˜λ‹¨μ΄λ‚˜ λ‹€λ₯Έ 쑰치 없이 νŠΉμ • ν™˜κ²½μœΌλ‘œ μ „ν™˜λ˜λŠ” λŠ₯λ ₯에 λ”°λ₯Έ μ†Œν”„νŠΈμ›¨μ–΄ νŠΉμ„±μ€ 무엇인지 μž‘μ„±ν•˜μ‹œμ˜€.

: μ μš©μ„±

 

* μƒμ„Έν’ˆμ§ˆ μš”κ΅¬μ‚¬ν•­μ—λŠ” μ μš©μ„±, μ„€μΉ˜μ„±, λŒ€μ²΄μ„± 이 μžˆλ‹€.

 

4. UI 섀계 지침쀑 (κ°€μ‹œμ„±) 은 μ£Όμš” κΈ°λŠ₯을 메인 화면에 λ…ΈμΆœν•˜μ—¬ μ‰¬μš΄ μ‘°μž‘μ΄ κ°€λŠ₯ν•΄μ•Ό ν•œλ‹€λŠ” 지침이닀.

 

5. UX λž€ μ œν’ˆκ³Ό μ‹œμŠ€ν…œ,μ„œλΉ„μŠ€ 등을 μ‚¬μš©μžκ°€ 직.κ°„μ ‘μ μœΌλ‘œ κ²½ν—˜ν•˜λ©΄μ„œ 느끼고 μƒκ°ν•˜λŠ” 총제적 κ²½ν—˜μ΄λ‹€.

 

6. 개발 ν”„λ‘œμ νŠΈμ˜ 성곡적인 μˆ˜ν–‰μ„ μœ„ν•΄μ„œ λ‚΄λΆ€ κ΄€κ³„μžμ—κ²Œ UI개발 ν•„μš”μ„± 및 λͺ©ν‘œλ₯Ό κ³΅μœ ν•˜κ³  개발 λ²”μœ„λ₯Ό μˆ˜λ¦½ν•˜κΈ° μœ„ν•œ μ£Όμš” 기법듀 쀑 λΆˆν™•μ‹€μ„±μ΄ 높은 상황 λ³€ν™”λ₯Ό 사전에 μ˜ˆμΈ‘ν•˜κ³  λ‹€μ–‘ν•œ μ‹œλ‚˜λ¦¬μ˜€λ₯Ό μ„€κ³„ν•˜λŠ” λ°©λ²•μœΌλ‘œ 뢈 확싀성을 μ œκ±°ν•΄λ‚˜κ°€λ €λŠ” 경영 μ „λž΅ 기법은 무엇인가?

: μ‹œλ‚˜λ¦¬μ˜€ ν”Œλž˜λ‹

 

7. UI κ°œλ°œμ„ μœ„ν•œ μ£Όμš” 기법쀑 SWOT λΆ„μ„μ΄λž€ 무언인지 μ„œμˆ ν•˜μ‹œμ˜€.

: κΈ°μ—…μ˜ λ‚΄λΆ€ ν™˜κ²½κ³Ό μ™ΈλΆ€ν™˜κ²½μ„ λΆ„μ„ν•˜μ—¬ Strength(강점), weakness(약점),opportunity(기회), threat(μœ„ν˜‘) μš”μΈμ„ κ·œμ •ν•˜κ³  이λ₯Ό ν† λŒ€λ‘œ 경영 μ „λž΅μ„ μˆ˜λ¦½ν•˜λŠ” 방법이닀.

 

8. UI 지침(Guideline)에 μ„€λͺ…ν•˜κ³  μžˆλŠ” μ‚¬μš©μž μš”κ΅¬μ‚¬ν•­ λ„μΆœ μˆœμ„œλ₯Ό μ•Œλ§žκ²Œ λ‚˜μ—΄ν•˜μ‹œμ˜€.

 -. UIμ»¨μ…‰μ…˜, μ½˜μ„ΌνŠΈ λͺ¨λΈμ •μ˜, μ‚¬μš©μž μš”κ΅¬μ‚¬ν•­ μ •μ˜

 

a. 페λ₯΄μ†Œλ‚˜ μ •μ˜ ( 잠재적 μ‚¬μš©μžμ΄ λ‹€μ–‘ν•œ λͺ©μ κ³Ό κ΄€μ°°λœ 행동 νŒ¨ν„΄μ„ μ‘μ§‘μ‹œμΌœ 놓은 κ°€μƒμ˜ μ‚¬μš©μž)

b. μ½˜μ…‰νŠΈ λͺ¨λΈ μ •μ˜ ( μ—¬λŸ¬ 가지 좔상적인 μ½˜μ…‰νŠΈλ“€ μ‚¬μ΄μ˜ 관계λ₯Ό λ³΄μ—¬μ£ΌλŠ” λ‹€μ΄μ–΄κ·Έλž¨,

λ‹€μ–‘ν•œ 아이디어듀을 κ°„νŽΈν•˜κ²Œ μ‹œκ°ν™” ν•˜μ—¬ ν‘œν˜„ν•  수 μžˆλŠ” μœ μš©ν•œ λ°©λ²•μœΌλ‘œ 아이디어λ₯Ό 잘 μ „λ‹¬ν•˜κ³  μƒκ°μ˜ 과정을 효율적으둜 μ΄λŒμ–΄ 쀌)

c. μ‚¬μš©μž μš”κ΅¬μ‚¬ν•­ μ •μ˜ ( λ¦¬μ„œμΉ˜ 및 페λ₯΄μ†Œλ‚˜ 결과물을 ν† λŒ€λ‘œ μš”κ΅¬μ‚¬ν•­μ„ λ„μΆœν•˜κ³ , μš°μ„ μˆœμœ„λ₯Ό 정함)

d. UI μ»¨μ…‰μ…˜ (μ •λ¦¬λœ μš”κ΅¬μ‚¬ν•­μ„ κ΅¬μ²΄ν™”ν•˜λŠ” λ‹¨κ³„λ‘œ ν™”λ©΄ λ””μžμΈ 단계 전에 λŒ€ν‘œ 화면섀계λ₯Ό μ§„ν–‰ν•˜λŠ” 단계 )

 

9. UI 검증 μ‹œ μ‚¬μš©μžκ°€ 직접 μ œν’ˆμ„ μ‚¬μš©ν•˜λ©΄μ„œ 미리 μž‘μ„±λœ μ‹œλ‚˜λ¦¬μ˜€μ— λ§žμΆ”μ–΄ 과제λ₯Ό μˆ˜ν–‰ν•œ ν›„ μ§ˆλ¬Έμ— λ‹΅ν•˜λ„λ‘ ν•˜λŠ” ν…ŒμŠ€νŠΈ!!

 ν˜„ μ œν’ˆμ— λŒ€ν•œ μ‚¬μš©μžμ˜ μš”κ΅¬μ‚¬ν•­κ³Ό 행동을 κ΄€μ°° ν•  μˆ˜μžˆλŠ” μœ μš©ν•œ 진단방법이닀.

=> μ‚¬μš©μ„± ν…ŒμŠ€νŠΈ(usability test)

 

10. μŠ€ν† λ¦¬λ³΄λ“œ(story board)λŠ” UI ν™”λ©΄ 섀계λ₯Ό μœ„ν•΄μ„œ μ •μ±…μ΄λ‚˜ ν”„λ‘œμ„ΈμŠ€ 및 μ½˜ν…μΈ μ˜ ꡬ성, μ™€μ΄μ–΄ν”„λ ˆμž„(UI,UX) , κΈ°λŠ₯에 λŒ€ν•œ μ •μ˜, λ°μ΄ν„°λ² μ΄μŠ€μ˜ 연동 λ“± κ΅¬μΆ•ν•˜λŠ” μ„œλΉ„μŠ€λ₯Ό μœ„ν•œ λŒ€λΆ€λΆ„ 정보가 수룩된 λ¬Έμ„œλ‘œμ„œ, λ””μžμ΄λ„ˆμ™€ κ°œλ°œμžκ°€ μ΅œμ’…μ μœΌλ‘œ μ°Έκ³ ν•˜λŠ” μ‚°μΆœ λ¬Έμ„œμ΄λ‹€. 

 

11. UI μ‹œλ‚˜λ¦¬μ˜€ λ¬Έμ„œμ˜ μž‘μ„± μš”κ±΄μ€‘!!!  UI μ‹œλ‚˜λ¦¬μ˜€λŠ” λˆ„λ½μ΄ μ—†μ–΄μ•Ό ν•˜κ³ , μ΅œλŒ€ν•œ 빠짐없이 κ°€λŠ₯ν•œ μƒμ„Έν•˜κ²Œ κΈ°μˆ ν•˜λ©° μ‹œμŠ€ν…œ κΈ°λŠ₯보닀 μ‚¬μš©μžμ΄ νƒœμŠ€ν¬μ— μ΄ˆμ μ„ 맞좰 κΈ°μˆ ν•΄μ•Ό ν•˜λŠ” μš”κ±΄μ€ 무엇인가?

 

: μ™„μ „μ„±

 

 

12.

와이어 ν”„λ ˆμž„ : 이해 κ΄€κ³„μžλ“€κ³Όμ˜ 화면ꡬ성을 ν˜‘μ˜ν•˜κ±°λ‚˜ μ„œλΉ„μŠ€μ˜ κ°„λž΅ν•œ 흐름을 κ³΅μœ ν•˜κΈ° μœ„ν•΄

ν™”λ©΄ λ‹¨μœ„μ˜ λ ˆμ΄μ•„μ›ƒμ„ μ„€κ³„ν•˜λŠ” μž‘μ—…

 

ν”„λ‘œν† νƒ€μž…: 컴퓨터 μ‹œμŠ€ν…œμ΄λ‚˜ μ†Œν”„νŠΈμ›¨μ–΄μ˜ 섀계 λ˜λŠ” μ„±λŠ₯, κ΅¬ν˜„ κ°€λŠ₯μ„±, 운용 κ°€λŠ₯성을 ν‰κ°€ν•˜κ±°λ‚˜ μš”κ΅¬μ‚¬ν•­μ„ μ’€ 더 잘 μ΄ν•΄ν•˜κ³  κ²°μ •ν•˜κΈ° μœ„ν•˜μ—¬ 전체적인 κΈ°λŠ₯을 κ°„λž΅ν•œ ν˜•νƒœλ‘œ κ΅¬ν˜„ν•œ μ‹œμ œν’ˆ.

 

 

13.

UI μ„€κ³„μ•ˆμ˜ 적정성 확인 ->

화면에 ν‘œν˜„λ˜μ–΄μ•Ό ν•  κΈ°λŠ₯ 및 λΉ„κΈ°λŠ₯적 μš”κ΅¬μ‚¬ν•­ κ²€ν†  ->

ν™”λ©΄μ˜ μž…λ ₯μš”μ†Œλ₯Ό ν†΅ν•œ UI μš”κ΅¬μ‚¬ν•­ 확인 ->

μœ μŠ€μΌ€μ΄μŠ€λ₯Ό ν†΅ν•œ UI μš”κ΅¬μ‚¬ν•­ 확인 ->

( μœ μŠ€μΌ€μ΄μŠ€ )섀계 ->

κΈ°λŠ₯ 및 양식 확인

 

15. UML(unfied modeling langauage) 무엇인지 μ„œμˆ ν•˜μ‹œμ˜€.

:UML은 객체지ν–₯ μ†Œν”„νŠΈμ›¨μ–΄ 개발 κ³Όμ •μ—μ„œ μ‚°μΆœλ¬Όμ„ λͺ…μ„Έν™”, μ‹œκ°ν™”, λ¬Έμ„œν™” ν• λ•Œ μ‚¬μš©λ˜λŠ” λͺ¨λΈλ§ 기술과 방법둠을 ν†΅ν•©ν•΄μ„œ λ§Œλ“  ν‘œμ€€ν™”λœ λ²”μš© λͺ¨λΈλ§ 언어이닀.

 

16. ν‘œμ€€ν™”λœ λ²”μš© λͺ¨λΈλ§ 언어인 UML 의 κ΅¬μ„±μš”μ†Œ

a. 사물 : 좔상적인 κ°œλ…μœΌλ‘œ 주제λ₯Ό λ‚˜νƒ€λ‚΄λŠ” μš”μ†Œ, 단어 κ΄€μ μ—μ„œ λͺ…사 λ˜λŠ” 동사λ₯Ό 의미

b. 관계 : μ‚¬λ¬Όμ˜ 의미λ₯Ό ν™•μž₯ν•˜κ³  λͺ…ν™•νžˆ ν•˜λŠ” μš”μ†Œ, 사물과 사물을 μ—°κ²°ν•˜λŠ” μš”μ†Œ, 단어 κ΄€μ μ—μ„œ ν˜•μš©μ‚¬, 뢀사 의미

c. λ‹€μ΄μ–΄κ·Έλž¨: 사물과 관계λ₯Ό λͺ¨μ•„ 그림으둜 ν‘œν˜„ν•œ ν˜•νƒœ, ν˜•μ‹κ³Ό λͺ©μ μ— 따라 λ‹€μ–‘ν•˜κ²Œ μ •μ˜.

 

17. 동적 λ‹€μ΄μ–΄κ·Έλž¨μ€‘ μ‹œμŠ€ν…œμ΄ μ–΄λ–€ κΈ°λŠ₯을 μˆ˜ν–‰ν•˜λŠ”μ§€λ₯Ό 객체의 처리 λ‘œμ§μ΄λ‚˜ 쑰건에 λ”°λ₯Έ 처리의 νλ¦„μœΌλ‘œ μˆœμ„œλŒ€λ‘œ ν‘œν˜„ν•˜λŠ” λ‹€μ΄μ–΄κ·Έλž¨ 

: ν™œλ™ λ‹€μ΄μ–΄κ·Έλž¨

 

18. 클래슀 λ‹€μ΄μ–΄κ·Έλž¨ μ—μ„œ 클래슀의 ꡬ쑰적 νŠΉμ„±μ— 이름을 λΆ™μΈκ²ƒμœΌλ‘œ νŠΉμ„±μ— ν•΄λ‹Ήν•˜λŠ” μΈμŠ€ν„΄μŠ€κ°€ λ³΄μœ ν•  수 μžˆλŠ” κ°’μ˜ λ²”μœ„λ₯Ό κΈ°μˆ ν•˜λŠ” κ΅¬μ„±μš”μ†ŒλŠ” ( 속성 ) 이닀.

 

19. (볡합 관계==포함관계)λŠ” μ§‘ν•©κ΄€κ³„μ˜ νŠΉμˆ˜ν•œ ν˜•νƒœλ‘œ, ν¬ν•¨ν•˜λŠ” μ‚¬λ¬Όμ˜ λ³€ν™”κ°€ ν¬ν•¨λ˜λŠ” μ‚¬λ¬Όμ—κ²Œ 영ν–₯을 λ―ΈμΉ˜λŠ” 관계λ₯Ό ν‘œν˜„ν•œλ‹€.

 

20. μ‹œν€€μŠ€ λ‹€μ΄μ–΄κ·Έλž¨ κ΅¬μ„±μš”μ†Œ : 객체, 생λͺ…μ„ , ν™œμ„±ν™”, λ©”μ‹œμ§€