오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서
피그마 프로그램과 모바일 미러링 앱을 설치하고 설정해보겠습니다
피그마 프로그램 설치 및 접속하기
구글에 피그마 다운로드(Figma download)를 검색하면 그림과 같은 홈페이지가 들어가게 됩니다.
Desktop app을 이용하기 때문에 macOS와 Windows 중 맞는 운영체제에 따라 다운로드합니다.
피그마 프로그램의 최소 사양과 관련된 사진이 있으니 확인하고 설치하면 됩니다.
하지만 대부분의 경우 충족되기 때문에 '운영체제' 정도만 확인해도 됩니다.
( 설치하고 로그인하면 웹 페이지에 나오는 것과 동일한 화면이 나오게 됩니다.)
https://www.figma.com/downloads/
Figma Downloads | Web Design App for Desktops & Mobile
Download the Figma web design app on desktop for macOS or Windows, plus the font installer and device preview apps.
www.figma.com
웹과 프로그램 환경의 공통점
- 주요 제작 기능이 동일 : 프로그램에만 있는 기능만 있는 것이 아니라 대부분의 기능은 동일하다.
- 실시간 저장 : 인터넷이 연결된 온라인 환경에서는 웹/프로그램 전부 실시간 자동 저장을 지원한다.
- 화면 UI : 웹/프로그램의 화면의 버튼이나 메뉴 위치 등은 큰 차이가 없습니다. (약간의 차이가 있지만 미비하다)
웹과 프로그램 환경의 차이점
- 로컬 리소스 호환성 양호 : 웹보다는 좋고 폰트나 이미지, 작업파일을 fig파일로 저장하여 매끄럽게 사용 가능합니다.
- 고급 기능 : 일부 강력한 플러그인 및 키보드 단축기를 이용 가능합니다.
- 오프라인 저장 : 인터넷의 연결이 불안정하더라도 오프라인으로 기존 작업 파일을 저장할 수 있습니다.
플러그인(PlugIn) : 원래의 소프트웨어에 연결되어 특정 작업을 수행하거나 기능을 확장하도록 설계
강사님의 사례) 데스크탑 프로그램을 이용하는데 그 이유는 구독을 하거나 인터넷에서 모은
폰트/이미지로 작업하는데, 웹에서 작업하던 다른 팀원이 폰트가 없어서 피그마에서
에러가 발생하였고 이를 임의로 모든 폰트를 기본 폰트로 바꾸어 작업을 이어나가서
기존 작업의 모든 폰트를 다시 변경하는 일이 있고나서는
똑같은 환경으로 맞추어 작업하는 것이 중요하다고 말해주셨습니다.
스마트폰 미러링 앱 설치라고 기능 확인하기
미러링 앱을 설치할 수 있는 디바이스는 IOS, Android 스마트폰과 아이패드가 가능하다
Android 태블릿을 권장하지 않는 이유는 전용 앱이 없기 때문에 개인적으로 권장하지 않는 것입니다.
[ 미러링 앱의 장점 ]
- 간단한 커뮤니케이션 : 노트북/데스크탑 작업 시 실시간 댓글 확인과 피드백이 가능하고, 핸드폰으로도 확인 가능합니다.
- 파일 공유/확인 가능 : 작업 파일을 앱을 통해서 공유하거나 작업 파일의 확인도 앱을 통해 가능합니다.
- 프로토타이핑 : 실제 디바이스에서 어떻게 나오는지 확인하고 핸드폰이나 테스트폰에서 구동 확인 가능합니다. (중요 작업)
그럼 실제로 핸드폰에 어떻게 보이는지 확인해보겠습니다.
아이폰은 앱스토어 / 안드로이드는 플레이스토어에서 figma를 검색하여 피그마 로고 앱을 설치합니다.
Log in to Figma를 눌러서 로그인하여 들어가게 됩니다.
Recents : 로그인해서 들어가면 맨 처음에 최근 작업물들을 볼 수 있습니다.
Search : 프로젝트를 찾아서 확인하거나 팀을 찾아서 들어갈 수 있습니다.
Activity(알림) : 실시간으로 내 프로젝트에 올라온 댓글을 볼 수 있고 그에 따른 피드백이 가능합니다.
Mirror : PC환경 작업 디자인 프로토타이핑을 볼 수 있습니다.
(단순히 이미지X -> 에니메이션을 걸어두면 움직이는 형태로 볼 수 있습니다.)
=> 강의 후반에 갈수록 Mirror를 적극적으로 활용할 수 있습니다.
오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서
피그마 프로그램과 모바일 미러링 앱을 설치하고 설정해보았습니다.
지금까지의 내용은 강의를 통해
보실 수 있습니다
https://mcode.co.kr/
메타코드M
빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다.
mcode.co.kr
- 메타코드M 사이트에서는 취업특강 신청도 가능하고, 다양한 강의가 무료/유료로 제공되고 있으니 이용하기 바랍니다😄
'Figma > METACODE_Figma' 카테고리의 다른 글
Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_파일의 구성/생성/불러오는 방법 (0) | 2024.02.14 |
---|---|
Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_홈화면과 페이지 구성 (0) | 2024.02.11 |
Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 팀 구성/권한 및 요금제 (1) | 2024.02.11 |
Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 피그마 설치 및 설정 ❶ (0) | 2024.02.09 |
Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ 피그마가 무엇이고 어떤 것을 할 수 있는지? (0) | 2024.02.08 |