[시나공] 화면 설계 도구 · 품질 특성 · HCI 정리

1️⃣ 화면 설계 도구

✅ 1. 와이어프레임 (Wireframe)

🔹 정의

• 페이지에 대한 개략적인 레이아웃이나 UI 요소 배치를 설계하는 도구
• 기획 단계 초기에 제작

🔹 특징

• 실제 구현 X (구조 설계용)
• 개발자·디자이너 간 협업 및 방향 공유 목적
• 화면 구조 중심

🔹 도구

• 손그림, 파워포인트, 키노트, 스케치, 일러스트, 프로토타입 툴 등

🔎 “개략적 배치”, “초기 설계” = 와이어프레임

---

✅ 2. 목업 (Mockup)

🔹 정의

• 실제 화면과 유사하게 만든 정적인 형태의 모형

🔹 특징

• 디자인, 색상, 레이아웃 포함
• 시각적 구성 요소 배치
• 동작 구현은 없음 (정적)

🔹 종류

• 파워 목업, 발사믹 목업 등

🔎 → “정적인 형태”, “실제 화면과 유사” = 목업

---

✅ 3. 스토리보드 (Story Board)

🔹 정의

• 와이어프레임에 콘텐츠 설명과 페이지 간 이동 흐름을 추가한 문서

🔹 특징

• 화면 간 이동 순서 포함
• 개발 최종 참고 문서
• 서비스 구축 정보 포함

🔹 도구

• 파워포인트, 키노트, 스케치, Axure 등

🔎 → “페이지 이동 흐름”, “작업 지침서” = 스토리보드

---

✅ 4. 프로토타입 (Prototype)

🔹 정의

• 실제 구현된 것처럼 테스트 가능한 동적인 모형

🔹 특징

• 인터랙션 적용
• 사용자 요구사항 검증 목적

🔹 종류

• 페이퍼 프로토타입
• 디지털 프로토타입

🔎 → “동적”, “인터랙션”, “테스트 가능” = 프로토타입

---

✅ 5. 유스케이스 (Use Case)

🔹 정의

• 사용자 요구사항을 기능 단위로 표현한 것

🔹 특징

• 사용자 관점 중심
• 일반적으로 다이어그램 형태 표현
• 요구사항 분석 단계에서 활용

구분	정의	주요 특징	핵심 키워드
와이어프레임 (Wireframe)	페이지의 개략적인 레이아웃 및 UI 요소 배치를 설계하는 도구	• 기획 초기 제작 • 실제 구현 X • 화면 구조 중심 설계	개략적 배치 초기 설계
목업 (Mockup)	실제 화면과 유사하게 만든 정적인 형태의 모형	• 디자인·색상 포함 • 시각적 구성 요소 배치 • 동작 구현 없음	정적 모형 실제 화면과 유사
스토리보드 (Story Board)	와이어프레임에 콘텐츠 설명과 페이지 이동 흐름을 추가한 문서	• 화면 간 이동 순서 포함 • 개발 최종 참고 문서 • 서비스 구축 정보 포함	페이지 이동 흐름 작업 지침서
프로토타입 (Prototype)	실제 구현된 것처럼 테스트 가능한 동적인 모형	• 인터랙션 적용 • 사용자 요구사항 검증 목적 • 동적 모델	동적 테스트 가능
유스케이스 (Use Case)	사용자 요구사항을 기능 단위로 표현한 것	• 사용자 관점 중심 • 기능 단위 표현 • 다이어그램 형태	사용자 목표 달성 과정

🔎 → “사용자 목표 달성 과정” = 유스케이스

---

2️⃣ 소프트웨어 품질 특성 (ISO/IEC 9126)

품질 특성	의미	하위 특성
기능성 (Functionality)	사용자의 요구사항을 정확히 만족하는 기능 제공 여부	적절성, 정밀성, 상호운용성, 보안성, 준수성
신뢰성 (Reliability)	주어진 시간 동안 오류 없이 기능을 수행하는 정도	성숙성, 고장 허용성, 회복성
사용성 (Usability)	사용자가 쉽게 이해하고 학습하며 사용할 수 있는 정도	이해성, 학습성, 운용성, 친밀성
효율성 (Efficiency)	기능을 얼마나 빠르게 처리하는지에 대한 정도	시간 효율성, 자원 효율성
유지보수성 (Maintainability)	수정·개선·확장이 얼마나 용이한지에 대한 정도	분석성, 변경성, 안정성, 시험성
이식성 (Portability)	다른 환경으로 쉽게 이전·적용 가능한 정도	적용성, 설치성, 대체성, 공존성

📌 ISO/IEC 9126 = 기·신·사·효·유·이

---

3️⃣ HCI (Human Computer Interaction)

🔹 정의

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

🔹 목표

• 최적의 사용자 경험(UX) 제공

🔹 핵심

• 사용자 중심 설계
• 인간-컴퓨터 상호작용 연구

🔎 “UX 최적화”, “상호작용 연구” = HCI

---

4️⃣ 감성공학

🔹 정의

• 제품이나 작업환경을 사용자의 감성에 맞게 설계·제작하는 기술

🔹 특징

• 인문·사회·공학 융합 학문
• 인간 감성을 제품 설계에 반영

🔎 “사용자 감성 반영 설계” = 감성공학

---

📊 시험 포인트 정리

🔥 화면 설계 도구는 정적/동적 구분 문제

• 정적: 와이어프레임, 목업
• 동적: 프로토타입

🔥 “페이지 이동 흐름 포함 문서” → 스토리보드

🔥 ISO/IEC 9126 품질 특성

• 하위 특성과 연결하여 출제
• 기능성 ↔ 상호운용성/보안성
• 신뢰성 ↔ 고장 허용성/회복성
• 효율성 ↔ 시간·자원

🔥 HCI = UX와 연결 문제

🔥 감성공학 = 정의형·개념형 문제

---

📌 암기 핵심 요약

• 정적 모형 = 목업
• 동적 테스트 = 프로토타입
• 페이지 흐름 포함 = 스토리보드
• ISO/IEC 9126 = 기능·신뢰·사용·효율·유지·이식
• UX 연구 학문 = HCI

2025 시나공 퀵이지 정보처리기사 실기 단기완성
(저자: 강윤석, 김용갑, 김우경, 김종일 | 출판사: 길벗)

※ 본 글은 위 교재를 참고하여 학습 목적으로 재정리한 내용입니다.