디자이너님과 협업을 통해 디자인 시스템을 일부 설계하였습니다.
피그마에 작업되어있는 디자인을 그대로 옮기는 작업이라고 생각했습니다.
하지만 코드의 재사용성과 스토리북과의 연계를 생각하며 작업하자 생각할 것이 생각보다 많아져 배운부분이 많은 경험이었습니다.
Typograpy
현재 프로젝트에서 사용될 fontfamily, fontsize, lineheight 를 단계별로 묶어 변수처리 하였습니다. styled component를 사용하고 있기에 (storybook은 styled components 를 지원합니다.) ts 파일안에 모든 구성을 작성해놓았습니다.
typography 작성 시 컴포넌트에서 폰트 설정 예시)
// typography 작성하지 않을 시
const StButton = styled.button`
font-size : 48px;
font-family : 'bold';
line-height : 140%;
`;
// typography 작성 시
const StButton = styled.button`
${typography.heading_desktop_sm}
`;Color
구성
Global → Theme → Semantic 으로 작성하였습니다.
Theme가 Global을 참조하게 됩니다.
Semantic이 Theme 를 참조하게 됩니다.
Global
현재 프로젝트에서 진행되고있는 모든 색상입니다. 해당 색상을 변경할 경우 theme, semantic 뿐만 아니라 이를 참조하고있는 모든 컴포넌트들의 색상이 변경되게 됩니다.
Theme
어떠한 상황에 사용 될지를 고려하여 네이밍 되어있으며 global에서 선언한 색상이 참조되었습니다.themeColorWeb 과 themeColorMobile 두 개로 색상을 나누어 필요한 경우
currentTheme 변수에 할당해 사용하게 작성하였습니다.
Semantic
최종적으로 export 되는 단계입니다.
구체적으로 사용되는 곳이 네이밍에 들어가있으며 Theme의 색상을 참조하였습니다.
currentTheme 값에 따라 모바일 또는 웹의 디자인 시스템이 적용되게 됩니다.
Component
색상과 사이즈 및 폰트에 대한 초기 설정이 완료 되었다면 컴포넌트를 만들어줍니다.
컴포넌트를 작성할 때에는 아래사항들을 고려하는게 좋습니다.
어떤 기준으로 분기를 쳐 줄 것인가?
Button의 "Theme" prop 기준으로 분기를 쳐주었습니다.
스토리 분기를 제외한 분기는 어떠한 것들이 있는가?
size, shape, loading, disabled
타입스크립트를 작성하면 자동으로 위의 사진과 같이 옵션에 대한 설정을 만들어줍니다.
해당 설정은 직접 조절할 수 있습니다. 공식문서를 참고하시면 됩니다.
최종 완성 하게되면 버튼의 로딩 등 옵션의 선택을 통해 웹사이트가 아닌 스토리북을 통해 컴포넌트 별로 동작을 확인할 수 있습니다.