1. UI(User Interface)

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

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

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

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

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

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

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

2. UI 표준 및 지침

01. UI 표준

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

02. UI 지침

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

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

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

4. 제약사항 (Constraints Requirements)

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

5. UI 개발 도구 분류

01. 화면 설계

• 파워포인트(Powerpoint), 스토리보드(Storyboard), 와이어프레임(Wireframe), 목업(Mockup) 등이 있다

-1. 와이어프레임

• 기획 단계에서 페이지 레이아웃이나 화면이동, 구성요소에 대한 내용을 기술한 문서이다

-2. 스토리보드

• 와이어프레임의 내용에 디스크립션 등을 포함한 설계 문서이다

-3. 목업

• 설계 단계에서 실제 화면과 같은 형태의 모형이다

02. 프로토타입(Prototype)

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

03. UI디자인

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

6. UI 설계서

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

7. 사용성(Usbility)

• 특정한 목적을 성취하고자 하는 특정 사용자들에 의해 어떤 제품이 사용될 때와 같은 특정한 맥락의 사용에서의 효과성, 효율성, 만족도에 관한 것이다
• 사용성은 사용자가 업무를 쉽고 편리하게 수행하는 것을 의미에 둔다

8. 정보구조 (Information Architecture)

• 설계 단계에서 사이트를 구성하는 처리 내용이나 메뉴의 구조를 표현함으로써 사이트의 구조를 파악할 수 있도록 하는 것으로 사이트 맵이라고도 한다
• 정보 구조를 표현하는 방법에 따라 계층적 구조, 계열 구조, 그리드 구조, 네트워크 구조 등으로 나뉜다

9. 내비게이션(Navigation)

• 사용자가 사이트에서 원하는 정보를 찾도록 안내하는 것이다
• 사이트 맵(사이트 구조)과 관계가 있고 설계나 구현할 때 사용자가 중심이 되어야 한다
• 내비게이션은 메뉴, 버튼, 링크 등으로 구성되며 이들 구성요소는 모든 페이지에서 일관성을 지켜 사용자로 하여금 혼동되지 않도록 하고 사용자가 직관적으로 자신이 찾고 있는 정보를 알고 찾아가는 데 도움을 줄 수 있도록 설계되어야 한다

10. 유스케이스(Use Case)

• 사용자 측면에서의 요구사항이며 주로 기능 개선에 대한 내용으로, 사용자가 원하는 목표를 위하여 시스템에서 수행해야 하는 내용을 기술한다
• 유스케이스에기록된 내용을 토대로 실제 수행 방법을 구현하게 된다
• 사용자에게 있어 외부 시스템이나 서브 시스템과의 의사소통 수단으로 사용된다
• 하나의 단위 업무에 대한 독립적인 기능을 수행할 수 있도록 표현한다
  

11. 웹의 3요소

01. 웹 표준(Web Standards)

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

02. 웹 접근성(Web Accessbility)

• 어떠한 사용자(장애인, 노인 등), 어떠한 기술 환경에서도 사용자가 전문적인 능력 없이 웹사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것을 뜻한다
• 사용자 웹 접근성이란 모든 사용자가 웹 콘텐츠에 보다 손쉽게 접근할 수 있도록 웹 접근성 지침을 준수하여 설계하고, 실사용성을 고려하여 웹 사이트를 구현하였는지 여부의 수준을 의미한다

03. 웹 호환성(Cross Browsing)

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

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

01. 서버

• 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 또는 프로그램이다
• 웹 서버는 웹 브라우저(클라이언트)로부터 HTTP 요청을 받아들이고 HTML 문서(웹 페이지)를 반환한다
  • 웹 서버의 기능은 HTML 문서(웹 페이지)를 클라이언트로 전달하는 것이다
  • HTML 문서(웹 페이지)에는 그림, CSS, JavaScript가 포함된다
  • 콘텐츠 제공 뿐 아니라 클라이언트로부터 콘텐츠를 전달받는것도 웹 서버의 기능에 속한다
• 서버 프로그램의 대표적인 종류에는 Apache, IIS, nginxm GWS 등이 있다

02. 클라이언트

• 네트워크를 통하여 다른 서버 시스템 상의 컴퓨터에 원격 서비스에 접속할 수 있는 응용 프로그램이나 서비스를 클라이언트라고 한다
• 웹 브라우저에 URL을 입력하여 그 URL에 해당하는 웹 서버로 웹 페이지에 대한 요청을 전달하는 것이 클라이언트의 기능이 있다
• 클라이언트의 대표적인 종류로는 파이어폭스, 크롬, IE등이 있다

13. 웹 사이트(Web Site)와 웹 페이지(Web Page)

• 웹 사이트는 인터넷 프로토콜 기반의 네트워크에서 URL을 통하여 보이는 웹 페이지들의 의미 있는 묶음이다
• 웹 페이지는 월드 와이드 웹(WWW, Work Wide Web) 상에 있는 개개의 문서를 의미한다

14. HTML(Hyper Text Markup Language)

• HTML은 마크업 언어로서 웹 페이지를 표현하는 언어이다

01. HTML의 구조

02. 다음 [그림 2-5]의 HTML 기본 구조를 <표 2-2>의 HTML의 기본태그 설명을 바탕으로 이해한다

03. HTML 태그의 이해

• HTML은 모든 태그는 시작과 끝 태그로 이루어진다
• HTML 태그에는 속성을 지정할 수 있다
• 웹 브라우저에 보여지는 내용들을 표현한다

04. HTML의 레이아웃 관련 태그

-1. Header

• 해당 페이지의 헤더 영역을 지정하고 주로 로고나 회사명, 사이트 맵, 로그인/회원가입 버튼, 검색 버튼 등이 위치한다

-2. Navigation

• 본문의 주요 내비게이션(메인 메뉴) 영역을 지정한다

-3. Section

• 해당 페이지의 콘텐츠 영역을 지정할 때 사용하며 헤더, 푸터 태그와 비교해서 영역을 구분 지정할 때 사용한다

-4. Ariticle

• 독립적인 콘텐츠 항목에 대한 영역을 지정할 때 사용한다

-5. Aside

• 본문 내용 이외에 표현하고자 하는 기타 내용이 있을 경우에 영역을 지정할 때 사용하거나 서브 메뉴를 표시하고자 할 때 사용하기도 한다

-6. Footer

• 본문 내용의 아래에 위치하도록 지정하며 주로 개인정보 보호정책, 회사 주소 등을 작성한다

15. CSS (Cascading Style Sheets)

• 웹 페이지 전체의 일관성을 유지할 수 있도록 스타일을 미리 저장해 둔 시트를 의미한다
• 웹 페이지를 HTML 로만 작성할 경우에는 스타일 변경에 제약이 있으나, 스타일을 미리 저장해 두고 일부 내용의 스타일을 변경할 때 전체 페이지의 내용을 한꺼번에 처리할 수 있어 간편하고 페이지의 일관성을 유지할 수있다

01. CSS 문법

• CSS는 HTML 문서 내에 작성되거나 외부 파일 형태로 작성가능하며, CSS문법은 다음의 예와 같이 구성된다
  

-1. 선택자(Selector)

• 스타일을 적용하기 위한 대상을 뜻하며, HTML 요소를 사용할 수도 있고 ID나 Class 형태로 정의할 수도 있다

-2. 스타일

• 다양한 형태로 지정할 수 있으며 '속성 : 값' 형태로 지정한다

02. CSS 선택자

-1. 공용 선택자(Universal Selector, 일반 선택자)

• HTML 요소를 선택자로 하여 스타일을 적용할 수 있으며, 이 경우 해당 HTML 요소 모두에 스타일이 적용된다
  

-2. 태그 선택자(Type Selector)

• 지정한 태그에 대하여 스타일이 적용된다
  

-3. 클래스 선택자(Class Selector)

• 클래스 선택자를 활용하면 특정 HTML 요소들을 그룹화하여 스타일을 지정하는 것이 가능하다

-4. 아이디 선택자(ID Selector)

• 특정 ID를 부여하여 ID에 스타일을 지정할 수 있다
  

16. 자바스크립트(Java Script)

• 자바스크립트는 객체지향 프로그래밍 언어로서 웹 브라우저에서 주로 사용된다
• 자바스크립트를 ㅣㅇ용하여 웹 페이지에서 발생하는 사용자 이벤트에 대한 처리가 가능하고, 자바 스크립트의 내장 객체를 활용하면 다양한 형태의 웹 페이지를 구현할 수 있다

01. 자바스크립트 구현 예

• 아래 자바스크립트 구현 예제를 보면 자바스크립트를 이용하여 HTML 페이지의 요소를 변경하는 것을 확인할 수 있다
  

02. 자바스크립트 작성 방법

• 자바스크립트는 HTML 문서 내에서 <script></script> 태그를 통해 작성되고, 작성되는 위치는 <head>영역, <body> 영역이며, .js 확장자를 갖는 외부 파일 형태로 작성할 수 있다

-1. <body> 영역 내부

• <script> 태그 내부에 자바스크립트 코딩을 작성한다
  

-2. .js 확장자

• 별도의 외부 자바스크립트 코드 파일을 생성하고, 이를 HTML 페이지에 적용할 수 있다
• 이 방식의 장점은 동일한 자바스크립트 코드를 여러 HTML 페이지에 적용할 수 있다는 것이다
  

03. HTML의 이벤트 처리

• <script> 태그 내부의 자바스크립트 코드는 해당 HTML 파일이 로딩될 때 한 번 실행된다
• 이런 정적인 코드만을 사용할 경우 사용자 이벤트에 대한 다양한 처리에 어려움이 있으며, 이 때문에 HTML 에서는 HTML 태그의 여러 속성을 통해 자바스크립트 코드를 처리할 수 있도록 하고 잇다

-1. onclick

• 버튼과 같은 HTML의 다양한 폼 요소에 지원하며, 사용자가 해당 요소를 클릭할 때 동작한다
• 만일 onclick 핸들러가 fasle(거짓)를 반환할 경우에는 해당 요소의 어떠한 기능도 수행하지 않는다

-2. onmousedown, onmouseup

• onclick 핸들러와 유사하게 동작하지만, 마우스를 누를 때와 놓았을 때를 구분하여 동작할 수 있다는 점이 다르다

-3.onmouseover, onmouseout

• 마우스의 포인터가 해당 요소의 위로 올라오거나 벗어날 때 구동한다

-4. onchange

• <input>, <select>, <textare> 요소에서 지원하며 해당 요소의 입력 포커스를 다른 곳으로 이동할 때 구동한다

-5. onload

• <body> 태그에서 사용되며 해당 페이지와 해당 페이지에 연결된 외부 내용들이 완전히 로딩되었을 때 구동한다

17. 사용성 테스트(Usebility Test)

01. 목적

• 사용성 테스트 기법은 UI 테스트에 대한 보편적인 방법으로 크게 사용성 테스트에 대한 계획 수립, 사용성 테스트 설계, 사용성 테스트 수행과 결과 검토로 구분하여 진행된다
• 사용자의 제품 만족도 재고, 제품의 완성까지의 노력 대비 높은 효율성, 개발 생산성 대비 낮은 에러, 쉬운 학습 이해도, 높은 품질의 완성도 상승, 사용자 실수 최소화 등의 효과를 달성할 수 있다

02. 특징

• 사용자가 웹 사이트를 사용하는 것을 전제로 분석하여 사이트 구성 메뉴의 문제점과 요구사항의 반영 여부를 점검하는 것이다
• 웹 사이트가 개발된 조건을 바탕으로 사용자가 접근하고 이용하는 측면에서 선호할 만한 웹 사이트의 기능을 테스트하는 것이다
• 사용자의 요구사항에 맞는 웹 사이트를 만들어 내기 위하여 구현 전체 절차에 사용자의 재 요구사항이 반영되도록 하는 것이다

03. 사용성 테스트의 주의 사항

• 사용성에만 치중한 나머지 고객의 감성적인 측면에 그칠 수 있다
• 기본 기능이 정확히 구현되었는지 검사하는 기본적인 기능 테스트에 개한 누락이 발생하지 않도록 주의한다
• 테스트에 참여하는 인원이 자율적으로 테스트할 수 있는 환경이어야 좋은 품질 보장이 가능하다
• 테스트할 때 자세한 기능 설명, 구현 방법에 대해서 충분한 테스트가 가능하도록 제공되어야 한다
• 테스트가 오랜 시간 진행될 경우 중간에 어떤 사유에서 지연되는지 체크해야 한다

18. 사용성 테스트 과정

01. 계획 수립

• 목적, 평가 내용(항목) 분석, 사용 환경, 사용자 등을 분석한다

02. 테스트 설계

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

03. 테스트 실행

• 설계된 진행 절차대로 진행한다

04. 결과 보고서 작성

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

19. 테스트 케이스의 작성

• 테스트 케이스는 어떤 실행 환경에서 어떤 입력 값들을부여하여 원하는 결과가 정확히 나오는지를 판달할 수 있도록 작성한다

20. 유효성 검사

• HTML 문서 작성 후 문법 등 지켜야 할 많은 규칙들이 있다
• HTML의 문법은 생각보다 복잡해서 완전히 외우기 쉽지 않고, 익숙해진 후에도 간속 실수를 하게된다
• 따라서 가장 좋은 방법은 유효성 검사 프로그램을 사용하여 자신이 작성하고 있는 HTML 문서를 최대 한 자주 검사하는 것이다