I. 소프트웨어 설계 - 화면 설계 (1)

(1) UI 개요

 1. UI(User Interface) 개념

  - 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 매개체

  - 정보기기나 소프트웨어의 화면 등에서 사용자가 접하게 되는 화면

 

* 사용자 경험 (User Experience)

사용과 맥락	사용자	컴퓨터
- 사회적 구조 및 과업 - 애플리케이션 영역 - 사용자와 기계 사이의 적응성	- 인간 정보처리 과정 - 사회적 구조 및 과업 - 인간공학적 요소	- 입출력 장치 - 상호작용 기술 - 컴퓨터 그래픽스 - 상호작용 구조

 2. UI 유형

유형	특징	설명
CLI (Command Line Interface)	정적인 텍스트 기반 인터페이스	명령어를 텍스트로 입력하여 조작하는 사용자 인터페이스
GUI (Graphic User Interface)	그래픽 반응 기반 인터페이스	그래픽 환경을 기반으로  한 마우스나 전자펜을 이용하는 사용자 인터페이스
NUI (Natural User Interface)	직관적 사용자 반응 기반 인터페이스	사용자 가진 경험을 기반으로 키보드나 마우스 없이 신체 부위를 이용하는 사용자 인터페이스(터치, 음성 포함)
OUI (Organic User Interface)	유기적 상호작용 기반 인터페이스	입력장치가 곧 출력장치가 되고, 현실에 존재하는 모든 사물이 입출력장치로 변화 할 수 있는 사용자 인터페이스

 

3. UI 분야

분야	설명
물리적 제어 분야	정보 제공과 기능 전달을 위한 하드웨어 기반
디자인적 분야	콘텐츠의 정확하고 상세한 표현과 전체적 구성
기능적 분야	사용자의 편의성에 맞춰 쉽고 간편하게 사용 가능

 

4. UI 설계 원칙

설계 원칙	설명	부특성
직관성 (Intuitiveness)	누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 함	쉬운 검색 쉬운 사용성 일관성
유효성 (Efficiency)	정확하고 완벽하게 사용자의 목표가 달성될 수 잇도록 제작	쉬운 오류 처리 및 복구
학습성 (Learnability)	초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 제작	쉽게 학습 쉬운 접근 쉽게 기억
유연성 (Flexibility)	사용자의 *인터랙션을 최대한 포용하고, 실수를 방지할 수 있도록 제작	오류 예방 실수 포용 오류 감지

* 인터랙션 (Interaction) : 입출력 장치를 매개로 디지털 시스템과 사람이 주고받는 일련의 의사소통 과정

 

(2) UI 표준

 1. UI 표준 개념

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

 

 2. UI 표준 구성

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

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

*CRUD : 컴퓨터 소프트웨어 처리 방식인 Create, Read, Update, Delete 를 묶어서 일컫는 말

 

 3. UI 표준 수립 시 고려사항

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

 

 4. UI 스타일 가이드 구성

  -UI 구동 환경의 정의

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

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

 

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

 - 레이아웃 정의

구분	설명
화면 구조 정의	- 기본 배치는 크게 상단 (Top), 왼쪽 (Left), 콘텐츠 (Contents) 영역의 3개 부분으로 설계 - 하단 메뉴 구성 (Footer Area)은 상황에 맞게 추가 및 제외
상단 메뉴 구성 (Top Area) 정의	- 필수적으로 적용하는 사항 - 구성요소로 시스템 로고, 로그인 사용자, 바로 가기 메뉴 (Quick Menu), 주 메뉴 (Main Navigation) 존재 - 시스템 전체 페이지에 동일하게 적용
좌측 메뉴 구성 (Left Area) 정의	- 선택적으로 적용하는 사항 - 구성요소로 서브 메뉴, 배너 존재 - 시스템별 서브 페이지에 선택 적용함
내용 구성 (Contents Area) 정의	- 필수적으로 적용하는 사항 - 구성요소로 메인 이미지, 시스템별 구성 콘텐츠 존재
하단 메뉴 구성 (Footer Area) 정의	- 선택적으로 적용하는 사항 - 구성요소로는 회사 CI, 저작권 등 존재 - 회사 상황에 맞춰 적용 및 삭제 가능
사용 환경에 맞춰 페이지 폭 정의	- 브라우저 사이즈에 따라 페이지 폭 크기를 유동적으로 적용

  - 메뉴 네비게이션 정의

  메뉴 내비게이션은 4가지 타입의 애플리케이션의 메뉴 구조에 따라 적당한 타입을 선택하여 적용한다.

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

 

  - 기능 정의

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

 

  - 구성요소 정의

정의	설명
그리드	UI를 구성하는 방법 중 테이블 형태로 UI를 구성
버튼	기능 버튼, 검색 버튼, 그리드 관련 버튼, 기타 버튼 44가지로 구분해 제작

 

 5. UI 패턴 모델(Pattern Model) 정의

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

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

영역	설명
업무 화면 크라이언트 정의	- 제안 단계에서 결정된 클라이언트를 통해 설계자는 개발 시에 필요한 공통 요소 식별, 디렉토리 구성, 개발 환경 구축 부분 도출 - 클라이언트에 출력 U는 X-Internet으로 대변되는 *리치 클라이언트와 일반 JSP, HTML 기반의 *씬 클라이언트가 존재
서버 컨트롤러 (Controller) 정의	- 프레임워크를 도입한다면 해당 프레임워크가 제공하는 방식 채택 - 별도의 클라이언트 제품을 동이하는 경우 서버 컨트롤러와의 연동 방식 결정
서버 메시지 및 예외처리 정의	- 서버의 메시지 및 예외 처리를 클라이언트 UI에 전달하는 방식을 결정 - S(System) : 시스템  오류로 인해 발생하는 메시지 런타임 예외를 전달할 때 사용되며, 모든 트랜잭션은 자동으로 복원 (Rollback) - E(Error) : 업무 처리 로직의 일환으로 애플리케이션 예외를 전달할 때 사용 - I(Information) : 정상적인 업무 처리 결과나 관련 정보에 대한 확인 메시지를 사용자에게 알려주고자 할 때 사용 이때 모든 트랜잭션은 커밋(Commit) 됨
클라이언트 - 서버 간 데이터 변환 정의	- 어떤 방식의 오브젝트(Object)를 사용할 것인지를 먼저 결정 - 클라이언트와 서버 간의 데이터 형태 변환을 어떻게 처리할 것인지 방안 마련
기업 포털 연계 정의	- 기업 포털-*SSO-사용자 간 연계 방안을 URL 연계 시를 고려하여 정의
보고서 정의	- 클라이언트와 리포트(Report) 솔루션 간의 연계 방식을 결정
외부 컴포넌트 연계 정의	- 외부 UI 컴포넌트를 도입할 때 서버와의 연계 방식을 결정

*리치 클라이언트(Rich Client) : 서버는 클라이언트에서 요청한 SW의 실행 코드를 스트림 형태로 제공하고, 클라이언트는 서버로부터 스트리밍 되는 SW 코드를 클라이언트 PC의 자원을 이용하여 실행하는 기술이다.

*씬 클라이언트(Thin Client) : 서버에서 책임지는 기술로 서버에서 가상 머신을 이용하여 클라이언트의 데이터와 소프트웨어를 관리 및 실행하는 기술이다.

* SSO(Single Sign On) : 한번의 로그인을 통해 여러 다른 사이트들을 자동적으로 접속하여 이용하는 방법

 

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

구성	설명
조직 구성 및 역할 정의	효과적인 프로젝트 추진을 위하여 UI 팀 및 표준 개발 팀을 주축으로 한 추진 조직 구성을 확정
커뮤니케이션 방안 수립	UI 개발이 원할히 수행되도록 정식 보고 및 정기적인 회의뿐 아니라 이슈 회의 등 다양한 방식의 커뮤니케이션 방안을 마련

(3) UI 지침

 1. UI 지침(Guideline) 개념

  - 목표 정의 : 환경분석, UI 개발 목표 및 범위 정의

  - 프로젝트 계획 : 사용자 분석 및 니즈 조사

  - 요구사항 정의 : 사용자 요구사항 도출, UI 컨셉션 정의

  - 설계 및 구현 : UI 상세 설계 UI 상세 설계, UI 화면 디자인, UI 검증

  - 테스트 : 사용성 테스트 실행, 결과 분석

  - 배포 및 관리 : 메뉴얼 배포, 관리

 

 2. UI 표준 적용을 위한 환경 분석

  - UI 환경 분석을 위해 사용자 트렌드 분석, 기능 및 설계 분석

구분	설명
사용자 트렌드 분석	- 현재 UI의 단점 파악 및 트렌드 숙지 - 사용자가 필요로 하는 핵심 요구사항 파악 - 사용자가 쉽게 이해 가능한 기능을 위주로 기술 영역 정의
기능 및 설계 분석	기능 조작성 분석	- 사용자 편의성 확대를 위해 - 스크롤 바 지원 가능 여부 - 마우스 조작 및 동선 확인
	오류 방지 분석	- 조작시 오류에 대해 예상 가능한지 - 의도와 관계 없는 페이지 이동이 있는지 - 사용자가 기능버튼을 명확히 구분 가능한지 - 기능 버튼명이 조작과 일치하는지
	최소한의 조작으로 업무 처리 가능 여부 확인	- 작업의 흐름에 적합한 레이아웃 확인 - 기능 특성에 맞는 UI 확인 - 조작 단계 최소화 및 동선 단순 확인
	UI의 정보 전달력 확인	- 정보에 대해 사용자가 인지 하기 쉬운지 - 정보 제공 방식이 일관적이며 사용자가 이해 하기 쉬운지 - 사용자 정보 제공이 간결하고 명확한지

 3. UI 개발 목표 및 범위

  1) 개발 목표 및 범위 정의

   - UI 개발 목표 및 범위를 필수적으로 수행 및 반영

   - 성공적인 수행을 위해 UI 개발 필요성 및 목표를 공유하고 수립을 위한 활동

 

구분	목표	활동
경영진의 UI 관련 개발 요구사항 조사 및 정의	- 심층인터뷰로 비즈니스 요구사항 정의 - 사업적 목표를 바탕으로 UI 디자인 프로세스 정의 - 경영진 인터뷰는 반드시 사용자 리서치시작 전 진행	- 초기 비전과 기대 설정 - 비용과 일정 결정 - 기술적 제약과 가능성 파악 - 사업 전략, 목표, 각 프로세스 책임자 선정, 우선 순위 선정, 개별 적인 업무 단위 구분
자사-타사-사용자 분석 (3C 분석) 및 트렌드 분석	- 기존의 자사 제품과 주요 경쟁사 제품을 분석하는 마케팅적 관점으로 시장 이해	- 자사 및 타사 분석 (3C 분석, SWOT 분석) - 트렌드 분석 (*이슈 분석, 시나리오 플래닝) - 전문가 사용성 테스트 진행 - 핵심 이슈 도출
관계자 간 개발 목표 협의 및 공유 워크숍	- 앞의 단계에서의 결과를 토대로 부서, 관계자간  개발 목표 협의 - UI 차별성 있는 콘셉트, 개선 등 개발 이슈가 많은 상황에서 필요	- 워크숍 범위와 목적 정의 - 아이디어 워크숍을 통해 아이디어 수렴 및 평가 - 아이디어 정리, 분석 후 전문가적 통찰을 통해 아이디어를 선정, 개발 목표 도출

* 이슈 분석 (Issue Analysis) :  문제를 정확히 파악한 후 해결이 가능한 작은 문제로 분해하고 구조화 하여 문제를 해결하는 기법.

                                              가장 중요한 문제가 제일 상단에 위치하도록 한다.

 

  2) UI 개발을 위한 주요 기법

기법	설명
3C 분석	고객 (Customer) , 경쟁하고 있는 자사 (Company)와 경쟁사 (Compititor)를 비교 분석하여 어떻게 차별화 할지 분석하는 기법
SWOT 분석	기업의 내부 환경과 외부 환경을 분석하여 Strength (강점), Weakness (약점), Opportunity (기회), Threat (위협) 요인을 규정하고 이를 토대로 경영 전략을 수립하는 방법
시나리오 플래닝	불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 설계하는 방법으로 불확실성을 제거해나가려는 경영 전략
사용성 테스트 (Usability Test)	사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제를 수행한 후, 질문에 답하도록 하는 테스트
워크숍 (Workshop)	소집단 정도의 인원으로 특정 문제나 과제에 대한 새로운 지식, 기술, 아이디어, 방법들을 서로 교환하고 검토하는 연구회 및 세미나

 

 4. 사용자 분석 및 니즈 (Needs) 조사

  - 최신 트렌드, 경쟁사 동향을 통해 정의된 핵심 기능 관련, 예상 타깃 고객층의 프로파일을 기술하고 정의

 

세부 수행 활동	목표	활동
*리서치 대상 선정 및 내용 설계	- 고품질의 리서치 결과를 얻기 위해 적절한 대상자 선정 및 리서치 설계 - 대상 선정 및 계획 수립	- 사용자 분류 기준 정의 및 분류 - 사용자 그룹별 매력도 평가 - 리서치 대상 *프로파일 선정 및 대상 선정 - 이슈별 내용 상세 설계 - 리서치 방식 정의, 리서치 팀 구성, 스케쥴링
리서치 진행	- 사용자의 불편 사항과 니즈를 파악하기 위한 단계 - 해당 제품/ 서비스에 대한 다양한 의견 수집	- 설문조사/개인 인터뷰/ 그룹 리서치 진행 - 리서치 내용 점검 및 보완
리서치 결과 정리	- 결과 분석을 토대로 핵심 이슈 도출을 통해 UI 개발 목표를 설정 - 전략과 디자인 개발의 토대가 된다	- 리서치 결과 분석시 작성

*리서치 (Research) : 이미 존재하던 지식의 발견, 해석, 정정, 재확인 등에 초점을 맞추는 체계적인 조사

*프로파일 (Profile) : 어떤 시스템을 일정 범위 내에서 한정적으로 특징 지우는 그룹화 된 값

 

 5. 요구사항 도출

  - 페르소나 정의, 콘셉트 모델 정의, 사용자 요구사항 정의, UI 컨셉션 단계를 통해 사용자 요구사항을 도출

세부 수행 활동	개요	세부 수행 활동
페르소나 (Persona) 정의	- 잠재적 사용자의 다양한 목적과 관찰된 행동 패턴을 응집시켜 놓은 가상의 사용자	- 페르소나 분류 및 정의 - 페르소나 작성 - 페르소나 활용
콘셉트 모델 정의	- 여러 가지 추상적인 콘셉트들 사이의 관계를 보여 주는 다이어그램	- 콘셉트 모델 정의 - *브레인 스토밍 활용
사용자 요구사항 정의	- 리서치 및 페르소나 결과물을 토대로 요구사항을 도출, 우선순위를 정함	- *요구사항 매트릭스 작성 - *정황 시나리오 제작 - 요구사항 도출
UI 컨셉션	- 정리된 요구사항을 구체화하는 단계 - 대표 화면 설계를 진행하는 단계	- 정보 구조 설계 - 대표 화면 와이어 프레임 스케치 - 페이퍼 프로토타입을 통한 스토리보드 설계

*브레인 스토밍 (Brain Storming) :  자연스럽게 제시된 아이디어 목록을 통해 특정한 문제에 대한 해답을 찾고자 하는 기법

*요구사항 매트릭스 (Requirement Matrix) : 수집된 요구사항을 검토하여 페르소나의 목적을 기준으로 데이터 요구, 기능 요구, 제품 품질                                                                       제약 요인 기반으로 만든 요구사항 표

*정황 시나리오 (Contextual Scenario) : 낙관적이면서도 발생 상황에서 이상적인 시스템 동작에 초점을 맞추는 시나리오

 

 6. UI 상세 설계

  - UI 설계 시안을 토대로 실제 설계 및 구현을 위해 모든 화면에 대한 UI 상세 설계 진행

  - UI 시나리오 문서는 사용자 인터페이스의 기능 구조, 대표화면, 화면간의 인터랙션 흐름, 다양한 상황에서의 예외 처리방식 등을 문서로 정리한 것으로 '효율적인 UI 관리'와 여러 이해관계자 간의 '원활한 의사소통'을 할 수 있게 함

 

*사용성 테스트 (Usability Test) : 사용자가 직접 제품을 사용. 작성된 시나리오에 맞춰 과제 수행 -> 질문에 답하도록 하는 테스트 위에있음

 

(4) 스토리보드

 1. 스토리보드(Storyborad)의 개념

  - 프로세스, 콘텐츠, 와이어프레임, 기능에 대한 정의, 데이터베이스의 연동 등 서비스를 위한 정보가 수록된 문서

  - 디자이너와 개발자가 최종적으로 참고하는 산출 문서

  - 와이어 프레임, 스토리보드, 프로토타입이 설계를 위해 활용 됨

 

구분	설명	도구
와이어 프레임 (Wireframe)	이해 관계자들과의 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업	- 파워포인트 - 키노트 - 스케치 - 일러스트
스토리보드 (Storyboard)	정책, 프로세스, 콘텐츠, 와이어프레임, 기능정의, 데이터베이스 연동 등 서비스 구축을 위한 정보가 담겨있는 설계 산출물	- 파워포인트 - 키노트 - 스케치
프로토타입 (Prototype)	정적인 화면에 설계된 와이어프레임 또는 스토리보드에 동적 효과를 적용함으로서 실제 구현된 것처럼 시뮬레이션 모형 (시제품)	- HTML/*CSS

*CSS (Cascading Style Sheet) : HTML문서를 스타일링 하는 표준 언어

 

 2. 스토리보드 작성 절차

  - 전체개요작성 -> 서비스 흐름 작성 -> 스타일 확정 -> 메뉴별 화면 설계도 작성 및 상세설명 -> 추가 관련 정보 작성

순서	작성 절차	설명
1	전체 개요 작성	- 문서명, 개정 이력, 디렉토리, 작성 일자, 업데이트 기록 등 기재해야 할 중요사항 명시 - 가장 핵심적인 개념만 대표화면과 함께 요약
2	서비스 흐름 작성	- 메인 페이지로부터 각각 서브메뉴들이 어떤 화면들을 거쳐서 진행되는지 과정을 보여주는 화면 작성      => 버튼을 누르면 발생하는 이벤트, 다음 화면, 어떤 화면에서 서버와 통신이 발생해 리스트를 가져오는지 - 와이어프레임 상에서 발견하지 못한 서비스 흐름상 문제 점검 가능 - 사용자가 이용 도중 메뉴들의 구성이 엉키거나 흐름이 끊어지는 현상이 발생하는지 확인하는 과정
3	스타일 확정	- 레이아웃이나 글자 모양, 크기, 색상, 그래픽에서 일관성을 유지해야 하는 스타일 확정
4	메뉴별 화면 설계도 작성 및 상세설명	- 각각의 화면에 대한 상세 설명 페이지 작성
5	추가 관련 정보 작성	- 메뉴별 화면 설명은 구체적이며 이해하기 쉽게 - 연결 되는 서버가 있다면 URL이나 관련 정보도 같이 작성 - 프로그램 요소나 스크립트 기능, ASP나 php 등의 프로그램 표시와 기능 설명