웹표준및 ui개발가이드

http://naradesign.net/wiki/%EB%8C%80%EB%AC%B8 에서 스크립트해왔습니다.

UI 개발자를 위한 북마크

NARADESIGN

목차 [숨기기] 1 뉴스 2 드림위버 3 모바일 4 블로그 4.1 웹 표준 4.2 웹 접근성 4.3 IT Trends 4.4 User Experience 5 블로그 허브 6 사용자 맞춤형 웹 서비스 7 사전 8 웹 디자인 9 웹 브라우저 9.1 웹 브라우저들 9.2 웹 브라우저 시뮬레이터 9.3 웹 브라우저 테스트 9.4 웹 브라우저 호환성 문제 9.5 웹 브라우저 확장 10 웹 사용성 11 웹 성능 분석 12 웹 어플리케이션 13 웹 이미지 검색 13.1 사진 13.2 아이콘 14 웹 접근성 15 웹 표준 16 통계 17 CSS 17.1 CSS Framework 17.2 CSS Reference 17.3 CSS Standards 18 Flash 19 Fonts 20 HTML/XHTML 21 Javascript 22 User Interface 개발

뉴스

• 디지털타임즈 - http://www.dt.co.kr/
• 아이뉴스24 - http://www.inews24.com/
• 전자신문 - http://www.etnews.co.kr/
• ZDNet - http://zdnet.co.kr/

드림위버

• 드림위버를 이용한 웹 표준 코딩 가이드 - http://naradesign.net/open_content/lecture/DW&CSS/
• 드림위버 CS3 사용자 메뉴얼 - http://livedocs.adobe.com/ko_KR/Dreamweaver/9.0/
• 드림위버 8 한글 도움말 - http://livedocs.adobe.com/dreamweaver/8_kr/using/wwhelp/wwhimpl/js/html/wwhelp.htm
• 딸치와 함께하는 드림위버 - http://ddalchi.co.kr/

모바일

• 모바일 웹 모범사례 - http://www.w3c.or.kr/Translation/mwbp_flip_cards/ W3C에서 권고하는 모바일 웹 저작지침
• 모바일 컨텐츠 이야기 - http://www.mobizen.pe.kr/
• 별주부뎐 - http://hollobit.tistory.com/
• iPhone Accessibility - http://www.apple.com/accessibility/iphone/index.html
• 까칠한 Mobile 2.0 - http://mobile2.tistory.com/
• 모바일OK - http://mobileok.kr/
• Mobile Web 2.0 Forum - http://www.mw2.or.kr/
• K모바일 - http://www.kmobile.co.kr/

블로그

웹 표준

• 김군우 - http://www.miya.pe.kr/
• 김대석 - http://nmindplus.com/
• 김요한 - http://hiphapis.net/
• 나인환 - http://na93008.openhaja.com/blog/
• 장성민 - http://www.jangkunblog.com/
• 조현진 - http://resistan.com/
• 신승식 - http://gregshin.pe.kr/
• 신현석 - http://hyeonseok.com/
• 연홍석 - http://blog.wystan.net/
• 윤좌진 - http://boochim.net/
• 일몰 - http://ilmol.com/
• 장지윤 - http://www.simplething.net/
• 정찬명 - http://naradesign.net/
• 조훈 - http://hooney.net/
• 추지호 - http://www.pageoff.net/
• 홍윤표 - http://mydeute.com/
• 김일규 - http://www.hiweb.kr/

웹 접근성

• 백남중 - http://njpaiks.egloos.com/
• 현준호 - http://jhyun.wordpress.com/

IT Trends

• 윤석찬 - http://channy.creation.net/
• 애자일 이야기 - http://agile.egloos.com/
• Talk about Software with hani - http://www.talk-with-hani.com/

User Experience

• dobiho - http://dobiho.com/
• Experience Design - http://exign.net/
• UX Factory - http://www.uxfactory.com/
• UXlog - http://uxlog.net/
• √ MIRiyA's AstraLog - http://blog.daum.net/miriya/

블로그 허브

• 나루 - http://www.naaroo.com/ 블로그 전문 검색.
• 올블로그 - http://allblog.net/ 메타 블로그.
• Daum DNA > Lens - http://dna.daum.net/lens/ 다음 DNA Lab 에서 추천하는 IT 관련 포스트.
• Standard Magazine RSS Feed - http://planet.standardmag.org/ UI/UX 관련 포스팅을 수집.

사용자 맞춤형 웹 서비스

• 위자드닷컴 - http://wzd.com/ 사용자 맞춤형 인터넷 시작페이지.
• Netvibes - http://www.netvibes.com/ 사용자 맞춤형 인터넷 시작페이지.
• Remember The Milk - http://www.rememberthemilk.com/ 할일 목록 관리 서비스.
• Webwag - http://www.webwag.com/ 사용자 맞춤형 인터넷 시작페이지.

사전

• 영문 표기사전 - http://englishname.seoul.go.kr/ 한글의 영문 표기안내.
• 우리말 다듬기 - http://www.malteo.net/ 들여온 말을 순 우리말로 정화시키는 곳.
• 위키백과(글로벌) - http://wikipedia.org/
• 위키백과(한국) - http://ko.wikipedia.org/wiki/
• MS 언어포털 - http://www.microsoft.com/language/ko/kr/default.mspx MS에서 사용된 용어의 한글화

웹 디자인

• 디비컷 - http://dbcut.com/ 최근 런칭된 국내 웹사이트 정보.
• 디자인 정글 - http://jungle.co.kr/
• 웹 어워드 코리아 - http://www.webaward.co.kr/ 매년 최고의 웹 사이트를 선정하는 컨퍼런스.
• 한국색채연구소 - http://www.kcri.or.kr/
• Adobe - http://www.adobe.com/kr/
• 5DAY - http://5day.co.kr/ 최근 런칭된 국내 웹사이트 정보.

웹 브라우저

웹 브라우저들

• 인프라웨어 - http://www.infraware.co.kr/ 한국의 모바일 웹 브라우저 제작사.
• Apple Safari - http://www.apple.com/kr/safari/download/
• Google Chrome - http://www.google.com/chrome
• Mozilla Firefox - http://www.mozilla.or.kr/ko/firefox/
• Microsoft Internet Explorer - http://www.microsoft.com/windows/products/winfamily/ie/default.mspx
• Opera Software Opera - http://www.opera.com/

웹 브라우저 시뮬레이터

• browsershots - http://browsershots.org/ 현존하는 10 여종의 웹 브라우저에 대한 Simulator 테스트. 브라우저 선택 옵션에 모두 체크해도 한번에 4~5개 정도 밖에 Simulation 되지 않으며 시간이 오래 걸리고 추가 테스트를 진행 하는 경우 기존의 스크린샷이 사라지므로 스크린샷은 PC에 저장하는 것을 권함.
• Safari Simulator(BrowsrCamp) - http://www.browsrcamp.com/ Mac OS 전용 웹 브라우저 Safari 의 렌더링 테스트.
• Opera Mini Simulator - http://www.operamini.com/demo/ Mobile 전용 웹 브라우저 Opera Mini 의 렌더링 테스트.
• iPhone/iPod Touch Simulator - http://testiphone.com/

웹 브라우저 테스트

• Acid2 Test - http://acid2.acidtests.org/ 웹 브라우저의 HTML/CSS/PNG 표준 지원 테스트.
• Acid3 Test - http://acid3.acidtests.org/ 웹 브라우저의 DOM/HTML/CSS/SVG 표준 지원 테스트.
• Working Draft CSS3 Selector Test - http://www.css3.info/selectors-test/

웹 브라우저 호환성 문제

• 개발자 좀 살려주세요! - http://resistan.com/savethedeveloper/ IE 6 업그레이드 캠페인.
• 웹 브라우저의 성능 비교 실험 - http://www.howtocreate.co.uk/browserSpeed.html
• 웹 브라우저의 종류 - http://en.wikipedia.org/wiki/List_of_web_browsers
• 웹 브라우저 점유율 통계 - http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
• DTD에 대응하는 웹 브라우저의 모드(Quirks & Strict) 전환 표 - http://hsivonen.iki.fi/doctype/
• Position Is Everything - http://www.positioniseverything.net/ IE의 버그 목록 수집.
• Quirks Mode & Strict Mode - http://www.quirksmode.org/css/quirksmode.html Quirks Mode에 대한 가이드.
• Web Devout - http://www.webdevout.net/ 주요 웹 브라우저에 대한 표준지원 현황.

웹 브라우저 확장

• Internet Explorer Collection - http://finalbuilds.edskes.net/iecollection.htm 모든 버전의 IE를 스텐드얼론 형식으로 사용할 수 있다. 개발자용 IE툴바를 사용할 수 있는 것이 장점이나 정식으로 설치된 IE 브라우저에 다양한 버그를 유발하는 단점이 있어 권장하지 않음.
  
• Mozilla Firefox > Firebug - https://addons.mozilla.org/en-US/firefox/addon/1843 Firefox 브라우저의 웹 개발자 디버깅 툴.
• Mozilla Firefox > Pencil Project - http://www.evolus.vn/Pencil/ 프로토타이핑 도구.
• Microsoft Internet Explorer Developer Toolbar - http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en IE 6~7 브라우저의 웹 개발자 디버깅 툴.
• Multiful IE - http://tredosoft.com/Multiple_IE IE 3~6 브라우저에 대한 렌더링 툴.
• Opera Dragonfly - http://www.opera.com/products/dragonfly/ Opera 브라우저의 웹 개발자 디버깅 툴.
• WebSniper - http://freeutil.net/board/?document_srl=150&mid=pds_freeutils&sort_index=readed_count&order_type=asc IE6~7 웹퍼블리셔&웹개발자를 위한 만능 툴(실시간 태그 검색, 소스보기, 소스분석, 실시간 소스편집)
• Xenocode Browser Sandbox - http://www.xenocode.com/browsers/ IE 6~8, FF 2~3, SF, OP, CR 브라우저를 실행파일을 이용하여 설치 없이 테스트 할 수 있다.
  

웹 사용성

• 씽크유저 - http://thinkuser.com/ 사용자경험, 전략, 디자인 관련 기업.
• 팀인터페이스 - http://uidesign.co.kr/ 사용성 관련 기업.
• Jakob Nielsen - http://www.useit.com/ 사용성 전문가 제이콥 닐슨.

웹 성능 분석

• Cool Check! - http://www.coolcheck.co.kr/ 웹 위험진단 서비스.
• OctaGate SiteTimer - http://www.octagate.com/service/SiteTimer/?Target=AJAX 스웨덴의 스톡홀름 서버에서 로드하는 웹 페이지의 로딩속도 측정 서비스.
• Web Page Analyzer - http://www.websiteoptimization.com/services/analyze/ 웹페이지 퍼포먼스 분석 툴.
• Website Speed Test - http://www.iwebtool.com/speed_test/ 웹 페이지 로딩속도 측정 서비스. 한 번에 10개의 웹 사이트를 비교.

웹 어플리케이션

• Balsamiq Mockups - http://www.balsamiq.com/demos/mockups/Mockups.html 프로토타이핑 도구.
• FCKeditor - http://www.fckeditor.net/ 웹 에디터.
• Genii Software WebEditors - http://geniisoft.com/showcase.nsf/WebEditors 웹 에디터 벤치마크.
• MediaWiki - http://www.mediawiki.org/ 설치형 위키.
• Mindomo - http://www.mindomo.com/ 온라인 마인드맵.
• Textcube - http://textcube.org/ 설치형 블로그.
• Wordpress - http://wordpress.org/ 설치형 블로그.
• Wordpress 한국어 포럼 - http://wordpress.co.kr/forum/
• WikiMatrix - http://www.wikimatrix.org/ 위키 벤치마크.
• Xpress Engine - http://www.zeroboard.com/ 콘텐츠 관리 시스템.

웹 이미지 검색

사진

• 쉐어이미지닷컴 - http://shareimage.com/
• 이미지코리아 - http://www.imagekorea.co.kr/
• 이미지클릭 - http://www.imageclick.com/
• Flickr - http://flickr.com/
• Getty Images - http://creative.gettyimages.com/
• Topic - http://www.topicphoto.com/
• 세계도시풍경 - http://www.jennyhouse.info/

아이콘

• Icon Buffet - http://www.iconbuffet.com/
• Yellow Icon - http://yellowicon.com/
• Icojoy - http://icojoy.com/
• iconlet - http://www.iconlet.com/
• iconspedia - http://www.iconspedia.com/
• Downloadpedia - http://downloadpedia.org/Free_Icons_and_Buttons
• 96 of the Best Ever Free Icon Sets - http://speckyboy.com/2008/07/28/96-best-ever-free-icon-sets-for-web-designers-developers-and-bloggers/

웹 접근성

• 인터넷 웹 콘텐츠 접근성 지침 1.0 - http://www.iabf.or.kr/Pds/StandardView.asp?board=relatstand&bseq=627 대한민국 국가표준.
• 웹 접근성에 대한 빠르고 쉬운 소개 - http://kukie.net/resources/accessibility/
• 웹 접근성을 고려한 콘텐츠 제작기법 - http://www.iabf.or.kr/Pds/WalView.asp?board=wal&pg=2&bseq=2230&md=&sf=&ss=
• 정보통신 접근성 향상 표준화 포럼 - http://www.iabf.or.kr/ 웹 접근성에 관한 연구 및 발간 자료가 풍부.
• 한국 웹 접근성 그룹 - http://kwag.net/ 한국의 웹 접근성 활동.
• 한국정보문화진흥원 - http://www.kado.or.kr/
• Adobe > Accessibility Resource Center - http://www.adobe.com/accessibility/index.html
• BBC > Standards & Guidelines - http://www.bbc.co.uk/guidelines/newmedia/accessibility/
• Best Practice for Accessible Flash Design - http://www.adobe.com/resources/accessibility/best_practices/bp_fp.html
• Fujitsu > Web Accessibility Guidelines - http://www.fujitsu.com/us/accessibility/
• HP > Accessibility - http://www.hp.com/hpinfo/abouthp/accessibility/
• IBM > Web accessibility - http://www.ibm.com/able/guidelines/web/accessweb.html
• Microsoft > Accessibility - http://www.microsoft.com/enable/
• USA > Section 508 - http://www.section508.gov/
• Yahoo > UK > Accessibility Help - http://help.yahoo.com/help/uk/accessibility/
• WebAIM - http://webaim.org/
• W3C WAI - http://www.w3.org/WAI/
• WCAG 1.0 - http://www.w3.org/TR/WAI-WEBCONTENT/
• WCAG 1.0 (한글) - http://gregshin.pe.kr/wcag/wai-pageauth.html
• WCAG 2.0 Recommendation - http://www.w3.org/TR/WCAG20/
• WCAG 2.0 Understanding - http://www.w3.org/TR/UNDERSTANDING-WCAG20/

웹 표준

• 오픈웹 - http://openweb.or.kr/ 웹페이지 국제표준화를 위한 민원/소송.
• 웹 표준 점검 목록 - http://kukie.net/resources/checklist/
• 한국 웹 표준 사이트 모음 - http://kwsg.org/ by 신현석.
• CDK(CSS Design Korea) - http://forum.standardmag.org/ XHTML, CSS, 웹표준, 웹접근성 관련 커뮤니티.
• The Web Standards Project - http://webstandards.org/
• W3C 대한민국 사무국 - http://www.w3c.or.kr/
• W3C 문서 한국어 번역판 - http://www.w3.org/2003/03/Translations/byLanguage?language=ko
• Web Standards Group - http://webstandardsgroup.org/
• Web Standards Korea - http://webstandards.or.kr/ 한국의 웹 표준활동에 대한 영문 블로그.
• 웹표준경진대회 출품작 - http://forum.standardmag.org/viewforum.php?id=17 2008년 6월 웹표준경진대회 출품작 모음.

통계

• 구글 분석 - http://www.google.com/analytics/ko-KR/ 나의 웹사이트 통계관리.
• 다음 웹인사이드 - http://inside.daum.net/ 나의 웹사이트 통계관리.
• 랭키닷컴 - http://rankey.com/ Navvy 사용자의 표본집계를 이용한 웹사이트 순위.
• 통계청 - http://www.nso.go.kr/
• 인터넷 통계정보 검색시스템 - http://isis.nic.or.kr/
• Internet Trend - http://internettrend.co.kr/ 국내 인터넷 관련 통계.
• MarketShare - http://marketshare.hitslink.com/ 월드와이드의 다양한 IT관련 통계 제공
  
• OneStat - http://www.onestat.com/html/aboutus_pressbox.html Web Browsers, Operating Systems, Screen Resolutions, etc ...
• TheCounter - http://www.thecounter.com/stats/ Browser Stats
• W3counter - http://www.w3counter.com/globalstats.php Web Browsers, Operating Systems, Countries, Screen Resolutions

CSS

CSS Framework

• Blueprint - http://code.google.com/p/blueprintcss/
• List of CSS Frameworks - http://en.wikipedia.org/wiki/List_of_CSS_frameworks
• Logicss - http://code.google.com/p/logicss/
• Yahoo UI Library - http://developer.yahoo.com/yui/reset/
• YAML - http://www.yaml.de/en/

CSS Reference

• 스타일시트로 만드는 Fixed Layer - http://naradesign.net/open_content/reference/fixedLayer/ by 정찬명.
• 중첩 목록을 이용한 메뉴 만들기 예제 - http://naradesign.net/open_content/reference/navigation.html by 정찬명.
• About Conditional Comments - http://msdn.microsoft.com/en-us/library/ms537512.aspx MS IE 전용 브라우저 버전별 조건 주석.
• A sample style sheet for HTML 4.0 - http://www.w3.org/TR/1998/REC-CSS2-19980512/sample.html W3C에서 권장하는 HTML 엘리먼트의 기본 스타일 정보
• Bob Image Replacement - http://neal.venditto.org/articles/12/bir/ z-index를 이용한 IR 기법으로 현존하는 기법 가운데 가장 접근성이 높은 방식.
• CSS Drive - http://www.cssdrive.com/ 다양한 CSS 예제들.
• CSS Hack - http://centricle.com/ref/css/filters/
• CSS Hack 정리 - http://www.nmindplus.com/2006/06/28/css-hack/ by nmind.
• CSS Test and Experiments - http://www.brunildo.org/test/ 다수의 CSS 실험 예제.
• CSS Zen Garden - http://www.csszengarden.com/ 하나의 Markup 에 다양한 CSS 파일을 적용한 예제.
• Em Calculator - http://riddle.pl/emcalc/ px값을 em값 으로 환산해 줌.
• Layout Gala - http://blog.html.it/layoutgala/ CSS 박스모델에 대한 예제.
• MSDN CSS Reference - http://msdn.microsoft.com/en-us/library/ms531209.aspx MS IE 전용 CSS Properties 참조.
• Nifty Corners - http://www.html.it/articoli/niftycube/nifty1.html Javascript와 CSS를 이용한 라운딩 표현.
• position:fixed 구현하기 - http://divinentd.com/experiments/emulating-position-fixed.html
• Reed Design - http://www.reeddesign.co.uk/test/points-pixels.html pt-px-em-% 단위 비교표.
• The Noodle Incident - http://www.thenoodleincident.com/ CSS 박스모델에 대한 예제 수록.
• 53CSS - http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/ Techniques You Couldn't Live Without.

CSS Standards

• W3C CSS - http://www.w3.org/Style/CSS/
• W3C CSS 유효성 검사 - http://jigsaw.w3.org/css-validator/
• W3C CSS2 규격 원문 - http://www.w3.org/TR/REC-CSS2/
• W3C CSS2 규격(한글) - http://trio.co.kr/webrefer/css2/cover.html
• W3C CSS2.1 Candidate Recommendation - http://www.w3.org/TR/CSS21/propidx.html
• W3C CSS2.1 Candidate Recommendation 추가된 속성들 - http://www.w3.org/TR/CSS21/changes.html#new
• W3C CSS3 Working Draft Road Map - http://www.w3.org/TR/css3-roadmap/
• Working Draft CSS3 소개 - http://www.css3.info/
• Working Draft CSS3 Properties Test - http://westciv.com/iphonetests/

Flash

• 플래시에 fallback 제공하기 - http://hyeonseok.com/pmwiki/index.php/Markup/Object by 신현석.
• 플래시 대체 콘텐츠와 noscript 요소 - http://blog.wystan.net/2008/03/25/flash-alternative-content-and-noscript Wystans' tales
• 플래시 클럽 - http://flashclub.co.kr/
• Niqui Merret - http://niquimerret.com/ Flash & Accessibility Expert.

Fonts

• 우리글닷컴 - http://www.woorigle.com/W_font/list_02.php 가독성 좋은 우리나라의 이쁜 클리어타입(ClearType) 폰트 아직은 유료지만 잠재성을 가진 폰트. (아쉽게도 익스플로러에서만 폰트 확인 가능.)
• 네이버 나눔고딕 - http://hangeul.naver.com/index.nhn?goto=fonts#fonts 2008년 한글날을 기념하여 네이버에서 출시한 무료폰트 '나눔고딕'
• Common fonts to all versions of Windows & Mac equivalents - http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

HTML/XHTML

• HTML4와 HTML5의 차이점 - http://www.creation.net/work/html5/html4-differences/Overview_ko.html
• WHATWG HTML5(Working Draft) - http://www.whatwg.org/specs/web-apps/current-work/
• W3C HTML 4.01 규격(한글) - http://trio.co.kr/webrefer/html/cover.html
• W3C HTML 4.01 Index of Elements - http://www.w3.org/TR/html401/index/elements.html
• W3C HTML 4.01 Index of Elements(한글) - http://trio.co.kr/webrefer/html/index/elements.html
• W3C HTML 4.01 Index of Attributes - http://www.w3.org/TR/html401/index/attributes.html
• W3C HTML 4.01 Index of Attributes(한글) - http://trio.co.kr/webrefer/html/index/attributes.html
• W3C XHTML 에 대한 Wiki 의 정의 - http://ko.wikipedia.org/wiki/XHTML
• W3C XHTML 1.0 원문 - http://www.w3.org/TR/xhtml1/
• W3C XHTML 1.0 (한글) - http://trio.co.kr/webrefer/xhtml/overview.html
• W3C Markup 유효성 검사 - http://validator.w3.org/
• W3 Schools Online Web Tutorials - http://www.w3schools.com/ W3C 의 표준스펙에 대한 학습 자료.
• XHTML Character Entity Referenece - http://www.digitalmediaminute.com/reference/entity/index.php XHTML 특수문자 본체 참조.

Javascript

• 자바스크립트를 이용하여 IE5~6을 IE7~8처럼 만들기 - http://code.google.com/p/ie7-js/ 또 다른 렌더링 버그 유발로 권장 안함.
• 자바스크립트 미지원 환경을 위한 CSS 적용 팁 - http://facedown.co.kr/tt/entry/overWriteScriptCss by 유인동.
• BluShoes - http://www.blueshoes.org/en/javascript Javascript 예제.
• DOM Script 예제 - http://www.acornpub.co.kr/sample/dom/index.html 겸손한 자바스크립트 예제들. 에이콘 출판사.
• IFRAME Resize Script - http://guymal.com/mycode/iframe_size/
• Online Tools - http://onlinetools.org/ Javascript, DOM 예제 수록.
• Unit PNG Fix - http://labs.unitinteractive.com/unitpngfix.php
• IE PNG Alpha Fix v1.0 - http://www.twinhelix.com/css/iepngfix/demo/

User Interface 개발

• Daum UI Dev Guideline - http://ui.daum.net/guideline
• High Performence Web Sites - http://stevesouders.com/examples/rules.php 고성능 웹사이트를 위한 인터페이스 제작지침
• IBM 한국 developerWorks 웹 개발 - http://www.ibm.com/developerworks/kr/web/
• NHN UI Develope Guide - http://html.nhndesign.com/ NHN 의 UI 개발 지침.
• Yahoo Develoeper Network(yui) - http://developer.yahoo.com/yui/