오늘은 uxui 부트캠프 1일차!!
오늘 한일
-멤버 카드 작성
-온보딩 사전 자기진단
-스타터 노트 작성
-팀 노션 만들기
-피그마 기초 1주차 강의 완강 및 1주차 과제 제출아직 처음이라 슬랙도 피그마도 노션도 다 어색하고 어렵지만 차츰 괜찮아지겠지!!
내일 할일
-2주차 강의 완강 및 2주차 과제 제출
-추가 실습 자료 확인
-디자인카다&TIL 작성오늘의 강의 내용(피그마의 가장 기초적인 부분)
디스플레이와 픽셀
해상도:디스프레이의 선명한 정도를 나타내는 말
-해상도는 디스플레이 안에 들어가 있는 픽셀의 개수를 의미
픽셀의 개수: 가로 줄의 픽셀 개수*세로 줄의 픽셀 개수
해상도와 픽셀의 관계
-해상도가 같다면 화면의 크기가 클수록 픽셀 한 칸으이 크기도 커짐
-화면의 크기가 같다면 해상도가 높아질수록 픽셀 한 칸의 크기는 작아짐
-일반적으로 화면 크기가 클수록 해상도도 높아짐->큰 모니터가 더 선명함(예외존재)
-면적 당 픽셀 개수가 더 많다면 더 세밀한 묘사 가능
(8*8 해상도는 4*4 해상도보다 면적 당 픽셀 개수가 4배 많기에 4배 더 세밀한 표현 가능)1배수 디자인
-기준이 되는 사이즈 하나 정하게 되고 이 사이즈가 1배수 디자인(원본 사이즈라는 뜻)
현재는 아이폰의 경우 375812, 안드로이드의 경우 360*800을 권장
1배수 사이즈=픽셀 배율(기기마다 정해진 픽셀 배율 존재)
이미지 표현 방식-벡터와 레스터 *파일형식:확장자
레스터 방식:비트맵 형식으로 픽셀 칸에 색깔 칩을 하나씩 담는 방식(포토샵)
특징
-해상도가 높을수록 화질이 좋음
-해상도가 낮은 이미지를 크게 만든다고 좋아지지 않음
-확대, 축소를 반복하면 색상 정보가 사라짐->깨진다, 열화됐다고 표현
-단순한 방식이라 고해상도 이미지를 표현하기 좋음
벡터 방식:그림을 수식으로 표현하는 방식(일러스트레이터, 피그마), 코드 파일에 가까움
특징
-확대 및 축소 등 크기 변형이 자유로움
-이미지가 크고 복잡하면 수식도 복잡해짐(고해상도의 많은 색을 표현하는 경우 수식이 복잡 해져 파일 크기가 커지기에 적합한 확장자 선택 필요)
화면 디자인에도 규칙이 존재(효율성 증가)
-일반적으로 디자인 요소들은 8의 배수로 만든다는 규칙이 존재
->8포인트 그리드 디자인
-UI를 8의 배수에 맞춰 배치하는 레이아웃 규칙(간격, 요소의 여백, 크기 등)
홀수는 확대하거나 축소시 소수점이 생겨 픽셀 한칸을 미쳐 못채운 불완전한 디자인이 생기고 결국 깨져 보이는 현상이 발생(엘리어싱 현상(계단 현상)->안티엘리어싱 기능으로 보완 가능)
피그마 기능(FILL)
FILL-도형 전체에 이미지를 빈틈없이 채움(도형 밖으로 그림 넘어갈 수 있음)
FIT-도형 끝에 맞춰 채움(빈틈 발생)
CROP-원하는 만큼 이미지 조작 가능(노출되는 부분 조작 가능)
TILE-반복 패턴으로 채움
*아웃라인과 플레튼(FLATTEN)-개체의 편집된 정보를 없애고 새로운 형태로 재가공하기에 주의 필요
