디자인시스템 그리고 컴포넌트 라이브러리 만들기 2/2 (Vite, Vue)
이제 실제 구현에 대해 설명하겠습니다. 개발 구현은 구성은 아래과 같습니다. 대략적으로 설명하고 자세히는 설명하지 않겠다. ( 빌드 설정 역시 최소화하였다. 상황에따라 별도 설정이 추가로 필요하다. 실제로 적용하다보면서 추가로 설정해야할 부분이 많다. svg 설정이나 정적파일 처리 등등 ... ) Vite: 번들러 ( ESM 기반 dev server를 제공해줘서 개발자 경험이 매우 좋음. vitest 같은 테스트 러너를 같이 사용하기에도 매우 편하다) Vue: 프론트엔드 프레임워크 Storybook: 문서화 및 개발, 테스트 환경 제공 Chromatic: 스토리북을 빌드하고 변경 부분을 확인할 수 있는 기능을 제공해준다. ( Storybook, Chromatic 까지 다루기에는 너무 내용이 많아져서 생략..
디자인시스템 그리고 컴포넌트 라이브러리 만들기 1/2 (Vite, Vue)
최근 1년간 회사에서 디자인 시스템관련 작업을한 경험을 공유하려고 합니다. 완벽한 디자인 시스템을 만들었다고 생각하지 않지만 편의상 디자인 시스템이라고 하겠습니다. 최근 1년 작업하면서 느낀건 개발자들와 UX디자이너들이 생각하는 디자인 시스템이 많이 다르다는걸 느꼈습니다. 우선 디자인 시스템에 대해 설명하고 넘어가겠습니다. 개발자가 생각하는 디자인 시스템: Storybook + UI Component 로 구성된 구성 UX디자이너가 생각하는 디자인 시스템: Pigma or Zeplin 으로 구성된 컴포넌트 구성 + 폰트, 디자인 심볼 + 무언가를 통한 일괄적용 ( 앱 + 웹 ) 어떻게 보면 UX디자이너가 생각하는 부분이 완전한 디자인 시스템에 더 가깝습니다. (적용은 다른 얘기지만요...) 디자인 시스템을..
필요성 웹상에서 적절한 font를 보여주는 것은 매우 중요하며 웹폰트를 사용하지 않고 내장폰트를 이용한다면 내장폰트에 맞게 적절한 폰트수치를 사용하는게 중요하다. 현재 운영중인 iOS, Android에서 제공되는 웹뷰에서 각기 다른 폰트가 적용되고 있다. (별도의 웹폰트를 사용하고 있지 않다.) iOS, Android 모두 디바이스에 내장된 폰트를 사용하고 있습니다. iOS의 경우 .AppleSystemUIFont, Android의 경우 Noto Sans CJK KR가 적용된다. iOS디자인 가이드상으로는 font-weigh을 600으로 사용하여야 하고 Android는 유사한 두께로 보여주기위해 700을 사용하여야 했다. 두 폰트의에 동일한 font-weight을 적용할 경우 한 쪽 폰트가 너무 두껍게..