1px 보다 얇은 디자인 — 라인 편
불가능. 그것은 아무것도 아니다.
디자이너와 개발자 사이에 갈등을 유발하는 디자인과 개발 사이의 이야기를 다뤄봅니다.
1px 보다 얇게.
UI 디자인 시안을 넘겨받아 개발하는 프론트엔드(Front-End) 개발자는 때때로 디자이너의 요구사항에 난감할 때가 있습니다. 예를 들면 0.5px 두께의 매우 가는 라인(선)을 화면에 그려달라고 하는 경우입니다.
행(Row) 구분 선의 두께를 0.5px로 그린 표 디자인의도적인 경우가 아니면 디자이너 대다수는 얇은 선을 사용하는 것을 선호합니다. 선뿐만 아니라 색상 선택에서도 유사한 경향을 보입니다. 아마도 직설적인 표현보다 은은한 표현을 선호해서 그런 것이 아닐까 생각합니다. 물론, 모든 디자이너가 그런 것은 아니니 일반화 하기에는 조심스럽습니다.
벡터(Vector) 그래픽 도구에서 그린 두께 별 라인(선)불가능.
결론부터 말하면 대부분의 웹 브라우저 환경에서 1px 보다 얇은 디자인을 그리는 것은 현재 불가능합니다. (단, Firefox 브라우저는 1px 보다 얇은 선을 그릴 수 있습니다) StatCounter 글로벌 통계를 통해 살펴본 지난 1년간(2019.07 - 2020.07) 대한민국 브라우저 점유율은 Google Chrome 사용률이 월등히 높습니다. 하지만 Chrome 브라우저에서는 아직까지 1px 보다 얇은 선을 그릴 수 없습니다.
2019 — 2020 대한민국 브라우저 점유율 (Statcounter)픽셀 밀도 (Pixel Density)
앞서대부분의 웹 브라우저에서 1픽셀 보다 얇은 선을 못 그린다고 이야기했습니다. 그렇다면? 1px 보다 얇은 선을 왜 못 그리는 것일까요? 이유는 픽셀 밀도 때문입니다.
픽셀 밀도란? 1 인치(inch) 영역에 물리적으로 표현 가능한 픽셀 수를 말합니다. 모니터, 스마트폰, 태블릿과 같은 디지털 기기의 화면의 픽셀 밀도는 PPI(인치당 픽셀 수) 단위로 측정합니다. 아래 그림에서 알 수 있듯이 기기가 지원하는 픽셀 농도에 따라 최소 표현 가능한 픽셀 개수가 변경됩니다. 예를 들어 1 PPI 밀도를 가진 화면에서는 최소 픽셀 개수가 1개입니다.
1px 보다 얇은 선을 화면에 표현하려면 최소한 2 PPI 픽셀 농도를 지원하는 디지털 기기여야 합니다. 일반적으로 레티나 디스플레이(Retina Display) 혹은 고해상도(Hi-res) 디스플레이로 불리는 화면에서나 1px 보다 얇게 표현이 가능합니다. 2 PPI부터 1인치 안에 표현 가능한 픽셀 개수가 나눠지기 때문입니다.
픽셀 밀도에 따른 표현 검증
앞서 다룬 픽셀 밀도 이론 대로라면 1 PPI 밀도의 화면에서 0.5px은 1px로 표시되고, 2 PPI 밀도의 화면에서는 0.5px 두께로 얇게 표시될 것입니다. 1 PPI 밀도 상 최소 크기는 1px 이므로 더 작게 표현할 수 없습니다.
이론을 검증하게 위해 실제 화면에 그려지는 결과를 비교해봤습니다. CSS 스타일 언어를 사용해 0.5px, 1px 각 두께를 가진 라인(선)을 화면에 그려보면 1 PPI 환경 화면에서는 두께가 1px로 동일합니다.
예제 DEMO: https://codepen.io/yamoo9/pen/XWdamMa
1 PPI 환경 — 1px vs 0.5px반면, 2 PPI 이상 밀도를 가진 화면(예: 스마트폰 고해상도 디스플레이)에 그려진 결과를 살펴보면 1px과 0.5px 두께가 확연하게 구분됩니다. 2 PPI에서 최소 크기는 기존의 1px보다 작게 나눌 수 있기 때문입니다.
2 PPI 이상 환경 — 1px vs 0.5px살펴본 결과를 참고하여 디자이너는 다음의 사실을 기억하여 개발자에게 요청해야 합니다.
픽셀 밀도에 따라 1px 보다 작은 크기의 선을 그릴 수 없을 수 있다.
모바일 환경과 달리, 데스크탑 환경의 화면은 대부분 1 PPI 밀도가 사용된다.
디자인에 앞서, 디자인이 구현될 환경에 대해 먼저 이해해야 한다.
불가능. 그것은 아무것도 아니다.
앞에서 우리는 1px 보다 얇은 선을 화면에 왜 그릴 수 없는지 이유를 알아봤습니다. (정확히는 1 PPI 밀도에서) 그러함에도 1px 보다 얇은 디자인을 요구하는 경우가 종종 있을 수 있습니다. 그러한 요구에 "할 수 없어."라고 답변해서는 프론트엔드 전문가로서의 위상이 흔들리고 디자이너와 협업에서 불협화음이 발생할 수 있습니다.
그렇다면 어떻게 대체하는 것이 좋을까요? 불가능을 가능하게 하는 것은 무던히 연구하고 노력하여 최선의 방법을 찾아내 반영해야 합니다. 이 글을 통해 우리는 1px 보다 얇은 선을 표현하는 몇 가지 방법을 살펴보고 각 방법의 장단점을 정리해볼 것입니다. 살펴볼 방법은 다음의 5가지입니다.
스케일(scale)을 활용한 방법
불투명도(Opacity)를 활용한 방법
선형 그레디언트(Linear Gradients)를 활용한 방법
박스 그림자(Box Shadow)를 활용한 방법
보더 이미지(Border Image)를 활용한 방법
1. 스케일(Scale)
가장 먼저 살펴볼 방법은 CSS 2D 트랜스폼(Transform)의 스케일(Scale) 함수를 활용하는 방법입니다. 1px 높이를 스케일 조정하여 1px 보다 작은 크기(예: 0.5px)로 화면에 그려낼 수 있습니다. 화면의 실제 픽셀은 1px이지만, 스케일을 사용해 가늘게 표시하는 일종의 트릭입니다.
예제 DEMO: https://codepen.io/yamoo9/pen/RwaZrxR
1px 보다 얇은 선을 화면에 그려내는 이 방법의 장단점을 살펴보고 보완 방법 또한 살펴봅니다.
장점
사용법이 매우 간단하고 원리를 이해하기 쉽다.
단점
선을 그리기 위한 별도의 불필요한 마크업이 추가되어 의미적이지 못하다.
확인 결과, 실제 크기는 1px과 동일하며 반투명하게 표시하는 착시를 이용한다. (비교 이미지)
보완
표현(presentation) 임을 role 속성을 사용하여 명시한다.
의미를 가지지 않으므로 가상 요소(::before, ::after 등)를 사용하여 표현한다.
2. 불투명도(Opacity)
이 방법은 CSS 불투명도를 활용한 방법입니다. 이 방법은 평면에 공간감을 부여하는 원근법 중 "색채(또는 공기) 원근법"으로 실제 그렇지 않지만 멀리 있는 사물을 뿌옇거나 흐릿하게 표현하여 크기를 작거나 멀리 있는 것처럼 착시를 일으킵니다. 색이 진한 사물이 앞으로 돌출되어 보이고, 색이 연한 사물의 크기가 더 작아 보이는 것처럼 느껴지는 것이 착시입니다.
예제 DEMO: https://codepen.io/yamoo9/pen/qBZXZKm
1px 보다 얇은 선을 화면에 그려내는 이 방법의 장단점을 살펴보고 보완 방법 또한 살펴봅니다.
장점
사용법이 매우 간단하고 원리를 이해하기 쉽다.
단점
선을 그리기 위한 별도의 불필요한 마크업이 추가되어 의미적이지 못하다.
확인 결과, 실제 크기는 1px과 동일하며 반투명하게 표시하는 착시를 이용한다. (비교 이미지)
보완
표현(presentation) 임을 role 속성을 사용하여 명시한다.
의미를 가지지 않으므로 가상 요소(::before, ::after 등)를 사용하여 표현한다.
3. 선형 그레디언트(Linear Gradients)
이 방법은 CSS 선형 그레디언트를 배경 이미지로 활용한 방법입니다. 1px 높이 영역에 배경 이미지로 선형 그레디언트를 다음과 같이 50% 영역을 중심으로 나눠 투명한 색과 구분되는 색을 채워 절반만 화면에 그려냅니다.
예제 DEMO: https://codepen.io/yamoo9/pen/ZEWJQgZ
1px 보다 얇은 선을 화면에 그려내는 이 방법의 장단점을 살펴보고 보완 방법 또한 살펴봅니다.
장점
화면에 그려진 결과는 실제 0.5px 크기이다. (비교 이미지)
단점
선을 그리기 위한 별도의 불필요한 마크업이 추가되어 의미적이지 못하다.
비교적 문법이 복잡해 사용이 쉽지 않다.
보완
표현(presentation) 임을 role 속성을 사용하여 명시한다.
의미를 가지지 않으므로 가상 요소(::before, ::after 등)를 사용하여 표현한다.
4. 박스 그림자(Box Shadow)
이 방법은 CSS 박스 그림자를 활용한 방법입니다. 그림자의 위치(x, y) 블러(blur), 확산(spread), 색상(color) 등 속성을 조정하여 1px 보다 얇은 선을 화면에 그려낼 수 있습니다.
예제 DEMO: https://codepen.io/yamoo9/pen/rNezema
1px 보다 얇은 선을 화면에 그려내는 이 방법의 장단점을 살펴보고 보완 방법 또한 살펴봅니다.
장점
사용법이 매우 간단하고 원리를 이해하기 쉽다.
화면에 그려진 결과는 실제 0.5px 크기이다. (비교 이미지)
단점
박스 크기 만큼 라인이 그려지므로 박스 크기와 다른 크기로 조정이 어렵다.
(박스 자체에 그림자를 적용한 경우)
5. 보더 이미지(Border Image)
이 방법은 디자이너가 그린 실제 가는 선 이미지를 활용하는 방법입니다. 다만, 정확하게 디자이너가 그린 가는 선을 화면에서 표시하려면 비트맵(예: Photoshop 등)이 아닌 벡터(예: Figma, Illustrator 등) 그래픽 도구에서 그린 후 SVG 그래픽 포맷으로 이미지를 저장해야 합니다.
벡터 그래픽 도구(Figma)에서 그린 0.5px 라인비트맵 그래픽 도구인 Photoshop에서 1px 보다 얇은 선을 그리려 할 경우, 실제 크기가 변경되는 것이 아니라 앞서 살펴봤던 색채 원근법을 사용하는 착시를 이용한 결과를 보여줍니다. 그러므로 Photoshop에서 그린 비트맵 이미지를 사용할 바에는 CSS 스케일(Scale) 또는 불투명도(Opacity)를 활용하는 것이 낫습니다.
비트맵 그래픽 도구(Photoshop)에서 그린 0.5px 라인예제 DEMO: https://codepen.io/yamoo9/pen/rNezeEW
1px 보다 얇은 선을 화면에 그려내는 이 방법의 장단점을 살펴보고 보완 방법 또한 살펴봅니다.
장점
화면에 그려진 결과는 실제 0.5px 크기이다. (비교 이미지)
단점
코드와 별개로 디자인 된 이미지가 필요하다. (이미지에 의존하는 방법)
보더 이미지 문법이 상대적으로 복잡해 별도로 학습이 필요하다.
선을 그리기 위한 별도의 불필요한 마크업이 추가되어 의미적이지 못하다.
보완
표현(presentation) 임을 role 속성을 사용하여 명시한다.
의미를 가지지 않으므로 가상 요소(::before, ::after 등)를 사용하여 표현한다.
글을 마무리하며.
화면의 픽셀 밀도에 따라 1px 보다 얇은 선을 그릴 수 없는 이유에 대해 알아보고, 1px 보다 얇은 선을 그리는 다양한 방법을 살펴봤습니다. 각 방법마다 다른 특징이 있고, 장점이 있는가 하면 단점 또한 있었습니다.
이번 글을 작성하며 각 방법을 정리한 결과, 이듬에서는 1px 보다 얇은 선을 그려야 할 경우 4번째 살펴본 박스 그림자를 사용한 방법을 추천합니다. 문법이 간단해 사용법을 이해하기 쉬울 뿐 아니라 별도의 이미지에 의존하지 않고, 불 필요한 마크업을 추가하지 않아도 원하는 결과를 낼 수 있기 때문입니다.
이번 글은 총 3부로 구성될 예정으로 이어지는 다음 편은 1px 보다 얇은 선으로 박스를 그리는 다양한 방법을 비교해볼 것입니다. 다음 글도 많은 기대 부탁드립니다. 읽어주셔서 감사합니다.
