디자인 기본 지식

벡터와 비트맵

디자인에서 이미지 표현 방식은 중요한 요소 중 하나입니다. 표현 방식에는 벡터와 비트맵이라는 두 가지 방식이 있습니다. 두 방식은 그리는 방법과 이미지의 특성 등에서 차이가 있으며, 각각 장단점이 있습니다. 디자인 툴은 이러한 표현 방식 중 어떤 것을 지원하는지에 따라 분류할 수 있습니다.

비트맵(Bitmap)

서로 다른 점(픽셀)들의 조합으로 그려진 이미지

비트맵은 서로 다른 점(픽셀)들의 조합으로 그려진 이미지입니다. 이 방식은 사진, 캡쳐 이미지 등과 같은 이미지를 만드는 데 사용됩니다. 하지만 고해상도에서는 이미지가 깨지거나 찌그러질 수 있으며, 확대하면 이미지가 깨지는 현상이 발생할 수 있습니다.

벡터(Vector)

점과 점을 연결하여 수학적 원리로 그려지는 방식

벡터는 수학적 원리로 그려지는 방식입니다. 즉, 점과 점을 연결하여 그림을 그리는 것입니다.

이 방식은 고해상도에서도 이미지가 깨지지 않으며, ㅃ확대/축소 시에도 이미지의 품질이 유지됩니다. 따라서 로고, 아이콘, 일러스트 등의 이미지를 만드는 데 사용됩니다.

🙂 쉽게 말해, 컴퓨터에게 “이 좌표(점)와 이 좌표(점) 사이에 이러한 곡률 값을 가진 선을 그려줘”하고 명령을 내리면 컴퓨터가 그에 맞는 이미지를 나타내는 방식입니다.

💡 패스(Path) : 좌표값, 곡률 값을 가진 각 고정점을 잇는 벡터 선입니다. 고정점(Anchor poin) : 좌표값을 가진 점입니다. *핸들(Handle) : 고정점과 고정점 사이의 곡률 값을 조절할 수 있는 점입니다.

※ 핸들을 조절하여 만드는 곡선을 ‘베지어 곡선(Bazier Curve)’라고 한다.

이미지 표현 방식의 선택은 디자인의 목적, 필요성 등에 따라 달라질 수 있습니다.

피그마는 벡터 기반의 디자인 툴입니다.

로고, 아이콘, 일러스트 등의 이미지를 만드는 데 적합합니다. 또한 적은 해상도에서도 이미지가 깨지지 않기 때문에 UIUX 디자인 작업 시 1:1 사이즈로 작업할 수 있다는 이점이 있습니다.

디자인 해상도 이해하기

✏️

세 줄 요약

✅ 해상도가 높으면 이미지가 선명하지만 용량이 크다.

✅ 해상도가 낮으면 이미지가 흐리고 용량이 작다.

✅ SVG 확장자는 벡터 그래픽이기 때문에 해상도 영향을 받지 않는다.

해상도

화면 크기와 선명도는 디지털 화상을 구성하는 최소 단위인 ‘픽셀’로 표현합니다. 해상도는 화면에 표시되는 픽셀 수를 말하여 일반적으로 너비와 높이를 픽셀 단위로 나타냅니다.

화면의 픽셀 수가 많을수록 해상도가 높아지고 이미지가 더 선명하게 나타납니다.

픽셀 밀도

PPI(1인치당 = 2.54cm 픽셀 수) 또는 DPI(1인치당 도트 수)로 측정되며, 화면에 표시되는 영역 안에 포함된 픽셀의 수를 의미합니다. 화면의 크기가 같더라도 픽셀의 밀도가 높을수록 이미지가 더 선명하게 표현됩니다.

배수(Scale Factor)

고밀도 디스플레이에서는 픽셀 밀도가 증가하면서 배율도 2x, 3x와 같이 증가합니다.

다양한 픽셀 밀도를 가진 기기에서 올바르게 디자인이 표시되도록 다양한 배율로 에셋을 내보내는 것이 중요합니다.

이러한 문제를 해결하기 위해 JPG, PNG 파일을 내보낼 때는 해당 에셋이 사용되는 환경에 맞게 2배수, 3배수와 같은 배율의 에셋을 함께 내보내거나, SVG와 같은 벡터 확장자를 사용하는 것이 좋습니다.

레이어의 개념

디자인 툴을 사용하기 위해서는 ‘레이어(Layer)’의 개념을 이해해야 합니다.

레이어는 쉽게 말해, 디지털 캔버스 위에 겹겹히 쌓을 수 있는 투명한 종이 시트와 같습니다. 각 레이어는 별도의 요소를 포함할 수 있어, 복잡한 디자인을 쉽게 수정, 관리할 수 있습니다. 핵심은 각각의 레이어를 독립적으로 작업할 수 있다는 점입니다.

레이어는 보통 ‘레이어 리스트’에서 목록 형태로 나타나며 ‘순서’에 영향을 받습니다. 리스트에서 상단에 위치할 수록 디자인상에서 위, 즉 눈 앞에 위치하게 됩니다.

🙂 CSS에서의 z-index 속성과 개념이 유사합니다. css z-index