** 자세한 강의는 유튜브 영상으로 제공됩니다.
- 이번 강좌에서는 이미지(소스) 내보내는 방법을 알아보겠습니다.
- XD에서는 디자인에셋 내보내기라는 용어를 써서 제목에 feat로 달아봤습니다.
- 피그마 역시 XD처럼 내보내는 것이 아주 편리합니다.
- 모바일에 대응한 1x, 2x, 3x로 내보낼 수도 있고, 내보내기를 체크한 것만 내보낼 수도 있습니다.
- 그리고 원래 svg를 이용했거나, 벡터 혹은 직접 제작한 것은 SVG파일로도 내보낼 수 있습니다.
1. 해상도 설명 - 1x, 2x, 3x???
- 이제 내보내기(Export) 수업을 하게 되는데, 처음부터 1x, 2x, 3x가 나옵니다.
- 이건 애플 즉 아이폰에서의 해상도관련 용어입니다.
- 그래서 이 해상도에 대한 개념을 이해하고 시작하는 것이 좋습니다.
1) PC에서의 해상도
- 보통 PC에서 웹디자인을 할 때 사용하는 해상도는 72PPI(Pixel Per Inch)라는 것을 사용합니다.
- 1인치에 들어가는 픽셀수가 72개라는 것입니다.
- 그래서 같은 사이즈여도 해상도가 높을 수록 밀도가 올라가 더 선명한 이미지를 보여줄 수 있습니다.
- 보통 액정으로 이루어진 px을 쓰는 경우는 PPI를 선호하고, 인쇄물을 측정해서 쓰는 경우에는 DPI를 선호해서 씁니다.
- 하지만 안드로이드가 DPI를 선정해서 DP라는 단위를 쓰면서 모바일에도 DP라는 단위를 사용하게 됩니다.
- DPI는 Dots Per Inch의 약자로 1인치에 색상점(도트)가 몇개 들어가 있는지를 표시합니다.
- 그러니까 72DPI라는 것은 1인치에 색상점이 72개 들어가 있다는 이야기죠.
2) 모바일 해상도
- 모바일은 화면이 작기 때문에 선명해야 더 잘보일 수 있었습니다.
- 그래서 많은 모바일 제작업체에서 해상도를 올리게 됩니다.
- IOS같은 경우는 기존 해상도를 @1x라는 기준으로 본다고 했을 때, @2x, @3x까지 해상도를 높였습니다.
- 안드로이드 같은 경우는 dp방식을 사용해서 MDPI, HDPI, XHDPI, XXHDPI, XXXHDPI 등의 용어를 사용하지만 결과적으로 삼성스마트폰은 4x라고 보면 됩니다.
- 아래 그림으로 보도록 하겠습니다.
- 이렇게 보니까 왜 스마트폰 액정이 깨졌을 때 금액을 많이 지불해야하는지 아시겠죠?
** 위의 개념은 실제 액정이 이런 방식으로 만들어진다는 이야기는 아닙니다. 픽셀 밀도가 그렇다는 것이고, 기기장치마다 수치는 다릅니다.
** 이해를 위해 2x, 3x, 4x 개념을 설명하기 위해서 사용한 것이니 액정 응축이라는 개념보다 PPI로 밀집도가 좋아진다고 보면 됩니다.
** 그 내용은 위에 그림으로 표현했기 때문에 오해는 없으시길 바랍니다.
** 그래서 혼동할 수도 있을 것 같아서 다시 아래와 같이 설명하겠습니다.
1. PPI(Persons Per Inch)는 화면의 해상도를 측정하는 단위이며, 일반적으로 "액정 픽셀 밀도"로 번역됩니다. 해상도와 PPI는 서로 다른 개념이지만, 서로 밀접하게 연관되어 있습니다. 해상도는 화면에 표시되는 픽셀의 총 수를 나타내며, PPI는 해당 화면의 크기에 따라 픽셀이 얼마나 밀집되어 있는지를 나타냅니다.
2. "2x, 3x, 4x 해상도"라는 용어는 주로 디스플레이의 픽셀 밀도를 의미하는 것으로 사용됩니다. 이 용어는 고해상도 디스플레이에서 사용되며, 픽셀이 일반적인 디스플레이보다 2배, 3배, 또는 4배로 밀집되어 있다는 것을 나타냅니다. 이는 고해상도 디스플레이에서 더 선명하고 세밀한 이미지를 제공하는 데 도움이 됩니다.
3. 결론
- PPI는 디스플레이의 픽셀 밀도를 측정하는 단위입니다.
- "2x, 3x, 4x 해상도"는 고해상도 디스플레이에서 픽셀이 얼마나 밀집되어 있는지를 설명합니다.
** 그림으로 쉽게 설명하려 했는데, 댓글이 달려 피드백합니다.
** 댓글은 언제든지 환영합니다.
3) 물리적 해상도와 논리적 해상도
- 물리적(Physical) 해상도는 단말기가 실제로 표현할 수 있는 물리적 화소 기본 단위를 의미합니다.
- 논리적(Logical) 해상도는 디바이스 픽셀과 무관하게 모바일웹 구현(HTML/CSS) 시 논리적으로 표현할 수 있는 화소 기본 단위입니다.
- 일반적인 벡터로 제작되는 텍스트나 CSS적인 요소들은 논리적 단위에 맞춰 코딩하면 됩니다.
ex) 글자 크기, 요소의 영역, 여백 등
- 하지만 이미지의 경우에는 화소가 들어가기 때문에 논리적 단위에 맞게 되면 깨져보이게 됩니다.
- 아래 예시로 확인을 해보도록 하겠습니다.
- 예시는 삼성스마트폰이라 보고 4x적으로 보도록 하겠습니다.
- 위의 이미지를 보면 1x나 2x 경우 많이 깨져보이는 것이 확인됩니다.
- 그래서 글자나 요소의 영역을 CSS로 적는 것은 벡터로 처리되서 문제가 되지 않지만, 이미지는 논리적 단위로 그대로 만들게 되면 위와 같이 깨져보입니다.
- 그래서 보통 포토샵으로 디자인할 때 실무에서는 2배를 선호해서 제작합니다.(이미지를 넣어야 하기 때문이죠)
- 그럼 삼성스마트폰은 4x격인데 왜 거기에 맞추지 않냐고 물어보실수 있겠죠?
- 그 이유는 4배로 디자인하게 되면 용량이 너무 커서 렌더링(구현)이 매우 느려지기 때문입니다.
- 여러분들이 생각할 때 조금 깨져보이는 것과 느리게 뜨는 것 중 어느 것이 더 싫을까요?
- 그리고 아이폰은 전부 2x, 3x여서 2배여도 깨져보이지 않습니다.
** 이건 피그마 수업이라 이정도만 설명하도록 하겠습니다.
- 기기별 자세한 논리적 해상도와 물리적 해상도를 확인하고 싶은 분은 아래 주소를 클릭하세요.
https://viewportsizer.com/devices/
2. 이미지 내보내기 - 파일 제작
** 사용될 이미지 출처 : https://pixabay.com/ko/photos/%ec%82%ac%eb%ac%b4%ec%8b%a4-%ec%9d%bc%ed%95%98%eb%8b%a4-%ec%b1%85%ec%83%81-%ec%bb%b4%ed%93%a8%ed%84%b0-932926/
- 이미지를 두개로 한것은 큰 것으로 제작해서 내보낼 경우와 원래 사이즈로 제작해서 내보낼 경우를 비교해보기 위해서 입니다.
2. 이미지 내보내기 - 각각 내보내기
1) 각각 내보내기 - [hamburger] SVG버튼
- [Design]패널의 [Export]에서 [+]버튼을 눌러 줍니다.
- 이때 [SVG]로 선택하면 2x, 3x 등으로 내보낼 필요가 없습니다. 벡터는 확대해도 깨지지 않기 때문입니다.
2) main이미지
- [Design]패널의 [Export]에서 [+]버튼을 눌러 줍니다.
- 이때 실제로는 2배 이미지가 필요합니다. 하지만 우린 1x,2x,3x까지 전부 내보내볼게요.
3. 이미지 내보내기 - 한번에 내보내기
- 위처럼 하나씩 내보내면 많은 컨텐츠가 있으면 불편합니다.
- 한번에 내보내는 단축키가 있습니다. [Ctrl]+[Shift]+[E]입니다.
1) 우선 내보낼 컨텐츠만을 [Export]를 처리
2) 한번에 단축키를 통해 [Export]처리
- 단축키 [Ctrl]+[Shift]+[E]를 눌러 한번에 내보내기 처리합니다.
3) 이미지 확인
'디자인프로그램 > Figma' 카테고리의 다른 글
| [Figma] 23강 Variants를 이용한 탭바컨텐츠 - 오쌤의 니가스터디 (2) | 2022.08.29 |
|---|---|
| [Figma] 22강 피그마파일공유 및 코멘트툴 - 오쌤의 니가스터디 (4) | 2022.08.04 |
| [Figma] 20강 Rename It 플러그인 - 오쌤의 니가스터디 (0) | 2022.07.18 |
| [Figma] 19강 오쌤 Pick! 피그마 플러그인 Top 10 - 오쌤의 니가스터디 (4) | 2022.06.29 |
| [Figma] 18강 Prototype - Dropdown Menu - 오쌤의 니가스터디 (10) | 2022.06.16 |
