Text Design

자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다.

⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️

---

TEXT DESIGN

Differntiation Text: HTML Headers

어떤 사용자도 웹 사이트의 모든 문장을 읽지않기 때문에, 사용자가 읽고 싶은 내용과 건너뛸 수 있는 내용을 쉽게 구분할 수 있도록 하는 것이 디자이너의 역할이다.

제목과 자막과 같은 중요한 텍스트 조각을 구별하는 것은 이를 달성하는 효과적인 방법이다.

 

heading, subheading, list(ordered or unordered)와 대비를 만들어 사용자를 사이트 전체로 안내할 수 있다.

 

텍스트를 범주로 구분하기 위해 다음과 같은 HTML 요소를 사용하는 것이 좋다.

• <h1>:  title에 사용
  페이지당 하나의 header만 있어야 한다.
• <h2: heading에 사용
  사용자가 원하는 주요 섹션을 즉시 식별해야 한다.
• <h3>: subheading에 사용
  사용자가 페이지를 스캔할 때 주의할 문서와 같은 작은 초점에 사용한다..

이러한 태그는 사용자에게 매우 명확하고 친숙한 시각적 계층 구조(visual hierarchy)를 만들며, 문단 뒤에 단락을 쓰는 것도 방지한다.

HTML 태그를 사용하여 간결함을 알리고 가능할 때마다 항목을 list과 headings으로 나눈다.

 

headingd이 다음에 나오는 내용보다 도입하는 내용에 더 가까운지 확인한다.

두 설정 모두에서 동일한 거리에 있는 경우 명확한 시각적 구성을 제공하지 않는다.

Differentiating Text: Fonts

글꼴은 드물게 사용될 때 텍스트를 구별하는 데 유용한 역할을 한다.

페이지 title에는 다른 글꼴을, 특정 subheader에는 세 번째 글꼴을 갖는 것이 효과적이다.

그러나 새 글꼴로 각 paragraph을 구분하거나 header 수준마다 다른 글꼴을 사용하면 페이지가 빠르게 뒤죽박죽이고 읽기 어려워진다.

 

대부분의 텍스트를 serif 글꼴로 표시한 다음 san-serif 글꼴의 heading 또는 subheading과 대비되는 것이 잘 작동하지만, 페이지 유형을 지정하는 방법에 따라 다를 수 있다.

 

글꼴 및 header 외에도 다음과 같은 여러 가지 방법으로 대조하는 방법

• style
• size
• weight
• color

한 페이지에서 세 개 이상의 다른 글꼴을 사용하기 보다는, 다른 소스를 사용하여 대비를 이루는 것이 좋다.

Whitespace

페이지의 공백은 텍스트 자체만큼이나 사이트의 텍스트 디자인에 중요하다.

적절한 간격과 균형이 없으면 텍스트를 사실상 읽을 수 없게 만들 수 있다.

 

공백이 적절하면 텍스트 가독성을 높일 수 있고, 사용자가 요소를 건너뛰는 것을 방지할 수 있으며, 실제로 그곳에 있지 않고 페이지의 다른 섹션 간에 방해받지 않는 경계 역할을 한다.

Text Readability

텍스트의 가독성을 높이는 방법

• 텍스트가 충분히 큰지 확인(16px 이상).
• foreground와 background 사이에 강한 대비
• 선과 문자 사이에 충분한 공간

텍스트 내에서 공백 조절 방법

Line Spacing

줄 간격(선간격, 줄 간격)은 텍스트의 두 줄 사이의 거리를 나타낸다.

줄 간격을 조정하면 사이트 가독성에 큰 영향을 미친다.

p {
  line-height: 26px;
}

Tracking

tracking(자간)은 문자와 단어 사이의 공간이다.

tracking이 너무 적으면 단어가 비좁아 보이기 때문에 tracking을 약간 늘리면 텍스트를 읽기 쉽게 만들 수 있다.

p {
  letter-spacing: 1px;
}

Kerning

커닝은 본문에서 두 글자 사이의 공간이다. 

원하는 디자인을 달성하기 위해 title 또는 header의 kening을 조정할 때 가장 중요하다.

Text Navigability

사용자는 텍스트를 탐색하는 방법을 즉시 알 수 있어야 하고, 사용자가 클릭할 수 있는 내용과 클릭할 위치가 명확해야 한다.

• 클릭할 수 있는 항목을 표시하는 관례(일반적으로 링크는 파란색이고 밑줄 쳐야 함)를 고수한다.
  몇 년 전에 비해 지금은 링크 밑줄이 그어진 것이 흔하지 않은 선택 사항이지만 색맹 사용자에게 친절한 안내이다.
• 사용자가 어떤 경우에도 텍스트를 클릭하려고 할 수 있으므로 텍스트의 일반적인 액센트 색상으로 파란색을 사용하지 말것.
• 탐색 버튼에 텍스트를 표시하는 것이 중요하다. 각 버튼이 수행하는 작업에 대한 모든 불확실성을 제거한다.

이러한 간단한 규칙을 고수하면 사용자는 페이지를 쉽게 탐색할 수 있으며, 사용자가 사이트의 실제 콘텐츠를 경험하는 데 집중할 수 있다.

 

또한, 사용자의 눈이 텍스트를 가로질러 이동하는 방법에 대해 생각하는 것이 중요합니다.

페이지 탐색 방식에 영향을 미친다.

텍스트를 열로 구성하면 사용자의 눈이 전체 화면을 가로질러 이동하지 않고 열의 끝으로 이동한 다음 아래로 이동하게 된다.

마찬가지로, 줄 길이가 긴 경우 사용자의 눈은 왼쪽에서 오른쪽으로 이동하는 데 더 많은 시간을 소비한다.

Text Length, Columns, and Line Length

사용자는 특히 큰 텍스트 블록이 있는 경우 웹 페이지를 거의 읽지 않는다.

 

따라서 사용자가 텍스트를 쉽게 읽을 수 있도록 해야힌다.

가능하면 문장과 단락은 피하고 대신 목록을 사용하는 것이 좋다.

Line Length

글의 줄 길이는 가독성에 큰 영향을 미치며, 상황에 따라 줄의 길이가 달라져야 한다.

한 줄에 약 50-75자를 포함하는 열을 갖는 것이 가장 좋다.

뉴스 사이트와 같은 곳은 열로 분할하는 것이 좋고, 줄이 길이를 줄은 다음 짧은 텍스트를 적절하게 정렬하게 사이트의 디자인을 손상시키지 않는 방법도 있다.

What Content will the Users Notice and Remeber?

Primacy and Recency 

Primacy and Recentity 효과: 사람들은 목록/페이지 중간에 있는 어떤 것보다 목록의 첫 번째 및 마지막 요소나 페이지의 마지막 요소를 더 잘 인식하고 기억한다.

사이트의 텍스트를 구성할 때 이 신경학적 동작을 사용하여 사용자가 기억하기를 원하는 내용을 기억하도록 할 수 있다.

Image Pairing

사용자의 눈은 텍스트보다 이미지에 쉽게 끌린다.

필요할 때마다 중요한 텍스트를 이미지와 결합하여 이 기능을 활용할 수 있다.

 

텍스트 디자인 수업에서 이미지에 대해 듣는 것은 혼란스러울 수 있지만 페이지를 디자인할 때 텍스트에만 집중할 수는 없다.

이미지와 텍스트 사이의 균형을 만드는 것이 중요하다.

이미지가 페이지의 한 부분에 사용자의 시선을 끌 수 있기를 원하지만, 텍스트가 완전히 가려지는 것을 원하지 않습니다. 이는 궁극적으로 사용자가 소비하기를 원하는 것이다.

F-shaped Skimming

뉴요커와 같은 대표적인 롱 폼 잡지에도 매우 시각적인 랜딩 페이지가 있다.

모든 기사에는 관련 사진이나 스케치가 있으며, 한 문장 이상의 미리 보기가 있는 경우는 거의 없다.

사용자들은 그들이 원하는 컨텐츠를 클릭하는 것을 기쁘게 생각하며, 그들은 어수선한 홈페이지보다 이것을 더 선호할 것이다.

 

한 걸음 더 나아가서 Amazon.com 홈페이지를 보아라.

제목 중 일부가 주어와 동사를 모두 가지고 있음에도 불구하고 텍스트는 거의 없고 완전한 문장은 전혀 없다.

사람들이 당신의 사이트에서 어디로 가야 할지 알고 있을 때, 그들은 단지 그들이 원하는 것을 찾기 위해 대충 훑어보는 것이다.

이 스키머를 염두에 두고 텍스트를 작성하고 형식을 지정할 필요가 있다.

 

사용자는 화면 오른쪽 앞, 화면 아래쪽 앞 화면 왼쪽의 콘텐츠를 스캔한다.

우리가 대사를 다 읽을 때마다 스크린의 왼쪽으로 눈이 다시 뛴다.

이것은 사용자의 눈이 따라가는 F 패턴을 만들고, 따라서 f-shaped skimming이라고 알려져 있다.

 

사이드 노트: 이 방법은 왼쪽에서 오른쪽으로 읽히는 언어의 경우에만 해당된다.

만약 당신이 히브리어나 아랍어와 같이 오른쪽으로 읽히는 언어로 읽을 사이트를 디자인한다면 기존의 방법과 반대로 한다.

---

참고

• https://www.reliablepsd.com/ultimate-google-font-pairings/

The Ultimate Collection of Google Font Pairings (Displayed Beautifully with Classic Art)