웹 자간, 행간, 컬러

웹 자간과 퍼블리싱 자간, 그리고 행간·줄 길이·명도 대비까지

UX/UI 디자인에서 타이포그래피는 전체 사용자 경험을 좌우하는 핵심 요소다. 특히 자간(letter-spacing), 행간(line-height), 문장 길이와 줄 바꿈 규칙, 웹 접근성에 맞춘 컬러 대비는 디자인 완성도뿐 아니라 가독성·접근성·브랜드 분위기를 결정짓는다. 아래에서는 웹과 그래픽 도구 사이에서 혼동하기 쉬운 자간 표기 기준부터, 퍼블리셔 관점에서의 행간 계산, 실제 UI에서 적용되는 텍스트 길이의 기준까지 실무적으로 정리했다.

 

1. 웹 자간과 퍼블리싱 자간의 이해

자간이란 글자와 글자 사이의 간격을 말한다.

자간은 특정 공간 안에 많은 글자를 넣어야 하거나 글자와 글자 사이 간격을 좁혀 긴장감을 높일 때 등에 사용된다.​

정해진 수치는 없으며 같은 글꼴 같은 행간 두께이지만 배경색과 타이포 컬러에 의해 자간의 간격이 달라 보이기도 한다.

자간은 상황마다 각기 다르게 들어가야 해서 정형화가 매우 어렵다. 때문에 정형화된 수치가 아니라 시각적 요소로 결정하는 게 좋다.

​

자간이 꼭 필수는 아니며 디자이너의 센스가 중요하므로 숙련도가 낮다면 크기, 두께, 행간을 조절하는 것으로 충분하다.

자간을 줬다면 동료 또는 퍼블리셔에게 전달해야 하는데, 그래픽 툴마다 다른 자간 수치 기준으로 소통의 문제가 발생할 수 있으니 특성에 대한 이해가 필요하다.

​ > Ps와 XD에서는 1/1000em으로 계산되고 Figma와 Sktech에서는 1/100em으로 계산된다.

​

위에 따라 계산해 보면 Ps와 XD에서는 1em=0.001em이고 Figma와 Sktech에서는 1em=100%가 된다.

​

여기서 em 이란, 현재 폰트 크기를 기준으로 상대적인 값으로 출력되게 하는 단위이다. 상대적인 값이므로 같은 em 이어도 폰트 크기가 다르다면 em 크기도 달라진다.

​

자간을 퍼블리싱 코드로 표기할 땐 letter-spacing이라고 표기한다.

ex) 애플 사이트 본문 자간 값: -0.022em = -22em으로 계산

​

2. 웹 행간과 퍼블리싱 행간의 이해

행간이란 글, 줄 또는 행 사이의 간격을 의미한다.

가독성에서 제일 중요한 것은 크기이고, 적절한 행간은 가독성에 영향을 주지 않는다.

행간은 미적 요소에 많은 영향을 주기 때문에 가독성을 해치지 않는 조건에서 미적 요소를 고려해서 행간을 주는 것을 추천한다.

 

초보자는 더블 스페이스 방법으로 작업하다가 숙련도가 오르면 취향대로 작업하는 것을 추천한다.

 

더블 스페이스 방법 

만약 16px로 작업했다면 그대로 한 번 더 아래에 배치한 만큼 행간을 준다.

글자가 들쑥날쑥해서 기준을 잡기 어렵다면 '믐'이라는 글자를 작성해서 '믐' 글자의 면을 기준으로 배치한다.

​

*제목은 더블 스페이스를 주면 미적으로 아름답지 않기 때문에 제외한다.

​

3.퍼블리셔의 눈으로 본 행간

행간은 Line=height으로 표기한다.

행간 값을 px로 주면 글자가 잘 보이지 않아 폰트 크기를 강제로 키웠을 때 글자가 겹쳐 보이는 문제가 발생한다.

→행간 값이 고정되어 있기 때문에 발생하는 문제이다

​

이 문제를 해결하기 위해서는 행간 값을 px이 아니라 배수로 주어야 한다.

​

배수 값을 어떻게 주느냐?

→행간 값÷폰트 크기= 배수

​

ex) 26px÷16px= 1.625배

​

역산으로 행간 값을 알아내고자 한다면 폰트 크기 ×배수= 행간 값

​

4. 디바이스에 맞는 글자 길이와 줄바꿈

글자 길이는 우리가 볼 수 있는 시야각 안에서 이루어지는 것이 가장 좋다.

하지만 대형 디스플레이가 보편화된 현 상황에서는 시야각을 벗어날 정도의 글 길이가 종종 있다.

​

이상적인 글자 길이는 16px 기준 공백 포함해서 40~60자 정도가 이상적인 길이이다. 가로폭으로 보면 600~700px 정도의 폭이 나온다.

 

-가독성이 중요하다면 레이어 자체를 글의 길이에 맞춰 제작하는 것도 좋은 방법 중의 하나이다.

​

-줄 바꿈은 글을 쓰다 자리가 없으면 행바꿈이 일어나는 것이다.

​

-한글은 단어별로 떨어지지 않고 글자 길이별로 떨어지는데, 글자 길이별로 떨어지면 판독성에 안 좋은 영향을 준다.

​

-길이별로 떨어지는 것이 판독성에 너무 큰 영향을 준다면 CSS 커드로 단어별로 떨어지게 할 수 있다.

​

-CSS 코드 중에 Word-break:Keep-all이라는 코드로 이 코드를 기술하면 단어별로 떨어지게 된다.

​

코드 사용에 주의할 점은 컴퓨터가 단어라고 이해하는 것은 하나의 문장에서 좌항과 우항에 스페이스 공간이 있는 것을 단어라고 이해하는데, 긴 단어가 통으로 떨어져 이가 빠진 것처럼 보일 수 있기 때문에 길이별로 떨어지게 할 것인지 단어별로 떨어지게 할 것인지 미리 정해서 디자인에 임하는 것이 좋다.

​

5. 웹 접근성에 맞는 폰트 컬러

디자인 요소가 아닌 가독성을 기준으로 컬러를 본다.

​

국내 인구의 6.3%가 색각이상을 가지고 있다.

​

녹색 약> 녹색맹>적 색맹> 적색 약 순으로 많다.

​

색각이상자를 고려해서 디자인하는 게 중요한데, 색각 이상자의 입장에서 화면을 보려면 화면을 캡처해 포토샵에서 열고, 보기→저 해상도 인쇄 설정→색맹 유형 세팅을 해주면 된다.

​

웹 접근성은 3단계로 나뉜다.

가장 기본적인 A, 향상된 접근성의 AA, 극대화된 접근성의 AAA가 있다.

​

AA 수준에 맞춰 디자인하는 게 보편적이고 이를 위해 배경색과 폰트 크기를 명도대비 가이드에 지켜 지정한다.

​

명도 대비는 21단계가 있는데, AA 기준에 맞기 위해서는 최소 4.5:1에 충족되어야 한다.

(검흰 Max 21:1, Min 1:1)

​

아래 명도대비 측정 사이트를 참고하면 편리하다.

 

https://webaim.org/resources/contrastchecker/

WebAIM: Contrast Checker

 

반드시 컬러 피커에서 임의로 정할 것이 아니라 명도 대비 측정 사이트로 검증해야 한다.

다만, 매번 비교하기 어려우므로 프로젝트별 컬러 팔레트 가이드를 만들어두면 효율적이다.