[PlusX UI] 6일차

이번에 적을 강의노트는 작업환경에 대한 이해, 계속해서 해상도에 대한 기초강의이다.

음 그런데 이런 내용들이 무척이나 중요하긴 하지만, 아직 실무적인 내용은 없어서

딱히 필기말고는 할게 없어 좀 아쉽다.

설명이 너무다들 딱딱하다고 해야하나...

그래도 뭐 우선은 이번주의 마지막 강의인만큼 정리하고, 언넝 다음챕터로 넘어가고자 한다!

 

---

 

강의는 Part2. UI 디자인 기초에서

CH02-02 작업환경에 대한 이해를 다루고 있는 강의이다 (이 강의는 35분짜리!)

( - 저번강의는 3분...이었다...)

 

 

 

디지털 형식에 맞춰서 작업물을 만들기 위해서 어떤 파일 형식으로 만드냐하면...

xd, figma 등등을 사용한다.

벡터기반인 툴을 주로 잘 사용하고 다양한 해상도를 고려하기 좋다는 것.

언제적 포토샵 사용 무새.....야...

 

 

---

 

01.

아트보드 사이즈

 

UI를 그릴 떄에도 아트보드가 필요하다.

흔히 프레임이라고 하는 것. 아트보드라고 얘기하는 것은 포토샵인데 ㅎㅎ...

아트보드사이즈와 해상도는 같은 개념을 공유하고 있다.

처음 아트보드 사이즈를 잘 만드는 게 작업효율을 결정한다.

모바일 아트보드 프리셋의 경우 실제 디바이스 세팅이 아닌 작은 사이즈로 구성이 되어 있다.

하나의 작업바탕을 기본으로, 여러 UI에 적용하기 위해 1배수 해상도 크기의 그림만을 그리는 일들이 많다.

1배수 단위로 설정된 크기로 모바일 디자인을 하게 되었다.

아트보드와 디자인 에셋을 효율적으로 활용할 수 있다.

다양한 해상도에 효율적으로 하기 위해서 1배수로 작업을 한다.

 

 

모바일 해상도는 엄청나게 배수들이 많으니까 ~!

Hand-off 

디바이스의 픽셀 믿로에 맞게 1.5배, 2배, 3배, 4배...

다른 배수에서 베리에이션에서 진행을 하면 열화등이 잘 이루어진다는 것.

 

 

 

02.

그래픽

 

그래픽은 대표적으로 레스터와 백터그리팩으로 나뉜다.

비트맵과 벡터는 많이 들었는데 레스터도 물론 알긴 하지만 레스터 그래픽이라고 말한건....처음 듣는다 ㅋㅋㅋㅋ

좀 특이하군.. 레스터화에 쓰이는 레스터도 맞다.

 

점선면의 좌표와 색상값을 기억하는거라 벡터는 당연히 크기와 상관없이 이미지 품질에 영향을 주지 않는다.

레스터는 더 풍부한 표현을 할 수 있지만, 모두가 알듯이 가장 큰 단점으로 깨진다는 것.

 

 

 

03.

Unit

 

OS별 차이를 가지고 있다.

모바일에서는 10dp와 10pp를 사용한다.

dp = 1px과 동일한 안드로이드 픽셀단위이다.

디바이스 크기가 달라도 동일하게 볼 수 있다.

8px -> 8dp, 12dp. 16dp// 등으로 변환하여 보여준다.

안드로이드 맵 구축시 해상도 별로 이미지를 넣어주기 위한 분류단위로 dpi를 사용한다.

 

(dp 단위로 변환하여 넣으면 자동으로 동일한 크기로 보여지게 된다.)

5가지로 정도로 mdpi(기준해상도)를 배리에이션한다.

hpdi = 1.5x

xhpdi = 2x

...

 

pt는 ios에서 사용하는 디바이스의 화면밀도

ios는 비슷한 원리이긴 하지만, 3가지로 분류한다.

@1x, @2x, @3x... 이렇게 !

 

 

 

나머지 내용은 강의에서 ~!

 

 

 

 

#플러스엑스 #패스트캠퍼스 #plusxsharex #plusx #ui강의 #ux강의 #bx강의
#플러스엑스강의후기 #플러스엑스셰어엑스 #플러스엑스환급챌린지