HTML/CSS를 활용한 팀 프로젝트
깃, 깃허브를 이용한 협업을 경험해 보고 싶어서 메인 페이지 하나를 클론 코딩하는 팀 프로젝트를 진행했습니다. 하지만 똑같이 만들어내는 건 의미가 없다고 생각하여, 크롬 라이트하우스 기준 접근성과 SEO가 낮은 사이트를 선정하여 개선하는 것에 중점을 두었습니다.
페이지 길이도 적당하고, 라이트하우스 점수도 낮아 개선할 여지가 있다고 생각했습니다.
| 이름 | 역할 |
|---|---|
| 김규리 | 뼈대 만들기 / 깃/깃허브 관리 |
| 김수정 | 시맨틱 마크업 |
| 박상민 | 웹 접근성 |
| 황상은 | CSS/성능 |
원본페이지의 접근성에는 이러한 오류들이 있었다.
- [aria-*] 속성이 역할과 일치하지 않음
- ARIA 속성이 누락됨
- [aria-hidden="true"] 속성으로 인해 스크린 리더에서 사용할 수 없음
- input 태그에 ARIA가 존재하지 않음
- 배경색과 전경색의 명암대비가 충분하지 않음
- Link에 aria 속성이 명확하지 않음
- ul태그 자식요소로 li태그 외 다른 태그들이 존재
- 제목 요소가 내림차순이 아님
원본페이지의 SEO에는 이러한 오류들이 있었다.
- 문서에 메타 설명이 없음
- 문서에 rel=canonical이 없어서 도메인의 url를 가리킴
- 링크에 href 속성을 사용하지 않아 크롤링할 수 없음
- head태그에 페이지 설명, 오픈 그래프 태그를 마크업
- 불필요한 Aria 속성을 제거
- a 태그에 적절한 aria-label 값 설정
- 원본페이지에는 불필요한 em태그 제거
- 시맨틱한 태그를 유지하고자 메뉴에는 ul, li, a 태그활용
- 명도 대비가 4.5 미만인 콘텐츠에 색상을 변경하여 명도 대비 4.5 이상으로 개선
- 시맨틱한 태그로도 부족한 경우 적절한 wai-aria 사용
- 배경색상이 존재하지 않아 색상의 대비율이 명확하지 않아 배경색상을 개선
- script에 defer 속성을 부여하여 웹페이지 로드 속도를 향상시키고 script 실행을 효율적으로 제어
원본페이지 모바일
클론페이지 모바일
원본페이지 데스크탑
클론페이지 데스크탑
성능,접근성,권장사항,검색엔진 최적화 4개를 모두 100점 맞추는 건 정말 어려웠고
아직 js실력이 부족해 jQurey cdn을 불러와 플러그인을 활용해야 한다는 점이 아쉬웠다
처음에 slick을 사용 했을 때, 접근성이 많이 낮아서 방법을 모색 해 본 결과
slick을 쓰고도 seo가 100점인 사이트를 찾았고
그 사이트의 마크업 구조를 따라 해 보았더니 seo가 다시 100점으로 올라갔다 !
웹을 구성하는 거에 있어 js는 정말 기본 중 기본인데
그 부분을 간과하고 프로젝트를 쉽게 생각 한 내 자신에게 많이 실망했지만
팀원분들의 격려와 이끄심(?) 으로 어떻게든 마무리 지어져서 참 다행이라고 생각한다 ㅎㅎ
다음에 이러한 프로젝트를 진행 한다면
꼭 js공부와 정확한 시멘틱 태그 사용, 접근성을 위한 페이징 공부를 많이 해볼 것 같다
처음 프로젝트라 git을 다루는 것도 많이 서툴었지만
전에 이클립스로 커밋을 자주 해봐서 비슷한 원리인 것 같아 그나마 쉽게 이해가 되었고
이번 프로젝트를 통해 git과 한결 친해진 것 같아서 얻은게 정말 많은 프로젝트였다 !
금방 할 줄 알았는데 예상했던 시간보다 더 오래 걸렸다.
머릿속으로 알고 있더라도
직접 클론페이지를 만드는 건 또 다른 영역인 것 같다
혼자서 작업했다면 스스로 타협하면서 포기했을텐데
협업을 통하여 팀원들과 소통하니 의지를 유지할 수 있었던 것 같다
시맨틱하게 마크업 하는 방법, SCSS파일의 문법, JS의 작동원리 등
모든 요소들을 충족시키며 복합적으로 작업할 수 있어 신기했다
특히 git을 세팅하고 사용하는 것은 혼자서는 절대 불가능했을 것이다
파일명을 대소문자로 구분하는 것조차 깃에서는 충돌이 일어났다
git은 이후에 다시 강의를 찾아 공부해볼 예정이다
제일 힘들었던 것은 협업을 처음하는데 협업에 필요한
베이스 폴더 세팅을 해야하는 것이었다
다른 사람들의 깃허브를 돌아다니고 서칭하면서 찾아봤고
프로젝트 진행에 필요한 복합적인 구조를 생각하기 어려웠지만 일단 만들고 수정했다
확실히 혼자서 공부만 했다면 알수 없었던 정보들을 알게되어 좋았고
단순히 강의를 듣고 수동적으로 하는 공부보다
에러들을 해결하기 위해 정보를 찾으니 공부가 많이 되었다
모든 사이트를 혼자서 퍼블리싱하고 유지 보수해 왔던 나에게 이번 프로젝트는 새로운 도전과도 같았다.
네 명의 팀원과 함께 사이트 한 페이지를 클론 코딩하는 것이 아니라, git을 이용해 협업하며 접근성 100점짜리 페이지를 만드는 것이 목표였기 때문이다.
이번 프로젝트를 위해서는 VS Code에서 git 사용 환경을 설정하고, 작동시키는 방법을 배워야 했다. 또한, 코딩 컨벤션을 SMACSS와 BEM 방식으로 정하고 CSS 전처리기 SCSS를 사용하여 스타일을 작성해야 했다. 그리고 정해진 기간내에 프로젝트를 완성시키기 까지.
처음에는 이 모든 것이 낯설고 어려웠지만, 몸소 부딪히며 부족한 지식을 빠르게 체화할 수 있었다. 그 결과, 프로젝트를 성공적으로 마무리하며 뿌듯함을 느꼈다.
평소에 나는 모든 프로젝트에서 가장 중요한 것은 "커뮤니케이션"이라고 생각한다.
이번 프로젝트를 통해, 사람과 사람 간의 대화뿐만 아니라 우리가 정한 가이드 내에서 마크업을 하고 스타일을 작성하는 것도 커뮤니케이션의 한 방법이라는 것을 깨달았다.
이러한 경험을 통해, 나는 커뮤니케이션의 중요성을 다시 한번 깨달았고, 더 나은 프로젝트 수행을 위해 항상 열려있는 마음으로 소통하겠다는 다짐을 새겨놓았다.
매번 혼자 `git commit`, `git push`만 쓰다가 다른 사람과 함께 작업하다 보니 초기 설정부터 많이 헤맸다.
페이지를 구현하는 것보다 깃 설정하고 병합하는 게 제일 어렵게 느껴졌다.
당장에 실전에서 써야 하기 때문일까. 그동안 사두고 더디게 나갔던 깃 강의를 이번 프로젝트를 진행하면서 거의 다 봤다.
역시 강의만 보는 것보다는 직접 만들면서 배우는 게 직빵이다.
생각보다 깃 설정에 시간이 오래 걸려 뼈대 부분을 제대로 못 잡고 시작한 게 아쉬웠다.
분명 공통으로 묶을 요소들이 여럿 있을텐데 깃 설정에 시간이 생각보다 오래 걸려 그냥 각자 자기가 맡은 부분을 구현하기 시작해서 재탕을 못한 점과,
다들 깃과 깃허브를 이용한 협업이 처음이다 보니 잘못될까 두려워 깃의 장점을 크게 활용하지 못한 점이 아쉬웠다.
(처음 main에 뼈대 만들고 이후 추가하고 싶은 게 있어도 그냥 계속 각자의 브랜치에서 작업했다.)
팀 프로젝트를 진행하며 일정에 맞추느라 육체적, 정신적으로 많이 힘들었지만, 힘든 만큼 많이 배운 것 같아 뿌듯한 프로젝트였다.