UI 구현 표준 검토하기

UI 구현 표준 수립

• 실제 페이지 제작을 위하여 아이콘, 레이아웃, 화면 개발 환경에 적합한 표준을 검 토할 수 있다.
• UI 구현 표준을 이해관계자와 검토하여 최종 표준안에 반영할 수 있다.

UI 구현 표준 수립

1. 웹 표준 및 웹 호환성 고려한 표준 수립

웹 호환성이란 사용자 단말기의 하드웨어 및 소프트웨어 환경이 다른 경우에 동등한 서비 스를 제공받을 수 있도록 구현해야 하는 것으로 다양한 웹브라우저에서 동등한 서비스를 제공받을 수 있도록 해야 한다.

웹 호환성 확보를 위해서는 웹 페이지마다 표준 문법을 준수하여 구현해야 한다.

 

문법 선언	웹 페이지 문법선언하고, 문법을 올바른 방식으로 구현
UTF-8 사용	웹페이지 문자를 부호화 하는 방식을 UTF-8 로 사용하는 것으로 원칙
DOM표준 및 ECMA-262 표준	웹페이지를 동적으로 구성, 제어기능은 DOM표준과 ECMA-262표준으로 구현
웹 표준 신기술 적용	HTMLS 등 웹 표준 신기술 사용하여 웹사이 트 호환성 확보

 

모바일의 UI 구축 시 웹 서비스로의 호환성을 확보한다. 웹사이트를 구축하는 경우 모바 일 기기의 화면크기 및 운영체제와 무관하게 동등한 서비스를 제공해야 한다.

 

반응형	적응형
동일한 html로 pc부터 모바일 기기까지 다양한 디스플레이 종류에 맞춰 웹의 해상도와 레이아웃을 자동으로 조절하여 표현하는 웹 구현 방식	해상도 별 각각 html을 미리 정해놓고, 접속하는 디바이스가 지정된 해상도에 속하면 그 해상도 에 속하는 스타일대로 표현하는 웹 구현 방식

2. 웹 접근성 고려한 표준 수립

웹사이트 구축 및 운영 시 전자정부서비스 웹 호환성 준수지침을 적용하여 항목별 진단지 표를 기준으로 진단기준과 진단방법을 고려하여 표준을 수립한다.

UI 구현 개발 관련 표준 수립

1. UI 구현 개발환경 디렉터리 구조 기준 수립

Level1에는 웹의 루트 디렉터리를 지정하며, Level2에는 프로그램 종류별로 저장되는 디 렉터리를 지정한다. UI 디렉터리 안에는 업무별 화면을, image 디렉터리 안에는 사이트에 사용되는 이미지를, script 디렉터리 안에는 자바스크립트를 저장한다.

UI 구현 디렉터리 구조 예시

Level1	Level2	설명
OO System	ui	업무별 화면 저장(jsp, html 파일 저장)
	image	공통으로 사용하는 이미지 저장
	script	공통으로 사용하는 javascript 저장

2. UI 구현 코딩 표준 수립

UI 구현 코딩 표준은 리소스에 대한 명명규칙/주석규칙/소스코드규칙으로 수립한다.

UI 코딩표준 예시

코딩표준	항목	예시
명명규칙	Button	btnSearch, btnSave
	CheckBox	chkName, chkAge
주석규칙	프로그램명	<!-- *********************************** * 프로그램명: 사용자 조회 목록 **************************************-->
	버전
소스코드 규칙	변수명 정의	변수명은 헝가리안 표기법 준수 ex) firstName
	자바스크립트 태그	스크립트 태그는 type과 language 포함 ex) language="JavaScript" type="text/JavaScript"