UI 설계하기

 

UI설계 내용 확인

설계된 화면과 폼의 흐름을 확인하고 제약사항과 화면의 폼 흐름을 구현에 반영하도록 설계를 확인할 수 있다.

UI(User Interface)

사용자가 하드웨어나 시스템에 연결되는 과정에서 사용자의 편리성과 가독성을 높여 주기 위한 것이다.

• 1. CLI(명령어 라인 인터페이스, Command Line Interface)

  
  사용자와 시스템이 상호 작용을 하는 방식으로 명령과 출력이 텍스트 형태로 표현된다.

• 2. GUI(그래픽 유저 인터페이스, Graphical User Interface)

  
  사용자가 컴퓨터의 자원을 사용할 수 있도록 구성요소들이 그래픽 형태로 표현된다

• 3. NUI(자연어 유저 인터페이스, Natural User Interface)

  
  몸짓, 말소리만으로도 IT 기기를 사용할 수 있는 사용자 인터페이스이다.

 

UI표준 및 지침

• 1. UI표준은 시스템 전반에 걸쳐 모든 UI에 공통적으로 적용되는 내용을 의미하며, 화면 구 성 내용이나 화면 이동 등이 포함된다.
• 2. UI지침은 UI개발 과정에서 UI요구사항이나 구현 제약사항 등 지켜져야 할 공통의 조건을 의미한다.

 

소프트웨어 아키텍처(Software Architecture)

소프트웨어 구성요소 중 외부에 드러나는 요소 특성과 요소들 간의 관계를 표현한 것이다.

 

제약사항(Constraints Requirements)

• 1. 시스템을 설계하거나 구현할 때 관련되는 기술이나 표준, 규정들을 의미한다.
• 2. 개발과 관련된 정책이나 업무규칙, 특정 소프트웨어나 프로그램의 사용, 데이터 사용과 관련된 제약 등에 대한 기술 제약사항(Technical constraints), 개발할 때 적용할 업무 영 역의 표준이나 법규의 표준 적합 제약사항(Standard compliance constraints)으로 나눌 수 있다.

 

UI 개발 도구 분류

• 1. 화면 설계

  
  파워포인트(Powerpoint), 스토리보드(Storyboard), 와이어프레임(Wireframe), 목업(Mockup) 등이 있다.
  • (1) 와이어프레임: 기획 단계에서 페이지 레이아웃이나 화면 이동, 구성요소에 대한 내 용을 기술한 문서이다.
  • (2) 스토리보드: 와이어프레임의 내용에 디스크립션 등을 포함한 설계 문서이다.
  • (3) 목업: 설계 단계에서 실제 화면과 같은 형태의 모형이다.

• 2. 프로토타입(Prototype)

  
  인터랙션(Interaction, 상호작용)이 포함되어 테스트가 가능한 형태이다.

• 3. UI디자인

  
  화면의 모양이나 기능 등을 표현하는 것이다

 

UI설계서

웹 사이트의 페이지 구성요소를 기록한 설계도이다. 정적인 형태의 화면 형태로 와이어프 레임이나 목업 등을 이용하여 작성한다.