[1. 소프트웨어 설계] UI 표준

UI 표준이란?

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

---

UI 표준 구성

1) 전체적인 UX 원칙 : 사용자 업무를 효율적으로 수행할 수 있는 UX 원칙 정의

2) 정책 및 철학 : 조직의 목표나 정체성을 포함하는 정책 및 철학 설정

3) UI 스타일 가이드 : UI에 대한 구동 환경 및 레이아웃 등을 정의

4) UI 패턴 모델 정의 : CRUD 방식을 기반으로 데이터 입출력 패턴 모델 정의

5) UI 표준 수립을 위한 조직 구성 : UI 팀 및 표준 개발 팀을 주축으로 추진 조직 구성

---

UI 표준 수립 시 고려사항

- 사용자가 불편해하지 않아야 함

- 많은 업무 케이스를 포함해야 함

- 다양한 사용상황에 대처 가능해야 함

- 표준 적용이 쉽도록 충분한 가이드와 활용 수단 제공 필요

- 변화하는 상황에 맞게 빠르게 변경할 수 있는 관리조직 수반 필요

---

UI 스타일 가이드 구성

[1.  UI 구동 환경 정의]

1) 운영체제 확인

2) 웹 브라우저 확인

3) 모니터 해상도 확인

4) 프레임 세트 확인

4-1) 프레임 세트 적용

• 콘텐츠 구성 : 프레임 별 콘텐츠 구성, 각 프레임 페이지에서 메뉴, 배너 구성 등 일괄 적용
• 디자인 : 각 프레임별 이미지 적용, 프레임 내에 배경 이미지 적용
• 속도 : 변경되는 프레임만 새로 로딩(브라우저 속도 향상)
• 스크롤

 

[2. 레이아웃 정의]

: 기본 배치는 상단, 왼쪽, 콘텐츠 영역의 3개 부분으로 설계하며, 하단 메뉴 구성은 상황에 맞게 추가 및 제외

 

1) 상단 메뉴 구성 (Top Area) 정의

: 필수 적용 사항

: 구성요소 - 시스템 로고, 로그인 사용자, 바로 가기 메뉴, 주 메뉴

: 시스템 전체 페이지에 동일 적용

 

(상단 메뉴 구성)

Logo Area		Login User 정보 통합 검색 / Quick Menu Home
	Main Navigation

 

2) 좌측 메뉴 구성 (Left Area) 정의

: 선택 적용 사항

: 구성요소 - 서브 메뉴, 배너

 

3) 내용 구성 (Contents Area) 정의

: 필수 적용 사항

: 구성요소 - 메인 이미지, 시스템별 구성 콘텐츠

 

4) 하단 메뉴 구성 (Footer Area) 정의

: 선택 적용 사항

: 구성요소 - 회사 CI, 저작권

: 회사 상황에 맞춰 적용 및 삭제 가능

 

 

[3. 메뉴 내비게이션 정의]

: 프로그램 구성 특성상 화면의 폭을 넓게 쓰고 싶은 경우 좌측 메뉴에 대해서 유동적 적용

 

1) 기본 내비게이션 : 상단 왼쪽 구성 기본 타입

1
2 3

 

2) 기본 내비게이션의 변형 : 메뉴 구조가 복잡할 경우 상단 메뉴 구성에 2뎁스를 드롭 다운으로 적용

1
3 4		2

 

3) 메뉴 구조가 2뎁스인 경우 적용

1
		2

 

4) 메뉴 구조가 복잡할 경우 적용

1
2 3 4

 

[4. 기능 정의]

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

 

(UI 화면 구성요소)

1) 그리드

: UI 를 구성하는 방법 중 테이블 형태로 UI를 구성

 

2) 버튼/컨트롤 타입

• 콤보 박스 : 하나의 입력 박스가 있는 상태에서, 박스 클릭 시 선택할 수 있는 목록이 길게 나타나는 요소 (ex. 검색창)
• 토글 버튼 : 두 가지 상태 중에 하나로 토글되도록 만든 요소
• 텍스트 박스 : 사용자들이 텍스트를 입력할 수 있는 UI 요소로 텍스트 한 줄 또는 여러 줄을 쓸 수 있도록 구성
• 라디오 보튼 : 여러 개 옵션 중 1개의 옵션을 선택할 때 사용하는 요소
• 체크 박스 : 여러개 옵션 중 1개 이상의 옵션을 선택할 때 사용하는 요소

 

3) Page 요소

: 폰트 규정, 아이콘 요소, 체크박스/라디오 버튼, 말풍선, 이미지 표시, 탭 표시, 스텝 표시, 페이지 이동, 상하 스크롤, 정보입력 등으로 구성

 

4) 팝업 요소

: 윈도 팝업, 레이어 팝업

 

5) Alert(알림) 요소

: 정보 누락/정보 오류 시 Altert, 업무 처리 안료 Alert, 삭제, 수정 시 Alert, 업무 안내성 Alert

---

UI 패턴 모델 정의

: CRUD 방식 기반 데이터 입출력을 처리하는 화면 흐름을 포함하여 오퍼레이션 방식에 대한 표준 절차를 표시하고 패턴 모델을 개발

: 표준 프레임워크로 개발하고, 유스케이스를 이용해 패턴별 표준 개발 방법 총 7가지 영역 정의

 

[패턴별 표준 개발 방법 정의]

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

: 제안 단계에서 결정된 클라이언트를 통해 개발 시 필요한 공통 요소 식별, 디렉토리 구성, 개발 환경 구축 부분 도출

: 리치 클라이언트와 씬 클라이언트 존재

 

2) 서버 컨트롤러 정의

: 프레임워크가 제공하는 방식 채택

: 별도 클라이언트 제품 도입은 서버 컨트롤러와의 연동 방식 결정

 

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

: 서버 메시지 및 예외 처리를 클라리언트 UI에 전달하는 방식 결정

 

- S(System) : 시스템 오류 발생 메시지, 런타임 예외 전달시 사용 및 모든 트랜잭션 자동 복원 (Rollback)

- E(Error) : 애플리케이션 예외 전달 시 사용하며, 모든 트랜잭션은 자동 복원

- I(Information) : 처리 결과나 관련 정보에 대한 확인 메지시를 사용자에게 알려줄 때 사용하며 모든 트랜잭션은 커밋됨

 

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

: 어떤 방식 오브젝트를 사용할지 먼저 결정

: 클라이언트와 서버 간 데이터 형태 변환을 어떻게 처리할 것인지 방안 마련

 

5) 기업 포털 연계 정의

: 기업 포털 - SSO - 사용자 간 연계 방안을 URL 연계 시를 고려하여 정의

 

6) 보고서 정의

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

 

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

: 외부 UI 컴포넌트 도입시 서버와의 연계 방식 결정

---

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

- 조직 구성 및 역할 정의

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

 

- 커뮤니케이션 방안 수립

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