19. 색·글자·간격과 읽기 편한 화면
예쁘게 보이는 것과 읽기 편한 것
페이지를 처음 만들면 배경색이나 장식부터 바꾸고 싶어집니다. 하지만 방문자가 먼저 해야 할 일은 글을 읽고 필요한 정보를 찾는 것입니다. 색과 글자, 간격은 그 일을 돕는 역할을 합니다. 화면이 마음에 들어도 소개글을 읽기 어렵다면 다시 조정할 이유가 있습니다.
같은 내용도 제목과 본문의 차이가 분명하면 훑어보기 쉽습니다. 제목은 무엇에 관한 부분인지 알려 주고, 본문은 자세한 내용을 설명합니다. 모든 글자를 크고 진하게 만들면 중요도의 차이가 사라집니다. 강조할 부분을 고르는 것이 강조를 많이 하는 것보다 중요합니다.
같은 재료를 다르게 놓은 화면 읽기
책을 읽고 짧은 감상을 남깁니다. 관심사: 독서 · 산책 · 기록
책을 읽고 짧은 감상을 남깁니다. 관심사: 독서 · 산책 · 기록
왼쪽에는 제목과 관심사, 본문, 링크가 비슷한 무게로 이어져 있습니다. 읽는 사람은 어떤 말이 제목이고 어디를 눌러야 하는지 더 자세히 봐야 할 수 있습니다. 오른쪽은 제목, 소개, 관심사, 링크의 관계를 나누어 보여 줍니다. 글의 사실이 달라진 것이 아니라 읽는 단서가 달라진 예입니다.
이 비교에서 오른쪽의 색이나 정확한 간격을 복사할 필요는 없습니다. 자신이 만든 화면에서도 제목을 찾을 수 있는지, 본문을 읽을 수 있는지, 링크가 행동할 곳으로 구분되는지 보면 됩니다. ‘멋진 디자인’이라는 넓은 목표를 구체적인 확인으로 바꾸는 연습입니다.
그림의 첫 화면을 고친다면 모든 내용을 새로 쓰기보다 제목을 구분하고 문단 사이 간격을 조정할 수 있습니다. 링크 문구를 명확하게 하고 본문과 다른 단서를 줄 수도 있습니다. 한 번에 모든 스타일을 바꾸지 않고, 어떤 변화가 읽기에 도움이 되었는지 비교해 볼 수 있습니다.
중요한 것은 시각적인 차이가 목적에 어떻게 기여하는지 설명할 수 있는가입니다. 제목이 잘 보여 페이지의 성격을 빨리 이해하고, 링크가 구분되어 다음 행동을 찾을 수 있습니다. 디자인을 전문 용어로 평가하지 않아도 이런 관찰은 첫 페이지를 다듬는 근거가 됩니다.
색을 고르는 간단한 출발점
처음에는 배경, 글자, 강조색의 역할을 나누어 생각합니다. 밝은 배경에 충분히 짙은 글자를 쓰고, 중요한 링크나 버튼에 한 가지 강조색을 쓰는 방식으로 시작할 수 있습니다. 정확한 색 번호를 몰라도 “글자가 배경과 더 분명하게 구분되게”라고 설명할 수 있습니다.
색만으로 의미를 전달하지 않는 것도 중요합니다. 입력 오류를 빨간 테두리만으로 표시하면 이유를 모르는 사람이 생깁니다. ‘주소를 입력해 주세요’처럼 글로도 알려 주면 무엇을 해야 할지 이해하기 쉽습니다. 색을 보기 어려운 사람에게도 도움이 됩니다.
간격은 정보를 묶습니다
서로 관련된 제목과 설명은 가까이 두고, 다른 주제 사이에는 조금 더 공간을 둡니다. 빈 공간은 아무 역할이 없는 부분이 아닙니다. 정보가 어디서 시작하고 끝나는지 보여 줍니다. 반대로 간격이 지나치게 넓으면 한 묶음의 내용도 떨어져 보일 수 있습니다.
소개글 아래 관심사가 이어진다면 두 영역 사이에 구분되는 간격을 둘 수 있습니다. 관심사 이름과 설명 사이는 너무 멀지 않게 합니다. 이런 관계를 AI에게 말로 설명하면 픽셀 단위를 몰라도 수정 방향을 전달할 수 있습니다.
글이 길어졌을 때도 생각하기
예시에는 짧은 별명이 들어 있어도 실제로는 긴 이름이 들어갈 수 있습니다. 글자 크기를 줄이기만 하면 읽기가 어려워집니다. 줄바꿈을 허용하거나 내용 영역의 폭을 조절하는 방법도 있습니다. 긴 문장은 내용을 다듬어 두 문장으로 나눌 수 있습니다.
‘깔끔하게’라는 요청을 구체화하려면 무엇이 읽기 어려운지 찾아봅니다. 글이 작은지, 줄이 너무 긴지, 문단이 붙어 있는지, 강조가 너무 많은지 중 하나를 고릅니다. 한 번에 한 가지를 바꿔 보고 이전과 비교하면 취향과 읽기 편함을 함께 판단할 수 있습니다.
글과 색이 읽기 어려울 때
제목의 크기에는 관계가 있습니다
큰 제목, 작은 제목, 본문은 서로 어떤 수준의 정보인지 보여 주는 관계를 만듭니다. 가장 큰 제목은 페이지 전체를, 중간 제목은 한 부분을, 본문은 자세한 내용을 설명할 수 있습니다. 글자 크기를 독립적으로 정하기보다 서로 구별되는지 보면 됩니다.
제목을 모두 크게 만들면 한 화면에 들어오는 정보가 줄고 어떤 부분이 더 중요한지 알기 어려울 수 있습니다. 반대로 크기가 전부 비슷하면 내용을 훑어보기 어렵습니다. 첫 페이지에서는 단계가 너무 많지 않도록 제목과 본문 정도부터 분명히 구분할 수 있습니다.
여백이 많은데 불편한 화면
여백이 넓다고 항상 읽기 편한 것은 아닙니다. 제목과 설명 사이가 너무 멀면 서로 연결된 내용인지 알아보기 어려울 수 있습니다. 반면 서로 다른 주제는 가까이 붙어 있으면 한 문단처럼 보입니다. 간격은 빈 공간의 양보다 정보의 관계를 보여 주는 데 쓰입니다.
관심사 이름과 설명은 가까이, 관심사 묶음과 연락 링크는 조금 떨어뜨리는 식으로 생각할 수 있습니다. AI에게 ‘모든 간격을 넓혀 줘’ 대신 ‘같은 항목 안은 가깝게, 다른 항목 사이는 구분되게’라고 설명하면 의도가 더 드러납니다. 정확한 단위를 몰라도 관계를 전달할 수 있습니다.
색을 줄여 보는 판단
배경, 제목, 본문, 버튼마다 다른 강한 색을 쓰면 어디를 봐야 할지 복잡해질 수 있습니다. 처음에는 읽는 글의 색을 일정하게 두고 중요한 행동에만 강조색을 사용할 수 있습니다. 하나의 강조색으로도 링크와 버튼을 찾기 쉽게 만들 수 있습니다.
색을 바꾼 뒤에는 글자가 배경과 잘 구분되는지 봅니다. 색의 이름이 마음에 드는 것과 충분히 읽히는 것은 다릅니다. 링크를 색만으로 구분하기 어렵다면 밑줄이나 문구처럼 다른 단서도 사용할 수 있습니다. 여러 사람의 보는 방식이 같지 않다는 점을 화면에 반영하는 것입니다.
긴 글을 줄일지 배치를 바꿀지
소개글이 화면을 넘는다면 글 자체가 너무 긴지, 내용 영역이 너무 좁은지 구분합니다. 중요한 정보를 삭제하기 전에 줄바꿈과 폭을 확인할 수 있습니다. 반대로 같은 이야기를 반복하는 문장이라면 배치보다 글을 다듬는 것이 도움이 됩니다.
두 문제를 동시에 고치면 어느 변화가 좋았는지 알기 어려울 수 있습니다. 먼저 문장을 읽어 중복을 줄이고, 그다음 화면에서 배치를 봅니다. 제목과 링크가 유지되는지도 확인합니다. 내용과 모양을 나누어 보는 기초가 실제 수정에서 이렇게 쓰입니다.
“전문 디자이너가 아니면 좋은 화면인지 알 수 없나요?”
전문적인 평가에는 더 많은 지식과 경험이 필요할 수 있지만, 자신의 페이지에서 글을 읽고 필요한 링크를 찾을 수 있는지는 직접 확인할 수 있습니다. 작은 화면에서 문장이 잘리는지, 버튼 이름이 이해되는지, 제목과 본문을 구분할 수 있는지도 볼 수 있습니다. 첫 단계의 판단을 모두 전문가에게 맡겨야 하는 것은 아닙니다.
취향이 갈리는 부분은 정답 하나를 찾으려고 오래 머물지 않아도 됩니다. 목적을 방해하지 않는 선택을 하고 기본 기능을 먼저 확인할 수 있습니다. 이후 실제 사용자의 의견이나 더 전문적인 검토를 받아 다듬을 수 있습니다. 첫 결과가 최종 디자인이어야 할 이유는 없습니다.
AI에게 디자인을 평가해 달라고 할 때도 기준을 주면 좋습니다. ‘예쁜가’보다 ‘처음 들어온 사람이 소개와 안내 링크를 찾기 쉬운가’를 물을 수 있습니다. 그 답변 역시 실제 화면과 사용자 반응으로 확인할 제안입니다. 평가 문장이 그럴듯하다는 이유만으로 실제 읽기를 대신하지 않습니다.
꼭 기억하세요
색·글자·간격은 정보를 읽고 구분하도록 돕는 수단입니다. 장식보다 내용이 먼저 보이는지 확인합니다.