고해상도에 맞춘 웹 디자인 후기

PHOTOSHOP에서 SVG, 2X 이미지 만들기

주로 mdpi, hdpi, xxxhdpi … 혹은 2x 3x 등을 고려해서 디자인해야 하는 모바일 앱(보다는 웹)에만 해당한다고만 생각했지만 작년부터 사용한 중고맥, 그리고 HIDPI을 제대로 지원하기 시작한 윈도우10 이후로 150%이상 확대하여 사용하는 사람들이 많은 것을 보며 생각이 달라졌습니다.

웹에 적용된 이미지들이 일반 1:1 대응의 모니터 기준으로 이루어져 있고 운영체제에서는 이를 강제로 확대해 깨지기 때문입니다. 실제로, 네이버 메인 화면을 뜯어보면 스프라이트 이미지를 기존의 비트맵방식이 아닌 벡터방식으로 사용하고 있습니다.

IE 하위 호환성을 반영해 기존의 PNG와 혼용 사용중인 네이버 스프라이트 SVG

요즘엔 SKETCH APP으로 웹도 디자인한다고 하지만 너무 불편해서 아직까지 비트맵 기반의 포토샵을 사용하고 있고 이번 개인 웹 사이트를 진행하면서도 포토샵을 이용했습니다. 하지만, 포토샵에서도 TEXT나 SHAPE의 경우 백터방식의 출력이 가능한데 이에 대한 사용기 및 지식을 공유해보고자 합니다.


PHOTOSHOP 에서 SVG 내보내기

비트맵을 제외한 백터로 이루어진 요소들만 가능

좌: 포토샵에서 작업한 FRONT / 우: 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등은 아직까지 비트맵 이미지만 지원하기 때문에 저는 포토샵 도큐먼트를 열어서 노가다로 진행했습니다. 머리가 나쁘면 고생한다고 시간이 나면 서서히 이 부분도 공부해야 겠지요.

5–10px 씩 직접 간격을 지정하며 배치

다 정리한 후 하나의 상위 그룹으로 묶고, 그룹을 오른쪽 마우스 클릭해 Export As… 을 눌러 진행하면 됩니다.


그럼 비트맵은요?

애초에 SKETCH APP을 사용하거나 (배율로 내보내기가 가능하므로) 포토샵에서 2x로 작업하면 되지만, 비율보는 것이 어렵기 때문에 1x로 작업한 후 일부 요소들을 2x로 다시 작업해 내보냈습니다.

수치 확인 후 새 도큐먼트를 열고 기존수치에 *2 해주어 진행

아까 SVG Export 보니, 1x, 2x 선택 가능하던데요?

백터로 제작된 것이라면 모를까, 원본소스가 비트맵이기 때문에 당연히 그렇게 내보낼 경우 깨집니다. 이렇게 하고싶으신 분들은 백터로 작업하시거나 애초에 2x, 3x… 등의 고배율로 작업하신 뒤 축소해서 내보내면 됩니다. (용량압박과 버벅이는 포토샵을 경험하고 싶다면…)

2X 이미지를 퍼블리싱 할때

  1. img로 사용
    원본 크기를 CSS 혹은 인라인으로 지정해주면 됩니다. (2x 이미지가 60px이라면 30px)
  2. 배경화면의 경우
    원본크기의 width, height를 지정하고, background-size: contain 속성을 줍니다.

HIDPI 대응 결과

좌: FHD(1920*1080) / 우: 맥북 레티나 (2880x1800)

깨지지 않고, 동일한 화면으로 잘 렌더링 됨을 확인할 수 있습니다. 전문 개발자들과 큰 회사들에서는 어떻게 작업하는지는 모르겠습니다. 이런 노가다가 아닌 좀더 쉽고 유연한 방법을 사용할 것이라 생각합니다.

하지만, 이러한 방법으로도 작업할 수 있다? 정도의 후기로 봐주시면 어떨까 싶습니다.