JSCalendar 1.0을 기반으로 하여 생년월일이나 일자등을 UI에서 선택할 수 있도록 해주는 Javascript입니다.
다운 사이트는 dynarch이며 jscalendar-1.0다운 받아서 카피한 다음에 필요한 js와 css를 삽입하여 원하는 화면을 구성할 수 있습니다.

1. 화면 UI

2. 사용 방법

<!-- main calendar program -->

<script type="text/javascript" src="/calendar.js"></script>

<!-- language for the calendar -->

<script type="text/javascript" src="/lang/calendar-ko.js"></script>

<!-- the following script defines the Calendar.setup helper function, 

which makes adding a calendar a matter of 1 or 2 lines of code. -->

<script type="text/javascript" src="/calendar-setup.js"></script>

<!-- calendar stylesheet -->

<link rel="stylesheet" type="text/css" media="all" 

href="/calendar-white.css" title="white" />

.........

 <td><input type="text" name="dob" id="dob" readonly="1" /></td>

 <td><img src="img.gif" id="f_trigger_c" 

style="cursor: pointer; border: 1px solid red;" title="Date selector"

      onmouseover="this.style.background='red';"

 onmouseout="this.style.background=''" /></td>

<script type="text/javascript">

    Calendar.setup({

        inputField     :    "dob",     // id of the input field

        ifFormat       :    "%Y-%m-%d", // format of the input field

        button         :    "f_trigger_c",// trigger for the calendar(button ID)

        align          :    "Tl",       // alignment (defaults to "Bl")

        singleClick    :    true

    });

</script>

'오픈소스SW' 카테고리의 다른 글

James Server 활용  (0) 2008.12.26
Ajax기반의 Webmail 소개  (0) 2008.12.26
Open Source 기반의 차트 프로그램  (0) 2008.12.26
Ajax Scripts  (0) 2008.12.26
Web-Based HTML Editor 비교 및 미리보기  (0) 2008.12.02

 

1. JFreeChart
 - 지원 기능 : pie charts (2D and 3D), bar charts (horizontal and vertical, regular and stacked), line charts, scatter plots, time series charts, high-low-open-close charts, candlestick plots, Gantt charts, combined plots, thermometers
 - 지원 언어 : Java 지원
 - 예제 사이트 : http://www.jfree.org/jfreechart/samples.html

2. Cewolf
 - 지원 기능 : Line [XY], [3D] Pie, [3D] Horizonal Bar, [3D] Vertical [XY] Bar, [3D] Stacked Vertical Bar, Area [XY], Scatter Plot, Candlestick, High Low, Gantt, Overlaid, Combined
 - 지원 언어 : Java 지원
 - 예제 사이트 : http://cewolf.sourceforge.net/new/demo.html

3. PHP/SWF Charts
 - 지원 기능 : Line, Column, Stacked column,  Floating column, 3D column, Stacked 3D column, Parallel 3D column, Pie, 3D Pie, Bar, Stacked bar,  Floating bar, Area, Stacked area, Candlestick, Scatter, Polar, Mixed, Composite, Joined
 - 지원 언어 : PHP + Flash (swf), SP, CFML, Perl언어에서도 지원
 - 예제 사이트 : http://www.maani.us/charts/index.php?menu=Gallery

4. Open Flash Chart(플래시 기반)
 - 지원 기능 : Data Lines, Bar Chart, 3D Bar Chart, Glass Bar Chart, Fade Bar Chart, Sketch Bars, Area Chart, Bars + Lines, Pie Chart, Pie Chart Links, Scatter Chart, Mixed Scatter, High Low Close, Candle
 - 지원 언어 : 플래시 기반으로 Java, Perl, Python, Ruby and Rails, php, .net 지원
 - 예제 사이트 : http://teethgrinder.co.uk/open-flash-chart/index.php

5. AmCharts(플래시 기반)
 -  지원 기능 : Animated or static, Value axis, Linear, logarithmic value axis scale, bullets, Clickable columns/bars, Gradient fills, plot area Axis
 - 지원 언어 :  플래시 기반으로 PHP, .NET, Java, Ruby on Rails, Perl, ColdFusion 언어 지원
 - 예제 사이트 : http://www.amcharts.com/column

6. FusionCharts(플래시 기반)
 - 지원 기능 : 다양한 기능 지원함
 - 지원 언어 : cross-browser, cross-platform flash chart로서 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, simple HTML pages 지원
 - 예제 사이트 : http://www.fusioncharts.com/Free/Gallery.asp?gMenuItemId=3

7. Flot
 - 지원 기능 : Line 기능 등 기본적인 기능에 줌 등 다양한 옵션을 줄 수 있음
 - 지원 언어 : Javascript + jQuery로 구성되어 있어 웹기반 언어는 모두 지원, Cross Browser지원
 - 예제 사이트 : http://people.iola.dk/olau/flot/examples/

8. Flotr
 - 지원 기능 : Basic Axis, Basic Bar, Basic Legend, Mouse Track, Mouse Zoom, JSON Data
 - 지원 언어 : Javascript + Prototype 1.6.0.2로 구성되어 있어 웹기반 언어는 모두 지원, Cross Browser지원
 - 예제 사이트 : http://www.solutoire.com/experiments/flotr/examples/basic.html

9. PlotKit
 - 지원 기능 : HTML Canvas: Safari 2+, Opera 9+, Firefox 1.5+, IE 6 (in emulated mode), SVG: Opera 9+, Firefox 1.5+ (see note), IE6 with Adobe SVG
 - 지원 언어 : Javascript + MochiKit 1.3로 구성되어 있어 웹기반 언어는 모두 지원, Cross Browser지원
 - 예제 사이트 : http://media.liquidx.net/js/plotkit-tests/svg-sweet.html

10. Emprise JavaScript Charts
 - 지원 기능 : Interactive, Axis Scaling, Auto Zooming, Scrolling, Stackable Series, Multiple Chart Types, Ajax-Driven Data, Compatible, Plugin Free, Customizable
 - 지원 언어 : Javascript로 구현되어 있고 Cross Browser지원
 - 예제 사이트 : http://www.ejschart.com/examples/index.php

11. Visifire
 - 지원 기능 : 실버 라이트 설치되면 다양한 차트 기능이 지원됨
 - 지원 언어 : Silverlight Charts
 - 예제 사이트 : http://www.visifire.com/silverlight_charts_gallery.php

'오픈소스SW' 카테고리의 다른 글

Ajax기반의 Webmail 소개  (0) 2008.12.26
JSCalendar를 활용한 일자 조회  (0) 2008.12.26
Ajax Scripts  (0) 2008.12.26
Web-Based HTML Editor 비교 및 미리보기  (0) 2008.12.02
core file 분석  (0) 2008.04.17

 

자신만의 UCC 사이트를 구축하기 위해서 필요한 프로그램들을 나열하고 이들의 용도와 설치 방법, 사용 방법을 설명함으로써 동영상 사이트 만드는데 도움을 주고자 이글을 적습니다.

1. FFmpeg란?
FFmpeg은 stream audio와 video를 스트리밍하고, 레코딩하고, 컨버팅하는 오픈소스 솔루션입니다. 여기에는 또한 libavcodec라는 우수한 audio/video 라이브러리를 내장하고 있습니다.
거의 대부분의 OS에서 컴파일되므로 활용이 가능하다는 장점이 있죠.
ffplay multimedia player를 내장도 하고 있습니다. ffserver라는 스트리밍 서버 기능도 있고 다양한 파일 포멧(AVI, MPEG, OGG, Matroska, ASF, …)과 인코딩 포멧(MPEG, DivX, MPEG4, AC3, DV, …)을 지원합니다.
간략하게 요역하자면 아래와 같습니다.

  • ffmpeg: 비디오 파일 포맷을 다른 포맷으로 변환할 수 있는 커맨드라인 툴. TV 수신 카드로부터 실시간 영상을 받아 인코딩할 수 있음
  • ffserver: HTTP 프로토콜을 사용하는 스트리밍 서버이다. 실시간 재생 도중 재생 위치 변경 기능을 제공함
  • ffplay: SDL과 ffmpeg 를 사용해서 구현된 간단한 재생 프로그램임
  • libavcodec: ffmpeg에서 사용하는 모든 오디오/비디오 코덱이 들어있는 라이브러리이다. 최고의 효율과 코드 재사용성을 목표로 만들어졌음
  • libavformat: ffmpeg에서 사용하는 모든 오디오/비디오 코덱을 파싱하고 생성하는 루틴들이 들어있는 라이브러리

2. 필요한 라이브러리
ffmpegFLV audio codec은 mp3이다. 그래서 오디오 변환을 위해서 LAME 이 필요하고 flv를 플레이하기 위해서는 다양한 Metadata가 필요하다. 그래서 FLVTool2가 필요합니다. FLVTool2는 루비를 설치해야만 합니다. ^^ 그리고 php로 운영하신다면 ffmpeg-php가 필요하겠죠.
마지막으로 플레이를 하기 위해서는 FlowPlayer를 다운받아서 활용하시는게 좋을 겁니다.
그럼 LAME->FFmpeg->Ruby->FLVTool2->FlowPlayer 순으로 설치를 하시면 됩니다.

 - LAME 설치
   . shell>wget http://downloads.sourceforge.net/lame/lame-398.tar.gz?
            modtime=1215212728&big_mirror=0
   . shell>./configure --enable-shared --prefix=/home/k2/server/lame;make;make install
 - FFMpeg 설치
   . shell>svn checkout svn://svn.mplayerhq.hu/ffmpeg/trunk ffmpeg
   . shell>cd ffmpeg
   . shell>./configure --prefix=/home/k2/server/ffmpeg
            --enable-gpl --enable-shared --enable-mp3lam;make;make install
   . 사용 방법 : ffmpeg -i "mimul.avi" -vcodec flv -f flv -r 29.97 -s 320×240
          -aspect 4:3 -b 300kb -g 160 -cmp 2 -subcmp 2 -mbd 2 -flags
          +aic+cbp+mv0+mv4+trell -ac 1 -ar 22050 -ab 56k "mimul_avi.flv"
 - Ruby
   . shell>wget ftp://ftp.ruby-lang.org/pub/ruby/1.8/ruby-1.8.7-p22.tar.bz2
   . shell>./configue --prefix=/home/k2/server/ruby;make;make install
 - FLVTool2
   . shell>wget
   . shell>ruby setup.rb config;ruby setup.rb setup;ruby setup.rb install
   . 사용방법 : RUBYLIB=lib ruby bin/flvtool2 -U <path to>/movie.flv
 - Flowplayer
   . http://flowplayer.org/download.html 사이트에서 파일을 다운 받음
   . 사용방법
<object type="application/x-shockwave-flash" data="[your site]/FlowPlayer.swf"

    width="320" height="263" id="FlowPlayer">

  <param name="allowScriptAccess" value="sameDomain"/>

  <param name="movie" value="[your site]/FlowPlayer.swf"/>

  <param name="quality" value="high"/>

  <param name="scale" value="noScale"/>

  <param name="wmode" value="transparent"/>

  <param name="flashvars" value="baseURL=[base URL]&amp;videoFile=movie.flv

    &amp;autoPlay=false&amp;loop=false&amp;autoBuffering=false

    &amp;splashImageFile=movie.jpg"/>

</object>
[참조 사이트]
  • http://lame.sourceforge.net/
  • http://ffmpeg.mplayerhq.hu/
  • http://www.ruby-lang.org/
  • http://flowplayer.org/

'삽질로그' 카테고리의 다른 글

문서를 온라인으로 공유하는 방법들.  (0) 2009.05.12
가격제안에 사용하는 계정과목표준  (0) 2009.05.10
Toad DBA Suite 사용후기 - Toad Data Modeler[TDM] 리뷰  (0) 2008.11.28
데이터모델링  (0) 2008.11.28
자바스크립트로 UI 구현하기  (0) 2008.10.11

1. jqac
 - jQuery를 활용한 Auto-complete/suggest javascript 라이브러리
 - 다운로드 : http://code.google.com/p/jqac/downloads/list
 - 데모 : http://www.cs.bgu.ac.il/~ygleyzer/files/utils/jqac/jqac_example.html

2. AutoComplete 1.2
 - prototype과 scriptaculous를 활용한 Auto-complete javascript 라이브러리
 - 다운로드 : http://www.beauscott.com/examples/autocomplete/autocomplete.zip
 - 데모 : http://www.beauscott.com/examples/autocomplete/doc/examples.html
 
3. AutoCompleter(mootools)
 - MooTools를 활용한 Auto-complete javascript 라이브러리
 - 다운로드 : http://digitarald.de/project/autocompleter/#download
 - 데모 : http://digitarald.de/project/autocompleter/1-1/showcase/delicious-tags/, http://digitarald.de/project/autocompleter/1-1/showcase/local/

4. AJAX AutoComplete
 - Jim Roos가 자체로 만든 Ajax framework
 - 다운로드 : http://jimroos.com/AutoComplete.zip
 - 데모 : http://www.jimroos.com/2007/05/ajax-autocomplete.html

5. YUI Autocomplete
 - Yahoo! UI Library로 만든 Auto-complete
 - 다운로드 : http://brandspankingnew.net/download.php?file=autosuggest_v2.zip
 - 데모 : http://developer.yahoo.com/yui/examples/autocomplete/index.html

6. AutoSuggest
 - 심플한 Javascript를 활용한 Auto-complete
 - 다운로드 : http://www.brandspankingnew.net/specials/ajax_autosuggest/ajax_autosuggest_autocomplete.html
 - 데모 : http://www.brandspankingnew.net/specials/ajax_autosuggest/ajax_autosuggest_autocomplete.html

7. dhtmlxCombo
 - 콤보형 Auto-complete
 - 다운로드 : http://www.dhtmlx.com/docs/download/dhtmlxCombo.zip
 - 데모 : http://dhtmlx.com/docs/products/dhtmlxCombo/index.shtml

8. AutoComplete (mootools)
 - scriptaculous를 활용한 Auto-complete
 - 다운로드 : http://script.aculo.us/
 - 데모 : http://demo.script.aculo.us/ajax/autocompleter

'오픈소스SW' 카테고리의 다른 글

JSCalendar를 활용한 일자 조회  (0) 2008.12.26
Open Source 기반의 차트 프로그램  (0) 2008.12.26
Web-Based HTML Editor 비교 및 미리보기  (0) 2008.12.02
core file 분석  (0) 2008.04.17
탭 방식으로 html에 옷을 입혀주는 css  (0) 2008.02.02
-zdnet 컬럼 발췌

MS의 이러한 노력은 Sam Ramji가 이끄는 오픈 소스랩의 활동에서 구체적으로 나타났다.
우선 그가 처음 한 인상 적인 한마디가 기억 난다. “많은 사람들이 1995년 인터넷에 대해 실수를 했다고 이야기했지만,
2005년인 현재는 그렇게 생각하는 사람은 없습니다.
지금 MS는 오픈 소스에 대해 실수했다고 하는데 제가 하는 일은 2015년에는 그런 이야기가 나오지 않도록 하는 것입니다.”
이 말은 MS의 노력이 공허한 몸짓이 아니라는 것을 반증해 준다.

Sam은 MS가 오픈 소스에 관심 갖는 이유가 호환성에 대한 이슈가 있다고 하였다.
많은 기업들이 오픈 소스와 윈도우 플랫폼 사이의 호환성 문제에 어려움을 겪고 있고
이를 해결 하기 위해 OSS Lab은 각종 오픈 소스 O/S와 테스트 장비를 활용하여 이런 문제를 처리하기 위해 노력하고 있다고 한다.
그러면서 그는 현재 진행되고 있는 OSS랩의 실제 프로젝트 목록을 보여 주었다.
현재 Virtual Server 2005 R2, Jboss와 함께 JDBC 드라이버 개발, Samba에 대한 Vista 지원,
IIS에서 PHP 지원, Vista에서 Mozilla Firefox 지원, Novell과 상호 호환성 개발 등이 진행되고 있다고 한다.

파이어폭스가 경쟁자라면 왜 코드 개발 및 제공에 시간을 쓰느냐는 질문에
어떤 사용자가 윈도우 XP 보다 윈도 비스타에서 Firefox가 더 잘 구동된다는 이야기를 듣고 싶고 비트 토런트도 그랬으면 좋겠다고 말했다.
즉, 윈도우 플랫폼 위에 어떤 오픈 소스 애플리케이션이든 잘 운용되어 사용자가 이익을 느끼게 하는 것이 중요하다는 의미였다.

특히 IIS7에서 PHP 지원에 대한 질문에서 MS의 생각이 정확히 들어났다.
요즘 70% 정도의 웹 사이트가 PHP로 개발되고 있고 20%만이 윈도우 기반이라고 한다.
(이건 ASP의 감소와 PHP의 증가로 귀결되지만)
결국 윈도우 서버 플랫폼의 입장에서는 PHP를 지원해야 하는 입장일 수밖에 없는 것이다.

IIS7에서 PHP 공식 지원
몇 가지 PHP 애플리케이션을 직접 IIS6에서 돌려 보고 10배나 성능의 문제가 있다는 걸 알았다고 한다.
결국 캐싱이나 FastCGI 연동을 통해 비스타 기반 IIS7에서 닷넷 코드와 비슷한 성능을 내는 데 가능했다고 한다.
MS가 최근에 공개한 IIS7에 대해 주 개발자인 Bill Staples와 Carlos Aguilar가 시연을 통해 보여 주었다.

한국에서는 주로 웹 호스팅 업체들은 윈도우 미디어 서버와 리눅스 서버를 따로 제공하는 경우가 많다.
멀티 미디어 서비스는 윈도우 미디어로 제공하고 웹 서비스의 경우 제로보드나 태터툴즈 같은 무료 PHP 프로그램이 많기 때문에 그렇다.
하지만 사실 두 가지를 모두 제공하는 건 서버 운용, 기술 지원 등에서 실제로 비용이 많이 든다.

IIS7에서 PHP를 아주 멋지게 지원한다면 상용 업체인 경우 사실 윈도우 서버를 사용해 볼만 하다고 생각한다.
이러한 사고의 전환을 이룬 MS가 대단하다.
아니면 어쩔 수 없는 선택이었을지 모르지만. 조만간 WIMP(Windows + IIS7 + MSSQL + PHP)라는 새로운 플랫폼이 나오지 않을까?

'취미 그리고 생각' 카테고리의 다른 글

한국인의 영어이름 짓기  (0) 2009.05.05
자기관리에 대한 글  (0) 2009.02.24
일본 온라인 빠찡꼬 게임들  (0) 2008.11.22
디카로 인물사진 잘 찍는법  (0) 2008.01.23
항상노력해야하는걸 잠깐 잊고 있었다..  (0) 2008.01.13
웹 퍼블리셔라는 말을 만들 때에 내 명함에 찍혀있던 내 업무 역할은 웹디자이너였다. 하는 역할은 HTML 코더의 역할이었지만 솔직한 심정으로 명함에 HTML 코더라는 업무 역할을 넣기는 싫었다. HTML 코더는 단순직 알바, 작업물의 퀄리티보다는 작업량으로 평가받고 필요할 때마다 잠깐씩 빌려서 사용되고 있다는 인식 때문이었다. 다른 사람이 나를 이러한 시각으로 본다는 것이 싫었고 나의 업무상의 위치나 결과물은 HTML 코더의 그것과는 분명이 차이가 있어야 한다고 생각을 했다. 그리고 웹 제작 프로세스에서 반드시 필요한 위치가 되어야 한다고 생각했다. 그래서 HTML 코더와 구별할 수 있는 새로운 말을 찾기 시작했다.


지금은 웹에 어플리케이션의 개념이 많이 들어오고 있지만 웹은 기본적으로 문서다. 그래서 문서나 책을 출판하는 퍼블리시(publish)라는 단어를 생각하게 되었고, 실제로 이 단어는 이미 여러곳에서 사용되고 있었다. 플래시에서 HTML 코드를 만드는 기능도 퍼블리시고 MS 프론트페이지(FrontPage)에서도 퍼블리싱이라는 용어를 썼다. 그리고 어도비(Adobe)에서도 웹페이지를 만드는 작업을 웹 퍼블리싱(Web publishing)이라고 지칭하고 있었다. 이 외에도 많은 툴에서 웹페이지를 실제로 제작하거나 배포하는 단계를 지칭해서 퍼블리시라는 단어를 많이 쓰고 있었다. 웹을 출판하는 사람이라는 의미가 기존의 시각에만 집중한 웹 저작과는 반대되는 의미를 가지고 있다는 느낌도 이 용어를 선택하게 된 이유중의 하나였다. 그래서 한번 해보자는 심정으로, 그리고 웹에이전시라는 용어를 홍익인터넷에서 만든 것과 같이 웹퍼블리셔라는 용어도 나중에 많이 사용될 수도 있다는 모험으로 명함에 웹 퍼블리셔(Web publisher)라는 업무 역할을 박았다”.


당연히 처음에는 이 단어를 사용할 때마다 부연 설명을 붙여야만 했다. 그리고 견적서에도 웹 퍼블리셔 항목이 들어가면 열이면 열, 견적서를 확인하자마자 전화를 걸어서 이 항목이 도대체 뭐냐고 물어왔다. 그럴 때는 나 자신도 일반인이 이해하기 쉽게 설명하는게 힘들었고 다른 사람들도 역시 설명하기를 힘들어 했다. 회사에서도 명함에 넣는 것까지는 이해를 해 줬지만 실제로 이 역할이 무슨 일을 하는지는 HTML 코더의 수준 이상으로 이해를 하지 못했다. 다행히 지금은 사용하는 사람들도 많고 고객사에서도 웹 퍼블리셔라는 용어에 대해서 질문을 해 오는 경우는 거의 없다.


앞에서도 잠깐 얘기 했지만 이 용어를 만들게 된 이유는 퍼블리싱이라는 업무가 기존의 포지션에서 벗어나서 보다 확실한 전문 영역으로 자리 잡기를 바랬기 때문이다. 과거에는 별로 주목받지 못했던 사용자측 개발이 매우 중요한 영역이고 제품의 품질과 직결된다는 믿음 때문이었다. 용어는 만들어졌지만 사람들이 이 용어를 사용하지 않았으면 지금같이 자리잡지 못했을 것이다. 지금은 커뮤니티도 생겼고 많은 분들이 웹 퍼블리셔를 자청해서 보다 나은 웹을 만들기 위해서 노력중이다. 요즘은 클라이언트 사이드 개발 뿐만 아니라 웹표준, 웹접근성 전문가를 지칭하는 말로도 사용되고 있다.


웹 퍼블리셔라는 말은 아직 완성된 말은 아니다. 그리고 그 말을 완성시킬 수 있는 사람은 자신을 웹 퍼블리셔라고 말하면서 자신의 위치를 확고하게 만들어 가는 사람들일 것이다. 김춘수의 꽃에서와 같이 이름을 정하고 불러준다는 것은 매우 중요한 일이다. 물론 모든 웹 퍼블리셔들의 능력이 똑같을 수는 없지만 자신을 웹 퍼블리셔라고 자신있게 말하는 순간 그 사람은 웹 퍼블리셔가 되는 것이고 같은 목적을 향해서 노력할 준비를 갖추는 것이다.


보다 많은 웹 퍼블리셔들이 나와서 자신의 위치를 확고하게 하고 웹 시장에서 전문가로 자리매김을 하고, 보다 나은 웹, 보다나은 IT 생태계를 만들어 갈 수 있었으면 좋겠다. 자기 자신을 자신있게 외치면 결국 그렇게 만들어 질 수 있다고 믿는다. 사람의 힘은 무한하니까….


출처 : Standard Magazine


'개발도 하냐?' 카테고리의 다른 글

빅 사이트들의 웹 아키텍처 구성  (0) 2008.12.26
톰켓을 사용하는데 필요한 20가지 Tips  (0) 2008.12.26
DTD에 따른 브라우저 박스크기변화  (0) 2008.12.20
제프리 젤드만의 웹표준 가이드  (0) 2008.12.20
OpenID php 구현  (0) 2008.12.19

먼저 이글은 http://zine.standardmag.org/200802/20 와 같은 내용임을 알려 드리며 다시한번 테스트 해본 결과입니다.

크로스브라우징으로 인해 시간낭비 및 생각하지 않던 것들때문에 야근을 하는 경우가 종종 발생하죠. 참 안타까운 현실입니다.
알려진 크로스브라우징 팁 가운데 DTD의 선택도 중요한 부분을 차지 하고 있다는건 여러 글들을 통해 접했으리라 생각합니다.
그래서 DTD에 따른 박스크기 변화를 다시한번 테스트해 보았습니다.

테스트 박스는 공통적으로 width = 150px / height = 100px / padding = 30px / border = 3px 값을 주었을때 입니다.

먼저 DTD를 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 로 했을 경우에 결과입니다.
소스는 다음과 같습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { margin:30px; }
#wrap { width:150px; height:100px; padding:30px; border:3px solid #ccc; font-size:12px; }
</style>
</head>

<body>
<div id="wrap">테스트 크로스 브라우징</div>
</body>
</html>


dtd_html.gif

보 시는 바와 같이 파이어폭스를 제외한 IE6 / 7 은 지정한 가로/세로 값으로 보여지며 border 과 padding 값을 포함하고 있는 반면 파이어폭스는 지정한 가로/세로 값에서 border 값과 padding 값이 추가된 사이즈로 박스가 보여집니다. 


다음은 DTD 가 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 로 했을 경우 입니다.

소스는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { margin:30px; }
#wrap { width:150px; height:100px; padding:30px; border:3px solid #ccc; font-size:12px; }
</style>
</head>

<body>
<div id="wrap">테스트 크로스 브라우징</div>
</body>
</html>

dtd_xhtml.gif

이처럼 DTD에 따라 각 브라우저 별로 다르게 보임을 알수 있습니다.

오페라와 사파리(3.1) 역시 파폭과 동일하게 DTD와 관계없이  padding 값과  border 값만큼 지정한 박스보다  커짐을 알수 있었습니다.

dtd_xhtml_opera.gif 

dtd_xhtml_safari.gif

역시 IE만 혼자 노는걸 알수 있군요.. 참고 되셨으면 좋겠네요..^^

'개발도 하냐?' 카테고리의 다른 글

톰켓을 사용하는데 필요한 20가지 Tips  (0) 2008.12.26
웹 퍼블리셔란?  (0) 2008.12.20
제프리 젤드만의 웹표준 가이드  (0) 2008.12.20
OpenID php 구현  (0) 2008.12.19
중앙부처 사이트 웹 표준 안 지킨다  (0) 2008.12.12
9609002472.jpg
제프리 젤드만의 웹표준 가이드
웹 디자이너와 개발자, 그리고 사용자를 위한 올바른 선택(2ed)

제프리 젤드만 (Jeffrey Zeldman) 은 누구인가?
제프리 젤드만은 최초의 웹디자이너 중 한 명이고 전문가들 사이에서 강력한 영향력을 지녔습니다.

1995년 전 아트 디렉터이자 카피라이터인 그는 최초로 가장 영향력 있는 개인 웹 사이트 중의 하나 (www.zeldman.com)을 만들었고웹 디자인의 방법과 원칙에 대한 유명한 튜토리얼을 쓰기 시작했습니다.

1998년 마이크로소프트와 넷스케이프에서 각각 자기들의 브라우저에서 같은 기술을 지원하도록 설득한 기초 연합인 The Web Standards Project(www.webstandards.org)를 공동 설립했습니다. 같은 해 A List Apart(www.alistanart.com) 'for people who make websites' (웹 사이트를 만드는 사람들을 위하여)를 만들기 시작했습니다. 그리고 이 분야해서 가장 존중 받고 영향력 있는 잡지가 되었다고 합니다. (책 저자 소개 일부...)


웹표준과 저작 프로그램
제프리 젤드만의 웹표준 가이드에서는 이렇게 쓰여져 있습니다.

브 라우저 전쟁의 절정이었던 시점에서 개발된 어도비(이전의 매크로미디어)사의 드림위버너 Golive처럼 시장을 장악한 전문가용 비주얼 에디터들은 3.0과 4.0 브라우저에 최적화된 마크업과 코드를 생성하여 브라우저의 비호환 문제를 처리했습니다.

브 라우저가 비표준이고 유효하지 않은 HT<L 태그로 실행될 때 드림위버와 GoLive는 브라우저가 원하는 대로 태그를 만들어 주었습니다. 각 브라우저가 자신들만의 호환성 없는 DOM이 있거나 독자적인 스크립트 언어로 작동된다면, 드림위버나 GoLive는 그것에 따라서 코드를 만들었습니다.

이런 방식을 사용한 드림위버와 GoLive가 마크업과 코드를 직접 사용하는 개발자들보다 더 잘못했다는 것은 아닙니다. 2장에서 설명한 바와 같이 표준이 개발되는 중이었고, 브라우저들이 지원을 제대로 하지 않을 때라서 사이트 제작자도 어쩔 수 없었습니다. '원하는 대로 주라'는 말은 그때는 말이 됐지만 이제는 적절한 전략이 아닙니다. 브라우저가 표준을 지원하자 드림위버나 GoLive 같은 프로그램들도 같이 변하게 되었습니다. 이제는 프로그램들도 표준을 지원합니다.

전문 비주얼 웹편집의 선두 주자인 드림위버로 만든 사이트의 표준화 지원과 접근성을 향상시키는 노력의 일환으로 매크로 미디어의 기술자들과 같이 일하기 위해 2001년 WaSP의 Dreamweaver Task Force 가 생겨났습니다.
이 그룹의 주요목표는 아래와 같습니다.

* 드림위버는 '격이 다른'유효한 마크업을 만들어야 한다(유효한 마크업은 반드시 표준 태그와 요소만 사용해야 하고 에러가 없어야 한다.)
* 드림위버는 유효한 DTD를 추가하여 XHTML과 HTML 버전을 선택할 수 있게 해줘야 한다 (DTD-Document Type Definition은 브라우저에게 어떤 종류의 마크업으로 웹 페이지를 만들었는가를 알려준다.)
* 드림위버는 문서의 DTD를 엄격히 따르고, 이에 따라서 마크업과 코드를 만들어야 한다.
* 드림위버는 모두에게 접근성 있는 웹 문서를 사용자가 쉽게 만들 수 있게 해야한다.
* 드림위버는 CSS2를 정확하게 표현하여 CSS로 만들어진 페이지가 드림위버의 비주얼 환경에서 작동이 되어야 한다.
* 드림위버는 사용자의 허락 없이 inline 스타일을 추가하여 유효한 CSS 레이아웃을 방해아지 않아야 한다.
* 사용자가 드림위버로 만든 페이지가 유효하고 높은 수준의 접근성을 이룰 수 있다는 믿음을 가질 수 있어야 한다.

이 목표들에 더해서 추가적인 목표들이 2002년 5월 드림위버 MX가 출시되면서 생겨나게 되었습니다.
드림위버 MX를 만드는 데 도움을 주었던 Dreamweaver Task Force는 제품을 평가 하면서 아래 사실들을 발견하게 되었습니다.

* 훌류한 유효한 마크업을 생산해 냈다.
* 사용자가 접근성 있는 사이트를 만들 수 있게 도와주었다.
* (CSS배치에 다소 문제점이 있긴 하지만) 적합한 수준의 정확도로 CSS2를 표현했다.
* CSS 레이아웃을 해치지 않았다.
* 유효한 XHTML 과 CSS(자동으로 표준지원 검사를 하여)사용을 권장했다.
* 웹표준을 중요하게 생각하고 장려했다.

개인 적으로도 드림위버를 웹표준 저작 툴로 추천하는 바입니다.
참고로 외국에서 실시된 설문조사에서 가장 많이 사용하는 웹저작 툴로도 드림위버를 꼽고 있습니다.
http://webdesign.about.com/gi/pages/poll.htm?linkback=http://webdesign.about.com/b/a/253457.htm&poll_id=2822610066

물론 우리나라에서는 에디터플러스도 많이 사용되긴 하지만, 위에 설문조사에서 보듯이 웹퍼블리셔들이 선호하는 저작 프로그램임은 사실인거 같습니다.

'개발도 하냐?' 카테고리의 다른 글

웹 퍼블리셔란?  (0) 2008.12.20
DTD에 따른 브라우저 박스크기변화  (0) 2008.12.20
OpenID php 구현  (0) 2008.12.19
중앙부처 사이트 웹 표준 안 지킨다  (0) 2008.12.12
ERP, ISP, ITA ?  (0) 2008.11.29
OpenID 그까이꺼 (1)

February 21, 2007 at 8:44 pm · Filed under WebDevelopment, WebStandard

약속했던 대로, OpenID 구현에 대한 이야기입니다.
이번은 JanRain의 라이브러리를 이용한 초간단 OpenID Provider 제작편입니다.
JanRain의 라이브러리는 원래 Python으로 구현되었습니다만, 현재는 여러 언어로 포팅되어있지요. Ruby, Perl, PHP, DotNet, Java, ColdFusion 등이 가능합니다.
여기에서는 PHP Library를 이용하겠습니다.
주의 : php 4.3 이상. Bcmath, GMP 패키지 등이 설치되어 있어야 합니다.
MySQL의 경우에는 innoDB를 사용합니다.

1) 설치
Pear Installer가 지원된다면
pear install http://www.openidenabled.com/resources/downloads/php-openid/pear/Auth_OpenID-1.2.1.tgz

로 설치하면 간단 끝.
만약 경로를 따로 제어하고 싶다거나, 혹은 Pear를 쓸 수 없는 환경이라면, 그냥 다운로드 받아서 적당한 곳에 풀어주면 됩니다.

2) 구조
압축을 풀면 여러가지 디렉토리가 있는데, 실제적으로 중요한 곳은 /Auth입니다. 이 안에, OpenID 컨슈머와 프로바이더 모두를 위한 클래스들이 들어있습니다.
실제로 PHP4로 제작되어 있기 때문에 클래스 내부 코드들이 완벽한 OO 스타일을 유지하고 있다고 말하기는 어렵습니다. 코드들은 거의 미로수준. 게다가, 은근히 도큐먼트가 부실해서…

3) 구현
OpenID는 프로바이더와 컨슈머 사이에서 키를 발급하고 조회하는 메커니즘으로 운영됩니다. 발급된 키를 관리하는 방법은 여러가지가 있는데, 예를 들어, 메모리 세션을 이용하거나, 파일 세션, 혹은 DB 세션등을 이용하기도 하지요. 여기에서는 MySQL을 Store로 사용하겠습니다.

우선, 필요한 파일들을 include해야겠지요?
[php]
require_once(’Auth/OpenID.php’);
require_once(’Auth/OpenID/Server.php’);
require_once(’Auth/OpenID/MySQLStore.php’);
[/php]
내부적으로 다른 인클루드 파일들을 요구하기 때문에, include_path에 아까 설치한 Library위치를 포함시켜두면 좋겠습니다. (아니면 ini_set(’include_path’,) 를 설정하던가요.)

그리고 PEAR::DB를 이용한 DB커넥션을 Store로 사용할 것이므로 DB인스턴스를 만들어서 선언해줍니다.

[php]
$dsn = “mysqli://openid:password@localhost/openid”;
$connection = DB::connect($dsn);
[/php]

그리고는 MySQL을 이용하는 Store 객체를 반환받아야겠지요.

[php]
$store = new Auth_OpenID_MySQLStore($connection, ’setting’, ‘association’, ‘nonce’);
// $store->createTables();
[/php]

도큐먼트에 보면, 2번째 파라미터부터는 optional하다고 되어 있고, null값일 경우 default 정의된 테이블 이름으로 생성된다고는 되어있습니다만, 무엇의 문제인지 null값을 넣으면 제대로 생성되지 않더군요. 그리고 createTables()메쏘드를 실행해줍니다. 위에서는 주석처리해놓았는데, 사실 한번 테이블이 생성되면 저 메쏘드는 필요없어지기 때문입니다. 물론 여러번 실행시켜도 문제가 되지는 않습니다. (내부적으로 rollback)

이제, 해당 Store를 사용하는 OpenID Server 객체를 만들어야겠지요. 만약 다른 DB Store나 혹은 File Store를 쓰고 싶다면 해당 Store 클래스로부터 만들어진 객체를 $store로 넣어주면 됩니다.
[php]
$server =& new Auth_OpenID_Server($store);
[/php]

이제, 이 만들어진 Server 객체에 OpenID Request를 넘겨주면 되는데, 이 Request는 대개 Get메쏘드로 넘어온 값을 가지고 Request객체를 만들어 주면 됩니다.

[php]
//$value는 대개 Get으로 넘겨받은 OpenID request문자열입니다. 서버 구현에 따라 이 부분은 달라질 수도 있으니 알아서…
$request = Auth_OpenID::fixArgs($value);
$request = $server->decodeRequest($request);
[/php]

이 Request 객체의 멤버중에 mode라는 멤버가 있습니다. 이에 따라 해당 작업을 해주면 됩니다.

[php]
switch($request->mode) {
case ‘checkid_immediate’:
…
break;
case ‘checkid_setup’:
…
break;
default:
…
break;
}
[/php]

특별한 문제가 없는 한, association mode는 라이브러리에서 알아서 처리해줍니다. 물론 발급되는 키값을 바꾸거나 하고 싶다면 이 부분을 고쳐줘야겠지요. 어쨌거나, 특별히 고칠 부분이 없다면, 위의 default부분에, 아래의 코드를 넣는 것만으로 충분합니다. 이것은 user정보와는 상관없는 기본적인 handshake 단계의 통신이기 때문에 사실 건드릴 것도 별로 없는 셈이죠.
[php]
$response =& $server->handleRequest($request);
$webresponse =& $server->encodeResponse($response);
foreach ($webresponse->headers as $k => $v) {
header(”$k: $v”);
}
header(header_connection_close);
print $webresponse->body;
exit(0);
[/php]

checkid_setup과 checkid_immediate의 경우에는 프로바이더의 사용자 시나리오에 따라 복잡한 과정들이 처리되어야 하는데, 예를 들자면, 사용자가 인증을 허용하는지 여부등에 따라 반환되어야 하는 값이 달라져야겠지요.

만약 모든 조건이 클리어하다면, (예를 들어, Consumer사이트가 trustRoot에 포함되어 있고, 사용자가 해당 Consumer사이트로의 인증을 허락했다면…)
[php]
$response =& $request->answer(true);
$webresponse =& $server->encodeResponse($response);
foreach ($webresponse->headers as $k => $v) {
header(”$k: $v”);
}
header(header_connection_close);
print $webresponse->body;
exit(0);
[/php]
로 끝.

만약 Simple Registration Extended를 지원한다면, openid.sreg.required / openid.sreg.optional 의 형태(php에서는 openid_sreg_required / openid_sreg_optional 이라는 해쉬값으로..)로, 필요한 사용자의 데이터를 요구하게 됩니다. 이 경우에는,
[php]
$response->addField(’sreg’, 요구필드이름, 해당 데이터);
[/php]
형태로 추가해주면 되지요.(물론 $server->encodeResponse()전에..)

Provider의 사용자 시나리오에 따라서는, 로그인처리, 인증여부처리, 요구필드에 대한 허가 처리 등이 필요한 경우도 있을 수 있습니다. 그런 경우에는 Ajax나 혹은 일반 Form 형태로 사용자 브라우저에서 처리를 받은 후에, 현재 호출된 URL로 다시 redirect해주면 됩니다. (OpenID Request는 Get값으로 이루어지므로… 물론 처리페이지까지 OpenID Request들을 전달해서 그 페이지에서 처리하는 방법도 있겠지요.)

만약 올바른 요구와 답변이 아닐 경우에는,
[php]
$response =& $request->answer(false);
$webresponse =& $server->encodeResponse($response);
foreach ($webresponse->headers as $k => $v) {
header(”$k: $v”);
}
header(header_connection_close);
print $webresponse->body;
exit(0);
[/php]
로 해주면 됩니다.

나머지는 라이브러리에서 다 알아서 해주니까, Provider 개발자가 고민할 부분은, 사용자 시나리오를 어떻게 운영할 것인가.. 하는 부분이겠죠?

이상으로 OpenID 그까이꺼 만드는 법 Provider편 초간단 설명.

물론, 남의 라이브러리를 의지하지 않고, 프로토콜만 가지고 직접 구현할 수도 있겠습니다만, 뭐 굳이 그럴 필요 있나요?

Consumer편은 더 간단합니다만, 다음 기회에. 사실 Provider는 굳이 여러 곳에서 만들 필요는 없어요. 공연히 사용자에게 불편만 줄 뿐. 실상 Cyworld나 Naver Blog같은데서 지원하면 깨끗이 정리될 문제입니다만, 그럴 생각들은 없는 것 같고… (OpenID Provider라면 당연히 자사의 서비스에 Consumer도 붙여야 체면이 서겠습니다만… 과연 N이나 S가 그럴 것인지? ^_^)

----------------------

OpenID 그까이꺼(2)

February 23, 2007 at 4:03 am · Filed under WebDevelopment, WebStandard

이번에는 Consumer 구현입니다.
지난번에 이야기한 건 Provider편이었죠? 많은 부분 Provider와 겹치므로 슬쩍 새 창으로 띄워서 컨닝해가면서 따라오세요.
역시 마찬가지로 PHP 4.3.0 이상, bcmath나 gmp가 설치되어 있다고 가정하고, MySQL은 InnoDB를 사용합니다.
또한, 이미 OpenID Library가 설치되어있고 경로에 추가되어있다고 가정합니다.

Consumer편은 더 쉽습니다. 설명할 게 없을 정도.

일단, 세션스토어로 MySQL을 사용할 예정이니 Provider편과 마찬가지로 MySQLStore 객체를 만듭시다.

[php]
$connection = DB::connect($dsn);
$store = new Auth_OpenID_MySQLStore($connection, ’setting’, ‘association’, ‘nonce’);
//$store->createTables();
[/php]

물론, 최초 실행시에는 createTables()를 해줘야합니다.

만약 MySQL대신 다른 Store를 이용하고 싶다면 다른 Store 클래스로 객체를 만드시면 됩니다. Factory 패턴이기 때문에 따로 신경안써줘도 되는건 OO 공부하신 분들이면 다 아실테지요.
[php]
$store = new Auth_OpenID_FileStore($store_path);
[/php]
예를 들어 파일패스를 스토어로 쓰고 싶다면 이렇게 해주면 된다는 말씀.

이제 만들어진 스토어 객체로 Consumer 객체를 만듭시다.
[php]
$consumer = new Auth_OpenID_Consumer($store);
[/php]

일반적인 시나리오에서는, 사용자는 Consumer 사이트에 와서 자신의 OpenID를 Form으로 입력하겠죠. 어쨌거나 인증하고자 하는 OpenID값을 Consumer 객체에 던져주기만 하면 됩니다.

[php]
$openid = $_POST[’login_openid’]; // 뭐, 예를 들자면.. 이런 식이겠죠:)
$auth_request = $consumer->begin($openid); //오픈아이디 서버와 association을 시도하고 그 결과를 돌려줍니다.
if($auth_request) {
//success;
} else {
//fail;
echo “Authentication Fail”;
}
[/php]
$auth_request가 true이면 정상적으로 association이 이루어졌다는 뜻입니다. 만약 false라면 인증에 실패했다는 메시지를 사용자에게 보여주면 되겠죠?

association이 성공적으로 이루어졌다면 이제, 해당 openid에 대한 인증을 시도하면 됩니다.

[php]
$trust_root = ‘http://consumer.com’;
$process_url = ‘http://consumer.com/afterAuth’;
$redirect_url = $auth_request->redirectURL($trust_root, $process_url);
header(”Location: “.$redirect_url);
[/php]
$trust_root는 Provider에게 이 인증시도가 어떤 Consumer로부터 시도된 것인지 신뢰여부를 판단하게 해주는 일종의 키값이 됩니다. 완벽하진 않지만, trustroot와 인증시도 도메인간에 도메인이 다를 경우 피싱시도로 파악해서 인증을 거부하거나 할 수 있도록 하지요. 반대로, trustroot로 인정된 도메인의 경우에는 따로 지정하지 않는 한, 인증을 자동보장한다거나 하는데 쓰일 수 있겠지요.

$process_url은 OpenID Provider가 인증을 처리하고 난 후 그 결과값을 되돌려받을 Consumer 사이트의 url입니다.

위의 코드가 실행되면, $redirect_url이 되돌려집니다. $redirect_url은 Provider의 인증처리 페이지에 인증 Request를 Get 메쏘드로 전달하는 형태이지요. 즉, 이렇게 만들어진 $redirect_url로 redirect시켜주기만 하면 됩니다.

만약 단순한 인증으로 끝나지 않고, Simple Registration Extension를 이용해 사용자 정보를 얻어오길 원한다면
[php]
$auth_request->addExtensionArg(’sreg’, 요구필드타입, 요구필드이름리스트);
[/php]
를 redirecURL메쏘드 실행전에 실행시켜주면 됩니다.
요구필드타입은 required/optional이구요, 비록 required라고 해도 Provider에서 반드시 정보를 제공한다는 보장은 없으니(Simple Registration Extension를 지원하지 않거나, 사용자가 정보제공을 거부하거나…), required로 요구한 필드의 되돌아오는 값이 없다해도 에러는 아니라는 점.
그외에, policy_url을 이용해, 어떤 필드들을 왜 요구하는지 설명을 알려줄 수도 있지요.
요구필드로 현재 Simple Registration Extension 에 정의된 필드는,
nickname, email, fullname, dob, gender, postcode, country, language, timezone

의 8 가지인데요, 주의할 점은 각각의 필드의 리턴값은 RFC와 ISO에 정의된 표준 스펙이라는 겁니다. 그러니까, country를 알려달라고 요구해도, “Korea”라든가 “대한민국”같은 형식으로 돌아오지는 않는다는 거지요.
각각의 필드에 대한 스펙 및 Simple Registration Extension에 관한 더 자세한 설명은,
여기를 참고하세요.

에.. 하여튼간에, 실제로 Simple Registration Extension을 이용하려면,
[php]
$auth_request->addExtensionArg(’sreg’, ‘policy_url’, ‘http://consumer.com/policy’);
$auth_request->addExtensionArg(’sreg’, ‘required’, ‘email’);
$auth_request->addExtensionArg(’sreg’, ‘optional’, ‘nickname’);
$auth_request->addExtensionArg(’sreg’, ‘optional’, ‘gender’);
$redirect_url = $auth_request->redirectURL($trust_root, $process_url);
header(”Location: “.$redirect_url);
[/php]
처럼 하면 된다는 말씀.

이제 인증 요청이 끝났습니다. redirect를 통해 Provider에게 GET 메쏘드로 인증요청을 했으니 나머지는 Provider와 사용자간에 나름의 과정을 통해 인증여부가 회신되겠지요?

전에 지정해둔 $process_url로 회신이 돌아옵니다.

다음은 $process_url에서 GET으로 돌아온 회신에 대한 처리부분입니다.

[php]
$response = $consumer->complete($_GET);
switch($response->status) {
case Auth_OpenID_CANCEL :
// 사용자가 인증을 취소했을 때의 처리
break;
case Auth_OpenID_FAILURE :
// 무언가의 문제로 인해 인증이 실패했을 때의 처리(인증을 요구한 openid가 없다든가..)
break;
case Auth_OpenID_SUCCESS :
// 인증성공!!
break;
}
[/php]

인증은 모두 끝났습니다. 간단하죠? :)
만약 Simple Registration Extension을 사용했을 경우, 요구했던 필드값들을 구해야겠죠?

[php]
$sreg = $response->extensionResponse(’sreg’);
echo $sreg[’email’];
[/php]

이걸로 진짜 끝.

간단하죠?

그러니까 OpenID 지원하는게 뭐 대단한 것도 아닌거에요. 무슨 코어모듈을 고쳐야 한다거나 하는 작업이 있을리도 없으니까, Consumer 지원하는 건 어려운 일이 아니에요. 물론 Provider가 되려면 좀 더 복잡한 작업이 필요하긴 합니다만, Provider는 많을 필요도 없고요.
OpenID의 의의를 이해하신다면, 별 특징이나 기능도 없는 Provider가 늘어나는 건 그저 사용자들에게 불편만 주고 OpenID의 장점을 전혀 못살리는 멍청한 짓이기도 하지요.
delegation을 이용하면 어떤 Provider를 쓰든 상관없는 거니까요. (오히려 Simple Registration Extension을 지원안하는 Provider라면 편의성이 떨어지는 셈이니 이용에 고민을 해봐야겠지요. 물론 보안문제가 아직 완벽하게 해결된 것은 아니므로 SRE를 믿느냐는 좀 다른 이야기긴 합니다만.)

국내에서 OpenID를 이야기하는 사람들이 많아지긴 했습니다만… 뭐랄까, 실제 개발자들에게는 그런 뜬구름잡는 이야기보다는 간단한 샘플소스에 대한 설명 하나가 더 필요한 시점아닐까 하는 생각이 드네요. 정말로 OpenID를 널리 퍼뜨리게 하고 싶다면요. 혹은, 그냥 기술적 우위를 뽐내는 걸로 만족하는 거라면 또 다른 이야기겠지만요.


'개발도 하냐?' 카테고리의 다른 글

DTD에 따른 브라우저 박스크기변화  (0) 2008.12.20
제프리 젤드만의 웹표준 가이드  (0) 2008.12.20
중앙부처 사이트 웹 표준 안 지킨다  (0) 2008.12.12
ERP, ISP, ITA ?  (0) 2008.11.29
iabf 에서 사용하는 기본 css  (0) 2008.11.23

중앙부처 사이트 웹 표준 안 지킨다

디지털타임스 | 기사입력 2008.08.28 08:03


본지조사, 파이어폭스ㆍ오페라 사용때 30% 이상 중대오류

정부가 웹 표준 준수 방침을 밝히고 있지만 중앙부처 사이트부터 웹 표준을 지키지 않고 있는 것으로 확인됐다. 이에 따라 웹 표준 수준을 높인`인터넷익스플로러(IE) 8'이 출시되면 혼란이 우려된다는 지적이 일고 있다.

본지가 최근 43개 중앙정부사이트를 대상으로 파이어폭스와 오페라 브라우저의 사용 가능여부를 조사한 결과 30% 이상(파이어폭스 34%, 오페라 30%)의 사이트가 메인 화면 깨짐이나 메뉴가 작동이 안 되는 등의 문제가 발생했다.

청 와대와 대통령 직속기관, 정부 15개 부처와 18개 청을 대상으로 메인화면의 내용과 메뉴의 작동여부, 표본조사를 통한 페이지 이상을 확인한 결과 파이어폭스 사용시 15개 사이트가 중대한 이상을 보였으며 오페라는 13개 사이트에서 이상이 발견됐다. 약간의 글자 깨짐 등 사소한 이상현상을 합할 경우 웹 표준과 브라우저 호환성이 떨어지는 사이트는 50%에 달했다.

감사원 사이트의 경우 메인 화면의 상당수 메뉴가 작동하지 않아 사이트를 거의 사용할 수 없었으며 국토해양부, 국가보훈처 사이트 등도 메인 화면에 이상이 나타나고 일부메뉴를 사용할 수 없었다. 관세청, 방위사업청, 병무청 등도 IE가 아닌 다른 브라우저로는 주요 서비스를 이용할 수 없었다.

특히 웹 표준 준수지침을 마련한 주무부처인 행정안전부의 경우 고객센터 페이지에 이상이 있는 것으로 나타나 체면을 구겼다.

이같은 오류현상은 웹 표준을 준수하지 않고 마이크로소프트(MS)의 인터넷익스플로러에만 적합하도록 사이트를 제작했기 때문이라는 게 업계의 지적이다.

최 근 정부가 웹 표준에 관한 지침을 공지하고 준수 대책을 발표했지만 모두 권고 수준이어서 각 부처 웹사이트 담당자들의 변화를 이끌어내지 못하고 있다는 분석이다. 관계자들은 해당 부처 책임자들이 웹 표준에 대한 인식이 부족하고 사이트개발 후 웹 표준에 대한 테스트도 이뤄지지 않고 있다고 지적했다.

한 전문가는 "인터넷 익스플로러의 세계시장 점유율이 70%대인 것을 감안할 때 20%를 넘는 브라우저를 지원하지 못하는 것은 장기적으로 해외인터넷 사용자들의 사이트 이용을 제한, 우리 인터넷 환경을 고립시키는 것"이라고 말했다. 또 다른 전문가는 "MS는 하반기 출시할 익스플로러 8.0 버전에서 웹 표준 수준을 높인다는 계획인데 국내 사이트들이 이를 따라가지 못한다면 큰 혼란이 올 수 있다"고 우려했다.

강진규기자 kjk@

'개발도 하냐?' 카테고리의 다른 글

제프리 젤드만의 웹표준 가이드  (0) 2008.12.20
OpenID php 구현  (0) 2008.12.19
ERP, ISP, ITA ?  (0) 2008.11.29
iabf 에서 사용하는 기본 css  (0) 2008.11.23
산출물관리지침(한국전산원)  (0) 2008.10.11

+ Recent posts

티스토리툴바