Figma 클론🐻

위 그림은 오늘 내가 figma로 서점 애플리케이션을 구현한 것이다!
내가 만들 프로토타입의 조건은 최소 아래와 같다.

• Figma로 프로토타입을 제작
• 최소한 Lo-Fi 수준의 프로토타입을 구현
• 페이지 이동이 가능
• 스크롤 이벤트 만들기
• 최소한 1개의 마스터 컴포넌트와 인스턴스를 만들기

만들면서 신경쓴 부분은 수직, 수평 스크롤과
컴포넌트 && 인스턴스 부분이었다.
페이지에서 공통으로 들어가는 부분을 컴포넌트로 만들었다.

---

컴포넌트로 설정한 곳은 공통적으로 들어가는 메뉴 부분과 카테고리별 도서의 모형이다. 사진에서는 나오지 않았지만, 카테고리별 도서 바로가기 부분도 컴포넌트다.

---

서점 페이지의 알람은 open ovelay - manual - close when clicking outside 방법으로 구현했다.

---

서점 페이지의 하단 메뉴부분은 고정시키고 그 밖의 요소들은 수직요소로 정렬해주었다.

스크롤의 수직활용연습이 목적이라 책의 구성요소는 6권으로 한정했다.

---

서점 페이지의 메인페이지를 누르면 해당 서점 페이지로 이동한다.

---

서치 페이지에서 검색 부분의 마우스 커서가 깜빡이는 부분을 delay로 줘서 구현했다.

---

검색 버튼을 눌렀을 때 책을 추천해주는 부분에서는 수평요소로 드래그할 수 있게 만들었다.

드래그 시 수평부분으로 구현시켜줄 때는 프레임을 레이아웃에 맞춰주고 안의 요소들이 넘치게 만들어 주면 된다.

---

어제에 이어서 오늘도 Figma를 통해 앱을 구현해보았는데, 여러가지 기능을 적절히 쓸 수 있어서 보람찼다.

이대로 내가 만들고 싶은 웹이나 앱도 피그마로 구현해봐야겠다!🐝🐝