Home [정보처리기사]1과목 소프트웨어 구축-4.화면 설계
Post
Cancel

[정보처리기사]1과목 소프트웨어 구축-4.화면 설계

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 설계 절차

  1. UI 개발목표 및 범위 수립
  2. UI 전략 수립
  3. 사용자 요구사항 분석
  4. UI 상세 설계
  5. 구현
  6. 테스트

3. UI 설계 원칙(중요!)

  1. 직관성: 누구나 쉽게 이해하고 사용해야 한다
  2. 유효성: 사용자의 목적을 정확하게 달성해야 한다
  3. 학습성: 누구나 쉽게 배우고 익힐 수 있어야 한다
  4. 유연성: 사용자의 요구사항을 최대한 수용하며, 오류를 최소해야 한다

4. UI 설계 도구

  1. 와이어프레임(Wireframe)
  2. 스토리보드(StoryBoard)
  3. 프로토타입(Prototype)
  4. 목업(Mockup)
  5. 유스케이스(Use-Case)

3. 감성공학

1. 감성공학의 개념

  • 인간의 심상을 구체적인 물리적 설꼐 요소로 번역하여 이를 실현하는 기술
  • 요소화 -> 형상화 -> 구현 -> 생산

2. 제품과 관련된 인간의 감성

  1. 감각적 감성
  2. 기능적 감성
  3. 문화적 감성

3. 감성공학의 접근 방법

  1. 1류 접근 방법
  2. 2류 접근 방법
  3. 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 프레임워크

  1. React
  2. Vue.js
  3. Angular JS
  4. Ajax(Asynchronous JavaScript and XML)

2. UI 관련용어

웹표준: WWW(World Wide Web)의 측면을 서술하고 공식 표준이나 다른 기술 규격 웹 호환성: PC, 모바일, 등 다른 하드웨어 및 소프트웨어 환경에서도 서비스 제공 웹 접근성: 장애인과 비장애인 모두가 동등하게 접근하여 이용할 수 있도록 보장하는 방식 반응형 웹: PC, Mobile등 다양한 디바이스에서 화면 크기에 맞춰줌 인포그래픽: 정보와 그래픽의 합성어. 브랜드 아이덴티티: 브랜드의 가치와 의미를 반영한 심적 표상 네이베이션: 하이퍼링크의 따라 웹 공간의 정보를 요청하고 받아오는 웹 브라우징 아코디안: 접고 열기 기능 플레이스 홀더: placeholder 필터링: 원하지 않는 데이터를 차단 입력 폼: Input Form 입력 필드: Input FIeld 썸네일: 커다란 이미지를 축소하여 제공한 이미지 레이블: Label 데체 텍스트: 콘텐츠를 대신하기 위해 제공되는 텍스트 초점: Focus

This post is licensed under CC BY 4.0 by the author.

[AWS]AWS RDS 생성(MySQL)

[정보처리기사]1과목 소프트웨어 구축-5. 서버 프로그램 구현