정보처리기사/소프트웨어 설계

화면 설계 2

RangA 2023. 4. 19. 23:44

UI 요구사항 확인

02. UI 표준

1) 웹 스타일 가이드 구성

1. Instruction

  • 웹 스타일 가이드의 기본 활용 및 적용 범위 등을 정함

2. Basic Rules

  • 색, 글자 폰트, 이미지 폰트 등을 정함

3. Layout

  • 웹 페이지의 작업 유형이나 목적별로 시안을 정함
  • 시안은 PC, 모바일, 태블릿 등 기기의 유형에 따라 정함
  • 주 메뉴와 서브 메뉴 위치, 고정 영역과 가변 영역 등을 구체적으로 정함

2) Layout 구성 요소

  1. Indicator : 서비스 상태 알림 및 수신 상태, 네트워크 연결 상태, 배터리 상태 등을 아이콘으로 제공
  2. Header : 회사 로고, 사이트명을 제공
  3. Navigation : 웹 페이지에서 자신의 경로 위치를 제공
  4. Contents Area : 정보 내용을 제공
  5. Button : 웹 페이지 메뉴 선택을 제공하며, 버튼 위치는 아래에 배치하는 것이 일반적이나 상단에 위치시키는 경우도 있음
  6. Footer : 저작권 정보, 전화번호, Email의 내용을 제공

3) UI 요소

  1. Text box : 텍스트 입력
  2. Password box : 비밀번호 입력
  3. Radio button : 여러 개 중에 1개 선택
  4. Checkbox button : 여러 개 중에 중복 선택
  5. Select box : 드롭다운 형식의 1개 선택
  6. Textarea box : 여러 줄의 텍스트 입력
  7. submit button : 입력한 데이터를 서버로 전송
  8. reset button : 입력한 데이터 제거(초기화)
  9. Toggle button : 두 가지 상태를 하나의 버튼 사용(Num Lock, Caps Lock, Insert 버튼)

4) 기본 환경

1. 용량 규정

  • 메인 화면의 전체 페이지 용량은 1MB 이내로 함
  • 메인 화면의 이미지 용량은 500KB 이내로 함
  • 서브 화면의 전체 페이지 용량은 200KB 이내로 함
  • 서브 화면의 이미지 용량은 100KB 이내로 함
  • 공통으로 사용하는 이미지 용량은 30KB 이내로 함

2. PC 웹 브라우저 규정

  • 해상도는 1280 X 1024를 기준으로 함
  • 메인페이지 크기의 가로는 1110px 이내, 세로는 가변 영역으로 처리함
  • 인터넷 익스틀로러는 8.0 버전 이상을 지원하도록 함
  • 화면은 중앙 정렬을 기본으로 함
  • 가로 스크롤바는 가능한 사용하지 않으며, 세로 스크롤바는 메인 페이지에서는 2개 이하, 서브 페이지에서는 3개 이하로 함
  • 프레임은 가능한 사용하지 않음

3. 모바일 웹 브라우저 규정

  • 해상도는 640 X 480을 기준으로 함
  • 메인페이지 크기의 가로는 600px 이내, 세로는 가변 영역으로 처리함
  • 화면은 중앙 정렬을 기본으로 함
  • 가로, 세로 스크롤바는 사용하지 않음
  • 프레임은 가능한 사용하지 않음

4. 태블릿 웹 브라우저 규정

  • 해상도는 1024 X 768을 기준으로 함
  • 메인 페이지 크기의 가로는 825px 이내, 세로는 가변 영역으로 처리함
  • 화면은 중앙 정렬을 기본으로 함
  • 가로, 세로 스크롤바는 사용하지 않음
  • 프레임은 가능한 사용하지 않음


03. UI 지침

1) UI 지침의 개념

  • 웹이나 모바일 서비스 구축 시 효율적인 정보 전달이 가능하게 하기 위하여 UI 설계에서 지켜야 할 세부 사항을 규정짓는 것

2) UI의 지침

1. 핵심 기능

  • 웹이나 모바일 기기 화면의 크기를 고려하여 메뉴 구조를 단순화하고 간결한 정보를 제공하도록 함

2. 호환성과 확장성

  • 웹이나 모바일 웹에서 3개 이상의 웹 브라우저가 동등한 서비스를 제공하도록 설계함
  • 웹이나 모바일 화면 해상도에 맞는 호환성을 고려함
  • 다양한 운영체제에서 동작할 수 있도록 함

3. 정보 소외 계층의 접근성

  • 웹이나 모바일 구축 시 장애인, 고령자 등을 고려함

4. 일관성

  • 웹이나 모바일 구축 시 글자체, 색상, 용어 선택 등에 있어서 일관성이 있도록 함

5. 이미지

  • 웹이나 모바일 구축 시 전송 속도, 전송량 등을 고려하여 용량이 적은 이미지를 사용하도록 함
  • 종교, 인종, 성(Gender)적 등 사회적 갈등을 유발할 수 있는 이미지는 사용하지 않도록 함
  • 모든 이미지의 저작권을 확보함

6. 사용자 중심

  • 사용자가 쉽게 이해하고 사용할 수 있는 환경을 제공하도록 함

7. 단순성

  • 간단하고 단순하게 조작할 수 있도록 함

8. 결과 예측

  • 실행한 결과를 어느 정도는 예측이 가능하도록 함

9. 가시성

  • 메인화면에 주요 기능을 보이게 하여 쉽게 접근, 조작할 수 있도록 함

10. 표준화

  • UI를 표준화하여 기능 구조를 누구나 쉽게 이해할 수 있도록 함

11. 접근성

  • 업무 분야, 연령, 성별 등의 다양한 계층이 접근할 수 있도록 함

12. 명확성

  • 사용자가 정확히 인지할 수 있도록 함

13. 오류 발생

  • 오류 발생 시 사용자가 오류에 대한 이해와 오류를 쉽게 해결할 수 있도록 함


04. 스토리보드

1) 스토리보드(Storyboard)의 개념

  • 디자이너와 개발자가 최종적으로 참고하는 설계 산출 문서
  • 정책, 프로세스 및 콘텐츠의 구성, 와이어프레임, UI/UX, 기능 정의 데이터베이스 연동 등 서비스 구축을 위한 대부분의 정보가 수록
  • 스토리보드 도구에는 손글씨, 파워포인트, 키노트, 스케치, 포토샵 등이 있음

2) 스토리보드의 작성 절차

1. 스토리보드 1단계 - 메뉴 구성도 만들기

  • 보여줄 것과 결정된 사항을 표현하기 위한 메뉴의 순서와 구성 단계를 정의
  • 전체적인 메뉴 구성도 작성
  • 다양하고 동일한 용어들을 하나로 정의

2. 스토리보드 2단계 - 스타일 확정하기

  • 레이아웃이나 글자 모양, 크기, 색상, 그래픽들을 확정
  • 개발 중에 다른 것을 사용하지 않음으로써 일관성을 유지하게 함

3. 스토리보드 3단계 - 설계하기

  • 화면에서 보여지는 시각적인 디자인의 방향을 확보하여 설계
저작자표시 비영리 변경금지 (새창열림)