네이버는 이렇게 한다! 프런트엔드 개발 시작하기 : 예제로 배우는...

지은이 주우영

테크니컬 에디터 이인실, 김붕미, 김지현, 박춘권, 유영경, 장주혜

펴낸이 박찬규 엮은이 이대엽 디자인 북누리 표지디자인 아로와 & 아로와나

펴낸곳 위키북스 전화 031-955-3658, 3659 팩스 031-955-3660

주소 경기도 파주시 교하읍 문발리 파주출판도시 535-7 세종출판벤처타운 #311

가격 22,000 페이지 412 책규격 188 x 240 x 19mm

초판 발행 2014년 9월 19일

ISBN 978-89-98139-66-7 (13000)

등록번호 제406-2006-000036호 등록일자 2006년 05월 19일

홈페이지 wikibook.co.kr 전자우편 [email protected]

이 도서의 국립중앙도서관 출판시도서목록 CIP는

서지정보유통지원시스템 홈페이지(http://seoji.nl.go.kr)와

국가자료공동목록시스템(http://www.nl.go.kr/kolisnet)에서 이용하실 수 있습니다.

CIP제어번호 CIP2014026140

프런트엔드 개발이란 무엇인가? 그리고 현재 웹 개발 환경에서 개발을 어떻게 진행해야 하는가? 이

질문에 답할 수 있는 개발자는 많지 않을 것입니다. 사용자들이 웹에 바라는 기대가 커지고 복잡해

진 만큼 프런트엔드 개발 역시 그에 비례해서 높은 수준의 공학적, 기술적 지식을 필요로 하는 분야

로 바뀌었습니다.

하지만 아직까지 그 가치를 인정하는 이해관계자는 많지 않습니다. 이 책을 선택한 독자도 자바스크

립트를 그저 가지고 놀기에 좋은 언어로 취급하고, HTML을 단순한 XML 변형 언어로 바라보고 있

을지도 모르겠습니다. 이런 가치 기준으로 개발한 웹은 성능이나 접근성 등 여러 가지 면에서 품질

문제가 많습니다.

기술적 전문 지식 없이 개발한 자바스크립트 코드는 품질 관리가 되지 않고 유지보수는 지옥과 같습

니다. 개발 프로세스는 어떻습니까? 프런트엔드 개발을 작은 단위의 개발로 인식해 정의한 개발 프

로세스는 여러 가지 문제점과 병폐가 많습니다. 이 문제를 해결하고 싶다면 먼저 프런트엔드 개발의

가치를 인정해야 합니다. 가치를 인정해야 새롭게 변화하고자 하는 동기가 생길 것입니다.

이 책에서는 프런트엔드 개발을 하는 데 필요한 도구와 실전에서 많이 사용하는 예제를 중심으로 개

발 과정과 방법을 보여드릴 것입니다. 먼저, 프런트엔드 개발을 정의하고 실전에서 많이 쓰는 도구

와 기법을 소개합니다. 이 과정에서 IDE뿐만 아니라 JSLint나 카르마 같은 코드 품질 관리 도구도 활

용합니다. 그리고 소개한 도구들을 사용하면서 마크업부터 자바스크립트까지 심층적으로 프런트엔

드 개발을 진행합니다. 이 과정에서는 프런트엔드 개발 과정뿐만 아니라 객체지향적으로 자바스크

립트를 어떻게 개발할 수 있는지 단편적으로나마 경험할 수 있습니다.

머리말

4

이 책은 필자가 네이버에서 경험한 개발 프로세스를 토대로 작성했습니다. 프런트엔드 개발에 관한

하나의 기본 가이드로 봐주시길 바랍니다. 개발 성격과 프로세스 환경에 따라 전혀 다른 방법으로

문제를 해결해야 할 수도 있습니다. 이 책의 내용이 독자에게 조금이라도 도움이 됐으면 하는 마음

으로 준비했습니다.

마지막으로, 많은 도움을 주신 프런트엔드개발팀의 김태훈 팀장과 팀원 분들에게, 그리고 테크니컬

에디팅을 해주신 이인실 차장님께 감사 인사를 드리고 싶습니다. 이 분들이 없었다면 이 책은 세상

에 나올 수 없었을 것입니다. 그리고 열심히 리뷰해주신 베타리더 분들, 바쁘신 와중에도 추천사를

작성해주신 박난하 님과 집에서까지 집필에 열중해도 묵묵히 참고 응원해 준 아내에게도 뜨거운 감

사를 보냅니다.

- 프런트엔드개발팀 주우영

5

이 책은 2부로 구성됩니다. 1부에서는 프런트엔드 개발이 무엇인지, 프런트엔드 개발에 필요한 도

구를 중점적으로 소개하고 2부에서는 예제를 중심으로 프런트엔드 개발 과정을 직접 따라해볼 수

있도록 구성했습니다.

1부 : 프런트엔드 개발 도구

1부에서는 프런트엔드 개발이란 무엇인지 이야기하고 IDE와 에디터, 버전 관리 시스템, 코드 품질

관리 도구, 리팩터링 기법, 디버깅 도구, 프런트엔드 개발 도구, 빌드, 태스크 자동화 도구를 소개합

니다. 이 도구 중 버전 관리 시스템은 프로젝트 특성에 따라 결정되는 선택적인 도구이기 때문에 특

별히 2부에서 사용하진 않습니다. 디버깅 도구와 카르마 역시 2부에서 설명하진 않지만 프런트엔드

개발에 빈번하게 사용되는 도구니 숙지하시면 많은 도움이 됩니다.

2부 : 프런트엔드 개발 시작

2부에서는 조직도 트리 모듈 예제를 명세 분석부터 마크업 개발, 자바스크립트 개발까지 심층적으

로 설명합니다.

이 책의 구성

6

이 책을 읽는 독자는 아래 독자 수준을 참고해서 읽으시면 도움이 됩니다.

프런트엔드 개발 초급자

1장부터 부록 B까지 전부 읽습니다. 이 책에는 프런트엔드 개발에 필요한 도구와 프런트엔드 개발

을 체험해볼 수 있는 과정이 들어 있습니다. 이 책을 전부 읽으면 프런트엔드 개발에 사용하는 도

구를 이해하고 조직도 트리 모듈 사례를 직접 개발해보면서 프런트엔드 개발을 이해할 수 있게 됩

니다.

프런트엔드 개발에 필요한 도구를 알고 싶은 분

1부에서 “프런트엔드 개발의 이해” 장과 2부를 제외한 나머지 장을 읽습니다. 도구에 대한 자세한 기

능 설명은 “부록 A. 도구 기능 소개” 장을 참고합니다. 이렇게 읽으면 프런트엔드 개발에 사용하는 도

구에 관한 기반 지식을 쌓을 수 있습니다.

•1부: 2장~8장

•부록 A

프런트엔드 개발 과정만 체험하고 싶은 분

1부의 “프런트엔드 개발의 이해” 장과 2부, “부록 B. 조직도 모듈 설계 패턴” 장을 읽습니다. 1부와 2

부를 도구와 개발 과정으로 나눠서 구성했습니다. 따라서 도구에 대해 이미 알고 있다면 2부만 읽어

도 프런트엔드 개발 과정을 체험할 수 있습니다. 이렇게 읽으면 Less와 Emmet를 이용해 마크업 개

발을 진행하고 JSDoc 태그를 이용해 자바스크립트를 객체 지향적으로 개발하는 방법을 이해할 수

있습니다.

•1부: 1장

•2부: 9장~11장

•부록 B

7

8

1부 프런트엔드 개발과 도구 소개

01 / 프런트엔드 개발의 이해 ................................................................................17

프런트엔드 개발이란 .....................................................................................................17

정의 .................................................................................................................................17

범위 .................................................................................................................................18

프런트엔드 개발 현황 ....................................................................................................19

미성숙한 개발 프로세스 ...................................................................................................19

프런트엔드 지식이 부족한 서버 개발자 ...........................................................................20

백엔드와 프런트엔드의 개발 의존성 ................................................................................22

프런트엔드 개발 프로세스 .............................................................................................24

새로운 프로젝트 시작 ......................................................................................................24

프런트엔드 개발 시작 ......................................................................................................24

프런트엔드 개발 산출물 배포 ..........................................................................................27

정리 .................................................................................................................................27

02 / IDE와 에디터 .........................................................................................................29

유명한 에디터 .................................................................................................................29

이클립스 ..........................................................................................................................29

앱타나 스튜디오 ...............................................................................................................31

서브라임 텍스트 ...............................................................................................................32

목차

웹스톰 .............................................................................................................................33

웹스톰을 채택한 이유 ......................................................................................................33

웹스톰 설치.....................................................................................................................35

Node.js 설치 ...................................................................................................................35

웹스톰 설치 ......................................................................................................................36

웹스톰 실행 ......................................................................................................................40

정리 .................................................................................................................................41

03 / 버전 관리 시스템 ................................................................................................43

서브버전과 깃 .................................................................................................................43

서브버전 ..........................................................................................................................43

깃 .....................................................................................................................................45

웹스톰과 버전 관리 시스템 ............................................................................................47

서브버전 사용 ..................................................................................................................47

깃 사용 .............................................................................................................................60

정리 .................................................................................................................................70

04 / 코드 품질 관리 .....................................................................................................71

코드 품질 검증 도구 .......................................................................................................71

JSHint ..............................................................................................................................72

JSLint ...............................................................................................................................72

웹스톰과 JSLint ..............................................................................................................73

JSLint 설정.......................................................................................................................73

실시간 코드 검증..............................................................................................................74

9

테스트 도구.....................................................................................................................81

QUnit ..............................................................................................................................81

카르마 ..............................................................................................................................81

웹스톰과 카르마 .............................................................................................................82

카르마 설치 ......................................................................................................................82

테스트 실행 ......................................................................................................................88

정리 .................................................................................................................................93

05 / 리팩터링 기법 .......................................................................................................95

리팩터링이란? ................................................................................................................95

웹스톰과 리팩터링 .........................................................................................................96

이름 변경(Rename) ........................................................................................................96

이동(Move) .................................................................................................................. 103

안전한 삭제(Safe Delete) ............................................................................................ 105

시그니처 변경(Change Signature) ............................................................................. 107

직접 삽입(Inline) .......................................................................................................... 110

추출(Extract) ................................................................................................................ 113

Find Refactoring Preview 도구 창 ............................................................................. 121

정리 .............................................................................................................................. 122

06 / 디버깅 도구 ......................................................................................................... 123

크롬 브라우저 .............................................................................................................. 123

설치 .............................................................................................................................. 124

HTML&CSS 디버깅 .................................................................................................... 126

요소 패널 ...................................................................................................................... 126

인스펙터 도구 ............................................................................................................... 126

스타일 창 ........................................................................................................ 129

계산 결과 창 .................................................................................................................. 131

10

자바스크립트 디버깅 .................................................................................................. 132

소스 패널 ...................................................................................................................... 132

콘솔 패널 ...................................................................................................................... 138

네트워크 디버깅 .......................................................................................................... 140

네트워크 패널 ............................................................................................................... 140

반응형 모드.................................................................................................................. 143

크롬 .............................................................................................................................. 143

파이어폭스 .................................................................................................................... 145

정리 .............................................................................................................................. 146

07 / 프런트엔드 개발 도구 .................................................................................. 147

마크업 개발 도구 ......................................................................................................... 147

Less .............................................................................................................................. 147

Emmet ......................................................................................................................... 148

웹스톰과 Less, Emmet .............................................................................................. 148

Less .............................................................................................................................. 148

Emmet ......................................................................................................................... 152

자바스크립트 개발 도구.............................................................................................. 154

Bower .......................................................................................................................... 154

JSDoc3 애너테이션 ...................................................................................................... 154

웹스톰과 Bower, JSDoc3 애너테이션 ...................................................................... 154

Bower .......................................................................................................................... 154

JSDoc3 애너테이션 ...................................................................................................... 158

디렉터리 스캐폴딩 ...................................................................................................... 170

Grunt-init 소개 ............................................................................................................ 170

정리 .............................................................................................................................. 172

11

08 / 빌드 및 태스크 자동화 도구 .................................................................... 173

빌드 도구 ..................................................................................................................... 173

Uglify.js ........................................................................................................................ 173

JSDoc3 문서화 ............................................................................................................. 176

태스크 자동화 도구 ..................................................................................................... 183

Grunt ........................................................................................................................... 183

정리 .............................................................................................................................. 193

12

2부 프런트엔드 개발 시작

09 / 조직도 트리 개발 사례 ................................................................................. 195

조직도 트리 개발 시작 ................................................................................................ 195

소개 .............................................................................................................................. 195

상세설계서와 디자인 .................................................................................................... 196

명세 작성 ...................................................................................................................... 197

명세 분석 ..................................................................................................................... 198

유스케이스 .................................................................................................................... 198

정리 .............................................................................................................................. 201

10 / 마크업 개발 ......................................................................................................... 203

마크업 디렉터리 구성 ................................................................................................. 203

네이버 디렉터리 컨벤션 ................................................................................................ 203

디렉터리 구조 생성 ....................................................................................................... 207

마크업 개발 단계 ......................................................................................................... 210

구조를 마크업하는 작업 ................................................................................................ 210

구조를 스타일링하는 작업 ............................................................................................ 211

조직도 트리 구조 작성 ................................................................................................ 212

조직도 타이틀과 조직추가 버튼 마크업 ........................................................................ 212

최상위 노드(회사, 조직미지정) 마크업 ......................................................................... 215

부서 노드 마크업........................................................................................................... 220

콘텍스트 메뉴 마크업 ................................................................................................... 223

13

조직도 트리 스타일링 ................................................................................................. 225

스타일링에 필요한 Less 파일 생성 ................................................................................ 225

조직도 트리 레이아웃 스타일링 .................................................................................... 228

타이틀과 조직 추가 버튼 스타일링 ................................................................................ 233

조직도 트리 스타일링 ................................................................................................... 243

수정 폼 스타일링........................................................................................................... 261

콘텍스트 메뉴 스타일링 ................................................................................................ 263

정리 .............................................................................................................................. 267

11 / 자바스크립트 개발 ......................................................................................... 269

자바스크립트 디렉터리 구성 ...................................................................................... 269

일반적인 디렉터리 구조 ................................................................................................ 269

디렉터리 구성 ............................................................................................................... 271

디렉터리 템플릿 ............................................................................................................ 273

조직도 모듈 개발 ......................................................................................................... 278

조직도 모듈 설계........................................................................................................... 278

조직도 모듈 HTTP API 디자인 ...................................................................................... 279

모델 개발 ...................................................................................................................... 283

컬렉션 개발 ................................................................................................................... 288

조직도 트리 뷰 개발 ...................................................................................................... 308

콘텍스트 메뉴 뷰 개발 .................................................................................................. 328

빌더 함수 ...................................................................................................................... 336

조직도 모듈 빌드 ......................................................................................................... 339

정리 .............................................................................................................................. 344

14

부록 A / 도구 기능 소개 ......................................................................................... 346

JSLint 옵션 소개 .......................................................................................................... 347

QUnit 기능 소개 ......................................................................................................... 356

Less 기능 소개 ............................................................................................................. 359

Emmet 기능 소개 ....................................................................................................... 363

JSDoc3 태그 소개 ....................................................................................................... 369

부록 B / 조직도 모듈 설계 패턴 ........................................................................ 384

모델-뷰-컨트롤러 ....................................................................................................... 385

컴포지트 패턴 .............................................................................................................. 390

데코레이터 패턴 .......................................................................................................... 395

부록 C / 참고 자료 ..................................................................................................... 402

웹 사이트 .................................................................................................................... 403

책 .................................................................................................................................. 406

15

프런트엔드 개발과 도구 소개

1부

01 프런트엔드 개발의 이해

02 IDE와 에디터

03 버전 관리 시스템

04 코드 품질 관리

05 리팩터링 기법

06 디버깅 도구

07 프런트엔드 개발 도구

08 빌드 및 태스크 자동화 도구

01. 프런트엔드 개발의 이해 17

웹 서비스가 다양한 기능과 풍부한 UI를 갖추면서 사용자가 접하는 영역의 전문성과 중요도가 부

각되기 시작했다. 웹 개발의 범위를 프런트엔드와 백엔드로 구별한 것은 이런 사용자가 접하는 영

역, 즉 클라이언트 개발의 중요도에 기인한 것이다. 이 책에서는 사용자가 접하는 영역을 개발하

는 프런트엔드 개발 시작부터 배포 과정까지 설명한다. 이 과정에서 생산성을 높여주는 통합 개발

환경(이하 IDE, integrated development environment)과 프런트엔드 개발을 도와주는 각종 도

구도 함께 설명한다.

이 장에서는 프런트엔드 개발이란 무엇인지, 현재 프런트엔드 개발 관행에는 어떤 문제가 있는지

살펴본다. 프런트엔드 개발 프로세스에서는 웹 개발 프로젝트의 프로세스를 개괄적으로 살펴보고

프런트엔드 개발과 백엔드 개발을 어떻게 분리해서 개발해야 하는지 이야기한다.

프런트엔드 개발이란

정의

국내에서는 사용자가 접하는 영역의 개발을 HTML 코딩, 웹 퍼블리싱1, UI 개발2, RIA 개발3 등

여러 단어로 정의하며 업계마다 각기 다른 언어로 개발 영역을 부르기도 한다. 사용자가 접하는

1 웹 퍼블리싱이란 단순히 HTML 문서를 생산하는 HTML 코딩과는 다르게 시맨틱 마크업, 크로스 브라우징, 웹 접근성을 구현하는 전문성을 가진 마크

업 개발을 뜻한다.

2 UI(user interface) 개발이란 자바스크립트와 AJAX 기술을 사용해 웹 문서에 동적인 효과와 원활한 인터랙션을 구현하는 개발을 뜻한다.

3 RIA(rich internet application) 개발이란 어도비 플래시나 플렉스 또는 실버라이트 등의 기술을 사용해 웹의 본질인 문서라는 한계를 뛰어넘어 애플

리케이션 수준의 사용성을 제공하는 개발을 뜻한다.

프런트엔드 개발의 이해

01

영역의 집합을 프런트엔드 개발이라 할 수 있는데 여러 개념을 합치다 보니 프런트엔드 개발을 한

마디로 정의하기가 쉽지 않다.

그림 1-1 프런트엔드 개발 범위

쉽게 정의해 보면 프런트엔드 개발은 웹 접근성, 웹 표준, 클라이언트 성능 최적화 등과 같은 지식

을 기초로 사용자가 접하는 영역의 리소스와 UI, 인터랙션을 개발하는 것이라고 할 수 있다.

범위

프런트엔드 개발 범위 역시 구분 짓기가 쉽지 않다. 어떤 분야는 백엔드 개발과 밀접한 관련이 있

어 서로 나누기가 애매한 경우도 있고, 많은 국내 프런트엔드 개발자들이 각자 나름대로의 범위를

정의하고 있기 때문이기도 하다. 그렇다면 네이버에서는 어떻게 그 범위를 정의하고 있을까?

네이버에는 프런트엔드 개발자들이 팀으로 존재한다. 이 팀이 어떤 일을 담당하는지 한번 살펴보

겠다.

• 마크업: HTML과 CSS로 웹 표준을 준수한 웹 페이지의 마크업을 개발한다.

• UI 인터랙션 개발: CSS로 표현하는 데 한계가 있는 동적인 효과나 기능을 자바스크립트를 이용해 개발한다.

• UI 컴포넌트 개발: 자바스크립트를 모듈처럼 사용할 수 있게 하는 컴포넌트를 개발한다.

• AJAX UI 개발: AJAX 통신을 이용한 동적인 웹 페이지를 자바스크립트로 구현한다.

• UX 프로토타입 개발: 웹 페이지의 인터랙션이 구현 가능한지, 또 성능 이슈는 없는지 등을 파악할 목적으

로 프로토타입을 개발한다.

18 프런트엔드 개발 시작하기


이처럼 네이버에서 정의하는 프런트엔드 개발의 범위는 HTML, CSS, 자바스크립트를 주 언어로

해서 마크업, UI 개발 및 프로토타입을 개발하는 것까지로 볼 수 있다. 하지만 네이버에서 정의하

는 범위가 프런트엔드 개발의 전체 범위라고 단정하긴 힘들다. 왜냐하면 대표적인 예로 네이버에

는 RIA 개발팀이 따로 존재하지만 일부에서는 RIA 개발도 프런트엔드 개발에 포함시키기도 하

기 때문이다.

프런트엔드 개발 현황

미성숙한 개발 프로세스

소프트웨어 공학의 역사는 짧다. 1941년 콘라트 추제(Konrad Zuse)의 Z3가 등장한 시기부

터 계산하더라도 역사가 약 70년 밖에 되지 않았다. 약 70년 동안 미국에서는 많은 연구를 거

듭해 소프트웨어 공학을 발전시켜 왔다. 포트란4, 코볼5, C, 자바 등의 프로그래밍 언어가 패러

다임에 맞춰 등장했고 절차적 프로그래밍(procedural programming)6, 객체 지향 프로그래밍

(object oriented programming)7, 컴포넌트 기반 개발(component based development)8, 관

점 지향 프로그래밍(aspect oriented programming)9, 애자일 소프트웨어 개발(agile software

development)10, 테스트 주도 개발(이하 TDD, test driven development)11 등 여러 가지 개발 방

법론이 개발됐다. 그리고 이 과정에서 웹이 탄생했다.

팀 버너스-리(Tim Berners-Lee)12가 첫 서버와 브라우저를 개발한 1990년을 웹이 탄생한 시기

라 보는데 지금으로부터 약 20년 전의 일이다. 1993년 모자이크 브라우저13가 공개되면서 웹은 급

속도로 전 세계에 보급되기 시작했다. 이때부터 웹 개발이라는 분야가 태동했다고 볼 수 있다. 하

지만 70년 동안 연구해 온 많은 개념들이 웹 개발에 모두 녹아들지는 못했다. 자바 개발자였던 한

미국 개발자가 웹 개발에 뛰어들었지만 HTML과 PHP 코드가 서로 뒤엉켜있는 모습을 보고 기

4 http://ko.wikipedia.org/wiki/Fortran

5 http://ko.wikipedia.org/wiki/COBOL

6 http://ko.wikipedia.org/wiki/절차적_프로그래밍

7 http://ko.wikipedia.org/wiki/객체_지향

8 http://ko.wikipedia.org/wiki/컴포넌트_기반_소프트웨어_공학

9 http://ko.wikipedia.org/wiki/관점_지향_프로그래밍

10 http://ko.wikipedia.org/wiki/애자일_소프트웨어_개발

11 http://ko.wikipedia.org/wiki/테스트_주도_개발

12 http://ko.wikipedia.org/wiki/팀_버너스_리

13 http://ko.wikipedia.org/wiki/모자이크_(웹_브라우저)


겁하며 뛰쳐나왔다는 일화가 있을 정도로 웹은 복잡하게 얽혀 있었다. PHP뿐만이 아니다. 그 시

대의 JSP 역시 비즈니스 로직과 HTML을 혼합해 복잡하게 개발했으며 부작용 또한 많았다. 현재

웹은 모델-뷰-컨트롤러(MVC, model view controller)14 프레임워크로 한층 개발이 성숙해졌다.

하지만 모델-뷰-컨트롤러 개념은 웹 이전부터 존재했다. 이전 소프트웨어 개발에서 경험한 시행

착오를 다시 웹 개발에서 겪고 있는 것이다. 그 후 모델-뷰-컨트롤러의 다양한 변종들(MVVM,

MV*), TDD, 행동 주도 개발(이하 BDD, behavior driven development)15 등 웹 개발에 필요한

많은 개념들이 차용되거나 연구됐다.

그럼 이제 프런트엔드 개발을 이야기해 보겠다. 프런트엔드와 벡엔드라고 구분하기 시작한 것은

웹 표준이 대두된 2000년 즈음으로 보고 있다. 야후!에서는 2001년 처음으로 프런트엔드 엔지니

어를 채용했다. 네이버에서는 2006년에 프런트엔드 엔지니어팀이 구성됐다. 네이버를 기준으로

본다면 국내의 프런트엔드는 약 7년의 짧은 역사가 있고 짧은 만큼 프런트엔드 개발 프로세스는

아직 미성숙한 단계다. QUnit16, Grunt17, Less18 등 프런트엔드 개발 도구들이 탄생하고 있지만 프

런트엔드 개발 방법론은 미흡하기만 하다. 그리고 프런트엔드와 백엔드의 개발 분야가 분리됐지

만 현재 개발 방법은 여전히 서로 의존도가 높다.

미성숙한 프런트엔드 개발 프로세스는 저품질의 코드 생산과 많은 개발 시간, 비용으로 그 대가를

치르고 있다.

프런트엔드 지식이 부족한 서버 개발자

국내에서는 프런트엔드 개발을 어떻게 하고 있을까? 근래 이런 경우는 드물지만 백엔드 개발자가

프런트엔드까지 포용하는 방식으로 진행하기도 한다. 이는 인력의 문제 때문일 수도 있고 프런트

엔드 개발의 가치를 아직도 낮게 평가하기 때문일 수도 있다.

프런트엔드와 백엔드를 분리했다는 것은 한 사람이 두 가지 일을 하기 어렵다는 것을 뜻한다. 웹

표준19과 웹 접근성20, 브라우저 렌더링 원리를 고려한 마크업, 크로스 브라우징, 자바스크립트 안

14 http://ko.wikipedia.org/wiki/모델-뷰-컨트롤러

15 http://en.wikipedia.org/wiki/Behavior-driven_development

16 http://qunitjs.com

17 http://gruntjs.com

18 http://lesscss.org

19 http://ko.wikipedia.org/wiki/웹_표준

20 http://ko.wikipedia.org/wiki/웹_접근성


티 패턴, 자바스크립트 성능 최적화, HTTP 통신 원리를 고려한 코드 작성 등 프런트엔드 개발을

위해 갖춰야 할 많은 전문 지식이 있다. 하지만 이런 특징을 배제한 채 한 명의 백엔드 개발자가 모

든 개발을 주도하면 어떤 문제가 생길까?

아래 코드는 실제 프로젝트에서 자바 개발자가 개발한 자바스크립트 코드를 읽다가 만난 것이다.

var sUserName = $.get('/profile/12231/name');

// do something...

jQuery의 get 메서드는 비동기 메서드이므로 아래 코드와 같이 비동기 처리 결과를 받을 수 있게

콜백으로 작성해야 한다.

var jqXhr = $.get('/profile/12231/name', function(sUserName){

// do something...

});

프런트엔드 기술 지식이 부족한 백엔드 개발자가 이런 실수를 자주 한다.

다른 예로 다음 HTML 코드를 살펴보자.

<head>

<meta charset="UTF-8"/>

<title>Spinbox</title>

<link rel="stylesheet" href="./css/style.css"/>

<script src="./resources/vendor/jindo/jindo.desktop.all.ns.js"></script>

<script src="./src/namespace.js"></script>

<script src="./src/module/spinbox.js"></script>

<script src="./src/module/spinboxModel.js"></script>

</head>

무엇이 문제일까? HTTP 요청을 최소화하도록 모듈화해 여러 개로 나눈 자바스크립트 파일을 하

나로 합쳐야 한다고 생각했다면 그것도 정답이다. 하지만 더 주의해서 볼 것은 script 태그를 head

태그 안에 작성했다는 것이다. 심지어 HTML 코드 중간중간에 script 태그를 두는 경우도 있는데

script 태그가 로드되기 전까지 렌더링을 멈추기 때문에 이는 성능에 악영향을 미친다. 최신 브라


우저는 이 문제를 어느 정도 개선했다고는 하지만 모든 사용자가 항상 최신 브라우저를 사용하지

는 않는다.

마지막으로 한 가지 더 살펴보자.

var list = $.ajax({url: "/projects", async: false}).responseText;

if(eval(list)){

// do something...

}

eval 함수는 성능에도 악영향을 미치지만 AJAX21 호출 결과를 바로 eval 함수로 컴파일하면 인

젝션 공격에 취약한 문제가 있다. 꼭 필요한 곳에 잘 사용하면 좋은 함수지만 남용하거나 잘못 사

용하면 문제를 일으킨다. 물론 프런트엔드 기술 지식이 충분한 백엔드 개발자도 있다. 하지만 대

부분의 백엔드 개발자는 백엔드에 관한 전문 기술 지식은 풍부하지만 프런트엔드에 관한 기초적

이며 이론적인 부분뿐만 아니라 실무에서 만나게 되는 수많은 기술적 예외 사항을 놓치는 일이 많

다. 만일 자바스크립트뿐만 아니라 마크업까지 백엔드 개발자가 병행한다면 많은 개발 기간이 소

요될 뿐만 아니라 품질이 낮은 소프트웨어를 사용자에게 제공하게 될 수도 있다. 또 유지보수는

더욱 어려워지고 많은 비용을 지불하게 될 것이다.

백엔드와 프런트엔드의 개발 의존성

이제는 프런트엔드 개발자와 백엔드 개발자가 파트를 나눠 개발하는 경우를 이야기하겠다. 최근

몇몇 스타트업22에서도 프런트엔드 개발자를 채용하는 공고를 볼 수 있는데, 이런 경우 보통은 프

런트엔드 개발자와 백엔드 개발자가 함께 프로젝트를 시작하게 될 것이다. 여기까지는 괜찮았지

만 개발 환경에서 여실히 문제가 드러난다.

21 Asynchronous JavaScript and XML의 약자로 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 기술을 말한다.

22 설립한 지 오래되지 않은 신생 벤처기업을 뜻하며 미국 실리콘밸리에서 생겨난 용어다.


그림 1-2 백엔드 의존도가 높은 관행적 개발

프런트엔드 개발 산출물은 정적 파일들이다. 그리고 백엔드의 프레임워크(스프링 프레임워크 등)

는 이런 정적 파일을 포함하고 있다. 프런트엔드 개발은 자연스럽게 백엔드 개발 환경 속에서 진

행되며 백엔드 개발에 의존적일 수밖에 없다. 백엔드 개발자가 페이지를 생성하지 않으면 자바스

크립트 개발을 할 수 없으며, HTTP API가 특정 이유로 실패하거나 개발이 지연되면 AJAX를 이

용한 개발이 어려워진다. 또 프런트엔드 개발자가 백엔드의 개발 환경을 설정해야 로컬에서 개발

할 수 있는 환경이 갖춰지는 불편함을 초래한다. 프런트엔드 개발은 정적 파일을 다루는 것이므로

웹 서버를 제외한 자바, PHP 같은 서버 스크립트를 설정할 필요는 없다.

이렇게 개념상 프런트엔드와 백엔드는 분리됐지만 개발 환경이 분리되지 않으면 결국 각 분야를

이해하는 데 많은 시간을 허비하게 되며 필요하지 않은 협의를 해야 할 수도 있고 개발 과정도 복

잡해진다.

지금까지 프런트엔드 개발이 무엇이고, 프런트엔드 개발은 어떻게 분류하는지, 프런트엔드 개발

의 문제점은 무엇인지 살펴봤다. 다음 절에서는 백엔드 의존도가 높은 개발 프로세스를 어떻게 분

리하면 효율적으로 프런트엔드 개발을 할 수 있는지, 네이버에서는 어떤 프로세스로 프런트엔드

개발을 하고 있는지 간략히 소개한다.


프런트엔드 개발 프로세스

새로운 프로젝트 시작

새로운 프로젝트가 시작되면 기획을 하게 된다. 기획의 산출물인 기획서가 어느 정도 완성될 시점

에 디자이너는 디자인을 시작하고 백엔드 개발자는 아키텍처 설계와 패키지 설계를 시작한다. 여

기서는 프런트엔드 개발 위주로 프로세스를 설명하려고 한다. 기획 단계는 개발과 관련 있는 산출

물 위주로만 언급한다.

프런트엔드 개발 시작

프런트엔드 개발자는 기획서를 받아 분석하고 기술적으로 구현 불가능한 요소가 있는지 파악해

조정한다. 자바스크립트 개발자는 전체 명세를 파악해 자바스크립트 개발이 필요한 요소를 찾아

서 설계한다. 마크업 개발자는 디자인 파일(대표적으로 PSD 파일)을 공유 받아 디자인을 살펴본

다음 시맨틱한 요소23를 디자인하고 스타일링에 필요한 이미지를 추출해 마크업을 개발한다. 그리

고 마크업 개발 산출물인 HTML 파일이 자바스크립트 개발자와 백엔드 개발자에게 제공되면 본

격적으로 개발을 시작하게 된다.

기획서 산출 후 디자이너 및개발자에게 배포

프로젝트 기획 시작 /기획서 산출 백엔드 설계 백엔드 구현

디자인 작업

마크업 설계

자바스크립트 설계

진행

제공

디자인 산출

마크업 작업 디자인 산출

자바스크립트 산출 자바스크립트 산출

백엔드 아키텍처 설계 및패키지 설계

디자인 산출물마크업 개발자에게 제공

기획서 분석 및구현 불가능 요소 파악

기획서 분석 및 설계구현 불가능 요소 파악

자바스크립트 산출물백엔드 개발자에게 제공

마크업 산출물 백엔드와자바스크립트 개발자에게 제공

그림 1-3 효율적인 웹 개발 흐름도

23 FORM, TABLE, IMG 등과 같이 태그 이름만 보고도 용도나 역할을 짐작할 수 있는 태그를 말한다.


마크업 개발자는 백엔드와 자바스크립트를 모르더라도 디자인과 기획서만을 참고해 마크업을 개

발할 수 있다.

문제는 자바스크립트 개발이다. 2014년 7월 현재까지도 대부분은 자바스크립트 개발이 백엔드

개발에 직접 의존하는 방식으로 개발했다.

그림 1-4 개발 의존성으로 불필요한 작업 유발

자바스크립트를 개발한다고 하자. 백엔드가 JSP로 구현된다면 이클립스를 비롯해 자바와 톰캣

을 설치해 백엔드 소스 코드가 제대로 동작하게 만들어야 한다. 그래야만 HTML 페이지가 제대

로 보이고 백엔드의 HTTP API를 사용해 자바스크립트를 구현할 수 있기 때문이다. 그런데 이렇

게 개발하면 자바스크립트 개발은 백엔드의 개발 상태에 따라 많은 영향을 받게 된다. 예를 들어

AJAX 통신으로 자바스크립트 모듈을 개발해야 할 때 AJAX로 요청할 수 있는 HTTP API를 백

엔드 개발에서 구현하지 않았다면 자바스크립트 개발은 더 이상 진행할 수 없다. 또 HTTP API를

구현하더라도 오류가 나거나 이미 사용하고 있는 HTTP API의 형태를 갑작스럽게 바꿔 버리면

자바스크립트 개발은 힘들어진다. 이 문제를 해결하려면 백엔드 개발자와 프런트엔드 개발자는

오랜 시간동안 논의해야 한다.


그림 1-5 소통이 복잡하고 의존성이 높은 개발

따라서 자바스크립트 개발자는 기획서를 기준으로 백엔드 개발자와 필요한 HTTP API의 형태를

디자인하고, 반환되는 JSON(또는 XML) 타입을 명확하게 결정해 문서화하는 등 개발에 관련해

여러 가지를 협의해야 한다. 이것은 자바스크립트 개발자와 백엔드 개발자 사이의 일종의 약속으

로 인터페이스 역할을 한다.

그림 1-6 자바스크립트 개발과 백엔드 개발 간의 인터페이스 역할

앞에서는 자바스크립트 개발이 일방적으로 백엔드 개발에 의존했지만 이 인터페이스를 사용하면

개발 분야 간 의존도가 낮아진다. 이제 자바스크립트 개발자는 백엔드 개발 상태를 알 필요가 없

으며 API 개발이 지연돼도 자바스크립트 개발에는 영향을 미치지 않는다. 또 불필요한 서버 개발

환경을 구성하지 않아도 된다. 자바스크립트 개발자는 제공받은 마크업 산출물과 기획서, HTTP

API 인터페이스를 기준으로 자바스크립트 UI 모듈을 개발한다. 각각 독립적으로 개발할 수 있어

생산성이 높아진다.


프런트엔드 개발 산출물 배포

마크업 산출물을 배포하는 방법에는 깃(Git)과 같은 저장소를 이용하거나 직접 압축 파일을 전달

하는 등 여러 가지 방법이 있다. 네이버에서는 웹에서 페이지별로 구분된 마크업 리스트를 제공하

고 필요한 리스트를 클릭하면 마크업 산출물을 다운로드할 수 있는 시스템을 개발해 사용한다.

자바스크립트 산출물은 개발된 UI 모듈의 주의 사항 등을 서술하고 JSDoc 등을 사용해 문서화한

다. 개발할 때 여러 파일로 분할된 자바스크립트 파일은 백엔드 개발자가 전부 알 필요는 없으므

로 하나의 파일로 합치고 압축해서 배포한다. 파일을 서버에 배포하면 예상치 못한 버그를 만날

수 있는데 조금 더 효율적으로 디버깅하기 위해 스테이징 서버24에는 자바스크립트를 하나로 합쳤

지만 압축하지 않는 파일을 사용하고 리얼 서버25에는 압축한 파일을 사용한다. 마크업과 마찬가

지로 웹 페이지에서 다운로드할 수 있게 배포할 수도 있지만 저장소만 공유해 배포해도 크게 문제

는 없다.

정리

이 장에서는 프런트엔드 개발은 무엇인지, 프런트엔드 개발 관행엔 어떤 문제가 있는지 살펴봤다.

그리고 프런트엔드 개발 프로세스를 간략히 소개하면서 개발 분야 간 의존성을 최소화하는 방법

에 대해서도 이야기했다.

대부분의 회사에서는 개발 분야 간 직접 의존하는 방식으로 개발을 한다. 이 방식은 개발 비용이

매우 많이 든다. 그럼 프런트엔드가 백엔드에 강하게 의존하게 만드는 가장 큰 원인이 무엇이었을

까? 바로 API다. 서비스 특성상 AJAX 통신으로 데이터를 주고받아야 한다면 자연스럽게 자바스

크립트 개발은 백엔드에 의존하게 된다. 이때 HTTP API를 인터페이스로 쓴다면 백엔드에 의존

하지 않고 병렬적으로 개발할 수 있음을 알았다.

24 실제 서비스 서버와 같은 환경이지만 테스트를 하기 위해 운영하는 서버를 말한다.

25 실제 서비스하는 서버를 말한다.

02. IDE와 에디터 29

마크업 개발이 복잡해지면서 Less, Sass26와 같은 확장 언어와 개발자 도구라 볼 수 있는 Emmet27

등이 등장했고 자바스크립트 개발이 중요해지면서 jQuery28, BackboneJS29, AngularJS30 같은 라

이브러리와 프레임워크가 쏟아지기 시작했다. 확장 언어와 프레임워크를 사용하면서 단순한 텍스

트 편집기로는 개발을 감당할 수 없는 수준에 다다랐다. 이 장에서는 효율적으로 프런트엔드를 개

발할 수 있게 하는 IDE를 설명한다. 그리고 프런트엔드 개발 도구로 네이버에서 활용하고 있는 웹

스톰을 소개하고 왜 웹스톰을 채택했는지도 설명한다.

유명한 에디터

이클립스

이클립스31 이야기는 1990년대 후반부터 시작된다. IBM에서는 당시 다양한 플랫폼이 있었

기 때문에 자바의 멀티 플랫폼에 주목하고 있었다. 1998년 당시엔 엠바카데로 테크놀로지스

의 JBuilder32, 시만텍의 VisualCafe33, IBM의 VisualAge34 등 1세대 자바 개발 도구가 있었는데

26 http://sass-lang.com

27 http://emmet.io

28 http://jquery.com

29 http://backbonejs.org

30 http://angularjs.org

31 http://www.eclipse.org

32 http://www.embarcadero.com/products/jbuilder

33 http://en.wikipedia.org/wiki/Visual_Café34 http://en.wikipedia.org/wiki/IBM_VisualAge

IDE와 에디터02


IBM은 자바 기반을 넓히고 공개 커뮤니티를 활성화하려면 타사의 개발 도구까지 통합할 수 있는

공통 플랫폼 개발이 필요하다고 생각했다. 공통 플랫폼 개발을 기본 목표로 한 프로젝트가 1998

년 11월에 IBM에서 시작됐고 이 프로젝트를 담당한 것은 VisualAge를 개발했던 OTI(Object

Technology International) 연구소35였다.

2001년 11월 IBM은 이클립스를 더욱 대중화시키기 위해 오픈 소스화하고 터보 파스칼을 릴리스

한 볼랜드(Borland)36를 시작으로 MERANT37, QNX Software Systems38, IBM 래쇼날 소프트

웨어(IBM Rational software)39, WebGain40, 리눅스 배포판을 릴리스하는 레드햇(RedHat)41과

수세(SuSE)42 등의 회사와 함께 공동으로 초기의 eclipse.org인 Eclipse Board of Stewards를 설

립한다. 오픈 소스로 공개된 이클립스는 짧은 시간에 많은 개발자의 관심을 끌게 됐다.

하지만 IBM 이외의 다른 단체는 이클립스에 거의 기여하지 않았는데, 그 이유는 IBM이 이클립

스에 대한 제어 권한을 모두 가지고 있다고 생각했기 때문이었다. IBM은 이클립스의 인기를 유지

하기 위해 IBM과 이클립스를 분리할 필요가 있다고 생각했고 2004년 2월 2일 Eclipse Board of

Stewards는 이클립스 조직의 재구축을 발표했다. 이 조직이 바로 비영리 조직이며 이클립스의 모

든 권한이 이관된 이클립스 재단43이었다.

이클립스 재단이 발표되고 이클립스는 한층 더 발전해 이클립스 3.x 버전부터 4.x 버전까지 출시

됐고 2014년 7월, 현재 210개 이상의 회원사44와 230개 이상의 하위 프로젝트45가 있는 거대한 오

픈 소스로 성장하고 있다.

이클립스의 배포판은 많은 플러그인이 빌트인돼 있어 자원을 많이 사용한다. 프런트엔드 개발 목적

으로 사용한다면 적은 자원으로도 사용할 수 있지만 문제는 이 기능들이 아직은 충분히 안정적이지

못하고 완성도도 부족하다는 것이다. 자바스크립트 객체 프로퍼티 자동 완성 기능은 특정 패턴에만

잘 동작한다. Backbone.js와 같은 프레임워크로 생성된 객체는 프로퍼티를 힌팅46하지 못한다. 어

35 http://www.oti.com/oti/portal/main

36 http://www.borland.com

37 http://www.merant.com/index.php/en

38 http://www.qnx.com

39 http://www-01.ibm.com/software/rational

40 http://en.wikipedia.org/wiki/WebGain

41 http://www.redhat.com

42 https://www.suse.com

43 http://www.eclipse.org/org/foundation

44 http://eclipse.org/membership/showAllMembers.php

45 http://projects.eclipse.org/list-of-projects

46 힌팅(또는 타입 힌팅)은 객체가 프로퍼티로 무엇을 가지고 있는지 실시간으로 알려주는 기능을 말한다.


떤 객체의 프로퍼티를 사용하려고 그 객체의 소스 파일을 들여다 보는 것은 시간 낭비다. 자바스

크립트 리팩터 기능도 지원하고 있지만 미흡하다. 그리고 정적 분석이 안 되기 때문에 오류가 있

는 코드 상태를 개발자에게 알려주지 못한다. 이를테면 getUserProfiles()를 getUserProfles()로

잘못 작성했다고 가정해보자. 웹 브라우저를 열고 오류 로그를 봐야만 오타로 버그가 발생했다는

것을 알게 되는 일이 많다. 또 Node.js를 개발해야 한다면 어떨까? 이클립스는 Node.js의 플러그

인도 보유하고 있지만 미흡한 상태다.

이런 이유로 프런트엔드 개발자들의 갈증을 해소시켜 줄 새로운 IDE를 찾게 됐다. 이클립스는 프

런트엔드 개발에서는 크게 매력이 없다.

앱타나 스튜디오

앱타나 스튜디오47는 이클립스를 기반으로 한 웹 개발 도구다. 처음에는 HTML 개발을 주력으로

했지만 점차 자바스크립트뿐만 아니라 루비, PHP, 파이선과 같은 프로그래밍 언어도 개발할 수

있게 발전했다. 마음에 드는 웹 개발 도구가 없던 시절에 앱타나는 사막의 우물과 같은 존재였다.

앱타나 스튜디오에서는 HTML 태그 힌팅, 자바스크립트나 jQuery의 프로퍼티 힌팅과 같은 편

리한 기능을 제공했고 SFTP, FTPS 연결 기능도 당시엔 매우 유용한 기능이었다. 하지만 이클립

스를 기반으로 했기에 컴퓨터 자원을 너무 많이 사용했다.

초기엔 무료 버전인 커뮤니티 에디션과 유료 버전인 앱타나 스튜디오 프로가 있었지만 2009년부

터 유료 버전의 기능을 무료 버전에서도 사용할 수 있게 하고 유료 버전을 없앴다. 처음에는 앱타

나에서 개발을 주도했지만 2011년 앱셀러레이터48에 인수49되면서 앱셀러레이터의 주도로 앱타

나 스튜디오를 개발하게 됐다. 앱셀러레이터는 티타늄50을 주력으로 개발하는 업체였다. 티타늄은

HTML, CSS, 자바스크립트, 루비, 파이선과 같은 웹 개발 기술을 사용하면서 아이폰, 아이패드,

안드로이드 등의 앱 개발을 돕는 일종의 하이브리드 웹 애플리케이션 개발 프레임워크다. 그 당시

티타늄은 디버거 및 코드 완성, 타입 힌팅 등 개발에 필요한 기능을 갖춘 전용 IDE가 없었기 때문

에 앱타나 개발자들과 함께 티타늄 개발 환경을 더욱 강화해 개발 시장에서 점유율을 높여보자는

전략의 결과물이었다.

47 http://www.aptana.com

48 http://www.appcelerator.com

49 http://www.appcelerator.com/blog/2011/01/appcelerator-acquires-leading-ide-aptana

50 http://www.appcelerator.com/titanium/titanium-sdk


이어서 티타늄과 앱타나 스튜디오의 기술을 결합한 IDE를 출시할 예정이라고 발표했고 2011년

4월 4일 많은 개발자의 관심 속에서 티타늄 스튜디오 1.0 프리뷰 버전51을 공개했다. 이 글을 쓰는

2014년 7월의 티타늄 스튜디오 버전은 3.2.3이다. 앱타나 스튜디오 역시 앱셀러레이터에 인수된

이후에도 지속적으로 릴리스되고 있다.

앱타나 스튜디오는 이클립스보다 상대적으로 컴퓨터 자원을 덜 사용하지만 소스 코드의 양이 많

아지거나 플러그인을 추가하면 자원을 많이 사용하기 때문에 사용성이 떨어지는 문제가 있었다.

이클립스보다는 프런트엔드 개발에 필요한 여러 가지 기능을 더 제공하지만 구문 강조나 사용하

지 않는 변수를 추적하는 기능 등 개발에 필요한 기능을 지원하지 않는 단점이 있다. 그래서 많은

프런트엔드 개발자는 여러 가지 기능을 통합하고 안정적으로 제공해주는 IDE인 웹스톰을 사용하

거나 반응이 빠르고 사용성이 뛰어난 서브라임 텍스트로 돌아섰다.

서브라임 텍스트

서브라임 텍스트52 편집기는 구글 엔지니어였던 존 스키너(Jon Skinner)가 만들었다. 그는 2005

년 12월부터 기존의 텍스트 편집기보다 부드럽게 스크롤할 수 있고 코드를 확대, 축소할 수 있는

3D 가속 기능을 갖춘 텍스트 편집기를 상상했다고 한다.

또한 텍스트 편집에 많은 시간을 할애하는 개발자를 위해 ‘더 편리하고 잘 활용할 수 있는 편집기’

라는 철학을 가지고 2007년 11월에 프로토타입 버전을 개발했다. 이때 자신의 신념을 관철시킨

편집기를 완성하려고 구글 엔지니어를 그만두고 서브라임 텍스트 개발에 더욱 몰두했다.

2008년 서브라임 텍스트 편집기 버전 1.0이 발표됐고 그 후 여러 피드백을 적용하고 개선해 멀티

스크린, 풀 스크린, 동시 편집 등의 기능을 추가하면서 지금과 유사한 서브라임 텍스트의 모습을

갖추게 된다. 2014년 7월, 현재 서브라임 텍스트 2를 거쳐 서브라임 텍스트 3까지 공개됐다.

서브라임 텍스트는 반응이 빠르고 사용성이 뛰어나며 개발에 필요한 다양한 플러그인을 갖추고

있다. 또한 다중 커서와 빠른 검색 기능 등 편집에 필요한 편리한 기능도 포함돼 있다. 이러한 장점

때문에 많은 프런트엔드 개발자가 주 에디터로 사용하며 개발자뿐만 아니라 평론가나 소설가 같

이 글을 쓰는 사람들도 사용하고 있다. 하지만 개발에 필요한 여러 가지 도구를 플러그인으로 설

51 http://www.appcelerator.com/blog/2011/04/titanium-studio-1-0-preview-with-titanium-mobile-debugging

52 http://www.sublimetext.com


치할 필요가 없으며 조금 더 인공지능적인 코드 분석 능력을 갖춘 IDE를 바라는 개발자에게는 큰

매력으로 다가오지 않는다.

웹스톰

웹스톰53은 IntelliJ로 유명한 젯브레인스(JetBrains)54에서 개발한 윈도우, 맥 OS X, 리눅스의 크

로스 플랫폼을 지원하는 HTML, CSS, 자바스크립트 IDE다. 2009년부터 IntelliJ를 기반으로 한

Web IDE라는 프로젝트명으로 개발되다가 2010년에 PHPStorm과 웹스톰으로 분할 변경됐고

같은 해 1.0 베타 버전을 발표했다. PHPStorm은 웹스톰의 기능을 포함하고 있는 PHP IDE 도구

다. PHP로 개발할 일이 적고 프런트엔드 개발이 대부분이라면 웹스톰을 채택하면 된다.

2014년 7월, 현재까지 많은 개선과 발전을 거듭해 PHPStorm과 웹스톰은 버전 8까지 개발됐다.

얼마나 많이 개선됐는지는 WebStorm & PhpStorm 블로그55에서 확인할 수 있다. 프런트엔드 개

발 도구에는 없던 많은 기능을 갖추고 있어 마니아층이 생기기 시작했다.

웹스톰을 채택한 이유

이전까지의 프런트엔드 개발 도구는 기능이나 안정성이 상당히 미흡했다. 이클립스는 프런트엔드

개발 지원이 빈약했고 지원하는 모듈이 있더라도 안정적이지 못했다. 앱타나 스튜디오는 컴퓨터

자원을 많이 사용하고, 서브라임 텍스트는 그나마 선전하고 있지만 IDE로 보기 어려운 텍스트 편

집기다. 프런트엔드 개발자들은 미흡한 환경 속에서 자신만의 노하우를 쌓아가며 개발하고 있었

다. 컴퓨터 자원을 많이 사용하지만 자바를 훌륭히 지원하는 이클립스를 보며 프런트엔드 개발자

들은 이런 IDE가 없어서 아쉬워했다.

이클립스는 자바로 개발할 때 자동 완성, 코드 분석, 코드 품질 체크, 테스트 러너56를 통한 쉬운 코

드 검증, 막강한 디버깅 기능, 신뢰할 수 있는 리팩터 기능 등을 지원하며 개발의 생산성을 높여 준

다. 이클립스의 이런 기능을 제공하면서도 프런트엔드 개발에 적합한 IDE로 웹스톰이 있었다. 웹

스톰은 버전 1.0부터 이 기능 중 대부분을 지원했고 버전 8은 이 기능 전부를 지원한다.

53 http://www.jetbrains.com/webstorm

54 http://www.jetbrains.com

55 http://blog.jetbrains.com/webide/category/webstorm/page/20

56 테스트 러너(test runner)는 작성된 테스트 코드를 여러 가지 경우로 자동 실행해주는 프로그램을 말한다.


네이버에서 웹스톰을 채택하는 데 주요한 역할을 한 기능 몇 가지를 소개하겠다.

• 자바스크립트의 코드 힌팅 기능

코드 힌팅 기능으로 개발할 때 코드를 여러 번 볼 필요가 없고 일일이 입력할 때보다 오타율도 낮아 생산성

이 향상된다.

• 신뢰할 수 있는 자바스크립트 리팩터 기능

리팩터링57을 도와주는 도구를 리팩터라고 한다. 다른 프런트엔드 IDE에서는 리팩터 기능을 제공하지 않

지만 웹스톰은 자바스크립트에 특화된 리팩터를 제공한다. 이름 변경, 추출, 직접 삽입 등 많이 사용하는

기능을 지원한다. 리팩터를 사용하기 이전에는 관련 파일을 직접 보며 소스 코드를 고쳐야 했다. 그 와중에

많은 실수를 범했고 이는 개발 속도를 저하시킨 주된 원인 중 하나이기도 하다.

• 정적 분석 기능

정적 분석 기능으로 오타를 검증하거나 선언되지 않은 함수나 프로퍼티, 변수 사용을 추적하고 오류를 일

으키는 코드 등을 코딩 중에 실시간으로 개발자에게 알려 준다. 따라서 브라우저를 열어 개발 중인 소스를

실행하기 전에 기본적인 오류를 알아낼 수 있다.

• 안정적인 속도

이런 모든 기능을 지원하면서 충분히 빠르고 안정적이다.

알고 갑시다 웹스톰 라이선스 비용

웹스톰은 30일 평가 버전을 사용할 수 있으며 오픈 소스 프로젝트 개발자에게는 무료로 라이선스가 제공

된다. 또 개인용 라이선스는 49달러(한화 약 5만 2천 원)로 상대적으로 저렴한 편이며 구입 후 1년까지는

메이저 업그레이드가 무료다. 자세한 라이선스 비용은 다음 표를 참고한다.

라이선스명 구입 가격 업그레이드 가격 라이선스 설명

Commerical License 99달러(한화 약 10만 원) 49달러(한화 약 5만 원) 기업용 라이선스

Personal License 49달러(한화 약 5만 원) 29달러(한화 약 3만 원) 개인용 라이선스

Academic License 29달러(한화 약 3만 원) 19달러(한화 약 2만 원) 학생이나 교사용 라이선스

Classroom License 무료 무료 교육기관용 라이선스

Open Source

Project License

무료 무료 오픈 소스 프로젝트용 라이선스

MVP License 무료 무료 MVP(Microsoft Most Valuable

Professional)용 라이선스

57 개발하다 보면 관리하기 힘든 코드, 변경하기 힘든 코드, 망가지기 쉬운 코드, 과도한 코드, 의미가 불분명한 코드 등을 작성하거나 보게 되는데, 겉

으로 보이는 동작을 바꾸지 않고 이러한 코드를 이해하거나 수정하기 쉽게 바꾸는 것을 리팩터링이라고 한다. 리팩터링에 대한 자세한 내용은 “5장.

리팩터링 기법(95쪽)”을 참고한다.


웹스톰 설치

웹스톰을 설치하기 전에 Node.js를 설치한다. Node.js는 라이언 달(Ryan Dahl)이 자바스크립트

V8 엔진을 이용해 만든 서버 사이드 자바스크립트다. Less, Grunt 같은 프런트엔드 개발에 필요

한 많은 도구가 Node.js를 기반으로 개발되기 때문에 도구를 사용하려면 반드시 설치해야 한다.

이 책에서는 전체적으로 프런트엔드 개발에 필요한 도구와 함께 웹스톰을 기반으로 설명하므로

Node.js를 먼저 설치해야 한다.

Node.js 설치

맥에서 인스톨러로 설치

Node.js를 사용하려면 Node.js가 의존하고 있는 라이브러리와 빌드 환경이 갖춰져야 한다. 이 환

경은 애플의 개발자 도구인 Xcode를 설치하면 해결되므로 앱 스토어에서 Xcode를 검색해서 설

치한다.

Xcode를 설치하고 나면 Node.js 다운로드 페이지(http://nodejs.org/download)에서

Macintosh Installer를 클릭해 설치 파일을 실행한다. Node.js는 기본적으로 ‘/usr/local/bin’ 경

로에 설치된다.

맥에서 소스 코드로 설치

인스톨러 대신 소스 코드를 직접 빌드해서 설치할 수 있다. Node.js 다운로드 페이지에서 Source

Code를 클릭해 압축 파일을 다운로드한다.

터미널에서 다음을 참고해 압축을 해제한다.

$tar –xvzf node-v0.10.xx.tar.gz

압축을 해제했으면 빌드를 시작한다. prefix 옵션으로 Node.js를 설치할 디렉터리를 지정할 수 있다.

$ cd node-v0.10.xx/

$ ./configure --prefix=/usr/local/node-v0.10.xx --debug

$ sudo make

$ sudo make install


설치가 완료되면 PATH를 설정해야 한다. 텍스트 편집기(여기서는 vim 사용)로 .profile 파일을

열어서 아래와 같이 수정하고 저장한다.

$ vim ~/.profile

NODE_HOME='/usr/local/node-v0.10.xx/bin'

export PATH=$PATH:$NODE_HOME

$ source ~/.profile

이제 Node.js 설치 상태를 확인한다. 터미널에서 node ––version을 입력해 동작 상태를 알 수

있다.

윈도우에서 설치

Node.js 다운로드 페이지(http://nodejs.org/download)에서 Windows Installer를 클릭해 설

치 파일을 다운로드한 다음 실행한다. 다른 설치 마법사처럼 Next를 클릭해 설치를 완료한다.

설치가 완료되면 윈도우의 커맨드 라인에서 node 명령어를 사용할 수 있다. Node.js를 설치할 때

인스톨러가 자동으로 Node.js의 환경 변수까지 등록해주기 때문에 바로 명령어를 사용할 수 있

다. 만약 Node.js를 설치했는데도 명령어를 찾지 못한다면 컴퓨터(내 컴퓨터) 아이콘을 마우스 오

른쪽 버튼으로 클릭하고 속성 > 고급 시스템 설정 > 고급 > 환경 변수를 클릭한 다음 시스템 변수

에서 Path > 편집을 클릭해 사용자 변수를 등록해야 한다.

그림 2-1 윈도우에서 Node.js 환경 변수 설정

웹스톰 설치

웹스톰은 젯브레인스의 가격 정책에 따라 30일 동안 평가 버전을 사용할 수 있다. 웹스톰 공식 홈

페이지에서 Get WebStorm 8을 클릭한다.


다운로드하고 나서 파일을 실행하면 설치 창이 열린다. 웹스톰을 드래그해 Application 폴더로

옮겨 설치를 진행한다.

알고 갑시다 윈도우에서 웹스톰 설치

맥에서는 드래그 앤드 드롭 UI로 설치를 진행하지만 윈도우에서는 설치 마법사로 설치를 진행한다.

설치 후 처음 시작하면 설정할 디렉터리를 정하는 Complete installation 창이 열린다. 설치 경로

를 변경하지 않을 경우에는 OK를 클릭한다.

라이선스를 등록하는 Enter WebStorm License 창에서 라이선스가 있으면 라이선스 키를 입력

하고, 없으면 30일 평가판을 사용한다. 30일 평가판을 사용하려면 Evaluate for free for 30 days

를 클릭한 다음 OK를 클릭한다.

웹스톰을 시작하면 Welcome Screen 창이 먼저 열린다. 이 창은 웹스톰의 시작 화면으로 볼 수 있

다. 이 창에서 여러 가지 기본 설정값을 바꿀 수 있다. 최초로 웹스톰을 실행하면 Welcome Screen

창과 WebStorm Initial Configuration 창이 같이 열리는데 여기서는 단축키(Keymap scheme)

와 테마(IDE theme), 색과 글꼴(Editor colors and fonts)을 지정할 수 있다. 웹스톰에서는 여러

개의 테마 중에서 선택해서 쓸 수 있지만 이 책에서는 특별히 테마를 바꾸지 않겠다.

그림 2-2 웹스톰 초기 설정

웹스톰을 설치했다면 이제 Node.js의 Sources of Node.js Core Modules 경로를 설정해야 한

다. 설정한 경로는 Node.js 프로그래밍 시 타입 힌팅으로도 사용되고 Node.js의 디버깅에도

사용된다. 아직 Node.js를 설치하지 않았다면 2장의 “Node.js 설치(35쪽)” 절을 참고해서 설


치한다. 설치를 마쳤으면 Preferences(윈도우에서는 Setting) 창을 열고 JavaScript > Node.

js and NPM을 클릭해 Node.js 페이지를 연다. Preferences 창의 단축키는 맥 OS X에서는

command+,(command 키와 ,(쉼표) 키를 함께 누른다)고 윈도우에서는 Ctrl+Alt+S다.

그림 2-3 Node.js 설정

알고 갑시다 npm

npm(node package manager)은 아이작 슐레터(Isaac Z, Schlueter)가 만든 것으로 노드 모듈을 관

리하기 쉽게 도와주는 매니저다. Node.js 애플리케이션을 개발한다면 여러 가지 Node.js 모듈을 사용

할 것이다. 개발한 애플리케이션을 배포할 때 의존하는 모듈까지 함께 배포한다면 불필요하게 용량이 커

지고 사용한 모듈의 버전 관리에 문제가 발생한다. 의존하는 모듈은 명시만 하고 협업하는 개발자가 명

시한 모듈을 자동으로 설치하거나 버전 관리를 할 수 있게 도와주는 도구가 npm이다. 의존하는 모듈은

package.json이라는 파일에 명시한다. 근래에는 Node.js 애플리케이션뿐만 아니라 프런트엔드 개발을

할 때도 Node.js 모듈을 많이 사용한다. 이런 모듈로는 Less, Grunt, 카르마 등이 있다. 애플리케이션에

서 의존하는 모듈은 package.json의 dependencies 속성에 작성하고 개발 환경에서 의존하는 모듈은

devDependencies 속성에 작성한다.


Node.js 인터프리터 경로가 제대로 설정돼 있는지 확인한다. 만일 제대로 설정돼 있지 않다면 우

선 Node.js의 실행 파일 경로를 설정한다. 그리고 Node.js Core Modules를 설치한다. Sources

of Node.js Core Modules 메뉴에서 Configure를 클릭하면 Node.js Core Modules를 설치할

수 있는 창이 열린다. 만약 Node.js를 소스 컴파일로 설치했다면 Directory를 클릭해 컴파일 소

스 경로를 지정해 설정을 마칠 수 있다. 인터넷에서 Node.js 파일을 다운로드해서 모듈을 설치하

려면 Download from the Internet을 클릭해 Core Modules를 설치한다.

그림 2-4 Node.js Core Modules 설치

다음과 같이 Node.js Core Modules가 설치되면 모든 설정이 끝난 것이다.

그림 2-5 설치된 Node.js Core Modules


웹스톰 실행

웹스톰과 Node.js 설치를 마쳤으니 제대로 실행되는지 테스트해보자. Welcome screen 창에서

Create New Project 메뉴를 클릭하면 Create New Project 창이 열린다. Project name에는 프

로젝트 이름을 입력하고 Location에는 프로젝트가 저장되는 경로를 지정한다. Project type에서

Node.js Express App을 선택한다. 모든 설정을 완료했다면 OK를 클릭한다.

그림 2-6 Create New Project 창

프로젝트를 자동으로 구성한 다음 메인 창이 열리면 오른쪽 위의 Run 을 클릭해 로컬 서버를

실행한다.

그림 2-7 Run 도구 창


이제 웹 브라우저를 열고 ‘localhost:3000’으로 접속해보자. 성공적으로 접속된다면 Node.js와

웹스톰 설치가 완료된 것이다.

그림 2-8 실행 확인

정리

이 장에서는 프런트엔드 개발에 사용하는 이클립스, 앱타나 스튜디오, 서브라임 텍스트를 간단히

소개하고 장단점을 살펴봤다. 그리고 네이버에서 채택하고 있는 웹스톰을 소개하고 채택한 이유

가 무엇인지 알아봤으며 설치와 설정까지 마쳤다.

IDE나 편집기는 개발자의 취향이 많이 반영되는 도구다. 소개한 도구 모두 마니아층이 있고 사용

하는 이유도 타당하다. 웹스톰도 그런 도구 중 하나지만 편리하고 필요한 기능이 많다. 그래서 이

책에서는 전체적으로 웹스톰을 기반으로 도구와 기법, 개발 흐름까지 설명하고자 한다.

네이버는 이렇게 한다! 프런트엔드 개발 시작하기 : 예제로 배우는...

Documents