스마트 UIUX/UI 구현

UI 구현 표준 검토하기

eheheheheheh 2020. 11. 24. 09:34

UI 구현 표준 수립

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

UI 구현 표준 수립

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

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

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

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

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

UI 구현 개발 관련 표준 수립

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

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

UI 구현 디렉터리 구조 예시

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

2. UI 구현 코딩 표준 수립

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

UI 코딩표준 예시

코딩표준 항목 예시
명명규칙 Button
CheckBox
btnSearch, btnSave
CheckBox chkName, chkAge
주석규칙 프로그램명
버전

프로그램명: 사용자 조회 목록
소스코드 규칙 소스코드 규칙 변수명 정의
자바스크립트 태그
변수명은 헝가리안 표기법 준수 ex) firstName
스크립트 태그는 type과 language 포함
ex) language="JavaScript" type="text/JavaScript"