요즘은 패스트캠퍼스에서 나온 개인별 2차과제를 진행하고 있습니다. 영화 정보 API(OMDBAPI)를 사용해서 입력에 맞게 검색을 해서 화면에 렌더링을 해주고, 더 나아가 상세정보까지 볼수있게 만드는 것이 목표입니다. 제 프로젝트의 이름은 제 성씨와 메가박스를 합친 노랑박스가 당첨이 되었습니다!(무려 공모전을 통해)
2차과제는 아무래도 가이드라인이 1차과제보다도 명확하다 보니.... 수강생분들의 결과물이 비슷해지는 수렴진화(?)가 발생하고 있는것 같습니다. 무엇보다도 강사님이 예시로 올려주신 사이트 자체가 매우 우수한 사용자경험과 디자인, 기능을 가지고있다보니, 어떻게 보면 다들 해당 페이지를 벤치마킹하는것처럼 보이는게 당연해보입니다.
좀 바꿔볼까?
연도검색과 한번에 여러개 검색과 같은 기능의 경우, 좋은기능이고 매우 편리하지만, 다들 그렇게하다보니.... 저는 색다른 것을 넣고싶었습니다(과제 스펙에도 창의적이라는 단어가!). 따라서 생각을 해본것이
-
SPA 개발
우선은 Single page로 구성을 해보는것입니다. 영화 검색과 상세정보를 보여주는 정도의 기능이면, 많이 무거운 기능도 아니기때문에 SPA로 구성을해도 크게 문제가 되지않습니다. 또한, 최근 기업들이 JD를 읽어보면 SPA개발 경험을 요구하는곳도 많이 봤기에... 열심히 다중진입점으로 HTML을 구성하다가 전체 코드를 리팩토링하게 되었습니다. -
Select태그가 아닌 버튼으로
Select태그 그자체로도 매우 직관적이고 간편하지만, 저는 버튼들을 활용하여 딱딱 클릭을 하면 그에 맞는 결과값들이 나올수있게 구성을 해보았습니다. -
시대별 검색
영화를 연도에 맞게 검색하는 것도 중요하지만, 저희는 연도를 모를때가 더 많습니다. 또한 영화를 공부하는 사람들도, ~~년도에는 이랬고 ~~이때는 이러한 영화가 많았다와 같이 시대별로 영화를 분류하는 경우가 많기 때문에 조금 더 사용자 친화적이라고 생각했습니다. 따라서 버튼들을 활용하여 2020년대부터 1980년대까지 각각 검색을 할수있도록 구성을 해보았습니다.
현재까지는 위와같은 기능들을 중점으로 사이트를 개발하고있습니다. 자세한 코드에 대한 내용들은 프로젝트 제출후 몇가지 공개해보도록 하겠습니다.
진행상황
아마 수강생분들은 이 영화 결과창은 거의 비슷할것으로 보입니다. 샘플사이트와 다른점이라면 저는 검색창을 메인화면에만 두었고, 결과창에 추가적으로 총 영화 개수와 종류, 검색어를 다시한번 볼수있도록 위쪽에 구성을 하였습니다.
- 무한스크롤
- 로딩 progress circle
또한 위와같은 기능들이 가이드라인에 있었기에, 역시나 기능 구현을 해주었습니다. 무한스크롤의 경우는 intersection observer를 사용했고(eventlistner는 간편하지만 성능 저하가 너무 심했습니다), 로딩 화면은 fetch-await 이전부터 render이 완료되는순간까지 띄어놓는것으로 했습니다.
영화 포스터를 클릭하면 들어올수있는 상세페이지입니다. 여기서는 api fetch 옵션을 s가 아닌 id i를 사용하여 fetch할수있습니다. 거기서 몇가지의 중요한 정보들만 화면에 렌더링 해주는것으로 구성했습니다. 이때, 정보가 없는경우들을 대비한 exception처리들을 추가적으로 진행을 해주었습니다.
진행할것
얼추 결과물은 완성이되었지만, 디테일을 더 해야하는부분들이 많습니다. 우선 대부분의 exception 케이스들은 전부 대응을하였고, 남아있는것은
- 스켈레톤 ui
- 반응형
정도인것 같습니다. 1차 과제때도 반응형 처리를 못했었는데... 이번에 큰맘먹고 구성을 해보려고 합니다!
캬