[💻 코드스테이츠 FE 44기] Figma 클론 디자인 - 넷플릭스(PC에서 보는 모바일..?)

✔️ 시작

figma를 사용해서 여러 사람들과 협업하면서 클론 디자인을 진행했다.

📍Figma 클론 디자인

✔️ 클론할 사이트 선정하기

• 이제 막 배우기 시작해서 너무 어렵지도, 그렇다고 간단하지도 않은걸 찾아 보았다.
• 그렇게 찾다 넷플릭스로 결정 했다.

넷플릭스가 PC에서 보는 모바일버전과 모바일로 확인하는 화면이 달랐다.
클론을 하기 위해 이미지를 가져와야하기 때문에 쉬운 방법인 PC버전의 모바일 버전을 작업 후 개선하기로 결정 했다.

화면을 캡처해 최대한 비슷하게 작업을 진행했다.

• 크게 GNB, 사이드 메뉴, 메인 페이지, 서브페이지로 구성해 작업을 진행했다.
  

내가 맡은 영역은 GNB로 GNB는 공통으로 들어가는 영역이기에
부모 컴포넌트를 만들고 자식 컴포넌트를 복사해 넣어 주었다.

컴포넌트로 작업을 하면 이후 수정사항이 생길 때 부모 컴포넌트만 수정해 주면
복사된 자식 컴포넌트도 같이 수정 되기 때문에 작업 시간을 줄일 수 있다.

그렇게 작업한 넷플릭스 클론 페이지이다. (비디오를 gif로 변환했더니 화면이 너무 작아져 아쉽다ㅠㅠ)

✔️ UI/UX 개선하기

• PC버전에서 보는 모바일 버전은 메인 화면이 그냥 리스트만 나열 되어 있어 앱 처럼 현재 뜨고 있는 컨텐츠, TOP 5 시리즈를 추가해 메인 화면을 개선했다.

✔️ 개선 사항(추가)

• 현재 뜨고 있는 컨텐츠 추가 (메인)
• TOP 5 시리즈 추가 (메인)
  

내가 맡은 영역은 TOP 5 시리즈였다.

기존에 만들었던 콘텐츠 컴포넌트를 복사해 프로토타입 스타일도 그대로 가져왔다.

PC버전에서 보는 모바일 버전을 클론했기 때문에 콘텐츠 썸네일 사이즈가 달랐는데
이 부분은 우리가 만든 클론에 맞춰 썸네일 사지를 조절했다.

그렇게 완성한 최종 넥플릿스 클론 페이지이다.

왼쪽이 개선 전, 오른쪽이 개선 후 이다.

리스트만 보여지는 화면에서 현재 뜨고 있는 컨텐츠, TOP 5 시리즈 추가해 주므로서
사용자가 화면에 오래 머물 수 있고 어떤걸 봐야하는지 고민인 사용자에게도 컨텐츠를 볼 수 있도록 유도할 수 있게 개선했다.

✏️ 마치며

작업하면 할 수록 욕심이 생겨 이것저것 추가하고 싶었다.
하지만 그러다 산으로 갈 수 있기에 개인적으로 시간 되면 진행해 보려고 한다.

이번 실습을 통해 여러 사람들과 협력해 프로토타입을 만들면서
UI/UX로 개선할 수 있는 점과 어떻게 파트를 나눠서 작업해야하는지 기획, 협업 경험을 할 수 있었다.

반복되는 영역을 컴포넌트로 만들어 재사용 할 수 있게 나누는 부분은
추후 JavaScript나 React에서으로 개발 작업이 진행할 때
재사용 하는 컨텐츠 인지, 각 화면 마다 있어야하는 공통 영역인지 파악하고 작업할 수 있을 거 같다.

이번 학습은 프로젝트를 진행하기 전 기획 단계를 미리 경험해 볼 수 있는
유익한 시간이였다.