크몽로그

크몽 지식창고

프론트엔드 개발 유형부터 과정, 특징까지

2023-05-11

프론트엔드 개발 유형부터 과정, 특징까지의 썸네일 이미지

웹 서비스란 사용자가 입력한 데이터를 통해 더 가치 있는 것을 만들어 사용자에게 잘 전달하는 것을 의미합니다. 이 과정에서 ‘프론트엔드’는 사용자와 서비스를 연결해주는 과정의 모든 것을 구현하는 역할을 합니다.


하지만 프론트엔드 개발 시, HTML, 자바스크립트와 같은 전문적인 프로그래밍 언어에 대한 지식과 기술력을 필요로 합니다.

💡이 콘텐츠를 다 읽으면 알 수 있어요 (2분)

1. 프론트엔드란?

2. 프론트엔드 개발 프레임워크 유형 및 특징

3. 프론트엔드 개발 언어 선택 기준

4. 프론트엔드 개발 체크리스트


1. 프론트엔드란?

웹 애플리케이션은 크게 프론트엔드와 백엔드로 나뉘게 됩니다. 여기서 프론트엔드는 사용자가 볼 수 있는 화면, 즉 사용자 인터페이스(User Interface, UI)를 의미합니다. 


프론트엔드는 사람들이 웹 애플리케이션을 쉽게 사용할 수 있도록 기술적으로 구현되어 있어야 합니다. 이는 많은 사람들이 사용할 수 있으며, 경쟁력 있는 서비스를 갖출 수 있는 기반이 되기 때문입니다. 따라서 프론트엔드는 웹 애플리케이션의 사용자 인터페이스와 사용자 경험(UX) 최적화에 초점을 맞추어 개발하는 것이 중요합니다.



2. 프론트엔드 프레임워크 유형

프론트엔드 프레임워크에는 앵귤러, 리액트, 뷰, 스벨트, 앰버 등의 유형이 있습니다.


  • 앵귤러(Angular): 앵귤러는 타입스크립트 기반 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크입니다. 틀이 정해져 있기 때문에 코드를 자유롭게 작성할 수 없지만, 누구든 코드를 쉽게 수정할 수 있다는 장점을 가지고 있습니다.
  • 리액트(React): 페이스북이 개발한 유연하고 효과적인 선언형(declarative)의 자바스크립트 라이브러리입니다. 컴포넌트를 기반으로 한 웹 애플리케이션의 반응형 뷰 레이어(View Layer)이라고 할 수 있습니다.
  • 뷰(Vue.js): 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 자바스크립트 프레임워크입니다. 기존에 다른 자바스크립트 라이브러리를 사용하고 있는 프로젝트에 뷰를 도입하기 쉽게 설계되어 있기 때문에 사용이 매우 간편하다는 장점이 있습니다.
  • 스벨트(Svelte): 오픈 소스 프론트엔드 웹 프레임워크입니다. 컴파일러를 사용하여 최적화된 코드를 생성하며, 런타임에 가볍게 동작합니다. 실제 DOM 조작을 통한 최적화와 코드 간결성을 지향합니다.
  • 엠버(Ember.js): 모델-뷰-뷰모델(MVV) 패턴에 기반을 둔 오픈 소스 자바스크립트 웹 프레임워크입니다. 높은 생산성과 관례를 따르는 구조로 개발을 지원하며, 템플릿 엔진과 라우팅 시스템을 갖추고 있습니다. 클래식한 웹/앱을 개발하기에 적합합니다. 
프론트엔드 개발 유형부터 과정, 특징 관련된 프로그래밍 이미지

3. 프론트엔드 개발언어 선택기준

  • 프로젝트 목표와 특성: 프로젝트의 성격에 따라 언어를 선택해야 합니다. 예를 들어, 웹 애플리케이션의 경우 JavaScript를 사용하거나, UI 디자인 위주의 정적인 페이지라면 HTML과 CSS가 중요합니다.
  • 개발자 경험: 팀 내 개발자들의 숙련도와 선호 언어를 고려해야 합니다. 익숙한 언어로 개발하면 생산성이 높아질 수 있습니다.
  • 성능과 최적화: 언어의 성능과 웹 애플리케이션의 로딩 속도를 고려해야 합니다. 특정 언어는 성능이 뛰어나며, 다른 언어는 웹페이지의 로딩 속도를 향상시키는데 더 적합할 수 있습니다.
  • 커뮤니티와 생태계: 선택한 언어의 커뮤니티와 생태계가 활발하고 지원이 잘 되어야 합니다. 이를 통해 문제를 해결하고 지속적인 업데이트와 도움을 받을 수 있습니다.
  • 크로스 플랫폼 호환성: 애플리케이션의 대상 플랫폼과 디바이스에 따라 언어 선택이 중요합니다. 모바일, 데스크탑, 웹 등 다양한 플랫폼에서 잘 동작해야 합니다.



4. 프론트엔드 개발 체크리스트

  • 번들용량 최소화하기: 프론트엔드 최적화의 기본으로, 최종적으로 웹사이트의 html, css, js, 그리고 각종 이미지와 폰트의 용량을 줄이는 것이 중요합니다. 이를 통해 실제 브라우저에서 다운로드 받는 시간을 줄일 수 있고, 빠른 웹 사이트 서비스를 제공할 수 있습니다.
  • DOM 렌더링 최적화: 웹사이트 화면이 업데이트 되는 것을 최적화하는 작업을 진행해야 합니다. 즉, DOM 렌더 트리의 reflow, repaint 과정을 최적화 해주는 것이 중요합니다.
  • 브라우저 하위 호환: 크로스 브라우징이라고 불리는 작업으로, 브라우저마다 지원할 수 있는 Javascript, CSS기능의 한계를 고려하여 개발하는 것을 의미합니다. 이를 고려하지 않는다면 특정 브라우저에서 기능이 동작하지 않거나 웹사이트의 레이아웃이 깨져보일 수 있습니다.
프론트엔드 개발 유형부터 과정, 특징관련된 코딩 프로그래밍 기호 일러스트 이미지

프론트엔드 개발은? 크몽에서!

  • 원하는 스타일의 라이브러리 적용
  • 유지보수 및 수정 작업 지원
  • 검색 엔진 최적화(SEO)를 적용한 최적화 및 고도화 웹사이트 구축

5.0 ★★★★★

실제 크몽 의뢰인의 후기

복잡한 요구사항도 차근차근 정리해주시고,

놓친 부분까지 완벽하게 개발해 주셨어요!

처음 의도한 대로 완성품이 잘 나왔습니다.


퍼블리싱 BEST

의뢰인이 많이 찾는 퍼블리싱

퍼블리싱 혹은 프론트엔드 작업해 드립니다.

퍼블리싱 혹은 프론트엔드 작업해 드립니다.

4.8(16)
30,000원~
그린블루
전단지, 리플렛, 포스터 등 맞춤형 홍보 인쇄물 디자인
전단지, 리플렛, 포스터 등 맞춤형 홍보 인쇄물 디자인
전단지, 리플렛, 포스터 등 맞춤형 홍보 인쇄물 디자인
전단지, 리플렛, 포스터 등 맞춤형 홍보 인쇄물 디자인

전단지, 리플렛, 포스터 등 맞춤형 홍보 인쇄물 디자인

5.0(18)
55,000원
디자인일다

세금계산서

인쇄물 디자인 여기서 하는겁니다.

인쇄물 디자인 여기서 하는겁니다.

4.8(17)
50,000원~
스튜디오이글루
전단지 포스터 각종 인쇄물 깔끔한 홍보물 디자인
전단지 포스터 각종 인쇄물 깔끔한 홍보물 디자인
전단지 포스터 각종 인쇄물 깔끔한 홍보물 디자인
전단지 포스터 각종 인쇄물 깔끔한 홍보물 디자인

전단지 포스터 각종 인쇄물 깔끔한 홍보물 디자인

5.0(13)
40,000원
썸띵크디자인
현직 디자이너로써 모든 인쇄물 맞춤형디자인해 드립니다.

현직 디자이너로써 모든 인쇄물 맞춤형디자인해 드립니다.

4.9(62)
15,000원~
Holly

퍼블리싱 더 알아보기