[정보처리기사] 화면 설계 : UI 요구사항 확인(2)

 

2️⃣ UI 지침

☆

 

---

(1) UI 지침(Guideline) 개념

 

• UI 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야할 세부사항을 규정하는 가이드라인

---

(2) 소프트웨어 개발 단계별 UI 지침

 

1. 목표 정의

 

• 성공적인 수행을 위해 내부 관계자에 UI 개발 필요성 및 목표를 공유하고 개발 범위를 수립하기 위한 활동

< 목표 정의를 위한 주요 기법 >

기법	설명
3C 분석	고객(Customer), 경쟁하고 있는 자사(Company), 경쟁사(Competitor)를 비교하고 분석하여 자사를 어떻게 차별화해서 경쟁에서 이길 것인가를 분석하는 기법
SWOT 분석	기업의 내부 환경과 외부 환경을 분석하여 Strength(강점), Weakness(약점), Opportunity(기회), Threat(위협) 요인을 규정하고 이를 토대로 경영 전략을 수립하는 방법
시나리오 플래닝 (Scenario Planning)	불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 설계하는 방법으로 불확실성을 제거해 나가려는 방법
워크숍 (Workshop)	소집단 정도의 일원으로 특정 문제나 과제에 대한 새로운 지식, 기술, 아이디어, 방법들을 서로 교환하고 검토하는 연구회 및 세미나

 

---

2. 프로젝트 계획

 

• 사용자 분석 및 최신 트렌드, 경쟁사 동향을 통해 파악된 핵심 기능을 토대로 UI 개발 프로젝트 계획을 수립함

< 프로젝트 계획을 위한 주요 기법 >

기법	설명
프로파일(Profile)	어떤 시스템을 일정 범위 내에서 한정적으로 특징을 지우는 그룹화된 값
리서치(Research)	지식에 대한 탐구를 기반으로 한 인간 활동이며, 이미 존재하던 지식의 발견, 해석, 정정, 재확인 등에 초점을 맞추는 체계적인 조사

 

---

3. 요구사항 정의

 

• 페르소나 정의, 콘셉트 모델 정의, 사용자 요구사항 정의, UI 컨셉션 단계를 통해 사용자 요구사항을 도출할 수 있음

< 요구사항 정의를 위한 주요 기법 >

기법	설명
페르소나(Persona)	잠재적 사용자의 다양한 목적과 관찰된 행동 패턴을 응집시켜 놓은 가상의 사용자
브레인스토밍 (Brain Storming)	집단적 창의적 발상 기법으로 집단에 소속된 인원들이 자발적으로 자연스럽게 제시된 아이디어 목록을 통해서 특정한 문제에 대한 해답을 찾고자 하는 회의 기법
요구사항 매트릭스 (Requirement Matrix)	다양한 경로를 통해 수집된 직접적인 요구사항을 검토하여, 페르소나(Persona)의 목적을 기준으로 데이터 요구, 기능 요구, 제품 품질, 제약 요인 기반으로 만든 요구사항 표
정황 시나리오 (Contextual Scenario)	요구사항 정의에 사용되는 초기 시나리오를 말하며, 높은 수준, 낙관적이면서도 발생 상황에서의 이상적인 시스템 동작에 초점을 맞추는 시나리오

 

---

4. 설계 및 구현

 

• UI 설계 사안을 토대로 실제 설계 및 구현을 위해서 모든 화면에 대한 UI 상세 설계 단계를 진행함
• UI 화면 디자인에 활용될 레이아웃, 컬러 패턴, 타이포 그래픽, 화면 디자인 요소 등을 정의함

< 설계 및 구현을 위한 주요 기법 >

기법	설명
UI 시나리오 문서	사용자 인터페이스의 기능 구조, 대표화면, 화면 간 인터랙션 흐름, 다양한 상황에서의 예외 처리 방식 등을 정리한 문서

 

---

5. 테스트

 

• 테스트 계획 수립 단계를 거쳐 실제 사용성 테스트를 수행함

< 테스트를 위한 주요 기법 >

기법	설명
사용성 테스트 (Usability Test)	• 사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제를 수행한 후, 질문에 답하도록 하는 테스트 • 현 제품에 대한 사용자 요구사항과 행동을 관찰할 수 있는 진단 방법 • 결과를 분석하여 객관적이고 정량화된 값을 도출/개선

 

---

 

(3) UI 화면 설계

 

• UI 화면 설계를 위해서는 스토리보드, 와이어 프레임, 프로토타입이 활용됨

스토리보드, 와이어프레임, 프로토타입 관계도

구분	설명	도구
와이어프레임(Wireframe)	이해관계자들과의 화면 구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업	파워포인트, 키노트, 스케치, 일러스트
스토리보드 (Storyboard)	정책, 프로세스, 콘텐츠 구성, 와이어프레임(UI, UX), 기능 정의, DB 연동 등 서비스 구축을 위한 모든 정보가 담겨 있는 설계 산출물	파워포인트, 키노트, 스케치
프로토타입 (Prototype)	정적인 화면으로 설계된 와이어프레임 또는 스토리보드에 동적 효과를 적용하여 실제 구현된 것처럼 시뮬레이션할 수 있는 모형	HTML/CSS

※ CSS(Cascading Style Sheet) : HTML 문서를 스타일링 하는 언어(W3C의 표준)로 HTML 문서에서 link 요소를 사용해 CSS 파일을 읽어 들이면 HTML 문서의 구조를 CSS를 통해 스타일링이 가능한 언어

 

---

3️⃣ UI 프로토타입 제작 및 목업 

☆

 

---

(1) 프로토타입(Prototype)

 

1. 프로토타입(Prototype)

 

• 컴퓨터 시스템이나 소프트웨어의 설계 또는 성능, 구현 가능성, 운용 가능성을 평가하거나 요구사항을 좀 더 잘 이해하고 결정하기 위하여 전체적인 기능을 간략한 형태로 구현한 시제품
• 사용자 요구사항이 정확하게 반영될 때까지 지속적으로 개선하고 보완해서 최종 설계를 완성함

---

2. 프로토타입의 의의

 

• 사전에 프로토타입을 먼저 제작하고 이를 기반으로 UI의 적정성을 평가, 수정 보완함으로써 추후 발생 가능한 오류들을 사전에 방지하는 효과가 있음
• 시스템 설계 및 개발에 소요되는 총 비용과 노력을 절감할 수 있음

---

3. 프로토타입의 장점 및 단점

 

프로토타입의 장점	프로토타입의 단점
• 사용자 설득과 이해가 쉬움 • 개발 시간 감소 • 오류 사전 발견을 통한 예방 가능	• 수정 과정 증가 시, 작업 시간 증가 위험 존재 • 요구사항에 대한 적절한 타협 필요 • 자원 효율성 관점에서는 필요 이상의 많은 자원 소모

 

---

 

(1) 목업(Mockup)

 

• 제품이나 서비스의 디자인을 시각적으로 보여주기 위한 모형
• 디자인을 보여주고, 이를 수정하거나 개선하기 위해 사용함