UI/UX 피그마 인스타그램 앱 클론하기

피그마 이용해서 인스타그램앱 클론하기

Figma

 

피그마는 포토샵의 웹 버전같다. 무거운 포토샵 프로그램을 이용할 때 보다 훨씬 가볍게 느껴지고 플러그인을 통해서 푸티지 이미지 가져오기도 편하다. 피그마 이전으로 돌아갈 수 X.

 

📌  컴포넌트란?

컴포넌트는 피그마에서 앱 설계 및 디자인 전반에서 버튼, 카드, 아이콘 등의 모든 디자인 요소를 일관되고 효과적으로 관리하는 기능입니다.

개발에서도 "컴포넌트"라는 개념이 존재한다. 회사마다 개발팀과 디자인팀에서 빠르고 쉽게 개발/프로토타이핑 작업이 가능하도록

미리 모듈 형식으로 독립된 컴포넌트를 만들어서 재활용하는 방식이다.

피그마에서 컴포넌트는 모든 디자인 요소를 일괄적으로 관리할 수 있도록 도와주는 기능이다.

 

여러 가지의 컴포넌트 시스템을 모아둔 웹사이트.

👉 The Component Gallery

Home

 

✅ 컴포넌트를 만드는 방법은 매우 간단하다.

1. 컴포넌트를 만들고 싶은 요소 선택
2. 상단의 컴포넌트 만들기 버튼 클릭
3. 오리지널 컴포넌트를 복사+붙여넣기

보라색으로 변경되면 컴포넌트로 만들어진 상태인것이다.

 

기능구현

 

1. 탑 네비바, 하단 네비게이션 화면에서 고정

2. 스토리 트레이, 모아 올린 이미지 가로 슬라이드 구현

 

 

3. 타임라인에서 아이디 클릭하면 퍼스널 피드로 들어가는 기능 구현

4. 퍼스널 피드에서 아이디 바 고정하고 수직 스크롤 기능 구현

 

 

5. 피드 창에서 홈버튼 누르면 타임라인으로 이동, 타임라인에서 하단 본인 계정 이미지 클릭시 피드 화면으로 전환 기능 구현

 

아쉬운점

1. 가로 슬라이드 할 때 백그라운드에 회색 배경이 보이는 것을 해결하지 못했다.

2. 모아 올리기에서 다음 사진으로 넘어 갈 때 동그라미도 고정되어 있는데 사진 넘김과 동시에 크기, 컬러가 바뀌게 동적으로 구현하지 못했다. 

 

피그마는 포토샵의 작동 원리와 비슷하게 보였다. 간간히 다른 부분에서는 포토샵으로 하면 쉬울 것 같다는 생각이 들었지만,

컴포넌트로 인해 재활용성이 높아 UI/UX 적으로 기능 구현하는데 훨씬 편한 프로그램인 것 같다.

 

 

참고자료

 

UI/UX 메이트 - 피그마편 :: #7-1. 피그마 인스타그램 앱 클론 | 코드메이트