실습 과제와 포트폴리오 기초집LESSON 15

웹 포트폴리오 정리: 반응형·접근성·상호작용·배포 상태를 보여 주기

난이도초급

예상 시간45분

선수지식공개 미디어 계획

15강. 웹 포트폴리오 정리: 반응형·접근성·상호작용·배포 상태를 보여 주기

1. 이번 강의에서 해결할 문제

데스크톱 첫 화면 한 장만으로는 반응형, 키보드 조작, 오류 상태와 실제 배포 여부를 확인할 수 없습니다. 주요 화면 폭과 상호작용을 테스트 근거로 설명합니다.

2. 학습 목표

3. 핵심 개념

웹 포트폴리오의 “반응형”은 화면이 줄어드는 것이 아니라 작은 폭에서도 정보 순서, 버튼 크기와 읽기 흐름이 유지되는 상태입니다. 접근성은 자동 점수 하나가 아니라 실제 키보드 순서와 의미 있는 HTML을 함께 확인합니다.

4. 단계별 실습

문서 작업 · 해당하는 경우의 산출물: <PROJECT_ROOT>/docs/web-portfolio.md

docs/web-portfolio.md
# 웹 프로젝트 검증

## 핵심 상호작용
| 기능 | 사용자 행동 | 결과 | 증거 |
| --- | --- | --- | --- |
| 메뉴 | 키보드로 항목 선택 | 해당 섹션 이동 | T-W01 |
| 필터 | 종류 버튼 선택 | 일치 카드만 표시 | T-W02 |
| 모달 | 열기 후 Escape | 초점 복귀·닫힘 | T-W03 |

## 반응형 확인
| 뷰포트 | 확인 내용 | 결과 |
| --- | --- | --- |
| 360px | 가로 스크롤·버튼·긴 제목 | 통과/실패 |
| 768px | 카드 열과 내비게이션 | 통과/실패 |
| 1280px | 본문 폭과 여백 | 통과/실패 |

## 접근성 확인
- 논리적인 제목 순서와 랜드마크
- 키보드 초점 표시와 조작
- 정보성 이미지 대체 텍스트

## 배포
- 공개 URL: 실제 공개 후 검증된 주소만 기록
- 마지막 확인: YYYY-MM-DD, 링크·Console·모바일 폭

웹 브라우저 작업: 개발자 도구의 반응형 모드로 세 폭을 확인하고, 마우스를 내려놓고 Tab, Shift+Tab, Enter, Escape로 핵심 흐름을 수행합니다. Console과 Network에서 깨진 파일을 확인합니다.

GitHub Pages로 공개한다면 저장소와 배포 소스 설정은 GitHub Pages 사이트 생성 공식 문서의 현재 절차를 확인합니다.

코드 작업: 버튼처럼 동작하는 요소는 가능한 한 실제 button이나 a를 사용합니다. 테스트를 통과시키기 위한 최소 수정만 하고 새 기능은 추가하지 않습니다.

완료 기준: 웹을 선택했다면 세 화면 폭, 키보드 흐름 하나, 오류·이미지 누락과 검증된 배포 링크 상태가 기록됩니다. 다른 유형이면 해당 없음과 선택 유형을 씁니다.

5. 작성 방식이 필요한 이유

화면 폭과 입력 방식을 명시하면 “반응형·접근 가능”이라는 주장을 재현할 수 있습니다. 로컬과 배포 결과를 분리해 base URL이나 누락 에셋 문제도 드러냅니다.

6. 자주 하는 실수와 해결법

7. 직접 실습

8. 이해 점검 질문 3개

9. 핵심 요약

MINI QUIZ