UI 설계 확인하기
UI는 사용자가 하드웨어나 시스템에 연결되는 과정에서 사용자의 편리성과 가독성을 높여 주기 위한 것이다.
CLI 는 사용자와 시스템이 상호 작용을 하는 방식으로 명령과 출력이 텍스트 형태로 표현된다.
GUI 는 사용자가 컴퓨터의 자원을 사용할 수 있도록 구성요소들이 그래픽 형태로 표현된다.
UI표준 및 지침
1.
UI표준은 시스템 전반에 걸쳐 모든 UI에 공통적으로 적용되는 내용을 의미한다.
2.
UI지침은 UI개발 과정에서 UI요구사항이나 구현 제약사항 등 지켜져야 할 공통의 조건을 의미한다.
소프트웨어 아키텍처
소프트웨어 구성요소 중 외부에 드러나는 요소 특성과 요소들 간의 관계를 표현한 것이다.
제약사항
시스템을 설계하거나 구현할 때 관련되는 기술이나 표준, 규정들을 의미
화면 설계
•
파워포인트
•
스토리보드 : 와이어프레임의 내용에 디스크립션 등을 포함한 설계문서
•
와이어프레임 : 기획단계에서 페이지 레이아웃이나 화면이동, 구성요소 등 기술한 문서
•
목업 : 설계 단계에서 실제 화면과 같은 형태의 모형
•
프로토타입 : 인터랙션이 포함되어 테스트가 가능한 형태
사용성
사용성은 사용자가 업무를 쉽고 편리하게 수행하는 것에 의미를 둔다.
유용성
사용자가 업무를 수행하는데 있어 얼마나 정확하게 수행 할 수 있는지를 나타낸 것
사이트맵
설계 단계에서 사이트를 구성하는 처리 내용이나 메뉴의 구조를 표현함으로써 사이트의
구조를 파악할 수 있도록 하는 것
유스케이스
사용자 측면에서의 요구사항 이며 주로 기능 개선에 대한 내용으로, 사용자가 원하는 목표를
위하여 시스템에서 수행해야 하는 내용
•
유스케이스에 기록된 내용을 토대로 실제 수행해야하는 내용을 기술
•
사용자에게 있어 외부시스템이나 서브 시스템과의 의사소통 수단으로 사용
•
하나의 단위 업무에 대한 독립적인 기능을 수행 할 수 있도록 표현
유스케이스의 명세서
유스케이스 명 | 작성자 |
개요 | 유스케이스의 전체적인 개요가 되는 내용 기술 |
관련 액터 | 유스케이스 실행의 주인공 |
우선순위 | 해당 유스케이스의 중요도 표시 |
실행 전 조건 | 해당 유스케이스가 실행되기 전에 갖춰야 할 조건을 기록 |
실행 후 조건 | 해당 유스케이스가 실행된 후 결과로 나타나야 하는 조건 |
흐름 (시나리오) | 기본 : 오류가 없는 정상적인 흐름을 기록 대안 : 정상적인 기본 흐름에서 벗어나는 예외의 요구사항 |
기타 요구사항 | 해당 유스케이스가 실행되는데 기본으로 표기된 내용 이외에 요구사항을 기록 |
W3C
WWW을 위한 표준을 개발하고 장려하는 국제적인 컨소시엄 조직, 설립취지로는 웹의 지속적인 성장을 도모
하는 프로토콜과 가이드라인을 개발하여 WWW의 모든 잠재력을 이끌어낸다는 목적을 가짐
한국형 웹 콘텐츠 접근성 지침
•
장애인이 비장애인과 동등하게 웹 콘텐츠에 접근할 수 있도록 기술
•
장애인의 접근성을 준수하여 지침 제공
•
해외의 웹 콘텐츠 접근성 가이드라인을 최대한 반영하여 개정
•
해외의 웹 콘텐츠 접근성 가이드라인을 국내 실정에 맞게 반영
웹의 3요소
•
웹 표준
웹에서 사용되는 기술이나 규칙을 의미하며, 웹 사이트를 작성할 때 이용하는 HTML등의 대한 규정과
다른 기종이나 다른 플랫폼에서도 웹페이지가 구현되도록 제작하는 기법
•
웹 접근성
어떠한 사용자, 어떠한 기술환경에서도 사용자가 전문적인 능력없이 사이트에서 제공하는 모든 정보에 접근
할 수 있도록 보장 하는 것
•
웹 호환성
서비스 이용 단말기의 하드웨어 및 소프트웨어 환경이 다른 경우에도 동등한 서비스를 제공하는 것
서버와 클라이언트
•
서버
네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 또는 프로그램
•
클라이언트
네트워크를 통해 다른 서버 시스템 상의 컴퓨터에 원격 서비스에 접속할 수 있는 응용프로그램, 서비스
웹사이트와 웹페이지
•
웹 사이트
인터넷 프로토콜 기반의 네트워크에서 URL을 통하여 보이는 웹 페이지들의 의미있는 묶음
•
웹 페이지
WWW 상에 있는 개개의 문서를 의미
HTML 레이아웃
•
Header : 주로 로고나 회사명, 사이트 맵 등
•
Navigation : 본문의 주요 내비게이션 영역
•
Section : 콘텐츠 영역
•
Article : 독립적인 콘텐츠 항목 영역
•
Aside : 본문 내용 이외에 기타 내용
•
Footer : 주로 개인정보 보호정책, 회사 주소 등
Javascript function
•
onclick : 클릭
•
onmousedown, onmouseover : 마우스 누를때, 놓았을때
•
onmouseover, onmouseout : 마우스가 위로 올라오거나 내려올때
DOM
•
해당 페이지의 요소 변경이나 추가, 삭제
•
해당 페이지의 요소에 대한 속성 변경이나 추가
•
해당 페이지의 CSS의 변경이나, 추가, 삭제
•
새로운 HTML 이벤트의 생성
화면구현절차
화면설계서 → 페이지 구조화 → 코딩 → 프로그래밍 → 테스트 → 화면구현완성
JSP의 스크립트 지향 태그
지시어 | 태그표기법 | 설명 |
지시어 | <%@ %> | JSP페이지의 속성 지정 |
선언부 | <%! %> | 변수나 메서드 선언 |
표현식 | <%= %> | 계산식, 함수호출결과 등 문자열 출력 |
스크립트릿 | <% %> | 자바코드 기술 |
주석 | <%— —%> | JSP 페이지 설명 |
사용성 테스트 절차
테스트 계획수립 → 테스트케이스설계 → 테스트 실행 → 결과분석 → 수정
분야별 테스트 내용
분야 | 테스트 내용 |
유효성 검사 | W3C 등 검증시스템을 활용하여 웹 표준 문법 준수 여부 |
웹 호환성 | 웹 브라우저의 해당 페이지의 내의 기능이 정상적 동작 점검 |
웹 접근성 | 어떤 사용자라도 웹 사이트에 접근 할 수 있도록 구현 점검 |