창립이래 최초의 디자인시스템 구축하기(feat. 30년만에!)의 2편인 이번에는 시스템 구축을 위한 설계 과정, 사용법 그리고 시스템의 확장에 대한 부분에 대해 소개한다. 시스템 설계에 있어서 가장 기반이 되는 Foundation을 지정하게 되는데, 그중 디자인 토큰은 디자인 시스템 구축에 있어서 기반이 되고 공수가 많이 드는 작업 중 하나다. 다음으로는 설계한 토큰을 실제 컴포넌트에 어떻게 적용하고 피그마에도 활용할 수 있는지 확인하고 마지막으로 컴포넌트의 다형성(Polymorphism)을 위해 Type-Safe한 인터페이스를 만들어 더 확장성 있는 디자인 시스템을 구축하는 단계를 살펴보자. Foundation디자인 토큰 설계 시 아래 4가지를 고민하여 설계한다.브랜드 컨셉을 따르는 컬러와 폰트에 대한..

이번 포스팅은 회사 창립 이래 30년 만에 최초로 디자인 시스템을 본격적으로 구축하고, 사내 시스템으로 배포하기까지의 과정과 기술적으로 어떻게 구상하고 적용했는지에 대해 두개의 포스팅으로 공유하고자 한다.사실 최초라고 작성하긴 했지만, 재작년에 작성했던 "Storybook으로 퍼블리셔, 디자이너와 협업 그리고 디자인 시스템 구축까지"라는 글의 주제로 포스팅한 적이 있었다. 하지만 이때는 사내 시스템으로 배포에는 실패하고, 제품의 공통 컴포넌트로 사용하는 수준에서 그쳤다. 왜냐하면 사내에서 디자인 시스템을 구축하고 왜 이걸 하는지 타당한 이유가 부족했다.그래서 지난번의 디자인 시스템 구축에 실패했던 이유와, 이번에는 성공했던 이유 그리고 소통의 장애를 극복한 이야기에 대해 풀어보고자 한다. 최초의 디자인 ..

개요기존 홈페이지에서 페이지 로드 시 높은 화소 이미지로 인한 느린 랜딩 속도로 인해 UX 개선이 절실히 필요하였다. 차선책으로 이미지 압축을 통해 약간의 개선을 하였지만, 그래도 높은 용량의 이미지 처리와 떨어진 퀄리티로 인해 디자이너, 개발자의 만족도가 낮은 상태였고, 퀄리티를 개선하는 방향을 찾다 Next.js(v12.2)의 이미지 최적화 서버를 활용 가능하다고 판단하여 적용하게 되었다.  사실 Next.js의 next/image 컴포넌트는 이미 사용 중이었으나, 다양한 이유로 인해 운영환경에서 최적화가 된 채로 배포가 되지 않고 있었다. 다른 사람들은 그냥 컴포넌트만 쓰면 알아서 optimize가 된다는데…. 왜 우리만…!? 보안 이슈, yarn-berry에서의 Sharp 이슈와 Low 버전의 C..

최근 들어서는 퍼블리셔가 있는 회사가 점점 없어지는 추세로 알고 있다. 하지만 연식이 조금 되거나, 업무의 효율성 증대를 위해 해당 포지션을 가지고 있는 회사는 아직 많이 있다. 퍼블리셔라는 포지션 특성상 HTML, CSS를 위주로 페이지 템플릿이나, 정적인 페이지 디자인까지만 업무를 하는 경우가 많아 개발자와 함께 같은 프로젝트에서 붙어서 진행하는 경우는 많이 없었다. 또한 규모가 조금 있는 곳이라면 업무가 몰리는 경우도 매우 많고, 그러다 보니 협업하는 과정에서 워터폴 방식으로 업무가 진행되는 경우가 많이 있었다. 이번 글은 개발자, 퍼블리셔와 디자이너가 함께 협업할 수 있었던 이야기를 작성해 보려 한다. 어쩌다가 Storybook을 가져오게 되었고, 창립 이래 최초로 디자인 시스템을 구축했는지, 지..

개요처음 시작은 도커 최적화에서 시작되었다.  사내 프로젝트 진행 중 yarn-berry 마이그레이션 후 CI/CD를 진행하는 도중. 회사에서 사용되는 gitlab의 저버전 이슈로 인해 ci 중 캐싱이 되지 않고, 필요 이상의 .yarn 내부의 패키지와 dev module들이 포함되어 올라가는 이슈가 발생하여 빌드 최적화에 관심을 두게 되었다.그 후 운영 단계에서 최적화는 반드시 거쳐 가야 하는 순번이라 생각했고, 이번 기회에 번들링 최적화를 진행하게 되었다. Bundle Size 최적화What is Bundle?여러 개의 파일을 묶어서 처리되는 의미. Javascript 파일들을 묶어서 생성되고, 웹 애플리케이션에서 필요한 리소스를 단일 파일로 묶어서 관리하고 전달하는데 사용된다. 웹 애플리케이션에선 ..

npm? pnpm? yarn? Yarn Berry? npm vs yarnNPM(Node Package Manager)는 Javascript를 위한 패키지 매니저. command-line으로 오픈 소스를 설치하고 활용할 수 있는 도구이다. (이전까지는 기능을 직접 추가하거나 Github에서 다운 받아서 넣었다)Yarn은 Facebook에서 만든 Javascript 패키지 매니저. npm의 단점을 향상시키기 위해 만들어진 매니저 툴이며, 속도, 안정성, 보안성등이 npm보다는 높다. 실제로 데이터를 캐시에 저장하고 병렬처리하여 npm보다 성능과 속도가 더 빠르다는 것을 알 수 있다. 하지만 18년도 쯤 부터는 npm과 yarn 성능 차이가 크게 나지 않아. 접근성으로 오히려 npm이 더 역사가 깊고 접근성이..