정그린
1시간 전
“요즘 사람들은 글을 읽지 않아.”
긴 문장을 마주하면 곧바로 화면을 넘기고, 눈에 띄는 단어만 빠르게 훑어보는 모습을 두고 흔히 하는 말입니다.
하지만 사람들이 글을 읽지 않게 된 것은 아닙니다. 정보가 쉴 새 없이 쏟아지는 디지털 환경에서, 필요한 내용만 빠르게 골라 읽는 방식에 익숙해진 것입니다.
우리는 이제 읽기보다 훑어보기에 익숙한 시대를 살고 있습니다. 사용자가 많은 에너지를 들이지 않고도 필요한 정보를 발견하게 하려면, 화면 속 텍스트는 어떻게 설계해야 할까요?
잘 읽히는 화면은 요소 사이의 간격부터 일정합니다.
8pt 그리드 시스템은 마진과 패딩, 컴포넌트 크기처럼 화면을 구성하는 UI 요소를 8의 배수 단위로 정렬하는 원칙입니다.
8, 16, 24, 32처럼 일정한 기준을 사용하면 요소 사이에 수학적인 일관성이 생깁니다. 화면마다 제각각이던 간격이 하나의 규칙 안에서 정리되면서 안정적인 시각적 리듬도 만들어집니다.
섹션과 섹션 사이, 텍스트 블록 사이의 여백을 16px, 24px, 32px처럼 8의 배수로 설정합니다. 버튼 안쪽의 패딩이나 카드 컴포넌트의 마진도 같은 기준으로 정렬합니다.
8pt 그리드는 다양한 크기와 해상도의 화면에서도 레이아웃을 안정적으로 유지하는 데 도움이 됩니다. 각각의 간격을 감으로 정하기보다, 서비스 전체에 공통으로 적용되는 규칙을 만드는 것이 핵심입니다.
8pt 그리드가 화면 전체의 요소를 정리한다면, 베이스라인 그리드는 텍스트 사이의 리듬을 정리합니다.
줄공책의 가로줄을 떠올리면 이해하기 쉽습니다. 글자의 크기가 달라도 문장이 놓이는 바닥선을 일정한 간격으로 맞추면, 제목과 본문, 캡션이 한 화면에 섞여 있어도 전체적으로 가지런해 보입니다.
8pt 그리드는 컴포넌트와 레이아웃을 정리하는 기준입니다. 반면 베이스라인 그리드는 텍스트의 줄 간격과 수직 정렬을 맞추는 기준입니다. 두 그리드를 함께 사용하면 버튼이나 카드 같은 UI 요소뿐 아니라 그 안에 들어가는 문장까지 하나의 리듬 안에서 정리할 수 있습니다.
모든 텍스트에 동일한 줄 간격을 적용할 필요는 없습니다.
헤드라인과 본문, 캡션은 역할과 글자 크기가 다르기 때문에 각각 다른 줄 간격이 필요합니다. 다만 그 간격을 8pt와 같은 최소 단위의 배수로 맞추면 수직적인 정렬과 일관성을 유지할 수 있습니다.
예를 들어 본문 폰트가 16pt라면 줄 간격을 24pt나 32pt로 설정할 수 있습니다. 헤드라인과 본문의 줄 간격이 서로 달라도 같은 그리드의 배수 안에 있다면 화면 전체의 리듬은 유지됩니다.
행간은 글의 줄과 줄 사이에 생기는 공간을 말합니다.
행간이 너무 좁으면 사용자는 다음 줄을 찾는 데 피로를 느낍니다. 반대로 너무 넓으면 한 문단으로 이어져야 할 문장들이 서로 분리된 것처럼 보여 읽는 흐름이 끊깁니다.
본문 텍스트는 일반적으로 글꼴 크기의 1.5배, 즉 150% 정도의 행간을 기준으로 설정합니다.
본문이 16px라면 최소 24px 정도의 행간을 적용합니다.
다만 모든 텍스트에 150%를 기계적으로 적용해서는 안 됩니다. 작은 글자는 획이 뭉쳐 보이기 쉬우므로 조금 더 넉넉한 행간이 필요합니다. 12px 이하의 작은 글자는 약 1.6배 정도를 고려할 수 있습니다.
반면 크기가 큰 헤드라인은 같은 비율을 적용하면 줄과 줄이 지나치게 멀어 보일 수 있습니다. 헤드라인은 글자 크기의 약 1.2~1.3배처럼 본문보다 좁게 설정해 하나의 제목으로 묶여 보이게 해야 합니다.
중요한 것은 숫자 자체보다 텍스트의 역할에 맞는 호흡을 만드는 것입니다.
사용자는 화면에 있는 모든 정보를 같은 무게로 받아들이지 않습니다.
가장 중요한 제목을 먼저 보고, 관심이 생기면 부제목과 본문을 살펴본 뒤, 필요한 경우에만 캡션이나 부가 설명까지 읽습니다. 따라서 헤드라인, 부제목, 본문, 캡션의 차이가 분명하게 보여야 합니다. 폰트 크기와 굵기, 색상 대비를 조절해 정보의 위계를 시각적으로 표현해야 합니다.
여기서 폰트 스타일을 구분한다는 것은 여러 종류의 서체를 섞어 쓰라는 뜻이 아닙니다. 하나의 서체 안에서도 크기와 굵기, 색상 대비를 달리하면 충분한 정보 위계를 만들 수 있습니다.
헤드라인은 페이지 전체의 주제를 전달해야 하므로 가장 크고 강한 대비를 사용합니다. 책에서는 32px 이상의 크기와 Bold 굵기를 예시로 제시합니다.
본문은 사용자가 가장 오랫동안 읽는 영역입니다. 화려한 스타일보다 장문을 편안하게 읽을 수 있는 크기와 굵기가 중요합니다. 16px와 Regular 굵기를 기본적인 예로 볼 수 있습니다.
캡션과 라벨처럼 작은 텍스트는 크기가 작아 획이 뭉칠 수 있습니다. 12px 정도의 크기에서는 Regular보다 Medium 굵기를 사용하고, 행간도 충분히 확보하는 것이 좋습니다.
중요한 정보는 강하게, 오래 읽어야 하는 정보는 편안하게, 보조 정보는 작지만 선명하게 보여주는 식으로 역할을 구분해야 합니다.
여백은 모든 요소를 배치하고 난 뒤 우연히 남은 공간이 아닙니다. 어떤 정보끼리 연결되어 있고, 어디에서 새로운 내용이 시작되는지를 알려주는 기능적인 요소입니다.
제목과 본문 사이의 간격이 가까우면 사용자는 두 요소를 하나의 정보 덩어리로 인식합니다. 반대로 서로 다른 섹션 사이에 충분한 공간이 있으면, 앞의 내용이 끝나고 새로운 내용이 시작된다는 사실을 직관적으로 이해합니다. 즉, 여백은 정보의 연관성과 분리를 보여줍니다.
제목과 본문처럼 같은 성격의 정보는 8px나 16px처럼 비교적 좁은 간격으로 묶어줍니다.
서로 다른 주제나 섹션은 24~32px 정도의 넓은 간격을 사용해 분리합니다. 문단 사이의 마진과 컴포넌트 내부의 패딩 역시 그리드 시스템의 배수로 표준화하면 화면 전체에 일정한 규칙이 생깁니다.
여백이 지나치게 좁으면 모든 정보가 하나의 덩어리처럼 보입니다. 반대로 무조건 넓게 벌리면 서로 연관된 정보까지 단절되어 보입니다.
따라서 여백의 크기는 단순한 미적 취향이 아니라 정보 사이의 관계를 설명하는 장치가 되어야 합니다.
UI에서 서체를 선택할 때는 아름다움보다 판독성을 먼저 고려해야 합니다. 이때 살펴볼 수 있는 기준 중 하나가 X-height입니다. X-height는 영문 소문자 ‘x’의 높이를 기준으로 서체의 시각적인 크기를 판단하는 요소입니다.
같은 글자 크기로 설정해도 X-height에 따라 실제 화면에서 느껴지는 크기와 판독성이 달라질 수 있습니다.
X-height가 지나치게 낮으면 작은 화면에서 글자가 뭉쳐 보이기 쉽습니다. 반대로 너무 높으면 대문자와 소문자의 높이 차이가 줄어들면서 텍스트의 균형이 어색해질 수 있습니다.
화면의 크기와 서비스의 성격을 고려해 적절한 X-height를 가진 서체를 선택해야 합니다.
가장 안정적인 방법은 하나의 서체 패밀리 안에서 굵기나 이탤릭 등의 변화를 주는 것입니다. 같은 패밀리의 서체는 글자의 높이와 너비, 곡률이 일관되게 설계되어 있어 자간과 행간을 안정적으로 유지하기 쉽습니다.
브랜드의 개성이나 명확한 정보 구분을 위해 서로 다른 서체를 섞어야 한다면 분위기만 비교해서는 안 됩니다. X-height와 글자 너비, 둥글림의 정도처럼 물리적인 형태가 비슷한지 함께 확인해야 합니다.
각 서체가 따로 보면 아름다워도, 서로의 규격과 스타일이 크게 다르면 한 화면에서는 시각적 노이즈가 될 수 있습니다.
텍스트는 인터페이스 위에서 사용자의 시선이 머물고 이동하는 가장 기본적인 길입니다. 이 길의 리듬을 만드는 타이포그래피 작업은 단순히 보기 좋은 폰트를 고르는 미학적 작업을 넘어, 사용자가 정보를 받아들이는 호흡과 밀도를 조율하는 고도의 설계 과정이죠.
앞서 살펴본 8pt 그리드와 베이스라인, X-height와 같이 세밀한 디테일을 맞춰내는 집요함이 쌓일 때 서비스의 완성도는 압도적인 차이를 만들어냅니다. 여러분의 서비스는 사용자에게 어떤 읽기 경험을 제공하고 있나요?
위 컨텐츠는 『사용자 입장에서 생각하세요』에서 내용 발췌하여 작성하였습니다.
0
1 
댓글