[D+61] 화면구현

 

 

국비지원 D+61

-  화면 구현 -

 

---

 

UI설계 내용 확인

• UI (User Interface)

- CLI (명령어 라인 인터페이스, Command Line Interface) : 사용자와 시스템이 상호 작용을 하는 방식으로 명령과 출력이 데스트 형태로 표현된다.

- GUI (그래픽 유저 인터페이스, Graphical User Interface) : 사용자가 컴퓨터의 자원을 사용할 수 있도록 구성요소들이 그래픽 형태로 표현된다.

- NUI (자연어 유저 인터페이스, Natural User Interface) : 몸짓, 말소리만으로도 IT기기를 사용할 수 있는 사용자 인터페이스이다.

 

• UI 표준 및 지침

- UI표준은 시스템 전반에 걸쳐 모든 UI에 공통적으로 적용되는 내용을 의미하며, 화면 구성 내용이나 화면 이동 등이 포함된다.

- UI지침은 UI개발 과정에서 UI요구사항이나 구현 제약사항 등 지켜야할 공통의 조건을 의미한다.

- ISO9126

 

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

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

 

 

---

UI메뉴구조 확인

• 사용성

- 특정한 목적을 성취하고나 하는 특정 사용자들에 의해 어떤 제품이 사용될 때와 같은 특정한 맥락의 사용에서의 효과성, 효율성, 만족도에 관한 것이다.

- 사용자가 업무를 쉽고 편리하게 수행하는 것에 의미를 둔다.

 

• 유용성

- 사용자가 업무를 수행하는데 있어서 얼마나 정확하게 수행할 수 있는지를 나타내는 것이다.

 

• 정보 구조 (Information Architecture)

- 어떻게 정보를 배치하고 구성해야 성능이 좋은가를 판단하는 것이 목적이다.

- 설계 단계에서 사이트를 구성하는 처리 내용이나 메뉴의 구조를 표현함으로써 사이트의 구조를 파악할 수 있도록 하는 것으로 사이트 맵이라고도 한다.

 

• 네비게이션 (Navigation)

- 사용자가 사이트에서 원하는 정보를 찾도록 안내하는 것이다.

- 사이트구조와 관계가 있고 설계나 구현할 때 사용자가 중심이 되어야 한다.

- 네비게이션은 메뉴, 버튼, 링크 등으로 구성되어 있으며 이것들은 모든 페이지에서 일관성을 지켜 사용자에게 혼동을 주지 않도록 하며, 사용자가 직관적으로 자신이 찾는 정보를 알고 찾아가는데 도움을 줄 수 있도록 설계되어야 한다.

 

• 유스케이스 (Use Case)

- 사용자 측면에서의 요구사항이며 주로 기능 개선에 대한 내용으로, 사용자가 원하는 목표를 위하여 시스템에서 수행해야 하는 내용을 기술한다.

- 시스템에 대한 시각화를 통해 사용자의 관점에서 인식할 수 있다.

 

• 사이트 메뉴 구조도

 

 

---

UI구현 지침 확인

• W3C (World Wide Web Consortium)

월드 와이드 웹을 위한 표준을 개발하고 장려하는 국제적인 컨소시엄 조직으로 웹의 지속적인 성장을 도모하는 프로토콜과 가이드라인을 개발하여 월드 와이드 웹의 모든 잠재력을 이끌어 낸다는 목적에서 찾을 수 있다.

 

• 한국형 웹 콘텐츠 접근성 지침

- KWCAG (Korean Web Content Accessibility Guidelines)

- 장애인이 비장애인과 동등하게 웹 콘텐츠에 접근할 수 있도록 웹 콘텐츠를 제작하는 방법에 관하여 기술한 것이다.

- 웹 콘텐츠 저작자 및 개발자, 웹 사이트 설계자 등이 장애인 접근성을 준수하여 콘텐츠를 쉽게 제작할 수 있도록 돕는 지침들을 제공하는 것이 목적이다.

- 기존의 '인터넷 웹 콘텐츠 접근성 지침'에 해외 웹 관련 표준 및 기술 동향을 최대한 반영하여 개정한 것이다.

- 해외의 '웹 콘텐츠 접근성 가이드라인 2.0(WCAG 2.0: Web Content Accessibility Guidelines 2.0)을 국내 실정에 맞게 반영한 것이다.

 

• 전자정부 웹 표준 준수 지침

전자정부 웹 사이트 이용자가 특정 운영 체제나 웹 브라우저에 상관없이 접속할 수 있도록, 정부에서 전자정부 시스템 구축 시 반영해야 하는 최소한의 규약을 정의한 것이다.

 

• 웹 (Web)

웹 표준 (Web Standards)

웹에서 사용되는 기술이나 규칙을 의미하며 웹 사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정과 다른 기종이나 다른 플랫폼에서도 웹페이지가 구현되도록 제작하는 기법 등을 포함한다.

 

웹 접근성 (Web Accessibility)

어떠한 사용자(장애인, 노인 등)가 어떠한 기술 환경에서도 사용자가 전문적인 능력없이 웹사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것을 뜻한다.

모든 사용자가 웹 콘텐츠에 보다 손쉽게 접근할 수 있도록 웹 접근성 지침을 준수하여 설계하고, 실용성을 고려하여 웹 사이틀르 구현하였는지 여부의 수준을 의미한다.

 

웹 호환성 (Cross Browsing)

서비스 이용자 단말기의 하드웨어 및 소프트웨어 환경이 다른 경우에도 동등한 서비스를 제공하는 것을 의미한다.

 

 

---

UI구현

• 서버(Server)와 클라이언트(Client)

서버

클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는  컴퓨터 또는 프로그램이다.

 

클라이언트

네트워크를 통해 다른 서버 시스템 상의 컴퓨터에 원격 서비스에 접속할 수 있는 응용 프로그램이나 서비스를 의미한다.

 

• HTML (Hyper Text Markup Language)

웹페이지를 표현하는 언어 이다.

 

 

 

---

UI테스트

• 사용성 테스트(Usability Test)

목적

UI테스트에 대한 보편적인 방법으로 사용자의 제품 만족도 제공, 제품의 완성까지의 노력 대비 높은 효율성, 개발 생산성 대비 낮은 에러, 쉬운 학습 이해도, 높은 품질의 완성도 상승, 사용자 실수 최소화등의 효과를 달성할 수 있다.

 

특징

- 사용자가 웹사이트를 사용하는 것을 전제로 분석하여 사이트 구성 메뉴의 문제점과 요구사항의 반영 여부를 점검하는 것이다.

- 웹 사이트가 개발된 조건을 바탕으로 사용자가 접근하고 이용하느 측면에서 선호할만한 웹 사이트의 기능을 테스트하는 것이다.

- 사용자의 요구사항에 맞는 웹 사이트를 만들어 내기 위하여 구현 전체 절차에 사용자의 재 요구사항이 반영되도록 하는 것이다.

 

• 사용성 테스트 과정

1. 계획 수립 - 목적, 평가 내용(항목) 분석, 사용 환경, 사용자 등을 분석한다.

2. 테스트 설계 - 진행 절차 작성, 데스트 참가자 결정, 테스트 항목의 평가 방향 결정, 다양한 평가 방법으로 설계한다.

3. 테스트 실행 - 설계된 진행 절차대로 진행한다.

4. 결과 보고서 작성 - 평가에 사용된 데이터를 분류하고 분석하며 결과를 통해 문제점을 분석한 후, 수정에 필요한 의견을 포함하여 보고서를 작성함으로써 피드백을 통해 오류를 수정하도록 한다.