[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기Jae Sung Park
차트란 무엇일까요? 차트는 우리가 일상에서 아주 쉽게 자주 접하지만, 막상 개발자로써의 경험을 하는 동안 차트 개발(적용)은 쉽게 경험해 보기 어려운 영역이기도 합니다.
본 발표는 '차트'라는 영역에 대한 개발 경험기와 함께 오픈소스로 공개 후, 단 기간 내에 많은 주목을 받기 까지의 과정을 통해 어떻게 의미있는 성과를 글로벌 하게 얻을 수 있었는가에 대한 오픈소스 성장에 대한 경험도 같이 공유합니다.
이를 통해 다양한 오픈소스 개발 시도와 참여가 활발히 이루어 지는데 도움을 줄수 있게 되기를 기대 합니다.
최근 인프라스트럭처 쪽에서는 플랫폼 엔지니어링이라는 말이 관심을 받고 있습니다. 최근 2년 동안 당근마켓에서 배포 시스템을 포함한 사내 개발자 플랫폼을 만들면서 플랫폼 엔지니어링에 관해 알게 되고 이를 잘 적용하기 위해 많은 고민을 했습니다. 그 결과 플랫폼 엔지니어링은 갑자기 새로 나왔다기 보다 DevOps부터 이어진 개발과 운영의 사일로 문제와 피드백 루프 문제를 해결하고 이 문제를 소프트웨어로 해결하는 SRE에서 이어진 개념이라고 생각하고 있습니다.
이 발표에서는 그동안 공부하고 고민하면서 알게된 플랫폼 엔지니어링이 무엇인지를 설명하고 왜 필요한지, 어떻게 적용해 볼 수 있는지에 관해 공유합니다.
https://inflearn.com/conf/infcon-2023/session-detail?id=782
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기Jae Sung Park
차트란 무엇일까요? 차트는 우리가 일상에서 아주 쉽게 자주 접하지만, 막상 개발자로써의 경험을 하는 동안 차트 개발(적용)은 쉽게 경험해 보기 어려운 영역이기도 합니다.
본 발표는 '차트'라는 영역에 대한 개발 경험기와 함께 오픈소스로 공개 후, 단 기간 내에 많은 주목을 받기 까지의 과정을 통해 어떻게 의미있는 성과를 글로벌 하게 얻을 수 있었는가에 대한 오픈소스 성장에 대한 경험도 같이 공유합니다.
이를 통해 다양한 오픈소스 개발 시도와 참여가 활발히 이루어 지는데 도움을 줄수 있게 되기를 기대 합니다.
최근 인프라스트럭처 쪽에서는 플랫폼 엔지니어링이라는 말이 관심을 받고 있습니다. 최근 2년 동안 당근마켓에서 배포 시스템을 포함한 사내 개발자 플랫폼을 만들면서 플랫폼 엔지니어링에 관해 알게 되고 이를 잘 적용하기 위해 많은 고민을 했습니다. 그 결과 플랫폼 엔지니어링은 갑자기 새로 나왔다기 보다 DevOps부터 이어진 개발과 운영의 사일로 문제와 피드백 루프 문제를 해결하고 이 문제를 소프트웨어로 해결하는 SRE에서 이어진 개념이라고 생각하고 있습니다.
이 발표에서는 그동안 공부하고 고민하면서 알게된 플랫폼 엔지니어링이 무엇인지를 설명하고 왜 필요한지, 어떻게 적용해 볼 수 있는지에 관해 공유합니다.
https://inflearn.com/conf/infcon-2023/session-detail?id=782
Scalable Architecture Design
DEVIEW 2013 에서 발표한 "오픈소스를 활용한 분산 아키텍처 구현기술" 장표입니다.
Scalable Architecture 디자인을 위해 필요한 다양한 구현 기술 중 몇가지를 소개해 드립니다.
관련된 내용으로 문의 있으시면 메일로 연락 주세요~
15. A design system is a collection of documentation on principles and best practices,
that helps guide a team to build digital products.
They are often embodied in UI libraries and pattern libraries, but can extend to include
guides on other areas such as 'Voice and Tone'.
https://github.com/alexpate/awesome-design-systems
16. Components
Contains coded patterns and examples.
Voice & Tone
Provides guidance on how language should be used.
(Identify, Look and feel, Tone and voice)
Designers Kit
Includes a Sketch/Photoshop/Figma/etc. file for designers.
22. Design System
helps bridge the gap between
designers and engineers
working on design systems at
scale
https://airbnb.design/painting-with-code/
디자인 시스템은 디자이너뿐 만이 아니라, 개발자와의 협업과 디자인 기반의 기획&설계 등에도 활용 될 수 있다.
협업을 위한 좀더 이상적인 디자인 시스템을 구축하는 방법들이 연구 되고 있으며, airbnb 의 react-sketchapp 이 그 중 하나이다.
25. Style
Code
Product>>
Sketch
Design once. Reuse anywhere. Update easily.
With Symbols, Sketch takes the pain out of working with repeated design elements — from icons to avatars.
https://www.sketchapp.com
26. Product>>
react-sketchapp
an open-source library that allows you to write React components that render to Sketch documents.
(tailor-made for design systems)
https://github.com/airbnb/react-sketchapp
31. Many hard problems are best
solved when they are
addressed backward. Charlie Munger,
Vice-Chairman of Berkshire Hathaway
수많은 어려운 문제들은 정 반대로 생각할 때 풀리기도 한다.
지금까지는 디자인 도구에서 코드를 생성해 개발자가 사용할 수 있기를 바래왔지만, 이 문제를 반대로 해결한 것이다.
43. ./src
├── components
│ ├── CommentRow.js
│ ├── HTMLView.js
│ ├── Header.js
│ ├── Icons.js
│ └── StoryRow.js
├── main.js
├── manifest.json
├── screens
│ ├── CommentScreen.js
│ ├── PageScreen.js
│ └── StoryScreen.js
├── styles
│ └── index.js
└── utils
├── constants.js
└── fetchData.js
./src
├── components
│ ├── CommentRow.js
│ ├── HTMLView.js
│ ├── Header.js
│ ├── Icons.js
│ └── StoryRow.js
├── App.js
├── screens
│ ├── CommentScreen.js
│ ├── PageScreen.js
│ └── StoryScreen.js
├── styles
│ └── index.js
└── utils
├── constants.js
└── fetchData.js
react-sketchapp design system react-native mobile application
스타일이 정의된 코드는 Design System 과 Product 가 동일하도록 해야 한다. 그 외 코드 내용은 다르더라도 큰 구조 자체는 동일하도록 하자.
44. Who should implement
Design System?
Design System 은 누가 구축해야 하는가? 개발자는 초기에 환경을 구축하고 틀을 잡는다면, 이후 디자이너가 직접 코딩하는 것이 이상적이다.
하지만 현실적으로, 퍼블리셔가 하는 경우 즉시 효과가 보이기도 한다.
45. Cons.
Learning cost of designers.
Difficult to draw UI intuitively.
코드가 어렵다기보다는 동작하는 환경의 이해가 더 어렵다. 그래서 개발자가 먼저 환경과 구조를 잡아야 할 것이다.
코드를 작성해야 화면을 그릴수 있기때문에 직관적으로 그려나갈 수는 없다. 직관성은 Design System 의 목적이 아닐 수 있다.
47. We’re investing in code as a design tool.
Moving closer to working with assets that
don’t only include layout and design, but also
logic and data. This helps bridge the gap
between engineers and designers, thus
reducing the need for design specs–or
redlines–and the steps between vision and
reality. Alex Schleifer, head of design at Airbnb
코드를 디자인 도구로 사용한다. 단지 레이아웃과 디자인 뿐 아니라 로직과 데이터를 고려한 디자인 자산을 만드는 것이다.
이를 통해 디자이너와 개발자간의 간극을 줄이고, 더불어 디자인 스펙 문서의 의존성을 줄여 이상을 좀더 현실로 다가서게 한다.