패스트캠퍼스의 '프론트엔드 개발 초격차 패키지' 중 스타벅스 웹 클론코딩 프로젝트의 결과물에 대한 회고입니다.
지난 겨울, 인공지능과 별 찍기를 벗어나 처음으로 '웹 프론트엔드' 공부를 시작하며 따라 만들어 본 스타벅스 웹 클론코딩에 대한 회고를 이제서야 정리합니다.
🌟 왜 시작했나요?
HTML과 CSS를 이용해서 무언가 만들어볼 수 있는 튜토리얼은 이미 많지만, 간단한 블로그 같은 것보다도 일반적으로 '웹사이트' 라고 했을 때 납득할 수 있을만한 완성도를 갖춘 사이트를 만들어보고 싶었습니다.
처음부터 이런저런 기능을 갖춘 사이트를 만들 수는 없었지만, HTML과 CSS, 그리고 JS의 기본적인 함수 몇 가지만 사용해서 제게 이미 친숙한 기업의 웹사이트를 구현해볼 수 있다는 점이 흥미로웠습니다.
🌱 뭘 배웠나요?
자세한 내용은 총 8개의 게시물로 나누어 작성한 repo 에서 확인하실 수 있습니다.
우선, 생활코딩 강의를 통해 아주 기본적인 웹 페이지만 한 개 발행해본 수준에서 시작했기 때문에 CSS를 다루는 데 많은 공부가 필요했습니다.
- 선택자의 개념과 종류 및 우선순위
- 상속과 강제 상속
- 대표적인 CSS 속성들
과 같이 기본적인 스타일링 지식들을 학습했습니다. 제게 가장 유의미했던 본 강의만의 장점은 각 CSS 속성이 다른 속성 및 레이아웃과 어떻게 맞물리는지에 대해 실제 프로젝트를 진행하며 확인해볼 수 있다는 점이었습니다.
생각처럼 돌아가지 않는 CSS
"width는 너비, height는 높이를 나타내는 속성이다", "display: flex 를 사용하면 자식 요소를 가로로 정렬하기 용이하다" 같은 내용은 사실 이해보다 암기에 가깝기 때문에 숙지하는 데 오랜 시간이 걸리지 않았습니다. 하지만 실제로 CSS를 작성하다 보면 생각대로 되지 않는 것이 많습니다.
한 예로, 사이트 헤더 영역의 버튼들을 가로 정렬하기 위해 div 컨테이너를 하나 만들면서 height, width가 의도한 대로 지정되지 않는 문제를 겪었습니다.
.container {
height: auto;
width: auto;
}자식 요소들의 크기에 맞추어 컨테이너 크기가 지정되도록 하려고 했으나, 처음에는 자식 요소가 있음에도 컨테이너가 아예 화면상에 표시되지 않는 문제가 발생했습니다.
원인은 block 요소에서 width: auto 와 height: auto 를 분리해서 생각해야 하는 데 있었습니다. block 요소의 height: auto 는 자식 요소 크기를 기준으로 설정하지만, width: auto 의 경우에는 부모 요소 크기를 기준으로 설정합니다. 따라서 내용물 크기에 맞춰 자동 조절되지 않는다는 점을 배울 수 있었습니다.
이에 더해, 화면 크기에 따른 반응성을 생각하느라 auto 값을 요소 곳곳에 지정했더니 top, left 등 위치를 지정하는 속성들이 적용되지 않는 경우를 종종 겪었습니다. 부모 요소의 height를 auto로 설정하면 특정값이 들어가지 않은 것으로 판단되어 자식 요소의 top 속성이 작동하지 않는다는 것 역시 문제를 겪고 해결하며 배운 부분입니다.
스타벅스 웹 클론코딩은 실제 페이지를 따라 구현하는 만큼 한 페이지 내에 배치해야 할 요소들이 많기 때문에, 속성들이 맞물려 오류가 발생하는 상황을 직접 겪어보고 해당 속성의 적용 조건이나 원리적인 부분까지 더 깊이 이해할 수 있었습니다.
💬 느낀점과 마무리
본 프로젝트를 통해, 기술적으로는 CSS의 여러 속성들을 배우고 다루어 보며, 외부 라이브러리와 애니메이션 관련 속성들을 활용하여 동적인 웹페이지를 구현해볼 줄 알게 되었습니다. 또한 자바스크립트로 페이지 상의 요소를 선택하여 변화를 주는 코드를 작성해보며 HTML 문서와 JS 스크립트가 어떻게 상호작용하여 웹페이지를 구성하는지 알 수 있었습니다.
장벽을 세우지 말자
개인적으로는 HTML과 CSS만으로도 충분히 완성도 있는 웹페이지를 만들 수 있다는 점 을 깨달은 것이 본 프로젝트의 가장 큰 의의였습니다.
이 때는 프론트엔드 개발에 처음 발을 들인 만큼, 아직 개발에 높은 장벽을 느끼고 있는 시점이었습니다. '나는 아직 아무것도 모르니까', '나는 비전공자니까' 같은 생각들로 스스로 장벽을 높이고 있었다는 사실을 깨닫고, 공부에 더 열정을 쏟고자 다짐하게 된 계기였습니다.
