[Figma] 컴포넌트 구현, 모바일 유튜브 App 클론 구현!

🌱컴포넌트 구현

Figma 툴에서 자주 사용하는 GNB+ 컴포넌트 4가지 + 2가지를 구현하였다.

 

 

기본: GNB(Global Navigaion Bar)

4가지: 모달, 토글, 탭, 아코디언

2가지: 드롭다운, 자동완성

 

 

알게된 점

GNB 인터렉션 구현할 때 Line의 이름을 전부 같게 하고 smart animation 설정을 주면, 해당 Line들이 동일한 Line으로 인식되어 애니메이션 처럼 움직이도록 구현이 가능하다.

 

 

 

어려웠던 점

 

- GNB에서 밑줄을 하나씩 다 그려서 그었는데 그렇게 안해도 된댄다. 코드스테이츠 모닝 세션 때 알려주셨는데, 굉장히 쉬운 방법으로 해결할 수 있었다. 각 글씨를 프레임으로 만들어서 프레임 하단만 검은색 선을 두껍게 표시하면 된다. 그거를 컴포넌트로 만들어서, 글씨가 on인 경우, off인 경우 두 가지로 그룹 컴포넌트화 하면 된다. 

 

- 드롭다운, 자동완성 : 난이도가 있는 만큼 좀 어려웠고 실제로 제대로 구현하지 못해서 아쉬움이 컸다.

 

 

 

 

 

 

 

🌱모바일 유튜브 App 클론

약 2시간 동안 팀플로 제작했다. 

아쉬운 점은 시간이 너무 부족했던점... 피그마는 시간을 많이 들일 수록 더 좋은 퀄리티가 나온다던데 진짜 노가다성 성향이 큰 것 같다. 많이 허전하지만,, 그래도 만들면서 좀 유튜브 윤곽이 나와서 뿌듯하고 재미도 있었다.

 

 

 

알게된 점

컴포넌트 하나를 만들어 놓고 인스턴스를 여러개 복붙하면 편리하게 구현할 수 있다!

유튜브 어플은 생각보다 아이콘이 많다.

각 버튼 하나하나 인터렉션 연결하는 것이 생각보다 복잡하고 경우의 수도 많다. 

플러스 버튼을 눌러서 나오는 오버레이 화면은 위에서 구현한 모달창과 비슷하게 구현된다.

구독 페이지에서 구독한 채널은 수평 스크롤이 가능하게 구현했다.

구독 페이지 전체 버튼을 누르면 드롭다운으로 페이지 순서 변경이 가능하다.

 

 

어려웠던 점

구독 페이지에서 전체 버튼을 눌렀을 때 나오는 새로운 페이지에서 순서 변경하는 부분(드롭다운). 제대로 구현하지 못했다.

디테일한 부분 구현하지 못해서 아쉽다~...