좀더 자세히 말하면 UI테스트가 불가능하다기 보단 자동화된 UI테스트가 불가능한것 같다.
사실 테스트만 잘되면 자동화하는 작업은 그렇게 힘들지 않는다고 생각한다.
하지만 UI쪽 테스트 자체가 힘들기 때문에 자동화된 테스트가 안되고 그렇기 때문에 테스트가 잘되고 있는것 같지 않다.
그래서 왜 UI쪽 테스트가 불가능한가 정리를 해볼까 한다.



개인적으로 UI개발의 테스트를 자동화 할수 있다면 정말 혁신적인 일이라 생각하고 아마 수많은 시간과 돈이 save될거다.
(지식이 부족한지 몰라도 내가 알기론 없다. 있다면 제발 누군가 알려줬으면 좋겠다.)
그럼 먼저 UI개발이란 말이 좀 명확하지 않으니  HTML, Javascript, CSS을 가지고 개발하는 것으로 정하자. Flash,Silverlight등은 제외.


첫째, 테스트 할 조건이 너무 많다.

크게 OS는 window, Mac, Linux... 브라우져는 IE, Firefox, Safari, Opera... 어림 잡아 12가지이다. 근데 버전별로 하면.... 생각하기 힘들 정도로 많다. 게다가 프레임워크나 컴퍼넌트 같은 경우는 어떤 상황에서도 정상적으로 작동해야 하는데 DTD로 인해 영향을 미치는 경우가 있다. 그럼 또 경우에 수는 상상하기 싫을 정도로 많아진다.이렇게 많은 종류에 환경을 갖추고 테스트를 하기란 정말 힘들기 때문에 자동화된 테스트를 하기가 힘들다.

이정도 되면 UI개발자 입장에서 정말 세상에 단일OS와 단일 브라우져만 있다면 좋겠다라는 생각을 한다.

이렇게 테스트 할 조건이 많고 만약 테스트가 자동화 되지 않았다면 비용이 너무 많이 들어서 사실상 테스트 하는건 한계가 있다.




둘째, 테스트 자체가 불가능한 경우가 많다.

사실 첫번째 같은 경우 환경을 갖추기는 어렵지만 할수 있는 일이다.
돈과 시간만 있다면 몇대 PC에 버철머신 설치 해가면서 환경을 갖출 순 있다.
(testswarm, selenium grid같은걸로 하면 자동화 하면 되나 일반적으로 힘들다고 말하는것임)

환경을 갖춘다고 해도 테스트를 만드는것 자체가 힘든 경우가 많다.
먼저 자바스크립트 같은 경우는 일반적으로 테스트가 가능하다.
Ajax, Timer등의 테스트들 같은 경우 까다롭긴 하지만 mock을 사용하던지 테스트 가능하게 레이어를 올리던지 가능하다.

하지만 로직상 정상적으로 작동하지만 실제 브라우져에서 정상적으로 작동하지 않는 기능들 같은 경우는 힘들다. 대부분이 이벤트를 가지고 하는 작업들이 그렇다.
네이티브 브라우져 이벤트를 다루면 해결할것 같은데 이건 쉽지 않다. 예전에 selenium-ice라는게 이런 문제를 해결해 줄거라고 생각했는데 프로젝트가 더이상 진행되지 않는것 같아 정말 아쉽다.

디자인이 엮이면 힘들다.
예를 들면 로직상은 정상인데 css랑 엮이면서 디자인 자체가 일그러지는 현상들.
이런 현상들이 생각 보다 굉장히 많다.
그래서 자동화를 하기 위해 selenium에 capture기능을 써서 이미지를 떠서 비교를 하려고 했으나 쉽지 않았고 반자동화로 진행하려고 했으나 역시 쉽진 않았다.

CSS 자체는 테스트를 어떻게 해야 할지 감이 안잡힌다.
CSS가 변경이 되면 영향이 미치는 경우가 많다. 그래서 어디서는 이런 방법으로 테스트를 한다고는 하지만 실제로 보니 크게 도움이 될까?라는 의구심이 든다.
그리고 위에서 말한 capture기능도 생각보다 굉장히 비효율적이라 딱히 방법이 떠오르지 않는다.



정리하면.
  1. 환경이 너무 많다.
  2. 브라우져 자체에서 실행시켜야만 알수 있는 에러는 찾기 힘들다.
  3. 렌더링에 따라 눈으로 발견하는 에러는 찾기 힘들다.
  4. CSS를 어떻게 테스트 해야 할지 모르겠다.
이다.

계속 고민은 하지만 딱히 떠오르는 방법이 없다.-_-;
아무리 찾아봐도 없는걸 보면 아직 해답을 못찾았다고 생각하고 계속 실험하고 탐구해봐야 하는 영역인듯;;

참고로 일부가 불가능하다고 해서 안하는게 낫다라고 말하는게 아니다.
오해하지 마시길.

ps. TEST는 그렇다고 하고 과연 세계적으로 UI개발에 대한 퀄리티를 어떻게 측정하며 하는곳이 얼마나 있을까?

Posted by 전용우
지난 화요일날 webtech의 css세미나를 다녀온적이 있다.

내용도 좋았고 나름 재미있는 시간이였다.

거기서 각종팁들을 알져 줬는데 그중에 하나가 각각 짜른 이미지가 아니라
통이미지로 올려서 이미지들을 숨기는 방법을 알려줬다.

강사(임종혁님)가 말하길 이미지의 용량보다 이미지갯수가 페이지를 로딩하는데 더 큰 문제라고 하시면서 위와 같은 팁을 알려줬는데 바로 오늘 에이시안에 해당들이 올라왔다.

한번 확인해 보시길.^^

Posted by 전용우
TAG CSS, DESIGN, TIP

Tool
aptana:http://www.aptana.com/(강추-이클립스기반)
jsecilpse:http://www.interaktonline.com/Products/Eclipse/JSEclipse/Try-Download/
             (이클립스플러그인-위에꺼가 더좋은것 같음)
GTW : http://code.google.com/webtoolkit/

Javascript Library
Jquery : http://jquery.com/demo/thickbox/
moo.fx : http://www.moofx.mad4milk.net/
dojo toolkit : http://www.dojotoolkit.org/
mochikit : http://www.mochikit.com/about.html
JSPON(JavaScript Persistent Object Notation) : http://www.jspon.org/
qooxdoo : http://qooxdoo.org/
JavascriptLint : http://www.javascriptlint.com/
Yahoo! JavaScript Developer Center : http://developer.yahoo.com/javascript/
Prototype : http://prototype.conio.net/
script.aculo.us : http://script.aculo.us/
javascript manual :http://koxo.com/lang/js/
ajaxpattern : http://ajaxpatterns.org/
dom manual: http://developer.mozilla.org/en/docs/Gecko_DOM_Reference
                  http://developer.mozilla.org/ko/docs/Gecko_DOM_Reference

Javascript Articles
Script.aculo.us Behaviour Driven Development Testing :
http://ajaxian.com/archives/scriptaculous-behaviour-driven-development-testing

New in JavaScript 1.7 :
http://developer.mozilla.org/en/docs/New_in_JavaScript_1.7
The Decorator Pattern for JavaScript :
http://beppu.lbox.org/articles/2006/08/22/the-decorator-pattern-for-javascript
SmoothMovingLayer:
http://hyeonseok.com/pmwiki/index.php/Javascript/SmoothMovingLayer
Transparent Messages in JavaScript:
http://ajaxian.com/archives/transparent-messages-in-javascript
http://firejune.com/index.php?pl=971
A flexible slideshow:
http://www.madb.net/slideshow/
http://smoothslideshow.jondesign.net/index.html
Lessons in JavaScript Performance Optimization:
http://ajaxian.com/archives/lessons-in-javascript-performance-optimization
bytefx: simple effects:
http://ajaxian.com/archives/bytefx-simple-effects
Upgraded jQuery Spy:
http://leftlogic.com/info/articles/jquery_spy2
Dynamic Graphics in the Browser:
http://ajaxian.com/archives/dynamic-graphics-in-the-browser
Yahoo! Browser-Based Authentication:
http://ajaxian.com/archives/yahoo-browser-based-authentication
Fresh Logic Studios Scripts: OO JS
http://ajaxian.com/archives/fresh-logic-studios-scripts-oo-js
Ajax MVC:
http://ajaxian.com/archives/ajax-mvc-so-to-speak
http://www.alexatnet.com/Blog/Index/2006-08-04/javascript-model-view-controller-with-dojo-toolkit
Adventures in JavaScript testing:
http://ajaxian.com/archives/adventures-in-javascript-testing-slides
Ajax & REST :
http://www-128.ibm.com/developerworks/java/library/wa-ajaxarch/
Eliminating async Javascript callbacks by preprocessing :
http://ajaxian.com/archives/eliminating-async-javascript-callbacks-by-preprocessing
IE + JavaScript Performance Recommendations :
http://blogs.msdn.com/ie/archive/2006/08/28/728654.aspx
Dramatically improved IE7 JavaScript performance :
http://ajaxian.com/archives/dramatically-improved-ie7-javascript-performance
http://ajaxian.com/archives/improved-javascript-performance-in-ie7
Scope in JavaScript :
http://www.digital-web.com/articles/scope_in_javascript/
Ajax services :
http://www.agmweb.ca/blog/index.php?p=50
Live Filter :
http://unspace.ca/discover/livefilter/
JavaScript control of throbber :
http://sandbox.sourcelabs.com/wikiality/throbber
Objectifying JavaScript :
http://www.digital-web.com/articles/objectifying_javascript/
Prototype Carousel Widget :
http://ajaxian.com/archives/prototype-carousel-widget
Tracking Ajax Requests in Analytics
http://www.ajax-blog.com/tracking-ajax-requests-in-analytics.html
jQuery Image Gallery: Transitions, thumbnails, reflections
http://ajaxian.com/archives/jquery-image-gallery-transitions-thumbnails-reflections
정규식
http://bluebreeze.co.kr/tag/정규식
Hacking Web 2.0 Applications with Firefox
http://www.securityfocus.com/infocus/1879
Usability for Rich Internet Applications(필히읽어보세요)
http://www.digital-web.com/articles/usability_for_rich_internet_applications/
AJAX Feedback Mechanism
http://www.ibegin.com/blog/p_ajax_feedback_mechanism.html
Making Javascript DOM a Piece of Cake with the graft() Function
http://schf.uc.org/articles/2006/10/15/making-javascript-dom-a-piece-of-cake-with-the-graft-function
Ajax Loding image
http://www.ajaxload.info/
Fixing the Back Button and Enabling Bookmarking for AJAX Apps
http://www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps
Tuning AJAX
http://www.xml.com/lpt/a/2005/11/30/tuning-ajax-performance.html
Ajax indicators
http://www.napyfab.com/ajax-indicators/

CSS Library
각종CSS : http://www.dynamicdrive.com/style/  
W3C 규격 번역문 :http://trio.co.kr/
Yahoo! Design Pattern Library : http://developer.yahoo.com/ypatterns/
Yahoo! UI Library (YUI) : http://developer.yahoo.com/yui/

CSS Articles
Architecting CSS:
http://www.digital-web.com/articles/architecting_css/
transcorners:
http://inviz.ru/moo/meet-transcorners
12 Lessons for Those Afraid of CSS and Standards:
http://ajaxian.com/archives/12-lessons-for-those-afraid-of-css-and-standards
A CSS Crossfader :
http://mikeomatic.net/?p=78
Push my button :
http://www.digital-web.com/articles/push_my_button/
Details on our CSS changes for IE7
http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx
폼 css
http://www.badboy.ro/articles/2005-07-23/index.php
테이블 css
http://icant.co.uk/csstablegallery/index.php?css=2

Posted by 전용우

웹표준을 배우기 위한 세번째 책

이로써 내가 웹표준을 공부하려구 맘먹었던 책3권중 마지막 책이다.

아직 끝까지는 보지 못했지만 첫장만 보니 전에 있던 내용이다..ㅡㅡ;

그래도 다른 책과 비교했을때 칼라라 좋다 ㅎㅎ; 이제 마지막이니 잼있게 보장.

ps.공부는 하는데 생각보다 사용할려니 맘대로 안된다.한번 디자인 엎어봐야지.




Posted by 전용우
TAG CSS, study, xhtml

웹표준 배우기 위한 두번째 책

:예전에 읽었는데 다시 좀 정리도 할겸 다시 읽어 봐야겠다.

여긴 별로 정리할게 없다. 책의 전체적인 내용은 구조에 알맞는 엘리먼트를 사용하자다.

:공통된부분을 상위 엘리먼트에 정의하고 자세한 부분은 하위엘리먼트에 정의하므로 양을 줄이자.

  -상속을 잘사용하자.

:소수의 브라우져에 대한 배려를 하자

:항상 css가 적용된다는 생각을 하지말자.

:CSS Tip


기타 사이트(거의 모름 ㅎ)

-W3W :우리가 모두 아는 웹표준을 권고안을 만드는곳.

-Web Standards Project : 웹표준을 대중에게 널리 알리고 웹디자이너와 개발자들이 표준에

                                   따라 개발하도록 교육자료를 재공한다고 함.

-A List Apart : 웹사이트를 만드는 사람이라면 필독이랍니다.

-Css Zen Garden :  나를 css대해 감탄을 하게 한곳.나같은 초보도 알정도로 유명한곳.

-Dive Into Accessibility : 웹접근성에 대해 쉽게(?) 설명한 곳이랍니다.

-css-discuss:실제 프로젝트를 하면서 생기는일들을 메일링하는곳(영어만 되면 좋은듯..)

-Web-Graphics: 하이퍼링크 디자인 자료,링트,설명들을 모아놓은곳이랍니다.

-Digital Web Magazine : 웹디자이너들을 위한 온라인 잡지

-The Weekly Standards : 주간단위로 웹표준 소식을 전해줌.(안열림)


기타 블로그(모두 모름 ㅋ)

-Jeffrey Zeldman Presents :The Daily Report :

                                    굉장히 유명한 웹표준의 대부라는 제프리젤드만의 블로그

-Stopdesign: 더글라스 바우맨의 블로그

-mezzoblue : Dave Shea의 블로그

-meyerweb.com : 에릭마이어의 블로그

-Tantek Celik : 박스모델의 핵으로 유명한 블러그

-What Do I Know?:토드 도미니의 블로그

-Asterisk(*) : D.Keith Robinson의 블로그

-superfluousbanter : 댄 루빈,디디,힐호스트의 블로그

-Simon Willison's Weblog:시몰윌슨의 블로그

-Brainstorms and Raves: 셜리 카이저의 블로그

-Living Can Kill You: 크레이그 세일러의 블로그



Posted by 전용우
TAG CSS, study, xhtml

이책이 나에게 하는말...

"이젠 좀 나누지 그래!!!"


1.HTML 알아보기

  :반드시 TAG는 한쌍을 이룬다.

  -제목:<H1>~<H6>

  -단락:<P></P>


2.하이퍼텍스트와 함께하는 심층학습

  :한페이지에서 다른 페이지로 링크를 걸땐 "<a>"를  사용한다.

  :<a>의 href는 목적지를 나타낸다.

  :상위 폴더로 이동시에는 ../xxx.html을 사용한다.(두단계위는 ../../xxx.html)


Posted by 전용우
TAG CSS, study, xhtml