우리가 사용하는 데스크탑, 모바일, 태블릿 등 그 안에있는 수 많은 웹사이트와 프로그램들을 알아보려합니다.
프론트엔드 개발자란?
먼저 프론트엔드는 우리가 지금까지 보았던 화면에 관련이 깊은 단어로, 사용자가 직접 작동할 수 있고 볼 수 있는 화면을 제공하고 상호작용하는 일입니다. 프론트엔드가 하는 작업은 주로 웹 페이지의 레이아웃, 메뉴, 디자인, 버튼, 이미지, 동작 작동과 그래프를 사용자에게 상호작용할 수 있도록 사용자 인터페이스를 만들어주는 직업입니다.
쉽게 말해 웹 페이지를 설계해주는 기술을 가진 개발자라고 생각하면 되는데 그렇다고 사이트를 디자인만 해주는 일이다라고 생각하면 안됩니다. 디자인을 담담하는 개발자는 UI/UX 개발자라해서 디자이너가 사용자에게 만족할 만한 레이아웃을 구성해서 디자인해주고 그것을 프론트엔드 개발자가 디자인 해준 레이아웃을 참고해서 실제로 웹 페이지로 구현해주는 것이 프론트엔드 개발자에 목적입니다.
그래서 프론트엔드 개발자는 뭘하는데?
프론트엔드 개발자는 사용자 인터페이스(User Interface)를 구현하는 개발자며 자바스크립트를 기반으로 한 프레임워크와 라이브러리를 주로 사용합니다. 앞서 말한것과 같이 UI/UX 디자이너가 디자인을 제작해주면 HTML/CSS/JavaScript 같은 프로그램으로 코드를 짜서 시각적 결과물을 사용자가 상호작용 할 수 있게 해주는 역할입니다.
그래서 디자이너와 협업할 경우가 많고 개발 언어 트렌드가 빠르게 변화하는 특징을 가지고 있습니다. 사용자와 직접적으로 커뮤니케이션하고 클라이언트와 협업에 적합한 사람들은 프론트엔드 개발자를 추천합니다. 또한 프론트엔드 개발자는 웹 페이지를 구성함과 동시 기기에 해상도와 맞게 반응형 디자인을 구성해주는 역할로 이 부분이 가장 프론트 엔드로써 중요한 포인트라 생각합니다.
프론트엔드 개발자가 되기 위해선?
내가 프론트엔드 개발자가 되겠다 이렇게 다짐하셨다면 이 세가지 주요 기술을 기본적으로 마스터해야 합니다.
- HTML(구조)
- HTML은 웹 페이지의 골격을 구성하는 마크업 언어로, 웹 페이지의 텍스트, 이미지, 링크를 어떠한 방식으로 정의할지 구성하는 역할을 담당합니다
- HTML의 기본 태그와 요소는 <!DCOTYPE html>, <html>, <head>, <body>, <header> 등 다양한 요소들이 기본 태그로 정의되어 있습니다.
- CSS (스타일링)
- CSS는 HTML로 구성된 웹 페이지에 스타일을 추가하는 언어로 글꼴, 색상, 레이아웃 등을 설정해 페이지의 시각적 디자인을 정의합니다.
- JavaScript(동작)
- JavaScript는 웹 페이지에 동적 기능을 추가하는 프로그래밍 언어로 버튼 클릭, 이미지 슬라이드, 폼 제출 등 이벤트를 처리할 때 사용되는 언어입니다.
프론트엔드의 중요성
- 사용자 경험(UX) 중심
- 웹 사이트의 첫인상이 좋지 않다면 사용자는 만족하지 못하기 떄문에 프론트엔드 개발자로써 사용자의 의견에 충족하게 해야합니다
- 실시간 상호작용 구현
- 사용자가 실시간으로 상호작용하기위해선 올바른 기능과 상호작용을 작동시켜야합니다.
참고 자료
프론트엔드 백엔드 차이, 프론트엔드가 뭔가요? | zero-base
프론트엔드 개념부터 개발자 취업 방법까지 총정리
zero-base.co.kr
프론트엔드 VS 백엔드, 역할부터 기능까지 모두 알려드립니다!
프론트엔드와 백엔드의 차이점과 특징에 대해 이랜서에서 알려드립니다. I 프론트 엔드 포트폴리오, 프론트 엔드 백엔드, 백엔드 프론트 엔드, 프론트 엔드 개발자, 프론트 엔드 로드랩, 프론트
www.elancer.co.kr
'웹' 카테고리의 다른 글
| [Web] NoSQL vs SQL의 차이점 (0) | 2025.02.22 |
|---|---|
| [Web] 쿠키와 웹 스토리지의 차이(로컬 스토리지 세션 스토리지) (0) | 2025.02.17 |
| [WEB] HTTP와 HTTPS의 차이점 (0) | 2025.02.16 |
| [Back-End] 인터넷의 작동원리 인터넷을 어떠한 방식으로 작동하나? (0) | 2025.02.13 |
| [WEB] 검색엔진 최적화(SEO) 이해하기 (0) | 2025.01.27 |