피그마로 컴포넌트 기반 ui ux 파일제작이 목표
디자이너와 협업하기 좋음. 브라우저 기반, 링크공유가능 .
UX - 사용자의 사용 효율화
사용자 행동 파악
기능(다기능이 중요)중심 (안드로이드 초기 , 모든게 깔려있는)
-> 경험(ux)중심(사용자 특화) 디자인(필요없는 리모컨버튼은 테이프로 감아버리는느낌/ 사용하는 앱만깔린 애플느낌/ 이케아)
기술제약 / 사용자니즈 /
ux가 더 큰 개념(사운드포함)이고 ui가 작은개념(시각적)
교집합은 사용자를위한 기능설계
skeuomorphic (heavy file, high cost)/ flat design /material design
사이트 제작 순서
사이트맵 // 페이지구성 자료를 모으는것 . 방향성
플로우차트 // 클릭하면어찌되는지
와이어프레임
인터렉션디자인
그래픽 파일 종류
비트맵- 포토샵으로 만들어진 사진이미지 . 사과사진 PNG, JPG / 픽셀로 구성(색상정보를가진 정사각형 가장작게쪼개진 점)/ 그래서 확대축소하면 픽셀이 깨짐. 곡선이 아니니까. 그니까 내가 사진을찍어서 쓸거면 최대한 화소수를 높여서 받아야함. 화소수를,해상도를 낮출순있어도 높일순없다.
색상정보를 가진 픽셀이있기에 비트맵이 파일크기가 크다. png는 배경없음 , jpg는 압축률이뛰어나서 잘씀. 이미지손상은 조금 있으나. jpg로 저장하면 배경이없어도 흰배경있는것처럼 저장됨.
벡터-점선면으로 이뤄진 오브젝트. 점을 선으로 연결해 자동으로 수학적계산으로 면을 형성, 베지어곡선 / 확대가능 AI , SVG, EPS
기준해상도 1배수와 n배수
기준해상도 -> 1배수
픽셀단위와 1배수 단위를 꼭 구분해야함
디자인한 애셋을 특정 픽셀로만 지정해서 내보내면 화질떨어질수있음.
폰 화면 크기가 다 다르니까.
하지만 작업할때는 1배수로 해야함. 내보낼땐 n배수로.
어도비일러스트는 벡터 ,포토샵은 벡터 (사진처리에 씀)
피그마
웹은 폰트다운받아야함 
프로그램 설치시는 필요없음
스냅투 - 자석기능
내가 작업하면 모눈선(픽셀그리드) 에 붙음.
오브젝트 2개있고 2개만 화면에 꽉차게 하고싶다 - > shift + 2
회색화면 크기 - 플마 6만5천 shift + R 자로 확인가능.
무브툴 - 오브젝트 옮길때
핸드툴 - 화면 옮길때
스케일툴 -정비례로 사이즈조절
작업시에 왼쪽 레이어와 오른쪽 디자인속성확인
작업하고나선 레이어 이름 항상 만들기 . 나중엔 헷갈림
스페이스바 누르는동안은 핸드툴임.
ctrl+ [ ] 누르면 레이어위치바뀜
stroke center 선 10줬으면 안으로 5,밖으로 5
박스안에 커서넣고 모서리 동그라미 하나 선택
alt 누르고 
하나만 레디우스값 변경됨
이동툴일때 오브젝트 더블클릭시 편집모드
오브젝트 편집모드
이동툴 + 시프트하면 크기가 정비례로 스케일링됨.
비율 일정하게하고 스케일링
그림툴은 오브젝선택하고 alt 눌러서 복제가능
펜툴로 원그릴땐 드래그 , 그리고 한방향으로.
펜툴오브젝트 주의점
원을만들고나면선택을 풀어야함. 편집모드에서 나가기 .이동툴선택이나 엑스누르기 .
그래야지 레이어분리됨
텍스트 벡터화
서체를 바꿀수없으니 복사해둬야
