들어가며

안녕하세요. LINE UIT(User Interface Technology) Front-end Dev. 9팀에서 주로 LINE 스키마니(LINEスキマニ)와 LINE Creators Market 프런트엔드 개발을 담당하고 있는 Konosu입니다. UIT 조직에서는 사내 프런트엔드 엔지니어 근황 및 툴 이용 현황을 조사하기 위해 매년 사내 설문 조사인 'UIT Survey'를 실시하고 있습니다. UIT Survey는 2018년에 Ashley Nolan 님이 실시하는 Front-end Tooling Survey를 기반으로 시작해 올해로 5번째 진행하고 있는데요. 이번 글에서는 작년 11월에 진행한 2022년 UIT Survey 결과를 소개하겠습니다.

UIT Survey 개요

설문 조사 대상과 조사 기간은 다음과 같습니다. 

・ 대상: LINE 프런트엔드 엔지니어(한국, 일본, 베트남, 태국 조직 소속)
・ 응답자 수: 123명(약 70%가 일본 거점 엔지니어)
・ 조사 기간: 2022.11.22 ~ 2022.11.30
・ 질문과 응답은 모두 영어로 진행

UIT Survey 문항 구성

UIT Survey는 다음 다섯 가지 주제로 구성했습니다.

・ LINE 프런트엔드 엔지니어 근황
・ CSS 및 UI 프레임워크
・ JavaScript 및 관련 툴
・ React 상태 관리 라이브러리 및 React CSS 툴
・ Vue 상태 관리 라이브러리

설문 문항 중 기술 관련 문항은 개인적인 경험과 사내 프로젝트 적용 현황, 선호도(적용 현황과 무관) 등 세 가지 관점으로 구성했습니다. 그럼 각 주제별 문항(질문 원문 병기)과 응답 결과를 살펴보겠습니다.  

LINE 프런트엔드 엔지니어 근황

LINE에서 근무한 햇수

LINE에서 몇 년 동안 근무하셨나요(How many years have you worked for LINE)?

LINE 입사 이전에 근무한 회사 수

LINE에 입사하기 전 몇 개 회사에서 근무하셨나요(How many companies have you worked at before LINE)?

80% 이상의 엔지니어가 LINE 입사 전에 한 군데 이상의 회사에서 일한 경험이 있다고 나타났습니다.

업무 중 사용 언어

업무 중 어떤 언어를 사용하시나요(What language(s) do you use in your job)? * 복수 선택 가능 

업무 중에 여러 언어를 사용하는 엔지니어도 있기 때문에 답을 여러 개 선택할 수 있도록 설정했습니다(그래프 세로축은 응답자 수 대비 해당 항목을 선택한 비율을 나타냅니다). LINE 도쿄 거점에서는 대부분의 엔지니어가 일본어로 업무를 진행했지만, 같은 일본 개발 조직이더라도 LINE Fukuoka에서는 영어를 사용하는 비중이 높았습니다. 조직별로 편차가 있긴 하지만 업무 중 여러 언어를 접하는 엔지니어가 많다는 것을 알 수 있었으며, 일본어 사용자와 영어 사용자가 섞여 있는 경우 통역과 함께 미팅을 진행하는 팀도 있었습니다.

주 평균 원격 근무 횟수

일주일에 평균 몇 번 원격 근무하시나요(How many times do you work remotely in an average week)?

조사 결과 70%에 가까운 엔지니어가 거의 매일 원격으로 근무하고 있었습니다.

CSS 및 UI 프레임워크

CSS 관련 지식 수준

CSS 관련 툴과 기술에 대한 자신의 지식을 어떻게 평가하시나요(How would you rate your own knowledge of CSS and its associated tools and technologies)?

CSS 전처리기 사용 현황

LINE에서 프로젝트를 진행할 때 주로 어떤 CSS 전처리기를 사용하시나요(Which of these CSS preprocessors do you regularly use in your project(s) at LINE)? * 복수 선택 가능

UI 프레임워크 사용 경험

다음 각 UI 프레임워크를 얼마나 사용해 보셨나요(Please indicate your experience with the following UI frameworks)?

UI 프레임워크 사용 현황

LINE에서 프로젝트를 진행할 때 어떤 UI 프레임워크를 사용하시나요(Which of the following UI frameworks do you use in your project(s) at LINE)? * 복수 선택 가능

전체 추세와 비교할 때, LINE Fukuoka 엔지니어는 프로젝트를 진행하면서 UI 프레임워크를 사용하지 않고 완전히 새로 UI를 구현하는 사례가 많다는 것을 알 수 있습니다. 현재 LINE Fukuoka에는 최종 사용자용 서비스를 다루는 엔지니어가 많고 각 서비스에 맞게 고유하게 개발하는 경우가 많다는 점이 영향을 미쳤다고 볼 수 있습니다.

UI 프레임워크 선호도

어떤 UI 프레임워크를 가장 선호하시나요(Please indicate your most preferred UI frameworks)?

이전 설문 조사 결과와 비교해 Tailwind CSS를 선호하는 엔지니어가 늘어났습니다. 또한 아무것도 사용하지 않고 완전히 새로 UI를 구현하는 것('None')을 선호하는 엔지니어도 많다는 것을 알 수 있습니다.

CSS 방법론 및 툴 사용 현황

LINE에서 프로젝트를 진행할 때 어떤 CSS 방법론이나 툴을 사용하시나요(Which of these CSS methodologies or tools do you use on your project(s) at LINE)? * 복수 선택 가능

CSS 기능 사용 경험

다음 각 CSS 기능을 얼마나 사용해 보셨나요(Please indicate your experience with the following CSS features)?

JavaScript 및 관련 툴

JavaScript 관련 지식 수준

JavaScript와 관련 툴 및 방법론에 대한 자신의 지식을 어떻게 평가하시나요(How do you rate your own knowledge of JavaScript and its associated tools and methodologies)?

JavaScript 라이브러리 및 프레임워크 사용 경험

다음 각 JavaScript 라이브러리와 프레임워크를 얼마나 사용해 보셨나요(Please indicate your experience with the following JavaScript libraries/frameworks)?

JavaScript 라이브러리 및 프레임워크 사용 현황

LINE에서 프로젝트를 진행할 때 어떤 라이브러리와 프레임워크를 사용하시나요(Which library/framework do you use for your project(s) at LINE)? * 복수 선택 가능

조사 결과 LINE 엔지니어의 60% 이상이 React를 채택한 프로젝트에 참여하고 있었으며, 이를 통해 현재 React가 우세하다는 것을 추측할 수 있었습니다.

JavaScript 라이브러리 및 프레임워크 선호도

어떤 JavaScript 라이브러리와 프레임워크를 가장 선호하시나요(Please indicate your most preferred JavaScript library/framework)?

전체적으로 React가 우세했지만 LINE(도쿄) 엔지니어에 한해서는 Vue.js를 선호하는 엔지니어도 많았습니다. 인과관계를 단정할 수는 없지만 LINE(도쿄) 엔지니어가 관여하는 프로젝트에서는 Vue.js를 채택한 사례가 많았기 때문이라고 볼 수 있습니다.

JavaScript 모듈 번들러 사용 경험

다음 각 JavaScript 모듈 번들러를 얼마나 사용해 보셨나요(Please indicate your experience with the following modules bundlers)?

JavaScript 모듈 번들러 사용 현황

LINE에서 프로젝트를 진행할 때 어떤 JavaScript 모듈 번들러를 사용하시나요(Which module bundler do you use for your project(s) at LINE?)? * 복수 선택 가능

사내에서는 여전히 webpack을 채택하는 사례가 압도적으로 많다는 것을 알 수 있었으며, 신규 개발의 경우 Vite를 채택하는 사례도 늘어나고 있었습니다.

JavaScript 모듈 번들러 선호도

LINE에서 다음 프로젝트를 진행할 때 어떤 모듈 번들러를 선택하실 건가요(Please select your most preferred JavaScript module bundlers for your next project at LINE)?

'다음 프로젝트에서 무엇을 채택할 것인가?'라는 관점에서 webpack은 여전히 인기가 높았습니다.

JavaScript 파생 언어 사용 현황

LINE에서 프로젝트를 진행할 때 다음 중 어떤 언어를 사용하시나요(Which language do you use for your project(s) at LINE)? * 복수 선택 가능

현재 프로젝트가 'TypeScript를 사용한다', 'JavaScript를 사용한다', 'JavaScript에서 TypeScript로 마이그레이션 중이다' 중 어떤 상태인지 물어봤습니다. 엔지니어의 70%가 TypeScript만 사용하는 프로젝트에 참여하고 있었고, JavaScript만 사용하는 프로젝트에 참여하고 있다고 답한 엔지니어도 50% 이상이었습니다.

테스트 툴 사용 경험

다음 각 테스트 툴을 얼마나 사용해 보셨나요(Please indicate your experience of tools for testing)?

테스트 툴 사용 현황

LINE에서 프로젝트를 진행할 때 어떤 테스트 툴을 사용하시나요(Which tools do you use for testing in your project(s) at LINE?)? * 복수 선택 가능

성능 관련 툴 및 기능 사용 현황

LINE에서 프로젝트를 진행할 때 어떤 성능 관련 툴 및 기능을 사용하시나요(Which performance tools / features do you use in your project(s) at LINE)? * 복수 선택 가능

접근성 관련 문서 참고 현황

접근성과 관련해 다음 문서를 읽은 적이 있으신가요(Have you read any of the following documents related to accessibility)? * 복수 선택 가능

LINE에서는 접근성 모범 사례 적용을 위해 LINE Accessibility Guidelines(일본어)라는 사내용 문서를 마련해 놓고 있습니다.

React 상태 관리 라이브러리 및 React CSS 툴 사용 현황

React 상태 관리 라이브러리 사용 경험

다음 각 React 상태 관리 라이브러리를 얼마나 사용해 보셨나요(Please indicate your experience with the following libraries for React state management)?

React 상태 관리 라이브러리 사용 현황

LINE에서 프로젝트를 진행할 때 어떤 React 상태 관리 라이브러리를 사용하시나요(Which of the following libraries do you use for React state management in your project(s) at LINE)? * 복수 선택 가능

React 상태 관리 라이브러리 선호도

다음 React 프로젝트를 진행할 때 어떤 React 상태 관리 라이브러리를 선택하실 건가요(Please select your most preferred library for your next React project state management)?

조사 결과 '아무것도 사용하지 않겠다'를 선택한 엔지니어가 가장 많았고, 다음으로 Recoil과 Redux 순이었습니다.

React 관련 CSS 툴 사용 현황

LINE에서 프로젝트를 진행할 때 React 관련 CSS 툴 중 어떤 툴을 사용하시나요(Which of the following CSS tools for React do you use in your project(s) at LINE)? * 복수 선택 가능

LINE에서는 CSS를 React 애플리케이션 코드와 별도로 다루는 사례가 어느 정도 있는 것 같습니다. 또한 일부 팀에서는 프런트엔드 엔지니어와는 별도로 마크업 전문 엔지니어를 할당한다는 점도 결과에 영향을 미쳤을 것이라고 생각합니다.

React 관련 CSS 툴 선호도

React 관련 CSS 툴 중 어떤 툴을 가장 선호하시나요(Please indicate your most preferred CSS tools for React)?

Vue 상태 관리 라이브러리 사용 현황

Vue 상태 관리 라이브러리 사용 경험

다음 각 Vue 상태 관리 라이브러리를 얼마나 사용해 보셨나요(Please indicate your experience with the following libraries for state management in Vue)?

Vuex 후속으로 Pinia가 등장했지만 아직 인지도가 높지는 않았습니다.

Vue 상태 관리 라이브러리 사용 현황

현재 프로젝트에서 어떤 Vue 상태 관리 라이브러리를 사용하시나요(Which of the following libraries for state management in Vue in your project(s))? * 복수 선택 가능

Vue 상태 관리 라이브러리 선호도

다음 Vue 프로젝트를 진행할 때 어떤 상태 관리 라이브러리를 선택하실 건가요(Please select your most preferred library for your next Vue project state management)?

마치며

이번 UIT Survey 결과를 정리해 보겠습니다.

・ 업무를 진행하면서 여러 언어를 사용하는 엔지니어가 많았고, 주로 사용하는 언어는 거점에 따라 달랐습니다.
・ 원격 근무가 보편화되면서 70%에 가까운 엔지니어가 매일 원격으로 근무하고 있습니다.
・ 응답자의 25%는 사내에서 UI 프레임워크를 사용하지 않고 완전히 새로운 서비스를 디자인하는 프로젝트에 참여하고 있었습니다.
・ LINE에는 Tailwind를 선호하는 엔지니어가 많지만, 완전히 새로운 UI를 개발하는 것을 선호하는 엔지니어도 여전히 많았습니다.
・ React를 선호하는 엔지니어가 많지만, LINE(도쿄)에서는 아직 Vue 인기가 높았습니다.
・ webpack을 대신하는 차세대 모듈 번들러로 Vite를 채택하는 사례가 눈에 띄게 늘었습니다.
・ '회사의 다음 프로젝트에 어떤 모듈 번들러를 채택할 것인가?'라는 설문 조사 결과를 고려해 볼 때 향후 Vite를 채택하는 사례가 늘어날 것으로 전망됩니다.
・ 사내 프로젝트에서는 Redux를 채택하는 사례가 여전히 많지만, 사용 경험 및 선호도에 관한 응답 추세를 살펴보면 향후 Recoil 이용이 늘어날 것으로 예상됩니다.
・ Pinia가 Vuex 후속으로 등장했지만 인지도나 사용 경험, 이용 현황, 선호도 등 모든 관점에서 아직 Vuex가 우세합니다.

UIT Survey 결과를 살펴보면서 LINE에서 일하는 프런트엔드 엔지니어와 프런트엔드 개발 조직에 더욱 관심을 갖게 된다면 좋겠습니다. LINE UIT 조직에서는 이 밖에도 최신 프런트엔드 트렌드를 파악할 수 있는 팟 캐스트 'UIT INSIDE(일본어)'를 운영하고 있고, 정기적으로 Meetup(일본어)을 개최하며 정보 제공에 힘쓰고 있으니 함께 확인하면 더욱 좋을 것 같습니다.