[정보처리기사-실기] 2장 화면 설계

화면 설계

💡

참고 블로그 https://dustink.tistory.com/153 https://narup.tistory.com/174 https://yslab.kr/74

순서 CH01 UI 요구사항 확인 CH02 UI 설계

<CH01 UI 요구사항 확인>

UI(User Interface)란?

사용자와 시스템 사이에서 의사소통 할 수 있도록 고안된 매개체

유형

• CLI(Command Line Interface) : 텍스트 명령어로 조작하는 인터페이스
• GUI(Graphical User Interface) : 그래픽 환경을 기반으로 하여 보다 직관적인 인터페이스
• NUI(Natural User Interface) : 신체 일부분을 사용하는 인터페이스
• OUI(Organic User Interface) : 모든 사물이 입출력장치로 변화할수 있는 인터페이스

UI 설계 원칙

• 직관성 : 한눈에 쉽게 이해할 수 있어야 함
• 유효성 : 사용자의 목적을 정확하고 완벽하게 달성해야 함
• 학습성 : 모두가 쉽게 배울 수 있어야함
• 유연성 : 사용자 요구사항 최대한 수용, 실수 최소화하도록 함

UI 설계 지침

사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결

UI 품질 요구사항 (ISO/IEC 9126 기반)

• 기능성 : 실제 수행 결과와 품질 요구사항과의 차이가 얼마나 나는가?
  • 적절성, 정밀성, 상호 운용성, 보안성, 호환성
• 신뢰성 : 작동되는 시간동안 고장없이 기능을 수행할 수 있는가?
  • 성숙성, 고장 허용성, 회복성
• 사용성 : 사용자와 컴퓨터 사이에 발생하는 일을 정확하고 쉽게 인지할 수 있는가?
  • 이해성, 학습성, 운용성
• 효율성 : 제한된 시간과 자원으로 얼마나 빠르게 처리가능한가?
  • 시간 효율성, 자원 효율성
• 유지보수성 : 요구사항을 개선,확장하는데 용이한가?
  • 분석성, 변경성, 안정성, 시험성
• 이식성 : 다른 플랫폼에서도 별도의 작업 없이 적용가능한가?
  • 적용성, 설치성, 대체성

UI 개발 분석 기법

• 3C 분석 : 고객(Customer), 자사(Company), 경쟁사(Competitor)를 비교 분석하여 어떻게 차별화해 경쟁에서 이길 것인가를 분석함
• SWOT 분석 : Strength(강점), Weakness(약점), Opportunity(기회), Threat(위협) 요인을 규정하고, 경영 전략을 수립함
• 시나리오 플래닝 : 상황 변화를 예측, 다양한 시나리오를 설계 → 불확실성 제거
• 사용성 테스트 : 사용자가 제품 사용하면서 시나리오에 맞춰 과제를 수행 → 질문에 응답
• 워크숍 : 특정 주제에 대한 새로운 지식, 기술, 아이디어, 방법을 서로 교환하고 검토하는 세미나

UI 화면 설계 도구

• 와이어프레임(Wireframe): 화면 단위의 레이아웃 설계ex) 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵

와이어프레임

• 목업(Mockup) : 디자인, 사용방법 설명, 평가를 위해 와이어 프레임보다 좀 더 실제 화면과 유사하게 제작한 정적인 형태의 모형, 시각적으로만 구성 요소를 배치파워 목업, 발사믹 목업
• 스토리보드(Story board) : 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름(인터랙션)을 추가한 문서, 디자이너와 개발자가 최종적으로 참고하는 구체적인 작업 지침서ex) 파워포인트, 키노트 스케치 ,Axure

스토리보드

• 프로토타입(Prototype) : 정적인 화면(와이어프레임, 스토리보드)에 동적 효과를 적용하여 시뮬레이션 할 수 있는 모형ex) HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐

<CH02 UI 설계>

UML(Unified Modeling Language)

객체 지향 소프트웨어 개발 과정에서 산출물을 명세화, 시각화, 문서화할 때 사용되는 모델링 기술과 방법론 통합 → 범용 모델링 언어

특징

• 가시화 언어
• 구축 언어
• 명세화 언어
• 문서화 언어

UML 다이어그램

구조적 다이어그램(정적 다이어그램)

• Class (클래스 다이어그램)

클래스 다이어그램

 

• Object (객체 다이어그램)

객체 다이어그램

 

• Component (컴포넌트 다이어그램)
• Deployment (배치 다이어그램)

배치 다이어그램

 

• Composite Structure (복합체 구조 다이어그램)
• Package (패키지 다이어그램)

패키지 다이어그램

 

행위적 다이어그램(동적 다이어그램)

• Usecase (유스케이스 다이어그램)

유스케이스 다이어그램

 

• Sequence (시퀀스 다이어그램)

시퀀스 다이어그램

 

• Communication(커뮤니케이션 다이어그램)

커뮤니케이션 다이어그램

 

• State(상태 다이어그램)

상태 다이어그램

 

• Activity(활동 다이어그램)

활동 다이어그램

 

• Timing(타이밍 다이어그램)