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

화면설계(화면요구사항&소프트웨어 아키텍처 단계에서 정의된 구현 지침&UI표준 지침에 따라 화면 설계)

핵심용어 : UI요구사항,UI프로토타입,HTML,UI설계

수행순서1) 응용 SW 개발을 위한 UI표준 및 지침 확인

UI요구사항(‘기능적 요구사항’ & 개발 과정에 지켜져야 할 제약조건을 설명하는 ‘비기능적 요구사항’)

비기능적 요구사항 (품질 관련/시스템 환경 관련/비용,일정 등 프로젝트 계획에 관한 요구사항)

소프트웨어 아키텍처(=SW 골격이 되는 기본구조)

소프트웨어 아키텍처 ‘품질 요구사항’ 및 특성

Ø  기능성(적절성,정밀성,보안성,호환성,상호운용성)요구된 기능이 제공되는가

Ø  신뢰성(성숙성,고장허용성,회복성)믿을만한 소프트웨어인가

Ø  사용성(이해성,학습성,운영성)사용하기 쉬운 소프트웨어인가

Ø  효율성(시간,자원효율성)얼마나 효율적인 소프트웨어인가

Ø  유지보수성(분석성,변경성,안정성,시험성)수정이 용이한 소프트웨어인가

Ø  이식성(적용성,설치성,대체성) 환경 전환이 용이한가

UI의 세가지 분야

1.     정보제공과 기능전달을 위한 ‘물리적 제어분야’

2.     콘텐츠의 ‘상세적 표현’과 전체적 ‘구성에 관한 분야’

3.     사용자 편의성에 맞춰 쉽고 간편한 사용을 가능하게 하는 ‘기능적 분야’

UI의 설계원칙> 직관성,유효성(사용자의 목적을 정확히 달성해야 함), 학습성,유연성

UI설계지침  

Ø  사용자중심, 표준화,접근성,명확성,오류발생해결

Ø  일관성(버튼/조작방법)

Ø  단순성(간단하게 작동 가능하도록 하여 인지적 부담을 낮춰야 함)

Ø  결과예측(작동시킬 기능만 보고도 결과예측이 가능해야 함)

Ø  가시성(주 기능을 메인화면에 노출하여 조작이 쉽도록)

 

<<UI스타일 가이드 정의>>

[구동환경 정의]

OS확인 / 웹브라우저 확인

표준 모니터해상도(1280PX*1024PX)>작업표시줄을 기준으로 브라우저 스크롤이 생기지 않는 안전지역(1280PX*2014PX)

프레임 세트 확인

[레이아웃 정의]

레이아웃 (화면의 구조를 top left contents영역으로 설계/푸터는 필수아님)

상단메뉴구성(필수적용사항)

>로고구역 : 화면 좌상단

> 접속자 정보 : 화면 우상단 첫번째

> 바로가기 로고 : 우상단 두번째부터 화면 전반에 걸친 메뉴를 우측 정렬로 배치

> 주메뉴:로고 우측상단 두번째줄에 위치 & 시스템의 주메뉴를 왼쪽 정렬로 배치

[네비게이션 정의]

> 메뉴 네비게이션 정의(메뉴구조 복잡 시 상단 메뉴 2depth+drop down)

>모듈 뷰 정의(효과적인 모듈 분리를 위해 응집도(모듈이 독립적 기능으로 정의되어 있는 정도)최대화 & 결합도(모듈간 종속성을 형성하는 상호의존 정도) 최소화)

1.분할 모듈 뷰 타입: 모듈을 작게 세분화 한 서브 모듈로 쪼개는 기준은 사용 목적에 따라 달라짐, 일정한 품질속성을 구현하는데 사용됨(서로의 영향을 덜 받게끔 분할하여 품질 속성 높임)

2.사용 모듈 뷰 타입: (A가 B를 사용한다)종속적 관계를 기반으로 하며 (사용관계에 있는)A모듈의 정확도가 B모듈의 구현 여부에 종속되는 경우 A가 B를 사용한다고 할 수 있음

3.일반화 모듈 뷰 타입(일반화  관계를 사용하여 아키텍처의 확장과 진화 가능)

: 모듈이 일반적인 관계를 형성하는 경우 가변성(자식모듈)/공통성(부모모듈) 을 표현할 수 있다

: 공통성을 갖는 부모 모듈은 가변성을 이루는 자식 모듈을 일반화 한 것

* 일반화타입의 구현상속(UML에서 일반화 관계로 표현)과 인터페이스상속(UML에서 실현관계로 표현)

4.레이어 타입(레이어 4가지 스타일을 포함하여 모듈 뷰 타입을 정의)

개발팀에게 작업 할당 기준을 제시 / 변경필요 시 변경영역 결정 및 변경된 사항을 설계에 반영

[기능정의]

시스템 요구사항에 대한 개념 모델을 논리적 모델(프로세스모델, UI설계,논리데이터모델,아키텍처정의,인터페이스 설계 측면)로 상세화 한다

>프로세스 모델링 정의: 업무 과정에서 일어나는 모든 활동 파악을 위해 ‘업무 기능 모델’을 수립

>데이터 모델 정의: 데이터 엔티티 목록 정의> 엔티티 간의 관계를 ‘논리적 데이터 모델’(ERD)로 정의

[구성요소정의]

그리드 정의(테이블 형태로 UI구성) > 데이터건수가 많은 경우(fetch적용)/적은 경우(총 건수만 보여줌)

[버튼정의]

기능(CRUD,업로드,다운로드,엑셀,인쇄 등 화면 전체에 영향을 미치는 버튼으로 화면 상단에 위치),검색,그리드관련(행 추가/삭제/복사/저장),기타(찾기,달력,우편번호 등 한 화면의 특정 영역 내에서만 사용) 버튼 총 4가지로 구분하여 제작