[클론 코딩] 학원 수료 후 제작한 페이지를 개선

프로젝트 개요

학원 수료 후 제작한 프로젝트를 마크업 구조, 스타일 선택자, 웹 표준, 웹 접근성 준수하며 학습한 경험을 녹여 개선한 프로젝트이다. 크게 성장한 내 모습이 보였다.

---

개선 전

아래의 코드는 header 코드 일부분이다. section 태그 안에 section 태그가 있었고 문서의 제목 태그가 있었지만 명확하지 않았고 class 이름이 길어 가독성이 좋지 않았고 HTML 구조에서 불필요한 div가 있었다. 그리고 웹 표준, 웹 접근성 고려하지 않았다. 수정 전 내 코드를 보니 고쳐야 할 부분이 많았다. 

 

HTML

---

CSS 파일 분리하면서 수정 및 마크업 구조 변경

스타일 속성이 정리가 되지 않아서 영역별 파일을 생성하여 수정하기로 선택했다. 물론 파일을 하나만 생성하여 수정해야 한다는 것을 알고 있었지만 몇 년 전꺼 코드를 보니 가독성이 좋지 않았다. 그래서 우선 파일을 분리하고 수정했다.

 

영역별 CSS 파일 생성

 

속성 없는 선택자

 

규칙 없는 파일명

---

개선 목표

아래의 5가지 목표를 중점으로 개선

1. 웹 표준 및 웹 접근성 준수

2. CSS 선택자 가독성 및 class 이름 개선

3. 불필요한 태그 및 마크업 구조 개선

4. 실제 사이트 카피하여 매우 유사하게 제작

---

웹 접근성 검사

웹 접근성을 검사하는 사이트가 있길래 검사 후 수정했다. (아래의 사이트는 페이지를 검사한 결과다.)

https://wave.webaim.org/report#/https://seoul-project.netlify.app/

WAVE Report

---

웹 접근성 오류 해결

웹 접근성을 취득한 경험이 없지만 검사한 결과 제작한 페이지에서 오류가 발생했다. 실제 사이트 검사한 결과 오류가 발생하지 않았다. 오류 중 색상 대비가 있었는데 실제 사이트에서 제공한 색상으로 제작하였는데 오류가 발생해 이해되지 않았다. 색상 대비 사이트에서 색상 값을 입력 후 대비된 값으로 제작한 결과 오류가 발생하지 않았다.

 

검사 전

---

웹 접근성 검사 통과

오류가 발생하지 않았다.

 

검사 후

---

웹 표준 HTML 준수

웹 표준 검사

---

웹 표준 CSS 준수

웹 표준 준수

---

배운 점

웹 접근성 문서를 확인하며 색상 대비, ir 기법, h1 태그의 중요도 등을 공부했다. 불필요한 div 태그 등 UI 결과 중심으로 HTML 구조를 최소화하며 유연하게 구조를 대응하는 관점을 수정하며 배웠다.

마치며

학원 수료 후 제작한 페이지를 수정한 결과 많이 성장한 모습이 느껴졌다. 퍼블리셔 경험하고 쌓았던 것을 적용한 결과 코드 보는 시야가 달라졌고 전에는 웹 표준, 웹 접근성 등을 준수하지 않고 제작했지만 공부 후 코드를 보니 지켜야 하는 부분들이 많았고 준수해야 한다는 것을 알았다.

앞으로

꾸준한 자세로 프론트엔드 직무까지 깊게 학습하여 더 크게 성장한 모습으로 만들어 나갈 것이다.