UI 설계!!

💡 UI 설계 프로세스

프로세스	설명
문제정의	∙ 시스템의 목적을 수립하고, 최적화하기 위하여 해결해야 할 문제를 정의
사용자 모델 정의	∙ 시스템을 사용할 사용자의 특성을 파악하여 사용자 모델의 정의 ∙ 사용자 모델은 사용자의 컴퓨터 소프트웨어와 작업에 대해 지식 정도에 따라 초보자, 중급자, 숙련자로 분류
작업 분석	∙ 해결해야 할 문제를 정의하고 사용자 특징을 세분화하는 작업 분석 수행
컴퓨터 오브젝트 및 기능 정의	∙ 분석한 작업을 컴퓨터의 어떤 사용자 인터페이스를 통해 표현할 것인지 정의
사용자 인터페이스 정의	∙ 작업 모델을 기반으로 작업자가 예측한 대로 동작하도록 사용자 인터페이스를 정의 ∙ 사용자 인터페이스 설계에서는 컴퓨터나 작업 수행 방법에 대해 상호 작용을 하는 오브젝트(마우스, 키보드 등)를 선택, 시스템의 상태를 명확히 함
디자인 평가	∙ 설계한 인터페이스가 분석한 작업에 맞게 설계가 되었는지, 사용자의 능력이나 지식에 적합한지, 사용자가 쓰기 쉽고 편리한지 등을 평가 ∙ GOMS, 휴리스틱 등의 사용성 공학의 평가 방밥론 활용

📍 GOMS 

• Goals(목표), Operators(행위), Methods(방법), Selection rules(선택 규칙)의 약자이다.
• GOMS Model은 사용자가 시스템이나 서비스를 사용하면서 어떻게 이해하고 배우며 사용하는지에 대해 예측함으로써 이를 수행하기 위해 소요되는 시간이나 학습시간 등을 평가하는 방법이다.

📍 휴리스틱

• 경험에 기반하여 문제를 해결 또는 학습하거나 발견하는 기법이다.

 

💡 UI 흐름 설계

프로세스	설명
화면에 표현되어야 할 기능 작성	∙ 기능적 요구사항 검토 (입출력 데이터 파악, 저장 데이터 분석, 수행 연산 분석), 비기능적 요구사항 정의 (처리속도, 보안성 등 시스템 성능)
화면의 입력 요소 확인	∙ 화면에 표현되어야 할 기능 확인 ∙ 화면의 입력 요소 확인 ∙ 추가적으로 필요한 화면 요소 확인 ∙ 기능 표현을 위해 필요한 페이지 확인 ∙ 각 화면 간 이동과 흐름에 대한 확인
UI 요구사항을 기반으로 유스케이스 설계	∙ UI 요구사항을 기반으로 액터별 시나리오 작성 ∙ 액터의 상호 작용을 기반으로 액터를 그룹화, 세분화 ∙ 유스케이스 설계(각 입력 요소들의 형태와 입력 방법 구상, 각 화면 요소들의 배치 구상)
기능 및 양식 확인	∙ 입력 박스, 콤보 박스, 라디오 버튼, 체크박스를 확인하고, 규칙 정의

 

📍액터(Actor)

• 시스템 외부에 있고 시스템과 상호 작용을 하는 사람 또는 시스템이다.

📍유스케이스(Usecase)

• 시스템이 액터에게 제공해야 하는 기능으로 시스템 요구사항이자, 사용자 입장에서 바라본 시스템의 기능이다.

💡 UI 설계 도구

• UI 설계 도구는 사용자와 시스템 사이에 의사소통할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI의 설계를 지원하는 도구이다.
• UI 설계에서 비용 절감 목적으로 실제 제품이 나오기 전에 만드는 모형인 목업을 활용한다.

📍 목업(Mockup)

• 디자인, 사용방법 설명, 평가 등을 위해 실제 화면과 유사하게 만든 정적인 형태의 모형이다.
• 목업은 시각적으로만 구성요소를 배치하는 것으로 일반적으로 실제로 구현되지는 않는다.

🪄 UI 개발 단계별 활용 가능한 설계 도구

• 일반적인 UI 개발 프로세스는 분석, 설계, 구현의 절차를 거쳐 요구사항에 부합하는 화면의 구현으로 이루어진다.

프로세스	UI 디자이너	업무전문가/개발자	도구
분석	UI 표준 설계	화면 프로토타이핑 화면 정의 보고서 정의	UI 패턴 도구 UI 모델링 도구
설계	디자인 시안 제작 화면 템플릿 제작	화면 설계 보고서 설계 응용 아키텍처 구현	UI 설계 도구
구현	-	화면 개발	프로토타이핑 도구