Devfest 2019 Seoul Web Track 참관기
Devfest 2019 Seoul 을 다녀오고 이를 정리해보고자 한다.
프로그래밍의 미래, 함수형 프로그래밍
첫번째 세션은 Typescript 를 활용해서 Fucntional Programming 을 하는 방법을 소개해 주셨는데, 크게 함수형 프로그램의 소개, 함수형 프로그래밍의 장점, fp-ts 를 적용할 때의 장점을 이야기 해주셨다.
기존의 절차지향과 객체지향은 변이와 상태가 다른 코드의 동작에 영향을 주고 받기 때문에 프로그램의 동작을 예측하기 어렵다고 한다.
함수형 프로그래밍은 함수 안에서 가변 상태의 변경을 막기 때문에 동작을 예측하기 쉬우며, 수학에 기반한 프로그래밍이 때문에, 아름다운 코드를 작성할 수 있다고 한다.
함수형 프로그램이 가지는 요소로서, 일급 시민 함수, Side Efeect, 순수 함수, 고차 함수, 함수 합성, 모노이드, 펑터, 모나드 의 개념들을 수학적 개념을 적용하여, 설명해 주셨다.
이러한 함수형 요소들을 이해하고 이를 가지고 함수를 값과 타입으로서, 문맥을 수학적으로 모델링을 한다면, 중복코드도 줄어들고, 문맥을 깔끔하게 표현할 수 있다고 한다.
Javascript 에서도 함수형 라이브러리들이 많이 존재하지만, Haskell 이나 PureScript 및 Scala 같은 완벽한 함수형 프로그래밍을 구현되어 있지는 않다고 한다.
함수형 프로그래밍에서 제공하는 기능들을 최대한 비슷하게 구현한 타입스크립트 함수형 프로그래밍 라이브러리 인 fp-ts 를 소개 해 주셨다.
fp-ts 에는 Option, Maybe, Either, IO, Task, Functor, Applicative, Monad 와 같은 타입과 클래스 추상화 가 포함되어 있기 때문에, 순수 Fucntional Programming 의 구현이 가능하다고 한다.
문맥에서 실패 할 수 있는 작업들을 추상화하여 잡아 낼 수 있기 때문에, try-catch 를 최소화 할 수 있다고 한다.
발표자께서 나름대로 쉽게 설명 해주시기는 하셨지만, 함수형 패러다임을 이해하고 있지 않으면, 조금 어려웠던 세션이였지만, fp-ts 를 이용한 함수형 프로그래밍을 연습할 수 있을것 같아 나름 재미 있었다.
WebGPU is coming
두번째 세션은 WebGL 을 대체하는 새로운 차세대 API 인 WebGPU 를 소개해 주셨다.
기존에 WebGL 을 작업하는 과정을 설명해 주시고, WebGL 이 가지고 있는 Issue, 이 Issue 를 WebGPU 에서는 어떻게 해결했는지를 설명해 주셨다.
WebGL 도 GPU 를 이용하여 작업을 진행 할 수 있지만, OpenGL 의 차세대 버전인 Vulkan 이 WebGL 에서는 아직은 지원되지 않으며, 일부 성능 Issue 들을 가지고 있다고 한다.
Web 에서 CPU 대신 GPU 를 쓰는 이유는, CPU 로 화면을 그리면 pixel 별로 하나씩 작업해서 순차적으로 그려내지만, GPU 를 쓰면 한번에 page 단위로 그려낼 수 있기 때문에 훨씬 빠르며, 그동안 CPU 를 이용해 다른 작업을 할 수 있기 때문에 성능상 유리하다고 한다.
만약 웹에서 GPU 를 이용해서 삼각형을 그린다고 가정을 했을때
WebGL 로 작업을 하면 삼각형의 꼭지들의 geometry 위치를 지정하고, Background 색상을 정한다. 그리고 이를 GPU 에게 전달하여 draw 하게 한다.
만약 삼각형의 Background 색상을 바꿔야 한다면, 위 과정을 처음부터 다시 진행하고, 다시 draw 한다.
WebGPU 로 작업을 하면 삼각형의 정보를 가진 render 객체 를 생성하고, 이를 GPU 에게 전달하여 draw 하게 한다.
만약 삼각형의 Background 색상을 바꿔야 한다면, render 객체 에게 명령을 내리면, 필요한 부분만 변경하여, 다시 draw 한다.
때문에 WebGPU API 를 활용하면 성능상으로 장점이 생긴다고 한다.
이 이외에도 WebGPU 에 대하 WebGL 과 비교 하며 자세하게 설명해 주셨는데, babylon.js 를 예로 들어주시며, WebGL 은 Object 가 많아질 수록 CPU 의 부하가 심해지는데, WebGPU 는 Object 가 많아져도 CPU 자원을 거의 쓰지 않는다고 한다.
이외에도 여려 부분을 설명해 주셨는데, 해당부분을 집중 정리한 Post 를 만들어 보아야 겠다.
아토믹 디자인 패턴으로 디자이너와 소통하기
세번째 세션은 아토믹 디자인 패턴으로 디자이너와 함께 일하는 방법에 대해서 소개해 주셨다.
웹 개발자가 UI 개발을 할때 얼마나 고민하고 있는지 질문을 던져 주셨다.
최종 사용자에게 일관된 UX/UI 와 브랜딩을 제공하는 것은 디자인너만의 일은 아니며, 서비스를 고민하는 모두를 위한 것이다.
기획자가 기획을 해서 기획서로 디자인을 하고 디자인과 기획서로 최종 UI 를 개발할때, 각자가 따로 설계하면, 일관된 UI 를 만들기 어려우니 이를 아토믹 디자인 패턴을 이용하여, 일관된 형태의 패턴으로 만들자고 하셨다.
아토믹 디자인 패턴은 레고 블록처럼 UI를 작은 단위로 만든 후, 조합하는 개념 이며, 아토믹 디자인 패턴은 Atoms, Molecules, Organisms, Template, Pages 로 구성되어 있다.
각각의 Atoms 가 모여서 Molecules 를 이루는 식으로 하위를 조합들을 통해 최종 Page 가 이뤄어 지게 된다.
UI 설계 당시부터 디자이너와 개발자가 함께 아토믹 디자인 패턴을 이용하여, UI를 함께 쪼개고, 합치는 작업을 같이 설계 한다.
함께 설계 하고 작업하기 때문에, 일관된 디자인 시안과 일관된 개발 Component 가 개발되어, 이를 유지보수하기 쉽고 일관된 디자인 형태를 사용자에게 제공 할 수 있게 된다.
아토믹 디자인 패턴 은 보면 볼수록 매력적인 패턴인 것 같다. 더욱 연습을 통해서 정진하도록 노력해야 겠다.
Declarative UI Patterns
네번째 세션은 Declarative UI 를 설명해 주시고 왜 Flutter 가 Declarative UI 로 구현 하였는지를 소개해 주셨다.
Android 나 iOS 에서는 UI 작업을 할때 절차적으로 모양을 잡고 색상을 적용하는 등의 과정을 설정하여 UI를 구현한다.
Declarative UI 에서는 화면을 어떻게 생겼는지에 집중하고, 과거에 어떤 상태였는지 상관없이, 상태를 이용해 화면을 구성한다. 과정보다는 결과를 중요하게 생각한다고 한다.
Declarative UI framework 인 Flutter 에서는 렌더는 프레임워크에게 맞기고 화면을 구성해야 하는 요소들만 제공하여, UI가 제작되는 과정을 개발자로 부터 해방시킨다.
개발자는 더 중요한 부분에 집중하므로써 적은 코드와 집중이 높아지는데 이를 위해서는 State 관리가 중요해 진다.
Flutter 는 React 로부터 많은 영감을 받았기 때문에, 많은 부분이 닮아 있다고 한다.
Flutter 는 모든 스타일부터 Component 까지 모두 Widget 으로 되어 있으며, Widget 를 가지고 Render tree 를 만들어 내는데, 이전 상태와 비교하여 변경된 영역만 다시 UI 를 그려낸다.
이러한 Declarative UI 는 Flutter 에만 국한되어 있지않고, React, Jetpack compuse, SwiftUI 에서도 도입을 검토 하거나 구현되어 있다고 한다.
Flutter 는 참 매력적인 Framework 이다. 아직은 사용성이 불편하지만 무궁무진한 가능성이 숨어 있는 Framework 인것 같다.
테스트 관점으로 아키텍처 완성하기
다섯번째 세션은 기존의 아키텍처에 테스트를 적용했던 삽질기를 소개해 주셨다.
테스트란 원하는 동작을 연계해서 값이 원하는 형태로 반환되는지를 검증하는 방식이다.
기존의 아키텍처에는 의존성을 가진 Class 나 platform 에 의존되어 있는 동작들 (ex: Alert) 이 없거나,동작되지 않아서, 테스트를 어렵게 만들었다고 한다.
Testable Architecture 를 위하여 의존성 객체는 생성시점에 모두 주입받고, 의존되어 있는 동작들은 모두 Wrapping Class 로 감싸서 테스트 가능한 구조를 만드셨다고 한다.
이러한 Testable Architecture 는 가독성과 변경 유연함을 얻을 수 있었는데, 특히나 테스트를 통해서, 동작을 확인이하고, 변경 유연성을 확보하며, 테스트 코드에 의도를 명시화화여 코드 리뷰를 돕게 만드는 장점들을 얻을 수 있으셨다고 한다.
이를 팀적으로 적용하기 많은 시행착오가 있으셨는데, 쉬운것부터 차근차근 시도하며, 익숙해지지 위해서 강제성을 두시고 작업하셨다고 한다.
테스트의 중요성은 아무리 강조해도 부족하지 않은것 같다.
마무리
이번 GDG DevFest 2019 는 재미 있는 세션이 많았던것 같다.
특히 WebGPU 는 매우 기대되고 꼭 다시 공부해서 정리해 보고 싶다.
내년 GDG DevFest 에도 꼭 다시 참석하고 싶다.
