프로젝트 결과물
프로젝트 미리보기 (사진)
프로젝트 주제 : 영화 소개 사이트 만들기
프로젝트 소개 : 좋아하는 영화인 SpiderMan: Into the spider-verse를 주제로 소개 사이트를 만들어 보았습니다.
제작 기간 : 2023. 10. 20~23
목표 : 모달, 애니메이션, 동영상, 음악 기능 넣기, 갤러리 구현
📒 소개에 앞서
국비학원 3개월차에 진행한 영화 소개 프로젝트 입니다.
제이쿼리를 사용하지 않은 순수 JS로 애니메이션과 모달창을 구현하였습니다.
각 칸에 마우스를 올리면 글자가 나타납니다.
📷 레이아웃 소개
스파이더맨의 원작인 코믹스를 생각하며 네모칸으로 구분된 만화책의 형태로 만들고 싶었습니다. 만화책의 형태니까 페이지가 넘어가는 느낌을 넣을까, 좀 더 영화처럼 팝아트 느낌을 내볼까... 싶었지만 기능 > 디자인이 되어야 했기에 가운데에 거미 움짤을 기준으로 컨셉을 잡았습니다. 가운데에서 6개의 색을 뽑아내어 각 칸마다 테두리 색으로 꾸며봤습니다.
칸은 총 6칸으로 만들었으며 "I AM AMAZING!"이 붙어있는 말풍선을 제외한 나머지 5칸에만 기능을 넣었습니다.
🐈⬛ 본격적인 소개
1. top-left : trailer 🎞️
영화의 예고-+**편 동영상을 재생할 수 있는 trailer 칸 입니다.
간단하게 비디오 파일을 넣었습니다.
2. middle-left : sound track 🎧
제일 마음에 드는 sound track 칸 입니다. 실제 영화의 sound track은 더 많지만 칸에 맞추다 보니 몇 곡이 생략되었습니다. 음원은 네이버 공식 음원 사이트 VIBE에서 구매했습니다. 곡을 클릭하면 엘피가 재생되는 느낌을 주기 위해 이미지에 애니메이션을 주어 회전하게 했습니다.
원래는 엘피판을 누르는 걸로 일시정지 / 재생을 하려 했으나 이전에 눌렀던 곡들이 겹쳐 들리는 문제를 못 해결해서 일시정지 기능만 넣었습니다 .. 🥲 그래도 제일 맘에 듭니다.. 굿 👍
3. middle-right : cast & crew 🧑🤝🧑
감독과 출연진들의 목록을 볼 수 있는 칸 입니다. IMDB에 올라와 있는 출연진을 참고하여 작성했고, 글자가 많다 보니 검정 배경, 노란 글씨로 간단하게 넣었습니다.
다만 선생님이 제껄 보실 때 이 칸에서 배우들 사진을 여러번 클릭하셨었는데, 배우의 소개 링크로 연결했는지 확인하신 듯 합니다. 링크 연결할 생각을 못해서 아쉽습니다.
4. bottom-left : gallery 🖼️
영화의 스틸컷들을 볼 수 있는 gallery 칸 입니다.
10장 정도 넣었는데 지금 보니 (1 / 10) 이렇게 현재 페이지와 전체 페이지를 적어줄 걸 그랬네요
중간에 2편이 섞인...것 같기도 하고..
5. bottom-right : awards ✨
마지막 awards 칸 입니다. 실제 영화의 수상 내역은 훨씬 길지만 간추려서 넣었습니다.
영화의 엔딩 크레딧같은 느낌을 내고 싶어 왼쪽은 오른쪽 정렬, 오른쪽은 왼쪽 정렬을 해서 디자인했는데 심플하면서 맘에 드는 칸 입니다 ㅎㅎ
🖤 가장 어려웠던 부분
대부분 처음 만들어 보는 기능이었고 .. css로 제대로 제작해 본것도 처음이어서 시작부터 잘못하고 말았다. 근데 그게.. 바로 발견이 안되고 다 완성하고 나서 다른 분한테 "깨지는지 함 봐주세용 ^3^~~" 한 후에 발견됐다..ㅠ 바로 모든 크기를 px로 넣어버린 것..!
노트북으로 작업했는데 화면이 데탑보다 작다보니 내 화면에서 잘 보이면.. 당연히 다 잘 보일거라 생각했다. 이전에 만들었던 것들은 안 깨졌었는데..!! ㅠㅠ 데탑에서 열어보니 비율이 묘하게 안맞는 문제를 제출 전 날 밤에 발견해서 2시간 동안 반응형 css로 수정했다. 앞으로 만들땐 ... width와 height는 100%로 잡아야 한다는 것.. 그리고 max-width로 조절해야 된단걸.. 명심 또 명심
🖤 후기
기능면이나 디자인면이나 어느정도 만족할 만한 결과물이라곤 생각하면서 아쉬움도 좀 많이 남는 작업이었다. "기능 > 디자인" 이걸 명심하면서 했는데도 자꾸 디자인 욕심이 생기고.. 디테일에 집착하다가 너무 많은 시간을 투자하고 이런게 많았다. 누가 이 결과물을 주말동안 아침부터 새벽까지 작업한 거라고 생각할까 ㅋㅋㅋㅋ ㅠㅠ
나한텐 그 시간을 투자하는게 최선이었지만 어쩔 수 없이 단점들도 좀 보이고 더 잘 만들 수 있을 것 같다는 생각도 든다. 그치만 들어간 시간들을 아까워하진 않을 것..! 내 결과물.. 나라도 자랑스러워 하자..
'Backend > 미니 프로젝트' 카테고리의 다른 글
| [국비 프로젝트] HTML & CSS & JS : 자기소개🙋♀️ 페이지 (2) | 2023.11.25 |
|---|
