KTH Easing Markup DAY01

월드 와이드 웹
World Wide Web
웹의 탄생과 비전으로 그려보는 미래
웹 표준
Web Standard
웹 표준이란 무엇인가? 왜 필요한가?
웹 접근성
Web Standard
웹 접근성에 대한 바른 이해/적용
의미 구조화
Semantic Markup
의미있는 콘텐츠를 작성하는 방법
KTH.UXD ® Semantic Markup Course
UX/UI Design & Development Education

World Wide Web
웹 세상을 연결하는 통로

social web network
사람과 사람을 연결하는 매체

이미 우리에게 친숙한 웹을 세상에 소개한
이는 영국의 한 과학자였습니다.
그의 이름은 팀 버너스-리 입니다.

이미 우리에게 친숙한 웹을 세상에 소개한
이는 영국의 한 과학자였습니다.
그의 이름은 팀 버너스-리 입니다.
Tim Berners-Lee,
W3C Director and inventor of the World Wide Web

Tim Berners-Lee,
때는 1989년. 당시 유럽 분자 물리학 연구소
에서 근무하던 버너스-리는 단순한 하이퍼
텍스트 시스템을 제안합니다.

여기저기 흩어져 있는 물리학자의 자료를
연결하려는 생각에서 정보를 링크하는 기본
시스템을 개발했습니다.
Tim Berners-Lee,

모든 요소에 고유 주소를 할당할 수 있는 URL
링크된 정보를 전송할 수 있는 규약 HTTP
정보를 만드는 언어 HTML
Tim Berners-Lee,

버너스-리는 동료 연구자 마이크 샌들과 함께
정보를 저장하고 서비스하는 서버와 브라우징을
위한 어플리케이션을 만들고, 이 시스템을 월드
와이드 웹이라고 불렀습니다.
Tim Berners-Lee,

다른 운영체제에서도 작동되는 클라이언트(브라
우저)가 개발됨에 따라 시스템은 점차 대중화되었
습니다. 1994년에 이르러서 웹은 탄생되었습니다.
Tim Berners-Lee,

갑자기 모든 사람들은 믿을 수 없을 만큼 간단
하게 전자 문서를 교환할 수 있게 되었습니다.
이 모든 일은 갑자기 이루어진 것이죠.
Tim Berners-Lee,

Tim Berners-Lee,

웹의 믿기 어려운 성장은 일정 부분 그것의 단순함에서 기인합니다.
특히 브라우저로 읽어들일 수 있는 문서를 쉽게 제작할 수 있다는 점이 그렇습니다.
HTML의 첫 버전은 간단한 기본 요소를 가지고 태어났습니다.
h1-h6는 제목과 소제목, p는 단락, li는 목록을 표시할 수 있었습니다.
이러한 간소한 표시 방법으로 웹은 대중화될 수 있었습니다.

웹의 믿기 어려운 성장은 일정 부분 그것의 단순함에서 기인합니다.
특히 브라우저로 읽어들일 수 있는 문서를 쉽게 제작할 수 있다는 점이 그렇습니다.
HTML의 첫 버전은 간단한 기본 요소를 가지고 태어났습니다.
h1-h6는 제목과 소제목, p는 단락, li는 목록을 표시할 수 있었습니다.
이러한 간소한 표시 방법으로 웹은 대중화될 수 있었습니다.
복잡한 건 싫어요!
어른들의 시선으로
보지 말아주세요.

월드 와이드 웹, 웹의 목표
‘웹의 아버지’ 팀 버너스 리 경은 웹의 목표를 다음과 같이 이야기 합니다.

Web for Everyone
웹은 누구에게나 열려있습니다.

Web for Everyone
Web on Everything

Web for Everyone
Web on Everything
웹은 어디에서나 접근할 수 있어야 합니다.

Web for Everyone
Web on Everything
Knowledge Base

Web for Everyone
Web on Everything
Knowledge Base
그것은 사람들의 지식으로 구성됩니다.

Web for Everyone
Web on Everything
Knowledge Base
Trust and Confidence

Web for Everyone
Web on Everything
Knowledge Base
그것은 믿음과 신뢰를 바탕으로 이루어져야 합니다.

Web for Everyone
Web on Everything
Knowledge Base
그것은 믿음과 신뢰를 바탕으로 이루어져야 합니다.
팀 버너스-리 경

1991
HTML 초안
History
도표로알아보는간단한웹의흐름

1991
HTML 초안
History
1995
HTML 2
1997
HTML 3.2

1998
Web Standard Project
1991
HTML 초안
1999
HTML 4.0
History
2000
XHTML 1.0
1995
HTML 2
1997
HTML 3.2

1998
1991
HTML 초안
1999
HTML 4.0
History
2000
XHTML 1.0
1995
HTML 2
1997
HTML 3.2
2004
XHTML 2.0

1998
1991
HTML 초안
1999
HTML 4.0
2010 - 2012
HTML 5
History
2000
XHTML 1.0
1995
HTML 2
1997
HTML 3.2
2004
XHTML 2.0
2009
XHTML 2.0 End
2004
Web Applications 1.0

1991
HTML 초안
1999
HTML 4.01
2010
HTML 5
History
도표로 알아보는 CSS 테크닉 변천사
2000
XHTML 1.0

1991
HTML 초안
1996
CSS 1.0
1999
HTML 4.01
2010
HTML 5
History
2000
XHTML 1.0

1991
HTML 초안
1996
CSS 1.0
1998
CSS 2.0
1999
HTML 4.01
2010
HTML 5
History
2000
XHTML 1.0

1991
HTML 초안
1996
CSS 1.0
1998
CSS 2.0
1999
HTML 4.01
2010
HTML 5
History
2000
XHTML 1.0
2004
CSS 2.1
Revisions

1991
HTML 초안
1996
CSS 1.0
1998
CSS 2.0
2007
CSS 2.1
1999
HTML 4.01
2010
HTML 5
History
2000
XHTML 1.0
2004
CSS 2.1
Revisions

1991
HTML 초안
1996
CSS 1.0
1998
CSS 2.0
2007
CSS 2.1
1999
HTML 4.01
2010
HTML 5
History
2000
XHTML 1.0
2004
CSS 2.1
Revisions
2007 - 2010
iPhone &
Smart Device

1991
HTML 초안
1996
CSS 1.0
1998
CSS 2.0
2007
CSS 2.1
1999
HTML 4.01
2010
HTML 5
History
2011
CSS 3.0
2000
XHTML 1.0
2004
CSS 2.1
Revisions
2007 - 2010
iPhone &
Smart Device

1991
HTML 초안
1996
CSS 1
1998
CSS 2
1999
HTML 4.01
2010
HTML 5
History
2000
XHTML 1.0
1994
Livescript
1996
Javascript 1.0
1997
ECMAscript 1.0
2008
Javascript 1.8
1999
ECMAscript 3.0
2006
jQuery 1.0
2012
jQuery 1.7
2007
CSS 2.1
2004
CSS 2.1
Revisions
2011
CSS 3.0

1991
HTML 초안
1996
CSS 1
1998
CSS 2
2007
CSS 2.1
1999
HTML 4.01
2010
HTML 5
1993
Mosaic
1998
IE 5
2007
IE 7
1994
NN 1
1995
IE
2002
IE 6
2006
FF 2
2004
FF 1
2008
FF 3
2009
IE 8
History
2010
IE 9
2010
CSS 3
2000
XHTML 1.0
2003
Safari
1996
Opera
2008
Chrome
1994
Livescript
1996
Javascript 1.0
1997
ECMAscript 1.0
2008
Javascript 1.8
1999
ECMAscript 3.0
1991
Nexus
2001
NN 6

괴/물/양/산
오래된 이야기이지만 1997년 타이포그래피 전문가
데이빗 시겔은 웹 페이지 레이아웃을 만드는 새로운
기법에 대한 글을 썼고 그 이후 웹은 많이 변화하게
됩니다. 마치 영화 속 프랑켄슈타인처럼 HTML의
<table>태그와 공백gif 이미지를 결합한 괴물이
태어났습니다.

괴/물/활/보
그 이후 오랫동안 이 괴물같은 기법은 페이지 레이
아웃을 만드는데 사용되었습니다. 당시 디자이너들
은 전통적인 인쇄 매체에서 사용하던 레이아웃을 웹
페이지에 표현할 수 있다는 사실에 기뻐했습니다.
본래 테이블이 가지고 있는 의미는 무시된 채 세상
에 활보하게 됩니다.

시/겔/절/규
오래 지나지 않아 시겔은 자신이 괴물을 만들어
냈다는 사실을 깨닫고 절규하게 됩니다.
“웹은 망가졌고 그렇게 만든 건 바로 나다”
the Web is ruined and I ruined it

어떤 사람들은 제가 웹을 망가뜨렸다고 말합니다. 사실 그 말은 틀리지 않았습니다.
저는 초컬릿과 땅콩버터를 마구 섞어 다시는 분리하지 못하게 한 것과 같이 웹을 망가뜨렸습니다.
저는 구조를 표현과 함께 뒤섞어 버리는 죄악을 저질렀기 때문에 처형되어도 마땅하다고 생각합니다.
데이빗 시겔 www.xml.com/pub/a/w3j/sl/people.html

괴/물/확/산
시겔이 만든 괴물은 더욱 강력해져 수백만의
웹 페이지 컨텐츠와 구조, 디자인이 뒤섞여 버렸습니다.
덧붙여 웹디자이너들에게 보이는 모양대로 컨텐츠와 구조를
만들어야 한다는 잘못된 생각을 하게 만들었습니다.
이러한 개념은 웹디자이너들의 사고에 많은 영향을 끼쳐서
결과적으로 웹은 유연하지 못하게 되었고 의미에 따른 구조는
사라지고 접근성이 떨어지게 되었습니다.

<table> 태그를 사용해서 레이아웃을 만들던 과거에는 보이는
모양에 따라 컨텐츠를 배치해야 했기 때문에 컨텐츠와 구조
모두 분리되지 못했습니다.

하지만 현대적인 웹 디자인 제작에서는
과거의 잘못된 방법을 답습하고 있지 않습니다.
비효율적인 구조와 표현을 한 몸으로 해서 제작하지
않으며, 목적에 부합하는 의미적인 구조와 다양한
스타일 제작을 위한 효울적인 표현, 동작 관리를 통해
효과적인 디자인 구현을 가능케합니다.
구조
표현
동작

월드 와이드 웹의 원칙
Web for All
Web on Everything
월드 와이드 웹의 비전
Web for Rich Interaction
Web of Data and Services
Web of Trust

KTH Easing Markup DAY01

More Related Content

Similar to KTH Easing Markup DAY01

More from yamoo9

KTH Easing Markup DAY01