UI 구현하기

UI설계 내용 확인

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

1. UI(User Interface)

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

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

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

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

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

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

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

2. UI표준 및 지침

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

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

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

4. 제약사항(Constraints Requirements)

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

5. UI 개발 도구 분류

• 화면 설계

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

• 프로토타입(Prototype)

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

• UI디자인

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

6. UI설계서

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