Notion | The connected workspace with site publishing

정웅님 안녕하세요!! 디자이너분들도 고생하셨을텐데 서운하게 투덜거린 말투로 말씀드린거 같아 죄송하다는 말씀 드리고 싶습니다..죄송합니다..ㅜㅜ 저희도 그냥 사용할까 하다가도 저번에 말씀 주신것처럼 모르는건 배우는 마음으로 편하게 말씀주셔달라고 하셔서 이렇게 하면 협업하는데 도움이 된다라고 말씀을 드린다는게 저도 부족하게 대충 설명을 드린거 같습니다..다시 천천히 설명드리겠습니다!!

우선 저렇게 제너럴 컴포넌트로 폰트와 색상을 따로 분리해서 저장하는 이유는 개발자가 프리셋을 미리 저장해놓으면 나중에 css 작업을 할때에 오타를 줄인다던지 단순 반복을 줄이기 위해서 사용합니다!!

예를 들어서 NavyBlue-5의 경우 #1A3276 로 색상코드가 정의되어 있으면 저희는 이걸 따로 모아서

const color = {
  Black: "#222222",
  White: "#FFF",
  CoolGrey_2: "#81899E",
  CoolGrey_1: "#C5C9D2",
  Grey_3: "#7B7B7B",
  Grey_2: "#DDDDDD",
  Grey_1: "#F6F6F6",
  NavyBlue_5: "#1a3276",
  NavyBlue_4: "#96a9dc",
  NavyBlue_3: "#c6d2f0",
  NavyBlue_2: "#d2d9ec",
  NavyBlue_1: "#e7ecf9",
  Gold_5: "#9b6d54",
  Gold_4: "#faf2ed",
};

이런식으로 정리를 하면 나중에 css 작업에서 background : var(NavyBlue-5) 이런식으로 사용할수 있게되는 방식입니다. (물론 -가 아니라 _로 해야합니다!!)

이렇게 하면 생기는 장점은 이제 기능상에서는 없지만 나중에 다크모드를 추가할 경우에는 따로 css를 건드릴 필요 없이 저 코드들을 color2라던지로 새로 만들면 전체가 바뀌게 간단히 적용할 수 있습니다.

하지만 저희 피그마에서 개발자모드로 보게되면

border: 1px solid var(--unnamed, #1A3276);
background: var(--unnamed, #1A3276);

이런식으로 저장이 되어있어 이게 무슨 색상인지가 구분하기가 힘듭니다 ㅠㅠ ( 심지어 제너럴 컴포넌트에 저장되어 있지 않은 색상코드도 존재하는거 같습니다 ) 물론 그냥 저 #1A3276이라고 사용하면 css 상에서는 문제는 없지만 개발자의 입장에서는 숫자같은 오타가나더라도 구분이 안되는 부분을 피하고자 저렇게 따로 저장하는 편입니다.

폰트의 경우에는 color와 비슷하게 font-family로 선언을 하고 나중에 css에서 사용할때에는 font-family로 사용하면 그 폰트의 특징들을 한번에 가져올 수 있습니다.

예를 들어서 Headline Large - Hyundai Sans Head KR 32/40 . 0의 경우로 보면

/* headline 1 */
font-family: Hyundai Sans Head KR;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 40px; /* 125% */
letter-spacing: -0.96px;

font-family를 ‘Hyundai Sans Head KR’ 로 저장하셨는데 모든 font-family가 같은 이름으로 사용되어있습니다. 이 font-family를 사용하는 방식이

@font-face {
  font-family: "headline large";
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px; /* 125% */
  letter-spacing: -0.96px;
  src: url(${FONT_HEAD});
}

이렇게 위의 내용을 headline large로 저장을 하면 나중에 css 작업을 할 때에

font-family: "headline large";
{
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px; /* 125% */
  letter-spacing: -0.96px;
}

맨 윗줄만 선언하면 아래 {} 안에 포함되어 있는 부분들이 다 따라 사용되는 느낌입니다!!

하지만 저희 피그마에서는 font-family가 다 같은 이름이고 weight와 line-height로 조정하셨다보니 css적으로도 내용이 길어지고 위의 방법을 적용하지 못해 따로 제너럴 컴포넌트에서 정의한 의미가 줄어드는 것 같습니다.