화면설계 (사용자인터페이스, UI, 요구사항)

김정연·2024년 1월 27일
0
post-thumbnail

화면 설계를 왜 하는가?

세미프로젝트를 진행할 당시 코드를 구현하면서 화면도 구상하면 되겠지~ 라는 단순한 생각에 화면설계를 메인화면만 하고, 나머지는 대충대충 지나간 경험이 있다. 그 때 강사님께서 화면도 빨리 마무리하고, 요구사항 정의서도 빨리 마무리하라고 재촉하셔서 팀원들과 두가지를 하면서 많은 것을 느꼈다.

첫번째

화면설계를 하면서 css 통합하고, 전체적인 분위기를 맞추며 이미지를 보고 만들 수 있기 때문에 구현 시간이 줄어든다.

두번째

요구사항 정의서를 구체적으로 작성하며 기능의 우선순위를 상중하로 나누고, erd 설계도 다시 돌아보며 설계를 조금 더 탄탄히 할 수있다.

오늘은 정처기의 화면설계 파트를 공부했다!

사용자 인터페이스

사용자 인터페이스는 UI , UserInterface 라고하는데 사용자와 시스템간의 상호작용이 원활하게 이루어지도록 도와주는 장치 혹은 소프트웨어이다.

  • 사용자의 만족도에 가장 큰 영향을 미치는 요소로 소프트웨어 영역에서는 변경이 가장 많이 일어난다.
  • 편리성과 가독성을 높임으로 작업시간을 단축시키고 업무 이해도를 높여준다.
  • 설계를 사용자 중심으로 하여 사용자 위주로 상호작용된다.
  • 오류를 줄인다.
  • 사용자의 막연한 작업 기능에 대해 구체적인 방법을 제시한다.
  • 정보 제공자와 정보 이용자 간의 매개 역할을 한다.

인터페이스 구분

CLI (Command Line Interface)

명령과 출력이 텍스트 형식

GUI (Graphical User Interface)

아이콘, 메뉴를 메우스로 선택하는 그래픽 환경

NUI (Natural User Interface)

사용자의 말이나 행동으로 기기 조작

VUI (Voice User Interface)

사람의 음성으로 기기 조작

OUI (Organic User Interface)

모든 사물과 사용자간의 상호작용을 위한 인터페이스로 하드웨어 분야에서 사물 인터넷, 가상현실, 증강현실 , 혼합현실등과 함께 대두 되고 있음

인터페이스의 기본 원칙 & 설계 지침

  • 직관성, 유효성, 학습성, 유연성
  • 사용자 중심, 사용성, 일관성, 단순성, 결과 예측 가능, 가시성 , 심미성, 표준화, 접근성, 명확성, 오류발생해결

인터페이스 개발 시스템의 기능

  1. 사용자의 입력을 검증
  2. 에러처리와 에러 메시지 표시
  3. 도움과 프롬프트 제공

UI 설계 도구

종류는 와이어프레임, 목업, 스토리보드, 프로토타입, 유스케이스가 있다.
이번 파이널 프로젝트 때 내가 직접 화면을 설계한 내용을 생각하며 공부했다.

와이어프레임

와이어프레임은 기획 단계 초기에 제작하는 것인데 화면을 어떻게 구성할것인지 레이아웃, UI를 제작한다.
각 페이지의 영역 구분, 콘텐츠, 텍스트 배치를 정한다. 보통 파워포인트, 키노트, 스케치, 일러스트, 포토샵, 피그마를 활용한다.

목업

목업은 디자인, 사용방법, 평가 등을 위해 실제 화면같이 만드는 것이다. 실제 구현은 하지 않는다.

스토리 보드


와이어 프레임에서 조금 더 상세하게 설명하고, 페이지 간의 이동 흐름을 추가한 문서이다.
디자이너와 개발자가 최종적으로 참고하는 내용이고, 정책, 프로세스, 콘텐츠, 기능 정의 등 모든 정보가 들어가 있다. 디스크립션은 화면설명, 로직, 분기처리 , 예외처리 등을 작성한다.

  • 보통계층 주고 혹은 플로차트 표기법으로 작성
  • 순서, 분기, 조건, 루프 명시

프로토 타입


프로토 타입은 와이어 프레임에 인터랙션(사용자의 마우스 움직임)을 적용하여 실제 구현된 것 처럼 테스트 하는 것이다. 서비스 이해에 큰 도움이 된다.

유스케이스

유스케이스는 사용자 입장의 요구사항과 목표를 달성하기 위해 기술한다. 자연어로 요구사항을 구조적을 표현하고 일반적으로 다이어그램 형식으로 묘사한다.

품질 요구사항

소프트웨어의 기능, 성능, 만족도 등 요구사항이 얼마나 충족 되었는가이다.

ISO/IEC 9126

  • 소프트웨어의 품질 특성과 평가를 위한 표준 지침이고 국제 표준이다.
  • 품질에 대한 요구사항을 기술하거나 개발중, 개발 완료된 소프트웨어의 품질 평가에 사용
  • 2011년에 호환성과 보안성을 강화하여 ISO/IEC 25010으로 개정
  • 기능성, 신뢰성, 사용성, 효율성, 유지 보수성, 이식성

ISO/IEC 25010

  • 개발자, 구매자, 평가자 별로 수행해야 할 평가를 규정함
  • 기능 적합성, 성능 효율성, 사용성, 신뢰성, 보안성, 유지보수성, 이식성

기능성 (Functionailty)

소프트웨어가 사용자의 요구사항을 정확하게 만족하는 기능을 제공하는지

  • 적절성/적합성 : 적절한 기능 제공
  • 정밀성/정확성 : 정확하게 산출
  • 상호 운용성 : 다른 시스템과 함께 작업하는 능력
  • 보안성 : 정보에 대한 권한을 허용&차단
  • 준수성 : 규정을 준수

신뢰성

소프트웨어가 요구된 기능을 정확하고 일관되게 오류 없이 수행

  • 성숙성 : 결함으로 인한 고장을 피해가는 능력
  • 고장 허용성 : 고장시에서도 규정된 성능 수준을 유지할 수 있는 능력
  • 회복성 : 고장났을 때 다시 회복하고 데이터를 복구하는 능력

사용성

사용자가 쉽게 배울 수 있고, 다시 사용하고 싶으 정도

  • 이해성 : 적합성, 사용방법을 사용자가 이해
  • 학습성
  • 운용성 : 사용자가 직접 제어
  • 친밀성 : 사용자가 다시 사용하고 싶게

효율성

사용자가 요구하는 기능을 한정된 자원으로 얼마나 빨리 처리하는지

  • 시간 효율성
  • 자원 효율성

유지보수성

환경의 변화, 새로운 요구사항에서 소프트웨어를 개선하거나 확장할 수 있는지

  • 분석성, 변경성, 안정성, 시험성

이식성

다른 환경에서 쉽게 적용할 수 있는지

  • 적용성, 설치성, 대체성, 공존성

HCI (Human Computer Interaction or Interface)

사람이 시스템을 편리하고 안전하게 사용할 수 있도록 연구개발하는 학문

  • 최적의 사용 경험을 위해
  • 어떤 제품이 좋은지, 어떻게 하면 좋은 제품을 만드는지 연구

UX

사용자가 시스템이나 서비스를 이용하며 느끼는 총체적인 경험

  • 사용자의 삶의 질 향상 , 느끼는 만족이나 감정을 중시
  • 주고나성, 정황성, 총체성

감성공학

  • 사용자의 감성에 맞게 설계 및 제작
  • 인간의 삶을 편리하고 안전하며 쾌적하게 만드는 것이 목적
  • 기반 기술, 구현 기술, 응용 기술

파이널 프로젝트 때 조장님이 문서작업을 중요하게 생각하셔서 이것 저것 많이 경험해봤다.
다음 프로젝트 때는 좀 더 꼼꼼하게 설계할 예정이다.

참고문헌 : 시나공 정보처리기사 필기

profile
백엔드 개발자

0개의 댓글