프론트엔드 개발 180일 도전 19일차: 다중 페이지 전문 포트폴리오 사이트 생성

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자(중급)

핵심 요약

• 일관된 브랜딩 적용: 모든 페이지에 동일한 헤더/푸터, 통일된 페이지 제목("Page | Site Name"), 일관된 메타 설명
• 접근성 기능 구현: 스킵 네비게이션 링크, ARIA 랜드마크, 일관된 헤딩 계층 구조
• SEO 최적화: 페이지별 고유 타이틀/메타 설명, 세마틱 HTML 구조, 네비게이션 링크 검증
• 프로젝트 구조 확장: projects/ 디렉토리 생성, 최소 2개의 프로젝트 세부 페이지(ecommerce.html, healthapp.html) 추가, 404.html 및 sitemap.xml 추가

섹션별 세부 요약

1. 핵심 기능

• 모든 페이지에 동일한 헤더/푸터 적용
• 페이지 제목 형식: "Page | Site Name"
• 메타 설명의 일관성 유지
• 로컬 호스팅을 위한 상대 경로 사용

2. 링크 전략

• 내부 링크 검증: projects/, contact.html 등 모든 페이지 간 연결 테스트
• 네비게이션 구조: 상단 메뉴, 사이드바 등 일관된 링크 배치

3. 접근성 기능

• 스킵 네비게이션 링크 추가(Skip to main content)
• ARIA 랜드마크(role="main", role="navigation") 적용
• 헤딩 계층(H1, H2 등)의 일관된 사용

4. SEO 최적화

• 페이지별 고유 타이틀/메타 설명 작성
• 세마틱 HTML 사용(예:
  , ,
  )
• 네비게이션 링크의 href 속성 검증

5. 구현 단계

• projects/ 디렉토리 생성 및 프로젝트 세부 페이지 작성
• contact.html에 폼 요소 추가
• 404.html, blog/ 디렉토리, sitemap.xml 추가

6. 검증 및 확장

• 내부 링크 기능 테스트: python3 -m http.server 8000으로 로컬 서버 실행
• 상대 경로/절대 경로 검증
• 404.html을 통해 잘못된 URL 처리

결론

• 프로 팁: python3 -m http.server 8000 명령어로 다중 페이지 구조 검증
• 추천 사항: 404.html 및 sitemap.xml 추가로 사용자 경험과 SEO 성능 향상
• 다음 날차: CSS 기초를 활용한 포트폴리오 사이트 스타일링(20일차) 진행 예정