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

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

Dong-gri
guleum
May 9, 2019

--

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

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

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

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

--

--