[2020 정보처리기사 실기] Section 06. 화면 설계(1/2)

셀카 찍는 돼지

 

이전글

2020/04/17 - [2020년도 상반기/정처기] - [2020 정보처리기사 실기] Section 05 . 서버 프로그램 구현(3/3)

사용자 인터페이스

1. UI(User Interface)는 사용자와 시스템 간의 상호작용을 원할케 해주는 장치나 SW

• 정보 제공과 전달을 위한 물리적 제어에 관한 분야
• 컨텐츠의 상세적인 표현과 전체적인 구성에 관한 분야
• 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야

 

2. 특징

• 소프트웨어 영역중 변경이 가장 많이 발생
• 수행 결과의 오류를 줄임
• UI 설계를 위해서는 SW 아키텍처를 반드시 숙지
• 최소한의 노력으로 원하는 결과를 얻을 수 있게 해줌 (WOW)

 

3. 구분

• CLI(Command Line Interface) : 입/출력이 텍스트 형태
• GUI(Graphical User Interface) 
• NUL(Natural User Interface) : 사용자의 말이나 행등으로 기기 조작

 

4. 원칙

• 직관성 : 누구나 쉽게 이해하고 사용
• 유효성 : 사용자의 목적을 정확하고 완벽하게 달성
• 학습성 : 누구나 쉽게 배우고 익힘
• 유연성 : 사용자의 요구사항을 최대한 수용하고 실수를 최소화

 

5. 설계 지침

• 사용자 중심
• 일관성
• 단순성
• 결과 예측 가능
• 가시성
• 표준화
• 접근성
• 명확성
• 오류 발생 해결

 

6. UI 설계 도구

• 와이어 프레임(Wireframe) : 기획 단계의 초기에 제작하는 것으로 개략적인 레이아웃이나 뼈대를 설계 하는 단계
  • 제작시 화면 단위로 설계
• 목업(Mockup) : 와이어 프레임보다 더 실제 화면과 유사하게 만든 정적 형태의 모형
  • 시각적 구성요소만 배치함 실제ㄴㄴ
• 스토리보드(Stry Board) : 와이어프레임에 콘텐츠에 대한 설명, 페이지간 이동 흐름등을 추가한 문서
  • 상단이나 우측에 제목, 작성자 기입 좌측은 UI화면, 우측은 Description 기입
• 프로토타입(Prototype) : 와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형
• 유스 케이스 : 사용자 측면에서의 요구사항

 

UI 표준 및 지침

1. UI 표준과 UI 지침

• 표준 : 전체 시스템에 포함 된 모든 UI에 공통적으로 적용될 내용
• 지침 : UI 개발과정에서 꼭 지켜야 할 공통의 조건

 

2. 웹의 3요소

• 웹 표준
• 웹 접근성
• 웹 호환성

 

3. UI 스타일 가이드 작성 순서 

구동 환경 정의 ▶ 레이아웃 정의 ▶ 네비게이션 정의 ▶기능정의 ▶구성요소정의

 

• 구동 환경 정의
  • Os, 웹 브라우저, 모니터 해상도, 프레임 세트등을 규정
• 레이아웃 정의
  • 화면 구조 정의, 각 영역의 메뉴를 구성(Top, Left, Contents, Footer)
• 네비게이션 정의 
  • 메뉴, 버튼, 링크
  • Type 1 : 상단,좌측으로 구성
  • Type 2 : 상단메뉴에 대한 하위 메뉴 Drop Down 형태
  • Type 3 : 좌측 생략, 상단메뉴에 대한 하위 메뉴 Drop Down 형태
  • Type 4 : 좌측 메뉴를 반응형? 이라고해야대나 마우스 가져다대면 나타나게 함
• 기능 정의
  • 프로세스 모델링 정의 : 시스템에 적용할 업무에서 발생할 수 있는 모든 활동들을 쉽게 파악할 수 있도록 업무 기능 모델링을 정의
  • 데이터 모델 정의 : 업무 처리 과정에서 필요한 데이터를 엔티티로 정의
• 구성 요소 정의 : 그리드나 버튼정의
  • 그리드 : 데이터를 테이블로 표현
  • 버튼 : 기능, 검색, 그리드관련, 기타 버튼 4가지로 구분

 

UI 요구사항 확인

1. UI 요구사항 확인 순서

목표 정의 ▶ 활동 사항 정의 ▶ UI 요구사항 작성

• 목표 정의 : 인터뷰 후 비즈니스 요구사항 정의
  • 인터뷰시 유의 사항
    • 한 시간을 넘지 않도록 한다 (띠용)
    • 가능한 개별적으로 진행
    • 사용자 리서치를 시작하기 전에 해야함 
• UI 요구사항 작성
  • 순서 : 요구사항 요소 확인 ▶ 정황 시나리오 작성  ▶ 요구사항 작성
    • 요구사항 요소 확인 
      • 데이터, 기능, 제품/서비스의 품질, 제약사항
    • 정황 시나리오 작성
      • 목표 달성을 위한 방법을 순차 묘사함
    • 정황 시나리오에서 요구 사항으로 넘어가는 예시
      • 정황 : 지원이는 떡볶이집에 가서 주문용 태블릿을 켰다. 주 메뉴를 선택하고 추천 토핑을 확인하는 한편, 자신의 쿠폰이 몇개가 찍혀있는지 확인했다.
      • 요구사항 :
        • 주문을 할 수 있어야 한다.
        • 토핑을 추천해줄 수 있어야 한다.
        • 쿠폰내역을 확인할 수 있어야 한다.
        • 태블릿으로 구현이 가능해야 한다

다음글

2020/04/20 - [2020년도 상반기/정처기] - [2020 정보처리기사 실기] Section 06. 화면 설계(2/2)