heading과 headline 뭐가 다른건데?
heading vs headline 어떻게 표기해야 맞을까?
들어가며
디자인시스템 중 Typography를 정립하는데 있어서 이번에는 명칭과 관련하여 고민이 생겼다.
조사를 해보니 각 디자인시스템에서 사용하고 있는 header 부분의 명칭이 달랐기 때문이다.
header / headline / heading 이 세가지가 혼용되어 사용되고 있었는데 우리 디자인 시스템은 어떤 명칭을 사용해야 명확하게 의미를 전달할 수 있을지 자세히 알아보기로 했다.
구글 머터리얼 디자인구글에서는 headline 명칭을 사용하고 있었고
mui typography우리가 시스템 명칭 기준으로 삼고자 했던 MUI에서는 heading을 사용하고 있었다.
w3school
Gmarket 디자인시스템html의 정석이라 할 수 있는 w3schools, G마켓 디자인시스템 에서도 heading 명칭을 사용하고 있었다.
구글을 제외하고는 heading 명칭 사용을 많이 하고 있었는데, 더 자세히 headline과 heading의 차이점을 알아보았다.
일단 네이티브 조차도 차이에 대해 궁금해 하고 있는 사람들이 많다는 것을 알았고(ㅎ.ㅎ)
답변은 이러했다.
header는 페이지의 제목, 예를 들어 '마이페이지' 라는 페이지가 있을 때 최상단에 놓이는 마이페이지 라는 페이지 제목을 말한다.(푸터와 반대되는 개념)
heading은 그 아래에 텍스트, 섹션의 시작을 나타낼 때 사용한다.
headline은 보통 신문 또는 다른 출판물등에서 전체 아티클 내용을 요약할 때 사용하고 heading은 아티클의 섹션을 말한다 라고 이야기하고 있다.
https://ell.stackexchange.com/questions/196585/headline-vs-heading-vs-header
그래서 우리는 어떻게 했냐면..
우리는 먼저 디자인시스템을 만들때 명칭을 MUI의 디자인 시스템 기준으로 하기로 하였고,
구글을 제외하고 다른 곳에서도 heading 명칭을 사용하고 있어 heading을 사용하기로 하였다.
또한 위에 찾은 자료처럼 headline은 전체 내용을 축약해 놓은 느낌, 정말 신문 아티클의 제목 (예를 들어 'Covid-19 확진자 2만명 넘어..' )같은 느낌이 들어 적합하지 않다고 생각하였다.
그래서 우리의 디자인시스템 타이포그라피의 h 태그는 heading으로 명칭을 정하였다.
그리고 너무 많은 바리에이션을 하다보면 디자인의 통일성과 이를 사용하는 디자이너도 힘이 들 것 같아 타이포 크기 배리에이션도 heading 6개, subtitle 2개, body 2개, button 1개, caption 1개, overline 1개로 typo 선택지를 대폭 줄였다.
