TodoList 만들어보기!

어제 마지막으로 강사님이 프로토타입으로 만들어 배포한 Idolist에TodoList에 구현되지 않은 기능들을 팀원들과 컴포넌트별로 나누어 기능 구현을 해보기로 하였습니다. 여러 기능 중에 저는 상단의 메뉴바를 클릭하면 원래의 화면이 옆으로 넘어가며 완전히 넘어가는 화면은 사라지고 옆으로 이용자의 정보들을 모아둔 메뉴 화면이 나오도록 하는 부분이었다. 이것을 두 명이 나누어서 나는 화면이 넘어가는 애니메이션 부분을 맡게 되었습니다.

아래의 영상에서 보듯이 원래 있던 화면이 옆으로 넘어가면서 살짝쿵 작아지게 되는데 원래의 화면 크기에서 벗어나면 안보이게 해주는것이 포인트라고 생각했습니다.

transition과 tranceform

transition은 페이지에서 동작이 일어날때 부드럽게 이동하도록 만들어 주는 css 속성입니다. 시간을 정하여 이동하는 속도를 조정할 수 있습니다.
tranceform에서는 scale속성을 이용하여 가로세로의 비율을 줄여주었고 translateX속성을 이용하여 위의 영상처럼 x축으로 이동할 수 있게끔 만들어 주었습니다.

clip-path..

clip-path는 이미지를 다양한 모양으로 잘라주는(?) 모양에 맞춰서 이미지나 컴포넌트를 잘라주는 css속성입니다. 이번 과제의 컴포넌트 모양처럼 둥근모서리의 사각형으로 만들어 주고 싶었으나 clip-path의 작동방식이 도형 모양을 정하고 도형의 꼭지점의 좌표를 움직여 모양을 만들어야 하는 방식이어서 정확히 잘라내진 못하고 이번 과제에서는 inset속성을 이용하여 컴포넌트의 크기와 같은 사각형으로만 잘라내었습니다.

어려웠던점
clip-path가 위의 설명처럼 꼭지점을 움직이는 것이었는데 각 순서마다 섬세하게 움직이는것이 쉽지 않았었다. 하지만 clip-path의 모양대로 바꾸면 속성의 값을 반환해주는 홈페이지를 찾아 여러가지로 실험해 볼수 있었다.
clip-path 홈페이지 : https://bennettfeely.com/clippy/
영상 원본 홈페이지 : https://dribbble.com/shots/14100356-ToDo-App-UI