Sketch와 1px
신입에게 가르쳐주는 스케치 1편
스케치에서 만나는 1px의 짜증
현재의 디지털 디자인 툴로 각광받는 스케치, Sketch는 아직 Mac OS에서만 사용할 수 있습니다. 그리고 맥은 레티나 스크린을 가지고 있습니다. 그리고, 스케치에서 디자인되는 작업물은 고해상도의 모바일 스크린에서 보이게 됩니다.
모바일 디바이스는 해상도가 의외로 다양하기 때문에, 몇 가지 사이즈의 이미지가 필요합니다. x1, x2, x3 이런 식인데요. 페이스북에서 가끔씩 일러스트레이터 등에서 작업한 패스를 불러오고, 스케치에서 Export 해서 비트맵 이미지로 바꿀 경우, 안티 알리아스 때문에 "뭉개지거나", "지저분하게" 보이게 됩니다.
스케치를 다른 디자이너에게 권할 때, 이걸 설명하기 위해, 화면과 픽셀의 관계와 도표를 제시했지만 이해시키는데 매번 실패했습니다. 그냥 간단하게 "0.5씩 더하세요."라고 하면, 패스를 면으로 구성하는 경우에도 그렇게 해서 역시 이해시키는데 실패했습니다. 페이스북에서 비슷한 질문을 볼 때마다, 가슴이 아파서 이해를 돕는 설명을 만들기로 했습니다.
이 설명은 '선', Line과 Stroke로 이루어진 아이콘을 대상으로 합니다. 면으로 하면 노드를 정수로 고정하라고 하지만, 라인으로 해두면, 나중에 관리가 쉬운 면도 있기 때문에 도움이 되리라 생각합니다.
이 아이콘은 1px의 라인으로 구성된 아이콘입니다. 어도비 일러스트레이터나 기타 벡터로 디자인할 수 있는 툴에서는 위의 이미지처럼 보입니다. 이 노드를 모두 선택해서 복사 & 붙여 넣기 하면, 스케치에 쉽게 붙여 넣을 수 있습니다.
아마 스케치에서 봐도 별 문제없어 보일 겁니다. 그러나 스케치는 실제 비트맵 이미지가 아니라 내가 만든 패스를 레티나 스크린에 맞게 보여주고 있을 뿐입니다. PNG, JPG로 Export 하면 배신이 시작됩니다.
선으로 그려진 경우 +0.5
픽셀로 보면 각기 이렇게 보입니다. 맥이나 맥북 프로에서 보는 아이콘은 괜찮아 보이지만, 비트맵으로 바꾸는 순간 안티 알리아스가 적용돼서 픽셀이 "뭉개지거나", "뿌옇게" 보입니다.
이 상태에서 커뮤니티나 소셜 미디어에서 물어보면, 그리드를 놓고 작업하라는 말을 들으실 수 있을 겁니다. 이해가 쉽게 그리드와 픽셀의 X값을 보면 왼쪽은 123pt, 오른쪽은 123.5pt입니다. 왼쪽은 이상하게 뿌옇게 표시되지만, 오른쪽은 의도한 대로 깔끔한 직선이 됩니다.
왼쪽이 보정 전, 오른쪽이 보정 후입니다. 선(Path)의 Node를 조정해서 비트맵에서도 의도한 대로 보이도록 조정했습니다. 왼쪽이 보정 전, 오른쪽이 보정 후입니다.
왼쪽과 오른쪽의 차이는 패스를 구성하는 Node의 위치를 정수에서 0.5로 변경한 겁니다. 각 노드를 0.5로 조정하지 않아도, 레티나에서는 그런대로 볼만합니다. 그러나 웹디자인에도 같은 아이콘을 써야 한다면, 민감한 문제가 됩니다.
스케치에서는 크게 그린 후에 축소하는 것이 아니라 가장 작은 크기(1x)에서 확대해서 Export 하는 것이 효율적이기 때문에 가급적이면, 신경 써주는 것이 좋습니다.
화면마다 달라지는 1px
이런 일이 일어나는 이유는 픽셀 때문입니다. 우리가 보는 대부분의 화면, 즉 스크린은 디지털 이미지를 재현하기 위한 픽셀로 구성되어 있습니다. 1px은 그 가장 작은 단위입니다. 그러면 가장 작은 픽셀이 1px인데, 어떻게 소수점으로 자리가 표시되는지 궁금하실 겁니다.
스케치처럼 벡터 기반의 툴에서 수소점이 없이 정수 위치의 X값에 배치한 두 개의 노드를 연결한 1px의 선(닫혀 있지 않은 패스)은 비트맵 파일에서 왼쪽처럼 나옵니다. 오른쪽의 라인은 같은 선의 2px 선입니다. 각각 그리드에서 2칸을 차지합니다. 왼쪽은 회색으로 약간 투명하고, 오른쪽은 의도한 대로 검은색입니다.
같은 파일을 레티나 모니터에서 열어보면 이렇게 보입니다.
왼쪽은 한 칸이 되었고, 색도 의도한 검은색입니다.
이렇게 보이는 이유는 1px이 어디에나 통하는 절대적인 단위가 아니라 스크린이 표시할 수 있는 가장 작은 정보 단위이기 때문입니다.
이제 좀 더 자세히 보면 이렇습니다. 아까 그리드에서 2칸을 차치하는 1px 라인의 패스를 표시합니다.
비교를 위해 같은 크기의 사각형을 옆에 그렸습니다.
왼쪽에 있는 1px 라인의 Storke는 1px이고 패스의 가운데를 기준으로 그려져 있습니다.
우리가 툴에서 선을 그릴 경우, 먼저 선의 정보가 추가되고, 거기에 선의 두께 정보가 더해져서 눈으로 볼 수 있는 선이 표시됩니다.
스크린은 디자이너가 그린 라인의 안쪽과 바깥쪽(Align Storke to inside)으로 0.5px의 선을 그려 1px을 표시해야 하는데, 0.5px은 없습니다. 표시할 수 있는 가장 작은 단위가 1px이기 때문입니다. 그래서 1px을 표시하고 50% 투명도로 0.5px을 표시합니다. 그게 아이콘이 "뭉개지는" 이유입니다.
여기서 PPI를 알려드리면 될 것 같습니다. PPI는 Pixel per inch입니다. 고화질 모니터는 저화질 모니터보다 더 높은 PPI, 높은 해상도를 갖습니다. 맥북 프로 15인치의 경우 220 ppi입니다. PPI 계산은 모니터의 대각선의 길이(픽셀)를 구한 후, 화면의 대각선(인치)으로 나누면 됩니다.
https://goodcalculators.com/ppi-pixels-per-inch-calculator/
그럼 여기서 새로운 의문이 생기실 겁니다.
3px 혹은 3pt처럼 홀수는 어떻게 하죠?
1px로 생길 때 생기는 문제점을 이해하면 방법을 생각하실 수 있을 겁니다.
패스는 보통 이렇게 두 종류가 있습니다. 닫힌 패스는 쉐이프나 면이 됩니다. 보통 이 모양은 Storke 혹은 line size 혹은 width가 0인 경우입니다. 존재는 하지만 보이지 않습니다. 이제 해당 부분에 "1"을 쓰게 되면 이 패스의 선 위에 붓질(Storke)을 하게 됩니다.
패스에 노드가 2개만 있으면, 안과 밖을 구분할 수 없기 때문에 Storke의 정렬을 Center 밖에 할 수 없습니다. 닫힌 패스라면 Stroke의 정렬은 3가지가 있습니다.
Center 정렬을 하지 않으면, 라인으로 구성하지 않고, 면으로 아이콘을 구성하면, 웬만한 환경에서는 깔끔한 이미지를 사용할 수 있습니다. 그러나 수정을 해야 하는 경우가 생기면, 라인이 아닌 아이콘의 두께를 조절하기가 힘듭니다.
라인의 두께를 자유롭게 조정할 수 있으면, 주로 사용되는 아이콘의 경우 프로젝트가 달라져도 조형적인 요소를 추가하거나 보강하여 재사용이 가능합니다.
그럼, 3px 혹은 3pt의 Stroke를 Center 정렬하는 건요?
많은 디자인 가이드라인이나 디자인 시스템을 보면, Icon 항목에 Icon이라고 적혀 있지 않고, Iconography라고 적혀 있습니다. 아이콘을 만드는데, 문자처럼 규칙과 의미가 있다는 뜻입니다.
구글 머티리얼 디자인 가이드라인의 Design 항목의 Iconography를 보면,
아이콘의 Stroke는 2pt, 정렬은 inside를 권장하고 있습니다. 대부분의 경우에서 가장 깔끔하기 때문입니다. 그럴 수밖에 없겠죠?
혹시나 싶어서 써넣는데, 정렬이 inside인 경우는 가장 작은 크기일 때, 유용하고, outside는 큰 사이즈에서 이미지 크기를 줄일 때 유용합니다. 예를 들어 inside로 해놓고, 0.5x로 줄이면, 스트로크가 아이콘의 형태를 좁게 만들어서 의도한 아이콘의 모양이 표현되지 않을 수 있습니다.
하지만 여러 가지 디자인을 보면, 3pt 두께를 가진 아이콘을 보셨을 겁니다. 그런 경우는 Stroke로 된 것이 아니라 Shape로 디자인 사례입니다.
그럼 이제, 반투명 픽셀로 고통받는 일이 없기를 바랍니다.
어도비 일러스트레이터는 디지털 디자인의 시대를 목적으로 만든 툴이 아니라 오랫동안 인쇄 디자인에 적합한 툴이었습니다. 스케치는 심벌을 만들고 심벌을 쉽게 배치는 쉽게 할 수 있지만, 그리기 쉬운 기능은 아직 제공하지 않습니다.
예제의 이미지를 제작하는 데는 Affinity Designer를 사용했습니다. 이 툴에서는 Pixel view, Retina Pixel view, Outline view가 있어서 쉽게 결과를 확인할 수 있습니다.
