주니어 개발자를 위한 5일간의 리팩토링 여정: 접근성, Git 활용 및 CSS 최적화

핵심 기술

이 콘텐츠는 Frontend Mentor의 새로운 자동 감사 기능을 통해 발견된 프로젝트의 접근성, HTML, CSS, JavaScript 문제를 해결하기 위한 5일간의 집중 리팩토링 과정을 공유합니다. 특히 Git 사용에 대한 두려움 극복, ADHD와 함께 작업하는 방법, 그리고 실질적인 코드 개선에 초점을 맞춥니다.

기술적 세부사항

• 접근성 개선:
  • 낮은 대비의 텍스트 식별 및 수정 (Chrome DevTools, WebAIM Contrast Checker 활용).
  • 의미론적이지 않은 <div>를 시맨틱 태그(예: <header>, <main>, <section>)로 교체하여 스크린 리더 및 사용자 경험 향상.
• Git 활용 능력 향상:
  • 새로운 브랜치 생성 및 관리 (git branch, git status, git add, git commit).
  • Git을 '실수 방지 시스템'이 아닌 '버전 관리 시스템'으로 인식 전환.
  • 효과적인 Git 커밋 메시지 작성 (fix:, refactor:, feat: 등).
• CSS 최적화 및 구조화:
  • Figma와 CSS의 패딩/마진 차이 이해 및 레이아웃 버그 수정 (로고 누락 문제).
  • 불필요한 CSS 규칙 제거 (예: position: relative의 오남용).
  • 반복되는 선택자를 위한 사용자 정의 속성(CSS 변수) 도입 고려.
  • 모바일 우선(Mobile-first) CSS 전략 채택 및 그 중요성 강조.
  • px, em, rem 단위의 전략적 사용 및 px-to-rem 확장 프로그램 활용.
  • 과도한 그리드 컬럼 사용 문제 해결 및 820px에서의 레이아웃 버그 수정.
  • 논리적 속성(margin-inline-start, margin-inline-end) 도입 및 RTL 언어 지원, 접근성 향상.
• 개발 워크플로우 개선:
  • 데스크톱 우선에서 블렌디드 접근 방식으로 전환.
  • clamp(), min()과 같은 최신 CSS 함수 탐색 및 유체 스케일링(fluid scaling) 준비.
  • 개발 툴체인의 일부로 응답성 테스트 도구 및 CSS 검증기 활용.

개발 임팩트

• 자동화된 감사 보고서를 이해하고 접근성 문제를 효과적으로 해결하는 능력 배양.
• Git에 대한 두려움을 극복하고 능숙하게 사용하여 코드베이스를 안전하게 관리.
• 더 읽기 쉽고 유지보수하기 쉬운 시맨틱 HTML 구조화 및 CSS 설계 능력 향상.
• 개발 과정 전반에 걸쳐 신중하고 체계적인 접근 방식 습득.
• 향후 챌린지에 이 개선된 개발 습관을 적용하여 생산성 및 코드 품질 향상.

커뮤니티 반응

• 콘텐츠에서 직접적인 커뮤니티 반응에 대한 언급은 없으나, Discord 개발자들과의 교류를 통해 Git 커밋 메시지, CSS 단위 변환(px-to-rem 확장 프로그램), 논리적 속성 등에 대한 조언을 얻은 점을 언급하고 있습니다.