주간 업무 - 2023.07w
HTML 마크업
HTML 마크업이 뭐길래
'HTML(Hypertext Markup Language)은 웹페이지의 구조를 지정하는 기술적인 언어입니다.'(https://developer.mozilla.org/ko/docs/Glossary/HTML)
HTML 마크업을 건물을 짓는 것에 빗대어 보면,
'건축물의 뼈대에 들어갈 재료를 HTML, 뼈대를 세우는 작업을 마크업'이라 보면 되겠다.
건물도 그렇듯 기초 공사부터 잘 된 웹사이트는 유지보수가 어렵지 않다.
하지만 이번주는 아주 참혹하기 그지없었는데
마크업의 문제로 인해 1주일을 꼬박 투자해 유지보수의 시간을 들였다.
보통의 생각 - 박스모델 그려보기
왼쪽 이미지같은 디자인 시안이 있다면,
나는 HTML 마크업 작업 전 어떻게 구조를 짤 지 생각을 하게 된다.
페이지 내 컨텐츠를 파악하고
오른쪽 이미지처럼 노란색으로 칠한 부분처럼 박스모델(컨텐츠의 구역)을 나눈다.
노란색으로 칠한 부분이 컨텐츠의 한 묶음인 것이다.
이제, 참혹했던 이번 주
갈 곳을 잃은 박스모델들'보통의 생각 - 박스모델 그려보기' 내 이미지로 구상했던 박스모델들은 'MAX 리뷰', '오늘의 학습', '학습중인 코스'이다.
첨부한 이미지 붉은 밑줄에는 maxReviewSection이라는,
'나 MAX 리뷰와 관련이 매우 있다'는 의미를 가진 클래스 네이밍이 되어있다.
해당 섹션의 하위 항목으로 maxReviewArea라고 실제 브라우저로 확인하지 않아도 의미가 들어맞는 하위 요소가 들어있지만
다음에 이어지는 요소는 주석으로 오늘의 학습이라 써져있고 class로 상위 요소와 같은 maxReviewSection이라는 네이밍이 되어있다
그리고 그 다음 요소는 주석으로 설명조차 없고 '학습 중인 코스'라 확인할 수 있는 요소가 코드를 좀 읽어봐야 나온다.
위와같은 상황을 마주하게 되면 나는 이런 의문을 가지게 되는 것이다.
1. 'MAX 리뷰'와 '오늘의 학습'은 뭔가 끊을 수 없는 유대가 있는 것인가?!(같은 조건에서의 노출이라던지...)
2. 그럼 '학습 중인 코스'는 왜 하위 요소로 포함이 안되어있지??
3. 그리고 '오늘의 학습'은 왜 maxReviewSection라는 클래스를 쓰지??
4. 이거 만든 분 나와봐??
로그를 뒤져봤자 불화만 생길테고, 관리에 소홀했던 내 자신을 탓하며 사지로 뛰어들었다.
개선
정리 전 코드를 분석해보니
1. 요상한 네이밍 정말 많다.
2. '오늘의 학습'은 같은 구조로 이루어진 박스모델이 3개나 있었고, 'MAX 리뷰'는 2개나 있었다. ^^
3. 다행히 표출에 관여하는 데이터 가공 코드는 수정하지 않아도 되겠더라.
4. 미안해 코드야...
정리 후 개선에 들어갔다.
1, 3, 4, 5도 있는데 정신이 혼미해지니까 2만 올릴게...1. 네이밍은 도저히 감당할 수 있는 양이 아니었고 CSS 영향도나 Javascript 영향도를 생각할 때 건드리면 안된다 생각해서 추후 개선하는 방향으로 잡았다.
2. 불필요한 중복 박스모델들을 하나로 관리하게 했고 이렇게 만드는 과정에서 요소의 뎁스가 바뀌는 부분에 주의했다.
3. 정말 다행이었다. 온전히 HTML 마크업만 신경쓰면 됐다. 덕분에 주석에 신경을 더 쓸 수 있었다.
4. 잘 구현 되어줘서 고마워 코드야...
개발, 혼자하는거 아니잖아요
난 늘 코딩 전 기본적인 구조를 제도(Technical Drawing)하기도 하지만
다른 사람이 어떻게하면 불편해하지 않을까를 염두에 둔다.
내가 한 네이밍이 어떤 의미를 갖고있고 다른 것에 영향은 없는지,
이 섹션의 뎁스가 이 위치에서 읽히는게 맞는지
등의 고민을 하다보면 당연히 개발 전 시간이 많이 든다.
그렇지만 이렇게 확실히 준비를 하고 개발을 시작하는 버릇을 들였더니
개발시간이 단축되고 후에는 유지보수가 거의 나오지 않아
유지보수 시간을 다른 개발에 더 쓸 수 있게 되었다.
그러니 지금 이 글을 읽으시는 분이 혹시라도 HTML 마크업 혹은 다른 개발 시 애로사항을 겪고있다면,
먼저 개발 전 체크해야 할 것들을 정리하고 개발에 들어가는 방법을 시도해보고 몸에 배도록 익혀보자.
이 방법이 100% 맞진 않겠지만
나는 이 방법으로 개발스킬이 확실히 많이 늘었기 때문에
새로 입사하는 분들에게도 계속 전파중이다!
