이 게시글은 공부하면서 정리한 내용입니다.
잘못된 정보는 제보해주시면 매우 감사드리겠습니다.
***
디자인 구축 작업에서 빼놓을 수 없는 과정,
디자인 시스템.
디자인 시스템에서 폰트는 어떻게 정리되어야 할까?
폰트 스타일 가이드에 대해 알아보자.
디자인에 있어 폰트는 아주 중요한 요소 중 하나이다.
폰트를 어떻게 쓰느냐에 따라 전달하려는 내용을 보다 효과적으로 보여줄 수 있기 때문이다.
특히 연속성을 띠는 시각 매체에는 폰트 스타일이 통일되어 있어야 매체의 가독성 또한 올라간다.
(대표적인 예로는 책, 웹사이트, 앱 등이 있다.)
위 예시와 같이 하나의 연속된 컨텐츠에서 각기 다른 폰트 스타일을 사용한다면
사용자가 인식하는 과정에서 걸림돌이 됨은 물론, 하나의 컨텐츠로 보이지도 않게 된다.
본문 폰트 규격이 제각각인 디자인의 경우도 이와 비슷하다.
정돈된 느낌보다는 읽기 어렵고 조잡하게 느껴진다.
따라서 정돈된 형태의 폰트 스타일은 꼭 필요하다.
디자이너와 개발자의 협업에 브릿지가 되는 스타일 가이드에서 다루어져야하는 중요한 요소이다.
폰트 스타일 가이드의 개념
폰트 스타일 가이드란,
반복되는 텍스트 요소들을 규격화 해놓은 문서라고 이해하면 된다.
제목, 본문, 캡션 등은 페이지마다 반복되는 공통 요소로 규격화 하는 것이 좋다.
규격화 시 본문의 폰트 사이즈는 가급적 모두 통일하고, 섹션 제목과 부제목도 마찬가지로 통일한다.
예를 들어
디자인 상에서 font-size: 15px, line-height: 20px, font-weight: 500의 폰트 스타일을
font-normal이라고 정의했다면, 개발 상에서는 다음과 같이 클래스로 정의한다.
.font-normal {font-size:15px; line-height:20px; font-weight:500;}
해당 요소를 다시 구현하게 되면, 위에 정의해놓은 클래스명을 사용하여 손쉽게 처리할 수 있다.
이렇게 디자인 단에서 정의된 폰트 스타일은 개발 단에도 영향을 미치며 프로젝트의 생산성이 높아진다.
폰트 스타일 가이드, 꼭 작성해야 할까?
매번 스타일이 달라지는 디자인이 있다고 가정해보자.
얼핏 비슷한 요소로 보여 공통 처리의 대상인가 싶었지만,
어딘가 모르게 매번 1~2px 이상의 차이가 나는 기묘한 디자인 산출물을 내가 받았다면?
이런 경우 개발자가 선택할 수 있는 선택지는 다음과 같다.
디자인 대로 무조건 개발하거나, 임의로 규격을 약간 변경하여 공통 요소로 처리하는 것이다.
후자의 경우는 디자인 디테일이 떨어질 것이다.
그렇다고 규격화를 요구하면 디자이너가 전반적인 작업을 다시 해야 할 가능성이 높아진다.
이러한 루트로 유지보수 과정을 반복하게 되면 무수히 많은 폰트 스타일을
무수히 많은 텍스트 관련 css 코드로 구현하는 난해한 운영을 하게 될 수 있다.
하지만 폰트 스타일을 정의하여 가이드로 작성하고 이를 지킨다면,
디자인-개발의 모든 과정에서 발생되는 주먹구구식 일처리를 미연에 방지할 수 있다.
폰트 스타일 가이드의 용도는?
효과적인 협업을 위해
디자인팀 뿐 아니라, 유관 부서와 UI 관련 커뮤니케이션이 선명해진다.
디자인 시스템이 고도화되면, 개발팀에서 부르는 클래스명과 디자인팀에서 부르는 스타일명을 동기화 시킬 수 있다.
명칭을 통일하여 같은 것을 떠올릴 수 있는 것이다. 이는 커뮤니케이션에 매우 큰 도움이 된다.
유지보수성
불필요한 스타일은 디자인팀과 개발팀 모두에 공통적으로 관리할 수 없는 요소가 됨을 인식해야한다.
따라서 추후 공통 스타일을 바꿀 때 디자인 전부를 확인하고 개별 수정해야 하는 상황에 이를 수 있다.
스타일 가이드를 만들고 이를 지켰다면, 디자인 전부를 손쉽게 일괄 수정할 수 있다.
(물론 최신 UI 디자인 툴을 이용했다면 말이다..)
디자인팀의 효과적인 생산성/유지보수성을 위해
섹션 제목, 페이지 제목 등의 공통 요소는 늘 반복되기 마련이고 가급적 통일성 있게 디자인해야 한다.
신규 페이지 등을 구성할 때 기존 스타일이 상당 부분 재사용되므로 생산성에 큰 도움이 된다.
또한 일괄 수정이 가능하므로 페이지가 많을수록 효용성이 높다.
개발팀의 효과적인 생산성/유지보수성을 위해
가이드에 정의된 요소들을 미리 css 클래스로 처리해둔다. (이때 스타일명과 클래스명 동기화 필요)
figma의 경우 인스펙트 창에서 해당하는 요소를 클릭하여 스타일명을 확인할 수 있다.
확인 후 해당하는 클래스를 입력하면 스타일 적용이 끝난다.
만약 스타일이 정의되지 않아 스타일명이 없을 경우 개별 처리 요소로 인식하여 개발하면 된다.
웹의 경우 반응형 처리까지 고려해야하므로 개발 시 두 버전 이상의 규격을 확인해야 하는 번거로움이 있다.
이러한 번거로움에서 자유로워지므로 개발 경험이 향상되고 생산성이 올라간다.
마찬가지로 가이드대로 처리해두었으므로 향후 해당 요소를 일괄 변경할 시 적용이 손쉽다.
이렇게 네이밍 식별 후, 공통 처리 대상 요소라면 클래스명만 입력하면 된다
font-size, font-weight, line-height 등의 처리가 한번에 가능하며
가이드 설계를 어떻게 하느냐에 따라 반응형 처리까지 한번에 가능하다.
또한, '폰트 스타일 가이드에 미정의된 요소는 예외 처리한 것으로 보고 개별적으로 개발 처리한다.' 라는 협의를 서로한다면 구현하기 더욱 수월해진다. 매번 공통 처리 대상인지 고민하고 구현해야 하는 난해함이 줄어드는 것이다.
이런 과정을 몇 번 거치면 디자이너와 개발자 모두가 디자인 시스템의 필요성을 느낄 수 있을 것이다.
폰트 스타일 가이드 어떻게 만들지?
폰트 스타일은 서비스마다 다르게 정의될 수 있다.
예시로 반응형을 고려해서 스타일 가이드 하나를 만들어보았다.
스타일명을 크게 제목(title), 본문(text), 참조(caption)으로 나누어 각 용도별로 정의했다.
반응형 처리를 고려하여 하나의 스타일명에 PC와 Mobile 폰트 크기를 다르게 정의하여
개발 처리과정에서 클래스로 반영되도록 한다.
이렇게 설정하면, 하나의 클래스만으로 PC와 Mobile에 최적화된 폰트 크기를 제공할 수 있다.
굳이 PC와 Mobile 디자인 산출물을 각각 번갈아 보며 폰트의 값을 확인하지 않아도 된다.
지금까지 디자인 시스템에서 폰트가 얼마나 중요한지 설명했지만,
예외적으로 디자이너가 가이드 상의 폰트 스타일을 사용하지 않는 경우도 있을 것이다.
그런 경우 개발 단에서는 클래스명이 없다면, 공통 요소가 아님을 인식하고 개별 처리 하면 된다.
'디자이너가 알아야 할 것들 > Design System' 카테고리의 다른 글
| 웹 디자인 시스템 - 버튼 그룹 & 플로팅 액션 버튼 (FAB) (0) | 2023.04.10 |
|---|---|
| 웹 디자인 시스템 - 버튼 컴포넌트 상태 (State) (0) | 2023.03.31 |
| 웹 디자인 시스템 - 버튼 컴포넌트 스타일 (0) | 2023.03.26 |
| 웹 디자인 시스템 - 버튼 컴포넌트 (0) | 2023.03.03 |
