01 UI 요구사항 확인
1. UI 요구사항 확인 ⭐️⭐️⭐️
UI: 사용자와 시스템 사이에서 의사소통 할 수 있도록 고안된 물리적, 가상의 매개체
UX: 제품과 시스템, 서비스 등을 사용자가 직/간접적으로 경험하면서 느끼고 생각하는 총체적 경험
UI 유형
- CLI(Command Line Interface): 명령어
- GUI(Graphical User Interface): 그래픽 환경 기반 (마우스, 전자펜)
- NUI(Natural User Interface): 신체 부위를 이용 (터치, 음성)
- OUI(Organic User Interface): 현실에 존재하는 모든 사물이 입출력장치로 변화
UI 설계 원칙
- 직관성: 누구나 쉽게 이해
- 유효성: 정확하고 완벽하게 사용자의 목표 달성
- 학습성: 모두가 쉽게 배우고 사용
- 유연성: 사용자의 인터랙션을 최대한 포용, 실수 방지
UI 요구사항: 사용자가 정보시스템을 구축하여 얻고자 하는 최종 목적의 기준
UI 품질 요구사항 (ISO/IEC 9126 기반)
- 기능성: 실제 수행 결과와 품질 요구사항과의 차이 분석
- 적절성, 정밀성, 상호 운용성, 보안성, 호환성
- 신뢰성: 작동되는 시간 동안 의도하는 기능 수행을 보증
- 성숙성, 고장 허용성, 회복성
- 사용성: 사용자와 컴퓨터 사이에 발생하는 어떠한 행위를 정확하고 쉽게 인지
- 이해성, 학습성, 운용성
- 효율성: 할당된 시간에 한정된 자원으로 빨리 처리
- 시간 효율성, 자원 효율성
- 유지보수성: 요구사항 개선과 확장
- 분석성, 변경성, 안정성, 시험성
- 이식성: 다른 플랫폼에 쉽게 적용
- 적용성, 설치성, 대체성
2. UI 표준 ⭐️
3. UI 지침 ⭐️
4. 스토리보드 ⭐️⭐️
스토리보드: 정책, 프로세스, 기능 정의, 데이터 연동, 와이어 프레임 정보가 수록된 문서
UI 화면 설계 구분
- 와이어 프레임: 화면 단위의 레이아웃을 설계하는 작업
- 스토리보드: 서비스 구축을 위한 모든 정보가 담겨 있는 설계 산출물
- 프로토타입: 와이어 프레임 또는 스토리보드에 동적 효과 적용
스토리보드 작성 절차
- 전체 개요 작성
- 서비스 흐름 작성
- 스타일 확정
- 메뉴별 화면 설계도 작성 및 상세설명
- 추가 관련 정보 작성
5. UI 프로토타입 제작 및 검토 ⭐️
02 UI 설계
1. UI 설계를 위한 UML ⭐️⭐️⭐️
UML: 객체지향 소프트웨어 개발 과정에서 사용되는 모델링 기술과 표준화된 범용 모델링 언어
UML 구성요소
- 사물
- 관계
- 다이어그램
UML 다이어그램
구조적 다이어그램
- 클래스
- 객체
- 컴포넌트
- 배치
- 복합체 구조
- 패키지
행위적 다이어그램, 동적 다이어그램
- 유스케이스
- 시퀀스
- 커뮤니케이션
- 상태
- 활동
- 타이밍
클래스 다이어그램 구성 요소
- 클래스
- 속성
- 연산,메서드
- 접근 제어자
유스케이스 다이어그램 구성 요소
- 유스케이스
- 액터
- 시스템
- 시나리오
- 이벤트 흐름
시퀀스 다이어그램 구성 요소
- 객체
- 생명선
- 실행
- 메시지
패키지 다이어그램 구성 요소
- 패키지
- 의존 관계
활동 다이어그램 구성 요소
- 시작점
- 전이
- 액션/액티비티
- 종료점
- 조건 노드
- 병합 노드
상태 다이어그램 구성 요소
- 상태
- 시작 상태
- 종료 상태
- 전이
- 이벤트
- 전이 조건
커뮤니케이션 다이어그램 구성 요소
- 액터
- 객체
- 링크
- 메시지
컴포넌트 다이어그램 구성 요소
- 컴포넌트
- 인터페이스
- 의존 관계
2. UI 흐름 설계 ⭐️
3. UI 상세설계 ⭐️
4. UI 설계 도구 ⭐️
기억하기 위해 기록하는 개발로그👣