HTML, CSS 기본기 회고록

1. 기본기를 다지며

최근 프론트엔드 개발자로 참여했던 'DevRoad' 팀 프로젝트를 성공적으로 마치며 큰 성장을 이루었습니다. React와 Next.js, 그리고 Tailwind CSS를 활용해 컴포넌트를 설계하고 UI를 구현하는 과정은 매우 흥미로웠습니다. 하지만 화려하고 복잡한 프레임워크 기능들에 익숙해질수록, 정작 그 기반이 되는 순수 HTML과 CSS의 동작 원리에 대해서는 깊게 고민하지 않고 '관성적으로' 코드를 짜고 있다는 느낌을 받았습니다.
인천대학교 앱센터 베이직 과제를 통해 제공된 HTML/CSS 기초 강의는 저에게 아주 좋은 자극이 되었습니다. 단순히 태그의 이름을 외우고 어떤 기능을 구체적으로 갖고 있는지에 대해 알 수 있었습니다. 과거에 겪었던 레이아웃 붕괴나 성능 저하의 원인을 기술의 근본에서 찾아볼 수 있었던 뜻깊은 시간이었습니다.

2. 공부 방법

최근 개인 프로젝트와 이력서, 코딩테스트를 준비 중이라 매일 시간을 들여 진행하기 힘들 것 같다고 판단하여 2월 24, 25, 26일 매일 새벽 3~4시까지 강의를 들었습니다. 강의를 들으면 Notion 페이지에서 보시다싶이 소주제별로 나눠서 개념을 정리했고 실습 코드는 바로바로 GitHub Repo에 커밋을 하였습니다. 또한 수업 자료 Repo의 image나 mp3 파일을 참고하기도 했습니다. 사실 HTML, CSS를 고등학교 때부터 접해왔던 언어라 "아 이런 내용이 있었지?" 훑어보는 느낌으로 2배속하여 들었습니다. GitHub 커밋은 docs, feat, chore 나누어 진행했습니다.

Notion 바로가기

GitHub 바로가기

3. 느낀점

① HTML

HTML을 다시 보며 제일 뼈맞았던 부분은 바로 '시맨틱(Semantic) 마크업'이었습니다. 이전에 React로 프로젝트를 할 때는 컴포넌트 이름 짓는 데만 열중했지, 막상 브라우저에 렌더링된 결과를 보면 온통 div와 span으로 도배되어 있었습니다.
이번 실습을 하면서 header, main, article 같은 태그들이 단순히 이름표가 아니라, 검색 엔진 최적화(SEO)나 스크린 리더 같은 웹 접근성에 얼마나 중요한 역할을 하는지 다시금 느꼈습니다. 그리고 폼(Form)을 만들 때 required나 type="email" 같은 기본 속성만 잘 챙겨도, 굳이 무겁게 JavaScript로 유효성 검사 로직을 짤 필요가 없다는 걸 보고 "아, 진짜 기본 기능부터 잘 써먹어야겠다" 싶었습니다.

② CSS

Tailwind CSS가 참 편하고 코딩 속도도 빨라지게 해주지만, 가끔 레이아웃이 미묘하게 꼬일 때면 어디서부터 잘못된 건지 찾기 막막할 때가 있었습니다. 이번에 순수 CSS를 하나하나 쳐보면서 그동안 대충 감으로 쓰던 원리들의 퍼즐이 딱딱 맞춰지는 기분이 들었습니다.

• 박스 모델과 반응형 뷰포트: 맨날 초기화 코드에 box-sizing: border-box를 기계적으로 복붙했었는데, 이게 없으면 레이아웃 붕괴가 왜 일어나는지 확실히 깨달았습니다. 그리고 vw, vh, rem 같은 단위들도 반응형에서 어떻게 굴러가는지 직접 써보며 감을 확실히 잡았습니다.

• Flexbox의 재발견: 그동안 무지성 '중앙 정렬용'으로만 썼던 Flexbox...ㅎㅎ 이번에 남은 공간을 나눠 갖는 flex-grow나, 화면이 줄어들 때 크기를 방어하는 flex-shrink의 내부 계산 방식을 뜯어보면서 "앞으로는 화면이 찌그러져도 당황하지 않겠구나" 하는 자신감이 생겼습니다.

• JS 의존성 줄이기: 툴팁이나 필수 입력창의 별표(*) 마크, 로딩 스피너 같은 걸 만들 때면 무조건 상태 관리(State)나 무거운 라이브러리부터 찾곤 했습니다. 그런데 CSS의 가상 요소(::before, ::after)나 @keyframes만으로도 충분히 부드럽게 구현할 수 있다는 게 정말 신기했습니다. 추후엔 불필요한 JS 연산을 줄여서 렌더링 성능을 높이는 고도화도 진행해보고 싶었습니다.

4. 마무리하며

이번 과제는 단순히 예제 코드 몇 줄 따라 치는 걸 넘어서, 제가 평소에 쓰던 도구들의 '진짜 본질'을 파고드는 시간이었습니다. 프레임워크 뒤에 숨어있던 기본기를 확실히 잡을 수 있었습니다.

인천대학교 앱센터에 합류하게 된다면, 겉보기에만 번지르르한 UI 말고 속까지 꽉 찬 서비스를 만들고 싶습니다. 시맨틱 마크업으로 기본을 탄탄하게 다지고, 브라우저 렌더링 원리까지 꼼꼼하게 고려하는 개발자로 성장하고 싶습니다. 앱센터에서 치열하게 고민하면서, 진짜 사용자에게 제대로 된 가치를 전달하는 멋진 서비스를 함께 만들어가고 싶습니다!

이만 글을 마쳐보겠습니다. 끝까지 읽어주셔서 감사합니다~