1. 웹 표준 커리큘럼의 소개와 차례

이 글은 추지호, 정태영, 네씨님이 공역했습니다.

소개

잠시동안 나는 꿈을 가지고 있었다. 나의 일은 최근 8,9년동안 교육에 집중되어 있었는데 기술적으로 멋진 것을 만드는 사람들을 돕기 위해 기술 서적을 편집하거나 위임했었다. 내가 근무했던 회사들의 새로운 직원들을 훈련시켰고, 오페라의 소프트웨어를 사용하는 사람들을 돕기 위해 글을 편집하고 작성했다. 나는 웹에 대해 열정적이고 오픈 웹 표준을 크게 믿는 사람이다. 나는 웹을 더 나은 공간으로 만드는데 도움이 되는 작은 일을 원했다. 그리고 나는 이것이 교육이라고 생각했다. 그것은 사람들에게 함께 연구하고 서로를 더욱 존경하는 방법을 가르치는 것이든, 그들의 웹 사이트가 플랫폼과 장치들에서 작동하는 방법을 가르치는 것이다. 그러면 능력이 부족한 사람들도 쉽게 접근하여 배워갈 수 있다. 웹 표준은 미래의 열쇠다. 그래서 나는 오늘과 미래의 웹에 웹 표준 채택이 늘어갈 수 있는데 나의 시간과 열정을 쏟어 넣기로 결심했다. 이 생각은 잠시동안 내 머리 주위를 떠 다녔다. 하지만 이것은 오페라에서 마침내 달성되었다. 내가 이 일을 하는데 비용을 대는 훌륭한 고용주에게 매우 감사하다. 나의 하나의 꿈은 마침내 현실이 되었다.

그래서 이 글에서 나는 당신에게 많은 지난 몇 달 동안 어렵게 작업한 결과물을 소개한다. (나 자신과 많은 다른 사람들에 의해 만들어진) 웹 표준 커리큘럼은 누구에게나 웹 디자인과 개발에 확실한 배경이 되기 위해 설계된 과정이다. 그들이 누구든지 간에 이 커리큘럼을 이용하고 접근하는데 완벽하게 무료다. 그리고 사전 지식이 필요없다. 나는 주로 대학들에 주목하는데 많은 대학들에서 웹 표준 교육의 기준이 다소 결여되어 있다고 본다. 나는 그들의 과제에서 웹 표준 사용에 대해서 메모하면서 학생들의 이야기를 들었다. 왜냐하면 그 마킹 계획은 너무나 구식이었기 때문이었다. 나는 또한 고용주의 절망적인 이야기를 들었다. 왜냐하면 그들은 웹 분야에 위치한 대학 졸업생을 인터뷰할 때 실무 웹 개발에 대해서 실마리를 가지고 있지 않는 것을 찾아냈기 때문이다. 만약 당신이 합리적인 방식으로 웹 표준을 가르치는 진보적 대학에 있다면 연락해 주십시오!

이 글에 나올 내용:

  • 왜 웹 표준인가? 여기서 나는 웹 표준의 이점과, 왜 웹 표준을 채택하지 않았는지, 그리고 나의 커리큘럼이 이런 문제들을 어떻게 반박하는지 간단히 토론해보자.
  • 과정이 구성된 방법. 이 섹션은 교육자들이 수업중에 효과적으로 사용할 수 있는 자료들의 제공에 대해서 어떻게 생각해야 하는지 이야기했다.
  • 누가 이 과정을 사용하는가? 내가 “누구라도” 말할 때, 정확하게 누구를 의미하나?
  • 차례. 만약 당신이 나의 시시한 이야기를 건너 띄고 싶다면 다음 과정을 시작해라.
  • 감사의 말
  • 연락처

왜 웹 표준인가?

당신의 웹 디자인과 개발 작업에서 웹 표준 채택되는 주된 근거는 4장에서 자세히 다룬다.하지만 나는 그들을 통해서 여기서 간딘히 이야기할 것입니다. 웹 표준을 사용하면 다음과 같은 이점을 얻을 수 있습니다:

  1. 코드의 효율성: 당신은 모든 코드 재사용에 대해서 웹 표준을 사용한 많은 모범 사례를 커리큘럼 과정을 통해서 배우게 될 것이다. 당신은 CSS와 JavaScript로부터 당신의 HTML 콘텐츠를 분리하면 파일 크기를 작게 유지할 수 있고, 코드를 한번만 작성해서 필요할 때 재사용할 수 있다.
  2. 유지보수의 용이함: 첫번째 이점에 이어서 – 만약 당신이 오직 한 번만 HTML을 작성할 수 있다면, 클래스와 함수를 사용하여 필요할 때 스타일과 동작을 적용하고, 그런 후에 나중에 무언가를 바꿀 필요가 있을 때, 모든 곳을 고치지 않고, 단지 한 곳만 고치면 웹 사이트 전체에 적용되는 기회를 가질 수 있게 된다.
  3. 접근성: 다음 두가지 이점과 관련되는데 – 웹에서 중요한 이슈중 하나는 누구에게나 접근 가능한 웹 사이트를 만드는 것이다. 그들이 환경에 무관심하더라도 말이다. 이것은 실명과 지체 장애 같은 장애를 가진 사람들이 사용 가능한 웹 사이트를 만드는 것을 포함한다. (즉, 사람들이 제한된 움직임을 가진 경우, 그리고 그들의 손을 적당하게 또는 자유롭게 사용할 수 없을 수 있다.) 웹 표준과 모범 사례를 사용하면, 당신은 당신의 웹 사이트를 별다른 노력 없이 웹 사용자들이 사용할 수 있게 만들수 있다.
  4. 장치 호환성: 이것은 당신의 웹 사이트가 단지 서로 다른 플랫폼-윈도우, 맥, 리눅스-뿐만 아니라 최근의 모바일 폰과 TV 게임 콘솔도 포함한 장치들에서 작동된다는 것을 의미한다. 이 장치들은 화면 크기, 처리 능력, 조작 방법 같은 한계를 가진다. 하지만 좋은 소식은 웹 표준과 모법 사례를 적용하면 당신은 당신의 웹 사이트를 이런 장치들 대부분에서 작동시킬 수 있음을 보장받을 수 있다. 세계에는 PC보다 모바일 폰이 더욱 많고, 상당수는 인터넷이 사용 가능하다. 당신이나 당신의 고객이 이 시장을 놓칠 수 있겠는가? 모바일 웹 개발에 대해서 좀 더 알고 싶다면 dev.opera.com의 멋진 글을 확인해 보자.
  5. 웹 크롤러/검색 엔진: 이것은 웹과 웹사이트 목록을 수집하는 웹 크롤러라는 검색 엔진 최적화-당신의 웹 사이트가 가능한 눈에 띄도록 만들는 방법-에 대해서 이야기하는 것으로 구글과 같은 사이트는 당신에게 더 나은 검색 순위를 보여준다.

SEO는 과학이다. 다시 한 번 강조하는데, – 더 나은 SEO를 위해서 지능적인 사이트 구조와 같은 SEO 글과 시멘틱 HTML, 검색 엔진 최적화 글들을 봐라 – 단지 웹 표준을 사용한다면 당신은 당신의 사이트를 구글, 야후! 등에 더욱 더 많이 나타나게 할 수 있다.이것은 비지니스를 위해서 좋다!

이런 이점에도 불구하고 대부분의 사이트들은 아직도 웹 표준을 따르지 않고 있고, 많은 웹 개발자들은 나쁘고, 오래된 방법을 여전히 사용한다.
“왜?” 라고 당신이 질문한다면 이에 대한 몇가지 원인이 있다. 회사의 정책, 교육의 결여, 또, 어쨌든 월급이 나오기 때문에 사람들은 표준 배우기를 필요로 하지 않는다. 그리고 웹 브라우저에서 지원하는 표준을 익히기도 너무 어렵다. 이것들은 각각의 장에서 표준을 배우고, 채택 하지 않는 변명을 제거해면서 좀 더 자세히 알아보자.

  1. 교육의 부족 : 여기 이슈가 있는데 이것은 이 커리큘럼을 만들게 된 주 원인 가운데 하나다. 많은 대학들이 그들의 웹 관련 수업에서 웹 표준을 가르치지 않는다. 그리고 많은 수업이 낡은 방식이다. 그리고 관료주의 때문에 바꾸기가 어렵다. 책과 연습을 통한 과정은 비용이 드는 경향이 있다. 하지만 잠깐만! 지금 우리는 무료로 그들을 위해서 이것들을 변화시키려고 대학들을 돌아다니며 과정을 제공했다. 따라서 이제 더는 변명이 없다.
  2. 회사 정책 : 어떤 회사들과 기관들은 아직도 낡고 시대에 뒤떨어진 웹 사이트를 가졌다. 아마도 그들의 직원들이 낡은 브라우저를 사용하도록 하는 정책을 가졌을지 모른다. 하지만 이것은 나아지고 있고, 수정하는 방법을 쉽게 보여주는 무료 과정이 있어서 더욱 나아질 것이다. 웹사이트를 최신 표준으로 업그레이드하면 낡은 브라우저에서는 사이트들이 제대로 보이지 않기 때문에 회사들로 하여금 그들이 사용하는 브라우저를 업그레이드 하도록 만들어준다.(비록 그들이 아직도 낡은 브라우저를 사용할지라도) 또한, 회사들은 그들의 고객이 브라우저를 업그레이드 하도록 권장해야 한다. 거기에는 사업적인 이유가 있다. 웹 표준을 사용한 사이트들은 앞서 설명한 것과 같이, 더 나은 검색 엔진 결과를 보여주고 장애가 있는 사람들과 모바일과 같은 대체 장비를 사용하는 사용자들도 접근할 수 있다. 회사들이 이런 사용자들을 무시할만한 여유가 있겠는가?
  3. “나는 그것들을 배울 필요가 없어!”: 나는 몇 몇 개발자들이 “하지만 나는 낡은 방법을 사용하면서 아직도 월급을 받고 있는데 왜 새로운 것들을 필요하겠는가?”라고 앉아서 이야기할 것을 알고 있다. 이것은 당신의 코드를 쉽게 작성하고, 유지보수를 쉽게 하여 좀 더 효율적으로 만든다. 그리고 당신의 현대적 코드 작성이 대체 장비들에서 사용성과 접근성을 갖게 한다. 흥미롭지 않은가! 이것은 또한 앞으로 당신의 기술을 더욱 높여줄 것이고, 더 많은 수익을 가져다 줄 것이다. 최근들어 많은 회사들이 웹 표준 기술을 요구하고 있다.
  4. “웹 표준은 너무 배우기 어렵다!”: 아주 나쁜 생각이다. 이 과정의 일부를 소화한 후에, 당신은 웹 표준 기초가 얼마나 쉬운지 실감할 것이다. 당신은 웹 개발과 디자인이 새롭든 말든 당신의 기술 향상에 흥분할 것이다. 이것은 오래되고, 낡고 나쁜 방법을 사용해서 어려웠다. 이것들은 매우 좋지 않다. 그리고 이것은 낡은 방법들보다 많은 이점을 가진다.
  5. 브라우저들의 표준 지원: 브라우저들의 표준 지원은 차이가 심했다. 각각의 브라우저들은 웹 사이트들을 다르게 보여주었다. 그렇지만 요즘의 현대적 브라우저들은 모두 웹 표준 지원을 하고 있다. 표준 지원은 아직도 가끔씩 제대로 된 브라우저 지원이 되지 않는 낡은 브라우저들을 위해서 필요하다. 하지만 현대적인 방법(웹 표준)을 사용하면 그 브라우저들은 합리적으로 당신의 경험을 보증할 것이다.

이처럼, 당신이 웹 표준 작업에서 웹 표준 채택하지 않는 것은 어떤 변명도 소용 없다. 적어도 당신이 초심자의 관점으로 이 과정을 시작한다면 당신은 나쁜 버릇을 없애면서 올바르고 모범적인 사례를 다시 배우게 될 것이다.

『좋아. 그럼 우리는 조용한 톤으로 이러한 나쁜 방법들에 대해서 이야기를 계속하면, 그들은 죽음의 별이나 다른 뭔가 비밀계획이 있다. 우리는 우리가 믿지 않기 때문에 이 과정 안에서 자세한 부분까지는 커버하지 않는다.우리는 무엇보다도 먼저 당신을 올바른 길로 보내야 한다고 생각한다. 그렇지만 아마도 이상하게 여기고 있을지 모른다. 그들에 대해 간단히 이야기해 보자.

오래전에, 사람들은 그래픽과 텍스트 등을 위치시키기 위해서 각각의 테이블 셀을 사용하여 큰 테이블 안에 웹 사이트를 배치하는 것과 같은 일을 했다(테이블은 의도된 것도 아니고 페이지에 불필하게 마크업되었다). 그들은 페이지 요소의 위치를 조정을 위해서 간격용 GIF라고 불린 눈에 띄지 않는 이미지들과 사용했다(이미지는 의도된 것도 아니고 페이지에 불필요한 마크업과 이미지를 추가되었다).그들은 메뉴 등을 몰래 생성하거나(자바스크립트가 비활성화된 브라우저를 사용하는 사용자들이나 스크린리더를 사용하는 시각 장애인에게 좋지 않다.) 오직 하나의 브라우저에서만 작동(다른 브라우저를 사용해 본 사람들은 어떨까?)하는 자바스크립트를 작성해서 사용했다. 그들은 스타일링 정보를 삽입하기 위해서 HTML 안에 <font> 요소를 직접 사용했다(유비보수를 위해서도 끔찍한 일이고, 페이지에도 불필요한 것이다). 그리고 많은 다른 웹 개발 범죄를 저질렀다. 최악은 앞에서도 이야기했지만 이 같은 일들을 아직도 많은 사람들이 하고 있다는 사실이다!

웹 개발은 가장 좋은 상황에서도 까다로운 기술이다.하지만 나쁜 방법은 더 어렵게 만들 뿐이다. 웹 표준과 좋은 방법을 사용하면서 이 과정의 윤곽을 따라가는 것이 가장 좋은 방법이다.』

과정 구성

이 과정은 여러 개의 과정(수업)으로 구성되어 있고, 각 과정은 수 천 단어 정도의 길이입니다. 기본 과정을 마치려면 50개 정도의 수업을 들어야 합니다. 각 과정은 작은 주제에 초점이 맞춰져 있으며 각각의 주제에 관련된 배경, 기초 이론, 실용 예제 및 다음 수업으로 넘어가기 위한 단계적 설명들로 구성됩니다. 여기에는 자신이 어느 정도를 알게 되었는지 체크해 보기 위한 과제들도 준비 되어 있습니다.

추가적으로, 앞으로는 따라서 하는 완전한 설명서를 사용할 수 있도록 할 예정입니다. 그건 처음부터 끝까지 웹 사이트를 만드는 전체적인 과정을 다룹니다.

강의를 하기 위한 논리적인 방법은 얼마나 많은 강의를 자신이 수행 가능한가와 각각의 강의를 구성하는 주제들을 나누어 보는 것이다. 각 학습에서, 학생들은 수업이 시작되기 전에 수업과 관계된 글을 읽게 한다. 그럴 때 강의 중 실제적인 예를 활용하여 해결하며, 학생들에게 각각의 수업 후에 질문의 내용을 수행하는 과정을 수행시킨다. 논리적으로 나는 1시간 이면 각 주제에 내포되어 있는 개념을 가르치는데 충분하다고 생각하며 그 한 시간이라는 시간 만큼 학생들은 수업시간 전에 각각의 주제에 대하여 읽고 와야 한다. 즉 50시간의 강의를 들으려는 학생은 50시간의 예습시간이 필요한 것이다.

당신은 당신이 강의를 하면서 쓰게 될 전체 시간과 각각의 수업을 위하여 필요한 시간에 대하여 생각해보아야 하지만 이는 직접 부딪혀 보면서 적당한 시간에 대한 답을 찾을 수 있다.

누가 이 과정을 사용하는가?

이것은 웹디자인을 기초로한 웹표준을 처음부터 배우기를 원하는 많은 사람들을 목적으로 몇가지 조항들로 구성되어진 웹표준 과정이다.
이는 단순히 웹을 브라우징하는데 친숙한 독자들뿐 아니라 CSS와 HTML을 할 수 있고, JAVASCRIPT의 기초 지식이 있으며 이것을 퍼즐 끼워 마추듯 활용 할 수 있는 독자들까지 목적으로 한다.
이는 확신을 갖고 취업시장에 뛰어들수 있는 생각을 시작하기에 충분한 지식을 줄 것이다. (정확히 경혐은 가르치지 못한다)
누구를 겨냥한것인가? 나는 “정석”으로 웹디자인을 배우고 싶어하는 누구나 가능하기를 바란다.

  1. 대학교/학생들과 선생들 : 이것으로 자기 자신의 강화를 개설해서 이를 학생들에게 전달하거나 혹은 당신 자신의 과정을 보완해주는 이상적인 자료임을 언급했다. 몇가지 웹관련 과정을 이미 공부 하고 있는 학생에게는 이지식을 충족하도록 사용되어야 하며 또한 당사의 선생들이 이것을 고려하도록 압력을 가해야만한다! 나는 이지식을 모든 선생들/독자들이 훑어볼 뿐 아니라 그들의 강좌들에서 현재 가장 되풀이 되고 있는 기술들을 확실히 할것을 권고한다.
  2. 대학들어가기전 나이의 학생들 : 주로 이과정이 성인들을 위해 쓰여졌지만 이를 통해 어린 학생들이 이득을 얻지 못 할 이유는 없으니 – 그러니 취해보고 자신에 맞는지 지켜보라.
  3. 기존의 웹디자이너들과 개발자들 : 웹표준과 모범 사례를 사용하지 않거나 또는 참고자료를 쉽게 찾아 접근 할 수 있거나 지식을 다시 사용하는 기존의 웹개발자와 디자이너들이 많다. 전자에게는, 당신이 이과정에 기회를 부여함으로 쉽고 가치있는 웹표준이 적용될것인지 보기를 간구 한다. 후자에게는, 나는 당신이 이 유용한과정에서 다른 사람을 도우며, 당신의 기술을 정돈하며, lookingup hard-to-recall facts, 접근성과 같은 많은 감각을 만들어주는 탄약을 찾아 사장들과 고객들을 설득 할 것을 확신한다.
  4. 회사내의 교육자들 : 이는 직원들에게 저렴하게 교육시키도록 제공할 이상적인 방법이다.
  5. 다른 개인들 : 웹디자인이나 개발에 대해 무언가를 배우기를 단지 좋아하는 개인이라면 당신의 노력으로 도움을 받을 저렴한 방법이다.

나는 사람들이 이과정을 이용하는데 돈을 지불하기를 바라지 않는다—이는 Creative Commons 저작에 공개된 것이다. 그러니 사용 하고자 하는 누구나 적정 직권을 우리에게 주는한 무료로 사용 가능하다.

차례

현재 39개의 글은 공개되었고, 앞으로 대략 10개 이상을 완성할 것이다.

처음

  • 1. Chris Mills의 지금 당신이 읽고 있는 글

여기에 이용 가능한 웹 표준 커리큘럼 번역글들이 있다.

웹 표준 세상 소개

웹 디자인 개념

이 섹션은 어떤 코드나 마크업도 자세히 들어가지는 않을 것이다. 그리고 당신이 어떤 그래픽이나 코드를 만들기 전에 디자인 프로세스를 소개가 될 것이다. 게다가 인공지능(IA), 네비게이션, 사용성 등과 같은 웹 디자인 개념도 소개될 것이다.

HTML 기초

HTML 내용

접근성

CSS

고급 CSS 학습

  • 38. Ben Henick의 머릿글(Headers), 바닥글(footers), 컬럼들(columns) 그리고 템플릿(templates)

자바스크립트 핵심 기술

Supplementary articles

  • Craig Grannell의 당신의 콘텐츠를 온라인에서 얻기
  • Chris Heilmann의 문서에 대한 추가 정보를 담은 <head> 엘리먼트
  • Ben Henick의 보충: 타이포그라피를 위한 일반 HTML 엔티티들
  • 오페라 웹 표준 커리큘럼 용어집. 이것은 완전하지 않지만 계속 추가될 것이다.

감사의 말

나를 도와준 사람들이 너무 많지만 여기에 모두 포함되어 있길 바란다. 그들은 모두 훌륭한 사람들이다. 그들을 점검하고 가서 대화하고, 책을 사고, 블로그를 읽고, 또는 그들을 지원할 수 있는 일이라면 했다. 나는 그들 모두에게 존경과 감사의 뜻을 전한다.

  1. 저자들: Ben Buchanan, Tom Hughes-Croucher, Mark Norman “Norm” Francis, Linda Goin Paul Haine, Jen Hanen, Benjamin Hawkes-Lewis, Ben Henick, Christian Heilmann, Roger Johansson, Peter–Paul Koch, Jonathan Lane, Tommy Olsson, Nicole Sullivan, and Mike West에게 너무나 감사하다. 당신들 없이는 이 과정을 정말로 만들 수 없었을 것이다.
  2. 오페라 직원: Jan Standal, David Storey, 내 팀원들, 그리고 이 아이디어를 믿어준 오페라의 모든 사람들, 나를 도와 계획을 세운 사람들
  3. The organizations: thanks to everyone at Yahoo (the authors, and Sophie Major for helping to do a lot of organization and promotion), the WaSP (particularly Gareth Rushgrove, Stephanie Troeth and Aarron Walter), the Britpack, the Geekup folks, and all the universities who showed an interest in looking at this course and helping to take it further.
  4. 단체들: 야후의 모든 사람들 (단체와 홍보에 많은 일을 도운 저자들과 Sophie Major), WaSP(특별히 Gareth Rushgrove, Stephanie Troeth 과 Aarron Walte), Britpack, Geekup folks, 그리고 모든 이 과정에 관심을 보여준 모든 대학들
  5. 개인들: Craig Saila, Sara Dodd, John Allsopp, Roan Lavery, Bruce Lawson, Alan White. 만약 내가 잊은 누군가가 있다면 미안하다.
  6. The readers: special hails to you for having an interest in creating web sites the right way, and taking time out to read this course!
  7. 독자들: 올바른 방법으로 웹 사이트를 만드는데 흥미를 가지기 위해서 당신을 특별히 환영한다.

연락처

나는 이 과정을 향상시키고 가능한 많은 학생들이 이 과정을 채택하도록 끊임 없이 지켜볼 것이다.만약 당신이 과정을 향상시킬 수 있는 제안을 가지고 있다면 코멘트를 공유할 수 있다. 또는 나와 대화를 원하는 경우 cmills [at] opera [dot] com 이메일을 사용하면 된다. 당신은 각 글의 하단에 있는 링크 ‘Discuss this article’를 이용해서 코멘트를 보낼 수 있다. 당신은 이 의견 기능을 사용하려면 my.opera 계정이 필요할 것이다.

저자에 대해서

Chris Mills는 오페라의 개발자 관련 메니저다. 그는 dev.opera.com과 labs.opera.com에서 글을 편집하고 발행한다. 오페라의 인식 제고 및 피드백을 수집하고 오페라 소프트웨어에 대한 홍보활동을 하고 있다. 그는 또한 웹 표준 커리큘럼를 발행하고 편집하고 있다.

직장 밖에서, 그는 열렬한 음악 팬으로 메탈, 포크, 펑크, 일렉토니카, 프로그 등 폭 넓은 음악을 즐긴다. 그의 주요 밴드는 위대한 Conquest of Steel이다.

이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.