IT조아 블로그~ I♥it

[UX/UI Project#5] 디지털 프로토타입과 휴리스틱 평가

IT조아(it-zowa) — Thu, 21 May 2026 05:20:40 +0900

과제 개요

실습#10에서 제작한 디지털 프로토타입에 대해 실습#11에서 설명하는 휴리스틱 평가를 실시하여 개선할 사항을 도출한다. 각 휴리스틱 침해 사항에 대해서 심각도 평가와 난이도 평가를 한다. 또한 각 팀이 제안한 인터페이스 설계의 전체 작업 과정을 포스터로 작성함으로써, 인터페이스 개선을 위한 여러 단계를 최종 점검한다.

보고서구성

보고서의 구성은 다음과 같다. (표지 포함하여 A4 15쪽 내외, 부록 제외)

표지
1. 프로젝트 개요 : 목적, 문제점, 해결방안, 실험방법 (1쪽으로 요약)
2. 인터페이스 설계 변경
3. 디지털 프로토타입 구현 : 작성도구 및 환경, 프로토타입 개요, 미구현 부분
4. 대표 시나리오 : 디지털 프로토타입의 화면으로 작성한 스토리보드 포함
5. 휴리스틱 평가 결과 : 사용성 침해사항을 나열 (해결책, 중요도 순위, 난이도 순위 포함)
부록1. 디지털 프로토타입 스크린샷 보충 (필요시)
부록2. 개인별 휴리스틱 평가 결과

* 보고서에 대한 상세 설명은 교재 11.3절과 12.3절을 참조한다.

포스터 구성

각 항목을 개조식으로 설명하고 인터페이스의 실행화면 이미지를 포함한다. (PPT 혹은 이미지 파일 1쪽)

▪각 팀의 프로젝트 제목(Title)
▪기본 문제(Problem) 및 해결 방안(Solution)
▪인터페이스의 주요 기능(Key Features)
▪반복 설계과정(Design Iteration)

* 별첨하는 포스터 샘플 파일을 참조한다.

발표자료 작성 및 발표

발표자료는 보고서의 내용을 요약 정리하여 PPT로 작성하되, 내용이 다르지 않도록 유의한다.

▶ 보고서 작성 템플릿

UXUI_Project#5_디지털프로토타입과휴리스틱_template.docx

0.10MB

▶ 보고서 작성 예시

0123456789101112

▶ 포스터 샘플

(추후 보완)

[UX/UI 실습#12] 휴리스틱 평가 시행

IT조아(it-zowa) — Mon, 18 May 2026 05:17:55 +0900

과제 개요

지난주 제작한 디지털 프로토타입에 대해 휴리스틱 평가를 수행하여 시스템 인터페이스의 좋은 점과 개선해야 할 점을 파악한다. 휴리스틱 평가는 팀원들 각자가 직접 실시하여, 사용성에 대한 최소 20개 이상의 침해사항(Usability Violations)을 찾는다.

실습 목표 : 닐슨의 10가지 사용성 휴리스틱에 따라 현재 작성 중인 인터페이스를 평가하고 개선할 점을 파악한다.
준비물 : 이전 단계에서 작성한 각 시나리오 별 디지털 프로토타입
실습 절차
1) 휴리스틱 평가를 수행할 평가자를 선정한다.
2) 브리핑 세션에서 디지털 프로토타입과 시나리오에 대한 작업지시서를 공유하고 평가 방법을 설명한다.
3) 개별적으로 휴리스틱 평가를 실시하고 평가 보고서를 제출받는다.
4) 디브리핑 세션에서 평가 결과를 취합하고 논의하여 최종 문제점 목록을 작성한다.
산출물 : 개인별 휴리스틱 평가 결과, 취합된 휴리스틱 평가 목록

보고서 구성 (표지 포함하여 A4 10~15쪽 내외)

표지
1. 휴리스틱 평가 결과 : 사용성 침해사항을 나열 (해결책, 중요도 순위, 난이도 순위 포함)
2. 개인별 휴리스틱 평가 결과

* 보고서에 대한 상세 설명은 교재 12.3절을 참조한다.

실습 절차

평가자 선정

사용성 평가 전문가를 섭외. 만약 전문가를 섭외하기 어려운 경우에는 프로토타입 설계 팀원이 휴리스틱 평가에 직접 참여한다.

개별 목록 작성

각 평가자는 각자 사용성에 대한 최소 20개 이상의 침해사항(Usability Violations)을 찾는다.
각 침해사항에 대해 심각도 점수를 할당한다. (0 문제없음 ~ 4 치명적인 심각)

최종 목록 작성

각 침해사항에 대해 심각도 점수를 다시 정리하고 수정 난이도 점수를 매겨서 추가한다.

보고서 작성

1. 휴리스틱 평가 최종 결과

UX 전문가 혹은 팀원들이 실시한 개별 평가 결과를 취합하여 최종 문제점 목록을 작성한다.

휴리스틱 항목 번호(H1 ~ H10) 및 제목
사용성 침해사항 설명 및 간단한 해결책
심각도 점수: 0 문제 없음 ~ 4 치명적 심각
수정 난이도: 0 손쉽게 수정 ~ 4 매우 어려움

2. 개별 휴리스틱 평가 목록

평가자 별로 진행된 휴리스틱 평가 결과인 침해사항 목록은 개별적으로 첨부한다.

▶ 휴리스틱 평가 실습 보고서 템플릿

UXUI_12장_휴리스틱평가_template.docx

0.06MB

▶ 휴리스틱 평가 실습 보고서 작성 예시

0123

[UX/UI 실습#11] 디지털 프로토타입 작성

IT조아(it-zowa) — Fri, 15 May 2026 05:15:53 +0900

과제 개요

종이 프로토타입의 제작 및 사용자 테스트를 통해 최종 개선된 시스템 디자인을 인터랙티브 프로토타입으로 구현한다. 본 과제에서는 피그마(Figma) 저작도구를 사용하여 구현하며, 최종 결과물의 웹 링크(URL)를 보고서와 함께 제출하도록 한다. 본 과제의 디지털 프로토타입은 모든 기능을 포함하지 않으며, 대표로 선정한 시나리오대로 작동되는 화면을 보여주는 정도의 단순한 페이지 이동이나 인터랙션만을 포함한다.

실습 목표 : 종이 프로토타입으로 시행한 사용자 테스트를 통해 개선한 UI 디자인을 디지털 인터랙티브 프로토타입으로 구현한다.
준비물 : 이전 단계에서 작성한 종이 프로토타입과 사용자 테스트 결과물
실습 절차
1) 종이 프로토타입 사용자 테스트를 통해 개선한 UI 디자인을 최종 정리한다.
2) 디지털 인터랙티브 프로토타입 형태로 구현한다.
3) 사용자 테스트를 통해 결과물을 수정 보완한다.
산출물: 디지털 인터랙티브 프로토타입 결과물 (링크)

보고서 구성 (표지 포함하여 A4 10쪽 내외, 부록 제외)

표지
1. 인터페이스 설계 변경
2. 디지털 프로토타입 구현 : 작성도구 및 환경, 프로토타입 개요, 미구현 부분
3. 대표 시나리오 : 디지털 프로토타입의 화면으로 작성한 스토리보드 포함
부록. 디지털 프로토타입 스크린샷 보충 (필요시)

* 보고서에 대한 상세 설명은 교재 11.3절을 참조한다.

실습 진행

1. 그동안 진행된 UI 디자인 정리

2. 디지털 인터랙티브 프로토타입 구현

3. 내부 테스트

4. 사용자 테스트 (외부 평가)

보고서 작성

1. 인터페이스 설계 변경 요약

저충실도 종이 프로토타입과 디지털 프로토타입의 사용자 테스트 결과로부터 발견한 문제점과 그로 인해 적용한 변경 사항을 기술한다.

2. 디지털 프로토타입 구현

작성 도구 및 환경
어떤 도구를 사용하여 디지털 인터랙티브 프로토타입을 제작하였는지 적고, 반드시 디지털 프로토타입의 URL을 기입한다.
프로토타입 개요 및 주요 화면
디지털 프로토타입에서 주요 기능을 수행하는 장면을 스크린 캡처를 이용하여 화면을 주요 기능별로 나열하고 간략하게 설명한다.
미구현 부분
제한된 시간 내에 프로토타입을 제작하다 보면 구현하지 못한 부분이 생길 수도 있다. 이 때 미구현 부분에는 어떠한 이유로 구현하지 못했는지 사유를 적는다.

3. 시나리오별 인터페이스 개요

변경한 인터페이스를 평가하기 위한 시나리오를 작업 위주로 설명하고 스크린 캡처를 이용한 스토리보드를 보여준다. 각 시나리오에 대해 화면 모두를 나열하는 것이 아니고, 핵심적인 화면만 나열한다.

▶ 디지털 프로토타입 보고서 템플릿

UXUI_11장_디지털프로토타입_template.docx

0.09MB

▶ 디지털 프로토타입 보고서 예시

012345678

[UX/UI 설계] 비디오 프로토타입 사례

IT조아(it-zowa) — Wed, 13 May 2026 19:10:23 +0900

비디오 프로토타입의 목적

비디오 프로토타입은 일반적으로 종이 프로토타입을 이용하여 사용자의 조작 장면을 시나리오 순서대로 녹화하여 여러 사람이 검토할 수 있도록 제작한 것이다.

비디오 프로토타입의 제작 과정

스토리보드를 잘 구성한다면 1시간 이내에도 녹화할 수 있으며 다음과 같은 과정으로 제작하면 된다.

사용자 및 작업분석의 결과인 작업목록을 검토
사용자 시나리오를 문장으로 작성
비디오 녹화를 위한 스토리보드를 작성
각 스토리보드 카드 순서대로 비디오 클립을 녹화