📌
1. 디스플레이와 픽셀
2. 1배수 디자인
3. 이미지 표현 방식
4. 8포인트 그리드 디자인
1. 디스플레이와 픽셀
디스플레이
우리가 보는 디지털 화면 (ex. 스마트폰, 아이패드, 전광판 등)
픽셀
디스플레이를 이루는 작은 정사각형 (like 모자이크)
해상도
디스플레이의 선명함 정도 (디스플레이 안의 픽셀의 개수)
가로 줄의 픽셀 개수 X 세로 줄의 픽셀 개수 (ex. 1920 X 1080)
멀리서 보는 디스플레이일 수록 픽셀의 크기가 커져도 된다
면적당 픽셀 갯수가 더 많다면 더 세밀한 묘사가 가능하다
2. 1배수 디자인
어떤 디바이스로 실행해도 항상 화면에 보이는 디자인의 위치나 배치가 통일되어야한다.
디바이스마다 디자인을 일일이 만들지 않기 위해 기준이 되는 사이즈를 하나 정해 디자인을 만든다.
이 때 기준이 되는 사이즈를 1배수 디자인(원본 사이즈)이라고 한다.
1배수 디자인은 사람들이 가장 많이 사용하는 사이즈 정하는 것이 일반적이다.
(내가 만들 앱을 사용할 사람들도 고려해야한다.)
권장 1배수 사이즈
아이폰 : 375 X 812
안드로이드 : 360 X 800
배수는 픽셀 배율이라고도 불리는데 이 픽셀 배율은 기기가 만들어지고 출시될 때 정해진다.
📌
https://yesviz.com/viewport/
기기별 픽셀 배율 확인 가능
애플 아이폰 15프로의 픽셀 배율이 3.0 이니 1배수로 디자인한 것을 3배 확대할 것이다.
렌더링 과정에서 기기가 알아서 3배 확대를 하는데 모든 기기들의 가로 세로 비율이 항상 동일하지 않아 실제 해상도와 맞지 않을 때가 있다. 그런 경우 기기는 알아서 미세 조정을 한다. (다운스케일, 업스케일)
3. 이미지 표현 방식
래스터 방식 (Raster)
비트맵 형식이라고도 불리며 픽셀 칸에 색깔 칩을 하나씩 담는 형식
포토샵, jpg,png, gif 등이 레스터 방식에 해당
특징
- 해상도가 높을 수록 화질이 좋다.
- 해상도가 낮은 이미지를 크게 만든다고 화질이 좋아히지지는 않는다.
- 확대, 축소를 반복하면 색상 정보가 사라진다.(’깨진다’ 라고 표현)
- 단순한 방식이라 고해상도 이미지를 표현하기에 적합하다.
벡터 방식 (Vector)
그림을 수식으로 표현하는 방식, 이미지라기보다는 코드 파일에 더 가깝다.
일러스트레이터, 피그마, svg 등이 벡터 방식에 해당
특징
- 확대, 축소 등 크기 변형이 자유롭다.
- 이미지가 크고 복잡하면 수식도 복잡하다. → 파일 크기가 커짐
4. 8포인트 그리드 디자인
우리가 보는 화면에는 굉장히 많은 요소들이 존재한다. 그러한 요소들을 디자인할 때 일반적으로 ‘8의 배수로 만든다’ 라는 규칙따른다.
UI 사이의 간격, 요소의 여백, 크기 등을 최대한 8의 배수 단위로 조정해서 사용한다는 뜻.
이러한 규칙이 있다면 협업을 할 때 효율적으로 진행할 수 있다.
왜 8인가?
8은 1,2,4,8로 나눌 수 있다. → 디자인의 크기를 조절할 때 왜곡없이 조절이 가능하다.
홀수나 소수점이 나오면 매끄러운 모양을 만들 때 불편함
(소수점 → 흐릿하게 표현)
짝수로 나뉘기 때문에 해상도가 변해도 업스케일, 다운스케일이 될 때 유연하게 대처 가능하다.
최근에는 디바이스의 해상도가 좋아져서 디자인을 더 세밀하게 만들기 위해 8대신 4배수 혹은 2배수까지도 사용하는 경우도 있다
🤓 내일 학습할 내용
피그마 툴
도형, 글자, 패스 만드는 법
프레임과 그룹
