2027 웹디자인개발기능사 필기, '프로토타입 & 사용성 테스트' 핵심 이론 완벽 정복!

프로토타입 제작 및 사용성 테스트 (중학생 눈높이 설명)

이번 파트에서는 우리가 만든 아이디어를 실제로 만들어보고(프로토타입 제작), 사람들이 잘 쓸 수 있는지 알아보는(사용성 테스트) 내용이야.

챕터 1: 프로토타입 제작

1. 사진이랑 이미지 준비하기

• 사진: 현실에 있는 물건이나 사람을 카메라로 찍은 사진을 말해. 이걸 준비할 때는 뭘 만들 건지에 맞는 사진을 골라야 하고, 사진이 너무 크거나 작지 않게 크기 조절도 해야 해. 필요하면 사진 편집도 해야 하고.
• 웹사이트에 올릴 때: 사진이 너무 크면 사람들이 웹사이트를 볼 때 느려질 수 있으니까, 사진 크기를 줄여서 빠르게 로딩되게 해야 해.
• 이미지 종류:
  • 비트맵 방식: 사진처럼 픽셀(점)로 이루어진 이미지야. 사진 보정하거나 합칠 때 많이 써. 색깔을 풍부하게 표현할 수 있고 편집도 쉬운데, 크기를 키우면 깨져 보일 수 있어.
    • 픽셀: 비트맵 이미지를 이루는 아주 작은 점이야.
    • 해상도: 픽셀이 얼마나 빽빽하게 모여있는지를 말해. 해상도가 높을수록 선명해.
    • 안티앨리어싱: 비트맵 이미지는 사각형 픽셀로 이루어져서 동그라미 같은 걸 표현할 때 계단처럼 보일 수 있거든. 안티앨리어싱은 이 계단 현상을 부드럽게 만들어주는 기술이야.
  • 벡터 방식: 수학 공식으로 이미지를 그려. 그래서 아무리 크게 확대해도 깨지지 않고 품질이 그대로 유지돼. 그림이나 로고 같은 걸 만들 때 좋아. 근데 복잡한 색깔이나 그림자 표현은 좀 어려울 수 있어.
• 이미지 색깔:
  • RGB: 컴퓨터 화면이나 스마트폰에서 보는 색깔이야. 빨강(Red), 초록(Green), 파랑(Blue)을 섞어서 색을 만들어.
  • CMYK: 인쇄물에서 쓰는 색깔이야. 청록(Cyan), 자홍(Magenta), 노랑(Yellow), 검정(Black) 잉크를 섞어서 색을 만들어.
  • 그 외: 인덱스 컬러(256가지 색만 쓰는 거), 그레이스케일(흑백이랑 회색), 듀오톤(흑백에 다른 색 톤 추가), 비트 컬러(흰색, 검정색만 쓰는 거), 랩 컬러(정확한 색 측정을 위한 표준), HSB(색의 밝기, 채도 등으로 표현) 같은 것도 있어.
• 이미지 해상도:
  • 이미지 해상도: 이미지 자체에 픽셀이 얼마나 많은지를 말해. 보통 PPI(인치당 픽셀 수)로 표시해.
  • 화면 해상도: 모니터가 이미지를 얼마나 선명하게 보여줄 수 있는지를 말해.
  • 출력 해상도: 프린터로 인쇄할 때 얼마나 선명하게 나올지를 말해. 보통 DPI(인치당 점 수)나 LPI(인치당 선 수)로 표시해.
  • 팁: 컴퓨터로 작업할 때는 나중에 인쇄할 해상도보다 2배 이상 높게 작업해야 결과물이 좋아.
• 이미지 파일 종류:
  • GIF: 256가지 색만 쓸 수 있고, 투명한 이미지나 간단한 애니메이션을 만들 수 있어. 웹에서 빨리 로딩되는 장점이 있어.
  • JPG (JPEG): 웹에서 가장 많이 써. 색깔 표현이 좋고 파일 크기를 줄일 수 있는데, 압축할 때 이미지 품질이 좀 떨어질 수 있어.
  • PNG: GIF보다 더 많은 색을 쓸 수 있고, 투명한 이미지도 만들 수 있어. JPG보다 품질 손실이 적어.
  • BMP: 비트맵 이미지를 저장하는 방식인데, 파일 용량이 엄청 커.
  • 그 외: TIFF, AI(일러스트레이터), PDF, PSD(포토샵 원본) 등도 있어.

2. 영상, 아이콘, 글씨, 애니메이션 준비하기

• 영상: 움직이는 이미지들을 말해. 동영상이라고도 하지.
  • 준비 과정: 좋은 품질로 촬영하고, 편집 도구(프리미어 같은 거)로 편집하고, 웹에서 잘 보이도록 파일 크기를 줄여야 해.
  • 영상 파일 종류: MP4(가장 많이 써), WebM, SRT(자막 파일) 등이 있어.
• 아이콘: 작고 그림 같은 거야. 앱이나 웹사이트에서 기능을 나타낼 때 써.
  • 파일 종류: SVG(깨지지 않는 벡터 방식), PNG(웹에서 많이 써), ICO(컴퓨터 아이콘) 등이 있어.
• 글씨 (서체, 타이포그래피):
  • 서체: 글씨 모양을 말해.
    • 세리프: 글씨 끝에 삐침이 있는 글씨 (예: 명조체)
    • 산세리프: 글씨 끝에 삐침이 없는 글씨 (예: 고딕체)
    • 스크립트: 손글씨처럼 자유로운 글씨
  • 타이포그래피: 글씨를 예쁘고 읽기 쉽게 디자인하는 거야. 글자 간격, 줄 간격, 글씨 크기 등이 중요해.
  • 폰트 파일 종류: TTF, OTF 등이 있어.
• 애니메이션: 움직이는 그림을 말해. 디자인에 생동감을 더해줘.
  • 제작 과정: 기획하고, 스토리보드 만들고, 실제로 만들고, 소리 넣고, 완성하는 순서야.
  • 애니메이션 방식:
    • 프레임: 애니메이션의 한 장면 한 장면을 말해.
    • 키프레임: 애니메이션의 시작과 끝을 정하는 프레임이야. 이걸로 중간 움직임을 자동으로 만들어주는 걸 '트위닝'이라고 해.
  • 특수 효과:
    • 모핑: 한 이미지에서 다른 이미지로 자연스럽게 변하는 효과.
    • 크로마키: 초록색 배경 앞에서 찍은 영상을 다른 배경으로 바꾸는 기술.
    • 모션 캡처: 사람이나 동물의 움직임을 컴퓨터 캐릭터에 입히는 기술.
  • 애니메이션 종류: 셀 애니메이션(옛날 방식), 스톱모션(조금씩 움직여서 찍는 거), 커다운(종이 조각으로 만드는 거), 플립(책 페이지 넘기듯 움직이는 거) 등이 있어.

3. 아이디어 시각화하기

• 아이디어 시각화: 머릿속 아이디어를 그림, 글씨 등으로 명확하게 표현하는 거야.
  • 장점: 복잡한 정보를 쉽게 이해하게 해주고, 문제점을 빨리 찾게 도와줘.
  • 방법:
    • 1차원: 정보를 줄줄이 나열하는 방식 (텍스트, 음성 등)
    • 2차원: 위치, 크기 등으로 정보를 표현하는 방식 (그래프 등)
    • 3차원: 입체적으로 표현하는 방식 (3D 모델링 등)
  • 데이터 시각화 방법:
    • 히트맵: 사람들이 어디를 많이 보거나 클릭하는지 색깔로 보여주는 거야. (예: 웹사이트에서 사람들이 많이 보는 부분은 빨간색으로 표시)
    • 트리맵: 데이터를 사각형 타일로 보여주는데, 사각형이 클수록 데이터 양이 많은 거야.
    • 쌍곡성 트리: 복잡한 계층 구조 데이터를 보여줄 때 써.
  • 시각화 과정:
    1. 초안 그리기: 아이디어를 간단하게 그려봐.
    2. 수정하기: 초안을 다듬고 잘못된 부분을 고쳐.
    3. 정리하기: 보는 사람이 이해하기 쉽게 정리해.
    4. 완성하기: 색깔이나 명암을 넣어서 아이디어를 더 잘 보이게 만들어.

4. 프로토타입 종류

• 프로토타이핑: 최종 제품을 만들기 전에 미리 만들어보는 거야.
• 피델리티 (Fidelity): 프로토타입이 실제 제품과 얼마나 비슷한지를 나타내는 말이야.
  • 로우파이 (Low-Fidelity): 아주 간단한 프로토타입. 종이로 만든 거나 손으로 그린 와이어프레임 같은 거.
  • 미드파이 (Mid-Fidelity): 중간 정도의 프로토타입. 디지털 와이어프레임처럼 기능이나 디자인 요소를 좀 더 보여주는 거.
  • 하이파이 (High-Fidelity): 실제 제품과 거의 똑같은 프로토타입. 사용자들이 직접 써보고 피드백을 줄 때 많이 써.
• 프로토타입 제작 도구: 피그마, 어도비 XD 같은 걸로 만들 수 있어.
• 프로토타입 종류: 동영상 프로토타입, 디지털 프로토타입, 코드 프로토타입, 로우파이, 하이파이 등이 있어.

챕터 2: 사용자 조사 분석 및 사용성 테스트

1. 사용자 조사 및 분석

• 사용자 조사: 사람들이 뭘 원하고 어떻게 행동하는지 알아보는 거야.
  • 과정: 목표 설정 -> 대상 선정 -> 조사 방법 결정 -> 도구 준비 -> 일정 계획 -> 데이터 수집 및 분석 -> 결과 보고
• 사용자 분석: 조사한 데이터를 보고 사람들이 뭘 좋아하는지, 어떻게 쓰는지 이해하는 거야.
  • 분석 결과: 웹사이트나 앱을 더 좋게 만드는 데 써.
• 사용자 행동 분석: 사람들이 제품을 쓸 때 어떻게 행동하는지 알아보는 거야. (예: 페이지를 몇 번 봤는지, 얼마나 오래 머물렀는지, 구매를 했는지 등)
  • 분석 방법:
    • 웹로그 분석: 사람들이 웹사이트에서 뭘 했는지 기록된 데이터를 보는 거야.
    • 클릭 분석: 사람들이 어디를 클릭하고 어디로 이동했는지 추적하는 거야.
    • 사용자 여정 분석: 사람들이 제품을 처음부터 끝까지 어떻게 썼는지 전체 과정을 보는 거야.
    • 히트맵 분석: 사람들이 페이지에서 어디를 많이 보는지 색깔로 보여주는 거야.
    • A/B 테스트: 두 가지 디자인을 비교해서 어떤 게 더 좋은지 알아보는 거야.
    • 코호트 분석: 비슷한 시기에 가입한 사용자 그룹의 행동을 비교하는 거야.
• 사용자 태도 분석: 사람들이 제품에 대해 어떻게 느끼고 생각하는지 알아보는 거야. (예: 생각, 감정, 의견, 만족도 등)
  • 분석 방법: 설문 조사, 인터뷰, 사용자 관찰, 사용자 일기, 현장 조사 등이 있어.

2. 사용성 테스트 및 분석

• 사용성 테스트: 프로토타입을 실제 사용자들에게 주고 써보게 해서 얼마나 쓰기 편한지 알아보는 거야.
  • 준비: 테스트 항목, 방법, 목표를 정해야 해.
  • 사용자 테스트 vs 사용성 테스트:
    • 사용자 테스트: 제품의 필요성을 알아보는 테스트.
    • 사용성 테스트: 프로토타입이 얼마나 쓰기 편한지 알아보는 테스트.
  • 테스트 방법: 소수에게 물어보는 정성적 테스트, 다수에게 데이터를 얻는 정량적 테스트, 인터뷰, 관찰, 설문 조사, A/B 테스트 등이 있어.
  • 형성적 사용 적합성 평가: 제품 개발 중에 UI/UX를 평가하고 개선하는 거야. (효율성, 만족도, 직관성 등)
• 발견적 평가: 전문가들이 웹사이트를 보고 사용성 문제를 찾는 방법이야. (예: 시스템 상태가 잘 보이는가? 사용자가 제어할 수 있는가? 등 10가지 원리)
• 사용성 테스트 분석: 테스트 결과를 보고 문제점을 찾고 개선하는 거야.
  • 분석 내용: 사용자 만족도, 과제 성공 여부, 과제 수행 시간, 오류 영향 등을 분석해.
• 수정 보완: 테스트 결과를 바탕으로 웹사이트나 앱을 고치는 거야.

이렇게 파트 2에서는 우리가 만든 아이디어를 실제로 만들어보고, 사람들이 잘 쓸 수 있는지 꼼꼼하게 확인하는 과정을 배우는 거야!