프론트엔드 트렌드 관련 사이트 4개

December 09, 2021

오늘은 프론트엔드 개발 트랜드를 파악하기 위해 참고하기 좋은 사이트 4가지를 간단한 설명, 장점, 단점, 총평 순서로 정리해 보았습니다. 프론트엔드 생태계가 워낙 빠르게 변하다 보니, 트랜드를 금방 놓쳐 버리기 쉬운데요, 아래 사이트들이 여러분께 많은 도움이 되었으면 좋겠습니다.

1. Javascripting.com

JavaScripting.com - The Database of JavaScript Libraries

javascripting site screenshot

간단한 설명

Javascripting.com은 자바스크립트 라이브러리 순위를 Animation, Video, Forms 등 기능별로 모아 놓은 사이트입니다. Popular, New, Trending, 세 가지 정렬 기준을 제공하며, 라이브러리의 README 파일과 Repository까지 사이트에서 바로 확인할 수 있습니다. Submit a Library 메뉴를 통해 사이트 이용자들이 라이브러리를 직접 등록하는 형태로 운영하는 것 같은데, 그러다 보니 간혹 등록되지 않은 라이브러리들도 있습니다.

장점

  • UI / UX가 깔끔하고 직관적이기 때문에, 사용하기 쉽다.
  • 기능별로 모아 놓아서, 특정 용도에 맞는 라이브러리 순위를 쉽게 확인할 수 있다.
  • 라이브러리별 README.md와 Repository를 사이트에서 바로 볼 수 있다.

아쉬운 점

  • 개인적으로 붉은 배경의 Header가 거슬린다.
  • 다크 모드도 따로 지원되지 않기 때문에, 시각적 피로가 클 것 같다.
  • 데이터의 정확성이 낮다.
  • 간혹 등록되지 않은 라이브러리도 있다.

총평

프론트에서 이런 기능이 필요한데, 쓸만한 라이브러리 없나? 싶을 때 유용한 사이트입니다. 사이트에 등록돼 있지 않은 라이브러리들도 꽤 있으니, 참고 정도만 하시는 것이 좋겠습니다. 한 가지 예를 들면, React App에서 form 검증을 위한 라이브러리로 formik을 많이 쓰는 것으로 알고 있는데, 사이트에 등록조차 안 돼 있습니다.

사이트의 정확성은 꽤 낮은 편입니다. 인기순 정렬 결과와 npmtrends의 결과가 일치하지 않는 문제가 있네요. 그리고 가끔 페이지 이동 시 레이아웃이 중첩되어 보이는 이슈가 발생합니다.

2. stateofjs.com

State of JS 2020

간단한 설명

stateofjs.com은 1년에 한 번, 자바스크립트 생태계의 전반적인 트랜드를 조사하여 인포그래픽 형태로 제공하는 사이트입니다. 자바스크립트 문법, 프레임워크, 디자인 패턴, 테스팅 툴 등 다양한 항목에 대해 개발자들의 사용 현황, 만족도 등을 조사한 데이터입니다.

장점

  • 자바스크립트 생태계 전반적인 트랜드를 이해하는 데 도움이 된다.
  • 사이트 내 모든 통계 데이터를 JSON / graphQL로 export할 수 있다.
  • 기본 테마가 다크 모드이기 때문에 시각적으로 편안한 느낌을 준다.
  • 데이터 시각화가 깔끔하게 잘 되어 있다.
  • 각각의 메뉴와 그래프 하나하나마다 애니메이션이 정말 잘 구현돼 있다.
  • 어색하긴 하지만, 한국어 지원이 돼 있다.

아쉬운 점

  • 업데이트가 1년에 한 번 이뤄진다.

총평

일단 보는 재미가 있는 사이트입니다. 업데이트가 1년에 한 번 이뤄진다는 것이 가장 아쉽네요. 재밌게 보던 드라마가 조기 종영하는 느낌 같습니다.

자바스크립트 생태계를 이해하는 데 큰 도움이 될 것 같습니다. 모든 데이터를 export할 수 있게 구성했다는 점도 굉장히 세련됐다고 생각하는데, 사이트가 워낙 잘 되어 있어 굳이 가져다 쓸 일이 있을까 싶긴 하네요.

다만 다른 사이트들도 마찬가지 듯, 대부분이 해외 개발자들의 응답을 집계한 데이터이기 때문에, 국내 개발 트랜드와는 맞지 않는 부분이 있을 수도 있습니다.

3. npmtrends.com

npm trends: Compare NPM package downloads

간단한 설명

워낙 유명한 사이트이죠. 라이브러리 다운로드 수 비교 사이트입니다.

장점

  • 두 개 이상의 라이브러리를 비교하기 좋다.
  • 특정 라이브러리를 입력하면, 그와 관련된 라이브러리까지 추천해 준다.
  • 라이브러리의 npm 문서까지 페이지에서 같이 보여준다. (하나만 입력한 경우)
  • 라이브러리가 등장한 시점부터 데이터가 제공되기 때문에 트랜드를 파악하기 쉽다.

단점

  • 없음

총평

두 개 이상의 라이브러리 선택에서 고민하고 있다면, 가장 먼저 찾는 사이트입니다. 아쉬운 점은 딱히 없습니다.

4. Stack Overflow Developer Survey 2021

Stack Overflow Developer Survey 2021

간략한 설명

해마다 stackoverflow 개발자들 대상으로 성별, 연령, 연봉 등의 인구통계학 정보 및 기술 선호도를 조사하여 결과를 보여주는 사이트입니다.

장점

  • stackoverflow에서 운영하는 사이트인 만큼, 데이터 신뢰도가 높다.
  • 다른 개발 직군과 프론트엔드 개발 직군의 위치를 비교해 볼 수 있다.
  • 개발자들의 인구통계학 자료가 거의 없어, 꽤 흥미로운 데이터이다.

아쉬운 점

  • 전 개발 직군 모두를 다루다 보니, 프론트엔드만 확인하기는 어렵다.
  • 역시 해외 개발자 기준 데이터이기 때문에, 국내 상황과는 맞지 않을 수 있다.

총평

세상에는 정말 다양한 개발자들이 존재한다는 것을 실감할 수 있습니다. 프론트엔드 개발자가 비교적 등장한 지 얼마 안 된 직군이라서 그런지, 연봉이나 경력이 다른 개발자들에 비하면 꽤 낮은 편이네요. 사이트 들어가 보시면 재밌는 데이터들도 꽤 많으니, 한 번쯤 들어가 보시는 것을 추천합니다.

결론

  • 프론트엔드 생태계의 전반적인 흐름을 파악하고 싶다 → stateofjs.com
  • 두 개 이상의 라이브러리 중 뭘 선택할지 고민이다 → npmtrends
  • 다른 개발 업계와 프론트엔드 업계를 비교해 보고 싶다 → stackoverflow developer survey
  • 특정 기능 구현에 필요한 라이브러리를 찾고 있다 → javascripting.com

Profile picture

Written by Kim Chanhee 데이터 시각화 전문 프론트엔드 개발자를 꿈꾸고 있습니다. You should follow me on github