[포스코 x 코딩온] 웹개발 풀스택 코스 6주차 교육 회고 feat. 프론트프로젝트

벌써 6주차가 되었다. 시간이 참 빠르다.

이번 한 주는 6주까지 배운 모든 걸 쏟아 붙는 프론트프로젝트 제작에 들어갔다.

프론트까지 배운 모든 기술들을 동원해서 팀이 원하는 웹사이트를 제작하는 것이었다.

 

우리 조는 모두 넷플릭스를 좋아해서 넥플릭스 뮤직이라는 것을 제작해 보자고 합을 모았다.

비슷하게 영상 서비스를 하는 두 회사인데, 넷플릭스가 뮤직이 없다는 것이 조금 의아했다.

그래서 상상력을 동원해 만약 넷플릭스가 음악시장까지 확대를 한다면 어떤 모습일까? 라는 생각을 했다.

 

전체적인 틀은 넷플릭스를 따라가지만, 기술적인거나 부분적으로 음악적인 부분을 더 살릴 수 있게 구상을 했다.

또한 넷플릭스 홈페이지만의 특별함은 큰 메인 배너의 영상 재생이라고 생각했다. 그래서 영상 배너를 조금은 어렵지만 제작해 보자고 했다.

 

우리가 만든 넷플릭스뮤직 로고

 

일주일간 거의 잠을 못잔거 같다.

막상 실전에 들어가니 구글링 할 내용도 너무 많고, 작업량도 어마어마 했다.

하나의 웹사이트를 만드는 게 얼마나 큰 일인지 새삼 느끼게 되었다.

아래 이미지들은 우리가 만든 홈페이지의 간략한 모습이다.

 

넷플릭스 오리지널 홈페이지와 같이 큰 배너를 활용했다.

Swiper라이브러리를 사용했는데, 생각보다 다루기가 매우 까다로웠다. 그래서 공부가 많이 필요했다.

Swiper홈페이지에 들어가 좀 더 추가적인 기능들이 있는지도 학습하게 되었다.

Swiper가 생각보다 다양한 기능들을 많이 제공 하고 있었다.

저기에 영상을 어떻게 넣지? 라고 많이 걱정을 했었는데, Swiper에서 제공하는 이벤트 기능들이 있었고,

그 이벤트 기능을 활용하면 해당 슬라이드의 배열 단위가 나왔다.

그럼 그 배열에 따라 for반복문을 넣어주고, 영상들을 주르륵 밀어서 넣어주면 되는 것이었다.

항상 느끼는 거지만, 규칙을 찾아내고, 공통점을 찾아내서 한번에 자료를 밀어넣는 재미가 참 쏠쏠하다.

그 재미로 계속 코딩을 하는 것 같다.

 

메인 화면은 위와 같이 작업을 했다. 넷플릭스 답게 앨범자켓이 크게 나오게 만들었다.

일반 음악사이트에서는 음악 제목이 크고, 앨범 자켓은 작게 표현이 되는데 우리는 그 반대로 진행을 했다.

그 이유는 앨범 자켓도 하나의 작품이라고 생각하고 접근을 했다. 또한 하나의 곡이 아닌, 곡과 곡이 어우러지는 스토리를 만들고 싶었다.

앨범 단위로 듣는 매니아 층을 공략한 것이다.

또한 드라마나 영화 제작물을 다루는 넷플릭스 스타일에 맞게 시각적인 요소를 부각시키고 싶었다.

 

배너에 영상을 넣고 싶었던 이유도 그 맥락이 동일하다.

요즘은 귀만 즐거우면 되는 시장이 아니다.

음악 제작 보다 뮤직비디오 제작에 더 많은 투자를 할 정도다.

그렇기 때문에 이제 음악은 청각과 시각이 어우러져야 한다.

뮤직비디오에 대한 부가가치를 더 높이기 위한 것이 우리가 이 넷플릭스뮤직을 구상한 이유라고 말할 수 있겠다.

 

아직은 유튜브뮤직이 영상과 음악의 조화의 선봉에 있지만,

만약 미래에 넷플릭스가 음악시장까지 확장을 한다면 저런 모습이고, 저런 타켓을 노리지 않을까 싶은 그런 상상을 많이 해보았다.

 

프로젝트를 하면서 강사님이 많은 도움을 주셨다.

프로젝트 하나 하나 관심일 많이 가져주셨고, 막히는 곳이 있음 언제나 달려와주셔서 해결해 주셨다.

너무나 감사하다.

강사님의 서포트로 이번 프로젝트에서 많은 것을 배웠다.

역시 배운 것은 실전에서 써먹어봐야 몸에 체득된다.

이번 기회로 깃과도 매우 가깝게 되었다.

이제 터미널을 이용하는 것이 무섭지 않고 친근하다.

이번 프로젝트는 나에게 너무 뜻깊은 작업이었다.