2/16 일일정리 Figma

코드스테이츠

강물둘기 2023. 2. 16. 20:17

Figma를 이용하여 프로토타입을 만들어보았다.

Figma 튜토리얼로 코드스테이츠 모바일 화면의 프로토타입을 만들어보았다.

먼저 주어진 와이어프레임에 간단한 효과들을 추가해 보았다.

스크롤 추가

프레임의 prototype탭에서 overflow scrolling에서 원하는 방향의 스크롤을 추가해주면 화면을 스크롤할 수 있다.

페이지 전환 및 애니메이션

원하는 버튼에 interaction을 추가하여 페이지 전환효과를 부여했다. 애니메이션도 추가하여 부드럽게 이동이 되도록하는 효과도 얻을 수 있다.

이미지 추가

다음으로는 실제 로고와 이미지를 추가하는 작업을 해 보았다.

로고와 프로필이 들어갈 자리는 간단하게 만들 수 있었다.

프로필을 클릭하면 메뉴가 뜨도록 click - overlay 기능도 넣었다. 다른 곳을 클릭하면 오버레이가 없어지도록 하고, 오버레이시 배경화면이 어둡게 적용되는 옵션도 추가했다.

메인 이미지의 경우 일정 시간 간격으로 다음 이미지로 넘어가도록 하고, 사용자가 화살표를 클릭할때도 넘어갈 수 있도록 구현 해보았다.

주어진 이미지 3개를 각각의 상태를 가지는 하나의 컴포넌트로 만들고 일정 시간이 지나면 이미지1 - 이미지2 - 이미지3 - 이미지1 순으로 이동하도록 after delay 이벤트를 추가한다.

화살표 버튼에는 클릭 이벤트를 추가해서 화살표 방향에 따라 다른 이미지 상태로 이동하도록 만들어줬다.

튜토리얼에서 배운 내용을 바탕으로 모달, 토글, 탭, 아코디언 기능을 구현해보았다.

⓵ Modal

모달창은 버튼을 클릭하면 모달창이 overlay로 뜰 수 있도록 click 이벤트에 overlay로 모달창을 연결했다.

⓶ Toggle

토글은 컴포넌트로 2개의 상태를 만들고 클릭할 때 마다 상태가 변경되도록 만들었다.

⓷ Tab

탭도 컴포넌트로 3개의 상태를 만들고 탭을 클릭하면 상태를 변경하도록 만들었다.

⓸ Accordion

아코디언 역시 컴포넌트로 2개의 상태를 만들어 구현했다.

실습을 진행하는데 처음에는 '이걸 어떻게 시작해야 하나'라는 생각으로 갑자기 뇌정지가 와서 헤메다가 어떻게 modal은 구현을 했다.

그리고 Toggle을 구현하면서 컴포넌트로 만들어 사용하는법을 깨닫고 뭔가 갑자기 혈이 뚫린것처럼 부드럽게 그 다음인 Tab과 Accordion을 구현하게 된 것 같다. 컴포넌트 만만세!😆