Section 1. UI 설계
1. UI User Interface 개념
UI 유형
- CLI(Command Line Interface), CUI
- GUI(Graphical User Interface)
- NUI(Natural User Interface): 인간의 자연스러운 움직임
- OUI(Organic User Interface): 현실의 모든 것
2. UI 설계
1. UI 요구사항 구분
1. 기능적 요구사항
- 시스템이 제공해야 하는 기능에 대한 요구사항
- 입력, 출력, 데이터, 연산에 관한 요구사항
2. 비기능적 요구사항
- 사용성, 효율성, 신뢰성, 유지 보수성, 재사용성 등 품질에 관한 요구사항
- 비용, 일정 등 프로젝트 계획에 관한 요구사항
2. UI 설계 절차
- UI 개발목표 및 범위 수립
- UI 전략 수립
- 사용자 요구사항 분석
- UI 상세 설계
- 구현
- 테스트
3. UI 설계 원칙(중요!)
- 직관성: 누구나 쉽게 이해하고 사용해야 한다
- 유효성: 사용자의 목적을 정확하게 달성해야 한다
- 학습성: 누구나 쉽게 배우고 익힐 수 있어야 한다
- 유연성: 사용자의 요구사항을 최대한 수용하며, 오류를 최소해야 한다
4. UI 설계 도구
- 와이어프레임(Wireframe)
- 스토리보드(StoryBoard)
- 프로토타입(Prototype)
- 목업(Mockup)
- 유스케이스(Use-Case)
3. 감성공학
1. 감성공학의 개념
- 인간의 심상을 구체적인 물리적 설꼐 요소로 번역하여 이를 실현하는 기술
- 요소화 -> 형상화 -> 구현 -> 생산
2. 제품과 관련된 인간의 감성
- 감각적 감성
- 기능적 감성
- 문화적 감성
3. 감성공학의 접근 방법
- 1류 접근 방법
- 2류 접근 방법
- 3류 접근 방법
Section 2. UI 구현
1. 화면 레이아웃 구성
1. 화면 레이아웃의 개념
- 레이아웃 작성 방법
- DIV 요소를 이용한 레이아웃
- SPAN 요소를 이용한 레이아웃
- TABLE 요소를 이용한 레이아웃
- 시맨틱(Semantic)태그를 이용한 레이아웃
2. HTML5
HTML5 개념
World Wide Web (www)를 통해 제공되는 정보를 나타내는 마크업 언어
HTML5 특징
- 플러그인 설치 없이 동영상이나 음악을 웹 브라우저에서 실행
- 다양한 2차원 그래픽 표현 가능
- 오프라인 상태에서도 작업 가능
시맨틱 요소
- header
- nav
- aside
- section
- footer
3. CSS(Cascading Style Sheet)
CSS 개념
- 디자인 요소를 담당
4. JavaScript
JavaScript 개념
- 모질라 재단의 프로토타입 기반의 프로그래밍 언어로, 스크립트 언어에 해당된다
- HTML, CSS와 함께 웹을 구성하는 요소 중 하나이다
JavaScript 특징
- 스크립트 언어
- 이벤트 중심 프로그래밍 언어
- 프로토타입 기반 객체 지향 언어
- 값에 따라 변수의 형변환이 자동으로 이루어지는 동적 형변환
JavaScript 프레임워크
- React
- Vue.js
- Angular JS
- Ajax(Asynchronous JavaScript and XML)
2. UI 관련용어
웹표준: WWW(World Wide Web)의 측면을 서술하고 공식 표준이나 다른 기술 규격 웹 호환성: PC, 모바일, 등 다른 하드웨어 및 소프트웨어 환경에서도 서비스 제공 웹 접근성: 장애인과 비장애인 모두가 동등하게 접근하여 이용할 수 있도록 보장하는 방식 반응형 웹: PC, Mobile등 다양한 디바이스에서 화면 크기에 맞춰줌 인포그래픽: 정보와 그래픽의 합성어. 브랜드 아이덴티티: 브랜드의 가치와 의미를 반영한 심적 표상 네이베이션: 하이퍼링크의 따라 웹 공간의 정보를 요청하고 받아오는 웹 브라우징 아코디안: 접고 열기 기능 플레이스 홀더: placeholder 필터링: 원하지 않는 데이터를 차단 입력 폼: Input Form 입력 필드: Input FIeld 썸네일: 커다란 이미지를 축소하여 제공한 이미지 레이블: Label 데체 텍스트: 콘텐츠를 대신하기 위해 제공되는 텍스트 초점: Focus