발표자
노지연
덕질하다 만들게 된 "내 맘대로 JavaScript 시각화 컨텐츠"
BTS 아미로서 덕질의 일환으로 시각화 컨텐츠를 만든 이야기를 들려드립니다. 넘치는 데이터 속에서 보여주고 싶은 아이디어만 있다면 JavaScript로 데이터 수집부터 시각화까지 할 수 있습니다. 스토리텔링으로 전달되는 주제와 지표를 선정하고, 어떤 시각화 차트로 보여줄지, 시각화 컨텐츠를 만든 과정을 공유합니다. 차트 하나를 만드는건 어렵지 않지만 완성된 차트가 좋은 시각화인지 고민이 될 때 터득한 방법도 함께 소개합니다. 혼자보단 공유하면서 배우고 같이 발전하면 즐거우니까요!
전우진
잃어버린 UI를 찾아서: 디자인시스템 개발기
자원과 시간은 한정되어 있고 때문에 모든 일은 효율성을 중요하게 생각합니다. 그리고 우리는 그것을 코드를 통해 실현합니다. 작성한 코드를 재사용하고 간결하게 유지하며 또 나의 결과물이 동료게 쉽게 이해될 수 있도록 노력합니다. 하지만 시스템이 커질수록 또 동료가 많아질수록 우리가 만들어놓은 결과물은 의도와 다른 모양으로 진화하기 시작합니다. 같은 UI의 컴포넌트가 기능이 다르다거나 같은 기능을 하는 컴포넌트의 UI가 다르다거나 심지어 같은 기능, 같은 모양의 컴포넌트를 중복해서 만들기도 합니다. 이렇게 파편화된 UI/UX 컴포넌트들을 일원화 하기 위해 진행한 카카오 통합검색 디자인시스템 프로젝트의 경험을 나눕니다.
밀레시아 맥그리거
자바스크립트와 머신러닝으로 VR에 날개 달기
자바스크립트에 익숙하다면 여러분은 지금 바로 VR 애플리케이션을 만들 수 있습니다. VR 앱을 만들고 나서는 한 걸음 더 나아가 Brain.js를 추가할 수도 있습니다. 이를 통해 사용자가 앱과 어떻게 인터랙트하는지 파악하고, 이를 바탕으로 실시간으로 UI를 업데이트할 수 있습니다. 이 발표에서는 VR 앱을 제작하기 위한 첫걸음과 Brain.js를 이 VR 앱에 연결하는 방법, 그리고 이를 활용해 앱의 접근성과 흥미를 향상시킬 수 있는 방법을 알려드립니다. 머신러닝과 VR에 관한 배경지식을 짧게 다룬 후, 배운 내용을 라이브 데모로 보여드립니다. 이 발표를 통해 실제 사용 가능한 앱을 만드는 법을 배워가실 수 있습니다.
이은재
오픈 소스 라이브러리를 배포해봅시다
우리는 오픈 소스 라이브러리를 배포할 때 여러 문제에 직면합니다. 실수를 하기도 하고, 배포하는 동안 아무것도 못하고 기다려야 하며, 혼자 불안에 떨며 진행합니다. 좋은 툴이 많이 있지만, 여전히 해결되지 않는 문제들이 있습니다. 그래서 새로운 배포 프로세스를 제안합니다. 이 프로세스에서는 실수를 만들 가능성이 획기적으로 줄고, 배포 프로세스의 대부분이 비동기로 진행되며, 배포 전에 동료와 같이 리뷰할 수 있게 됩니다. 그리고 이 프로세스를 위해 만든 툴인 Ship.js 도 소개하려 합니다. 새롭게 재정의 된 프로세스 안에서 두려움을 떨쳐버리고 지속적으로 배포를 해봅시다.
아누라다 쿠마리
접근성이 떨어지는 웹사이트? 자바스크립트의 잘못은 아니랍니다.
접근성은 웹의 고유한 측면입니다. 그럼에도 불구하고 자주 무시하게되거나 우선순위에서 밀리게 됩니다. 접근성을 둘러싼 많은 오해들 때문에 귀찮거나 어렵게 느껴집니다. 이 발표에서는 자바스크립트가 웹 사이트 접근성을 어떻게 증대시키거나 감소시킬 수 있는지 알아봅니다. 이 발표에서 배운 개념을 여러분의 프로젝트나 프레임워크에 적용하여, 누구나 인터랙티브하고 접근성 있는 인터페이스/웹사이트를 만들 수 있도록 하는 것을 목표로 합니다.
벤 데크라이
비밀번호에겐 작별을, WebAuthn에게 안녕을!
우리는 온라인에서 하루에도 수십번 우리의 아이덴티티를 증명합니다. 하지만, ';--have i been pwned?에 등록된 100억 개에 달하는 개인 정보 유출 건수가 보여주듯, 이 식별 과정에는 치명적인 약점이 있습니다. 바로 비밀번호입니다. Web Authentication API(또는 WebAuthn)는 "서버가 비밀번호 대신 공개키 암호화를 사용하여 사용자를 등록하고 인증할 수 있도록" 해주는 W3C와 FIDO의 표준입니다. WebAuthn은 서버와 브라우저와 인증자 간에 비밀번호 없이도 인증을 가능케 하는 여러 표준 중 하나로, 모든 현대 브라우저에서 지원됩니다. 이 발표에서는 WebAuthn이 어떻게 작동하는지, 그리고 여러분이 직접 이 기술을 활용하여 어떻게 사용자에게 훨씬 안전한 온라인 경험을 제공해줄 수 있는지 설명합니다.
유저스틴
퇴근 후 집 도착 10분 전, 집 안 거실의 에어콘을 켜고 싶어서 삽질한 썰
어느 무더운 여름날, 퇴근 후 집에 돌아갔을 때 화려한 조명 대신 시원한 에어콘 바람이 나를 감싸주길 바라나요? 집에 도착하기 딱 10분 전에 에어콘이 미리 켜져서 돌아가고 있다면 참 좋을텐데, 이걸 어떻게 한다? 집 안의 네트워크에서 라즈베리 파이와 서버리스 애플리케이션을 연동하고, 집 밖의 클라우드 서비스에서 이를 호출하면 모두가 행복한 세상... 이라고 생각했지만, 만만치 않았습니다. 이 과정에서 배웠던 경험들을 공유하고 싶습니다.
서재원
코드 인수분해 — 보일러플레이트 코드 정리하기
보일러플레이트 코드(boilerplate code, 반복적으로 사용되는 코드)는 불필요하게 프로그래머의 뇌를 점유하여 사고를 방해하는 요소입니다. 그렇기에 많은 책과 유명 프로그래머들은 보일러플레이트 코드를 지양하라고 이야기하고, 프로그래머들은 상속과 추상화를 비롯한 온갖 방법을 통해 보일러플레이트 코드를 피하기 위해 노력합니다. 하지만, 이런 부단한 노력에도 우리는 보일러플레이트 코드를 매일 마주치곤 합니다. 그리고, 가끔씩은 정말 어떻게 해야 할 지 모르겠는 ‘보스' 보일러플레이트 코드를 만나기도 합니다. 이런 끝없는 전쟁, 이제 지겹지 않으신가요? 그런 분들을 위해 준비했습니다. 보일러플레이트 코드들과의 전쟁에서 우위를 점할 수 있게 도와줄 ‘코드 인수분해’ 테크닉을요. 이 발표를 들으신 후에 여러분들은 당당히 선언할 수 있으실 겁니다. “왔노라, 보았노라, 이겼노라”
염인화 & 김성현
p5 for 50+: 중장년 및 노년층을 위한 코딩 교육
p5 for 50+(50대+를 위한 p5)는 2020 프로세싱 재단 펠로우십 프로젝트로, 한국의 중장년층과 노년층의 디지털 리터러시와 권리 향상을 목표로 시작되었습니다. 코딩 교육의 연령별 요구 사항에 맞춰 p5.js의 학습 장벽을 낮춘 웹 앱을 프로토타입했습니다. 이 발표에서는 접근성있는 코딩 교육을 위한 디자인 관점에서의 시사점에 대해 이야기합니다.
자이 산토시
모노레포에서 개발하기
저는 마이크로소프트에서 타입스크립트 기반의 대규모 git 리포지토리에 참여하고 있습니다. 여기엔 300명 이상의 개발자들이 Microsoft365 제품군에 걸친 모든 프론트엔드 기능을 개발하고 빌드합니다. 약 150가지의 npm의 패키지가 사용되고, 100만 줄 이상의 TypeScript 코드로 구성되어 있습니다. 이러한 컴포넌트들을 코로케이션(co-location)함으로써 팀 끼리의 협업 및 코드 공유가 훨씬 쉬워질 수 있습니다. 이 발표에서는 개발이 쉽고 빠르고 안정적으로 진행되기 위해 필요한 도구와 코드 정리 방법에 대해 이야기합니다. 특히 가장 골치아픈 패키지 관리와 여러 패키지에 걸쳐 공통된 작업을 조정하는 문제를 집중적으로 다룹니다.