메인 수정된 모습

카드 front 디자인 수정	카드 inside 디자인 및 기능 추가

선물찾기를 할때 클로즈 버튼을 선물로 착각하게 만들었다. 그로인해 사용자가 조금이라도 더 재미를 느낄 수 있고 페이지에도 더 머무를 수 있도록 유도했다.	제대로 선물을 찾았을 때 나오는 모달창

메인 수정할 때 유의했던 점

• 디자인 통일성

• close 버튼

  • close 버튼의 경우 처음에는 hover 했을 때 이미지가 변하게 하였다. 레이아웃 구성 상 open 버튼을 누르고 카드가 열리면 그 바로 뒤에 close 버튼이 위치해 있었다. 그래서 카드를 열자마자 close 버튼에 hover가 되어 이미지가 변하였다. 내가 원했던 방향과 달라 그 후에 여러 가상클래스를 사용하다가 focus를 했을 경우에 이미지가 변하게 하였더니 가장 원하는 느낌으로 구현이 되었다.

  • close 버튼을 눌렀을 경우 약올리는 듯한 모션은 keyframes을 사용하여 구현하였다. 또한 사용자의 흥미를 이끌기 위해 산타의 웃음소리인 오디오를 추가하였다.

    @keyframes move {
    0% {
      transform: rotate(5deg) translateX(15px);
      /* 애니메이션이 0%만큼 동작시 */
    }
    
    25% {
      transform: rotate(odeg) translateX(0px);
      /* 애니메이션이 25%만큼 동작시 */
    }
    
    50% {
      transform: rotate(-5deg) translateX(-15px);
      /* 애니메이션이 50%만큼 동작시 */
    }
    
    100% {
      transform: rotate(0deg) translateX(0px);
      /* 애니메이션이 100%만큼 동작시 */
    }
    
    .close_btn:focus {
    background-image: url('../source/close_btn_focus.jpeg');
    background-position: center;
    background-size: 140%;
    opacity: 1;
    animation: move 0.2s;
    animation-iteration-count: 5;
    }

• 모달 창

  • 모달창의 경우 다른 분이 이미 만드신 것을 최대한 활용하였고 나는 콘텐츠 및 디자인과 배치만을 추가적으로 수정하여 구현하였다.