TextVariants.til

클래스 101의 디자인 시스템
글을 읽고 현재 진행하는 프로젝트에 이런 시스템적인 획일화를 도입하면
동료분들이 편하게 쓰실 수 있을 것 같아서 한번 만들어보고 싶었다.

프로젝트의 Typography 시스템.
구현한 코드는

import { css } from "styled-components";

const textVariants = {
  H1: css`
    font-size: ${({ theme }) => theme.fontSize.h1};
    font-weight: ${({ theme }) => theme.fontWeight.bold};
  `,

  H2_Bold: css`
    font-size: ${({ theme }) => theme.fontSize.h2};
    font-weight: ${({ theme }) => theme.fontWeight.bold};
  `,

  H2_SemiBold: css`
    font-size: ${({ theme }) => theme.fontSize.h2};
    font-weight: ${({ theme }) => theme.fontWeight.semi_bold};
  `,

  Body1_Bold: css`
    font-size: ${({ theme }) => theme.fontSize.body1};
    font-weight: ${({ theme }) => theme.fontWeight.bold};
  `,

  Body1_SemiBold: css`
    font-size: ${({ theme }) => theme.fontSize.body1};
    font-weight: ${({ theme }) => theme.fontWeight.semi_bold};
  `,

  Body2_Bold: css`
    font-size: ${({ theme }) => theme.fontSize.body2};
    font-weight: ${({ theme }) => theme.fontWeight.bold};
  `,

  Body2_SemiBold: css`
    font-size: ${({ theme }) => theme.fontSize.body2};
    font-weight: ${({ theme }) => theme.fontWeight.semi_bold};
  `,

  Body3_SemiBold: css`
    font-size: ${({ theme }) => theme.fontSize.body3};
    font-weight: ${({ theme }) => theme.fontWeight.semi_bold};
  `,

  Body3_Medium: css`
    font-size: ${({ theme }) => theme.fontSize.body3};
    font-weight: ${({ theme }) => theme.fontWeight.medium};
  `,

  Body3_Regular: css`
    font-size: ${({ theme }) => theme.fontSize.body3};
    font-weight: ${({ theme }) => theme.fontWeight.regular};
  `,

  Caption: css`
    font-size: ${({ theme }) => theme.fontSize.caption};
    font-weight: ${({ theme }) => theme.fontWeight.bold};
  `,
};

export default textVariants;

theme provider 에 정의된 font-size와 font-weight 를
styled-components 의 css 키워드를 이용해 구현했다.

객체로 관리되고 있기 때문에 사용하고자 하는 styled-Components에서

	const StyledDiv = styled.div`
		${textVariants.H1}
		width : 300px;
	`

이런 형식으로 사용할 수 있다.

장점과 단점이 명확하다.
일단 장점으로는 프로젝트에 통일성 있는 디자인을 적용해
사용자에게 시각적인 안정감을 줄 수 있다는 점.
개발적인 측면에서는 코드의 재사용이 편리하므로 중복된 코드를 줄일 수 있고
유지보수가 용이하다는 점이 있겠다.
단점으로는 텍스트 스타일이 많아질수록 코드가 복잡해질 수 있고 그에따른 관리가 어렵다는 점.
그리고 이런 디자인 시스템 자체의 단점이라고 볼 수 있는데 커스티마이징이 힘들다는 점이다.

디자인 시스템이 개발적 관점에서 통일성과 생산성 향상에 목적이 있기 때문에,
자유도가 조금 떨어질 수 있겠지만 컴포넌트에 일일히 font-size, font-weight를
지정해주는 것 보다 훨씬 간결하게 스타일링을 할 수 있다.
이러한 시스템을 조금 더 다듬어서 프로젝트 전반적인 디자인 시스템을 구현해보고자 한다.
같이하는 팀원분들께 도움이 됐으면 좋겠다.