공부를 하고, 코드를 작성하다 보니 기존에는 생각하지 못했던 여러가지 작고 큰 버그들을 만날 수 있었다. 🐛 를 해결하면서 정리하는 것도 중요하다고 느껴져서 TIL 을 통해 하나씩 정리해보려고 한다. 때론, 어처구니 없는 실수라서 민망할 수 때도 있겠지만 하나씩 적어보자.

🐛 의 발생

1. 어긋난 가운데 정렬

자기소개 페이지를 리팩토링 하는 과정에서 생겼던 문제이다. 코드를 리팩토링 하다가 모바일 구현 화면을 보니 레이아웃이 이상해져 있었다. 전에는 문제 없이 동작하던 skill 과 favorite 섹션이 오른쪽으로 치우친 모습을 하고 있었다. 갑작스러운 어긋남에 당황하고 있었는데 설상가상으로 아래와 같은 또 다른 문제까지 생겼다.

2. 알 수 없는 가로 스크롤

모바일 화면으로 세로 스크롤을 진행하는 중에 알 수 없는 가로 스크롤이 발생했다. 이 역시 리팩토링을 진행하기 전에는 없었던 문제였기 때문에 매우 당황스러웠다.

🐛 의 이유

1. div에서 ul로 변경

레이아웃이 깨졌던 이유 중에서 하나는 바로 HTML 태그들을 Semantic 하게 변경하고자 했던 점이 이유였다. 기존에는 skill 과 favorite 섹션에 있는 아이템들을 div 를 통해서 묶어주었는데 이를 ul 과 li 를 통해 작성하는 것이 맞다는 생각이 들었다.

그래서 기존의 div 들을 ul 과 li 로 변경하였는데 이 과정에서 예상하지 못한 문제가 생겼던 것이었다.

<ul>
  <li>우유</li>
  <li>두유</li>
  <li>커피</li>
</ul>

HTML을 통해서 위의 코드를 작성한 뒤에 결과를 보면 아래와 같이 나온다.

• 우유
• 두유
• 커피

여기서 자동으로 list-style 이 들어가 앞에 점이 생긴 것을 알 수 있다. 또, 자동으로 들여쓰기가 되어있는 것도 알 수 있다. 더 정확하게 개발자 도구를 통해서 확인해보면 padding 값이 설정되어 있음을 알 수 있다.

브라우저는 HTML로 작성된 문서를 로드하면서 태그의 종류에 따라서 기본적으로 주어지는 스타일이 있는데 이를 놓쳤던 것이었다. CSS를 통해서 스타일 작업을 진행할 때 reset의 필요성에 대해서 다시 한 번 느낄 수 있었다.

💡 POINT!
브라우저에서 HTML를 로드하는 과정에서 기본적으로 제시하는 margin, padding, 기타 스타일 등이 있기 때문에 CSS reset을 충실히 해주는 것이 필요하다.

2. 스크롤 이벤트의 문제

첫 번째 문제의 경우에는 개발자 도구를 통해서 빠르게 확인할 수 있어서 금방 고칠 수 있었지만 갑자기 생긴 가로 스크롤 문제의 경우에는 처음에 원인도 파악을 못하고 있었다.

각 섹션에 고정된 px을 통해서 width 를 주지 않았고 퍼센트를 주로 이용했기 때문에 원래 가로 스크롤이 생기지 않아야 했다. 특히 첫 번째 페이지의 경우에는 이상이 없었지만 세로 스크롤을 진행하면서 가로 스크롤이 생겨나서 더욱 이해하기가 어려웠다.

결국은 이유를 명확하게 알지 못한 채로 아래의 코드를 추가했다.

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

아에 가로 스크롤이 발생하지 않도록 막아버렸다. 이렇게 코드를 추가하고 나서야 제대로 동작함을 확인할 수 있었다. 이유는 무엇이었을까?

다음 날 답답한 마음에 원인에 대해서 고민을 해본 결과 JavaScript 를 통해서 추가했던 스크롤 이벤트가 문제임을 알 수 있었다. 사용자가 스크롤을 내릴 때 첫 화면에 있는 글자들이 양 옆으로 이동하도록 했는데 여기에 제한을 두지 않았기 때문에 계속 양 옆으로 이동하면서 가로 스크롤을 생성하게 된 것이다.

스크롤을 진행하면서 글자들이 움직이는 모습을 보며 좋아했던 생각이 나서 민망했다. 실제 사용자가 있는 페이지였다면 갑작스럽게 생긴 가로 스크롤로 인해서 메뉴바가 사라져버리는 황당한 일을 겪었을 것이다.

💡 POINT!
JavaScript를 통해서 동적인 효과를 구현하는 것은 좋다. 하지만, 과한 레이아웃을 발생시키고 있지는 않은지, 아니면 동적 효과로 인해서 기존의 레이아웃이 어긋나고 있지는 않은지 고려하고 제한할 필요가 있다.

어설픈 수정은 버그를 불러온다 🥵

HTML, CSS 그리고 기대했던 JavaScript를 통한 동적 효과 추가까지. 기대를 하고 진행했던 리팩토링이었다. 하지만, 어설픈 수정은 기존에 없었던 새로운 버그를 만들어냈다.

여러 사용자가 있는 서비스도 아닌 작은 페이지를 작성하는 과정에서도 이런 일들이 발생하는 것을 보면서 개발자의 역할에 대해서 여러 생각을 하게 됐다. 단순히 기능이 동작하도록 만드는 것이 다가 아니라는 점. 이전에는 깔끔한 코드였다고 해도 어떤 기능을 추가할 때 의도치 않은 문제가 발생할 수 있다는 점. 또, 더러운 코드가 될 수 있다는 점 등...

이번에 겪은 일들이 다른 분들에게는 "무슨 저런 것도 모르나?" 싶을 수 있지만 코드를 작성하는 것에 대해서 당장 몇 줄 더 늘리는 것보다 고민을 더 잘 하는 것이 중요함을 느낄 수 있었던 일이었다.

결론은, 어설프게 코드만 작성하지 말고 고민을 더 해보자는 말이다.