[정보처리산업기사_과정평가형_필기요약] 화면구현

화면구현 (요구사항 확인 & UI 설계 기반으로 화면 구현)

핵심용어 ui ,ui요구사항 ,ui표준 ,ui설계서, 소프트웨어 아키텍처,웹접근성 ,웹호환성 ,ui테스트

 

UI > 사용자의 편리성/가독성을 높여줌(사용자와 컴퓨터 상호간의 소통을 원활히 도와주는 연계작업)

CLI command line interface : (사용자<->시스템)명령과 출력이 텍스트

GUI graphical user interface: (사용자->컴퓨터자원)구성요소들이 그래픽 형태

NUI natural user interface: 몸짓, 말소리만으로도 it기기를 사용

 

UI표준 > 시스템 전반의 모든  UI에 공통 적용(ex화면구성,화면이동)

UI지침 > UI요구사항+구현제약사항 등의 공통조건

제약사항 > 시스템 설계 및 구현 시 관련 기술이나 표준,규정(기술제약사항/표준 적합 제약사항)

 

UI개발도구

-화면설계 (와이어프레임(기획단계의 정적인 레이아웃&화면이동)/스토리보드(와이어프레임+디스크립션)/목업(실제 화면과 동일한 모형))

-프로토타입(인터랙션이 포함되어 테스트 가능) 

**목업과 프로토타입의 차이

: 목업이 실제작 전의 모형이라면 프로토타입은 실제 구동하는 기계적인 샘플

UI설계서>와이어프레임이나 목업으로 작성

 

UI 메뉴 구조 확인

사용성 (사용자의 효과성,효율성,만족도) /유용성 /정보구조(=사이트맵=메뉴/계층,계열,그리드,네트워크구조)/ 네비게이션/

유스케이스(기능요구사항+세부처리절차)(주로 기능개선에 대한 사용자측의 요구사항/ 유스케이스 기록내용 토대로 실제 수행 방법 구현 /외부 시스템이나 서브 시스템과의 의사소통 수단으로 사용됨/하나의 단위 업무에 대한 독립적 기능을 수행할 수 있도록 표현/우선순위,실행 전후 조건)

*유스케이스 : 사용자가 인식가능한 기능 단위=시스템의 동작을 사용자 입장에서 표현한 시나리오

: 액터와 액터가 요구하는 시스템이 수행하는 일의 목표

*액터=행위자=사용자 : 시스템을 사용하는 외부의 존재이며 사람 또는 시스템/장치가 될 수 있음

*UML 통합 모델링 언어: 표준화된 범용 모델링 언어로 시각적 모델을 만들기 위한 도안 표기법

*데이터 모델링 : 비즈니스에서 수집하고 생성하는 모든 다양한 데이터와 이러한 데이터 간의 관계를 분석하고 정의하는 프로세스 (데이터와 프로세스의 시각적 표)

(UML이 동작이면 ERD는 데이터 모델링을 하는 것)

요구사항 명세서와 제약사항 포함항목(기능,성능,인터페이스,표준지침)

& 유스케이스를 참고하여 화면 구현 절차도 작성

 

UI구현하기(소프트웨어 아키텍처 지침+UI표준 반영한 UI설계를 구현)

*소프트웨어 아키텍처 지침: SW의 골격이 되는 기본 구조를 기반으로 SW 설계에 대한 지침

Ex 요구사항, 업무 특성, 품질항목(성능,유지보수성),제약사항, 업무규칙,유스케이스 등

-W3C (World Wide Web Consortium):웹 표준개발 기구(조직)

-KWCAG (Korean Web Content Accessibility Guideline): 한국형 웹 콘텐츠 접근성 지침

:웹 컨텐츠에 대한 장애인 접근성을 준수하여 콘텐츠를 제작하도록 하는 지침

-전자정부 웹 표준 준수 지침:전자정부 웹 이용자가 특정OS나 브라우저 상관없이 접속하게 하도록 하는 최소한의 규약

*전자정부 웹 표준 준수 지침서와 한국형 웹콘텐츠 접근성 지침서를 참고하여  UI표준 지침을 확인

웹의 3요소 (웹표준:웹 사이트 작성시 HTML,CSS,JS등에 대한 규정/웹접근성:어떤 사용자나 어떤 환경에서도 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것/웹호환성:하드웨어 및 소프트웨어 환경이 다른 경우도 동등한 서비스 제공하는 것을 의미)

UI표준 지침+접근성 지침서를 토대로 > 웹 기술의 중립성, 보편적 표현 보장성(=웹접근성=사용성),웹 기능의 호환성이 고려되었는지 확인

웹접근성 지침 준수를 위한(사용성 확보를 위해 고려해야 할)

 <세부사항>

대체텍스트/멀티미디어 대체수단/명료성/키보드 접근성/충분한 시간제공/광과민성 발작 예방/ 예측가능성/콘텐츠의 논리성/입력도움/ML문법 준수/접근성

 

UI구현

서버: 네트워크를 통해 클라이언트와 요청<->응답하며 소통(서버의 기능)

서버는 브라우저로부터 HTTP요청을 받아들이고 HTML문서(웹페이지:HTML,CSS,JS)를 반환

서버프로그램종류:Apache,lls,nginx,gws

클라이언트(파이어폭스,크롬,IE,사파리,오페라):네트워크를 통해 다른 서버 상의 pc에 원격 접속할 수 있는 응용 프로그램

클라이언트의 기능:브라우저에 url입력하여 웹페이지에 대한 요청을 전달하는 것

 CSS선택자(*공용=일반/ 태그/ #아이디/ .클래스선택자)

 

자바스크립트

> Body/head태그 영역의 <script></script>태그 안에서 작성

> JS는 해당 HTML 파일이 로딩될 때 한번 실행됨

HTML의 이벤트처리 (이벤트 핸들러 호출 ex> Onclick /onmousedown, onmouseup/onmouseover, onmouseout(마우스 포인터)/ on change(input,select,textra에서 지원&해당 요소의 입력 포커스 이동 시 사용)

onload(바디태그에서 사용/해당페이지와 연결된 외부 내용들이 완전히 로딩되었을 때 구동)

DOM(문서객체모델) >브라우저는 페이지가 로딩될 때 해당 페이지에 대한 DOM을 생성

 + html의 문서 내용+구조가 객체 모델로 변환되어 xml/html문서 내 요소에 접근할 수 있게 하는 일종의 인터페이스(스타일을 포함하지 않음)

편집도구(저작도구)의 종류> 메모장(어떤 종류의 포맷도 지원X)/드림위버(매크로미디어사의 프로그램/웹기술 지원)/스튜디오(다양한 언어로 프로그래밍 할 수 있는 MS사의 IDE)

*웹기술:축적된 방대한 데이터에 대하여 키워드에 의한 정보 접근만을 허용하고 있어 불필요한 정보의 홍수 문제가 가중됨(이에 대한 해결책 > 시맨틱 웹 기술을 사용하여 컴퓨터가 이해할 수 있는 잘 정의 된 ‘의미 기반’의 웹기술을 실현하여 검색엔진을 최적화seo)

 

화면구현절차

:화면설계서>[페이지구조화>코딩>프로그래밍]>테스트>화면구성완성

[] : 화면구현과정

상세절차

레이아웃확인 > 공간분할(div) 및 영역별 구현 내용 세분화 OR 시맨틱태그로 작성>

*시맨틱태그 : 의미가 있는 태그(form,table,article) <-> 이름만 보고 유추가 어려움, 의미x태그(div,span)

UI테스트(사용성테스트/테스트케이스 작성/유효성검사 프로그램 이용)

사용성 테스트 과정 (계획수립>테스트 설계>실행>결과 보고서작성>수정>수정 피드백 후 실행)

사용성테스트 시 주의사항

> 테스트 참여 인원이 자율적으로 테스트 할 수 있는 환경이어야 함

> 충분한 테스트가 가능하도록 테스트 시 자세한 기능 설명, 구현 방법이 제공되어야 함

*웹 표준 및 유효성을 검사해주는 검증서비스를 활용하여 검증