Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à 이번 생에 디자인 시스템은 처음이라
Similaire à 이번 생에 디자인 시스템은 처음이라 (20)
Plus de NAVER Engineering
Plus de NAVER Engineering (20)
Dernier
Dernier (20)
이번 생에 디자인 시스템은 처음이라
- 1. 이찬희 @ DANO
- 2. 발표자 소개 • 이찬희 @ DANO, 프론트엔드 팀 • 인생 첫 발표
- 3. 목차 1. 사용한 라이브러리 소개 2. Storybook으로 디자이너와 소통하기 3. 처음 만들어본 디자인 시스템 회고
- 4. 사용한 라이브러리 소개
- 5. 사용한 라이브러리 소개 스타일링 라이브러리 무엇으로 해야 하는가 리액트, 쉽게 쓸 수 있는, 테마
- 6. 사용한 라이브러리 소개 스타일링 라이브러리 무엇으로 해야 하는가 Emotion or Tailwind CSS (or PostCSS)
- 7. 사용한 라이브러리 소개 Stitches 두둥등장 Stitches By Modulz
- 8. 사용한 라이브러리 소개 Stitches 두둥등장 Stitches By Modulz Why?
- 9. 사용한 라이브러리 소개 Stitches 두둥등장 리액트 ✅ 쉽게 쓸 수 있는 ✅ 테마 ✅
- 10. 사용한 라이브러리 소개 Stitches 두둥등장 Developer Experience
- 11. 사용한 라이브러리 소개 Stitches 기능 훑어보기 1. createCss 함수로 styled 함수 생성
- 12. 사용한 라이브러리 소개 Stitches 기능 훑어보기 2. 생성된 styled 로 컴포넌트 생성 후 사용
- 13. 2. 생성된 styled 로 컴포넌트 생성 후 사용 사용한 라이브러리 소개 Stitches 기능 훑어보기 타입스크립트 자동 완성 지원
- 14. 사용한 라이브러리 소개 Stitches 기능 훑어보기 3. 컴포넌트 사용
- 15. 사용한 라이브러리 소개 Stitches 기능 훑어보기 상황에 따라 Primary 와 Secondary 색상을 사용할 수 있음.
- 16. 사용한 라이브러리 소개 Stitches 기능 훑어보기 Variants
- 17. 사용한 라이브러리 소개 Stitches 기능 훑어보기 1. Variants 추가
- 18. 사용한 라이브러리 소개 Stitches 기능 훑어보기 2. Variants 사용
- 19. 사용한 라이브러리 소개 Stitches 기능 훑어보기 2. Variants 사용
- 20. 사용한 라이브러리 소개 Stitches 기능 훑어보기 2. Variants 사용 디버깅하기 쉬운 클래스 구조
- 21. 사용한 라이브러리 소개 다른 라이브러리와 비교 Styled Components 1. 인터페이스 정의 2. Variant 스타일 선언 3. styled.button 표현식 내에서 사용
- 22. 사용한 라이브러리 소개 다른 라이브러리와 비교 Styled Components Stitches
- 23. 사용한 라이브러리 소개 Stitches의 다른 기능들 Compound Variant Responsive Variant Custom Theme Breakpoints Utils ... https://stitches.dev
- 24. 사용한 라이브러리 소개 컴포넌트를 만들 때 놓치는 것? 🤔
- 25. 사용한 라이브러리 소개 여러분들의 접근성은 안녕하십니까 Accessibility
- 26. 사용한 라이브러리 소개 여러분들의 접근성은 안녕하십니까 Accessibility 시간이 없어서 구현하기 어려워서
- 27. 사용한 라이브러리 소개 여러분들의 접근성은 안녕하십니까
- 28. 사용한 라이브러리 소개 여러분들의 접근성은 안녕하십니까 엔터를 누르면 드롭다운을 열거나 닫아야 하고 ESC를 누르면 드롭다운 상자가 닫혀야 하고 키보드 방향키로 탐색이 되어야 하고 HOME/END 키로 가장 첫번째 혹은 마지막 옵션을 선택할 수 있어야 하고 입력 가능한 문자로 시작하는 옵션으로 포커스를 맞춰야 하고 ...
- 29. 사용한 라이브러리 소개 여러분들의 접근성은 안녕하십니까 Accessibility 시간이 없어서 구현하기 어려워서
- 30. 사용한 라이브러리 소개 여러분들의 접근성은 안녕하십니까 1. 시간이 없어서 2. 구현하기 어려워서
- 31. 1. 시간이 없어서 2. 구현하기 어려워서 사용한 라이브러리 소개 빌드업 끝, 소개 시작 Headless Component
- 32. 사용한 라이브러리 소개 Headless Component 특징 Unstyled Fully Accessible
- 33. 사용한 라이브러리 소개 Headless Component 특징 Unstyled Fully Accessible
- 34. 사용한 라이브러리 소개 Headless Component 특징 Unstyled Fully Accessible Focus to build own component
- 35. 사용한 라이브러리 소개 Headless Component 특징 Accessibility 시간이 없어서 구현하기 어려워서
- 36. 사용한 라이브러리 소개 Headless Component 특징 Accessibility
- 37. 사용한 라이브러리 소개 Headless Component 라이브러리 추천 Radix UI By Modulz
- 39. Storybook으로 디자이너와 소통하기 디자이너와 협업할 때 중요한 것? 🤔
- 40. Storybook으로 디자이너와 소통하기 디자이너와 협업할 때 중요한 것? ‘디자이너의 의도’
- 41. Storybook으로 디자이너와 소통하기 디자이너와 협업할 때 중요한 것? ‘디자이너의 의도’
- 42. Storybook으로 디자이너와 소통하기 디자이너의 의도를 이해하는 방법 개발자는 클린코드
- 43. Storybook으로 디자이너와 소통하기 디자이너의 의도를 이해하는 방법 Clean Communication
- 44. Storybook으로 디자이너와 소통하기 디자이너의 의도를 이해하는 방법
- 45. Storybook으로 디자이너와 소통하기 디자이너의 의도를 이해하는 방법 Why?
- 46. Storybook으로 디자이너와 소통하기 Why Storybook?
- 47. Storybook으로 디자이너와 소통하기 Why Storybook? 컴포넌트와 동시에 작성 만들어진 스토리북을 활용
- 48. Storybook으로 디자이너와 소통하기 Why Storybook? 🚀
- 49. Storybook으로 디자이너와 소통하기 Why Storybook? 🚀🚀🚀
- 50. Storybook으로 디자이너와 소통하기 Why Storybook? 🚀🚀🚀🚀🚀
- 51. Storybook으로 디자이너와 소통하기 Clean Communication 백마디 말보다 한번의 스토리북 배포를
- 52. Storybook으로 디자이너와 소통하기 Clean Communication Clean Communication 결론을 도출하기 쉬운 커뮤니케이션
- 53. Storybook으로 디자이너와 소통하기 Clean Communication Clean Communication 결론을 도출하기 쉬운 커뮤니케이션
- 55. Storybook으로 디자이너와 소통하기 회고 (실제로는 반성인 것) 🤔 미안합니다…
- 56. Storybook으로 디자이너와 소통하기 회고 (실제로는 반성인 것) 스토리북을 봐도 어떻게 써야 할 지 잘 모르겠어요 그냥 코드 보면서 직접 파악하겠습니다 아니 같이 일하는 프론트 팀원분의 심경 변화로 추측되는 것.txt
- 57. Storybook으로 디자이너와 소통하기 회고 (실제로는 반성인 것) Storybook 어떻게 쓸 것인가에 대한 최소한의 합의
- 58. 처음 만들어본 디자인 시스템 회고
- 59. 처음 만들 때 중요했던 것 어쨌든 소감 🤔
- 60. 처음 만들 때 중요했던 것 어쨌든 소감 Bittersweet
- 61. 처음 만들 때 중요했던 것 어쨌든 소감 좋았던 것 - 디자인 시스템을 만드는 시도 - 제품 디자인 일관성 - 작업 속도의 단축 아쉬웠던 것 - 일정 관리가 안됐다 - 문서화가 부족하다 - 디자인 시스템을 쓰는 상상만 했지 만드는 방식은 미숙했다 - 컨벤션 같은 것을 맞추지 않았다 - 올바른 방향으로 가는지 모르겠다 - 등등…
- 62. 처음 만들 때 중요했던 것 어쨌든 소감 좋았던 것 - 디자인 시스템을 만드는 시도 - 제품 디자인 일관성 - 작업 속도의 단축 아쉬웠던 것 - 그동안 서로 어떻게 일하는지 몰랐다. - 컨벤션 같은 것을 맞추지 않았다 - 일정 관리가 안됐다 - 올바른 방향으로 가는지 모르겠다 - 문서화가 부족하다 - 등등…
- 63. 처음 만들 때 중요했던 것 어쨌든 소감 좋았던 것 - 디자인 시스템을 만드는 시도 - 제품 디자인 일관성 - 작업 속도의 단축 아쉬웠던 것 - 그동안 서로 어떻게 일하는지 몰랐다. - 컨벤션 같은 것을 맞추지 않았다 - 일정 관리가 안됐다 - 올바른 방향으로 가는지 모르겠다 - 문서화가 부족하다 - 등등…
- 64. 처음 만들 때 중요했던 것 개발자와 디자이너 서로 이해하기 신뢰의 도약
- 65. 처음 만들 때 중요했던 것 개발자와 디자이너 서로 이해하기 신뢰의 도약
- 66. 처음 만들 때 중요했던 것 개발자와 디자이너 서로 이해하기 개발자가 디자이너를 디자이너가 개발자를 이해한다는 것
- 67. 처음 만들 때 중요했던 것 개발자와 디자이너 서로 이해하기 👨💻 👩🎨
- 68. 👨💻 👩🎨 처음 만들 때 중요했던 것 개발자와 디자이너 서로 이해하기
- 69. 👨💻 👩🎨 처음 만들 때 중요했던 것 개발자와 디자이너 서로 이해하기 : 개발자에게 컴포넌트란… : 디자이너에게 컴포넌트란…
- 70. 👨💻 👩🎨 처음 만들 때 중요했던 것 개발자와 디자이너 서로 이해하기 : 개발자에게 Props란… : 디자이너에게 Variants란…
- 71. 👨💻 👩🎨 처음 만들 때 중요했던 것 개발자와 디자이너 서로 이해하기 : 개발자에게 Props란… : 디자이너에게 Variants란… 가장 중요했던 순간
- 72. 처음 만들 때 중요했던 것 작게 만들고 빠르게 적용하기 🏔 여기 어딘가
- 73. 처음 만들 때 중요했던 것 작게 만들고 빠르게 적용하기 🏔 여기 어딘가 RELEASE
- 74. 처음 만들 때 중요했던 것 작게 만들고 빠르게 적용하기 Start Small
- 75. 처음 만들 때 중요했던 것 작게 만들고 빠르게 적용하기 Success? Failure? Learning
- 76. 처음 만들 때 중요했던 것 작게 만들고 빠르게 적용하기 Success? Failure? Learning
- 77. 처음 만들 때 중요했던 것 작게 만들고 빠르게 적용하기 Lean Design System
- 78. 마치며