지난주 화요일인 9월 3일 삼성역 코엑스에서 열린 JSConf Korea 2019에 다녀왔다. 너무나 감사하게도 장학생의 신분으로 이번 행사를 다녀오게 되었다. 나는 개발 공부를 혼자 하면서 개발에 관련된 행사를 많이 참여하려고 노력하는데 현업에서 이미 일하고 계시는 분들과 만날 기회를 가질 수 있기 때문이다. 그래서 늘 행사 소식을 기대하고 있던 중 한국에서 JSConf가 열린다는 이야기를 들었다. 베를린, 부다페스트, 싱가폴 등에서 열렸던 컨퍼런스라 알고 있었지만, 한국에서 그것도 처음으로 열린다니! 이번만큼은 꼭 가야겠다 싶어 찾아보고, 그 결과 장학생으로 선발되어 컨퍼런스부터 애프터 파티까지 참석할 수 있게 되었다. 얻은 게 많았던 컨퍼런스였던 만큼 꼭 기록해두자 싶어 적게 된 글이다.
컨퍼런스 입장 및 등록
이름과 메일로 전달받은 QR코드를 보여드리고 컨퍼런스룸 안으로 들어섰다. 안으로 들어서니 복도에 카카오, 우아한 형제들, 야놀자, 하이퍼 커넥트 등 많은 부스가 자리 잡고 있었다. QR코드를 찍고 설문조사를 하면 선물을 주시기도 하고, 회사 또는 회사의 채용에 관해서 설명해주시기도 하셨다. 등록만 하는 데 시간이 오래 걸리겠어? 하는 내 생각이 무색하게 부스를 돌아다니며 구경 하다 보니 1시간이 훌쩍 지나있었다. 노트와 볼펜부터 무선 충전기까지.. 컨퍼런스에 왔을 뿐인데 다들 선물을 한가득 들고 다니는 모습에 웃음이 났다.
젠 크레이튼: 다마고치로 배우는 제네레이터
첫 번째 발표는 젠님의 개인 프로젝트로 다마고치를 만들면서 제네레이터를 제대로 사용하는 방법을 배웠던 이야기다. 다마고치에 필요한 애니메이션은 컨버스를 이용해 만들고, context.clear()로 애니메이션을 초기화해서 그려진 후에는 항상 clear했다. 문제는 다른 애니메이션이 완료된 사실을 현재 애니메이션에 어떻게 알릴지, 그리고 애니메이션을 큐잉 해 뒀는데 사용자 이벤트가 처리되어야 할 때 어떻게 할지에 대한 것이었다. promise만으로 모든 것을 처리하려고 하다 보니 promise가 callback hell을 유발하는 것을 알게 되었다. 애니메이션을 중단하고 이벤트를 처리해야 하는 이 문제는 Generator를 이용하면서 해결되었다. yield를 사용해 제네레이터 함수의 실행을 일시적으로 중단하는 게 가능해졌기 때문이다.
제네레이터가 중단된 후 재개하기 위해서는 외부에서 호출해야 하는데 그 문제는 coroutines으로 해결했다. conroutines는 제어 흐름이 서로 다른 두 루틴 사이에 전달되는 제어 구조이다. 코루틴이 제네레이터가 스스로 재시작할 수 없을 때 대신 해결해주는 역할을 함으로써 제네레이터를 재실행 시킬 수 있다.
코드는 젠의 깃헙 레포에서, 발표 자료는 tamagotchis can teach you about ES6 generator에서 확인할 수 있다.
강 재석: Don't block the event loop! 매끄러운 경험을 위한 자바스크립트 비동기 처리
재석님께서 발표를 시작하면서 사용자 경험이란 사용자가 서비스에 대해 느끼는 감정이라고 생각한다고 말씀하셨다. 페이지가 멈추는 것, 스크롤이 안되거나 애니메이션이 깨져 보이는 문제 등은 누구나 겪어봤지만, 누구도 좋아하지 않는 사용자 경험중 하나일 것이다. 재석님은 이번 발표에서 input에 문자를 입력할 때마다 애니메이션이 갱신되어 화면에 나타나는 예시를 보여주셨다. 글자 수가 짧을 때는 매끄럽게 동작했지만, 글자 수가 길어지자 애니메이션이 버벅거리기 시작했다.
태스크는 이벤트 루프에 의해 순차적으로 실행된다. 그 말은 즉 어떤 태스크가 실행되고 있을 때에 다른 태스크가 끼어들 수 없다는 뜻이다. 마이크로 태스크 큐는 태스크 큐보다 우선순위가 높기 때문에 UI와 연관된 이벤트는 마이크로 태스크가 비워지기 전까지 실행될 수 없다. 렌더링, 클릭, input과 같은 UI와 직접적으로 연결된 태스크 또는 이벤트라면 좋지 않은 UI, UX를 초래할 것이다.
그렇다면 이러한 문제를 어떻게 해결해야 할까?
웹 워커는 메인 실행 스레드와 별개로 백그라운드 스레드에서 태스크를 실행 가능할 수 있게 해준다.
무거운 태스크는 백그라운드 스레드에서 처리하고 메인 스레드에는 워커 스레드에서 result값을 받아오면된다.
또 스케줄링으로 값비싼 태스크를 작게 나눠 이벤트가 블록 되지 않도록 하자.
코드는 재석님의 깃헙 레포에서, 발표자료는 Don't block the event loop에서 확인할 수 있다.
에런 스노버거: 자바스크립트로 쇼핑몰 만들기
컨퍼런스 안내메일을 받으며, 튜토리얼을 등록할 수 있다는 얘기를 들었다. 혼자 공부를 해오던 터라 오프라인 튜토리얼을 꼭 한번 경험해보고 싶다는 생각이 들어 등록하게 되었다. 에런님은 고등학생들을 상대로 수업을 주로 해오셔서, 아주 기본적인 것부터 천천히 알려주는 것에 익숙하다고 하셨다. 그래서 HTML, CSS, JavaScript를 사람의 몸으로 비유한 일러스트를 보여주시기도 하고 기본적인 용어부터 알려주셔서 고등학생이 된 기분으로(?) 가볍게 들을 수 있었던 것 같다. 주어진 시간은 1시간 30분 정도 남짓이었기 때문에 직접 처음부터 코딩을 할 수는 없었고, 코드펜에 이미 HTML과 CSS로 뼈대가 잡혀있으면 원하는 기능만 자바스크립트로 작성을 하는 형식으로 튜토리얼이 진행되었다. 자바스크립트 코드 진행 목차는 아래처럼 이루어져 있다.
첫번째, Shopping List만들기. 들어가는 기능으로는 쇼핑 리스트를 추가하고 삭제할 수 있는 버튼 만들기가 있다. 두번째, Change Screens. 옆으로 밀어서 삭제하기, 토스트 알람 만들기, input필드에 입력하면 스크린에 입력한 문구가 뜨게 만들기등의 기능을 이곳에서 추가한다. 세번째, Store 페이지. 쇼핑리스트에 추가한 데이터 가져오기, 필터 적용하기, 장바구니에 넣기가 있다. 마지막으로, Cart 그리고 Check Out. 가격 계산하기, 체크아웃 모달을 이곳에서 추가한다.
직접 튜토리얼을 따라가볼 수 있는 코드펜의 예제는 에런님의 홈페이지에서 확인할 수 있다.
cloneNode()를 사용해서 전혀 다른 페이지로어팬딩하는것, mutation observer을 이용해 event를 들을 수 없는 태그에 이벤트 입력하는 것. 이 두 가지가 기억에 남는다. 튜토리얼 자료를 보면 JS 코드가 들어있지 않은 코드펜 링크와 이미 완성된 JS 코드가 있는 코드펜 링크 두 가지가 있다. 또 어떤 기능을 어떻게 만들어야 할지 힌트가 다 적혀있기 때문에 게임처럼 시간 날 때 해보면 좋을 것 같다! 시간이 모자라 완벽히 커버하지는 못했지만, 윗줄에 말했듯 집에서 처음부터 한번 해볼 생각이다.
이샤 카슬리왈: Typescript로 디자인 시스템에 날개 달기
디자인 시스템은 디자이너뿐만 아니라 개발자에게도 중요하다. 이샤님은 타입 스크립트가 어떻게 디자인 시스템에 영향을 미칠 수 있는지에 대해 발표를 하셨다. 디자인 시스템은 일관성 있는 패턴 라이브러리를 제공하고, 코드가 미리 작성되어 있는 컴포넌트 그리고 가이드라인, 리소스를 제공한다. 예시로 트위치의 디자인 시스템 페이지를 보여주셨는데 color palettes, design patterns, icon, components 등 다양한 리소스가 정리되어 있었다. 아이디어 구상하기, 디자인하기, 코딩하기, 제품화하기의 과정을 통해 탄생한 리소스는 개발자 그리고 디자이너가 필요할 때 꺼내 쓸 수 있게 만들어준다.
타입스크립트를 사용하면 optional static typing, classes, interface로 내가 만드는 컴포넌트의 의도와 한계를 전달할 수 있다. 인터페이스 지향 개발은 타입스크립트에 대해 표현한 훌륭한 말이다. IDE는 스마트 제안, 자동 완성 기능을 포함하고 있기 때문에 디자이너들이 편리하게 사용할 수 있고 개발자는 자동 완성 기능을 사용해서 하드 코딩을 할 필요가 없다. 또 타입스크립트는 비즈니스나 user trust에도 사용될 수 있고, 타이핑이 줄어들기 때문에 버그를 15%나 덜 유발한다고 한다.
form follows function, intent follow impact. 형태는 기능을 따라가고, 의도는 효과를 따라가게 된다.
이샤님은 트위치에서 UI/UX 디자이너이자 개발자로서 일하고 계신다. 나는 디자인과 개발 모두 관심이 있기 때문에 이샤님이 디자이너이자 개발자로서 일하고 계신다는 사실을 듣고 무척 흥미로웠다. 개발 공부를 하면서 나도 모르게 아닌걸 알면서도 디자인과 개발은 별개라는 생각을 했던 것 같다. 발표를 듣고 나니 개발과 디자인은 별개가 아닐뿐더러 개발자와 디자이너가 힘을 합치면 일을 하면서 서로 도와줄 수 있다는 점도 흥미로웠다.
비탈리 보브로프: The Man who Sold the Amp 자바스크립트로 음악 처리하기
마지막 발표는 브로츠와프에서 온 비탈리님의 자바스크립트로 음악 처리하기다. 비탈리님은 학교를 다닐 때 펑크랑 밴드부에서 연주하셨다고 한다. 비탈리님은 전자 기타를 가지고 오셨는데 어떻게 자바스크립트와 이 전자 기타를 연결할 수 있을까 하는 궁금증이 생겼다. 연결하는 것을 넘어서, 기타 소리(input)에 원하는 음향 효과를 주고 앰프로 송출은 어떻게 할까?
먼저 악기와 랩탑을 연결할 오디오 인터페이스가 필요하다. 장치를 구매해 랩탑과 악기를 연결했다면, 시스템 오디오 입력 및 출력 설정을 확인하면 된다. 사용자 오디오 입력을 요청하기 전에 노드를 작성하고, 컨텍스트를 반환하는 생성자를 사용해 오디오 컨텍스트를 작성해야 한다. 오디오 컨텍스트를 만든 후에 사용자 입력을 요청하면 짠, 브라우저를 통해 기타 소리를 들을 수 있다.
그럼 이제 Web Audio API를 사용해 이퀄라이저를 구현해보자. 기타 캐비닛을 시뮬레이션하려면 실제 장치에서 녹음된 짧은 샘플을 기타 사운드에 적용해야 한다. 그 샘플을 임펄스 응답(IR)이라고 한다. 그렇다면 어떻게 임펄스 응답을 오디오 스트림에 적용할 수 있을까? Convolver Node를 사용하면 된다. IR을 로드하고 Convolver Node에 적용하는 것이다. 마지막으로 추가할 기능은 Three Band Equalizer이다. 출력되는 음향의 톤 그리고 저음부터 고음까지의 주파수를 컨트롤할 수 있게 해주는 기능이다. Biquad Filter Node로 웹 오디오를 사용해 컨트롤 할 수 있다. 그렇게 탄생한 비탈리님의 연주 모습을 첨부한다.
비탈리님의 발표자료는 The Man who Sold the Amp에서 확인할 수 있다.
자바스크립트를 통해 현실에 있는 사물이 아닌 웹앱을 만드는 것에 익숙해져 있었던 나는 이 발표를 통해 다시 한번 자바스크립트로 무엇을 할 수 있는가에 대해 생각하게 되었다. 개발자라면 누구나 들어봤을 세상을 좀 더 나은 곳으로 변화시킨다는 말이 결코 진부한 말이 아니라는 것을 다시 한번 느꼈다. 내 손으로 직접 이퀄라이저를 만들고 악기를 연주할 수 있다면 그건 분명 엄청난 일일 것이다.
마무리
튜토리얼을 듣느라 참여하지 못했던 발표들, 그리고 참여했지만 인공 지능 등 낯선 분야의 이야기를 듣느라 정신이 없어 기록하지 못했던 발표를 제외하고 들었던 발표를 요약해서 기록해보았다. 솔직하게 말하자면 1회라는 것이 믿기지 않을 정도로 모든 세션이 유연하게 진행되었고, 실시간 한글 자막 타이핑 서비스 등 놀라운 것이 많았다. 장학생으로 선발된 게 7월이고 그때 이미 시간표가 나와 있었으니 적어도 수개월 전부터 컨퍼런스를 준비했음을 알 수 있었다.
덕분에 정말 감사하게도 다녀온 이번 컨퍼런스에 참여하고 느꼈던 점은 진행되는 세션들, 그리고 컨퍼런스에서 만난 사람들과의 교류를 통해 키워드를 얻을 수 있었다는 것이다. 혼자 공부하면서 '이걸 공부하는 게 맞나?' 하는 궁금증이 생겼던 적이 많았다. 그리고 역시나 혼자 내렸던 결론은 높은 확률로 틀렸을 때가 많았다. 그런 점에 있어서 앞으로 어떤 것을 더 공부해야 할지 알 수 있게 된 계기가 아니었나 싶다.
또 이런 경험을 할 수 있게 해주신 오거나이저분들, 행사를 위해서 몇 달 동안 준비하신 스태프분들에게 감사의 말씀을 전하고 싶다. 특히 장학생으로 선발된 후에 하나부터 열까지 세심히 챙겨주신 오거나이저 수진님, 처음 행사장에 도착해 멀뚱멀뚱하게 서 있을 때 다가와 주셨던 카카오의 지인님, 취준생의 이야기를 들어주시고 좋은 얘기도 많이 해주신 비동기 처리의 발표자 재석님, 애프터 파티에서 만나 좋은 인연으로 이어진 women who code의 연우님, 보라님까지 고마운 분들을 너무 많이 만났던 컨퍼런스라 잊지 못할 것 같다 :)
글에서 수정해야할 부분이 있다면 thanks.suzie@gmail.com으로 제보해주세요.