웹 퍼블리싱과 프런트엔드 개발의 환경구축

안녕하세요. 씨앤텍시스템즈 홍정화 연구원입니다.

이번 포스트에서는 웹 퍼블리싱과 프런트엔드 개발의 개발환경에서 각종 디자인에 대하여 정리해 보았습니다.

 

 

프론트엔드 3대장

최근 인터넷의 중요성이 갈수록 높아지고 발전한 결과로, 웹 관련 직업에서는 분야에 따라 많은 세분화가 일어났습니다.

때문에 웹 관련 분야에서는 직업의 분화가 생겨났습니다.

일반적으로 프론트엔드 개발자를 웹퍼블리셔라고 일컫습니다.

이러한 웹 퍼블리셔와 웹디자이너의 의미를 혼동하시는 분들이 많기에 먼저 이 둘의 의미를 살펴보겠습니다.

 

웹디자이너는 '색감을 조합하여 컨셉에 맞추고 브랜딩, 디자인 하는 직업'

웹퍼블리셔는 '컴퓨터언어를 이용하여 웹사이트를 구축하고 구성하는 직업'

 

웹 프로그래밍의 한 분야.

프론트엔드 개발자는 프론트엔드, 백엔드의 완전한 분리 구조를 지향하는 업무 스타일의 개발 방식으로써

프론트단의 비지니스 로직과 사용자 영역의 개발을 담당하는 사람이다.

이와 다른 방식의 업무 스타일 직군으로는 웹퍼블리셔(ui개발)와 개발자(서버 개발자)의 업무 분리 방식이 있다.

이 경우는 주로 서버사이드가 클라이언트를 감싸는 방식이다. MVC로 치면 View 부분에 해당하는 영역을 맡는다.

웹페이지는 HTML, CSS, Javascript 로 표현

1) HTML
브라우저를 통해서 보는 화면의 구조를 잡아주는 역할을 합니다. 쉽게 말해 우리가 흔하게

볼 수 있는 홈페이지의 기본 틀을 구성하는 것입니다.

2) CSS
기본 틀을 구성한 HTML에 디자인을 입히는 역할을 합니다. 폰트나 사진의 모양, 크기,

배경 색상, 자간 등을 꾸며준다고 볼 수 있습니다.

3) Js(Javascript)
정적이었던 페이지를 동적으로 만들어 주는 역할을 합니다. 회원가입 페이지에서

정보가 올바르게 입력되지 않았을 때, 그 필드를 채우라고 알림이 가는 것을 예로 들 수 있습니다.

프론트 엔드 작업의 핵심은 웹표준성 과 웹접근성

웹 표준성 [ 순차적 마크업 ]	웹 접근성 [ 시맨틱 마크업 ]
브라우저의 종류나 버전에 상관없고, 기기의 제약없이 모든 사용자들이 동일한 웹사이트를 볼 수 있도록 웹 표준기술 작업	제약을 가진 사용자(장애인, 노인 등), 혹은 어떠한 기술환경 (웹 표준성)에서도 전문적인 능력 없이 웹사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것
표준화 단체인 W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 프론트 언어에 대한 규정이 담겨있다.	웹 접근성은 웹 표준성의 상위 호환이며 웹 접근성이 보장되면 취약계층 뿐만 아니라 일반 사용자들도 편리하게 사용한다.

 

프론트엔드 개발자가 퍼블리셔와 다른 점은 크게 네 가지로 볼 수 있습니다.

첫째, 더 동적인 화면을 구사합니다. 

이를테면 사용자가 ID나 Password를 입력했을 때, 그것이 유효한지 확인해야 하는데요.

만약 잘못된 ID를 입력했다면 상황에 따른 알림을 주는 역할도 하게 됩니다.

둘째, 실제 작동 가능한 웹페이지를 구현합니다. 

프론트엔드 개발자는 API를 웹페이지에 적용하고

백엔드와 연동되는 실제 작동 가능한 웹 페이지를 구현하게 됩니다.

셋째, 크로스 브라우징, 웹페이지의 호환성, 페이지의 개선 등을 맡습니다. 

단순히 퍼블리싱 하는 것에서 나아가 웹사이트 전반에 대해 관리하고 유지 보수하는 일까지 맡는다고 볼 수 있죠.

 

요약해서 말씀드리자면 

퍼블리싱에 집중해서 일을 처리하는 사람을 웹 퍼블리셔라고 볼 수 있고, 그것에서 

나아가 사용자가 사이트와 상호작용하는 모든 부분에 대한 개발, 관리, 유지 보수를 하는 것이 프론트엔드 개발자라고 할 수 있습니다.

따라서 요즘에는 웹퍼블리셔로 시작하여 프론트엔드 개발자로 전향하는 사람들도 많이 볼 수 있습니다.

 

Front-end 개발 환경

프론트엔드 개발환경에 쓰이는 프로그램의 경우 다양하지만 대체적으로 많이 사용하는 4가지를 비교해 보겠습니다.

 

Visual Studio Code	Atom	Sublime Text	Brackets
* 통합 터미널 * 다양한 플러그인 제공 * Git과의 연동 * 내장 디버거	* 다양한 플러그인 제공 * 강력한 커스터마이징 * Chrome의 검사 화면과   동일한 환경 제공	* 강력한 탐색 및 자동완성 * 플러그인을 통한 다양한   기능 확장 * 가벼운 에디터 환경	* 실시간 미리보기 가능 * JSLint 기능 활용 * 다양한 플러그인을 통한   기능 확장, 테마, 커스터   마이징, 터미널, 자동완성

위와 같이 4개의 프로그램 중 제가 사용하고 있는 Brackets의 환경 구성에 대해 알아보겠습니다.

 

Step 1

검색창 또는 주소창에 브라켓 홈페이지 주소로 들어가 다운을 받는다.

다운로드 버전은 항상 최신버전 사용을 권장

 

http://brackets.io

http://brackets.io

 

Step 2

브라켓을 실행한 후 필수 플러그인 설치

배터리 모양 클릭 후 ' Emmet ' 플러그인 설치

 

브라켓 초기화면

Emmet( 자동완성 플러그인 )

Tip. 유용한 플러그인

각 플러그인들에 대한 설명은 [추가정보...] 를 클릭하면 자세히 볼수 있습니다.

이외에 추가로 필요한 플러그인은 검색하여 설치하시면 되고 테마나 추가 기능에 대한 것도 찾아보실수 있습니다.

---

웹 퍼블리싱과 프런트엔드 개발의 환경구축 에서는 기초적인
프런트엔드 개발환경과 이론에 대해 알아보았습니다.
다음 포스팅에서는 Git에 대한 설명과 응용방법에 대해 알아보겠습니다.

감사합니다.

모든 설정 및 환경 구축은 개개인의 취향에 맞춰 설정하시는 것이 가장 좋습니다 :)
포토샵부터 일러스트까지 웹퍼블리셔, 웹디자이너의 과정을 적어나가고 있습니다.