9. UI 표준

수제비 2022 정보처리기사 실기 수험서를 보고 공부한 기록입니다.

---

[UI 표준 개념]

UI 표준은 디자인 철학과 원칙 기반하에 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면구성 등에 관한 규약이다

[UI 표준 구성]

UI 표준 구성은 전체적인 UX 원칙, 정책 및 철학, UI 스타일 가이드, UI 패턴 모델 정의, UI 표준 수립을 위한 조직 구성으로 되어 있다

UI 표준 구성	설명
전체적인 UX 원칙	사용자의 관점에서 사용자 업무를 효율적으로 수행할 수 있는 UX 원칙 정의
정책 및 철학	조직의 목표나 정체성을 포함하는 정책 및 철학 설정
UI 스타일 가이드	UI에 대한 구동 환경 및 레이아웃 등을 정의
UI 패턴 모델 정의	CRUD 방식을 기반으로 데이터 입력, 출력 패턴 모델 정의
UI 표준 수립을 위한 조직 구성	UI 팀 및 표준 개발팀을 주축으로 추진 조직 구성

[UI 표준 수립 시 고려 사항]

• 사용자가 불편해하지 않아야 한다
• 많은 업무 케이스를 포함해야 한다
• 다양한 사용상황에 대처할 수 있어야 한다
• 표준 적용이 쉽도록 충분한 가이드와 활용 수단 제공이 필요하다
• 변화하는 상황에 맞게 빠르게 변경할 수 있는 관리조직 수반이 필요하다

[UI 스타일 가이드 구성]

UI 스타일 가이드는 UI의 통일과 일관적인 화면 구성을 위해서 시스템이 지켜야 할 UI 요소 정의와 화면설계원칙을 제시한다

1. UI 구동 환경의 정의

컴퓨터 OS, 웹 브라우저, 모니터 해상도, 프레임세트를 확인한다

▼UI 구동 환경의 정의

구분	설명
컴퓨터 운영체제(OS) 확인	-기업이 운영하는 업무와 운영체제 확인
웹 브라우저 확인	-익스플로러, 크롬, 파이어폭스 등 기업 환경에 가장 적합한 것으로 확정
모니터 해상도 확인	-모니터 해상도는 1280 X 1024 등 기본을 설정 -컴퓨터 작업 표시줄 및 브라우저의 기본 환경을 기준으로 스크롤이 생기지 않도록 설정
프레임세트 확인	-속도 및 업무 편의성을 고려하여 각 영역별(Top, Left, Contents 영역) 프레임을 구분해 적용

▼프레임세트 적용

구분	프레임 구분	단일 프레임	웹 애플리케이션 경우
콘텐츠 구성	-프레임별 콘텐츠 구성 -각 프레임의 페이지에서 메뉴, 배너 구성 등 일괄 적용됨	-전체 페이지에서 영역별 콘텐츠를 자유롭게 구성 가능 -페이지별로 메뉴, 배너 구성, 콘텐츠 변경관리 편리	-페이지별 구성 콘텐츠에 구성이 같은 패턴 -페이지별로 특화된 배너를 적용하는 경우는 적음
디자인	-프레임별 이미지 적용 -프레임 내에 배경 이미지 적용	-배경 이미지 사용 시에 전체 페이지 내에서 스크롤이 생김	-업무 처리가 주목적으로 페이지 전체에 이미지 적용하는 경우는 적음
속도	-변경되는 프레임만 새로 로딩됨(브라우저 속도 향상)	-페이지 전체가 새로 로딩됨(브라우저 속도 지연)	-메뉴 변경 시 페이지 로딩이 빨라야 함

2. 레이아웃 정의

• 기본 배치는 크게 상단(Top), 왼쪽(Left), 콘텐츠(Contents) 영역의 3개 부분으로 설계한다
• 하단 메뉴 구성(Footer Area)은 상황에 맞게 추가 및 제외한다

▼레이아웃 정의

구분	설명
상단 메뉴 구성 (Top Area) 정의	-필수적으로 적용하는 사항 -구성요소로 시스템 로고, 로그인 사용자, 바로 가기 메뉴(Quick Menu), 주메뉴(Main Navigation) 존재 -시스템 전체 페이지에 동일하게 적용
좌측 메뉴 구성 (Left Area) 정의	-선택적으로 적용하는 사항 -구성요소로 서브 메뉴, 배너 존재 -시스템별 서브 페이지에 선택 적용함
내용 구성 (Contents Area) 정의	-필수적으로 적용하는 사항 -구성요소로 메인 이미지, 시스템별 구성 콘텐츠 존재
하단 메뉴 구성 (Footer Area) 정의	-선택적으로 적용하는 사항 -구성요소로는 회사 CI, 저작권등 존재 -회사 상황에 맞춰 적용 및 삭제 가능

• 사용 환경에 맞춰서 페이지 폭을 정의한다
• 브라우저 사이즈에 따라 페이지 폭 크기를 유동적으로 적용한다

▼상단 메뉴 구성

구분	설명
로고 구역 (Logo Area)	-화면 왼쪽 상단에 위치하며 회사 로고+시스템 로고가 들어감 -여백의 사이즈는 일정하게 하고 페이지 별로 크기를 고정하여 웹 사이트 전체에 일관성 있게 구현
접속자 정보 (Login User)	-화면 우측 상단 첫 번째에 위치 -접속자에 대한 정보를 표시
바로 가기 메뉴 (Quick Menu)	-로고 우측 상단 두 번째에 위치 -홈, 매뉴얼, 사이트 맵, 관리자 등 화면 전반에 걸친 메뉴를 우측 정렬로 배치
주 메뉴 (Main Navigation)	-로고 우측 하단에 위치 -시스템의 주메뉴를 왼쪽 정렬로 배치 -마우스 오버 시 해당 메뉴의 배경 화면색 혹은 글자색이 변경되도록 함

[UI 패턴 모델(Pattern Model) 정의]

• CRUD 방식을 기반으로 데이터의 입력과 출력을 처리하는 화면 흐름을 포함하여 오퍼레이션 방식에 대한 표준 절차를 표시하고, UI 패턴 모델을 개발한다
• 표준 프레임워크로 개발하고, 유스케이스를 이용해서 패턴별 표준 개발 방법 총 7가지 영역을 정의한다

1. 업무 화면 클라이언트 정의

• 제안 단계에서 결정된 클라이언트를 통해 설계자는 개발 시에 필요한 공통 요소 식별, 디렉토리 구성, 개발 환경 구축 부분 도출
• 클라이언트에 출력되는 UI는 X-Internet과 같은 리치 클라이언트 도구와 일반 JSP, HTML 기반의 씬 클라이언트방식이 존재

2. 서버 컨트롤러(Controller) 정의

• 프레임워크를 도입한다면 해당 프레임워크가 제공하는 방식 채택
• 별도의 클라이언트 제품을 도입하는 경우 서버 컨트롤러와의 연동 방식 결정

3. 서버 메시지 및 예외 처리 정의

• 서버의 메시지 및 예외 처리를 클라이언트 UI에 전달하는 방식을 결정
• S(System)
  • 시스템 오류로 인해 발생하는 메시지
  • 런타임 예외를 전달할 때 사용되며, 모든 트랜잭션은 자동으로 복원(Rollback)
• E(Error)
  • 업무 처리 로직의 일환으로 애플리케이션 예외를 전달할 때 사용
  • 모든 트랜잭션은 자동으로 복원
• I(Information)
  • 정상적인 업무 처리 결과나 관련 정보에 대한 확인 메시지를 사용자에게 알려주고자 할 때 사용
  • 이때 모든 트랜잭션은 커밋(Commit) 됨

4. 클라이언트-서버 간 데이터 변환 정의

• 어떤 방식의 오브젝트(Object)를 사용할 것인지를 먼저 결정
• 클라이언트와 서버 간의 데이터 형태 변환을 어떻게 처리할 것인지 방안 마련

5. 기업 포털 연계 정의

• EP-SSO-사용자 간 연계 방안을 URL 연계 시를 고려하여 정의

6. 보고서 정의

• 클라이언트와 리포트 솔루션 간의 연계 방식을 결정

7. 외부 컴포넌트 연계 정의

• 외부 UI 컴포넌트를 도입할 때, 서버와의 연계 방식으로 결정

[UI 표준 수립을 위한 조직의 구성]

조직 구성 및 역할 정의 : 효과적인 프로젝트 추진을 위하여 UI 팀 및 표준 개발팀을 주축으로 한 추진 조직 구성을 확정

커뮤니케이션 방안 수립 : UI 개발이 원활히 수행되도록 정식 보고 및 정기적인 회의뿐 아니라 이슈 회의 등 다양한 방식의 커뮤니케이션 방안을 마련