Introduction to The Web Standards Curriculum/Table of Contents(웹 표준 커리큘럼과 내용목차에 대한 소개)

도입(Introduction)

얼마 전부터 저에게는 꿈이 하나 있었습니다. 지난 8, 9년간 저의 업무는 교육에 매우 집중되어 있어서, 사람들로 하여금 기술을 이용하여 멋진 결과물을 창조할 수 있도록 도와주는 기술 서적을 의뢰, 편집하거나, 근무했던 다양한 회사의 새로운 고용인들을 훈련하게 하고, 대중이 오페라 소프트웨어를 활용하는 데 도움이 되는 튜토리얼 기사를 쓰고 편집했습니다. 또한, 저는 웹(the Web)에 열광하는 사람으로서, 오픈 웹 표준의 신봉자이기도 합니다. 저는 웹을 더 나은 곳으로 만들고자 제 의무를 다하고 싶었고, 제가 생각하기에 이는 곧 교육 문제로 귀착되는 것이었는데, 교육이라 함은 대중에게 상호존중, 협력하는 방법을 가르치거나 그들의 사이트가 플랫폼과 기기 독립적이고(cross platforms and devices), 장애를 가진 사람들도 접근할 수 있게 하는 방법을 지도하는 것입니다. 웹 표준은 후자(the latter)를 위한 열쇠이기 때문에, 저는 오늘날과 미래의 웹에 웹 표준이 더욱 넓게 적용되는 데 도움이 되는 무언가에 저의 시간과 에너지를 쏟아보기로 마음먹었습니다. 이 생각이 지금까지 저의 머릿속을 맴돌고 있었지만, 이는 드디어 오페라라는 결실로 실현되었습니다 — 제 생각을 실현할 수 있도록 자금을 지원해주는 경이로운 고용주 분들께 대단히 감사하는 마음입니다! 저의 꿈 중 한 가지는 이제 실현되었습니다.

그리하여 이 글에서 저는 여러분에게 지난 몇 달 동안 있었던 (저 자신과 그 외 많은 분의) 수많았던 어려운 작업의 결과물 — 웹 표준 커리큘럼(Web Standards Curriculum), 그 누구일지라도(no matter who they are) 웹 디자인/개발에 대해 탄탄한 기반지식을 마련할 수 있도록 고안된 코스 — 에 대해 소개하려 합니다. 이는 완전 무료이며, 이해하기 쉽고 그 어떤 사전지식도 요구하지 않습니다. 저는 주로 이 코스를 대학에서 활용하려 하는데, 제 생각에 많은 대학의 웹 표준 교육이 다소 부실한 상태이기 때문입니다. 웹 표준 활용문제로 인하여 낮은 과제점수를 받았다는 학생의 이야기가 들리기도 하는데, 매우 진부한 마크업 방식(marking schemes)이 원인입니다. 또한, 웹 관련 구인을 위해 대학졸업자와 인터뷰를 한 후에 이들이 현실세계의 웹 개발에 대해 전혀 이해를 못 하고 있다는 점을 깨달은 고용주들의 절망 섞인 이야기가 들리기도 합니다. 만약 여러분이 적당한 방식(a reasonable fashion)으로 웹 표준에 대해 가르치는 진보적인 대학에 다니고 있다면, 인사 말씀 올립니다 — 연락 주십시오!

이 글은 다음과 같은 내용을 다룹니다.

• 왜 웹 표준인가? 이 부분에서는 웹 표준을 이용할 때의 이점, 웹 표준이 필요한 곳에서 제대로 활용되지 못하는 이유와 저의 코스에서 어떻게 이 주제에 대해 다루게 되는지에 대해 간단히 논의합니다.
• 코스 구조. 명칭 그대로입니다. 이 섹션에서는 또한 교육자들이 어떻게 재제를 준비하고(presenting the material), 이를 코스에서 어떻게 효율적으로 활용해야 하는지에 대해 이야기합니다.
• 누가 이 코스를 활용해야 하는가? 제가 "아무나(anyone)"라고 언급할 때 이는 정확히 누구를 의미하는 걸까요?
• 내용목차. 저의 주저리에 질려 내용으로 바로 넘어가고 싶으신 분은 이 부분으로 건너뛰십시오.
• 감사의 말
• 연락처

왜 웹 표준인가?(Why web standards?)

웹 디자인/개발 작업에 웹 표준을 적용해야 하는 주된 이유는 4번 글에서 전개됩니다만, 준비를 위해 간단히 소개하도록 하겠습니다. 웹 표준을 사용하면 다음과 같은 이점을 얻을 수 있습니다.

1. 효율적인 코드: 코스에서 학습하시게 되겠지만, 웹 표준의 실용적 적용이 주는 가장 좋은 점은 코드의 재사용입니다 — HTML 내용과 스타일(CSS) 및 동작(JavaScript) 정보를 분리하면 파일 크기를 작게 유지하고 코드를 한 차례만 기술하게 하여 필요한 곳에서 재사용하도록 하는 것이 가능합니다.
2. 손쉬운 유지보수: 이는 앞의 내용과 밀접한 관련이 있습니다 — HTML을 한 번만 기술하고, 스타일과 동작이 필요한 곳에 클래스와 함수를 사용하여 적용하면 훗날 무언가 변경해야 할 필요가 생겼을 때 변경해야 하는 곳마다 찾아다니며 적용할 일 없이 단 한 곳만 변경하면 전체 웹 사이트에 효과를 미치게 됩니다!
3. 접근성: 다음 두 가지는 밀접하게 관련되어 있습니다 — 웹에 대한 가장 중요한 이슈 중 하나는 환경에 구애되지 않고, 이용자가 누구냐에 상관없이, 누구나 웹사이트를 사용할 수 있도록 하는 것입니다. 이는 시각장애/시각 손상, 운동성 장애와 같은 결점이 있는 사람들(움직임에 제약이 있거나, 손을 전혀 또는 적절하게 사용할 수 없는 사람들)도 웹 사이트를 이용할 수 있도록 하는 것을 포함합니다. 웹 표준을 최선의 방식으로 적용하면 여분의 노력 없이 인터넷 대중의 상당수를 차지하는 이 부류의 사람들도 웹 사이트를 이용하도록 하는 것이 가능합니다.
4. 기기호환성: 이 부분에 대해서 저는 웹 사이트가 단순히 다른 플랫폼(윈도우즈, 맥, 리눅스) 뿐만 아니라 최근의 휴대전화기기, TV, 게임 콘솔을 포함할 수 있는 대체 브라우징 기기에서도 동작하도록 하는 것이라고 확신하고 있습니다. 이런 기기는 스크린 크기, 사용전력, 사용가능한 조작 방식 등에서 제약이 있지만, 좋은 소식은 다시 웹 표준을 최선의 방식으로 적용하면 이런 기기 대부분에서도 웹 사이트가 동작할 것이라고 높은 확률로 보장할 수 있다는 사실입니다. 세상에 PC보다 더 많은 것이 휴대전화이고, 이들 중 상당수는 인터넷에 연결할 수 있는데, 과연 여러분 또는 여러분의 고객이 이 시장을 외면할 수 있을까요? 휴대전화 웹 개발에 대해서는 dev.opera.com에서 이 주제를 전문적으로 다루는 글을 확인해 보십시오.
5. 웹 수집기/검색엔진: 이 부분에서는 검색엔진 최적화(search engine optimization)라는 용어의 의미 — 웹을 수집하고 인덱스화 하는 이른바 수집기(crawler)에게 웹 사이트를 가능한 한 많이 노출되게 하여, 그 결과 Google과 같은 사이트에서 더 높은 검색 순위를 얻을 수 있게 하는 방법에 대해 이야기할 것입니다. 이에 관한 과학분야도 존재하지만, 웹 표준을 사용하는 것만으로도 Google, Yahoo! 등에 대해 더욱 많은 부분을 검색 가능하게 만들어 사업에 도움을 줍니다.

그러나 이러한 이점에도, 웹 상의 사이트는 대부분 여전히 웹 표준을 따르지 않고 있으며 오늘날 활동하고 있는 많은 웹 개발자 역시 부적절하고, 시대에 뒤떨어진 방식을 사용하고 있습니다. "왜? 왜?"라고 반문하실 수 있을 것입니다. 여기에는 수많은 이유가 있는데, 사람들은 교육이나 회사 정책의 부족이라던가, 어찌 됐건 간에 지금도 돈 버는 데는 문제가 없기 때문에 배울 필요가 없다고 한다든가, 너무 어려워서 배우기 어렵다던가, 표준은 웹 브라우저에서 지원해야 하는 것이라던가 하는 점을 언급합니다... 이런 이유에 대해 각각 자세히 살펴보고, 반대 논거를 찾아내어 표준을 학습/적용하는 데 대한 변명을 할 수 없도록 해보겠습니다.

1. 교육의 부족: 여기에는 이슈가 있기는 하지만, 이는 이 코스가 만들어진 주된 이유 중 한 가지입니다. 많은 대학에서는 웹 관련 코스에서 웹 표준을 가르치지 않고 있으며, 많은 커리큘럼은 낡은 방식을 가르치는 경향이 있는데, 모두 관료주의로 말미암아 변화시키기가 어렵습니다. 책과 학원 코스는 가격이 비싼 편에 속합니다. 그러나 잠깐만! 이제 저희는 무료 코스를 준비하여 변화에 도움을 주기 위해 대학 등의 기관을 방문하고 있습니다. 따라서 이제는 정말로 변명이 통하지 않습니다.
2. 기업정책: 기업체/기관 중 일부가 여전히 오래되고 진부한 웹 사이트를 운영하고 있다는 사실은 두말할 나위가 없습니다. 이들 업체와 기관은 고용인에게 시대에 뒤떨어진 브라우저를 강요합니다. 그러나 이 문제는 점점 나아지고 있으며 이제는 어떻게 변경을 도입해야 하는지, 무엇을 더 개선해야 하는지 쉽게 가르쳐주는 무료 코스가 생겼습니다. 웹 사이트를 현대적 표준에 따라 개량하면 (여전히 낡아빠진 브라우저로 업무를 보고 있겠지만) 구세대의 브라우저에서는 이 사이트가 제대로 표시되지 못할 것이기 때문에 기업체에서 사용 중인 브라우저 역시 업그레이드를 종용받게 됩니다. 그럴 뿐만 아니라 기업체의 고객 역시 업그레이드를 하게 될 것입니다. 또한, 여기에는 상업적인 이유도 존재하는데 — 위에서 설명한 대로 웹 표준을 따르면 검색 엔진은 해당 사이트로부터 더 좋은 결과를 도출할 수 있으며 장애를 가진 사람과 대체기기 사용자도 접근성을 보장받을 수 있습니다. 업체들이 과연 이런 고객층을 무시할 수 있을는지요?
3. 배울 필요를 못 느끼겠는 걸!: 자리만 차지하고 앉아 그렇지만 오래된 방식을 써도 여태까지 돈 버는 데 지장이 없었거든. 그러니까 왜 새 방식 때문에 애를 먹어야 하는 건데?라고 말하는 개발자를 몇 명 알고 있습니다. 위에서 설명한 대로, 새 방식은 코드를 좀 더 효율적으로, 작성하기 쉽게, 보다 유지보수에 수월하도록 도와줍니다. 거기다 접근성이 높고 대체기기에서도 사용가능한 현대적인 코드를 작성하는 데 도움이 됩니다. 호기심이 동하지 않으시는지요? 또한, 여러분의 기술적 상위호환성을 더욱 높여주어 더 많은 보수를 받는데 도움을 주기도 할 것입니다. 요즘은 많은 회사에서 웹 표준에 대한 기술을 요구하고 있습니다.
4. 너무 어려워서 못 해먹겠네!: 어리석은 생각입니다. 이 코스 중 일부만이라도 터득하고 나면 풋내기 웹 개발자/디자이너라든가 기술을 향상시키는 중인 기성 웹 종사자 여하에 관계없이 손쉽게 웹 표준 활용의 기본을 골라내는 방법을 이해하게 됩니다. 그다지 고난이라고는 볼 수 없었던 예전의 진부한 방식 수준의 난이도에, 예전 방식보다 훨씬 많은 이점을 가지고 있습니다.
5. 브라우저의 표준 지원: 브라우저별 표준 지원은 차이점이 다수 존재하는 경우가 보통이었기 때문에, 웹 사이트가 여러 브라우저를 아울러 동작하도록 제작하는 것은 악몽 그 자체였습니다. 그러나 그런 시대는 이제 지나갔습니다 — 모든 현대적 브라우저는 웹 표준을 적절하게 지원하고 있습니다. 여전히 표준을 제대로 지원하지 않는 구세대 브라우저에 대한 지원이 필요할 때도 있습니다만, 현대적인 최상의 방식을 활용함으로써, 해당 브라우저의 사용자 역시 합리적인 사용자 경험을 얻을 수 있다고 보증할 수 있습니다.

따라서 여러분이 보신 것처럼 웹 개발작업의 웹 표준 미도입에 대해 변명거리는 진실로 한 가지도 존재하지 않습니다. 적어도 초심자의 관점에서 이 과정을 시작하게 되면, 과거의 잘못된 방식을 바로 잡고 있다기보다는 올바른 시작점에서 최선의 방식을 배우는 중이라고 볼 수 있을 것입니다.

코스 구조(Course structure)

이 코스는 몇 가지 문서로 구성됩니다. 각 문서는 길이가 수천 단어입니다. 개별 문서는 특정 소주제에 초점을 맞추고 있으며, 적절한 곳에서 주제에 대한 배경, 핵심이론, 실용예제, 연습으로 따라해 볼 수 있는 튜토리얼, 테스트를 위한 연습문제를 포함하고 있습니다.

이에 덧붙여 앞으로 웹 사이트의 제작부터 완료까지 완전한 프로세스를 경험할 수 있는 완전한 따라하기 튜토리얼을 사용할 수 있도록 할 예정입니다.

코스를 가르치는 논리적인 방법은 수업을 몇 번이나 사사(師事)할 수 있는지 파악하고 문서의 숫자로 그 수를 나누는 것입니다. 수업마다 해당 수업이 시작하기 전에 학생들로 하여금 관련된 문서를 통독(通讀)하도록 유도하십시오. 그 후에 수업 중에 실용예제를 경험할 수 있도록 하고, 수업 뒤에 학생들이 연습문제를 풀이하게 하십시오. 논리적으로 보아, 저의 생각으로는 수업 전에 학생들이 해당 문서를 읽어온다면 1시간 안에 각 수업에 포함된 개념을 충분히 경험토록 할 수 있습니다. 코스를 50시간에 걸쳐 가르치게 된다면 50시간의 예습이 필요합니다.

코스를 가르칠 총 시간과 각 수업에서 정확히 무엇을 다룰 것인지 확실히 생각해 두셔야 할 것입니다. 그러나 해보지 않으면 모를 일이겠지요.

누가 이 코스를 활용해야 하는가?(Who should use this course?)

이 코스는 웹 표준 기반 웹 디자인을 기초부터 배우고 싶어하는 바로 그런 사람들을 대상으로 하는, 몇 가지 문서로 구성된 웹 표준 코스입니다. 웹 브라우징에 대한 기본적 친밀감 이외에는 없던 독자를 CSS와 HTML의 숙련자가 되도록 이끌어주고, 자바스크립트에 대한 기본 소양을 갖추어 퍼즐 속에 자바스크립트를 적당히 적용할 수 있도록 하기 위한 목적으로 고안되었습니다. 여러분은 충분한 지식을 얻게 되어 자신 있게 직업 전선에 뛰어들어볼까 말까 하는 생각이 들 정도가 되실 것입니다(분명히 말씀드려 경험은 배울 수 있는 것이 아닙니다).

대상은 누구일까요? 저는 이 코스가 웹 디자인을 올바로 배우고자 하는 분에게 유용하게 쓰이길 바랍니다:

• 대학생과 대학강사: 이 부분에 대해서는 이미 언급한 바가 있습니다 — 이 코스의 문서는 이를 바탕으로 코스를 개설하여 학생들에게 전달하거나, 여러분이 직접 짠 코스를 위해 일부분만 차용하기에 이상적입니다. 이미 다른 종류의 웹 관련 과정을 학습 중인 학생이시라면, 지식을 보충하기 위해 이 과정을 활용할 수 있으며, 게다가 여러분의 교사에게 이 과정의 도입을 고려하도록 교섭해볼 수도 있습니다! 또한, 모든 교사와 강사 역시 이 과정을 살펴보도록 권고 드리는 바, 이를 통해 여러분의 과정에서 다루는 기술이 현재 최선의 방식인지 확인해보시기 바랍니다.
• 대학 이전 연령의 학생들: 이 코스는 주로 성인을 염두에 두고 작성되겠지만, 더 어린 학생들이 이 코스를 학습 못 할 이유는 없습니다 — 한 번 도전해 보고 어떻게 헤쳐나갈지 알아보세요.
• 현직 웹 디자이너와 개발자: 현직 웹 개발자와 디자이너는 웹 표준과 최선의 방식을 사용하지 않는 부류와, 사용이 용이한 참고 사이트를 정해놓고 이를 검색용으로 또는 지식향상을 위해 사용하는 부류로 나뉩니다. 전자(前者)라면 한 번 이 코스의 가능성을 고려해 보고 웹 표준의 적용이 어느 정도까지 쉽고 가치가 있는 것인지 알아보실 것을 강력히 권고합니다. 후자(後者)라면, 다른 분들을 도와주거나, 자신의 기술을 가다듬을 때, 잘 떠오르지 않는 사실을 찾아보고자 할 때, 접근성과 같은 것이 매우 이치에 맞는 것임을 상사와 고객에게 설득하고자 도움이 되는 수단을 찾아보려 할 때 이 코스의 유용성을 깨닫게 되리라 확신합니다.
• 기업체 내부 강사: 고용인에게 비싸지 않은 훈련법을 제공하는 이상적인 방법입니다.
• 그 외의 개개인: 웹 디자인과 개발에 대해 무언가 학습할 생각이 있는 개인이라면 다시 말씀드리지만 이 코스는 여러분의 도전에 도움이 될 수 있는 비싸지 않은 방법을 제공합니다.

필자는 이 코스의 사용자가 금전적인 지출을 하지 않았으면 합니다 — 이 코스는 Creative Commons 라이센스에 따라 공개되었으며, 이 코스를 활용하고자 하는 분은 저희에게 적절한 권한을 주시는 것을 조건으로 자유롭게 사용하실 수 있습니다.

감사의 말(Acknowledgements)

많은 분이 저와 함께 이 코스의 구성에 협력해주셨으나 너무 인원이 많으신지라 한 분 한 분 자세히 언급할 수가 없을 것 같습니다만, 이 자리에 모든 분을 포함할 수 있으면 좋겠습니다. 모두 훌륭한 분이시니, 그분들을 확인해 보십시오 — 대화를 해보셔도 좋고, 그분들의 저서를 구입하셔도 좋고, 그분들을 지원할 수 있는 어떠한 방법이라도 좋습니다. 여러분 모두에게 저의 찬사과 감사를 담아 보냅니다.

• 저자: 벤 뷰캐넌(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), 스튜어트 랑그리지(Stuart Langridge), 로버트 나이만(Robert Nyman), 토미 올슨(Tommy Olsson), 그렉 셰크터(Greg Schechter), 니콜 설리번(Nicole Sullivan), 마이크 웨스트(Mike West)에게 깊은 감사를 드립니다. 여러분이 없었더라면 이 코스는 문자 그대로 아무것도 아니었을 것입니다.
• 오페라 직원: 장 스탕달(Jan Standal), 데이비드 스토레이(David Storey)와 저희 팀의 나머지 분들과 이 아이디어를 믿고 계획을 진행하는 데 도움을 주신 오페라의 모든 분들의 행복을 기원합니다.
• 조직: 야후의 모든 분, WaSP, 브릿팩(Britpack), 긱업 포크스(Geekup)의 여러분, 이 코스를 접하고 더 많은 부분을 받아들이기 위한 협력에 관심을 보여주신 모든 대학교에 감사드립니다.
• 개인: 크레이그 세일라(Craig Saila), 새라 도드(Sara Dodd), 존 올소프(John Allsopp), 로안 라베리(Roan Lavery), 브루스 로손(Bruce Lawson), 앨런 화이트(Alan White) — 이상 멋진 분들께 행운이 따르길. 빠진 분이 계시면 용서하세요.
• 독자: 올바른 방법으로 웹 사이트를 창조하는 데 관심을 보이는 당신, 시간을 들여 이 코스를 읽고 있는 당신에게 각별한 환영인사를 보냅니다!

연락처(Contact me)

저는 항상 이 코스의 개선과 가능한 한 많은 분이 이 코스를 거쳐 가기를 기대하고 있습니다. 이 코스를 어떻게 개선할 수 있는가에 대한 의견이나, 평범해도 좋으니 공유하고 싶으신 감상이 있으신 분, 어딘가에서 이 코스를 채택할 의사가 있다는 말을 저에게 전하고 싶으신 분이라면 연락 주시기 바랍니다. 저의 이메일은 cmills [at] opera [dot] com입니다. 또한, 각 문서 하단의 이 문서를 주제로 토론하기 링크를 이용하시면 각각의 문서에 대해 댓글을 남기실 수 있습니다. 논의에 참여하시려면 my.opera 계정이 필요합니다.

이에 관한 과학분야도 존재하지만

더 좋은 SEO를 위한 지능형 사이트 구조!(Intelligent site structure for better SEO!)와 시맨틱 HTML과 검색엔진 최적화(Semantic HTML and Search Engine Optimization)와 같은 글을 읽어 보세요.

데쓰스타(Death Star)

스타워즈 에피소드 Ⅳ에 등장하는 제국의 거대인공행성. 트랜스포머 애니메이션 극장판에 등장하는 유니크론의 모티브가 된 소재입니다. (역자주)

이 코스는 몇 가지 문서로 구성됩니다

기본 코스가 완성되는 시점에는 50가지가 넘을 것으로 예상합니다.

야후의 모든 분

저자들과 조직구성과 행사진행에 많은 도움을 준 소피 메이저(Sophie Major)

WaSP

특히 가렛 러쉬그로브(Gareth Rushgrove), 스테파니 트로엣(Stephanie Troeth) 아론 왈터(Aarron Walter)

이 문서를 주제로 토론하기 링크를 이용하시면

이 기능은 원문에서만 제공됩니다. (역자주)