(Project) SideProject ClonePaging (HTML&CSS, JS)

수강 중 Nodejs라는 걸 배우기 전에 

 

여태 까지 배웠던 HTML&CSS, Javscript를 이용해서 ClonePaging 하는 개인 프로젝트를 맞이하게 되었다!!!

 

저 3가지의 스택들을 배우는 중간중간에 ClonePaging 하고 싶은 것을 찾아 하는 시간이 있긴 했다

 

다만, 제대로 하지도 않고 설렁설렁해서 아쉬웠는데 잘되었다는 생각을 했었다

 

개인 프로젝트 당시의 MondayKiz 메인 화면

어렸을 때 부터 좋아했었던 MondayKiz 소속사를 ClonePaging 하기로 마음을 먹었다

 

개인 프로젝트의 기간은 1주일! (22.10.06 ~ 22.10.12) 

 

우리 기수 전인원들이 프로젝트 시작전 본인들의 희망 페이지를 찾고 승인받기 위해 한 명씩 한 명씩

 

담당 교수와 이야기를 나눴다

 

그러곤 교수는 내 차례 때 이렇게 말을 했다

 

너는 이거 전체 페이지 Clone 할 수 있잖아? 거기에 반응형도 넣자

 

오케이... 어느 정도는 예상했다

 

그전에 중간중간에 조금씩 해서 메인페이지 하나는 만들어 놓은 상태였으니....

 

개인 프로젝트 주간 계획

일단은 전체 페이지를 PC 브라우저 기준으로 만들고 보자 라는 계획이었다

 

다행히? 메인페이지와 MondayKiz 가수 쪽 상세페이지까지는 어느 정도 틀을 잡아놨고, 세부 기능들과 CSS 효과 정도만 

 

손을 보면 돼서 수월했던 거 같다

 

그렇게 진행하다 문제는 상단 메뉴바 dropDown 효과 였다

 

지금이라면 시원하게 부트스트랩이나 React 라이브러리 설치해서 해결했겠지만

 

한번 정도는 구현해보고 싶었다

 

상단 메뉴바 dropDown

ㄷㄷ.. 완성!!!

 

많은 에러와 말도 안 되는 코드들을 쓰면서 결국 완성했다.. ㅋㅋㅋㅋ;; 

 

README.MD에 작성한 dropDown 사항

그렇게 쭉쭉 PC 기준으로 모든 페이지를 만들고 있는 와중에

 

또 하나의 문제를 만나게 된다

 

그건 역시나 마우스 hover때 CSS효과 였는데

 

버튼의 색상이 왼쪽에서부터 오른쪽 끝까지 서서히 채워지는 효과였다

 

이런저런 실험을 하던 와중에 가상클래스 사용해서 문제를 해결하였다

 

가상클래스를 이용하여 서서히 버튼 색상 채우기 

이 정도까지 효과를 만들고 보니

 

조금은 원본페이지를 잘 따라 한 거 같아서 볼만해졌다

 

그렇게 무사히 PC기준으로 모든 페이지와 라우팅 설정을 끝 마치고

 

반응형에 돌입하기 시작했다

 

당시 만들 때 반응형 브레이크포인트(Break-point)를 알지 못해서

 

무식하게? ㅋㅋㅋㅋ 원본 페이지를 전체화면에서부터 조금씩 줄여보면서 해당 페이지가 반응형이 적용될 때

 

나도 그때 반응형이 적용되도록 코드를 추가하였다

 

ㄷㄷ 잔인한 media query의 현장

 

반응형 코드만 약 200줄이다....

 

그렇게 무식하곸ㅋㅋㅋ 빠르게 하던 와중에

 

일정너비가 됐을 때 상단 메뉴바 녀석들이 없어지고 버튼으로 나타나는 전형적인? 모바일 형식으로

 

버튼을 클릭했을 때 없어졌던 메뉴들이 등장하는 효과를 줘야 되는 상황을 만났다 (뭔 소리야....)

 

메뉴 합쳐지기 전 상황

(좌) 일정 너비에서 사라지면서 메뉴버튼 등장 / (우) 해당 메뉴 버튼 클릭 시 사라졌던 메뉴들 등장

 

위의 그림과 같이 되도록 만들었다,, 원본 페이지처럼 최대한 비슷하게...

 

이렇게 1주일 동안 꾸준하게 보면서 어떤 게 어색하게 출력되는지, 어떻게 하면 좀 더 자연스럽게 출력할 수 있는지

 

또는, 뭐가 좀 더 원본페이지처럼 할 수 있는지 계속 수시로 보고 수정하고 또 보고 수정하고 했던 거 같다

 

발표 전날부터는 ppt를 만들어서 발표 준비를 했었다

 

발표할 때 그냥 내 페이지만 보여주려고 했는데 ㅋㅋㅋ 교수님이 원본페이지를 같이 틀어놓고 비교를 하게 만드셨다... 

 

덕분에 엄청난 어그로와 함께... 발표를 진행하게 되었고

 

그냥 포기하고 받아들였다 ㅋㅋ

 

PPT 첫 페이지

 

마지막으로 너무 좋은 경험을 하고 느낄 수 있었던 첫 개인 프로젝트였다

 

평소에 좋아하던 가수의 소속사 페이지를 직접 만들어 보는 게 좋았지만,, 사실 무엇보다 좋았던 거는 

 

과거의 나를 뛰어넘었다는 면에서 좋았다. 

 

대학 때도 비슷하게 좋아하는 주제를 정해서 소개하는 페이지를 제작하곤 했었는데 그때 정말 볼품없이 만들어서

 

너무 아쉬웠는데 요번에 그런 나를 뛰어넘어서 제대로 된 페이지가 나온 거 같아서 개인적으로 엄청 뿌듯했다