💡 GitHub 링크
(1) 전체적인 개발 방향 토의
(2) 공통으로 적용할 색상, 폰트, 여백 속성에 관한 변수 및
mixin
토의(3) 컴포넌트 단위로 메인 페이지의 영역 구분
(4) 팀원별로 분담할 작업 1차 선정 및 완료
: 헤더, 푸터 마크업
: 메인 콘텐츠 영역 마크업
: 변수 및mixin
생성(5) 팀원별로 분담할 작업 2차 선정 및 완료
: 헤더, 푸터 스타일링
: 메인 콘텐츠 영역 중 메뉴 부분 스타일링
: 메인 콘텐츠 영역 중 비디오, 공지, 뉴스 부분 스타일링
: 미디어 페이지 마크업
- 메인 콘텐츠 영역 마크업
- 메인 콘텐츠 영역 중 비디오, 공지, 뉴스 부분 스타일링
💡 시맨틱 마크업의 어려움
: 논리 구조와 접근성을 고려한 마크업에 대해 공부한 부분을 실제로 적용하는 것이 생각보다 쉽지는 않았다. 하나의 요소를 마크업하는 데 정말 다양한 방법이 존재하는데, 설계할 때 시간이 많이 걸리더라도 어떤 방법으로 마크업해야 UX를 향상시킬 수 있을지에 대한 고민을 하는 과정이 어렵지만 즐겁고 뿌듯했다.
💡 리팩토링의 중요성
: 스타일링 과정에서는
flex
관련 속성의 사용이 아직 미숙하다고 느꼈고, 따로 정리하면서 공부해야겠다. 그리고 처음부터 너무 완벽하게 Sass를 사용할 생각으로 작성하기 보다는, 일단 적절한 방법으로 구현을 해보고 리팩토링 과정을 점진적으로 거치는 것이 바람직한 코드 작성 방법이라는 생각이 든다.
💡 의식적인 모바일 퍼스트 설계
: 또한 이론적으로는 왜 모바일 퍼스트 방식으로 구조화해야 하는지 이해했으나, 막상 스타일링을 진행하고 나니 나도 모르게 습관적으로 데스크탑 퍼스트 방식으로 진행했다는 것을 깨달았다. 데스크탑을 먼저 스타일링했기 때문에 오히려 모바일 레이아웃이 더 간단함에도 불구하고 완성하는 데 시간이 많이 걸렸던 것 같다. 보편적으로 모바일 레이아웃이 더 간단한 경우가 많기 때문에, 항상 의식적으로 모바일 레이아웃을 먼저 설계하는 습관을 들여야겠다.
💡 Git 공부의 필요성
: 사실 마크업이나 스타일링보다 오늘 가장 어려웠던 부분은 Git이었다. 혼자 repository를 생성하여 commit, push하는 과정에서는 별다른 문제가 없었지만, 협업하면서 Git을 사용하는 것은 완전히 다른 차원의 문제였다. 특히 충돌이 많이 발생해서 수정하느라 애를 먹었는데, pull을 하기 이전에 fetch로 먼저 충돌을 확인하는 과정을 거쳐야겠다. 또한 Git에 익숙해지기 위해 rebase 등의 다양한 Git 명령어에 대해서도 공부할 필요가 있을 것 같다.