[개발 직무] Front-End / HTML, JS, CSS

 

IT 분야의 직종에 관심이 있다면 

프론트엔드와 백엔드에 대해서 한번쯤 들어본 경험이 있을 것이다.

필자도 처음 공부를 시작했을 때에는 이 개념이 모호하게 느껴졌었는데,

프로그래밍 언어를 하나씩 배워가면서 이해하게 되었다.

오늘은 프론트엔드의 개념과 사용되는 언어들을 알아보자!

 

 

---

 

프론트엔드(Front-End) 개념

사용자가 웹 사이트 또는 웹 애플리케이션의 URL을 입력하거나 모바일 애플리케이션을 다운로드할 때, 사용자들은 아주 깔끔한 레이아웃을 가진 인터페이스를 보게 됩니다. 이렇게 사용자가 마주 보는 인터페이스를 테크놀로지 분야에서 ‘프론트엔드’라고 부릅니다. 프론트엔드는 사용하기 쉽고 완전한 기능을 갖춘 인터페이스를 갖추었을 때만 사용자들의 참여를 끌어내기 때문에 아주 중요한 요소가 됩니다. 서비스의 경쟁력을 유지하기 위해서는, 매끄럽게 동작하는 강력한 프론트엔드를 구축하는 것이 매우 중요합니다.

 

 

프론트엔드(Front-End) 개발

프론트엔드 개발은 주로 웹 및 모바일 솔루션의 사용자 인터페이스(UI)와 사용자 경험(UX)을 만드는 데 초점을 맞추고 있습니다. 슬라이더, 드롭다운(drop-down) 메뉴, 레이아웃, 폰트, 컬러 등 모든 요소가 프론트엔드 개발을 이루는 부분입니다. 최종적인 사용자 인터페이스를 디자인하기 전에는 목업(Mockup), 와이어 프레임(Wire-frame), 클릭할 수 있는 프로토타입(Prototype)을 만들어야 합니다. 이런 도구들은 애플리케이션의 사용자 경험 안에 있는 이슈들을 확인할 수 있게 도와줍니다. 모바일 또는 웹 애플리케이션을 위한 완벽한 프론트엔드를 만들기 위해서는, 구체적인 요구사항·목표·기회 등을 이해하고 그에 따른 프론트엔드를 만들어 낼 수 있는 개발업체와 협업하는 것이 매우 중요합니다.

 

 

프론트엔드(Front-End) 주사용 언어

프론트엔드에 개발에서 사용하는 언어는 여러 가지가 있는데 대표적으로 HTML, CSS, JavaScript를 들 수 있습니다. 웹 페이지의 내용과 기본 구조는 HTML, 디자인 담당은 CSS, 동작 담당은 JavaScript라고 할 수 있습니다. 

 

---

HTML 

HTML (Hyper Text Markup Language)

이름 그대로 하이퍼텍스트와 마크업 언어로 구성되어 있습니다. 하이퍼텍스트는 웹 페이지들 사이의 연결(하이퍼링크)를 나타냅니다. 반면에 마크업 언어는 데이터를 기술하는 언어입니다. 한 마디로 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종이라고 할 수 있는데요. 웹 페이지에 문단, 동영상, 제목, 표 등을 정의하고 그 구조와 의미를 정의하는 데 사용됩니다.

 

 

CSS

CSS(Cascading Style Sheets, 종속 스타일 시트)

CSS는 마크업 언어로 작성된 것이 '실제로 화면에 어떻게 보이는지' 그 스타일(표현)을 정해 주는 언어입니다. 즉 HTML 콘텐츠를 크기, 색상, 위치 변경 등으로 예쁘게 꾸미는, 디자인 담당이라고 할 수 있는데요. CSS의 사용으로 구조(내용)와 표현(스타일)이 서로 분리될 수 있습니다. CSS는 개발자가 웹페이지에 다양한 스타일을 적용할 수 있게 해줌으로써 애플리케이션 페이지를 표시하는 프로세스를 보다 단순하게 만들어 줍니다. CSS는 또한 한 번에 여러 웹 페이지의 레이아웃을 제어할 수 있어 일일이 디자인을 적용해야 할 수고로움을 덜어줍니다.

 

JavaScript

스크립트 언어인 자바스크립트는 HTML과 CSS를 통해 만들어진 웹 페이지가 동작하도록 만들어 줍니다. 사용자들을 위해 상호작용하는 애플리케이션은 자바스크립트를 통해 구현 가능하게 된 것이라고 볼 수 있죠. 자바스크립트는 객체 기반 언어이기에 객체 지향형 프로그래밍과 함수형 프로그래밍 모두를 표현할 수 있습니다. 게다가 동적이며 소스 코드를 직접 해석하여 바로 실행할 수 있는 인터프리터 언어이기 때문에 타입을 명시할 필요가 없다는 특성이 있습니다. 웹사이트의 기능성을 향상하는데 사용되며, 웹 기반의 소프트웨어 또는 게임들을 실행할 수 있게 해 주는 역할을 합니다.

 

---

참고 자료

https://www.jobkorea.co.kr/goodjob/tip/view?News_No=18678&schCtgr=0 

 

 

 

---

 

프로그래밍 공부를 위해 여러 자료들을 토대로 작성한 기록입니다.

개인 공부에만 사용해주시고, 상업적인 활용과 재배포를 금지합니다.