타이포그래피 위계가 포트폴리오 가독성을 결정한다?

안녕하세요 구독자님, 디자이너를 돕는 디자이너 우디입니다.

이번 뉴스레터에서는 포트폴리오의 가독성을 결정짓는 타이포그래피 위계에 대해 살펴봅니다.

타이포그래피 위계란 제목, 본문, 캡션 등 다양한 텍스트 요소들이 전달하는 정보의 우선순위를 말합니다. 이를 통해 보는 이는 핵심 내용을 빠르게 파악하고, 메시지를 효율적으로 받아들일 수 있습니다. 적절한 텍스트 크기와 간격은 정보의 질서를 형성하며, 포트폴리오 완성도를 결정짓는 중요한 요소입니다.

산세리프체와 그리드 시스템, 그리고 포트폴리오?

산세리프체와 그리드 시스템을 활용한 체계적인 레이아웃은 포트폴리오에 적용하면 중요 정보와 세부 사항을 쉽게 구분할 수 있습니다. 얀 치홀트가 남긴 위대한 신타이포그래피의 유산은 여전히 현재 진행중입니다.

타이포그래피는 유리잔과 같아야 합니다.

타이포그래피가 단순한 글자 배열을 넘어서 메시지를 담아내고 표현하는 그릇의 역할을 하기 때문입니다. 마치 투명하고 깔끔한 유리잔이 음료의 색과 질감을 돋보이게 하듯, 잘 설계된 타이포그래피는 내용의 본질을 명확하게 전달합니다. 불필요한 장식을 배제해 메시지를 선명하게 전달해야 하는 포트폴리오에서는 더욱 그렇겠죠?

많이 하는 실수들

포트폴리오에서 가장 많이 보이는 타이포그래피 실수는 세로 간격 조절입니다. 대체로 위계가 다른 내용들의 세로 간격이 너무 붙어서 발생하는 문제입니다.

그림 2-1 왼쪽은 위계가 다른 내용의 세로 간격이 너무 좁습니다. 그리고 녹색 면이 위계를 하나 더 추가해 불필요한 복잡성을 만듭니다. 시각적 차이를 많이 만드는 것은 좋은 방법이 아닙니다.

그림 2-2 왼쪽은 제목과 본문의 세로 간격이 너무 좁게 배치된 사례를 보여줍니다. 포트폴리오에서 자주 볼 수 있는 실수입니다. 우측 예시처럼 제목과 본문, 그리고 본문의 행간에 간격을 충분히 두면, 가독성과 시각적 안정감이 향상됩니다.

그림 2-3의 왼쪽은 우측 정렬, 라인, 대문자, 제목 등이 과도하게 결합되어 복잡함을 유발하는 사례입니다. 이런 경우에는 우측 예시처럼 각 요소 사이에 충분한 간격을 두어 시각적 부담을 줄이는 것이 좋습니다. 특별한 이유가 없다면 우측 정렬은 피하는 편이 바람직합니다.

그림 2-4의 왼쪽은 헤더와 본문의 위계가 확실히 느껴지지 않습니다. 세로 간격이 거의 비슷하기 때문입니다. 우측처럼 헤더의 행간을 줄이고 본문과 확실히 떼주는 것만으로 위계가 강하게 느껴집니다.

그림 2-5의 왼쪽은 버블과 글자 간격이 너무 좁습니다. 텍스트가 박스에 들어가 있는 경우는 우측처럼 마진을 충분히 넓히는 것이 좋습니다.

그림 2-6은 1920×1080 화면을 기준으로 추천하는 다섯 가지 타이포그래피 위계를 보여줍니다. 이렇게 명확한 기준을 마련해두면 정말 필요한 경우에만 중간 크기를 추가해 디자인의 복잡함을 통제할 수 있습니다. 정보량이 많지 않은 화면에서는 이 다섯 가지 위계만으로도 일관되고 효율적인 레이아웃을 쉽게 구현할 수 있습니다.

나가며

타이포그래피 위계 문제는 포트폴리오의 첫인상과 가독성을 결정짓는 핵심 요소입니다. 아직 시각적인 디테일에 익숙하지 않다면, 애매한 느낌을 피하기 위해 각 요소 간의 간격을 크게 넓히는 것만으로도 도움이 될 거예요. 글자의 크기, 명도, 간격 등 모든 부분에서 발생하는 미세한 애매함이 디자인 전반에 영향을 미치기 때문에, 이를 꼼꼼히 관리하는 것이 중요합니다.

오늘 내용이 여러분의 디자인에 작은 영감을 주었기를 바라며, 앞으로도 멋진 포트폴리오 만드시길 응원합니다.

감사합니다, 우디였습니다!