figma에 정의된 디자인 시스템 중 semantic color 상수화에 관련된 설명입니다.
단순 문자열로만 정의된 색상 필드의 부분적인 타입을 명확하게 하기 위해 타입 명시를 진행했습니다.
/styles/semantic.ts
export type HexColor = `#${string}`;
export type RGBAColor = `rgba(${number}, ${number}, ${number}, ${number})`;
상수임에도 불구하고 figma에 정의된 시스템을 복사해 바로 사용하는 편이 편할 것이라 생각돼 TYPO와 다르게 SEMANTIC이 아닌 소문자로 선언해 주었습니다. 때문에 특정 컬러 사용 시 figma dev 모드에서 복사해 semantic.accent.solid.light.hero로 사용해 주시면 됩니다. 다만, 피그마에는 semantic.accent.solid.hero로 설정되어 있어 이 부분은 회의가 필요해 보입니다!
export const semantic = {
accent: {
solid: {
light: {
hero: '#00895A' as HexColor,
normal: '#029764' as HexColor,
alternative: '#00A66E' as HexColor,
},
dark: {
hero: '#00A66E' as HexColor,
normal: '#00B478' as HexColor,
alternative: '#00C482' as HexColor,
},
},
transparent: {
light: {
hero: 'rgba(0, 137, 90, 0.20)' as RGBAColor,
normal: 'rgba(2, 151, 100, 0.14)' as RGBAColor,
alternative: 'rgba(0, 166, 110, 0.08)' as RGBAColor,
},
dark: {
hero: 'rgba(0, 166, 110, 0.26)' as RGBAColor,
normal: 'rgba(0, 180, 120, 0.20)' as RGBAColor,
alternative: 'rgba(0, 196, 130, 0.14)' as RGBAColor,
},
},
},
⚡️ typography 상수화
figma에 정의된 디자인 시스템 중 typography 상수화에 관련된 설명입니다.
typography 같은 경우 디자인 시스템에 작명되어 있는 이름을 그대로 사용해 선언해 주었습니다. 모든 폰트 파일은 public/assets/font에 있습니다. 모든 폰트는 웹 폰트 로딩 시간을 줄이기 위해 woff2를 사용했습니다.
✅ 체크리스트
@styles/...
📝 작업 상세 내용
⚡️ semantic color 상수화
단순 문자열로만 정의된 색상 필드의 부분적인 타입을 명확하게 하기 위해 타입 명시를 진행했습니다.
/styles/semantic.ts
상수임에도 불구하고 figma에 정의된 시스템을 복사해 바로 사용하는 편이 편할 것이라 생각돼
TYPO
와 다르게SEMANTIC
이 아닌 소문자로 선언해 주었습니다. 때문에 특정 컬러 사용 시 figma dev 모드에서 복사해semantic.accent.solid.light.hero
로 사용해 주시면 됩니다. 다만, 피그마에는semantic.accent.solid.hero
로 설정되어 있어 이 부분은 회의가 필요해 보입니다!⚡️ typography 상수화
typography 같은 경우 디자인 시스템에 작명되어 있는 이름을 그대로 사용해 선언해 주었습니다. 모든 폰트 파일은
public/assets/font
에 있습니다. 모든 폰트는 웹 폰트 로딩 시간을 줄이기 위해woff2
를 사용했습니다./styles/typo.ts
만일 특정 타이포로 작업하고 싶으신 경우
styled-components
에서의 사용법은 아래와 같습니다.⚡️ global style 설정
기존의
reset.css
파일을 삭제하고styled-components
를 적용함에 따라GlobalStyle.ts
로 대체해 주었습니다./styles/GlobalStyle.ts
main.tsx
⚡️ 스타일 파일 경로 설정
간편 경로를 설정해 주었습니다. 앞으로 스타일 디렉터리 내에 있는 파일들의 경로를 설정할 때 타 파일 경로들과 동일하게
@styles/...
로 import 해 주시면 됩니다!tsconfig.paths.json
vite.config.ts
🚨 버그 발생 이유 (선택 사항)
🔎 후속 작업 (선택 사항)
margin
,padding
등 아직 지정해 두지 않은 것들이 있는데, 만일 작업 중 필요성이 느껴지면 후속 작업으로 디자인 시스템 설정을 추가할 예정입니다.🤔 질문 사항 (선택 사항)
📚 참고 자료 (선택 사항)
https://lakelouise.tistory.com/337 https://blog.banksalad.com/tech/font-preload-on-safari/
📸 스크린샷 (선택 사항)
변경 사항에 대한 스크린샷이 있다면 첨부해주세요.
✅ 셀프 체크리스트
이슈 번호: #144