2011년 7월 7일

외국의 어느 웹 개발자가 밝히는 HTML5&웹개발자로써의 로드맵(번역 자료)

스텍 오버플로어의 여러 글들을 보다가 괜찮은 글이 있어서 미흡하지만 번역해 봤습니다.

중학생이 웹 개발자의 길을 꿈꾸며, html5와 css3를 어떻게 공부해 나가야 하는지에 대해 올린 질문에

Manuel Strehl 이라는 독일 레겐스브로크에서 웹 개발자로 활동하는 분의 답글입니다.

개인적으로 이 글을 읽으면서, 확실히 뭔가 관심을 가지고 접근한다는 그런 방향성이 우리나라의 IT 주입식 교육과는 많이 다르다는 것을 느끼네요.

물론, 이 사이트를 방문하는 대부분의 분들이 웹을 정말 사랑하고 관심있어 해서 여기까지 온 것이 아닌가 싶지만 말입니다. ^^

특히 Manuel이 추천하는 사이트 중 몇몇 개는 꽤나 쓸만한 것 같습니다. 물론 죄다 영어이지만.. 그리고 솔직히 말해 HTML5 의 로드맵이라기 보단 웹개발의 전반적인 부분에 대한 내용입니다.특히 개발자라고 디자이너의 영역을 무시하거나, 디자이너라고 개발자의 영역을 무시하는 것을 반대하는 그의 태도는 참으로 공감할 만 한 것 같습니다.

오역이 많은데, 양해하고 봐주시기 바랍니다.

원문 : http://stackoverflow.com/questions/4744906/would-you-recommend-starting-from-html5-css3-for-beginners

번역 : Mattew, Chang (http://izect.kr)

쉬운 것을 먼저 배워라

HTML5 공부를 시작하기 이전에, HTML4 는 HTML5 중의 하나이고, 또한 CSS2도 CSS3의 일부분 이라는 것을 알아야 합니다. 이에 제가 제안하는 HTML5 공부를 시작하는 법은 이전의 기술을 먼저 배우는 것입니다. 특히나 HTML4 는 HTML5와 CSS3의 새로운 면을 배우는 데 자극이 될 것입니다. 

HTML5 튜토리얼들의 문제점은 그것들은 따뜻한 봄날 아침의 데이지꽃이 생기는 것과도 같습니다. 무슨말이냐, 이러한 튜토리얼은 대부분 좋은 것만 가르칩니다. 그러나 초보자인 당신은 차별성을 갖기 위해 초심자를 위해 쓰여진 문서나 (X)HTML을 경험한 사람들의 더 실무적인 내용 등을 습득하는 등의 어려운 결심을 해야 합니다. 바로 HTML5 를 시작하는 것이 HTML4 의 튜토리얼보다 더 많은 혼란을 가져오는 것처럼 말입니다. 

‘나의 경험’

공부를 하기 위해 다양한 사람들이 서로 다른 행동을 하겠지만, 저의 웹 개발 공부의 길을 요약하면 아래와 같습니다.

  • 물리학과 대학원생이던 시절, 웹 개발에 대한 어떠한 생각도 없었습니다. 그리고 전 생각했죠. “그래, 내 브라우저의 시작 페이지를 내 맘대로 설정하면 멋질 것 같아. ” 그떄가 2004년이었고, iGoogle은 만들어지기 전이었습니다. 이처럼 여러분도 작은 프로젝트로 시작하고 작업해 보세요.

  • 운좋게도 저는 독일어를 할줄 알았고, 독일어로 된 괜찮은 HTML을 시작하는 자원(SelfHHTML)을 찾을 수 있었습니다. 하지만 이 사이트는 그 이후로  업데이트가 자주 되지 않습니다. 그리고 솔직히 이 사이트의 영문으로 된 자료의 퀄리티가 좋은지는 모르겠습니다. 이 사이트를 W3Schools 의 대용으로 사용하지 말기 바랍니다. 그러나, 아래와 같은 이유로 제가 특별히 어떤 튜토리얼의 어떤 부분이 좋은지 지적해 주기는 힘들 것 같습니다.


  • 제가 브라우저의 시작 페이지 제작을 끝내고, 저는 저의 RPG(Role Playing Game) 모임 홈페이지를 만들었습니다. 이 사이트는 몇몇의 HTML페이지로 구성되엇고, 이를 통해 저는 빠르게 CSS에 대해서 알 수 있었습니다. HTML페이지당 하나의 스타일 시트를 가지게 하엿는데, 이는 제가 처음으로 생각한 많은 파일들을 축적하기 위한 구조입니다. (‘폴더 by 파일’ 의 측면에서)


  • 이러한 부분에서 여러분은 배워야 할 많은 기술들을 알게 될 것입니다.

    • 저는 저희 모임의 사생활을 보호하기를 원했고, 이를 위해 HTTP 인증(Authentication) 을 배웠습니다.

    • 페이지마다 디렉토리를 만들고 그 안에 HTML 파일을 각각 두는 것은 URL과 절대 경로에 대해 빠르게 배울 수 있습니다.

    • RPG 모임의 FAQ섹션을 위해 저는 질문을 선택하면 미리 숨겨 놨던 답변이 나오도록 하였습니다. 이것이 저의 자바스크립트로써 입문이었습니다. 이 경험에서 얻은 것은 진짜(Real) 자바 스크립트 였습니다. 단순히 구글링 해서 jQuery 코드 따위를 카피하는 것이 아니였습니다.(jQuery 이전엔 그게 prototype이었죠.)


  • 다음으로 정적 HTML 파일을 서버로  옮겼습니다. 저는 PHP와 MySQL 이 매우 좋은 초보자를 위한 시작 코스라고 생각합니다.(제 소견으로는 php 는 간단히 서버측의 기술을 사용하기에 좋다 생각합니다.) 그리고 전 php가 가능한 작은 웹 공간을 확보했습니다. 가장 좋은 웹 서버에서의 ‘Hello World’ 프로젝트는 저의 모임 웹사이트의 방명록 이었습니다.(물론 요즘은 Disqus 의 링크가 방명록보다 더 좋지만요.)


  • 그리고 튜토리얼들과 레퍼런스를 찾아봤습니다. 처음에는 가장 최초의 스팩 정의서인 PHP 메뉴얼과 HTML 4 명세서를 잠깐 보았습니다. 또한 W3C의 CSS 2 중 독립적으로 정의된 CSS의 속성들도 보았습니다. 그리고 늦게나마 이런 걸 느꼈습니다. “가능하면 스펙 명세서를 읽어라. 거기엔 아직 네가 이해하지 못한 부분이 있겠지만 그것보다 더 좋은 소스는 없다.”

  • 이런 기술을 볼 때에도 웹에선 많은 신기술이 계속 나오고 요구되고 있었습니다. 그러나 가끔은 기초가 중요합니다.DOM, CGI, SVG, XML, XHTML과 HTML의 차이점, 정규식 표현, 파이썬, mod_rewrite, nginx, XSLT, PDF, RSS, RDF, Bash, SSH, Git, SVN, XSS, 유니코드, 웹폰트, Dublin Core, JSON, SQLite 등등.. 이 모든게 기초를 요하고 있습니다.

  • 결국 저정도의 단계까지 오게 된다면 여러분은 보다 더 전문적인 것을 요하게 될 것입니다. 허나 위험한 생각은 “나는 디자이너야. 불쾌한 코드따위는 건들지 않아.” “B2B JSON이 JBoss 와 Hibernate에서는 최고라 생각해. 좋아. 나는 포토샵 따위는 필요없어.”  그러나 제가 추측하건데, 아직도 가능한 많은 영역에서 순진하게 다가가는 것이 좋다 생각합니다.역자주:내가 왜 그런 디자인을 이해하는지, 프로그래밍적으로는 어떻게 돌아가는지 등등.. 이런 생각을 가지고서는 오래 가지 못합니다. 최소한 지금으로부터 5년 내로 우리는 면접관에게 ‘canvas 개발자’ , ‘멀티미디어 마크업 전략가’ , ‘크로스 플렛폼 UX 전문가’ , ‘플래시 코드와 테이블에 기초한 HTML 이메일 템플릿 전문가’ ,’ 오프라인 캐시 보안 그룹’ , ‘웹 스토리지 데이터베이스 엔지니어’ 이런 생소한 용어들을 어필할 것입니다. 이보다 더 당신이 주된 관심을 가지고 최소한으로 이해해야할 것은 새로운 아이디어를 얼마나 유연하게 만들고 접근해 가는데 도움을 주느냐는 것입니다.( 더 중요한 것은 오래된 아이디어와 접근성을 새롭게 재 창출하는 문제일 껍니다.)

전 여러분을 기죽게 하기는 싫습니다. 제가 말하는 때에도 더 많은 HTML과 CSS의 배울거리가 생겨나고 있습니다. 그래도 이러한 제 경험과 생각은 더 멋지고 쿨한 개발자/디자이너가 되기 위한 조언입니다. 이를 잘 배우고 난다면, 당신의 프로젝트들이 분명 더 강력해 질 것입니다.

주목해야 할 사항

잘못된 자료를 가지고 공부하는 것은 잘못된 것입니다. 제가 제안컨데, 만약 모른게 생긱면 아마 여기(StackOverflow)에서 의견을 듣거나, chat.stackoverflow.com 에 물어보는게 더 나을 수 있습니다. 이 사이트에 질문할 때에는 기본적으로 소스를 함께 첨부하는게 좋습니다.

개인적으로는 드림위버같은 위지윅 에디터를 최대한 멀리 하셨으면 좋겠습니다. 아마 IDE나 이클립스 같은 추가기능이 있는 에디터를 사용할 것입니다. 저같은 경우는 GoLive에서 Notepad++ 로 바꿨고, 결국 Vim 에디터를 사용하게 되었습니다. 이는 취향의 문제이긴 하지만, IDE 소프트웨어가 우리도 모르게 뭔가를 숨기고 있거나 자동으로 생성하는 게 있다면 용량만 무거워지고, 우리가 예측하기 힘든 코드가 나올 껍니다.


추천하는 읽을거리들

다시한번 말하지만, 저는 여러분의 기를 죽이는 것이 아닙니다. 만약 여러분이 어떤 자료를 가지고 공부해야 하는지 헷갈린다면, 제가 몇개의 링크들을 제안해 드리겠습니다. 이 링크들은 종종 전문적인 레퍼런스로 많이 사용됩니다.

기본

  • W3.org – HTML과 CSS를 표준화 하는 기관

  • developer.mozilla.org – 파이어폭스 조직. 여기에는 좋은 HTML, CSS 그리고 cutting-edge 웹 개발 등의 튜토리얼이 있습니다. 그리고 개인적 소견으로는 자바스크립트 레퍼런스가 온라인에 현존하는 최고의 레퍼런스라고 생각합니다.

  • msdn.microsoft.com – 마이크로소프트 사의 HTML/CSS 문서입니다.

  • Safari Reference Library -매우 애플과 사파리에 초점을 맞춰진 곳입니다. 그러나 몇몇개는 꽤 읽을 만 합니다.

  • Opera Web Curriculum – 오페라의 웹 커리큘럼은 좋은 중요한 기술들의 요약입니다.

  • Validator – 당신의 코드가 에러가 없는지 유효성을 체크합니다. W3C에서 왔으며 몇몇의 중요한 웹 개발자의 툴을 제공합니다.

튜토리얼들

  • HTML5 Boilerplate – 이 프로젝트는 HTML5, jQuery에 기초한 웹 어플리케이션과 웹 사이트를 빠르게 개발하는 데 목적을 둔 프로젝트 입니다.  코드마다 모범 사례가 많이 있기 때문에 읽을 가치가 있습니다.  

  • A List Apart – 이 발행물은 웹 개발자와 사람들을 목적으로 하고 있습니다. HTML과 CSS를 활용한 많은 유용하고 중요한 방법과 사례가 이곳에 발행되어 있습니다.

  • Dive into HTML5 – 책이름과 가은 이 사이트는 특히나 HTML5에 중점을 두고 있어 아마 초보자들이 접하기에는 힘들 수도 있습니다. 하지만 이 사이트는 정확하고 잘 쓰여졌습니다.

  • CSS Zen Garden – “CSS기반의 디자인을 통해 시각적인 효과를 낼 수 있습니다.” 이 사이트는 HTML4와 CSS2로 할 수 있는 놀라운 것들을 보여줍니다.

  • 24 Ways – 개발자들의 캘린더로, 잘 알려진 웹 개발자들의 흥미로운 글들을 모아서 보여줍니다.

개요

  • quirksmode.org – 브라우저와 호환성을 위한 사이트입니다 만약 여러분의 페이지가 IE, 파폭 오페라 등에서 차이점을 보고 싶다면 이곳을 방문해 보세요..

  • History of the WWW – 1995년부터 웹의 역사에 대해 W3C의 괜찮은 소개글을 보여줍니다. 

  • zvon.org – 만약 ‘레퍼런스’와 ‘튜토리얼’을 찾고 있다면 이곳을 들러보세요. 따라하기 쉽지는 않지만, 이곳의 자료는 꽤나 정확합니다.

  • Jacob Nielsen’s Alertbox – 꽤 비판적인 시각에도 불구하고 이 제이콥 닐슨의 개인 페이지는 웹과 관련된 괜찮은 연구 결과를 모아서 보여줍니다. 

  • Periodic Table of HTML Elements – HTML5의 모든 요소에 대해 직관적이고 훌륭하게 보여주는 사이트 입니다.

  • CSSPlay – 많은 최신CSS의 트릭을 다루는 스튜 니콜의 공간입니다.

명세서들

  • w3.org/TR – W3C의 모든 규격의 명세서가 있습니다.(최신의 XML, HTML 그리고 CSS에 관련된 명세)

  • w3.org/TR/html4 – HTML4 의 모든 엘리먼트와 속성에 대해 설명해 놓은 공식 명세서 입니다.

  • 추가로 whatWG.org 은 W3C의 XHTML2에 반대하고 HTML5를 응호하는 다른 집단입니다. 이들의 맴버는 대부분 브라우저의 밴더들 입니다.

  • w3.org/TR/CSS2 – 공식 CSS 2.0 명세서 입니다.

  • RFC 1738 – URL이 어떻게 구성되어 있는지를 알려줍니다.

  • RFC 1945 – HTTP 1.0을 정의하는 인터넷을 통한 프로토콜의 전송을 설명해 줍니다. RFC 2616 는 HTTP 1.0의 후임격인 HTTP 1.1의 정의입니다.

  • ECMAScript Specification – ECMAScript 는 자바스크립트의 표주노하된 버전입니다. 솔직히 저는 이를 거의 본 적은 없습니다. 대부분 저는  the reference on mozilla.org 를 이용했지요.

  • Likewise for the DOM. 이러한 돔의 공식 사양은 W3C에 흩어져 정의되어 있지만 오래전에 네츠케이프와 인터넷 익스플로러는 DOM의 자신들의 버전을 구현했습니다.

  • php.net – PHP의 공식 홈페이지이며 공식 문서들이 있습니다.

  • Unicode Consortium – 만약 여러분이 아스키의 세계를 떠나 다국적 입력을 하게 된다면, 반드시 UTF-8과 유니코드를 잘 숙지해야 할 것입니다. 최대한 빨리 그들과 친구가 되세요.

기타등등

  • Smashing Magazine – 저는 종종 웹디자인과 프론트-엔드 개발에 대한 흥미로운 기사를 이곳에서 찾곤 합니다.

  • JSFiddle – 이 사이트는 HTML, CSS 그리고 자바스크립트를 혼합하여 즉시 보여줍니다. 간단한 코드 조각으로 테스트 하기에는 충분합니다.(예를 들어 스텍오버플로우닷컴의 몇몇 코드들 같이)

  • XAMPP – 윈도우나 맥의 환경에서 APM(Apache, Php, Mysql)을 간단히 설치할 수 있습니다.

  • Microformats.org – 이 사이트는 중상급 유저를 위한 사이트로, 마이크로 포멧은 HTML안에서 기계와 인간이 읽을 수 있는 데이터를 표현하려 합니다. 게다가 이러한 방법으로 어떻게 HTML 요소들과 속성들이 함께 사용되는지를 충분히 배울 수 있습니다.

  • CSS Resetr – CSS 리셋은 브라우저의 기본 속성들이 표현할 수 있는 스타일 시트 부분을 점선으로 보이게 합니다. 이를 통해 각각의 브라우저의 차이점을 알 수 있습니다.

  • FontSquirrel @font-face generator – 여기는 CSS 2.1의 @font-face 속성을 테스트 할 수 있는 좋은 공간입니다.  소스를 보면 좋은 영감을 얻을 수 있을 겁니다. 이와 비슷하게 Google WebFonts Directory 를 웹사이트에 응용할 수도 있습니다.

  • When can I use… – 이곳은 CSS3와 최신의 다른 속성들이 어떤 브라우저에서 얼마나 지원되는지를 차트로 보여줍니다.

  • FireBug – 만약 여러분이 파이어폭스 개발자라면, 이 애드온이 없이는 어디 웹서핑 할 생각 마십쇼. 저만 믿으세요.(그리고 대부분의 사람들이 그렇게 합니다.) (번역주: 전 파폭을 안써서 잘.. 모르겠지만 파이어버그가 짱인듯 합니다.) 

  • The Elements of Typographic Style Applied To The Web – 이 웹사이트는 “타이포그라피 스타일의 요소”에 대해 CSS와 웹 기술을 적용한 현명한 방법과 힌트를 제공합니다.(로버트 브링허스트가 가볍게 이를 읽으라고 제안했습니다.)

StackOverflow 닷컴의 괜찮은 Q&A 

책들

사실, 저는 HTML이나 CSS를 책을 통해 배운 적은 없습니다. 그래도 HTML4나 CSS2 는 새로운 기술에 꽤나 유연하게 대처해야 합니다. 저는 맹목적으로 오레일리 사에서 출판한 책을 추천하고 싶습니다. 꽤 많은 책들이 모두 잘 쓰여져있고 기술적으로도 정확합니다.

다른 몇명의 유저들이 추천하는 책들:

마지막으로 한마디

저는 항상 새로운 것을 배우고 발전시키며 제가 이미 배웠던 기술들을 더 깊게 발전시켜 나가려고 하였습니다. 만약 여러분이 HTML과 CSS 로 시작하고 이러한 기술을 배우기 원한다면 많은 문제점이 여러분에게 있을 것입니다. 그것이 무엇이든지 일단 소스코드는 볼 수 있습니다. 그리고 이를 배껴온다 하면 이제 보안에 대하여 깊히 고민해 봐야 할 것입니다.(이런 문제들 때문에 괜히 신용카드를 긁지 않기를 ;-))

하지만 계속 배우고, ‘소스 보기’ 메뉴를 자주 활용하고, 계속 질문하세요(여기, 스텍오버플로어닷컴에, 그리고 많은 흥미있는 코멘트들이 달릴 것이며, 구글에 물어보면 흥미로운 포스팅을 볼 수 있을껍니다.) 여러분은 이러한 세상에서 사용자 경험과 정보를 만들어 가는 최고의 사람입니다. 웹 개발은 재밌습니다!