Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie 이번 생에 디자인 시스템은 처음이라
Ähnlich wie 이번 생에 디자인 시스템은 처음이라 (20)
Mehr von NAVER Engineering
Mehr von NAVER Engineering (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (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. 마치며