IBM developer day에 다녀왔다

어쩌다 가게 되었나

사실 해당 행사가 열리는 주까지 아무 생각이 없다가, 발표자 분 한 분이신 진유림 님 SNS를 통해 해당 행사가 있음을 알게 되었다. 전체적으로 시간표를 봤는데, 음…. 나는 프론트 단에만 관심이 있는 터라 특정한 세션 하나만 들어도 될 것 같았다. 가는 김에 오픈 소스 관련한 것도 듣고. 분명히 당시 확인했을 땐 듣고자 하는 메인 세션이 오후 늦게였는데, 전날 확인 차 온 문자를 보니 시간표가 바뀌어 있었다. 그렇다고 관심 없는 세션을 듣고 싶진 않았고, 지인들에게 물어보니 가는 이도 많지 않은 것 같아 네트워킹으로 시간을 떼우기도 막막했다. 어쨌든 그래서, 세션 하나만 보고 갔는데요.

세션 요약

미우나 고우나 내 새끼

• 개요
  • 발표자 : 진유림 님 / Zepl / UI/UX oriented front-end engineer / 데이터 사이언스 노트북 플랫폼 Zepl 제작
    • 여러분은 어디든 쉽게 끼울 수 있는 블록을 만들어야 합니다
      • 그 블록은 조금의 노력으로 많은 일을 할 수 있어야 하고
      • 쉽게 개조할 수 있어야 하고
      • 다른 블록과 같은 규칙을 따라야 하며
      • 쓰기 편하고 예뻐야 합니다
    • 보통의 프런트엔드 개발자가 재사용 가능한 컴포넌트를 만들 때 하는 고민입니다
    • 본 발표에서는 데이터 사이언스 노트북 플랫폼 Zepl의 UI를 전면 개편하며 만들었던 커스텀 컴포넌트의 디자인부터 구조 설계, 리팩토링에 관해 이야기 합니다

상태와 상호작용

상태

• 웹이 사용자에게 더욱 풍성하고 동적인 경험을 주기 위해 저장하고 있는 사용자 인터랙션 관련 데이터
• 서버의 데이터에서 받아와서 보여주기도 하지만 사용자의 인터랙션에 따라 매 순간 바뀔 수 있어야 한다
• = 프런트 전용 데이터 베이스

컴포넌트

• 상호작용과 상태를 담고 있는 액자 블록
• 컴포넌트에 상호작용과 상태를 넘기면 언제 어디서든 원하는 모양의 일관적인 UI를 쉽게 사용할 수 있다

컴포넌트 커스텀

• 하나부터 열까지 자신이 직접 만들어보기 : 재사용 가능한 컴포넌트 만들기 A to Z
• 외부 라이브러리 커스텀
• 외부 라이브러리 슈퍼 커스텀

재사용 가능한 컴포넌트 만들기 A to Z

• 기획

  • 디자이너가 준 컴포넌트의 디자인을 보고 상태와 액션 리스트 업 해보기
  • 디자인에 필요한 요소를 어떻게 컨트롤 할지
  • UI 필요 조건 있으면 명시
    • 필수적으로 넘겨야 하는 것은 표시
  • 리스트업 완료되면 디자이너아 함께 리뷰

• 조사

  • 다른 라이브러리 조사
    • 해당 라이브러리는 어떻게 데이터를 구분했는지
    • 기능 구현 방법

외부 라이브러리를 가져다 쓸 때 유의해야 할 점

• 요구사항 반영 여부
• 요구사항에 비해 너무 많은 기능이 있어 무겁진 않는지
• 커스텀 하기 편한가
  • 6개월 뒤의 자신도
  • 동료 개발자가 봤을 때도
• 최근까지 유지보수가 활발히 일어나고 있는가
• 중간에 유지보수가 되지 않는다고 하더라도 영향 없이 자체 유지보수가 가능한가

• 공유

  • 기존에 쓰던 레거시 컴포너트를 대체할 라이브러리를 조사했다
  • 우리의 요구사항은 다음과 같고, 해당 요구사항에 걸맞는 것들은 이런 라이브러리들이 있더라
  • 어떻게 생각하는지

• 설계

  • 사용자의 입장에서 mvp 컴포넌트 설계
  • 컴포넌트가 이미 구현되어 있다 가정하고 정의한 상태를 key와 value로 설계
  • tdd와 비슷
    • 디자인을 보고 코드의 얼개를 짜는 것
  • 부가적인 기능은 다음으로 미룰 것

• mvp 구현

  • 세부 기능 붙이기

컴포넌트의 종류

stateful한 컴포넌트

• 굳이 상태 관리 안해줘도 됨
• 내부 코드가 상태를 예측하기 힘들고 복잡해짐

stateless한 컴포넌트

• 뿌려주는 대로 뷰를 만드는 역할
• 상용 서비스를 만들다보면 한 컴포넌트를 여러 방식/데이터로 쓰는 게 비일비재
  • 확장성과 유연함이 중요할 때 주로 사용

도구 추천 : storybook

유림 님 시간이 남으면 복싱 보여주시겠다고 하셨는데 왜 13분이나 남았는데 안 보여주셨나요

오픈소스 컨트리뷰터로서 성장하는 개발자: 글로벌 커뮤니티에서는 어떻게 가능할까?

• 개요
  • 발표자 : 최영락 님 / 마이크로소프트 / 마이크로소프트에서 개발자와 함께하는 Azure를 모토로 많은 분들과 소통하며 오픈스택 및 DevC Seoul 커뮤니티 활동
    • 현 IT 세상에는 회사에서 열심히 하시는 개발자 뿐만 아니라 직접 오픈소스를 만드시는, 또는 다양한 오픈소스 재단 및 커뮤니티와 함께 하는 개발자 분들도 많으십니다.
    • 본 발표에서는 클라우드 및 컨테이너 관리 분야 대표적인 오픈소스 커뮤니티인 오픈스택 및 쿠버네티스 글로벌 커뮤니티를 예를 들어 회사에 계신, 또는 독립 개발자가 오픈소스 컨트리뷰션을 통해 어떤 성장을 하는지 다양한 경험으로부터 얻은 인사이트를 공유하고자 합니다.

여담인데 발표자 분께서 차근차근 말씀해주셔서 듣기 좋았다. 그리고 세상 참 좋아져서 IBM에서 MS 소속 개발자가 발표를 다 한다는 말씀 넘나리 웃겼다.

오픈 소스의 발전 & 온라인 커뮤니티

• 이전보다 프로그래밍 언어적으로 교류가 편리해짐
• 컴퓨터 하드웨어의 발전

• OS 및 다양한 소프트웨어의 발전 & 공유

• 오픈소스 운동 전개

  • 인터넷
  • 소스 공유 도구
    • 버전 관리 도구
    • 오픈 소스 공유를 위한 포털
  • 버그 리포팅 등 의사 소통을 위한 도구

다양한 오픈소스 컨트리뷰션 생태계 유형

• 공유 플랫폼을 통한 개인의 오픈 소스

  • 개인의 역량에 따라 다름
  • 소통을 잘하거나

• 재단 주도 오픈 소스

  • 특성마다 다르나 비영리 재단인 경우가 많음
  • 비영리 목적
  • 개인 주도의 오픈 소스였다가 재단의 도움을 받아 성장하기도
• 회사 주도 오픈 소스
  • 회사에서 오픈 소스를 보장한다는 자신감
  • 이슈 / 피드백을 적극적으로 반영해 발전이 빠른 편

오픈소스 생태계에서 필요해진 것들

공유 가능한 환경

• 저장소
• 커뮤니케이션 방식
• 이슈/프로젝트 관리

프로젝트 상태를 알리는 환경

• 문서화
• 번역 지원
• CI / CD
• 릴리즈 관리

컨트리뷰션을 위한 가이드

• readme, license
• 기여하고자 하는 분들이 바로 알아볼 수 있는 이슈/버그들
• 열린 소통

규범 & 거버넌스

• Code of Conducts에서 출발한 여러 팀에 대한 관리

자신의 오픈 스택 활동

소통 방법

• 규범이 되는 문화를 이해할 것
• 하고 싶음을 어필

presence & 문제 해결

• 문제의 요약, 솔루션을 찾자
• 목표를 뚜렷하게 해서 대화

느낀점

고작 두 세션만 들었지만 배운 게 너무 많았다. 특히 기대했던 유림 님 세션이 지금 내게 닥친 시련에 큰 돌파구가 될 것 같다. 현재 나는 material ui를 이용해서 프론트 단을 제작 중에 있는데, 타 라이브러리마다 컴포넌트 생성 방법이 조금씩 다르다는 걸 처음 알았다. (난 거의 비슷하게 구현되어있을 줄 알았는데)

사이드 프로젝트를 한다면 내가 좋아하는 디자인으로 할 것이다….. material ui…. 보라색…. 무슨 일…

오픈 소스 관련 세션은, 사실 이전에 OSS 오픈 소스 개발자 이야기을 다녀와서 겹치는 내용도 많았지만, 여러모로 요즘 벌어진 사건에 사색해볼 수 있는 시간이었던 것 같다. 이런 세션을 들을 수 있어서 기분이 좋다…. 곧 또 다른 행사 세션에 들어가고…. 내일도 세션이 있고…. 모레도 세션이 있지만…… 행…복…하다….