2022 JSConf Korea 후기
서론
https://2022.jsconf.kr/
역시 자바스크립트 컨퍼런스답게 웹사이트가 아주 인터렉티브하고 멋있다. 3D 입체 형태로 된 구 모형을 따라 여러 도형들이 떠다니고, 마우스를 올리면 팡팡 터지면서 해당 도형이름의 메서드가 보여진다.
어떻게 만들어진걸까 궁금해서 개발자도구를 켰는데 나에게 인사해주는 jsconf,,👋👋
이런 멋진 인터렉션을 구현할 수 있는 것도 멋있지만 이런 아이디어를 떠올릴 수 있다는 게 대단한 것 같다. 예술작품같은 웹사이트를 감상하고나니 새삼 js로 만들 수 있는 것이 무궁무진하다는 생각이 들었고 이번 jsConf에 꼭 참여하고싶었다.
나의 목표
컨퍼런스 티켓만 구매할 수도 있고, 두 개의 워크샵 중 하나를 선택해 신청할 수 있었다. 나는 최근 회사에서 진행했던 업무 중 딥링크를 다루는 작업에서 매우 힘들었던 기억이 떠올라 워크샵 참여를 통해 좋은 인사이트를 얻을 수 있을것 같아 딥링크 솔루션 직접 만들어보기 워크샵을 신청했다.
나는 웹사이트에서 여러 세션들을 구경하며 내가 지금까지의 자바스크립트로 개발하며 접했던 부분들에 대한 세션을 통해 해당 분야에 대한 이해도를 높이고, 접하지 못했던 분야를 경험하며 자바스크립트로 구현할 수 있는 다양한 기술들을 습득하고싶었다.
특히, ‘딥링크 솔루션 직접 만들어보기 워크샵’을 통해 내가 회사에서 진행했던 딥링크 작업에 대해 더 깊이 이해하고 딥링크 전문가(?)이신 발표자님께 이것저것 궁금했던 것들을 질문하고싶었다. 그리고 ‘아무도 이야기하지 않는 웹 성능 지표의 비밀’ 세션을 통해 웹 성능 지표에 관한 세션을 통해 웹사이트의 성능을 측정하는 방법에 대한 좋은 인사이트를 얻고싶었다.
그리고 기술 외적으로는 다른 회사의 개발자분들과의 네트워킹과 대부분 개발자이실 다른 참여자분들에게 좋은 기운을 얻어 개발자로서 일하는 데 있어서 더 성장할 수 있는 동력을 얻고싶었다!
세션
아무도 이야기하지 않는 웹 성능 지표의 비밀
일반적으로 한국에서 만들어진 앱이 타게팅하는 유저들의 인터넷 환경은 대부분 빠르고 안정적이다. 하지만 안정적이지 않은 네트워크 환경에서 우리의 앱을 사용하는 유저들에게 우리의 앱은 다소 불친절하거나 불편할 수 있을 것이다. 안나미가스님께서는 발표를 통해 보안이 부족하거나 안정적이지 않은 네트워크 환경에 있는 사람들을 대상으로 서비스를 제공했던 경험을 통해 어떻게 하면 유저가 서비스를 잘 이용하도록 할 수 있는 지에 대한 노하우를 전달해주셨다.
최근 스플에서도 비슷한 이슈가 있었다. 글로벌 유저에게 서비스를 제공하기 위해 다국어 작업을 진행하고 글로벌 유저를 타겟으로 마케팅 캠페인을 집행했는데, 대부분의 글로벌 유저들이 작품에 진입하지도 못한 채 이탈을 해버린 것이다. 이번 이슈에 대한 정확한 원인을 알기는 힘들었지만, 우리는 작품 페이지에 접근하는 데 오랜 로딩 시간이 소요되기 때문인 것으로 결론을 내리고 웹사이트의 성능을 개선하는 작업을 진행한 경험이 있었다.
이번 발표에서는 웹사이트의 성능을 측정하는 새로운 지표인 ‘사용자의 인내심’에 대해 알 수 있었다. 사용자의 인내심이란 유저가 해당 웹사이트의 로딩 시간에 얼마나 오랜 시간을 할애할 수 있을 것인지에 대한 지표였다. 그리고 네트워크 환경이 불안정하고, 오래된 낮은 성능의 디바이스를 사용하는 유저일수록 그 인내심이 높을 것이다.
그러나 만약, 사용자의 인내심이라는 지표까지 고려하고서도 웹사이트의 성능이 낮다면, 어떤 것을 할 수 있을까?
- Visibility of system status 현재 어떤 작업이 진행되고있는지, 또 얼마나 걸릴 지를 사용자에게 보여준다. 혹은 에러가 발생했다면, 어떻게 해결할 수 있을지(ex)새로고침, 특정 버튼 클릭 등등)
- Render initial information ASAP 첫 페이지, 또는 페이지의 주요한 정보를 최대한 빨리 렌더링한다. 예를 들면, 홈 화면에서 카테고리 영역의 UI를 먼저 렌더링하여 특정 카테고리의 정보를 원하는 사용자가 우선적으로 해당 카테고리를 클릭하여 불필요한 데이터가 로딩되는 시간을 줄인다.
- Avoid request chaining and roundtrip browser hint를 이용해 불러와야하는 데이터의 우선순위를 지정한다
등등등 총 9가지의 방법에 대해 소개해주셨다. 더 자세한 내용은 제목 링크에 걸어둔 슬라이드 참고! 웹성능을 측정하는 기준과 고려해야할 점들, 그리고 웹 성능이 낮은 경우 시도해볼 수 있는 여러 방법에 대해 정리되어있다.
딥링크 솔루션 직접 구현해보기 워크샵
에어브릿지의 엔지니어이신 최수범님께서 발표해주셨다. 얼마 전 회사에서 딥링크를 이용해 사용자를 앱 또는 앱스토어 페이지로 이동시키는 작업을 했었는데, 디바이스나 브라우저마다 동작이 조금씩 달라서 굉장히 힘들었던 기억이 있다. 결국 사용성을 완전히 해치지 않는 선에서 어느정도 불완전하게 동작하는 부분은 포기하고 작업을 진행했었다. 그래서 사실 나는 이 워크샵을 통해 내가 해결하지 못했던 일부 디바이스나 브라우저에서 불완전하게 동작하는 부분들을 해결할 수 있게 될 줄 알았는데.. 이 워크샵의 결론은 딥링크는 사서쓰자 였다 😂😂
웹 링크의 경우에는 표준이 정해져있다. 그래서 해당 웹사이트자체가 죽지 않는 이상 언제든 특정 URI를 입력해 해당 웹사이트로 이동할 수 있다. 하지만 앱 링크의 경우 정해진 표준이 없고 여러가지의 방법(URI 스키마, 유니버설 링크 등)이 있지만 모든 케이스를 대응할 수 있는 최적의 방법은 없다. 그래서 디바이스나 OS에 따라서 코드단에서 분기처리를 통해 엣지 케이스들을 처리해주어야한다.
워크샵에서는 이러한 엣지케이스들을 하나하나 해결해나가는 과정을 보여주셨는데 정말 존경스러웠다. 굉장히 다양한 케이스가 계속 추가되고, 단순히 추가되는 것이 아니라 해당 로직으로 인해 영향을 받을 수 있는 기존의 로직이 약간씩 수정되기도 하고,, 아무튼 딥링크를 직접 구현하는 작업은 왠만한 집요함과 끈기를 가지지 않으면 해결하기 어려운 문제였다. 그리고 수범님께서 이번 워크샵을 위해 100장이 넘는 발표자료를 준비해주셔서 워크샵이 끝나고도 슬라이드 자료를 통해 배웠던 내용을 되새기며 많은 것을 얻어갈 수 있는 시간이었다.
이외에도 ‘프론트엔드에서 함수형 추구하면 안되는걸까?’, ‘리액트에서 영수증 출력해보기’ 등등 흥미로운 주제의 세션들이 많았다.
느낀 점
접근성
모든 사람들이 편안하게 이 컨퍼런스를 즐길 수 있도록 여러 방면에서 신경써서 준비해주신 점이 좋았다. 동시통역 서비스를 비롯해서 실시간 자막, 아이와 함께 온 참여자를 위한 시설, 비건 음식을 원하는 사람들을 위한 비건 도시락, 음향 볼륨과 조명에 대한 구체적이 안내까지,, 모든 사람들의 안전과 편의를 고려해준 점이 좋았다.
네트워킹
컨퍼런스에 오면서 가장 기대했던 부분이었다. 사실 이곳에서 만난 일면식 없는 분들과 어쩌다 자연스럽게 대화도 해보고, 친해질 수 있으면 좋겠다라는 생각도 했지만 역시 이런 일이 실제로 일어나긴 힘들었다 ㅎㅎ 하지만 어쩌다 같은 부트캠프를 나온 분들을 우연히 만나 인사도 하고, 컨퍼런스 끝나고 맥주도 같이 마시면서 잘 모르던 회사들을 알게 되고 각자 업무에서 느끼는 고충들도 공유하며 이야기나눌 수 있었다. 그리고 모든 발표자분들의 트위터를 팔로우했다! 왠지 친해진 느낌😆😆
커뮤니케이션의 장벽
빠른 시일 내에 영어공부를 시작해야겠다. 입사 이후로 ‘영어 공부해야지~’라는 말을 입에 달고 살았던 것 같은데 아직까지도 아무것도 시작하지 않았다.. 발표자분들의 반 정도가 영어로 발표를 하셨고 동시통역 서비스와 실시간 자막이 제공되었지만 가끔은 한국어로 되어있는데도 알아듣기 어려운 문장들이 많았고 너무 답답했다. 평소에 개발을 할 때도 영어를 유창하게 할 줄 알았다면 문제를 해결하는 속도가 더 빨랐을텐데 하는 아쉬움을 늘 느끼고있었기에 이번 기회에 꼭 영어 공부를 시작해야겠다고 다짐했다 💪
