개발자가되고싶으세요? IT 입문지식을말하다 고종범 김미진 윤성열 이상민 이재근 전병권지음
l 시작하며 대학 4학년에재학중인한아름이국내굴지의 IT 회사에 2달과정의인턴과정에합류하면서이야기가시작된다. 10년차개발자인구친절멘토의도움을받아좌충우돌프로젝트에적응하는과정을통해 IT 개발자로성장하기위한기초지식을배워나간다. 과연한아름은 2달간의짧은인턴기간을성공적으로마칠수있을까? 여러분도한아름의여정을함께해보길바란다. 이땅의수많은한아름에게큰응원과박수를보낸다. 이름 _ 한아름나이 _24세컴퓨터공학과 4학년여학생이다. 굴지의 IT 회사에 2달과정의인턴으로입사했다. 수능점수에맞춰서컴공과에들어갔기때문에 IT에대해서는아는것이없지만, 새로운것에대한습득능력이매우뛰어나고호감형의얼굴이라많은사람들이친절하게대해준다. 이름 _ 구친절나이 _38세 IT 회사에 10년간다니고있는남자개발자다. 사내에서개발및강의경험도많고호기심도많은편이며기술에대한지식도풍부하다. 두달동안한아름씨를담당할멘토로지정되었다. 개발자가되고싶으세요? IT 입문지식을말하다 지은이고종범, 김미진, 윤성열, 이상민, 이재근, 전병권 초판발행 2015 년 4 월 20 일펴낸이임성춘 펴낸곳로드북 편집장미경 디자인허진하 ( 표지 ), 박진희 ( 본문 ) 주소서울시관악구신림로 29 길 8 101-901 호 출판등록제 2011-21 호 (2011 년 3 월 22 일 ) 전화 02)874-7883 팩스 02)6280-6901 ISBN 978-89-97924-15-8 93000 정가 23,000 원 c 고종범, 김미진, 윤성열, 이상민, 이재근, 전병권 & 로드북, 2015 책내용에대한의견이나문의는출판사이메일이나블로그로연락해주십시오. 잘못만들어진책은서점에서교환해드립니다. 이메일 chief@roadbook.co.kr 블로그 www.roadbook.co.kr
l 저자서문 ( 그렇게, 정말 ) 개발자가되고싶으세요? 약 5년간의지속적인집필활동으로심신이지쳐향후 2년간은집필을하지않기로결정했었다. 그로부터몇개월이지난 12월의어느날 IT 에대해서알고싶은분들에게어떻게하면보다쉽게 IT에접근할수있을까? 하고고민을하다가, 책의목차를잡고있는나를발견했다. 하지만, 주제자체가너무방대하여우리팀에실력이좋은 ( 아직출판계에등극하지않은 ) 고수분들께문의를했고, 대부분흔쾌히동의를해주었다. ( 라고쓰기는했지만, 대부분필자가집필을강요했다. 물론책이출간되는시점에우리팀이아닌분도있지만, 모두필자와같은팀소속이었던분들이집필에참여했다.) 필자가생각한책의분량이많지않아약 2주동안각자맡은분야를집필하고, 3~4 개월정도면출간이될것이라생각했지만, 세상의모든일이그리호락호락하지는않았다. 여러가지이슈들이생기면서책의방향도몇번씩바뀌었지만, 전반적인틀을유지하는것에모두동의하여수많은베타리딩과수정을거친후, 집필을시작한지 15개월만에이책이세상에빛을보게되었다. IT 회사에서는매우많은분야의전문가들이같이일한다. 몇천명이되는회사에서어떤업무는단한명이맡아서수행할수도있고, 어떤업무는몇백명이비슷한일을할수도있다. 이책은비슷한일을하는몇백명의 개발자 들이기본적으로알아두어야하는것들에대해서간단히 ( 때로는좀깊이있게 ) 다루었다. 현업에서 10년이상의경험을갖고있는필자들이꼭필요한내용만포함하도록하기위해서몇번씩원고를다시썼다. 여러분이 10년이상의경험을온전하게전수받기는어렵겠지만, IT 회사에서일하면서선배개발자들과이야기하려면반드시알고있어야하는사항들에대해서정리해놓았기때문에아직회사근무경험이없는독자들에게는분명히많은도움이되리라생각한다. 이책은다음과같이 4 부로나뉜다. 1부 : 인터넷 2부 : 소프트웨어개발프로세스 3부 : 프로그래밍 4부 : 데이터저장소 1, 3, 4부에속하는각장의내용은대부분책하나의분량이나와도부족한내용들이고, 각장에서소개하는내용에대해서전문적으로연구하는 ( 다시말해서그장의기술로밥벌이하고있는 ) 엔지니어들도존재할정도로매우방대한분량의내용들이다. 하지만, 우리는이책에서꼭알아야하는부분만추려서해당분야에대해서전반적인지식이없는분들도쉽게읽을수있도록정리해놓았다. 2부는 ( 아주재미없는 ) 소프트웨어개발프로세스를재미있는사례를통해서소개하기때문에많은독자들에게도움이되리라생각한다. 이책을집필하는기간에결혼도하고수원에서국가를대표하는제품을만들고계신이재근님, 모바일부분에뒤늦게합류하여육아와병행하여열심히집필해주신전병권님, 졸업논문을다섯차례나다시쓰고두번의연이은교통사고로건강상의악재까지겹쳤지만끝까지집필의키보드를놓지않은김미진님, 다년간의많은개발경험으로가장많은분량을소화하면서집필에눈을뜬고종범님, DB 전문가라는말은제발하지말아달라고하면서도 DB와개발에흥미가많은낭만개발자윤성열님께감사의말을전한다. 끝으로, 오랜기간동안저자들을믿어주신로드북출판사의임성춘부장님과필자가내는책의표지디자인을해주기로한약속을지켜주신허진하 디자이너님께감사를드린다. 2015 년 3 월의마지막날공동저자이상민 그러면간단하게어떻게구성되어있는지살펴보자.
l 목차 시작하며 000 지은이의글 000 1 부 _ 인터넷 가로 / 세로모드의지원 76 태블릿화면의지원 76 플랫폼별 UI의특징을구분해사용하자 77 모바일분야의전문가가되려면? 81 정리하며 83 1 장웹은어떻게동작하는걸까? 웹이란도대체무엇일까? 14 웹서비스를왜개발하나요? 사람들은웹을왜사용하나요? 16 웹서비스환경준비, 웹서버 17 브라우저에표시되는웹페이지의정체, 웹의구성요소들 19 웹을위한기초적이지만필수적인기술들 - JavaScript, CSS 24 기술의발전, 웹을위한더확장된기술들 ASP, JSP, PHP 29 갑자기너무어려워요 이런것들을왜사용하는거죠? 33 웹2.0과 HTML5, 웹의재도약 36 파편화와크로스브라우징 (Cross Browsing) 41 웹서비스에멋진이름을붙여보자, 도메인 42 웹서비스를만들어보자 44 웹개발분야의전문가가되려면? 50 정리하며 52 2장요즘은모바일이대세라던데 모바일앱의다양한형태 56 네이티브앱이대체뭔가요 57 모바일웹은뭐죠? 웹은알겠는데 60 그렇다면도대체하이브리드 (Hybrid) 앱은뭐지? 61 이제앱개발은어떻게해야하나요? 64 안드로이드앱개발도구 64 아이폰앱개발도구 67 앱개발과정 68 앱개발시유의해야할사항들 73 다양한크기의모바일기기, 어떻게처리하나? 73 2 부 _ 소프트웨어개발프로세스 3장소프트웨어개발과정을알고싶어요 아이템선정 : 우선무엇을만들지정해야겠지? 89 요구사항분석 : 자, 그럼진지하게생각해보자구! 92 설계 : 어둠을욕하기보다촛불하나켜는게낫다 98 구현 : 아쉽게도컴퓨터는그림을못알아먹는다 102 테스트 : 제대로만들었을까? 104 배포 : 고객님들이사용하실수있도록! 105 정리하며 106 4장. 그냥제가기획서드리면뚝딱만들어지는거아닌가요? 그냥말그대로 요구하는사항 아니야? 110 요구사항도출, 해보니까끝이없던데 112 진짜로이렇게만들어줄수있는거맞죠? 114 문서! 문서! 문서! 118 소설책보다는만화책이읽기쉽지 122 그림그려보기 126 요구사항분석은계속되어야한다. 쭈욱 ~ 131 정리하며 56 5장. 이그림들은뭔가요? 흰건종이고, 까만건 설계란무엇인가? 138
설계대상에는어떤것이있는가? 138 화면설계, UX 설계하기 140 동작과구조의설계로어플리케이션설계하기 142 데이터저장소설계하기 145 네트워크, 시스템구성설계하기 148 요구사항이변경되면설계도변경된다 151 설계분야의전문가가되려면 153 정리하며 155 6장. 저도테스트잘해요. ( 정말?) 테스트가무엇이길래? 158 테스트는어떻게하나요? 160 테스트케이스만드는방법 163 테스트에는어떤것들이있나요? 165 코드를만들면서진행하는단위테스트 166 하나로합쳐서진행하는통합테스트 171 총체적검사를수행하는시스템테스트 172 품질을확인하는인수테스트 175 테스트분야의전문가가되려면? 176 정리하며 177 7장. 작은프로그램하나만들때에도절차라는게필요하군요 시작은창대하였으나그끝은미약하리라?! 180 모든일을처리하는데필요한프로세스 181 프로세스를좌지우지하는방법론 182 소프트웨어개발방법론의종류 184 가장대표적인고전개발방법인폭포수모델 189 최근인기가많은스크럼 194 나한테맞는개발방법찾기 200 정리하며 203 3 부 _ 프로그래밍 8장. 자바, 씨, 씨샵. 들어보긴했는데 Programming Language( 프로그래밍언어 )? 208 프로그래밍언어의종류는많답니다 210 IT 분야의분업화 212 프로그래밍은어떤작업을수행하는것일까? 213 Java 언어구경하기 215 JavaScript로프로그램을직접만들어볼까요? 218 API는개발자의친구 220 정리하며 222 9장. 프로그래밍은어떻게하는거에요? ( 기웃기웃 ) 컴퓨터에는숫자의종류가많답니다 226 어느언어를배우더라도반드시알아야하는내용 230 if 만약에 235 정보들을어디엔가모아두고싶다면 242 for 루프와 while 반복구문 248 프로그래밍언어종합정리 252 정리하며 253 10장. 프레임워크, 도대체그게뭔지 프레임워크가무엇인가요? 258 프레임워크를반드시사용해야하는가? 260 프레임워크에는어떤것들이있나요? 261 웹어플리케이션프레임워크 263 모바일어플리케이션프레임워크 266 프레임워크를직접만들수는없을까? 267 개발분야의전문가가되려면? 268 정리하며 270
4 부 _ 데이터저장소 11장. 저장은그냥파일에하면되는거아닌가요? 데이터베이스란무엇일까? 274 DB의구성요소 280 검색시스템 283 도서관리시스템 - 새로운책의추가, 삭제그리고수정 287 테이블간의릴레이션 289 정규화 293 데이터베이스암호화 297 데이터베이스분야의전문가가되려면? 299 정리하며 300 토막칼럼 데이터베이스개발자는이것을주의해야한다 302 12장. 우리회사도빅데이터한다는데 ~ 빅데이터의사용 306 NoSQL? 310 NoSQL의역사 312 NoSQL의아키텍처 313 NoSQL은단점이없을까? 318 빅데이터를분석하려면툴이필요하다 320 전문가들은빅데이터를어떻게분석할까 324 빅데이터의본질 326 1 부 인터넷 부록 A. 도메인부터웹서비스동작과정까지 330 부록 B. 플레이프레임워크 337 부록 C. 어플리케이션프레임워크 - 스프링 342 부록 D. 프론트엔드프레임워크 - 부트스트랩과 jquery 349 찾아보기 360 01 웹은어떻게동작하는걸까? 02 요즘은모바일이대세라던데
안녕하세요? 앞으로 두달 동안 한아름씨의 멘토를 할 구친절입니다. 지금 4학년이면 몇학번이에요? 안녕하세요? 저는 새로 들어온 한아름 입니다. 01 글쓴이_이재근 웹은 어떻게 동작하는 걸까? (땀을 흘리며)... 아 그렇군요. 그렇다면, 저랑 띠동갑... 정말요? 정말 동안이세요~ 프로젝트 한번 재미 있게 해 보시죠. IT 회사에 인턴으로 입사한 한아름씨는 웹 이라는 단어는 수없이 들어봤지만, 아직도 웹 이라는 단어를 떠 올리면 안갯속의 희미한 풍경을 바라보는 느낌이 든다. 웹이라는 분야는 계속해서 발전하고 있으며, 수많 은 기술의 집합체이기 때문에 알아야 할 것도 많고 배워야 할 것도 많다. 만약 웹에 대해 많은 것을 알게 된다면 한아름씨는 인턴 생활을 순조롭게 진행할 수 있을 것이다. 그래서 지금부터 같은 고민을 하는 이 땅의 많은 한아름씨를 위해 초보개발자가 알아야 할 웹에 관한 이야기 속으로 들어가 보자. 한아름씨는 인턴 기간동안 구친절 선배와 함께 쇼핑몰 사이트를 만드는 팀에 합류하게 되었다. 아 XX 학번이요. 많이 가르쳐 주세요~~~ (인턴이 세상 사는 방법 을 아네) 아~~ 네 그런데, 이번 프로젝트 사이트를 반응형 웹 으로 만든다는데, 그게 뭔가요? 아~ 그건, 요즘 웹 페이지를 보는 기기가 다양하잖아요. 하나의 사이트를 만들어서 다양한 기기에서 사이트를 보는 데 문제가 발생하지 않도록 해 주는 거에요. PC에서 보는 복잡한 포털 홈페이지를 스마트폰으로 보면 글자가 쌀알만하게 보이잖아요. 그렇게 안보이게 하는 거~ 네. 그런데 웹은 어떻게 동작하는지 아세요? 그걸 먼저 아셔야~~~ ;;. 아~ 그렇군요. (안다고 하면 혼날 것 같아) 아 니 요. 정말 몰라요? 안 배웠어요? 얼추 대충은 아는데, 선택 과목이라 지금까지는 안 배웠어요. 다음 학기 에 배워요 ~~~.
구친절씨는프로젝트에이제막투입된한아름씨와다른인턴들을위해서그날 오후에웹의기본부터설명해주기로했다. PC 웹서버 참고 인턴이란? 인턴은정규직원은아니지만, 대학생들이방학및휴학기간을이용하여회사생활을하는것을말한다. 형식적으로인턴을뽑는회사도있지만, 회사의정규직원으로채용하기전에미리같이일해보기위해채용하는회사도있다. 간혹저렴한비용에아르바이트처럼노동력을착취하기위해서뽑는회사도있다. 웹브라우저 [ 그림 1-1] 웹서비스관계도 인터넷 웹서비스 다시한번정리해보면, 웹은사용자들이웹주소로요청했을때제공되는웹문 서 ( 프론트엔드 ) 와이문서들을제공하는웹서버 ( 백엔드 ) 모두를합한 웹서비 웹이란도대체무엇일까? 개발자가아닌일반사용자에게웹이란무엇일까물어보면답변이제각각일것이다. 웹 = 인터넷 처럼아주커다란개념으로대답할수도있고 웹 = 홈페이지 라고단순하게얘기하는사람도있을것이다. 스 를말한다. 그래서웹서비스를개발할때는두가지모두를개발해야하고둘은뗄수없는관계이기때문에개발자라면양쪽모두를개발하지는않더라도관련지식들을어느정도는갖추고있어야한다. 그래서지금부터는이런것들에대해알아보려한다. 그러나지금부터이야기하려고하는웹은이런단순한개념이아니라 웹서핑 을하기위한서비스, 즉 웹서비스 를말한다. 일반사용자는웹서비스를 웹페이지 로만받아들이기때문에마치신문과같은단순한문서를보는것으로생각할수있다. 예를들어, 네이버에들어가서실시간검색어순위와관련된뉴스를찾아볼때그뉴스문서가어디에있는지는관심이없고뉴스내용자체에만관심을두는것처럼말이다. 하지만, 어디서나그런뉴스를볼수있도록하기위해서는분명어딘가에서항상서비스를제공하고있어야한다. 그래서프로젝트를진행하는입장에서는 웹문서 와함께 웹서버 라고불리는서비스를제공하는환경까지신경을써야한다. 웹서버는인터넷을통해웹과관련된데이터를사용자에게전달해주는역할을하며, 웹서비스에는이러한웹서버가필수적인요소이다. 참고 참고 프론트엔드 (Frontend) 와백엔드 (Backend) 서비스를위해서필요한두기술을분류하는말이다. 다만, 모든서비스를위해서는어플리케이션과서버가모두필요한경우가많기때문에웹서비스가아닌다른분야에서도공통적으로통용되는말이다. 사용자가이용하는어플리케이션과같은부분을프론트엔드라고하고, 서버와같은부분을백엔드라고한다. 웹으로비유하면웹페이지부분을프론트엔드, 웹서버부분을백엔드라고한다. 우리는이제웹이라는단어와웹서비스라는단어를동일시하며쓸것이다. 웹이라언급하더라도웹서비스로생각하면된다. 14 01_ 웹은어떻게동작하는걸까? 15
웹서비스를왜개발하나요? 사람들은웹을왜사용하나요? 한아름씨는웹에대해서는거의아는것이없다. 그러다보니이프로젝트를왜앱이아닌웹으로진행하는지궁금해했다. 그래서구친절씨는웹서비스의특징부터천천히설명해주기로하였다. 요즘사람들은언제어디서나웹을사용하며살아간다. 하루일과를웹에서보는뉴스로시작하거나카페에서대화를나누다궁금한점이생기면웹에서검색을해보고, 또웹을통해쇼핑하는일까지도이제는자연스럽다. 사람들이이렇게 웹서비스환경준비, 웹서버 이제웹으로쇼핑몰을만드는이유에대해알게되었으니쇼핑몰웹서비스제작프로젝트를본격적으로시작하려고한다. 그런데아직은정보가부족해서그런지처음부터막막하다. 바로개발부터시작하면되는것인지아니면다른준비작업이필요한것인지감이오지않는다. 결론부터이야기하면바로이단계에서해야하는과정이존재한다. 바로서비스가동작될환경을고민하고준비하는것이다. 웹서비스를많이사용하는이유는많은일들을웹이라는한공간에서모두해결할수있기때문이다. 또다양한기기에서원하는서비스를실행하려면해당기기에서비스어플리케이션이설치되어야만하는데, 웹은웹브라우저가설치되어있는모든기기에서사전, 인터넷강의, 쇼핑, 메신저, 신문구독, 심지어는 참고 사실모든프로젝트의시작은설계단계부터시작된다. 하지만, 설계에대한내용은아주중요하기때문에이책의뒷부분에따로별도의장을마련하여자세하게다룰것이다. 지금구친절, 한아름씨의팀에서는이미쇼핑몰웹서비스에대한설계가끝나있는상태이다. 게임까지도다이용할수있다. 이것이바로 접근성 이며웹의제일큰장점이기도하다. 요즘들어접근성이라는장점이더크게부각되고있는이유는최근에출시되는대부분의스마트기기들이웹브라우저를기본으로탑재하고있기때문이다. 그래서이제는어떤기기로든웹을통해수많은정보를얻는것이자연스러운세상이되었다. 앞서한아름씨는인턴기간에쇼핑몰사이트를만드는프로젝트를함께한다고하였다. 이쇼핑몰사이트는사람들이언제어디서나쉽게접근해서구매할수있어야하는것이가장큰목표중하나다. 이프로젝트를모바일어플리케이션 ( 흔이 모바일앱 이라부른다 ) 으로개발하면기기의운영체제별로각각개발해야하는어려움이생긴다. 그래서웹기반으로개발해서모든플랫폼에서사용할수있게만들것이다. 물론모바일앱으로개발하는것도많은장점과차별성을갖지만그에대한내용은 2장에서자세히설명할것이다. 여기까지설명을들은한아름씨는이제서야왜쇼핑몰을웹으로개발하는지조금은알것같은눈치다. 이기회를살려좀더진도를나가보자. 웹서비스는인터넷과연결만되어있다면언제어디서나서비스에접속할수있는것이가장중요한특징이다. 그래서우리가만드는웹서비스는어딘가에서항상동작해야하므로몇몇준비작업들이필요하다. 1. 어떤곳에서도접속이가능한환경을구축해야하며, 2. 그환경에실제웹서비스프로젝트를설치해야한다. 여기서환경은웹서버를뜻하고이렇게서버에웹프로젝트를설치하는과정을 서비스를배포한다 고말한다. 항상배포작업을하고난뒤에야웹서비스가시작되기때문에우리는이과정을살펴볼필요가있다. 웹서비스를동작하게하기위한과정에는아래와같은작업들이필요하다. 1. 웹페이지를개발하고그웹페이지가서비스될서버를구성한다. 2. 웹서비스프로젝트를서버에배포한다. 3. 웹서버를가동시킨다. 여기서 1번작업은서비스운영시한번만수행하면되며 2, 3번작업은지속적 으로수행된다. 16 01_ 웹은어떻게동작하는걸까? 17
개발자는웹서비스의기본이되는웹페이지를개발해야하며개발된웹페이지를서비스할서버의구성은서버담당자가구성한다. 여기서는웹서버에대해초점을맞춰보자. 웹서버는웹브라우저로부터접속을가능하게하는하나의소프트웨어이다. 우리가언제어디서나웹서비스를이용하기위해서는그서비스를어딘가에서항상제공하고있어야하며, 사용자의요청에항상응답을주어야한다. 누군가웹브라우저에쇼핑몰주소를입력하면언제나웹서버가쇼핑몰의첫페이지를보여주는것처럼말이다. 동네에있는어떤편의점은언제나그곳에존재하고 ( 망하지않는다면 ) 그안에는점원이항상상주하며손님을기다리고있을것이다. 이상황을웹서비스와 브라우저에표시되는웹페이지의정체, 웹의구성요소들 웹은수많은기술들의집합이기때문에다양한구성요소들이존재한다. 그럼 어떠한구성요소들이웹을구성하고있고어떤역할들을맡고있길래우리가 웹을쉽게이용할수있게된것일까? 웹은 WWW World Wide Web 의줄임말이며 WWW 는아래와같이크게세부분으로구성되어있다. 통일된웹자원의위치지정방법 : URL 혹은 URI 웹자원에접근하는프로토콜 : HTTP 웹자원들을표시하는언어 : HTML 매칭시켜보자. 서버장비는편의점처럼분명어딘가에존재하고있어야하며, 웹서버소프트웨어는점원처럼서버안에설치되어사용자의요청을기다리고있어야한다. 요즘에는다양한회사에서다양한버전의웹서버소프트웨어가출시되어있으며, 우리는그중에하나를선택해서사용한다. 가장많이사용되는웹서버소프트웨어는아파치 HTTP 서버 Apache HTTP Server 이다. 소스코드가공개되어있기때문에많은사람들이쉽게사용할수있고, 계속해서발전되어가고있다. 아파치혹은비슷한웹서버소프트웨어를서버에설치하면곧바로웹브라우저로서버에부여된 IP 주소혹은도메인에접속할수있게된다. 도메인과 IP 주소에해당하는내용은 1장의마지막부분과부록에서좀더설명하기로하고여기서는 서버에접근할수있는주소 정도로만이해하자. 이제서버가준비되었기때문에개발팀은개발을시작하려한다. 그런데여기서또다시한번막히고말았다. 어렴풋이듣기로는웹페이지개발은 HTML을알아야한다던데 HTML은도대체뭐고이게어떻게웹브라우저에표시되는것일까궁금해진다. 그래서개발을시작하기전에웹을구성하고있는요소들에대해설명하는시간을갖기로했다. 이전에도여러번경험했던상황인데, 과연이번단계를지나면진짜개발에들어갈수있을지서서히궁금해진다. 영어단어월드와이드 (worldwide) 는보통공백이나하이픈없이한단어로쓰이지만, 월드와이드웹 (World Wide Web) 과그약어인 WWW 는공식적인영어낱말로사용되고있다. 월드와이드웹은다음의세가지기능으로요약할수있겠다. 첫번째통일된웹자원의위치지정방법예를들면 URL. 두번째웹의자원이름에접근하는프로토콜 (protocol) 예를들면 HTTP, 자원들사이를쉽게항해할수있는언어예를들면 HTML. [3] [ 그림 1-2] 위키피디아에나와있는웹의정의 먼저위키피디아설명에계속언급되는 웹자원 이라는것은무엇일까. 우리는웹을통해다양한정보를얻기를원한다. 신문기사, 쇼핑정보, 영화예고편혹은 SNS로친구들의소식까지도웹을통해모두확인할수있다. 이러한정보들은문자, 이미지, 음악또는영상등으로구성되어있는데이렇게웹을통해주고받을수있는다양한데이터들을웹자원이라고말한다. 웹의탄생이유가다양한데이터를공유하기위해서였기때문에웹의구성요소들이웹자원을기준으로설명되는것역시자연스러운일이다. 위의세가지요소를설명하기위해웹자원을얻기위한과정을편의점에가서물건을구입하는과정을예로들어알아보자. 지금우리는이사온 서울특별시 어딘가의편의점에서음료수를한잔사먹으려고한다. 그러기위해서는먼 18 01_ 웹은어떻게동작하는걸까? 19
저근처에편의점이어디에있는지를알아야하는데, 우린주소라는개념을통해편의점의위치를알수있고이를이용해찾아갈수가있다. 이와마찬가지로웹자원도웹공간어디엔가위치하고있는데, 그위치를 URL이라는주소체계를사용해표현하는것이다. 서울특별시 에있는 편의점 에찾아간것처럼우리는 URL을통해 위키피디아 에있는 문서 를찾아갈수있다. http://www. wikipedia.org/wiki/ 라는이주소는위키피디아의한페이지를가리키고있으며이것이 URL의형태이다. 다만여기에서 URL은저모든주소체계를통칭해서부르는말이고앞쪽에붙어있는 wikipedia.org는 도메인 이라고부른다. 편의점의주소를확인한후그편의점으로이동해서원하는음료수를골라점원에게돈을내고구입을했다. 지금까지는이런행동에대해깊게생각해본적은없었겠지만이부분을주의깊게살펴보자. 물건을들고 이거살게요 란말을하지않고돈만주어도점원은계산을해줄것이고, 그물건을들고나가도아무런제제를하지않을것이다. 이러한작업이가능한이유는경제활동에대한개념이편의점주인과나사이에잘잡혀있기에가능한일이다. 두사람모두가돈을내면물건을받는다는것을너무나잘알고있기때문이다. 웹에서도 URL 방식으로이루어진위키피디아의위치를알게되면우리는웹브라우저에해당주소를입력해서위키피디아웹페이지에접근한다. 여기서좀더자세히접근해보자. 웹페이지에접근한다는것은해당웹페이지를제공하는서버에 URL을이용해접속한뒤 URL 주소에해당하는웹페이지를보내달라고요청을하고, 그에대한응답으로위키피디아웹페이지문서를받게된다. 사용자의입장에서는 URL 주소를웹브라우저에입력했을뿐인데저런과정들을자동으로거쳐서데이터를받게되는것이다. 이것이바로 HTTP 프로토콜 때문에가능한일이다. 프로토콜이라함은어떤규칙과약속이다. 내가편의점에서물건을들고값을지불하면물건은내것이된다는것역시일종의프로토콜이다. HTTP 프로토콜도마찬가지로서로어떤데이터를어떤순서로주고받을지에대한정보가규 칙과약속으로정해져있다. 웹서버와웹브라우저는 HTTP 프로토콜을통해어떤데이터를주고받을지서로알고있기때문에편의점에서돈을주고물건을받듯, 사용자는 URL 주소만알고있어도원하는데이터를받을수있다. 그래서실제로오가는데이터는단순한 URL 주소만이아니라인증, 브라우저정보, 컨텐츠타입등등수많은데이터가오고가게된다. 이부분은부록에서더자세히설명하고있으니참조하기바란다. 제품 \ 서울특별시 XX편의점돈거래프로토콜웹페이지웹페이지요청 http://www.wikipedia.org/wiki HTTP 프로토콜 [ 그림 1-3] 프로토콜은어떤규칙과약속이다. 이제구입을한뒤에는우린음료수를가지게되고, 드디어시원하게음료수를마실수가있다. HTML 이라는것은돈을내고구입해서얻게된음료수처럼사용자가 HTTP 프로토콜을통해요청하면받게되는결과물이다. HTML은프로그래밍언어이며웹브라우저가해석이가능한언어이다. 다시말하면 HTML 은웹브라우저에다양한데이터를표시하는것이목적인프로그래밍언어이다. 20 01_ 웹은어떻게동작하는걸까? 21
이렇게만설명하면너무간단하니, HTML이어떤역할을하는지좀더살펴보자. 먼저 HTML은 HyperText Markup Language의약자인데, 이런복잡한이름을그냥지었을리없다. 바로이단어들이 HTML이란언어의특징을잘설명해준다. HyperText 참조 (= 링크 ) 를통해여러문서를쉽게이동할수있는텍스트 Markup Language 문서가화면에표시되는방법을고유의문법으로표시할수있는언어. 예를들면, < 진하게 > 안녕하세요 </ 진하게 > 라는 <, >, 진하게, / 를사용하는문법을통해 안녕하세요 라는문장을진한글자로표현할수있게하는것. 이뜻들로유추해보면, HTML은여러문서를쉽게이동할수있고다양한데이터들이표시되는방법을지정할수있는언어이다. 그렇기때문에우리는서버에서단순히 HTML 언어로되어있는텍스트문서만받아도웹브라우저의해석을통해웹서핑을할때여러홈페이지를링크를통해쉽게이동해다닐수있고텍스트, 이미지, 동영상, 음악등을모두다웹페이지안에서쉽게보여지도록만들수있다. 역시이모든것은 HTML도표준으로정해져있고, 모든브라우저들은그표준을지켜 HTML 언어를해석하는방법을준비해놓았기때문에가능한것이다. 그럼 HTML이어떻게생겼는지한번보도록하자. [ 그림 1-4] 를보자. <> 를이용한문법을이용해각각의문자들이하는역할을지정해줬다. 7번라인에 <h1> 으로감싸져있는 Hello World! 글자는무척크게표시된것으로보아 <h1> 은글자를크게해주는것을알수있다. 3번라인에서 <title> 로감싼 TITLE!! 글자는웹브라우저상단에제목으로표시하는문법인것을알수있다. 이렇게 HTML은태그를활용해웹브라우저에어떻게데이터 1 <html> 2 <head> 3 <title>title!!</title> 4 </head> 5 6 <body> 7 <h1> Hello World!</h1> 8 <br> 9 <br> 10 Good Morning 11 </body> 12 </html> [ 그림 1-4] HTML 태그 웹페이지는위와같은 HTML 문법을이용해개발하게된다. 다만 HTML은일반적인프로그래밍에서사용하는연산이나, 반복문등의기법을사용하는게아니라단순하게화면을꾸미는태그를사용하기때문에이런문법들을익혀야한다. 어떤태그를사용하면화면에어떻게표시되는지, 자기가원하는화면을꾸미기위해서는어떻게태그들을구성해야하는지를알아야한다. 그래서개발할때이런태그들에대한정보를알아볼수있고실제로테스트도해볼수있는 w3schools(http://www.w3schools.com/html/) 같은사이트를이용하는것도좋은방법이다. 마지막으로한번종합해보자. 웹은위에서살펴본구성요소들을통해아래와같은절차를거쳐서사용자가요청한데이터를화면에표시하게된다. 1. URL이라는주소를통해원하는곳을찾아가서 2. HTTP라는통신방식을통해서로데이터를주고받으며 3. HTML이라는언어로구성되어있는문서를받아서 4. 웹브라우저가해석해화면에보여준다. 를표시할지지정할수있는언어이다. 22 01_ 웹은어떻게동작하는걸까? 23