Byseul

1. UI 시나리오 문서사용자 인터페이스 기능 구조, 대표 화면, 화면 간 인터랙션의 흐름, 예외처리 등 문서로 정리한 것순차적으로 묘사UI 설계자 or 인터랙션 디자이너가 UI 시나리오 문서 작성 2. UI 시나리오 문서 작성 원칙UI의 기능과 작동 방식을 한 눈에 이해할 수 있도록 구체적계층(Tree)구조 또는 플로우차트(Flowchart) 표기법으로 작성인터랙션 흐름을 정의, 화면산의 인터랙션 순서(Sequence), 분기(Branch), 조건(Condition), 루프(Loop) 등 명시예외 상황의 다양한 케이스 정의UI 일반 규칙을 지키면서 기능별 상세 기능 시나리오 정의 3. UI 시나리오 문서 작성을 위한 일반 규칙주요 키의 위치와 기능공통 UI 요소기본 스크린 레이아웃기본 인터랙션 규칙공통..

사용자가 시스템을 통해 원하는 목표를 얼마나 효과적으로 달성할 수 있는가에 대한 척도시스템 문제점을 찾고 개선방향 제시사용자 모형과 개발자 모형 간 차이를 최소화 해야 함 1. 실행 차를 줄이기 위한 UI 설계 원리 검토1) 사용 의도 파악불필요한 기능, 중복되는 기능 파악2) 행위 순서 규정순서 세분화, 임의로 행위 순서 변경가능한 친숙하도록 설계3) 행위의 순서대로 실행행위 순서대로 실행할 때 어려움이 없어야 함과도한 상호작용 피함의도한 행위를 효율적으로 실행할 수 있도록 피드백, 취소기능, 디폴트 값을 적절하게 설정 2. 평가 차를 줄이기 위한 UI 설계 원리 검토수행한 키 조작의 결과를 사용자가 빠르게 지각하도록 유도키 조작으로 변화된 시스템의 상태를 사용자가 쉽게 인지하도록 유도사용자가 가진 원..

UI 설계 구체화하여 작성하는 문서로, 상세 설계 전에 대표적인 화면들을 설계기획자, 개발자, 디자이너의 원활한 의사소통을 위해 작성 UI 설계서 표지 → UI 설계서 개정 이력 → UI 요구사항 정의서 → 시스템 구조 → 사이트 맵 작성 → 프로세스 정의서 → 화면 설계1. UI 설계서 표지 작성프로젝트명 및 시스템명 2. UI 설계서 계정 이력수정될 대마자 정리0.1씩 높임 3. UI 요구사항 정의서 작성요구사항의 UI 적용 여부 표시 4. 시스템 구조 작성UI 요구사항과 UI 프로토타입을 기초하여 전체 시스템 구조 설계 5. 사이트 맵 작성시스템 구조를 바탕으로 사이트에 표시할 콘텐츠를 한 눈에 알아볼 수 있도록 메뉴별로 구분하여 설계사이트 맵 상세 내용을 표 형태로 작성 6. 프로세스 정의서 작성..

요구사항을 기반으로 실제 동작하는 것처럼 만든 동적인 모형으로 테스트 가능최대한 간단하게 만듦일부 핵심적인 기능만 제공 → 필요한 기능은 반드시 포함요구사항이 모두 반영될 때까지 지속적으로 개선하고 보완실제 사용자를 대상으로 테스트1. UI 프로토타입 장·단점장점사용자를 설득하고 이해시키기 쉬움개발 시간 단축사전에 오류 발견단점모든 요구사항 반영으로 반복적인 개선 및 보안 대문에 작업시간 증가, 필요 이상으로 자원 소모부분적 프로토타이핑으로 중요한 작업이 생략될 수 있음 2. 프로토타입 종류1) 페이퍼 프로토타입 (Paper Prototype)아날로그적, 스케치, 그림, 글제작기간 짧을 경우, 제작 비용 적을 경우, 업무 협의가 빠를 경우비용 저렴, 회의 중 생성 가능, 즉시 변경 가능테스트 부적당, 상..

> 소프트웨어의 기능, 성능, 만족도 등 소프트웨어에 대한 요구사항이 얼마나 충족하는가를 나타내는 소프트웨어 특성의 총체1. ISO/IEC 9126소프트웨어 품질 특성과 평가를 위한 국제 표준요구사항을 기술하거나 개발중인, 개발완료된 소프트웨어 품질 평가에 사용기능성, 신뢰성, 사용성, 효율성, 유지보수성, 이식성 2. ISO/IEC 25010ISO/IEX 9126 개정 (호환성, 보안성을 강화)기능 적합성, 성능 효율성, 호환성, 사용성, 신뢰성, 보안성, 유지보수성, 이식성💡 기타ISO/IEC 12119 : ISO/IEC 9126 준수한 품질로 데스트 절차를 포함해 규정ISO/IEC 14598 : 품질의 측정과 평가에 필요 정차를 규정. 개발자, 구매자, 평가자 별로 수행해야할 제품 평가 활동을 규..

목표 정의 → 활동 사항 정의 → UI 요구사항 작성1. 목표 정의인터뷰 진행한 후 의견이 수렴된 비즈니스 요구사항을 정의인터뷰는 개별적으로 진행가능한 많은 사람과 다양한 의견 수렵하되, 다수의 의견으로 개인의 중요한 의견을 놓치지 않도록 주의한 시간을 넘지 않도록반드시 사용자 리서치를 시작하기 전 (불만을 알기전에 시행) 2. 활동 사항 정의조사한 요구사항을 토대로 앞으로 해야할 활동 사항을 정의사용자와 회사의 비전을 일치시키는 작업필요한 예산과 일정을 결정UI 디자인의 방향 제시프로젝트에 대해 정확히 이해하고 협의하도록사업 전략 및 목표, 프로세스의 책임자 선정, 회의 일정 및 계획 작성, 우선순위의 선정, 개별적인 단위 업무를 구분 3. UI 요구사항 작성요구사항을 검토하고 분석해 UI 개발 목적에..

1. 와이어프레임 (Wireframe)기획 단계 초기에 제작페이지에 대한 개략적인 레이아웃이나 UI 요소 등 뼈대 설계각 페이지 영역 구분, 콘텐츠, 텍스트 배치 등 화면단위로 설계레이아웃을 협의하거나 현재 진행 상태를 공유하기 위해 사용손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 2. 목업 (Mockup)와이어프레임보다 좀 더 실제화면과 유사하게 만든 정적인 모형시각적으로만 구성요소를 배치하는 것, 실제로 구현되지 않음파워 목업, 발사믹 목업 3. 스토리보드 (Story board)와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름을 추가한 문서최종적으로 참고하는 작업 지침서정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의 등 서비스 구축을 위한 모든 정보제목, 작성자, UI화..

1. UI 표준전체 시스템에 포함된 모든 UI에 공동적으로 적용될 내용화면 구성이나 화면 이동 등 2. UI 지침UI요구사항, 제약사항 등 UI 개발 과정에서 꼭 지켜야 할 공통 조건💡 웹 3요소웹 표준 (Web Standards) : 웹에서 사용되는 규칙, 기술 (HTML, JS)웹 접근성 (Web Accessibility) : 누구나, 어떤 환경에서도 접근 보장웹 호환성 (Cross Browsing) : 하드웨어, 소프트웨어가 다른 환경에서도 모든 이용자에게 서비스 제공 3. 한국형 웹 콘텐츠 접근성 지침 (KWCAG; Korean Web Content Accessibility Guidelines)인식의 용이성대체 텍스트멀티미디어 대체 수단명료성운용의 용이성키보드 접근성충분한 시간 제공광과민성 발작..

1. 사용자 인터페이스(UI; User Interface)의 개요사용자와 시스템 간의 상호작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어💡 사용자 인터페이스의 세 가지 분야정보 제공, 전달을 위한 물리적 제어에 관한 분야콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야 2. ⭐ 사용자 인터페이스 특징변경이 가장 많이 발생 (사용자 만족도)편리성과 가독성 ↑, 작업시간 단축, 업무에 대한 이해도 ↑최소한의 노력으로 원하는 결과 얻을 수 있게 함사용자 중심의 상호작용수행결과 오류 ↓정보 제공자와 공급자 간의 매개 역할소프트웨어 아키텍처를 반드시 숙지해야 함 3. 사용자 인터페이스 구분종류설명CLI(Command LineInterface..

1. UML (Unufued Modeling Langusge) 개요개발자와 고객, 개발자와 개발자 상호 간의 의사소통이 원활하게 해주는 객체지향 모델링 언어구성요소 : 사물(Things), 관계(Relationships), 다이어그램(Diagram)1) 사물 (Things)모델을 구성하는 기본요소사물내용구조 사물(Sructual Things)- 개념적, 물리적 요소를 표현- 클래스(Class), 유스케이스(Use Case), 컴포넌트(Component), 노드(Node) 등행동 사물(Behavioral Things)- 시간과 공간에 따른 요소들의 행위를 표현- 상호작용(Interaction), 상태 머신(State Machine) 등그룹 사물(Grouping Things)- 요소들을 그룹으로 묶어서 표현..