시작하며
이번 프로젝트의 주요 기능은 구현을 마쳤기 때문에 이번 파트에서는 모바일 화면에서도 서비스를 정상적으로 이용할 수 있도록 반응형 페이지를 구현하고 처음 접속하는 유저가 서비스를 이용할 수 있도록 매뉴얼을 팝업으로 보여주도록 구현하였다.
이 서비스를 기획한 의도가 영화나 드라마의 장면에 활용되는 것인데 실제로 스마트폰에서 검색하는 장면이 많이 나오기 때문에 모바일 구현도 중요하다고 생각했다. 그리고 로그인을 하고 설정 페이지에 들어가기 전까지는 사이트의 이용방법을 알기 쉽지 않기 때문에 별도로 유저에게 안내하는 과정이 필요하다고 생각했다. 처음에는 별도로 렌더링 페이지를 만들까라고 생각했지만 검색 창이 있는 메인 페이지가 사이트에 접속했을때 나오는 첫 페이지여야 한다고 판단해서 팝업 창 형태로 구현하였다.
모바일 반응형 구현
모바일 페이지는 웹과 다른게 세로가 가로보다 더 긴 화면을 사용하는 경우가 많기 때문에 미디어 쿼리를 사용해 flex-direction을 column으로 설정해주거나 모바일에서 사용할 컴포넌트를 별도로 만들어주는 방식을 사용하였다.
설정 페이지
웹
모바일
설정 페이지의 탭 메뉴 부분은 select를 사용해서 선택하도록 화면 위쪽에 보여질 수 있도록 컴포넌트를 별도로 만들고 margin, padding도 적절하게 사용하였다.
가장 고민되었던 부분이 검색 페이지 설정 화면인데 검색 데이터를 추가할 경우 모바일 화면에 맞춰서 사이즈를 줄이면 너무 작아지기 때문에 overflow-x:auto로 설정하여 가로 스크롤이 생기도록 설정하였다.
메인 페이지
웹
모바일
메인 페이지의 경우 요소들의 전반적인 크기만 설정해주고 검색 창을 클릭했을때 위 이미지처럼 보여지도록 별도의 페이지를 구현해주었다. 모바일에서는 input 창에 포커스할 경우 가상 키보드가 아래 부분을 차지하기 때문에 다른 포털 사이트를 참고하여 비슷한 페이지를 설정해주었다.
검색 페이지
웹
모바일
검색 페이지는 설정 페이지와 마찬가지로 overflow-x:auto로 설정하여 화면을 넘어가는 데이터가 있는 경우 스크롤이 생기도록 하였고 화면을 넘어가지 않도록 몇가지 카테고리 버튼들이 보여지지 않도록 설정해주었다.
매뉴얼 팝업 구현
설명해야 하는 부분이 생각보다 많고 이미지도 활용하여야 하기 때문에 팝업 창 하나에 모든 컨텐츠를 담는 것은 무리라고 판단해서 슬라이드 형태로 구현하게 되었다.
//매뉴얼 닫기(일주일간 보지 않기) 관련 함수
import { useState } from 'react';
const useManual = () => {
const localDate = localStorage.getItem('manualPopUpDate') || new Date();
const lastDate = Date.parse(localDate)
const NowDate = Date.parse(new Date())
const [isPopUpOpen, setIsPopUpOpen] = useState(lastDate<=NowDate);
const setDate = () => {
localStorage.setItem('manualPopUpDate', new Date(new Date().setDate(new Date().getDate() + 7)));
setIsPopUpOpen(false);
};
return [isPopUpOpen, setDate];
};
export default useManual;사용법을 숙지한 유저에게 페이지가 새로고침될 때마다 팝업이 보여지는 것은 불필요하기 때문에 팝업 창을 닫으면 일주일동안 보여지지 않는 형태로 구현하였다. 처음에 로컬 스토리지에서 마지막에 팝업창을 닫은 날짜가 있다면 오늘 날짜와 비교해서 팝업 오픈 여부를 결정하고 닫기 버튼을 눌렀을 때 setDate가 실행되면서 7일 후의 날짜를 로컬 스토리지에 저장하면서 팝업을 닫는 형태로 작성하였다.
이전에 다크모드에서 로컬 스토리지를 사용하여서 어렵지 않게 기능을 구현했는데 처음에는 cookie나 session처럼 만료일을 설정하면 된다고 생각했으나 로컬 스토리지에는 설정이 불가능해서 시간을 저장해서 비교하는 방식으로 구현하게 되었다.
마치며
이제 어느 정도 프로젝트가 마무리되면서 다음 계획을 구체적으로 생각하게 되었다. 개발자로서 취업을 준비하는 것은 처음이기 때문에 나의 어떤 부분을 어필해야 하는지 어떤 개발자로 성장하고 싶은지 깊게 생각할 필요가 있다고 생각한다. 프로젝트를 진행하고 코드를 작성하는 과정이 너무 즐거워서 취업 준비를 잘할 수 있을지 걱정이 되지만, 현업에서 실제 서비스를 경험한다고 생각하면 설레게 되는 것 같다.
