[디자인 스터디 그룹 초청 세미나]에서 발표한 "나는 웹 크리에이터다! 그리고... 최근 웹 핫이슈!" 세션의 발표 자료입니다. ※ 이 자료는 오래전 진행한 내용을 다루고 있습니다. 작성 시점 혹은 이후라면 유용하지 않을 수 있으니 참고 부탁드립니다.

1. 나는 웹 크리에이터다!
그리고...
최근 웹 핫이슈!
Microsoft MVP(ASP.NET)
Taeyo.NET 운영진
한상훈

2. 목차
• 나는 웹 크리에이터다!
– 웹을 만드는 사람들
– 웹디자이너? 그래픽디자이너?
• 최신 웹 핫이슈
– 몇 가지 추려본 핫이슈
– 웹 접근성 컨텐츠 강화
– IE6 기술지원 중지, 그리고 자동 업데이트
– HTML5
– CSS3
– 반응형 웹

3. 나는 웹 크리에이터다!

4. 웹을 만드는 사람들
기획자
• 대부분은…
디자이너
개발자

5. 웹을 만드는 사람들
기획자
디자이너
퍼블리셔
DBA
개발자
테스터
컨텐츠 기획자
운영 기획자
사이트 기획자
마케팅 기획자
플래셔
웹 디자이너
DB 운영 관리자
DB 스크립터
서버 개발자
클라이언트 개발자
버그 테스터
QA
• 광범위하게 보면…

6. 웹디자이너? 그래픽디자이너?
• 웹디자이너?
– 웹디자이너는 인터넷 홈페이지를 디자인하고 웹사이트를
구축한다. 웹디자이너는 홈페이지의 문자, 그림, 동화상, 음성 등을 재
가공하여 이용자들이 알기 쉽게 만드는 작업을 한다. 웹사이트의 전체
적인 이미지를 결정한 후 네비게이션 설계를 하고 전
체 구조, 메뉴와 서브메뉴를 위계적으로 설정하며, 웹
사이트를 시각적으로 레이아웃한다. 웹사이트의 주요 화면을
주기적으로 갱신하며 배너와 플래시 애니메이션을 제작한다. 이메일 및
게시판 관리업무를 수행하기도 하며, 회사의 로고나 일러스트레이션을
디자인하기도 한다. (NAVER 지식사전)

7. 웹디자이너? 그래픽디자이너?
• 그래픽디자이너?
– 그래픽 디자이너란 그래픽디자인을 전문적으로 하는 사람으로 어떤
메시지의 시각적 전달을 목적으로 한 시각디자인 중
에서 주로 인쇄물 등을 위한 평면적 표현의 인쇄기술
을 적용하여 다양한 제품에 문양을 그리거나 광고, 포
장지, 색표지, 카탈로그 등의 창작 및 제작하는데 관련
된 업무를 수행하는 사람이다. 영화나 텔레비전의 타이틀 디자
인도 포함되는데 손으로 하지 않고 컴퓨터 등을 통해 할 수도 있다.
컴퓨터 그래픽디자이너, 광고디자이너, 포스터디자이너, 인쇄디자이
너, 시각 디자이너 등으로 구분된다. (NAVER 지식사전)

8. 웹디자이너? 그래픽디자이너?
• 가장 중요한 차이는…

9. 최신 웹 핫이슈!

10. 몇 가지 추려본 핫이슈
• 웹 접근성 컨텐츠 강화
• IE6 기술지원 중지 그리고 자동 업데이트
• HTML5
• CSS3
• 반응형 웹

11. 웹 접근성 위반 사례
• 시각장애인 “웹 접근성 차별했다.”
– 서울도시철도, 대한항공 등에 손배소
• 시정 명령을 정당한 사유 없이 이행하지 아니한 자는
3천만원 이하의 과태료 (장애인차별금지 및 권리
구제 등에 관한 법률, 시행 2013. 4. 23)

12. 웹 접근성 검증
• 웹 접근성 연구소에서 품질마크 인증
– 사이트당 검증비용 : 200만원
– 인증 유효기간 만료 / 중대한 변화 발생시 갱신검
사 필요
• 갱신심사 : 80만원
• 웹 접근성 가이드 제공
– 한국형 웹 콘텐츠 접근성 지침 2.0
– 웹 접근성 연구소 개발자 아카이브
– 모바일 애플리케이션(안드로이드) 접근성 점검 매
뉴얼 1.0

13. 기술지원 중지 및 자동 업데이트
• 디도스 공격과 웹 피싱 등 갈수록 지능화되는 사
이버 공격으로부터 인터넷 사용자들을 안전하게
보호
• HTML5 웹표준을 준수한 최신 버전 이용으로 웹
환경 개선을 위한 것
• 2012년 1월 호주, 브라질에서 시작된 IE 자동 업
데이트는 2월 전세계로 확대
• 윈도우XP와 IE6의 서비스팩 3(SP3)는 오는 2014
년 4월에 기술지원이 종료될 예정

14. HTML5 / CSS3
• HTML5란?
– 웹 문서를 제작하는 데 쓰이는 기본 프로그래밍 언어
HTML(Hypertext Markup Language)의 최신규격
• 왜 HTML5인가?
– 새로 추가된 태그들을 통해 컨텐츠의 의미를 세분화
하여 구조화 할 수 있음(시멘틱 마크업, 웹 접근성)
– 검색엔진에 최적화 된 컨텐츠 제공(SEO)으로 광고효
과 증진
– HTML + JAVASCRIPT API + WEB FORM + LOCAL
STORAGE + WEB SOCKET

15. HTML5 / CSS3
• HTML5 지원현황
– IE6.0 | 26/500
– IE7.0 | 27/500
– IE8.0 | 42/500
– IE9.0 | 138/500
– IE10.0 | 319/500
– FireFox14 | 345/500
– Chrome21 | 437/500
– Safari6.0 | 376/500
– Opera12 | 385/500

16. HTML5 / CSS3
• CSS란?
– CSS(Cascading Style Sheet)는 마크업 언어가 실제 표
시되는 방법을 기술하는 언어로, HTML과 XHTML에
주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표
준이며, 레이아웃과 스타일을 정의할 때의 자유도가
높다.
• 왜 CSS3인가?
– 여러 선택자(Selector) 지원가능
– 새로 추가된 속성들로 다양한 디자인을 더욱 쉽게 표
현 가능
– 더 좋은 도구를 선택한 사용자에게는 더 향상된 경험
을 제공

17. HTML5 / CSS3
• CSS3 속성 지원현황
– IE6.0 | 1/25
– IE7.0 | 1/25
– IE8.0 | 5/25
– IE9.0 | 14/25
– FireFox11 | 23/25
– Chrome18 | 24/25
– Safari5.1 | 24/25
– Opera11.61 | 19/25

18. 반응형 웹
• 반응형 웹이란?
– 하나의 소스로 제작된 컨텐츠가 데스크탑에만 국
한되지 않고 타블렛 PC, 모바일 폰 등 다양한 크
기의 디바이스 환경에 맞추어 해상도나 화면이 동
적으로 변환되는 기법
• 왜 반응형 웹인가?
– 하나의 소스로 다양한 해상도의 기기(데스크탑,
타블렛 PC, 핸드폰)에서 레이아웃이 깨지지 않음
– 기존 데스크탑 용, 모바일 용 사이트 제작에서 하
나의 소스로 사이트 제작을 하게 됨으로 비용 및
시간 절감

19. 반응형 웹 구축 사례(보스턴 글로브)

20. 반응형 웹 구축 사례(라이코스)

21. 결론
• IE6,7은 보안적 결함과 기술적 지원 중지로 최신
브라우저로 업데이트 될 예정
• HTML5 / CSS3은 현재의 IE 버전에서는 사용할
수 없지만 최신 브라우저와 다른 디자인 및 기능
으로 지원 가능
• 반응형 웹 사이트 제작으로 비용 및 작업 소요시
간 절감
• 더 좋은 도구를 선택한 사용자에게는 더 향상된
경험을.

22. 참고문헌
– http://www.slideshare.net/livefront/responsive-
design-7877412
– http://www.slideshare.net/saracannon/responsive
-design-12837964
– http://www.slideshare.net/stephenhay/structured
-content-first
– http://naradesign.net/rwd/pr/#s3