This document summarizes a presentation about using Stitches, a React styling library, and Storybook for component design. The presentation introduces Stitches as the styling library used for its support of React, easy usage, and themes. Key features of Stitches discussed include creating styled components, variants, and comparisons to other libraries. Storybook is presented as a way to improve communication between designers and developers by allowing visualization of components alongside their stories. Clean communication through a shared Storybook is emphasized. Reflections on initially creating a design system note the benefits of consistency and speed but also identify areas for improvement like documentation, process alignment, and understanding each other's roles. Establishing trust and understanding between

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

38. Storybook으로 디자이너와 소통하기

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
결론을 도출하기 쉬운 커뮤니케이션

54. Storybook으로 디자이너와 소통하기
회고
🤔

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. 마치며