개인 노트 정리) 시각디자인13 - 인스타그램 iOS 앱 클론 디자인 (피그마)
완전정복! 시각디자인 기초 올인원 패키지 Online
Part 2. 시각디자인 기초 2 (디지털 매체)
인스타그램 iOS 앱 클론 디자인 (피그마)
# 인스타그램 앱 구조 살펴보기
- 맥북에 usb로 아이폰을 연결한 뒤, 파일에서 movie recoding을 선택하면 맥북에서 아이폰을 볼 수 있다.
- ios 인터페이스 가이드라인 https://developer.apple.com/design/human-interface-guidelines
- ios는 크게 3가지의 ui 요소로 나뉜다. Bars, Views, Controls
- 흔히 스마트폰에서 보이는 아래쪽 메뉴바를 ios에서 Tab Bars 라고 부른다.
# 브랜드 가이드 살펴보기
- 인스타그램에서 제공하고 있는 브랜드 가이드를 살펴볼 수 있다.
- https://about.meta.com/brand/resources/
- 위 사이트의 인스타그램 페이지에서 Download Asset 한 후, 받은 psd 자료들을 가지고 figma로 작업.
# 내비게이션 바 만들기
## 스마트폰 Frame 만들기
- Design의 Frame에서 iPhone 11 Pro Max 을 클릭하면 해당 스마트폰 크기로 Frame이 생긴다.
## figma ios ui kit
- 구글에서 figma ios ui kit이라고 검색하면, figma에서 제공하는 툴킷을 다운받을 수 있다.
- 다운로드하면 내 계정으로 ui들이 복제되어 들어온다.
## 아이콘 만들기
- stroke로 표현한 아이콘의 경우 마우스오른쪽 클릭 Outline stroke 를 선택하여 stroke(선)를 fill(면)로 바꿔준다.
- cmd + y 를 눌러 보면 그 차이를 확인할 수 있다.
- rectangle로 만든 아이콘을 전체 선택하여 Union selection을 클릭해서 하나의 면으로 합친다.
## 아이콘에 터치 영역(padding) 적용하기
- 24x24 크기의 아이콘에 padding을 더하여 40x40으로 만들어 터치 영역을 만들어야 한다.
- 아이콘을 클릭하여 auto layout을 적용하고 padding 값을 조절하여 40x40으로 맞춰준다.
- 만든 40x40 icon을 컴포넌트화 한다.
## 로고
- 로고 svg를 figma로 옮긴다.
- svg파일이라 cmd + y 로 보면 깨지지 않는 벡터 형식을 확인해 볼 수 있다.
- frame으로 되어 있는 logo를 컴포넌트화 한다.
## 기타
- pc에서 인스타그램 사이트를 기기 크기로 보면서 작업한다.
- 아이콘을 디자인 하기 위해 rectangle로 바탕을 만들고,
# 스토리 트레이 만들기
- iOS에서의 영문 기본 폰트를 다운 받을 수 있다. Apple Developer: Fonts 사이트에 가서 SF Pro를 다운로드 받아서 사용할 수 있다. 참고로 SF Mono는 코드 에이터에서 사용하는 폰트이다.
- SF Pro Display 폰트는 헤드라인에 쓰는 폰트이고, SF Pro Text 는 본문용이다.
- developer 사이트의 Typography에서 Large Title ~ Title 3 까지는 SF Pro Display 를 사용하고, Headline ~ Caption 2 까지는 SF Pro Text 를 사용하면 된다.
- 재사용할 수 있는 스타일로 저장할 수 있다. 텍스트에 폰트 스타일을 적용한 후, 텍스트 항목의 + 버튼을 눌러서 스타일을 저장한다.
- 그라데이션 외각선은 stroke을 outline stroke 처리하여 선을 면으로 바꾼 후, fill에서 그라데이션 색으로 채운다.
- 여러 도형을 그룹으로 묶을 수 있고, 그룹과 도형을 auto layout 처리할 수 있다.
- Detach instance를 하겠다는 것은 복제한 컴포넌트와 기본 컴포넌트와의 연결고리를 끈겠다는 의미이다.
# 피드 - 헤더 만들기
# 피드 - 콘텐츠 만들기
- 구글에 instagram video cover photo size 또는 instargram image size라고 검색하면 사용되고 있는 사이즈를 확인할 수 있다.
# 피드 - 리액션 바 만들기
# 피드 - 더 보기 영역 만들기
# 피드 - 댓글 모두 보기 영역 만들기
# 피드 - 컴포넌트로 만들기
# 피드 - 탭 바 만들기
# 피드 - 탭 바 아이콘 만들기
- App Store에서 Figma Mirror를 설치하고, 같은 와이파이 네트워크로 연결한뒤, Figma에서 Frame를 선택하면 아이폰에 디자인한 결과물이 화면에 그대로 나온다.
# 디자인 시스템 만들기
- Instagram brand guidelines figma 페이지에 만들어야할 시스템 : typograpy, colors, Icons
- Typography : subhead, body, caption
- Colors : Text(Primary, Secondary), Icon(Primary)
- Icons : Medium, Small
- Logos : Medium, Instagram
- 다 만들고 나서 Assets 메뉴의 책 아이콘을 클릭하여 Publish 를 해줄 수 있다.
- Instagram components figma 페이지에 만든 컴포넌트들을 옮겨오고 퍼블리싱한다.
- Instagram components 퍼블리싱 메뉴에서 먼저 만든 Instagram brand guidelines를 라이브러리로서 추가한다.
- 디자인 페이지의 퍼블리싱 메뉴에서 라이브러리로서 Instagram components 와 Instagram brand guidelines 를 추가한다.
- 라이브러리로 가져오면 다른 폰의 디자인을 만들 때, 라이브러리에서 그대로 가져와서 사용할 수 있다.