Search

λ””μžμΈ ꡬ성 μš”μ†Œ μ„€κ³„Β·μ œμž‘

λ””μžμΈ ꡬ성 μš”μ†Œ 섀계

β€’
μŠ€ν† λ¦¬λ³΄λ“œ μ„€κ³„ν•˜κΈ°
β—¦
μŠ€ν† λ¦¬λ³΄λ“œ
β–ͺ
μŠ€ν† λ¦¬λ³΄λ“œ ꡬ성
β–ͺ
μ„œλΉ„μŠ€ 흐름도
β–ͺ
ν™”λ©΄ μŠ€μΌ€μΉ˜
β—¦
μ›Ή λ””μžμΈμ˜ 정보
β—¦
μ›Ή λ””μžμΈμ˜ 정보 체계화
β—¦
μ›Ή λ””μžμΈ 정보 μ’…λ₯˜
β—¦
μ›Ή λ””μžμΈμ˜ 정보 ꡬ쑰화
β—¦
μ›Ήμ‚¬μ΄νŠΈ λ ˆμ΄μ•„μ›ƒ ꡬ쑰
β–ͺ
헀더
β–ͺ
λ„€λΉ„κ²Œμ΄μ…˜
β–ͺ
λ°”λ””
β€’
컨텐츠
β€’
μ–΄μ‚¬μ΄λ“œ
β–ͺ
ν‘Έν„°
β–ͺ
κ΄‘κ³ 
β€’
링크
β€’
ν•˜μ΄νΌλ§ν¬
β—¦
λ°˜μ‘ν˜• μ›Ή 정보섀계
β—¦
λ„€λΉ„κ²Œμ΄μ…˜
β—¦
λ ˆμ΄λΈ”λ§
β—¦
와이어 ν”„λ ˆμž„
β–ͺ
와이어 ν”„λ ˆμž„ 사둀
β–ͺ
λͺ¨λ°”일 μ „μš© 와이어 ν”„λ ˆμž„
β—¦
νŽ˜μ΄μ§€ λ ˆμ΄μ•„μ›ƒ
β–ͺ
메인 νŽ˜μ΄μ§€μ—μ„œ κΈ°λŠ₯별 μ˜μ—­μ˜ ꡬ성을 μŠ€μΌ€μΉ˜ν•œλ‹€.
β–ͺ
νŽ˜μ΄μ§€ κ°„μ˜ 계측적 λ„€λΉ„κ²Œμ΄μ…˜ ꡬ성
β–ͺ
λ„μ‹ν™”λœ 계측도 ꡬ성
β€’
심미성 ꡬ성 μš”μ†Œ μ„€κ³„ν•˜κΈ°
β—¦
λ””μžμΈ κ°€μ΄λ“œ ꡬ성
β–ͺ
컨셉과 νŠΈλžœλ“œ
β€’
λ””μžμΈ λ¦¬μ„œμΉ˜
β€’
λΉ„μ£Όμ–Ό 컨셉
β€’
μ›Ήκ³Ό λͺ¨λ°”일 ν™˜κ²½μ—μ„œμ˜ νŠΈλžœλ“œ
β—¦
νŠΈλžœλ“œμ— λ”°λ₯Έ λ””μžμΈ
β–ͺ
마이크둜 μΈν„°λž™μ…˜
β–ͺ
μΉ΄λ“œ λ””μžμΈ
β–ͺ
ν”Œλž« λ””μžμΈ
β–ͺ
슀마트 λ„€λΉ„κ²Œμ΄μ…˜
β–ͺ
κ³ ν™”μ§ˆμ˜ λΉ„μ£Όμ–Ό
β–ͺ
νƒˆ κ·Έλ¦¬λ“œ
β—¦
λ°˜μ‘ν˜• μ›Ή λ””μžμΈ νŠΈλžœλ“œ
β€’
νŠΈλžœλ“œμ— λ”°λ₯Έ μ½˜μ…‰ 개발
β—¦
AI λ”₯ λŸ¬λ‹ 기반 λ§žμΆ€ν˜• 컨텐츠
β—¦
감정적 μš”μ†Œμ˜ 컨셉
β—¦
λ ˆμ΄μ•„μ›ƒ
β—¦
λΉ„μ£Όμ–Ό
β–ͺ
λ ˆμ΄μ•„μ›ƒ
β€’
κ·Έλ¦¬λ“œ μ‹œμŠ€ν…œμ„ ν™œμš©ν•œ λ ˆμ΄μ•„μ›ƒ
β—¦
κ·Έλ¦¬λ“œ μ’…λ₯˜
β—¦
κ·Έλ¦¬λ“œλŠ” 곡간 λΉ„λ‘€λ‚˜ 수치 등에 λ”°λ₯Έ μ‹œκ°μ  ꡬ성 μš”μ†Œ
β€’
μ›Ή μ‚¬μ΄νŠΈ λ ˆμ΄μ•„μ›ƒ
β—¦
μ›Ήμ‚¬μ΄νŠΈμ˜ 정보 ꡬ쑰 재배치
β—¦
960 κ·Έλ¦¬λ“œ
β—¦
λ‘λ‡Œλ₯Ό μ§€λ°°ν•˜λŠ” λ ˆμ΄μ•„μ›ƒ λ””μžμΈ
β–ͺ
μœ λ™ν˜• νŒ¨ν„΄
β–ͺ
μΉΌλŸΌλ“œλ‘­
β—¦
λ ˆμ΄μ•„μ›ƒ μ‹œν”„νŠΈ νŒ¨ν„΄
β–ͺ
λ―Έμ„Έμ‘°μ •
β–ͺ
μ˜€ν”„μΊ”λ²„μŠ€ νŒ¨ν„΄
β–ͺ
μ μ‘ν˜• μ›Ή λ””μžμΈ
β€’
μœ λ™ν˜• ν…Œμ΄λΈ”
β€’
ν¬λ‘œμŠ€νƒ­ κ·Έλ¦¬λ“œ
β€’
점진적 컬럼 μˆ¨κΉ€ κ·Έλ¦¬λ“œ
β€’
λ°˜μ‘ν˜• 슀크둀 κ·Έλ¦¬λ“œ
β€’
μ•„μ½”λ””μ–Έ νƒ­
β€’
μ‚¬μš©μ„± κ΅¬μ„±μš”μ†Œ μ„€κ³„ν•˜κΈ°
β—¦
UI κ΅¬μ„±μš”μ†Œ 섀계
β–ͺ
μ‚¬μš©μ„±
β–ͺ
μœ μš©μ„±
β—¦
μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€ (UI)
β–ͺ
μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€ μ’…λ₯˜
β€’
GUI
β€’
TUI
β€’
VUI
β€’
CLI
β–ͺ
UI 의 ꡬ성 μš”κ±΄
β€’
ν•™μŠ΅μ˜ μš©μ΄μ„±
β€’
μ‚¬μš©μ˜ νš¨μœ¨μ„±
β€’
였λ₯˜μ˜ μ΅œμ†Œν™”
β€’
μ‚¬μš©μž 만쑱
β€’
UI λ ˆμ΄μ•„μ›ƒ
β–ͺ
UI κ°€μ΄λ“œ 라인
β€’
Jakob Nielsen은 UI κ°€μ΄λ“œλΌμΈ 원칙
β—¦
μ‚¬μš©μž κ²½ν—˜ (UX)
β–ͺ
UI/UX λ””μžμΈ 이해
β—¦
컨텐츠 μ‹œκ°ν™”
β–ͺ
컨텐츠 μ‹œκ°ν™” κ΄€λ ¨ λΆ„μ•Ό
β€’
μΈν¬κ·Έλž˜ν”½
β€’
정보 μ‹œκ°ν™”
β€’
과학적 κ°€μ‹œν™”
β€’
톡계적 κ·Έλž˜ν”„
β–ͺ
μ½˜ν…μΈ  μ‹œκ°ν™”
β€’
μ½˜ν…μΈ μ˜ 기획
β€’
데이터 μˆ˜μ§‘
β€’
μ—°κ²°κ³ λ¦¬μ˜ ꡬ성
β€’
문제점 νŒŒμ•…
β€’
포맷의 선택
β€’
μ‹œκ°μ  μ ‘κ·Ό λ°©λ²•μ˜ 선택
β€’
μ •μ œμ™€ ν…ŒμŠ€νŠΈ
β€’
맀체별 κ΅¬μ„±μš”μ†Œ μ„€κ³„ν•˜κΈ°
β—¦
맀체별 κ΅¬μ„±μš”μ†Œ 뢄석
β–ͺ
μ›Ή
β€’
μ›Ή λ””μžμΈ 고렀사항
β€’
μ›Ή λ””μžμΈ κ°€μ΄λ“œλΌμΈ
β€’
λͺ¨λ°”일 기기용 μ›Ή μ‚¬μ΄λ“œ λ””μžμΈ
β–ͺ
컴퓨터
β€’
폰
β€’
νƒœλΈ”λ¦Ώ
β–ͺ
ν‚€μ˜€μŠ€ν¬
β–ͺ
디지털 μ‚¬μ΄λ‹ˆμ§€

λ””μžμΈ ꡬ성 μš”μ†Œ μ œμž‘

β€’
μŠ€ν† λ¦¬λ³΄λ“œ μ œμž‘ν•˜κΈ°
β—¦
와이어 ν”„λ ˆμž„ μž‘μ„±
β–ͺ
와이어 ν”„λ ˆμž„ κ°œλ…
β–ͺ
와이어 ν”„λ ˆμž„ μž‘μ„±
β–ͺ
와이어 ν”„λ ˆμž„ μž‘μ„± 도ꡬ
β€’
ν•Έλ“œ λ“œλ‘œμž‰
β€’
λͺ©μ—… 툴
β€’
기타
β—¦
μŠ€ν† λ¦¬ λ³΄λ“œ μž‘μ„±
β–ͺ
μŠ€ν† λ¦¬λ³΄λ“œ
β–ͺ
μŠ€ν† λ¦¬λ³΄λ“œ μž‘μ„±
β€’
ν‘œμ§€
β€’
κ°œμ • 이λ ₯
β€’
정보 ꡬ쑰도
β€’
μ„œλΉ„μŠ€ 흐름도
β€’
ν™”λ©΄ 섀계
β—¦
νŽ˜μ΄μ§€ 정보 μ˜μ—­
β—¦
ν™”λ©΄ 섀계 μ˜μ—­
β—¦
ν™”λ©΄ μ„€λͺ… μ˜μ—­
β—¦
ν•˜λ‹¨ μ˜μ—­
β€’
심미성 ꡬ성 μš”μ†Œ μ œμž‘ν•˜κΈ°
β—¦
심미적 μš”μ†Œ ν‘œν˜„
β–ͺ
μ‹œκ° μΈν„°νŽ˜μ΄μŠ€ 심미적 μš”μ†Œ
β€’
μ‹œκ°ν™”
β€’
μ‹œκ° μΈν„°νŽ˜μ΄μŠ€ 심미적 μš”μ†Œ
β—¦
색
β—¦
νƒ€μ΄ν¬κ·Έλž˜ν”Ό
β—¦
κ·Έλž˜ν”½ 이미지
β—¦
λ™μ˜μƒ
β–ͺ
심미적 μš”μ†Œμ˜ μ‘°ν˜•μ  ν‘œν˜„
β€’
색
β—¦
μƒ‰μ˜ μ‘°ν˜•μ  ν‘œν˜„ μš”μ†Œ
β–ͺ
색상 (hue)
β–ͺ
λͺ…도 (lightness)
β–ͺ
채도 (chroma)
β—¦
색을 ν™œμš©ν•œ μ •λ³΄μ˜ ν‘œν˜„
β€’
νƒ€μ΄ν¬κ·Έλž˜ν”Ό
β—¦
νƒ€μ΄ν¬κ·Έλž˜ν”Όμ˜ μ‘°ν˜•μ  ν‘œν˜„ μš”μ†Œ
β–ͺ
μ„œμ²΄
β–ͺ
무게
β–ͺ
크기
β–ͺ
μŠ€νƒ€μΌ
β–ͺ
μžκ°„, ν–‰κ°„
β—¦
νƒ€μ΄ν¬κ·Έλž˜ν”Όλ₯Ό ν™œμš©ν•œ μ •λ³΄μ˜ ν‘œν˜„
β€’
κ·Έλž˜ν”½ 이미지
β—¦
κ·Έλž˜ν”½ μ΄λ―Έμ§€μ˜ μ‘°ν˜•μ  ν‘œν˜„ μš”μ†Œ
β–ͺ
이미지
β–ͺ
질감
β–ͺ
ν˜•νƒœ
β–ͺ
λ°©ν–₯
β–ͺ
색
β–ͺ
μ„œμ²΄
β—¦
κ·Έλž˜ν”½ 이미지λ₯Ό ν™œμš©ν•œ μ •λ³΄μ˜ ν‘œν˜„
β–ͺ
μ•„μ΄μ½˜
β–ͺ
ν”½ν† κ·Έλž¨
β–ͺ
λ‹€μ΄μ–΄κ·Έλž¨
β–ͺ
μ‹œκ° μΈν„°νŽ˜μ΄μŠ€μ˜ 심미적 ꡬ성
β€’
κ· ν˜•
β€’
λŒ€λΉ„
β€’
λŒ€μΉ­
β€’
κ°•μ‘°
β€’
리듬
β–ͺ
업무 λΆ„μž₯
β€’
μ›Ή μ‚¬μ΄νŠΈμ˜ 개발 νŒŒνŠΈλ³„ 업무 이해
β€’
λ””μžμΈ 개발 상세 μŠ€μΌ€μ₯΄μ˜ μ‚°μ •
β€’
κΈ°λŠ₯ ν™”λ©΄ 및 컨텐츠 ν™”λ©΄ λ””μžμΈ 업무 λΆ„μž₯
β€’
이미지 μš”μ†Œ μ œμž‘ 및 HTML, μ œμž‘, κ²€ν†  λ“±
β–ͺ
TFT
β€’
μ‚¬μš©μ„± ꡬ성 μš”μ†Œ μ œμž‘ν•˜κΈ°
β—¦
UI ꡬ성 μš”μ†Œ μ œμž‘
β–ͺ
UI μ œμž‘μ˜ 원칙
β€’
메타포
β€’
μ‚¬μš©μž μ‘°μ •
β€’
직접 μ‘°μž‘
β€’
일관성
β€’
ν”Όλ“œλ°±
β€’
심성λͺ¨ν˜•
β€’
λ‚΄λΉ„κ²Œμ΄μ…˜
β€’
μ™Έμ–‘
β–ͺ
UI ꡬ성 μš”μ†Œ 적용
β€’
UX
β€’
UI κ΄€λ ¨ μ˜μ—­
β—¦
μΈν„°λž™μ…˜ λ””μžμΈ
β—¦
μΈν„°νŽ˜μ΄μŠ€ λ””μžμΈ
β€’
정보 섀계
β€’
정보 λ””μžμΈ
β€’
μ‹œκ° λ””μžμΈ
β–ͺ
UI ꡬ성 μš”μ†Œ
β€’
ν‘œλ©΄
β€’
윀곽
β€’
ꡬ쑰
β€’
λ²”μœ„
β€’
μ „λž΅
β–ͺ
UI ꡬ성 μš”μ†Œμ˜ λ””μžμΈ 원칙
β€’
μ‚¬μš©ν•˜κΈ° μ‰¬μ›Œμ•Ό ν•œλ‹€
β€’
μœ μš©ν•΄μ•Ό ν•œλ‹€
β€’
맀λ ₯적이어야 ν•œλ‹€
β€’
접근성이 μ’‹μ•„μ•Ό ν•œλ‹€
β€’
μ‹ λ’°ν•  수 μžˆμ–΄μ•Ό ν•œλ‹€
β€’
발견 κ°€λŠ₯ν•΄μ•Ό ν•œλ‹€
β€’
κ°€μΉ˜ μžˆμ–΄μ•Ό ν•œλ‹€
β€’
맀체성 ꡬ성 μš”μ†Œ μ œμž‘ν•˜κΈ°
β—¦
맀체별 λ””μžμΈ μ œμž‘ 및 ν‘œμ€€ν™”
β–ͺ
맀체별 λ””μžμΈ
β€’
ν”½μ…€
β€’
해상도
β—¦
μ›Ή λΈŒλΌμš°μ €
β—¦
슀마트폰
β€’
μ›Ή κ·Έλž˜ν”½ ν˜•μ‹μ˜ 포맷
β—¦
λΉ„νŠΈλ§΅
β—¦
JPG
β—¦
GIF
β—¦
PNG
β–ͺ
μ›Ή ν‘œμ€€
β–ͺ
μ›Ή ν‘œμ€€ μŠ€νŽ™
β€’
HTML
β€’
CSS
β€’
XML
β–ͺ
μ›Ή ν‘œμ€€ 검사 방법
β€’
HTML, XHTML λ“±μ˜ μ›Ή λ¬Έμ„œ μœ νš¨μ„± 검사
β€’
CSS μœ νš¨μ„± 검사