주로 mdpi, hdpi, xxxhdpi … 혹은 2x 3x 등을 고려해서 디자인해야 하는 모바일 앱(보다는 웹)에만 해당한다고만 생각했지만, 작년부터 사용한 중고 맥, 그리고 HIDPI을 제대로 지원하기 시작한 윈도우10 이후로 150% 이상 확대하여 사용하는 사람들이 많은 것을 보며 생각이 달라졌습니다.
웹에 적용된 이미지들이 일반 1:1 대응의 모니터 기준으로 이루어져 있고 운영체제에서는 이를 강제로 확대해 깨지기 때문입니다. 실제로, 네이버 메인 화면을 뜯어보면 스프라이트 이미지를 기존의 비트맵 방식이 아닌 벡터 방식으로 사용하고 있습니다.
요즘엔 SKETCH APP으로 웹도 디자인한다고 하지만 너무 불편해서 아직 비트맵 기반의 포토샵을 사용하고 있고 이번 개인 웹 사이트를 진행하면서도 포토샵을 이용했습니다. 하지만, 포토샵에서도 TEXT나 SHAPE의 경우 벡터 방식의 출력이 가능한데, 이에 대한 사용기 및 지식을 공유해보고자 합니다.
Photoshop에서 SVG 내보내기
비트맵을 제외한 백터로 이루어진 요소들만 가능
마크업에 들어가기 전, 제작된 PSD 파일에서 SVG로 내보내고자 할 부분을 구분합니다. 당연하지만, 텍스트 및 아이콘(SHAPE)과 같은 벡터 요소만 가능합니다. 텍스트는 웹 폰트를 사용하면 되지만, 라이센스 문제가 있는 경우 혹은 폰트의 파일이 너무 큰 경우 속도에 문제를 줄 수 있기 때문에 부분적으로 사용하는 경우 SVG로 내보냅니다.
텍스트 Shape화 하기
레이어 패널에서 변환하고자 하는 텍스트 레이어를 오른쪽 마우스 클릭한 뒤, Convert to Shape를 클릭합니다. 일반 텍스트로, SVG로 보낼 수는 있지만, 코드를 살펴봤을 때 폰트 이름이 들어간 것으로 보아, 해당 폰트가 없는 곳에서는 제대로 볼 수 없을 게 분명하기 때문입니다.
Shape 합치기
왼쪽 툴박스에서 도형 틀을 선택한 후 상단에서 Merge Shape Components를 꼭 눌러줍니다. 일부 글꼴의 경우 (특히 한글) 요소와 요소가 맞닿는 부분을 미리 합쳐야 하나 이러한 최적화를 하지 않고 내보내 나중에 보면 글자가 겹치는 부분이 비어서 표현되기 때문입니다. 벡터 아이콘 역시 일러스트에서 작업한 것을 가져다 쓴 것이 아니라 포토샵 내에서 그린 것이라면 동일하게 작업해 줍니다.
SVG 내보내기
(텍스트의 경우) SHAPE화 하고 도형을 합쳤다면 이제는 내보내야 할 차례입니다. 대상 레이어 오른쪽 마우스를 클릭하고 Export As… 을 클릭합니다.
Format을 SVG로 선택하고 Export All… 을 눌러주면 끝!
다수의 요소 모음(스프라이트)는 어떻게 하나요?
능력자들은 전처리기 (SASS, LESS…) spritesmith등을 이용해 자동화한다고 하지만 저는 그렇게까지는 능력이 되지 않고, 온라인 Sprite Generator 등은 아직 비트맵 이미지만 지원하기 때문에 저는 포토샵 도큐먼트를 열어서 노가다로 진행했습니다. 머리가 나쁘면 고생한다고 시간이 나면 서서히 이 부분도 공부해야겠지요.
다 정리한 후 하나의 상위 그룹으로 묶고, 그룹을 오른쪽 마우스 클릭해 Export As… 을 눌러 진행하면 됩니다.
그럼, 비트맵은요?
애초에 SKETCH APP를 사용하거나 (배율로 내보내기가 가능하므로) 포토샵에서 2x로 작업하면 되지만, 비율을 보는 것이 어렵기 때문에 1x로 작업한 후 일부 요소들을 2x로 다시 작업해 내보냈습니다.
아까 SVG Export 보니, 1x, 2x 선택 가능하던데요?
벡터로 제작된 것이라면 모를까, 원본 소스가 비트맵이기 때문에 당연히 그렇게 내보낼 경우 깨집니다. 이렇게 하고 싶으신 분들은 벡터로 작업하시거나 애초에 2x, 3x… 등의 고배율로 작업하신 뒤 축소해서 내보내면 됩니다. (용량 압박과 버벅대는 포토샵을 경험하고 싶다면…)
2X 이미지를 마크업 할 때
이미지 요소로 사용
원본 크기를 CSS 혹은 인라인으로 지정해 주면 됩니다.
(2x 이미지가 60PX라면 30PX)배경화면의 경우
원본 크기의 width, height를 지정하고, background-size: contain을 줍니다.
HIDPI 대응 결과
깨지지 않고, 동일한 화면으로 잘 렌더링 됨을 확인할 수 있습니다. 전문 개발자들과 큰 회사들에서는 어떻게 작업하는지는 모르겠습니다. 이런 노가다가 아닌 좀 더 쉽고 유연한 방법을 사용할 것으로 생각합니다.
하지만, 이러한 방법으로도 작업할 수 있다? 정도의 후기로 봐주시면 어떨까 싶습니다.