아카데미정글에서 진행하는 웹표준화 대한민국 의식개선프로젝트 수업 프레젠테이션 파일입니다.

1. “웹”
누가 어떤 목적을 위해 만든 것일까요?

2. 그러고 보니...
누가 만든지 궁금해
하지도 않았었군.
“웹”
누가 어떤 목적을 위해 만든 것일까요?

4. WWW

5. World Wide Web

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

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

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

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

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

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

14. 모든 요소에 고유 주소를 할당할 수 있는 URL
링크된 정보를 전송할 수 있는 규약 HTTP
정보를 만드는 언어 HTML
Tim Berners-Lee,
W3C Director and inventor of the World Wide Web

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

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

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

18. Tim Berners-Lee,
W3C Director and inventor of the World Wide Web

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

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

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

22. Goal

23. Web for Everyone
Goal

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

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

26. Web for Everyone
웹은 누구에게나 열려있습니다.
Web on Everything
웹은 어디에서나 접근할 수 있어야 합니다.
Goal

27. Web for Everyone
웹은 누구에게나 열려있습니다.
Web on Everything
웹은 어디에서나 접근할 수 있어야 합니다.
Knowledge Base
Goal

28. Web for Everyone
웹은 누구에게나 열려있습니다.
Web on Everything
웹은 어디에서나 접근할 수 있어야 합니다.
Knowledge Base
그것은 사람들의 지식으로 구성됩니다.
Goal

29. Web for Everyone
웹은 누구에게나 열려있습니다.
Web on Everything
웹은 어디에서나 접근할 수 있어야 합니다.
Knowledge Base
그것은 사람들의 지식으로 구성됩니다.
Trust and Confidence
Goal

30. Web for Everyone
웹은 누구에게나 열려있습니다.
Web on Everything
웹은 어디에서나 접근할 수 있어야 합니다.
Knowledge Base
그것은 사람들의 지식으로 구성됩니다.
Trust and Confidence
그것은 믿음과 신뢰를 바탕으로 이루어져야 합니다.
Goal

31. Web for Everyone
웹은 누구에게나 열려있습니다.
Web on Everything
웹은 어디에서나 접근할 수 있어야 합니다.
Knowledge Base
그것은 사람들의 지식으로 구성됩니다.
Trust and Confidence
그것은 믿음과 신뢰를 바탕으로 이루어져야 합니다.
팀 버너스-리 경
Goal

34. History
웹 기술의 흐름

35. History
웹 기술의 흐름

36. History
도표로 알아보는 간단한 웹의 흐름
1991 1999 2010
HTML 초안 HTML 4.01 HTML 5

37. History
도표로 알아보는 간단한 웹의 흐름
1991 1999 2010
HTML 초안 HTML 4.01 HTML 5

38. History
도표로 알아보는 간단한 웹의 흐름
1991 1999 2010
HTML 초안 HTML 4.01 HTML 5
1996 1998 2007
CSS 1 CSS 2 CSS 2.1

39. History
도표로 알아보는 간단한 웹의 흐름
1991 1999 2010
HTML 초안 HTML 4.01 HTML 5
1996 1998 2007
CSS 1 CSS 2 CSS 2.1

40. History
도표로 알아보는 간단한 웹의 흐름
1994 2004 2006 2008
NN FF 1 FF 2 FF 3
1993 1995 1998 2002 2007 2009
Mosaic IE IE 5 IE 6 IE 7 IE 8
1991 1999 2010
HTML 초안 HTML 4.01 HTML 5
1996 1998 2007
CSS 1 CSS 2 CSS 2.1

41. History
도표로 알아보는 간단한 웹의 흐름
1994 2004 2006 2008
NN FF 1 FF 2 FF 3
1993 1995 1998 2002 2007 2009
Mosaic IE IE 5 IE 6 IE 7 IE 8
1991 1999 2010
HTML 초안 HTML 4.01 HTML 5
1996 1998 2007
CSS 1 CSS 2 CSS 2.1

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

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

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

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

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

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

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

52. 과거와는 다르게 현대적인 웹디자인은
어떻게 만들어야 할까요?

53. 과거에 우리는 테이블로 레이아웃을 표현했기 때문에
딱딱한 그리도 안에 갇혀 있는 모양의 디자인을 할 수 밖에 없었습니다.
아직도 수많은 사이트들이 전형적인 2단, 3단 구성의 레이아웃을
습관적으로 사용하고 있습니다.

54. 과거에 우리는 테이블로 레이아웃을 표현했기 때문에
딱딱한 그리도 안에 갇혀 있는 모양의 디자인을 할 수 밖에 없었습니다.
아직도 수많은 사이트들이 전형적인 2단, 3단 구성의 레이아웃을
습관적으로 사용하고 있습니다.

55. td td td
td td
td td
td

56. Table Lay-out
또한 디자인 제작시 좌에서 우로, 상에서 하로 제한적인 형태의 작성만
가능하기 때문에 사용자로 하여금 정보에 접근하는데 많은 제약이
따르는 디자인만 구현이 됩니다. 추후 클라이언트의 수정사항에서도
쉽고 빠르게 대응하기가 매우 어렵습니다. 새로 만드는게 더 쉽죠.
<table>
<tr>
td td td
</tr>
<tr>
td td
</tr>
<tr>
td td
</tr>
<tr>
td
</tr>
</table>

57. Table Lay-out
또한 디자인 제작시 좌에서 우로, 상에서 하로 제한적인 형태의 작성만
가능하기 때문에 사용자로 하여금 정보에 접근하는데 많은 제약이
따르는 디자인만 구현이 됩니다. 추후 클라이언트의 수정사항에서도
쉽고 빠르게 대응하기가 매우 어렵습니다. 새로 만드는게 더 쉽죠.
<table>
1 2 3
<tr>
td td td
</tr>
4 5
<tr>
td td
</tr>
6 7
<tr>
td td
</tr>
8
<tr>
td
</tr>
</table>

58. 하지만 현대의 웹 디자인에서 레이아웃은 CSS의 Float, Position을 활용하여
과거의 그것과는 다른 새로운 모양의 창의적인 디자인을 할 수 있습니다.

59. 하지만 현대의 웹 디자인에서 레이아웃은 CSS의 Float, Position을 활용하여
과거의 그것과는 다른 새로운 모양의 창의적인 디자인을 할 수 있습니다.

60. contents contents contents contents contents contents
contents contents contents contents contents contents
contents contents contents contents contents contents
contents contents contents contents contents contents
contents contents contents contents contents contents

61. CSS Lay-out CSS 레이아웃은 table 레이아웃과는 다르게 순서에 상관없이 자유롭게
내용을 변경시킬 수 있어 매우 효율적이며, 능력이 대단합니다.
contents contents contents contents contents contents
contents contents contents contents contents contents
contents contents contents contents contents contents
contents contents contents contents contents contents
contents contents contents contents contents contents

62. CSS Lay-out CSS 레이아웃은 table 레이아웃과는 다르게 순서에 상관없이 자유롭게
내용을 변경시킬 수 있어 매우 효율적이며, 능력이 대단합니다.
contents contents contents contents contents contents
contents contents contents contents contents contents
contents contents contents contents contents contents
contents contents contents contents contents contents
contents contents contents contents contents contents

63. CSS Lay-out CSS 레이아웃은 table 레이아웃과는 다르게 순서에 상관없이 자유롭게
내용을 변경시킬 수 있어 매우 효율적이며, 능력이 대단합니다.
contents contents contents contents contents contents
contents contents contents contents contents contents
contents contents contents contents contents contents
contents contents contents contents contents contents
contents contents contents contents contents contents

64. CSS Lay-out CSS 레이아웃은 table 레이아웃과는 다르게 순서에 상관없이 자유롭게
내용을 변경시킬 수 있어 매우 효율적이며, 능력이 대단합니다.
contents contents contents contents contents contents
contents contents contents contents contents contents
contents contents contents contents contents contents
contents contents contents contents contents contents
contents contents contents contents contents contents

65. 이는 테이블 기반의
레이아웃에서는
전혀 상상할 수도
없었던 일들입니다.

71. <td> <td>
<td>
<td>
<td> <td> <td> <td>
<td> <td> <td> <td>
<td> <td> <td> <td>
<td> <td> <td> <td>
<td> <td> <td> <td>

72. 1 <td> 2 <td>
3 <td>
4 <td>
5 <td> 6 <td> 7 <td> 8 <td>
9 <td> 10 <td> 11 <td> 12 <td>
13 <td> 14 <td> 15 <td> 16 <td>
17 <td> 18 <td> 19 <td> 20 <td>
21 <td> 22 <td> 23 <td> 24 <td>

73. <td> 1 2 <td>
3 <td>
4 <td>
5 <td> 6 <td> 7 <td> 8 <td>
9 <td> 10 <td> 11 <td> 12 <td>
13 <td> 14 <td> 15 <td> 16 <td>
17 <td> 18 <td> 19 <td> 20 <td>
21 <td> 22 <td> 23 <td> 24 <td>

74. <td> 1 2 <td>
3 <td>
4 <td>
5 <td> 6 <td> 7 <td> 8 <td>
9 <td> 10 <td> 11 <td> 12 <td>
13 <td> 14 <td> 15 <td> 16 <td>
17 <td> 18 <td> 19 <td> 20 <td>
21 <td> 22 <td> 23 <td> 24 <td>

75. <td> 1 2 <td>
3 <td>
4 <td>
5 <td> 6 <td> 7 <td> 8 <td>
9 <td> 10 <td> 11 <td> 12 <td>
13 <td> 14 <td> 15 <td> 16 <td>
17 <td> 18 <td> 19 <td> 20 <td>
21 <td> 22 <td> 23 <td> 24 <td>

76. <td> 1 2 <td> <div> <h1>
3 <td> <div>
4 <td> <div>
5 <td> 6 <td> 7 <td> 8 <td> <div> <div> <div> <div>
9 <td> 10 <td> 11 <td> 12 <td> <div> <div> <div> <div>
13 <td> 14 <td> 15 <td> 16 <td> <div> <div> <div> <div>
17 <td> 18 <td> 19 <td> 20 <td> <div> <div> <div> <div>
21 <td> 22 <td> 23 <td> 24 <td> <div> <div> <div> <div>

77. <td> 1 2 <td> 1 <div> 2 <h1>
3 <td> 3 <div>
4 <td> 4 <div>
5 <td> 6 <td> 7 <td> 8 <td> 5 <div> 6 <div> 7 <div> 8 <div>
9 <td> 10 <td> 11 <td> 12 <td> 9 <div> 10 <div> 11 <div> 12 <div>
13 <td> 14 <td> 15 <td> 16 <td> 13 <div> 14 <div> 15 <div> 16 <div>
17 <td> 18 <td> 19 <td> 20 <td> 17 <div> 18 <div> 19 <div> 20 <div>
21 <td> 22 <td> 23 <td> 24 <td> 21 <div> 22 <div> 23 <div> 24 <div>

78. <div> 1 2 <h1>
3 <div>
4 <div>
5 <div> 6 <div> 7 <div> 8 <div>
9 <div> 10 <div> 11 <div> 12 <div>
13 <div> 14 <div> 15 <div> 16 <div>
17 <div> 18 <div> 19 <div> 20 <div>
21 <div> 22 <div> 23 <div> 24 <div>

79. <div> 1 2 <h1>
3 <div>
표준이라는 이름으로 잘못 알려진 div
4 <div>
흔히 표준을 준수한다고 하면 다음과 같이 알고 있는데
그것은 표준을 잘못 알고 있는 것 입니다.
표준은 <table> 대신 <div>를 사용하는 거 아냐?
5 <div> 6 <div> 7 <div> 8 <div>
기존에 사용하던 코드를 CSS로 바꿔서 표현한다고 해서
코드가 저절로 정리되어 구조화되는 것은 아닙니다.
컨텐츠에 대한 고려를 하지 않고 단순히 테이블을
<div> 태그로 바꾼 경우 기존의 테이블 레이아웃과
큰 차이가 없습니다.
9 <div> 10 <div> 11 <div> 12 <div>
이런 방법을 표준으로 잘못 알고 있는데
표준 준수의 진정한 의미는 컨텐츠 중심의 구조화입니다.
<div>는 관련있는 엘리먼트를 묶어줌으로서
13 <div> 14 <div> 15 <div> 16 <div> 구조화라는 목적으로 사용되기 위해 만들어진 것입니다.
이를 통해 접근 가능한 환경을 구현할 수 있습니다.
17 <div> 18 <div> 19 <div> 20 <div>
21 <div> 22 <div> 23 <div> 24 <div>

80. <div> 2 1 <h1>
3 <div>
24 <div>
4 <div> 5 <div> 6 <div> 7 <div>
8 <div> 9 <div> 10 <div> 11 <div>
12 <div> 13 <div> 14 <div> 15 <div>
16 <div> 17 <div> 18 <div> 19 <div>
20 <div> 21 <div> 22 <div> 23 <div>

81. <div> 2 1 <h1>
3 <div>
보이는데 모양으로 디자인해서는
과거와 차이가 없습니다!
24 <div>
모양만 보고 디자인해서는 제약이 있는 환경에서 컨텐츠에
대한 접근이 어렵습니다. 예를 들면 다음의 상황을 고려하여
디자인 하여야 합니다.
4 <div> 5 <div> 6 <div> 7 <div> 만약, 자바스크립트나 CSS를 지원하지 않는 환경에서는?
만약, 이미지를 지원하지 않는 환경에서는?
쉽게 말하면 HTML 문서 자체만으로도 사용자가 컨텐츠를 읽고
이해하는데 제약 없이 접근이 가능해야 하기 때문에, 주요한 내용이
우선적으로 사용자, 장치에게 읽혀야 합니다. 즉, 우선적으로
8 <div> 9 <div> 10 <div> 11 <div>
마크업되어야 합니다.
HTML 문서에서 상위에 작성되어야 한다는 말입니다.
정상인과 다르게 장애인은 웹 사이트를 경험한다고 말했습니다.
12 <div> 13 <div> 14 <div> 15 <div>
그들에게 필요한 것은 눈으로 보는 것이 아닌, 작성된 흐름으로
웹을 경험합니다. 그런 그들에게 주요하지 않은 정보를 우선적으로
배치하는 잘못 이해된 현대의 CSS레이아웃은 그들로 하여금
16 <div> 17 <div> 18 <div> 19 <div>
잘못된 정보를 제공하고, 시간을 크게 낭비하게 만듭니다.
때문에 현대의 웹 디자인에서는 컨텐츠 중심의 사고로
20 <div> 21 <div> 22 <div> 23 <div> 디자인 하여야 합니다.

82. document

83. MARKUP
조금 복잡했다면 좀 더 쉽게 정리해보도록 할까요?
웹 문서 제작시 가장 우선적으로 고려해야 할 것은 문서에 담을 내용을
준비하고 각 영역을 브랜드, 주요/보조 내용, 사이트 정보 등 구분하는 것입니다.
document
사이트 보조내용
브랜드 주요내용
정보

84. MARKUP
document
브랜드
사이트 주요내용
정보
보조내용

85. MARKUP 각 영역에 대한 구분이 나눠지면, 우선적으로 사용자에게 전달되어야 할 영역과
보조 영역을 구분해내어 우선권 별로 순서를 부여할 수 있는 능력을 키워야 합니다.
document
영역 A
브랜드
영역 B
사이트 주요내용
정보
영역 C
보조내용
영역 D

86. MARKUP 각 영역에 대한 구분이 나눠지면, 우선적으로 사용자에게 전달되어야 할 영역과
보조 영역을 구분해내어 우선권 별로 순서를 부여할 수 있는 능력을 키워야 합니다.
document
영역 A 1
브랜드
영역 B 4 2
사이트 주요내용
정보
영역 C 3
보조내용
영역 D

87. MARKUP
document
1
영역 A
브랜드
2
영역 B
주요내용
3
영역 C
보조내용
4
영역 D
사이트
정보

88. MARKUP
각 영역에 대한 우선권을 부여했다면, 다음에 진행해야 할 일은 각 내용을 의미에 맞게
구조화하여 우선권이 높은 영역부터 문서의 상단에 위치하도록 작성하여야 합니다.
그래야 사용자에게 우선적으로 보여줘야 할 내용이 전달될 수 있는 가능성이 높습니다.
document
1
영역 A
브랜드
2
영역 B
주요내용
3
영역 C
보조내용
4
영역 D
사이트
정보

89. MARKUP
각 영역에 대한 우선권을 부여했다면, 다음에 진행해야 할 일은 각 내용을 의미에 맞게
구조화하여 우선권이 높은 영역부터 문서의 상단에 위치하도록 작성하여야 합니다.
그래야 사용자에게 우선적으로 보여줘야 할 내용이 전달될 수 있는 가능성이 높습니다.
document
1
영역 A
브랜드
2
영역 B
주요내용
예시 - 웹실무 수강생의 구조화
3
영역 C
보조내용
4
영역 D
사이트
정보

90. MARKUP
document
1
영역 A
브랜드
2
영역 B
주요내용
3
영역 C
보조내용
4
영역 D
사이트
정보

91. 위치에 대한 우선 적용이 정해지면 각 해당되는 영역을 구조화하여야 합니다.
MARKUP 이는 문서를 해독하여 사용자에게 정보를 제공하는 역할을 수행하는 브라우저가
해석할 수 있도록 문서를 마크업(Markup)한다는 의미입니다. 때문에 의미 전달의
정확성을 염두에 두고 심혈을 기울여 작성하여야 합니다.
document
1
영역 A
브랜드 <h1> 브랜드 </h1>
2
영역 B
주요내용
3
영역 C
보조내용
4
영역 D
사이트
정보

92. 위치에 대한 우선 적용이 정해지면 각 해당되는 영역을 구조화하여야 합니다.
MARKUP 이는 문서를 해독하여 사용자에게 정보를 제공하는 역할을 수행하는 브라우저가
해석할 수 있도록 문서를 마크업(Markup)한다는 의미입니다. 때문에 의미 전달의
정확성을 염두에 두고 심혈을 기울여 작성하여야 합니다.
document
1
영역 A
브랜드 <h1> 브랜드 </h1>
<h2> 제목 </h2>
2
영역 B
주요내용
<p> 내용 </p>
3
영역 C
보조내용
4
영역 D
사이트
정보

93. 위치에 대한 우선 적용이 정해지면 각 해당되는 영역을 구조화하여야 합니다.
MARKUP 이는 문서를 해독하여 사용자에게 정보를 제공하는 역할을 수행하는 브라우저가
해석할 수 있도록 문서를 마크업(Markup)한다는 의미입니다. 때문에 의미 전달의
정확성을 염두에 두고 심혈을 기울여 작성하여야 합니다.
document
1
영역 A
브랜드 <h1> 브랜드 </h1>
<h2> 제목 </h2>
2
영역 B
주요내용
<p> 내용 </p>
영역 C
<h4> 제목 </h4>
3 보조내용
<p> 내용 </p>
4
영역 D
사이트
정보

94. 위치에 대한 우선 적용이 정해지면 각 해당되는 영역을 구조화하여야 합니다.
MARKUP 이는 문서를 해독하여 사용자에게 정보를 제공하는 역할을 수행하는 브라우저가
해석할 수 있도록 문서를 마크업(Markup)한다는 의미입니다. 때문에 의미 전달의
정확성을 염두에 두고 심혈을 기울여 작성하여야 합니다.
document
1
영역 A
브랜드 <h1> 브랜드 </h1>
<h2> 제목 </h2>
2
영역 B
주요내용
<p> 내용 </p>
영역 C
<h4> 제목 </h4>
3 보조내용
<p> 내용 </p>
4
영역 D
사이트
정보
<address>
사이트
정보
</address>

95. MARKUP
document
1
영역 A
브랜드 <h1> 브랜드 </h1>
<h2> 제목 </h2>
2
영역 B
주요내용
<p> 내용 </p>
영역 C
<h4> 제목 </h4>
3 보조내용
<p> 내용 </p>
4
영역 D
사이트
정보
<address>
사이트
정보
</address>

96. MARKUP
문서의 해당영역에 적합한 구조를 구현하였다면,
각 영역의 덩어리를 그룹화(Grouping)하여 영역을 묶어주는 것이 필요합니다.
이는 차후 문서의 레이아웃을 잡고, 표현 디자인을 입히는데 중요한 역할을 합니다.
document
1
영역 A
브랜드 <div> <h1> 브랜드 </h1> </div>
<h2> 제목 </h2>
2
영역 B
주요내용
<p> 내용 </p>
영역 C
<h4> 제목 </h4>
3 보조내용
<p> 내용 </p>
4
영역 D
사이트
정보
<address>
사이트
정보
</address>

97. MARKUP
문서의 해당영역에 적합한 구조를 구현하였다면,
각 영역의 덩어리를 그룹화(Grouping)하여 영역을 묶어주는 것이 필요합니다.
이는 차후 문서의 레이아웃을 잡고, 표현 디자인을 입히는데 중요한 역할을 합니다.
document
1
영역 A
브랜드 <div> <h1> 브랜드 </h1> </div>
<div> <h2> 제목 </h2> </div>
2
영역 B
주요내용
<p> 내용 </p>
영역 C
<h4> 제목 </h4>
3 보조내용
<p> 내용 </p>
4
영역 D
사이트
정보
<address>
사이트
정보
</address>

98. MARKUP
문서의 해당영역에 적합한 구조를 구현하였다면,
각 영역의 덩어리를 그룹화(Grouping)하여 영역을 묶어주는 것이 필요합니다.
이는 차후 문서의 레이아웃을 잡고, 표현 디자인을 입히는데 중요한 역할을 합니다.
document
1
영역 A
브랜드 <div> <h1> 브랜드 </h1> </div>
<div> <h2> 제목 </h2> </div>
2
영역 B
주요내용
<p> 내용 </p>
<div> </div>
영역 C
<h4> 제목 </h4>
3 보조내용
<p> 내용 </p>
4
영역 D
사이트
정보
<address>
사이트
정보
</address>

99. MARKUP
문서의 해당영역에 적합한 구조를 구현하였다면,
각 영역의 덩어리를 그룹화(Grouping)하여 영역을 묶어주는 것이 필요합니다.
이는 차후 문서의 레이아웃을 잡고, 표현 디자인을 입히는데 중요한 역할을 합니다.
document
1
영역 A
브랜드 <div> <h1> 브랜드 </h1> </div>
<div> <h2> 제목 </h2> </div>
2
영역 B
주요내용
<p> 내용 </p>
<div> </div>
영역 C
<h4> 제목 </h4>
3 보조내용
<p> 내용 </p>
<div>
4
영역 D
사이트
정보
<address>
사이트
정보
</address>
</div>

100. MARKUP
영역을 그룹화(Grouping)하였다면, 각 영역에 대한 표시(Naming)가 필요하겠죠?
차후 CSS/Javascript에서 각 영역을 디자인(표현, 행동)하기 위함입니다.
생각해보세요. 이름이 없다면 어떤 영역이 어떤 영역인지 어떻게 알겠습니까?
document
1
영역 A
브랜드 <div> <h1> 브랜드 </h1> </div>
<div> <h2> 제목 </h2> </div>
2
영역 B
주요내용
<p> 내용 </p>
<div> </div>
영역 C
<h4> 제목 </h4>
3 보조내용
<p> 내용 </p>
<div>
4
영역 D
사이트
정보
<address>
사이트
정보
</address>
</div>

101. MARKUP
영역을 그룹화(Grouping)하였다면, 각 영역에 대한 표시(Naming)가 필요하겠죠?
차후 CSS/Javascript에서 각 영역을 디자인(표현, 행동)하기 위함입니다.
생각해보세요. 이름이 없다면 어떤 영역이 어떤 영역인지 어떻게 알겠습니까?
document
id=”brand”
1
영역 A
브랜드 <div> <h1> 브랜드 </h1> </div>
<div> <h2> 제목 </h2> </div>
2
영역 B
주요내용
<p> 내용 </p>
<div> </div>
영역 C
<h4> 제목 </h4>
3 보조내용
<p> 내용 </p>
<div>
4
영역 D
사이트
정보
<address>
사이트
정보
</address>
</div>

102. MARKUP
영역을 그룹화(Grouping)하였다면, 각 영역에 대한 표시(Naming)가 필요하겠죠?
차후 CSS/Javascript에서 각 영역을 디자인(표현, 행동)하기 위함입니다.
생각해보세요. 이름이 없다면 어떤 영역이 어떤 영역인지 어떻게 알겠습니까?
document
id=”brand”
1
영역 A
브랜드 <div> <h1> 브랜드 </h1> </div>
id=”contents”
<div> <h2> 제목 </h2> </div>
2
영역 B
주요내용
<p> 내용 </p>
<div> </div>
영역 C
<h4> 제목 </h4>
3 보조내용
<p> 내용 </p>
<div>
4
영역 D
사이트
정보
<address>
사이트
정보
</address>
</div>

103. MARKUP
영역을 그룹화(Grouping)하였다면, 각 영역에 대한 표시(Naming)가 필요하겠죠?
차후 CSS/Javascript에서 각 영역을 디자인(표현, 행동)하기 위함입니다.
생각해보세요. 이름이 없다면 어떤 영역이 어떤 영역인지 어떻게 알겠습니까?
document
id=”brand”
1
영역 A
브랜드 <div> <h1> 브랜드 </h1> </div>
id=”contents”
<div> <h2> 제목 </h2> </div>
2
영역 B
주요내용
<p> 내용 </p>
id=”contents_sub”
<div> </div>
영역 C
<h4> 제목 </h4>
3 보조내용
<p> 내용 </p>
<div>
4
영역 D
사이트
정보
<address>
사이트
정보
</address>
</div>

104. MARKUP
영역을 그룹화(Grouping)하였다면, 각 영역에 대한 표시(Naming)가 필요하겠죠?
차후 CSS/Javascript에서 각 영역을 디자인(표현, 행동)하기 위함입니다.
생각해보세요. 이름이 없다면 어떤 영역이 어떤 영역인지 어떻게 알겠습니까?
document
id=”brand”
1
영역 A
브랜드 <div> <h1> 브랜드 </h1> </div>
id=”contents”
<div> <h2> 제목 </h2> </div>
2
영역 B
주요내용
<p> 내용 </p>
id=”contents_sub”
<div> </div>
영역 C
<h4> 제목 </h4>
3 보조내용
<p> 내용 </p>
id=”site_info”
<div>
4
영역 D
사이트
정보
<address>
사이트
정보
</address>
</div>

105. MARKUP
영역을 그룹화(Grouping)하였다면, 각 영역에 대한 표시(Naming)가 필요하겠죠?
차후 CSS/Javascript에서 각 영역을 디자인(표현, 행동)하기 위함입니다.
생각해보세요. 이름이 없다면 어떤 영역이 어떤 영역인지 어떻게 알겠습니까?
document
id=”brand”
1
영역 A
브랜드 <div> <h1> 브랜드 </h1> </div>
id=”contents”
<div> <h2> 제목 </h2> </div>
2
영역 B / sidebar / footer
주요내용
header <p> 내용 </p>
id=”contents_sub”
일반적으로 각 영역의 이름을 보이는데로 짓는데
영역의 이름은 의미 구조적으로 접근하여 작명하여야 합니다.
<div> </div>
영역 C
<h4> 제목 </h4>
3 보조내용
<p> 내용 </p>
id=”site_info”
<div>
4
영역 D
사이트
정보
<address>
사이트
정보
</address>
</div>

106. header
contents
sidebar
footer

107. PRESENTATION 보이는데로 영역의 이름을 지으면 제한적인 레이아웃 밖에
구상할 수 없습니다. 아래 그래프를 통해 확인해 볼까요?
header
contents
sidebar
footer

108. PRESENTATION
header
sidebar contents
footer

109. PRESENTATION 보이는데로 지은 이름이기에 sidebar는 이름 그대로 문서의
양 사이드에 위치하여야만 합니다. sidebar는 다른 위치로
이동하기가 쉽지 않습니다.
header
sidebar contents
footer

110. PRESENTATION 보이는데로 지은 이름이기에 sidebar는 이름 그대로 문서의
양 사이드에 위치하여야만 합니다. sidebar는 다른 위치로
이동하기가 쉽지 않습니다.
header
contents sidebar
footer

111. PRESENTATION
header
contents
sidebar
footer

112. PRESENTATION 좀 더 응용을 해 본다면 아래 그림처럼 변형이 가능하지만,
그래도 양 사이드를 벗어나는 디자인은 생각하기 어렵습니다.
header
contents
sidebar
footer

113. PRESENTATION 좀 더 응용을 해 본다면 아래 그림처럼 변형이 가능하지만,
그래도 양 사이드를 벗어나는 디자인은 생각하기 어렵습니다.
header
contents
sidebar
footer

114. PRESENTATION
header
contents sidebar contents
footer

115. PRESENTATION
만약 sidebar 영역을 가운데 위치하는 디자인을 구상하여
적용하려 해도, 보이는데로 지은 이름이기 때문에 구상한
디자인 적용이 쉽지 않습니다.
header
contents sidebar contents
footer

116. PRESENTATION
footer
contents sidebar
header

117. PRESENTATION
만약 header와 footer 영역 위치를 바꾸는 디자인을 구상하여
적용하려 해도, 보이는데로 지은 이름이기 때문에 구상한 디자인
적용이 쉽지 않습니다.
footer
contents sidebar
header

118. PRESENTATION
header
contents
sidebar
footer

119. PRESENTATION 그렇기 때문에 보이는데로 영역의 이름을 지을 것이 아니라,
해당 영역이 담고 있는 내용의 의미대로 이름을 작성하는 것이
보다 효율적이고 유연한 디자인을 구현할 수 있습니다.
header
contents
sidebar
footer

120. PRESENTATION 그렇기 때문에 보이는데로 영역의 이름을 지을 것이 아니라,
해당 영역이 담고 있는 내용의 의미대로 이름을 작성하는 것이
보다 효율적이고 유연한 디자인을 구현할 수 있습니다.
header brand
contents
sidebar
footer

121. PRESENTATION 그렇기 때문에 보이는데로 영역의 이름을 지을 것이 아니라,
해당 영역이 담고 있는 내용의 의미대로 이름을 작성하는 것이
보다 효율적이고 유연한 디자인을 구현할 수 있습니다.
header brand
contents contents
sidebar
footer

122. PRESENTATION 그렇기 때문에 보이는데로 영역의 이름을 지을 것이 아니라,
해당 영역이 담고 있는 내용의 의미대로 이름을 작성하는 것이
보다 효율적이고 유연한 디자인을 구현할 수 있습니다.
header brand
contents contents
sidebar contents_sub
footer

123. PRESENTATION 그렇기 때문에 보이는데로 영역의 이름을 지을 것이 아니라,
해당 영역이 담고 있는 내용의 의미대로 이름을 작성하는 것이
보다 효율적이고 유연한 디자인을 구현할 수 있습니다.
header brand
contents contents
sidebar contents_sub
footer site_info

124. 이야기를 듣고 보니 그럴 듯 하군요.
문서에서 주요한 정보를 우선적으로 사용자가 먼저
확인할 수 있어야 한다는 의견 말입니다.
클라이언트

125. 이야기를 듣고 보니 그럴 듯 하군요.
문서에서 주요한 정보를 우선적으로 사용자가 먼저
나...
설득 되는건가? 확인할 수 있어야 한다는 의견 말입니다.
클라이언트

126. 그 동안 문제가 되었던 웹 브라우저는 많이 발전해왔고, CSS와 같은 표준 지원도
이제는 일정 수준 이상 지원되고 있습니다. 그렇기 때문에 과거에 비해 지금은
웹 디자인을 하기에 매우 좋은 환경이 되었습니다.
물론, 문제가 없는 것은 아닙니다만,
그것은 차차 알아보고 풀어가 보도록 하겠습니다.

127. 앞에서 말씀드렸던 것처럼
사람들은 보다 좋은 것에 대해 우리가 생각하는 것보다
보다 많이 갈구하며, 그것을 사용하고자 합니다.
브라우저도 그 중 하나입니다.

128. 저도
보다 좋은
노트북 가방이
필요해요
앞에서 말씀드렸던 것처럼
사람들은 보다 좋은 것에 대해 우리가 생각하는 것보다
보다 많이 갈구하며, 그것을 사용하고자 합니다.
브라우저도 그 중 하나입니다.

129. Browser Statistics Visualization
2009년 현재 전 세계적인 브라우저 점유율 추세를 확인하면
위 그래프에서 확인할 수 있는 것처럼 표준을 준수한 브라우저의
점유율이 크게 상승한 것을 확인할 수 있습니다.
출처 :: http://w3schools.com/browsers/browsers_stats.asp

131. 마켓쉐어에서 설문조사한 결과에서는 파이어폭스가 압도적으로
사용성이 좋은 웹 브라우저라고 사용자들은 선택했습니다.
사용자들도 표준을 준수하고 확장성이 좋은 브라우저를 좋은
브라우저라고 인식하고 있다는 증거입니다.

132. Browser Statistics in Korea
2009년 현재 대한민국의 브라우저 버전 별 정보 및 사용 OS 버전 등 정보를
수집할 수 있는 정보 분석 사이트입니다.

133. 국내 환경에서의 웹 브라우저 점유율에 대한 내용의
글은 아라님 블로그를 통해 자세한 정보를 얻으실 수
있습니다. 참고하시면 좋겠죠?
요약하면 IE의 점유율이 98%에 육박한다는 결과와는
달리, 보다 사용률이 적다는 내용입니다. 다만, 온라인
결재시 ActiveX(Windows Platform, IE만 지원)로 인해
IE사용을 강제로 요구받게 된다는 것이죠.
이는 자유롭게 선택하여 사용할 권리를 침해한 것이
아니냐는 의견입니다.

134. 국내 환경에서의 웹 브라우저 점유율에 대한 내용의
글은 아라님 블로그를 통해 자세한 정보를 얻으실 수
있습니다. 참고하시면 좋겠죠?
요약하면 IE의 점유율이 98%에 육박한다는 결과와는
달리, 보다 사용률이 적다는 내용입니다. 다만, 온라인
결재시 ActiveX(Windows Platform, IE만 지원)로 인해
IE사용을 강제로 요구받게 된다는 것이죠.
이는 자유롭게 선택하여 사용할 권리를 침해한 것이
아니냐는 의견입니다.

136. 우리는 신뢰할 수 있는 근거 자료를 통해 시장이 변화할 것이라고
예측할 수 있습니다.
사실 현재 국내 웹디자인 시장의 과도기적인 현상은 이미 해외에
서 3~4년 전의 모습과 매우 유사합니다.
여러분이 현재 해외에서 제작되는 대다수의 웹 페이지가 표준을
준수해서 만들어진다는 현실을 직시하는 눈이 있다면.
그리고 그것을 준비하는 지금 여러분은 이미 보다 시장을 앞서나
가고 있는 것입니다.

137. 웹의 미래는 어떤 모습일까요?
팀 버너스 리 경은 웹의 미래를 다음과 같이 이야기 합니다.

138. Future

139. Richer User Experience
Future

140. Richer User Experience
웹을 사용하는 경험이 풍부해질 것입니다.
Future

141. Richer User Experience
웹을 사용하는 경험이 풍부해질 것입니다.
Browse With Eyes, Ears, Voice and Touch
Future

142. Richer User Experience
웹을 사용하는 경험이 풍부해질 것입니다.
Browse With Eyes, Ears, Voice and Touch
마우스와 키보드만으로 의사소통하는 것이 아니라,
Future

143. Richer User Experience
웹을 사용하는 경험이 풍부해질 것입니다.
Browse With Eyes, Ears, Voice and Touch
마우스와 키보드만으로 의사소통하는 것이 아니라,
Diverse mode of interaction (touch, pen, mouse, voice, assistive technologies, computer to computer)
Future

144. Richer User Experience
웹을 사용하는 경험이 풍부해질 것입니다.
Browse With Eyes, Ears, Voice and Touch
마우스와 키보드만으로 의사소통하는 것이 아니라,
Diverse mode of interaction (touch, pen, mouse, voice, assistive technologies, computer to computer)
보다 풍부한 리소스로 구현될 것입니다.
Future

145. Richer User Experience
웹을 사용하는 경험이 풍부해질 것입니다.
Browse With Eyes, Ears, Voice and Touch
마우스와 키보드만으로 의사소통하는 것이 아니라,
Diverse mode of interaction (touch, pen, mouse, voice, assistive technologies, computer to computer)
보다 풍부한 리소스로 구현될 것입니다.
Enable computers to do more useful work (Advanced Data Searching and Sharing)
Future

146. Richer User Experience
웹을 사용하는 경험이 풍부해질 것입니다.
Browse With Eyes, Ears, Voice and Touch
마우스와 키보드만으로 의사소통하는 것이 아니라,
Diverse mode of interaction (touch, pen, mouse, voice, assistive technologies, computer to computer)
보다 풍부한 리소스로 구현될 것입니다.
Enable computers to do more useful work (Advanced Data Searching and Sharing)
보다 똑똑하고 정확하고 신뢰있는 정보들이 서로 공유될 것입니다.
팀 버너스-리 경
Future

147. 수년에 걸친 노력으로 웹은 모바일 폰, 게임 장치, 텔레비젼 어디서나
접속해도 볼 수 있게 되었습니다. 그리고 미래에는 더욱 더 많은 기기에서
웹은 활용될 수 있을 것입니다.

148. 웹은 매우 빠르게 변하는 매체입니다,
오늘날까지 웹의 역사는 불과 20여년 남짓이지만 하루가 멀다하고 급변해왔습니다.
웹 디자인을 하는 사람이라면 자신이 만든 디자인을 다양한 환경에서
접할 수 있다는 점을 고려하여 디자인하여야 합니다.

149. 다양한 환경에서 봐도 무리없이 컨텐츠가 전달될 수 있는 디자인이 되게 하기 위해서는
구조와 표현을 분리시켜야 합니다. 이는 마치 사람의 모습을 띈 마네킹(구조)에
다양한 옷(표현)을 수시로 입혔다 벗겼다 하는 그것과 비슷합니다.

150. 다양한 환경에서 봐도 무리없이 컨텐츠가 전달될 수 있는 디자인이 되게 하기 위해서는
구조와 표현을 분리시켜야 합니다. 이는 마치 사람의 모습을 띈 마네킹(구조)에
다양한 옷(표현)을 수시로 입혔다 벗겼다 하는 그것과 비슷합니다.

152. CSS ZENGARDEN

153. CSS ZENGARDEN
구조와 표현을 분리한 사이트가 가져오는
강력함을 가장 잘 보여준 사례입니다.
문서 본연의 컨텐츠로서 접근이 가능하며
다양한 레이아웃과 디자인을 접목이
가능한 점은 매우 고무적입니다.

154. CSS ZENGARDEN
구조와 표현을 분리한 사이트가 가져오는
강력함을 가장 잘 보여준 사례입니다.
문서 본연의 컨텐츠로서 접근이 가능하며
다양한 레이아웃과 디자인을 접목이
가능한 점은 매우 고무적입니다.

155. CSS ZENGARDEN
표현 구조
구조와 표현을 분리한 사이트가 가져오는
강력함을 가장 잘 보여준 사례입니다.
문서 본연의 컨텐츠로서 접근이 가능하며
다양한 레이아웃과 디자인을 접목이
가능한 점은 매우 고무적입니다.

156. CSS MANIA.CO.KR 대한민국에서도 이 과정의 전신이 된 웹디자인 스페셜리스트 17기 웹 표준 수업을 듣고
구조와 표현을 완벽하게 분리한 웹 사이트를 제작하였습니다. - 웹스 17기 수강생 재영씨 작품

157. CSS MANIA.CO.KR 대한민국에서도 이 과정의 전신이 된 웹디자인 스페셜리스트 17기 웹 표준 수업을 듣고
구조와 표현을 완벽하게 분리한 웹 사이트를 제작하였습니다. - 웹스 17기 수강생 재영씨 작품
구조 표현

158. CSS MANIA.CO.KR 대한민국에서도 이 과정의 전신이 된 웹디자인 스페셜리스트 17기 웹 표준 수업을 듣고
구조와 표현을 완벽하게 분리한 웹 사이트를 제작하였습니다. - 웹스 17기 수강생 재영씨 작품
구조 표현

160. 만약 모양(표현)을 스타일시트나 그와 유사한 정보가 HTML과 분리된다면,
HTML은 특정 브라우저에서, 그리고 특정 창 크기와 상관없이 문서의 내용을 정확히 전달할 수 있을 것입니다.
크리스 릴리(CSS 워킹 그룹의 전 의장) 1994년 5월

161. 자! 결론입니다.
웹의 미래를 위해 우리는 무엇을 준비해야 할까요?
표준을 준수하고 접근성과 사용성을 고려하여, 구조와 표현을 분리하는 디자인을 해야 합니다.

162. next
자! 결론입니다.
웹의 미래를 위해 우리는 무엇을 준비해야 할까요?
표준을 준수하고 접근성과 사용성을 고려하여, 구조와 표현을 분리하는 디자인을 해야 합니다.