[Maestro] 랜딩페이지

구현해야 할 페이지

우리가 어떤 서비스를 이용하게 될 때 가장 먼저 보이는 화면이 랜딩페이지이다. 로그인 페이지와 회원가입 페이지는 내가 해본 경험이 있었기 때문에 한 파트였다면 랜딩페이지는 사람들의 이목을 가장 집중시키는 부분인 만큼 내가 맡아서 구현을 해보고 싶었다.

방향성

우선 화려하게 움직이는 복잡한 화면을 구현하고 싶지는 않았다. 솔직히 지금 당장 핸드폰을 켜서 아무 어플이나 들어가보더라도 사람들에게 인기가 많은 어플리케이션은 오히려 심플한 랜딩페이지를 가지고 있다.(네이버, 카카오톡, 인스타그램 만 봐도 알 수 있다.)

처음에는 우리 프로젝트의 마스코트라고 할 수 있는 저 귀여운 친구(?)가 팔을 휙휙 저어가면서 마에스트로 글씨를 샤라락 쓰기를 바랬는데 음... 그건 프론트엔드의 영역을 넘어선 디자인의 영역인 것 같아서 깔끔하게 포기했다.
그냥 심플하게 로고를 띄워준 후 밑에 '이메일 회원가입 | 이메일 로그인' 글씨에 animation을 줘서 나타나기 효과를 주기로 마음 먹었다.

설계

페이지는 2개를 만든다. 하나는 로고만 떠있는 페이지이고, 다른 하나는 Route로 로그인과 회원가입 페이지로 이동할 수 있는 페이지이다. 전자를 Landing, 후자를 Main이라고 말하겠다.

Landing.jsx

Landing에서는 페이지가 실행된 후 일정 시간 후에 바로 Main으로 넘기는 기능만 설정할 것이다. 이것도 역시 useEffect를 이용할 것이고 추가로 setTimeout() 함수를 이용한다.

const timeout = () => {
  setTimeout(() => {
    navigate('/MainPage');
  }, 500);
};

useEffect(() => {
  timeout();
  };
);

Main.jsx

Main에서는 페이지에 로그인, 회원가입 글자가 animation 기능을 통해 나타나는 효과를 보일 것이다. 여기에서는 styled-components의 'keyframes'을 props 받아 import해서 사용할 것이다.

animation 적용한 component를 이용할 때에는 animation:${이름} 시간 효과 횟수 를 적으면 된다.

const animation = keyframes`
  0% {
	transform: scale3d(0,0,0);
	border-radius:0px;
  }
  50% {
	transform: scale3d(0,0,0);
	border-radius:100px;
  }
  100% {
	transform: scale3d(1,1,1);
	border-radius:0px;
  }
`;

const LoinWrapper = styled.div`
	animation:${animation} 1s ease-in-out 1;
`;

완성 페이지