단위 테스트에 대한 이해 1. 단위 테스트의 개념 UI 기반의 단위 테스트는 사전에 정의된 테스트 시나리오별로 테스트를 수행한다. 테스트 를 통해 시스템의 안정성, 견고성, 사용성을 검증할 수 있으며, 사용자에게 편의성을 제공 할 수 있다. 2. 단위 테스트의 특징 테스트 케이스 설계 기법 UI 기반의 단위 테스트 수행 시, 효율적인 테스트를 수행하기 위하여 테스트 목적에 따라 테스트 케이스를 설계해야 한다. 1. 명세 기반 테스트 케이스 설계 (1) 개념 주어진 명세를 바탕으로 테스트 케이스를 도출하고 테스트 케이스를 실행해 봄으로써 결함이 없음을 보장하는 테스트 기법이다 (2) 종류 2. 경험 기반 테스트 케이스 설계 (1) 개념 이전에 테스트 수행자(또는 테스터)가 다루었던 유사 애플리케이션이나 기..
UI 개발환경 수립 1. UI 디자인 및 퍼블리싱 환경 수립 UI 제작을 위하여 시스템의 목표 및 범위에 따라 그래픽 저작도구 및 퍼블리싱 도구를 PC에 설치하여 이미지로 만들고, HTML 및 CSS로 웹 문서화하는 퍼블리싱을 수행한다 2. UI 개발환경 수립 제작된 이미지와 퍼블리싱된 파일을 개발하기 위하여 Web 및 App 환경의 엔진 및 통합 개발도구를 설치한다. UI 제작 1. UI 디자인 가이드 숙지 제작될 UI의 공통 규칙(네이밍 규칙, 폰트, 색상 등) 및 리소스 내용(레이아웃, 내비게이션, 버튼, 이미지 등) 등이 언급된 UI 디자인 가이드를 숙지한다. 2. 개발언어 숙지 (1) HTML5 (가) DOCTYPE(Document Type Declaration) HTML5 문서 최상단에 DOC..
프로토타입(Prototype)의 개요 1. 프로토타입 개념 사용자의 요구사항을 충분히 분석할 목적으로 시스템의 중요 일부분을 우선 구현한 후 반 복하는 개발 모델을 프로토타입이라고 한다. 2. 프로토타입 특징 프로토타입은 사전에 UI를 시험제작하여서 이해관계자 간의 원활한 의사소통을 수행하는 개발 모델이다. UI를 통해서 프로토타입을 개발한 후에는 이해관계자 간에 평가 및 수정 과정을 반복하면서 요구사항을 검토한다 3. 프로토타입 종류 프로토타입은 다양한 기능 구현의 정도를 고려하여 수평적 프로토타입과 수직적 프로토타 입으로 구분한다. 4. 프로토타입의 개발 절차 프로토타입의 개발 절차는 시스템 개발 계획서를 기반으로 계획을 수립하고, 요구사항 분 석 과정에서 프로토타입을 식별한 후, 핵심 기능을 기준으..
UI 구현 표준 검토 결과 파악 1. 사이트의 특성을 고려한 UI의 요소와 패턴으로 정의되어 있는가 사이트의 특성을 고려한 UI의 요소와 패턴으로 UI가 정의되어 있는지 파악하고, 통일되고 일관되며 재사용이 가능하도록 UI의 표준이 작성되어 있는지 파악한다 2. 웹 호환성을 위해서 다양한 브라우저에서 실행되는가 HTML5 기반의 웹 표준을 준수하여 다양한 브라우저(예: 인터넷익스플로러, 크롬)에서 실 행되고, 다양한 형태(예: 네이티브 앱, 하이브리드 웹, web, 웹 앱)로 실행되는지 파악한다 3. 장애를 가진 사람과 장애를 갖지 않은 사람 모두가 웹사이트를 이용할 수 있게 웹 접근 성을 준수하는가 대체 텍스트, 광과민성 발작 예방, 멀티미디어 대체 수단, 쉬운 내비게이션 등을 통해 장 애를 가진 사람..
UI 개발환경 파악 1. WEB 개발환경(JSP 기준) 파악 WEB 애플리케이션 개발을 위해서 구축해야 하는 개발환경을 파악한다. 보통 자바 실행을 위한 JDK(Java Development Kit), 자바와 JSP(Java Server Page) 통합 개발을 위한 Eclipse (자바 개발 프로그램), JSP로 구축된 웹사이트 파일을 실행시켜 주는 엔진 역할의 톰캣 (Tomcat)을 개발 환경에 설치한다. 2. App 개발환경 파악 App이 실행될 운영체제는 대체로 디바이스에 따른 안드로이드와 iOS로 구분된다. 안드로 이드는 구글에 의해 개발되고 배포되는 운영체제이며, iOS는 애플의 스마트기기에 내장되 어 있는 운영체제이다. 스마트기기에서 실행되는 애플리케이션의 경우 네이티브 앱, 웹 앱, 하이브리..
UI 구현 표준 수립 1. 웹 표준 및 웹 호환성 고려한 표준 수립 웹 호환성이란 사용자 단말기의 하드웨어 및 소프트웨어 환경이 다른 경우에 동등한 서비 스를 제공받을 수 있도록 구현해야 하는 것으로 다양한 웹브라우저에서 동등한 서비스를 제공받을 수 있도록 해야 한다. 웹 호환성 확보를 위해서는 웹 페이지마다 표준 문법을 준수하여 구현해야 한다. 모바일의 UI 구축 시 웹 서비스로의 호환성을 확보한다. 웹사이트를 구축하는 경우 모바 일 기기의 화면크기 및 운영체제와 무관하게 동등한 서비스를 제공해야 한다. 2. 웹 접근성 고려한 표준 수립 웹사이트 구축 및 운영 시 전자정부서비스 웹 호환성 준수지침을 적용하여 항목별 진단지 표를 기준으로 진단기준과 진단방법을 고려하여 표준을 수립한다. UI 구현 개발 관..
UI 구현 표준의 정의 UI 구현 표준은 사용자의 사용성 향상과 개발자의 개발 효율성을 높이기 위하여 프로젝트 초기에 정의한다. 화면 간에 공통으로 구성되는 화면구성(예: 내비게이션, 고정영역, 가변 영역) 및 화면요소(예: 버튼, 폰트 등의 크기 및 색상)에 대하여 최소한으로 정의해 두는 공통 규격이다. UI 구현 표준의 구성 요소 1. UX 원칙 스템 및 제품의 UX는 사용자 제어가 가능하고, 사용자와 편리한 상호작용이 가능하며, 사용자의 시행착오를 최소화할 수 있는 원활한 사용성을 제공하고, 일관성 높은 인터페이 스를 제공 시 직관적이고 예측 가능한 기능 및 서비스 제공이 가능해야 한다.. (1) 사용자 제어 가능한 인터페이스 (2) 편리한 상호작용 (3) 사용자의 원활한 사용성 (4) 일관성 높은..
검토 대상 UI에 대한 이해 1. 검토 대상 UI의 서비스 목적 파악 목표 서비스의 사용 목적을 이해하기 위하여 타깃 사용자층(예: 연령, 성별)과 서비스 용 도(예: 전자상거래사이트, 검색포털)를 파악함으로써 UI의 검토 기준을 적절하게 수립한다. 2. UI의 주요 검토 대상에 대한 이해 (1) 레이아웃 한정된 UI 공간 내에서 각종 UI 리소스들(예: 버튼, 시스템 바, 텍스트 등)을 일관성과 가시성을 유지하면서 효율적으로 배치하는 화면 구조를 레이아웃이라고 한다. UI는 시스템을 시각적으로 바라봤을 때 좌 상단, 우 하단 부분을 보면서 전체적인 크 기를 인식한다. 그 다음으로 여백, 폰트, 색상, 위치, 배열 등을 인식한다. 레이아웃의 구조는 구현되는 시스템의 목적에 따라 구분된다. (가) Cent..
UI 디자인 가이드에 대한 이해 1. UI 디자인 가이드의 필요성 UI 디자인 시, UI에 적용되는 프로젝트 및 서비스를 정확하게 이해해야 사용자의 요구에 부합하고 만족도 높은 결과물을 만들어 낼 수 있다. 이때, 디자이너가 설계한 이미지와 구 성을 개발자가 이해할 수 있는 형태의 문서로 개발자에게 전달해야 일관성 있고 사용자 만족도가 높은 최종 결과물이 나올 수 있으므로, 상세하고 일관된 UI 디자인 가이드가 필 요하다. 2. UI 디자인 가이드의 개요 1) 정의 UI 디자인 가이드란, 디자이너가 프로젝트 및 서비스에 맞추어 확정한 디자인 내용을 개발자에게 이관하기 위하여 컬러, 폰트, 이미지, 좌표, 크기 등의 디자인 리소스를 문 서화하여 제공하는 문서이다. 대부분 그래픽 디자인과 관련된 사항을 정의..
UI 디자인이 성공하기 위한 모델링 UX에서 리서치 결과를 토대로 모델링을 한다는 의미는 결국 사용자 저변에 깔려 있는 마 음속 모형을 드러내 보인다는 얘기와 일맥상통한다. 사용자가 자신들의 마음속에 가지고 있는 대사에 대한 모형을‘멘탈모델’이라고 한다. 다음의 3가지 모델로 구분된다. 1. 구조모형 • 대상의 구체적인 세부요소를 머릿속에서 묘사하는 모형 • 주로 정보의 분류나 구조적인 형태로 표현된다. • 사용자유형별로 구조모형에 큰 차이가 존재하기 때문에 구조모형은 Persona를 통해서 표현될 수 있다 2. 기능모형 • 사람들이 제품/서비스를 어떻게 이용하는지에 대한 모형 • 과거에 해당 제품/서비스를 이용했던 맥락에 많은 영향을 받음 • 초기상태, 목표상태, 조작자, 제한조건과 같은 문제공간을 통..