안녕하세요. LINE UIT 팀 송헌용, 정재광입니다. 저희는 지난 9월 16일과 17일 이틀간 열린 JSConf Korea 2022에 LINE 후원으로 참여했습니다. JSConf는 JavaScript 커뮤니티를 위해 자원봉사자들이 주최하고 운영하는 글로벌 IT 콘퍼런스입니다. JSConf Korea 2022는 한국에서 열린 JSConf 콘퍼런스로 노들섬의 다목적 홀 숲에서 열렸습니다. 코로나 때문에 규모는 지난번보다 작아졌지만, 더욱 알찬 내용으로 보다 친밀한 분위기에서 운영됐습니다. 이번 글에서는 JSConf Korea 2022 행사 분위기 및 부스 운영 후기와 함께 JSConf Korea 2022에 참석한 다른 LINER의 이야기를 공유하고자 합니다.
행사 분위기
여러 기업에서 홍보 부스를 열고 참여한 덕분에 행사장 곳곳은 흥미로운 것들로 가득 채워져 있었습니다.
특히 기억에 남았던 것은 행사 참석자들이었습니다. 세션 발표자를 비롯해 스태프와 참석자 중 외국인 비율이 상당히 높았고, 외국 회사에서 근무하는 한국인들도 많이 만나볼 수 있었습니다. 덕분에 부스에서 다양한 굿즈를 전달하면서 다른 국가의 개발 문화를 전해 들으며 그들의 고민에 대해 함께 이야기할 수 있었습니다. 아주 흥미로운 시간이었습니다.
기억나는 에피소드를 하나 공유드리자면, Google에서 프런트엔드를 개발하시는 분을 만나 서로 오픈소스 개발 경험을 공유했습니다. LIT라는 UI 라이브러리를 개발한다고 하시면서 외부 사용자의 개선 요청 및 새로운 기획, 개발 진행 요청 등 자신의 현재 고민거리를 공유했는데요. 마침 저희 팀에서도 UVP(Universal Video Player)라는 사내 오픈소스를 개발하고 있던 터라 이야기를 들으며 깊이 공감할 수 있었습니다.
또한 LINE의 프런트엔드 개발 팀에 대한 질문도 많이 받았습니다. 프런트엔드 개발 팀 인원은 몇 명인지, 주로 어떤 프로젝트를 진행하는지 등 조직이나 업무와 관련해 다양한 질문을 받았습니다. 혹시 UIT 팀과 LINE에 관심 있으시다면 아래 링크에서 더욱 자세한 정보를 얻을 수 있으니 참고하시기 바랍니다.
세션 참석 후기 공유
다음으로 JSConf Korea 2022에 참여했던 UIT 팀원들의 세션 참석 후기를 공유하겠습니다.
- INP(Interaction to Next Page)를 이해하고 최적화하기
- React로 영수증 출력해 보기: 자바스크립트로 POS를 만든다고?
INP(Interaction to Next Page)를 이해하고 최적화하기
안녕하세요. LINE UIT 조직에서 프런트엔드 개발을 하고 있는 정아연입니다. JSConf Korea 2022 Day1에서 가장 인상 깊었던 Jeremy Wagner의 세션을 소개하겠습니다. 발표자인 Jeremy Wagner는 웹 개발자로 웹과 관련한 책을 집필하고 있습니다. 이번 세션에서는 INP가 무엇인지 이해하고 이를 최적화하는 방법을 공유해 주셨습니다.
INP란 무엇인가?
INP는 반응성을 평가하는 실험 지표로 사용자가 페이지에서 수행한 모든 활동의 지연시간을 측정합니다. 페이지에서 발생한 모든 클릭과 탭 입력, 키보드 입력과 같은 상호작용을 측정해서 페이지의 전반적인 응답성을 측정하는 것이 목표입니다. 사용자가 페이지를 방문했을 때 발생하는 모든 이벤트 중 가장 오랜 시간이 걸린 이벤트를 기준으로 페이지의 상호작용이 지연된 시간을 측정합니다.
좋은 INP 값은?
사용자에게 시각적으로 빠르게 피드백하면 사용자는 자신이 발생시킨 이벤트에 대한 페이지의 응답이 빠르다고 느낍니다. 이런 INP 값은 낮을수록 좋습니다. 페이지와 사용자 간의 이벤트 흐름에서 지속적으로 신속하게 대응할 수 있었다는 것을 의미하기 때문입니다.
어느 정도가 좋다 혹은 나쁘다고 평가하는 것은 어려운 일이지만 대략 기준을 정해보자면 INP가 200밀리초 이하일 경우 페이지의 응답성이 좋다고 판단하며, 500밀리초 이상일 경우에는 페이지의 응답성이 나쁘다고 판단하고 있습니다.
INP를 측정하는 법
INP를 측정할 수 있는 툴은 여러 가지가 있으며 크게 필드 툴과 랩 툴로 나눌 수 있습니다. 필드 툴로는 PageSpeed Insights와 Chrome User Experience Report(CrUX)가 있습니다. 이 툴들을 이용하면 쉽게 INP를 측정할 수 있습니다. 랩 툴을 이용하는 방법으로는 개발자 도구의 Lighthouse를 이용하는 방법과 Chrome에서 Web Vitals를 설치해 측정하는 방법이 있습니다.
INP를 개선하는 법
Jeremy Wagner는 INP를 개선하기 위한 다음과 같은 방법을 공유했습니다.
- Chrome Coverage 도구를 이용해 사용하지 않는 코드를 제거한다.
- 페이지를 로드할 때 필요 없는 JavaScript 코드는 천천히 로드할 수 있도록 한다.
- 페이지를 시작할 때 로드될 수 있는 서드 파티 JavaScript가 지연시간을 늘리고 있지 않은지 확인한다.
- 성능 프로파일러를 사용해 시간이 오래 걸리는 작업을 찾아서 최적화한다.
- 렌더링 작업과 관련해 브라우저에 비용이 크고 많은 작업을 요청하지 않도록 한다.
- postTask API를 활용해서 작업 우선순위를 지정한다.
이번 세션을 통해 좋은 웹 페이지란 무엇인지 생각해 볼 수 있었고 웹 개발자가 가져야 할 태도에 대해서도 느끼는 바가 많았습니다. 또한 LINE에서도 지속적으로 웹 성능을 측정하고 있기 때문에 세션을 듣는 중간중간 일하면서 고민했던 시간들이 떠올랐습니다. 앞으로 개발하는 서비스의 INP를 측정해 보고 더 나아가 향상시킬 수 있는 방안을 고민해 보고 싶다는 생각이 들었던 유익한 시간이었습니다.
React로 영수증 출력해 보기: 자바스크립트로 POS를 만든다고?
안녕하세요. UIT 조직에서 프런트엔드 개발을 하고 있는 김찬희입니다. 개발 관련 콘퍼런스에 참석하는 것이 이번이 처음이어서 기대를 많이 했는데요. 기대한 만큼 알차고 좋은 행사였습니다. 여러 나라에서 오신 연사분들이 다양한 주제로 세션을 진행해 주셨고, 외국어를 잘하지 못하더라도 내용을 듣는 데 지장이 없도록 동시통역을 음성과 자막으로 제공한 점도 인상 깊었습니다.
여러 세션 중에서 인상 깊게 보았던 세션 중 하나는 나석주 님의 'React로 영수증 출력해 보기: 자바스크립트로 POS를 만든다고?'였습니다. 영수증 출력에 React를 어떻게 이용했는지 공유해 주셨는데 시리얼 통신을 사용하는 JavaScript 기반 제품을 처음 접해 흥미롭게 들었습니다.
영수증을 출력하기 위해 열전사 프린터와 통신하기
POS는 보통 영수증을 출력하기 위해 사용하는 열전사 프린터와 RS-232 표준을 따르는 시리얼 포트로 통신하며, 일반적으로 사용하는 통신 속도는 115200bps입니다. 이때 시리얼 통신을 하기 위한 시리얼 포트를 JavaScript를 사용해 제어하는데요. Node 환경에서는 Node SerialPort 라이브러리를, 브라우저 환경에서는 Web Serial API를 사용할 수 있습니다. 나석주 님은 Web Serial API를 사용하셨다고 합니다.
Web Serial API를 사용해 열전사 프린터와 통신할 때는 영수증 출력에 필요한 데이터를 JavaScript에서 제공하는 typed array인 Uint8Array를 사용해 전송합니다. 여기에 출력할 텍스트를 ASCII나 EUC-KR 등으로 인코딩해 담고, 출력과 같은 프린터 제어 명령어에 해당하는 바이너리 데이터를 담아 보냅니다.
편하게 출력하기 위해 시도해 본 방법들 - Printer 클래스 사용하기
프린터로 출력할 데이터를 매번 Uint8Array로 변환하는 것은 무척이나 번거로운 일입니다. 조금 더 편리하게 작업하기 위해 처음에는 Printer 클래스를 만들어 사용하셨다고 합니다. 대부분의 프린터 관련 오픈소스들이 채택한 방식입니다. Printer 인스턴스 메서드를 호출해 텍스트, 길이, 정렬 방식 등에 해당하는 바이너리 데이터를 쌓고 나서 getData와 같은 메서드를 호출해 Uint8Array를 얻습니다. 이 방식으로도 꽤 편리하게 영수증을 출력하기 위한 데이터를 생성할 수 있었지만, 어떻게 출력될지 한눈에 파악하기 힘들다는 문제가 있었습니다.
편하게 출력하기 위해 시도해 본 방법들 - JSX를 사용해 선언형으로 영수증 작성하기
나석주 님은 Printer 클래스를 이용한 방법의 단점을 극복하기 위해 선언형으로 작성할 수 있고 영수증이 어떻게 출력될지 파악하기 쉬운 JSX를 이용했다고 말했습니다. 텍스트와 명령어를 컴포넌트로 만들고 커스텀 렌더러가 컴포넌트를 순회하며 Uint8Array로 변환하도록 구현했다고 합니다. 이를 통해 선언형으로 영수증을 작성할 수 있었고, 출력되는 대략적인 형태를 쉽게 파악할 수 있었으며, 또한 DOM으로도 쉽게 렌더링할 수 있기 때문에 미리 보기 페이지를 제공하는 것도 편리해졌다고 합니다.
영수증 출력 작업을 UI를 만드는 작업으로 생각해서 JSX를 이용해 보겠다는 아이디어를 떠올리셨다는 점이 인상 깊었습니다. 또한 자신이 활용한 것에서 끝내지 않고 다른 프로젝트에서도 사용할 수 있도록 라이브러리로 만들어 npm에 배포하신 것을 보고 본받고 싶다는 생각이 들었습니다.
이 밖에도 최종찬 님의 '웹뷰와 네이티브를 제대로 이어붙이기 - Webview Request Protocol' , Jeremy Wagner 님의 'INP(Interaction to Next Paint)를 이해하고 최적화하기' 등 흥미로운 세션들이 많았습니다. 새로운 것들을 많이 접할 수 있었고, 세션 사이사이 시간과 애프터 파티에서 다양한 개발자들과 만날 수 있었던 뜻깊은 시간이었습니다.
마무리
행사 중 만난 한 분이 저희 부스에 들러서 대만에서 생활하고 있는데 LINE 앱을 매일 쓰고 있다고 전해주셨습니다. 덕분에 LINE 임직원으로서 좀 더 책임감을 가져야겠다는 생각과 함께 뿌듯함도 느낄 수 있었습니다. 앞으로도 이런 행사에 자주 참여해 다양한 문화권의 사람들과 개발 이야기를 나눌 수 있기를 바랍니다.
마지막으로, 저희와 함께 프런트엔드 개발 기술 역량을 키워가며 다양한 서비스를 경험해 보고 싶으신 분들은 아래 채용 공고를 확인해 보시기 바랍니다.