대한항공 클론코딩 / 패스트캠퍼스 1차 과제
실 프로젝트 기간
2024년 2월 21일 ~ 2024년 2월 25일
대망의 패스트캠퍼스 1차 과제.. 자신이 원하는 사이트의 레이아웃을 클론 코딩하는 것이었다.
과제에서 필수로 요구사항은 크게 어렵지 않았다.
- 과제에 대한 설명을 포함한 README.md 파일 제공하기
- 과제 결과와 비교할 수 있는 실제 사이트 주소 명시하기
- 과정에서 사용한 프로젝트 폴더/파일 모두 포함하기
- 실제 서비스로 배포하고 접근 가능한 링크 추가하기
부트캠프 과정 중 첫 과제여서 그런지 기술적인 필수 요구사항은 없었다.
다만 선택 요구사항이 몇 가지 있었는데, JS를 CSS로 대체할 수 있는 부분은 최대한 CSS로 작성해야 했다.
(어디까지 대외비인지 알 수 없어서 자세히는 적지 않겠다..)
내가 클론코딩 과제의 주제로 처음 선택했던 사이트는 ‘카카오’였다.
처음엔 그동안 배운 html, css 내에서 내가 잘 응용만 하면 만들 수 있을 것 같다고 자신했다. 왜 그랬지..
솔직히 나는 그동안 JS로 알고리즘 문제 푸는 연습만 했지, html과 css는 처음 들었던 강의 외에는 따로 더 공부하지 않았다..
그래서 처음부터 난관에 봉착해서 카카오 페이지 헤더 부분 레이아웃 잡는 것에만 3일을 끙끙 앓았다.
지금 생각해보니 한 부분에 너무 많은 시간을 소모한 것 같다.
온라인 강의에서 스타벅스 페이지 클론코딩 실습을 했는데, 강의 영상을 돌리고 또 돌리고 계속 보면서 따라했지만, 결국 카카오의 헤더도 만들지 못 하고 클론코딩 사이트를 변경하게 되었다..
그렇게 변경하게 된 사이트는 ‘대한항공’이였다.
과제 제출 이후에 발표회를 진행했는데, 그룹스터디 내에서 우수 결과물을 하나 뽑아 그룹 대표로 발표를 했다.
너무나 감사하게도 내가 발표하게 되었는데, 발표 후에 질문을 받았다.
Q. ‘왜 대한항공 페이지를 선택하셨나요?’
그냥 생각나는 여러 사이트를 몇 가지 방문했고, 대한항공이 지금까지 내가 배운 css 스킬을 사용하기에 좋아보였다.
먼저 결과물의 주요내용부터 보여주자면, 아래와 같다.
1. 전체 페이지
- header와 footer 포함 총 6개의 section
2. header
- 메인 메뉴 리스트를 마우스 hover 시 나타나도록 구현
- 서브 메뉴 hover 시 아웃라인 나타나는 것 구현
3. swiper
- swiper 라이브러리 사용하여 swiper 기능 구현
- hover 시 이미지 확대 효과 구현
4. experience section
- hover 시에 섹션 전체 높이 확장 및 말풍선 추가 효과 구현
5. badge
- mouseover, mouseout에 따른 badge 확장 효과 구현
6. scrollTo
- 스크롤 카운트에 따른 scrollTo 버튼 나타나는 효과 구현
- 버튼 클릭 시 페이지 상단으로 이동 기능 구현
css에 대한 지식이 부족한 상태로 처음 웹사이트를 클론코딩 하려니 정말 막막했다..
앞서 말 했던 것 처럼 헤더 하나 만드는 것조차 힘들어서 3일을 끙끙 앓았다.
그 부분에 시간을 너무 많이 쓴 탓인가.. 중간에 사이트를 변경하니 시간의 촉박함을 느꼈고 매일같이 새벽 늦게까지 과제를 붙들고 앉아있었다.
사이트 변경 후에도 처음엔 어디서부터 어떻게 손을 대야 할 지 몰라서 스타벅스 클론코딩 강의를 참고하며 코드를 작성했다.
섹션 1번까지 강의를 참고하며 진행했을 때 였을까? 점점 감이 잡혔다.
내가 원하는 부분을 만들기 위해 부모 태그를 어떻게 감싸줘야 하는지 알 것 같았다.
감이 잡히니 강의를 참고하는 것 보단 원본 사이트를 참고하고 코드를 작성하는 것이 더 편해졌다.
원본 사이트의 구조를 살피고, 하나씩 천천히 채워나가다보니 슬슬 작업에 속도가 붙기 시작했다.
그렇게 완성된 내 코드는 이렇게 코드를 짜면 안 되지만 어찌저찌 돌아가긴 하는.. 최상단의 비둘기 짤이 되었다🤣
좋았던 점
일단 내 스스로 웹사이트를 만들었다는 것.. 그게 가장 큰 것 같다.
처음에 시작할 땐 강의를 보며 따라하는 것이 아닌 나 혼자 힘으로 만들 수 있을까? 라는 생각이 가장 두려웠다.
그러다 중간에 있었던 그룹스터디 날 다른 조원들의 중간 과정을 보며 자존감이 또 바닥을 쳤지만,
결국엔 또 극복하고 끝까지 붙잡고 정해진 시간 내에 제출까지 마무리 했다는 그 뿌듯함은 잊지 못할 것 같다.
아쉬운 점
가장 크게 아쉬운 점은 전체 width를 100%로 맞추지 못했다는 점인 것 같다.
어떻게 보면 가장 기본적인 부분이라 생각하는데, 처음에 width를 정해진 픽셀 단위로 잡았고,
이후 섹션들을 모두 그에 맞춰 크기 작업을 했다.
하지만 과제 제출 전에 그 부분을 모두 수정하기에 시간이 부족할 것 같았다.
섹션 안의 작은 박스 하나하나 전부 계산된 픽셀 단위로 고정되어 있었기 때문이다 ㅠ
전체적으로 코드가 너무 어지러운 부분이 많고, 중복 사용된 부분이 많다.
이런 부분들은 앞으로 중복을 줄이는 연습을 해야 할 것 같다.
예를 들면 클래스를 하나로 묶는다거나..
추가로 위의 badge 파일에 보이는 것 처럼, badge가 내 의도와는 다르게 동작했다.
이 부분은 추가로 공부 해서 수정할 예정이다.
배운 점
가장 크게 배운 점은 당연 코딩 학습도 맞지만, 끝까지 포기하지 않는 마음가짐인 것 같다.
과제를 하며 다른 수강생들과 내 모습을 비교할 땐 정말 이러다 무너지는 건 아닐까 라는 걱정도 들었다.
하지만 거기서 좌절감 보단 더 열심히 할 수 있는 동기부여를 더 크게 얻은 것 같다.
뭐든 열심히 한다면 결국엔 해낼 수 있다는 자신감이 가장 크게 배운 점 같다.
개인적인 생각으로는 html이 탄탄해야 css 속성을 넣는 것이 편하다는 것을 느꼈다.
처음엔 b(편의를 위해 알파벳으로 표기하겠다)클래스에 css를 작성했는데, 내가 원하는 요소를 움직이기 위해선 그의 부모요소인 a클래스에 속성을 부여해야 했다.
이런 부분에서 내가 스타일을 적용하고 싶은 부분이 부모요소로 잘 감싸져 있는지, 해당 요소를 움직이기 위해 부모요소가 더 필요하진 않는지에 대해 판별할 수 있는 능력이 더 생겼다.
그리고 생각보다 css가 훨씬 어렵다는 점.. 이 또한 배운 점이라면 배운 점이다.
앞으로 노력할 점
페이지를 확대 축소 했을 때 요소들이 가운데로 모이는 것.
Flex와 Grid를 더 활용할 것.
Swiper 등 외부 라이브러리 사용을 지양하고 스스로 JS 코드를 작성 해볼 것.
코드 리뷰 받은 부분들을 참고하여 코드를 리펙토링 해볼 것.
전체적으로 코드를 야매로 작성한 부분이 많았다.
예를 들면 아이템의 위치를 margin을 이용해 대충 눈대중으로 맞춘다거나.. 한 것들
그런 부분들을 좀 더 비율적으로 맞추는 연습을 해봐야 할 것 같다.
위의 링크를 클릭하면 내가 실제로 배포한 데모 페이지로 이동한다!
실제 웹사이트를 만들어본 것이 처음이라 아쉬운 점도 많고, 부족한 점도 많지만,
과제를 통해 직접 실습하며 많은 것들을 학습할 수 있어서 좋았다. 정말 많이 배운 것 같다.
앞으로도 늘 성장할 수 있도록 노력 해야지!!