웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Web Standard
HOME WEBDESK Web Standard
HTML5을 당장 도입해야 하는 네 가지 이유
Posted by kimdirector | 2012.04.30 | Hit : 4172
HTML5 개발 모바일 CSS3
목록보기이전보기
지난 수년 동안 HTML5의 많은 부분이 업체들의 세계 제패 전략에 있어서의 역할에 초점이 맞춰져 있었다. 과연 애플은 HTML5로 표준화를 단행할까? 구글은 이에 플래시 지원으로 대응할까? 이런 가운데 HTML5의 진정한 기술적 업적과 개별적인 기관에 제공되는 전략적 기회가 과소평가되고 있다.
 
만약 검색 순위를 올리거나 모바일 독자에게 더 나은 지원을 제공하거나 개발 과정에 변화를 주고 싶다면 지금이야말로 HTML5를 웹 작업에 도입할 때다.
 
우선 몇 가지 분명히 짚고 넘어가고 싶은 부분이 있다. 'HTML5'는 오라클의 DBMS 11g 버전 같은 단일 제품이 아니다. 대신 HTML5는 정의의 집합체이며 좁은 의미로 기존의 그 어떤 브라우저도 완벽하게 지원하지 못하지만 모든 주요 브라우저가 부분적으로 지원하고 있는 기술이다.
 
좀더 광범위하게 보자면, HTML5는 HTML 표준뿐만이 아니라 공조하는 관련된 CSS3(Cascadint Style Sheets), 자바스크립트(JavaScript), 멀티미디어 코덱, SVG(Scalable Vector Graphics) 등을 포함하며 새로운 HTML 정의의 대부분을 구성하고 있다.
 
 
물론 HTML5는 현 시점에서 모든 기관에 적합하지 않을 수 있다. 구체적인 상황에 적용하기 위해서는 최종 사용자의 브라우저에 관한 자세한 정보, 사용되는 HTML5의 부분, 웹 프레즌스를 위한 기관의 목표 등이 필요하다.
 
그리고 아직 실제적인 그 어떤 애플리케이션도 모든 HTML5를 사용하지 않고 있다. 최종 사용자들이 사용하는 브라우저와 서버 측면의 기술과 더불어 여러분이 필요로 하는 부분의 호환성은 매우 중요한 부분이다.
 
하지만 지금이야말로 대부분의 개발 기업들이 HTML5를 도입해 네 가지의 장점을 모두 활용할 때라고 말하고 싶다.
 
1. 빨라진 이미지 다운로드, 모바일 사용자에게 유리
웹 페이지 디자인에서 '그래디언트(Gradient)'는 배경 효과로 웹 사이트가 보여지는 '창'의 미묘한 색조 또는 질감이라 할 수 있다. 기업 디자이너들은 색조의 균형과 경계를 맞추기 위해 상당한 노력을 기울이며, 대부분의 사용자에게 영향을 끼치는 분위기 또는 스타일을 완성하는 것은 매우 중요하다.
 
식스 리비전스(Six Revisions) 설립자 제이콥 구브는 웹 디자인에서 그래디언트 효과를 사용한 25가지의 모범 사례를 보여주고 있다.
 
초기 20년 동안의 그래디언트 효과는 '그리기'에 의한 것이었다. HTML5 이전에 배경은 하나의 이미지로 제공되어야 했다(아마도 여러 하위 이미지를 이어 붙였을 것이다). 예를 들어 포토샵은 그래디언트로 사용하기 위한 배경 이미지를 구성하기 위해 사용하는 '그래디언트 툴'을 제공하고 있다. 모든 숙련된 웹 디자이너들이 배경 이미지로 구현된 그래디언트를 도입하면서 이런 툴은 큰 성공을 거뒀다.
 
HTML5가 이를 변화시키고 있다. HTML5의 CSS3 부분은 그래디언트를 의미론적으로 표현한다. 즉, 그림이 아닌 의미를 가진 단어들로 표현하는 것이다. 여기서 한 예를 살펴보자.
 
.gradientArea { background: -o-linear-gradient(#FFB260, #FF7F13); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb260', endColorstr='#ff7f13', GradientType=0); } }
 
이 예제의 자세한 문법이나 가벼운 색조의 오렌지색 사각형으로 렌더링하는 것이 중요한 것이 아니다. 중요한 것은 이미지가 아니라 단어들을 통해 표현한 것의 결과물이다.
 
우선, 이것은 좀더 간소화됐다. CSS3 그래디언트 사양은 일반적으로 몇백 바이트(Byte)에 불과하다. 그래디언트를 위한 배경 이미지의 경우 종종 수천 바이트에 이른다. 하지만 이런 사소한 이점 외에도 CSS3 그래디언트는 즉시 처리가 가능하다는 장점이 있다.
 
전송을 위해 새로운 파일을 열 필요가 없다는 뜻이다. 많은 웹 사이트 방문자들이 대역폭이 제한된 모바일 브라우저를 사용하고 있을 때 페이지를 표시하기 제공하기 위한 보조 연결의 수가 적을수록 성능을 높일 수 있다.
 
그렇게 되면 웹 디자이너들은 언제나 그랬던 것처럼 포토샵의 그래디언트 툴 등을 이용해 작업을 하되 HTML4나 XHTML이 아닌 CSS3로 내보내기 하면 되는 것이다. 그러면 최종 사용자들의 브라우저에서 표시되는 내용은 큰 차이가 없지만 훨씬 더 따른 다운로드 속도를 기대할 수 있는 것이다.
 
또한 서로 다른 화면크기에 CSS3 그래디언트를 적용하는 것이 훨씬 쉽다. 이는 특히 화면의 해상도가 제 각각인 모바일 사용자들에게 큰 장점이 될 수 있다. 기술적 세부사항 때문에 다소 혼란스러울 수 있을 것이다.
 
• 이론상으로 다운로드 비용을 낮추기 위해 구식 그래디언트를 즉각적으로 처리할 수 있다. 이것은 일반적으로 적용되지 않는다.
• HTML5에는 CSS3 외의 기타 그래디언트 효과도 포함되어 있다.
• 그래디언트의 CSS3 지원 덕분에 새로운 수준의 프로그램이 가능해졌다. 예를 들어 보는 사람의 연령 또는 위치에 따라 그래디언트를 조정할 수 있다.
 
이런 가능성이 프로그래머에게는 새로운 즐거움이 되겠지만 그다지 추천하고 싶지 않다. HTML5의 주요 특징은 더 빨라진 다운로드, 모바일 폼 팩터(Form Factor)로의 쉬운 포팅, 저렴해진 유지/보수 등을 가능케 하는 의미론적으로 표현된 그래디언트인 것이다.
 
2. 향상된 SEO
CSS3 표현을 가진 기타 보편적인 그래픽 효과로는 불투명(전면의 이미지가 충분히 투명해야 배경 이미지가 부분적으로 보일 수 있다), 가장자리 다듬기, 드롭 섀도우(Drop Shadow) 등이 있다. 이 모든 것들이 CCS3 그래디언트의 간소화된 업로드와 더 쉬워진 크로스 플랫폼(Cross Platform) 유지/보수를 공유할 수 있다. 또한 이것들은 매우 중요한 SEO(Search Engine Optimization)에 있어 유리한 점이 있다.
 
SEO에 대한 영향을 이해하기 위해 그래디언트 부분으로 다시 돌아가보자. CSS3 그래디언트의 또 다른 기술적 이점은 SCCS(Source Code Control System)와의 호환성이 높아졌다는 점이다.
 
CSS3 이전에 그래디언트는 사진으로 인식됐었다. 일반적인 SCCS에서 사진을 바꾸는 것은 이해하기 힘든 작업이다. SCCS 자체는 오직 발생하는 변화와 그 변화에 대한 코멘트(Comment)만을 기록한다.
 
하지만 CSS3 그래디언트의 의미론적 마크업(Markup)을 통해 SCCS는 그래디언트를 표현하는 텍스트에서 알맞게 동작할 수 있다. SCCS는 특정 시점에서 그래디언트의 색조 또는 강도 변화를 다음과 같은 형식에 따라 자동으로 보고할 수 있다.
 
< background: -o-linear-gradient(#FFB260, #FF7F13); --- > background: -o-linear-gradient(#FFB260, #FF3F13);
 
이것은 프로그래머에게 매우 편리한 기능이다. 검증된 개발 버전 구성 등의 소스 코드를 관리하기 위해 그들이 사용하는 툴은 웹 디자인의 그래픽 구조로 더욱 자연스럽게 확장될 수 있다.
 
이런 장점은 불투명과 기타 CSS3 마크업을 적용할 때 더욱 증폭된다. 'Acme Widgets'라는 기업이 자사의 이름을 자사 홈 페이지에 불투명하게 표시했다고 가정해 보자. CSS3 이전에 이것은 포토샵이나 이와 유사한 툴을 이용해야 했으며 결과물에서도 'Acme Widgets'이라는 단어를 특정 불투명도로 표시하는 이미지를 얻을 수 밖에 없었다.
 
하지만 검색 엔진은 그래픽으로 표현된 단어를 찾을 수 없었다. 왜냐하면 'Acme Widgets'라는 단어는 이미지에 포함되어 있어 실제적으로 검색 엔진이 볼 수 없었기 때문이다. 초기의 검색 엔진은 사람보다 적은 양의 원문 콘텐츠를 볼 수 밖에 없었기 대문에 검색 결과에서 중요한 웹 페이지를 빠뜨리는 경우가 종종 있었다.
 
CSS3가 이것을 변화시키고 있다. CSS3는 불투명, 2-D, 3-D 등의 효과가 적용된 페이지의 원문 콘텐츠의 훨씬 많은 부분을 텍스트로 인식할 수 있도록 한다.
 
이런 SEO에 대한 영향 때문에 CSS3에 주목하지 않을 수 없는 것이다. 웹 페이지가 아름다워도 방문자가 없다면 소용이 없으며, 구식 그래픽 디자인 때문에 검색 엔진이 콘텐츠를 제대로 검색하지 못해 방문자가 줄어드는 불상사가 발생할 수 있다.
 
3. 세련된 애니메이션 효과
HTML5는 이미 앞서 소개한 특징을 가진 다양한 기능을 갖추고 있다. HTML5는 최고 수준의 디자이너가 제공하는 것과 동일한 디자인을 저렴한 비용으로 구현할 수 있게 할 뿐만 아니라 더 빨라진 로드(Load)와 의미론적 마크업의 SEO 및 유지/보수 장점 등이 있다. 또한 HTML5는 초기 버전에서는 불가능했던 효과도 제공하고 있다. 그 중 하나가 애니메이션이다.
 
과거 웹 팀들은 세련된 애니메이션 효과를 위해 일반적으로 플래시를 사용했다. 플래시의 단점은 검색 엔진이 플래시를 색인하지 않고(반드시 그런 것은 아니지만 상당한 골칫거리가 되고 있다), 애플의 iOS와 기타 운영체제가 이를 허용하지 않으며, 보안 프로필과 라이선스 문제로 많은 기관에서 사용을 제한하고 있다는 점은 이미 잘 알려져 있다.
 
하지만 HTML5를 이용하면 비교적 세련된 시각적 애니메이션이 의미론적 애니메이션으로 바뀔 수 있다.
 
4. 쉬워진 앱 개발, 모바일 사용자에게 유리
마지막으로 HTML5가 제공하는 질적인 장점은 네이티브 애플리케이션과 경쟁하기 위한 충분한 프로그래밍 환경을 제공한다는 점이다.
 
이것은 특히 모바일 최종 사용자들에게 있어 중요하다. 네이티브 앱 개발에는 비용이 많이 든다. 프로그래머 비용이 비싸고 라이선스는 문제는 까다롭다 못해 엉뚱하기까지 하며 휴대성도 문제가 된다. HTML5는 매우 강력하기 때문에 많은 앱들을 HTML5 내에서 효과적으로 코딩(Coding) 할 수 있다. 네이티브 앱과 비교했을 때의 장점은 다음과 같다.
 
• 검색 엔진에 의한 자동 검색
• 추가적인 설치 없이 최종 사용자에게 즉시 접근 가능
• 내부 데스크톱, 모바일, 원격 가정 또는 사무실 사용자를 잇는 단일 코드 기반
 
HTML5는 오랫동안 그 기준이 마련되고 있다. 많은 사람들이 웹 사이트 구조의 가장 중요한 부분을 의미론적인 마크업과 이해할 수 있는 API로 개발했다. HTML5를 현명하게 사용하면 더 빠르고 민첩한 다운로드, 향상된 검색엔진 배치, 수월한 개발이 가능하다.

 
Posted by kimdirector | 2012.04.30 | Hit : 4172
Origin http://www.itworld.co.kr/news/75243?page=0,0
Tags HTML5 개발 모바일 CSS3
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webaccessibility&no=74

COMMENT
Commented by 가야태자
2012.04.30 17:49:07X
HTML5가 대세긴 한가 봅니다. 폰갭으로 웹앱두 만들 수 있구요 ^;;
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
로고 폰트 파워포인트 품질 인테리어 스크롤 HTML5 윈도우7 이벤트 분석 typewonder 디자인 트렌드 생각정리 감성 기획자 무료 태블릿 브랜드 홈페이지 디자이너 디자인 소비자 인생 Draft 유네스코 제안서 사진인화 기획 직원 백신 모바일 리더쉽 관리자 UX 비즈니스 가이드 마이크로소프트 CIP 설정