문의드립니다.

안녕하세요!

혹시 타이포그래피 베리어블 스타일을 지정했을때 line height를 1.4로 계산해서 지정했는데, 작업하다보니 1.2로 더 줄여야 하는 상황이 생긴다면 디자인 시스템 자체를 바꿔서 1.2로 적용해야하나요? 아니면 해당 작업물만 로컬로 별도 타이포그래피 지정해서 해야할까요?

다른 속성값들보다 Line height는 프로젝트 스타일에 따라 스타일로 정해놨어도 값이 조정이 되어야 할때가 발생해서 이런 경우의수는 어떤식으로 대응하는게 좋을지 의견 여쭤보고싶습니다.

베리어블값이 weight나 line height 와 같은 값들을 primitive에 지정해놓고, semantic에서 다양하게 참조해서 쓸 수 있다고 생각해서 확장성이 있는것 같은데, 만약에 로컬 타이포그래피에 베리어블을 참조해놓았고 (heading 4xl는 line height 56이라면) 이 값으로 개발팀에 공유가 됐다면 이후에 line height베리어블 참조값을 50 이렇게 바꿀때 개발팀에 공유를 매번 별도로 해야하는거죠?

안녕하세요! Cloe 님 질문을 정리하자면, 크게 두가지로 보입니다.

디자인 값 변경 시 전체가 바뀌는 문제
디자인 값 변경 시 개발팀 공유 방법

둘 모두 정답은 없지만 저의 경험을 근거로 말씀 드리면,

첫번째 경우는 두가지 경우가 있고, 이 경우는 현재 다루시는 프로덕트마다 다를 수 있습니다.

1-1. 전체 변경:

• 만약 전체적인 스타일 가이드가 바뀌어야 한다면, 디자인 시스템에서 line-height 값을 1.2로 조정하는 것이 맞겠죠. 그리고 기존 컴포넌트나 페이지에 미치는 영향을 충분히 고려해야 하며, 변경 사항을 전체 디자인 팀도 알아야 하고, 개발팀과 협의해야 합니다. 개발의 경우는 웹일 경우 스타일만 변경하면 되기 때문에 괜찮습니다.

1-2. 해당 작업물에서만 로컬로 적용:

• 특정 페이지나 컴포넌트에서만 line-height를 1.2로 조정해야 한다면, 로컬 스타일로 개별적으로 설정하는 것이 더 맞습니다. 다만, 이런 방식이 반복적으로 발생한다면, 디자인 시스템의 line-height 값이 프로젝트 전체에 적합한지 재검토해야 합니다. 계속 로컬로 만들어지면 디자인 시스템의 필요성이 없어지기 때문입니다.

두번째 경우는 베리어블을 활용하면 primitive(기본 값)에서 semantic(의미적 값)으로 확장성을 유지할 수 있지만, line-height처럼 디자인과 개발이 밀접하게 연관된 값은 변경 시 추가 커뮤니케이션이 필요합니다.

말씀하신대로, heading-4xl의 line-height가 56이었다가 50으로 바뀌면, 개발팀이 기존에 56으로 적용된 부분을 변경해야 하기 때문에 매번 공유하는 것이 맞습니다.

• 하지만 디자인 시스템에서 일괄적으로 관리된다면, 개발팀이 특정 토큰을 참조하도록 유도하면 변경 사항을 최소한의 커뮤니케이션으로도 적용할 수 있습니다. 보통 토큰 스튜디오 플러그인을 사용하는데, 이 경우 수정된 것을 json 파일로 내보내면 개발자는 바로 그걸 쓰면되서 사실 개발자 분이 따로 연결을 할 필요가 없습니다.

도움이 되셨으면 좋겠습니다. 실무적인 내용이라 정답은 없지만 도움이 되셨으면 좋겠습니다.

인프런 커뮤니티 질문&답변