Ⅵ. 화면 설계 - UI 요구사항 확인.

1. UI 요구사항 확인.

1. UI[User Interface] 개념

• UI(사용자인터페이스)는 사용자와 시스템 사이에서 의사 소통을 위한 매개체 / 좁은의미로는 화면.
• UX(사용자경험) ⊃ UI (사용자인터페이스).
  
  

2. UI 유형 ( Tip. CG NO )

• CLI [Command Line Interface] : 정적 텍스트 기반 → 명령어를 텍스트로 입력하여 조작.
• GUI [Graphical User Interface] : 그래픽 반응 기반 → 그래픽기반 마우스나 펜 이용.
• NUI [Natural User Interface] : 직관적 사용자 반응 기반 → 터치, 음성포함 / 마우스 없이 신체부위 이용 조작.
• OUI [Organic User Interface] : 유기적 상호작용 기반 → 현실의 모든 사물이 입출력 장치가 될 수 있다.
  
  

3. UI 설계 원칙 ( Tip. 직유 학유 )

• 직관성 : 누구나 쉽게 이해하고, 쉽게 사용가능해야함 → 쉬운검색/쉬운사용성/일관성.
• 유효성 : 정확하고 완벽하게 사용자의 목표달성 될수 있게.. → 쉬운 오류 처리 및 복구.
• 학습성 : 초보와 숙련자 모두 쉽게 배우고 사용 할 수 있게.. → 쉽게학습/쉬운접근/쉽게기억.
• 유연성 : 사용자의 인터랙션을 최대한 조용하고 실수 방지 할 수 있게.. → 오류예방/실수포용/오류감지.
  ✱ 인터랙션 : 입출력장치를 매개로 디지털 시스템과 사람이 주고받는 일련의 의사소통 과정.
  
  

4. UI 설계 지침 ( Tip. 사일단결 가표접명오 )

• 사용자 중심 : 사용자가 쉽고 편한 환경.
• 일관성 : 버튼이나 조작이 쉽고 빠르게 습득 할 수 있게.
• 단순성 : 조작은 간단히.
• 결과예측가능 : 기능을 보고 결과 예측 가능.
• 가시성 : 주요 기능 메인노출로 쉬운 조작.
• 표준화 : 디자인 표준화로 선행학습 후 쉽게 사용 할 수 있게.
• 접근성 : 사용자의 직무, 연령, 성별등 고려하여 다양한 계층을 수용.
• 명확성 : 사용자가 개념적으로 쉽게 인지.
• 오류발생해결 : 사용자가 오류상황을 정확하게 인지할 수 있게.
  
  

5. UI 요구사항 구분

• 기능적 요구사항

  시스템이 제공하는 기능, 서비스에 대한 요구사항.

  시스템의 입출력, 데이터, 연산에 관한 요구사항.

• 비기능적 요구사항

  사용성, 효율성, 신뢰성, 유지보수성 등 품질에 관한 요구사항.

  플랫폼, 사용 기술 등 시스템 환경에 관한 요구사항.

  비용, 일정 등 프로젝트 계획에 관한 요구사항.
  
  

2. UI 표준

1. UI 표준 개념

• 전체 시스템에 공통으로 적용되는 화면간 이동, 화면 구성등에 관한 규약.
  
  

2. UI 표준 구성 ( Tip. 액정 스패조 )

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

3. UI 표준 수립 고려사항

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

4. UI 패턴 모델(Pattern Model) 정의 영역

• 업무화면 클라이언트 정의
• 서버 컨트롤러 정의
• 서버 메시지 및 예외 처리 정의
• 클라이언트 - 서버 간 데이터 변환 정의
• 기업 포털 연계 정의
• 보고서 정의
• 외부 컴포넌트 연계 정의
  
  

3. UI 지침

1. UI 지침(Guideline) 개념

• UI 표준에 따라 설계, 개발시 지켜야할 세부 사항 규정 가이드라인.
  
  

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

• 사용자 트렌드 분석

  현재 UI의 단점 파악 및 트렌드 숙지.

  사용자가 필요로 하는 핵심 요구사항 파악.

  사용자가 쉽게 이해 가능한 기능을 위주로 기술 영역 정의.

• 기능 및 설계 분석

  기능 조작성 분석 : 조작 / 스크롤바 지원 여부 / 마우스 조작 및 업무처리 동선 등 확인.

  오류 방지 분석 : 조작시 오류 예상 가능 확인 / 의도치않은 페이지 이동 확인 / 버튼의 기능 명과 조작 일치 확인.

  최소한의 조작으로 업무 처리 가능 여부 확인 : 조작 단계 최소화 및 동선 단순여부 확인.

  UI의 정보 전달력 확인 : 사용자가 쉽게 이해 가능한지 확인.
  
  

3. UI 개발 목표 및 범위 정의

• 경영진의 UI관련 개발 요구사항 조사 및 정의.
• 자사 - 타사 - 사용자분석 (3C분석) 및 트렌드 분석.
• 관계자 간 개발 목표 협의 및 공유 워크숍.
  
  

4. UI 개발을 위한 주요 기법

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

5. 사용자 요구사항 도출 단계

• 페르소나(Persona) 정의
• 콘셉트 모델 정의
• 사용자 요구사항 정의
• UI 컨셉션
  
  

4. 스토리보드

1. 스토리보드[Storyboard] 개념

• UI 화면 설계를 위해서 정책이나 프로세스 및 콘텐츠 구성, 와이어프레임(UI, UX), 기능에 대한 정의, 데이터 베이스의 연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서.
  
  

▷ UI 화면설계 구분 ( Tip. 와스프 )

• 와이어 프레임[Wireframe] : 이해관계자들과 화면구성을 협의 하거나 서비스간 흐름을 공유하기 위한 화면단위 레이아웃 설계 작업.
• 스토리 보드[Storyboard] : 정책, 프로세스, 콘텐츠 구성, UX/UI 등등 서비스 구축을 위한 모든 정보가 담긴 설계 산출물.
• 프로토 타입[Prototype] : 정적 구성된 와이어프레임 또는 스토리보드에 동적 효과를 적용하여 실제 구현된것 처럼 시물레이션 할 수 있는 모형.
  
  

2. 스토리 보드 작성 절차 ( Tip. 개서스 매추 )

• 전체 개요 작성 : 전반적 개요 명시 / 가장 핵심적인 개념만 대표 화면과 함계 요약해서 작성.
• 서비스 흐름 작성 : 메인 부터 각 서브 메뉴들의 진행 흐름 을 보여주는 화면 작성 / 와이어프레임 에서 누락된 문제 점검 가능.
• 스타일 확정 : 레이아웃, font, 색상 등 일관성 유지해야하는 스타일 확정.
• 메뉴별 화면 설계도 작성 및 상세 설명 : 각 화면의 상세 설명 페이지 작성.
• 추가 관련 정보 작성 : 메뉴별 화면은 상세하고 이해하기 쉽게 작성 / 연결서비스 URL의 경우 함께 명시 / 기능에 대한 설명.
  
  

3. 스토리보드 작성 유의사항

• 일관된 기호의 표시 : 내용의 기호, 번호 등 일관된 방식 사용.
• 공통 영역의 정의 : 상단 메뉴, 하단 내용, 퀵메뉴 등 공통 영역은 모든 페이지 같은 형태로 구성.
• 영역별 세부 설계 : 영역별 세부 설계시 각각 영역 명확히 구분하여 세부적 설명 기술.
• 버전 업 관리 : 갱신시 버전 과 날짜를 기록.
  
  

5. UI 프로토 타입 제작 및 검토

1. UI 프로토 타입 계획시 고려사항

• 프로토타입 목표 확인.
• 프로토타입 환경 확인.
• 프로토타입 일정 확인.
• 프로토타입 범위 확인.
• 프로토타입 인원 확인.
• 프로토타입 아키텍처 검증 확인.
• 프로토타입 이슈 및 해결.
• 프로토타입 가이드 확정.
• 프로토타입 개발 생산성 확인.
• 프로토타입 결과 시연.
  
  

2. UI 프로토타입 작성시 고려사항 ( Tip. 계범 목기 산유 )

• 프로토타입 계획 장성
• 프로토타입 범위 확인
• 프로토타입 목표 확인
• 프로토타입 기간 및 비용 확인
• 프로토타입 산출물 확인
• 프로토타입 유의사항 확인
  
  

3. UI 프로토타입 제작 및 검토 프로세스 ( Tip. 아유프적 )

1. 소프트웨어 아키텍처 설계 원리 확인
2. 프로토타입 유스케이스 작성
3. UI 요구사항을 반영한 프로토타입 제작
4. UI 적정성 검토
   
   

• 정보처리기사 필기 합격 후 실기대비 정리 및 책없이 간단히 보기위해 작성하였습니다.
• 2020년 수제비 정보처리기사 책 기반으로 정리 하였습니다.
• 저작권 관련 문제가 있다면 hojunbbaek@gmail.com 으로 메일 주시면 바로 삭제 조치 하도록 하겠습니다.