글 꼴의 종류와 크기를 결정했다면, 볼드/이텔릭과 같은 글꼴의 장식 및 자간, 줄간 들여쓰기와 같은 문단 편집기능에 대하여 살펴봅니다. 몇몇 기능은 브라우저에 따라, 적용/미적용 여부가 다르며, 적용되더라도 화면의 보여지는 모습이 다릅니다. 충분한 테스트 후 활용하도록 합니다.

[ 글꼴의 굵기 지정 ]

font-weight: normal (default value);

글꼴 그룹의 어떤 굵기의 글꼴을 사용할 것인지를 설정합니다.  초기값은 normal(400)이며, 굵은 글꼴은 bold(700) 키워드를 사용합니다. 설정값은 하위 요소로 상속됩니다. 다음은 Verdana 글꼴의 굵기 속성입니다.

* normal, bold, 100~900

  • font-weight: normal
  • font-weight: bold
  • font-weight: 100
  • font-weight: 200
  • font-weight: 300
  • font-weight: 400
  • font-weight: 500
  • font-weight: 600
  • font-weight: 700
  • font-weight: 800
  • font-weight: 900

위와 같이, 일반적인 글꼴 그룹은 9종류의 굵기가 다른 글꼴이 준비되어 있지 않는 경우가 많습니다.

따라서, 일반적으로 100~900까지의 9단계의 굵기 지정보다는, 굵은 글꼴 표현을 위한, bold를 주로 사용합니다. 기본값은 normal이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다.

* lighter, bolder

100~900의 굵기의 범위에서, 현재 굵기(디폴트값 또는 상위 요소에서 상속된 값)보다 각각 한 단계 가는 글꼴, 또는 굵은 글꼴을 지정합니다.

[ 글꼴 스타일의 지정 ]

font-style: normal (default value);

글꼴 그룹의 표준, 이탤릭, 기울임 글꼴을 지정하는 속성입니다. 설정 값은 하위요소로 상속됩니다.

* normal, italic, oblique

글꼴 그룹의 종류에 따라, 이텔릭체 전용, 기울임 전용 글꼴이 디자인되어 있습니다. 해당 글꼴을 사용하도록 지정이 가능합니다. 해당 글꼴이 없는 경우에는 표준 글꼴을 기울인 글꼴이 이용됩니다. 기본값은 normal이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다. 다음은 Verdana 글꼴의 스타일 속성입니다.

  • font-style: normal
  • font-style: italic
  • font-style: oblique

[ 작은 대문자 지정 ]

font-variant: normal (default value);

영어 알파벳의 표기방식입니다. 알파벳을 대문자료 표기하되, 소문자 크기로 작게한 종류의 글꼴인 small-caps를 지정할 수 있습니다. 설정 값은 하위 요소로 상속되며, 기본값은 normal이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다.

* normal, small-caps

  • font-variant: normal
  • font-variant: small-caps

[ 대소문자 지정 ]

text-transform: none (default value);

영 어 알파벳의 표기방식입니다. 문장에 있는 단어의 첫글자만을 대문자로 표시하거나, 전체를 대문자 또는 소문자로 표기하게 할 수 있습니다. ID와 같이 대/소문자의 구분입력 단위요소에 사용할 수 있습니다. 설정 값은 하위 요소로 상속되며,  기본값은 none이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다.

* none, capitalize, lowercase, uppercase

  • text-transform: none; Capitalization effects
  • text-transform: capitalize; Capitalization effects
  • text-transform: lowercase; Capitalization effects
  • text-transform: lowercase; Capitalization effects

[ 글꼴 장식 ]

text-decoration: none (default value);

글꼴 장식에 대한 속성입니다. 아래 예와 같이, 밑줄이나 윗줄, 취소선을 표시하거나 깜박이게 할 수도 있습니다.

이 속성은 상위 요소로부터 상속되지 않습니다. 다만, 블록 레벨 요소에 대하여 지정한 경우에는 해당 박스 안에 포함되는 인라인 요소에 모두 적용됩니다. 또한, 인라인 요소에 대하여 지정한 경우에는 해당 요소가 생성하는 모든 박스에 대하여 적용됩니다.

* none, underline, overline, line-through, blink

  • text-decoration: none a tag in li tag
  • text-decoration: underline
  • text-decoration: line-through
  • text-decoration: overline
  • text-decoration: blink

위와 같이, blink옵션값은 IE에서는 적용되지 않습니다. (Firefox 2.0에는 적용됩니다)

또한, 첫번재 줄에 사용된 코드는 다음과 같습니다. 즉, 같은 레벨의 요소에는, text-decoration값이 상속되지 않습니다.

<li style="text-decoration: none;">text-decoration: none <a href="#">a tag in li tag</a></li>

[ 줄 간격 설정 ]

line-height: normal (default value);

정확히는, 인라인 요소의 높이를 설정하는 값입니다. 만약 블록 레벨 요소에 값을 지정한 경우에는, 해당 박스에 포함될 인라인 요소 박스의 최소 높이를 지정하는 것이 됩니다. 설정 값은 하위 요소로 상속됩니다.

* 인라인 요소에 대한 높이값 표현의 디폴트 값이 IE7Firefox2의 차이가 현격하기 때문에, 상위레벨(body, hemtl)에서 픽셀이나 포인트로 결정해 주는 것이 좋습니다.

  • line-height: normal
    line-height: normal
  • line-height: 150%
    line-height: 150%
  • line-height: 15px
    line-height: 15px
  • line-height: 1.5em
    line-height: 1.5em

기본값은 normal이며, 브라우저가 적절한 줄간격을 설정합니다. "실수값+단위 형태"로 지정할 수 있습니다.

전각(em)의 경우는, 해당 글꼴의 줄 간격을 1로 간주하고 퍼센티지(%)100%로 간주하고 계산되어 집니다. 즉, 상위레벨의 값을 1(em), 100(%)으로 계산하여 표현합니다. 픽셀(px) 및 포인트(pt)등과 같은 값을 지정할 수도 있습니다. 단, 인라인 레벨의 박스 높이인 만큼 음수값을 지정할 수 없습니다.

[ 문자 간격 설정 ]

letter-spacing: normal (default value);

글자와 글자의 간격을 설정하는 속성입니다. 주의할 점은 설정하는 값이 자간이 나타내는 것이 아니라, 기본 자간에 설정값이 추가(+)되는 것 입니다. 따라서, line-height와는 달리, letter-spacing값에는 음수값을 지정할 수 있습니다. 설정 값은 하위 요소로 상속됩니다.

* 문단 정렬이 좌우 배분(text-align: justify)인 경우에는, 문단 정렬에 우선되어 간격값이 조정됩니다.

[ font-family: Verdana, Gulim, Dotum, sans-serif; font-size: 9pt; ]

자간은 글꼴의 종류와 크기에 따라, 웹브라우저의 상이점이 발생합니다. 위 그림의 위의 것은 IE7에서 표현되는 스크린이며, 아래는 Firefox2에서 표현되는 모습입니다. 디폴트 상태(normal)에서는 별다른 차이가 없지만, 전각(em) 포인트(pt)등의 단위에서는 약간의 차이가 눈에 띄입니다. 픽셀(px)단위가 비교적 차이가 없어 보입니다.

[ 단어 간격 설정 ]

word-spacing: normal (default value);

공백으로 구분되는 하나의 단어와 단어 사이의 간격을 설정하는 속성입니다. 자간과 마찬가지로 설정하는 값이 단어 간격을 나타내는 것이 아니라, 기본 간격에 설정값이 추가(+)되는 것 입니다. 따라서, line-height와는 달리, word-spacing값에는 음수값을 지정할 수 있습니다. 설정 값은 하위 요소로 상속됩니다.

* 문단 정렬이 좌우 배분(text-align: justify)인 경우에는, 문단 정렬에 우선되어 간격값이 조정됩니다.

[ font-family: Verdana, Gulim, Dotum, sans-serif; font-size: 9pt; ]

단어 간격 역시, 글꼴의 종류와 크기에 따라, 웹브라우저의 상이점이 발생합니다. 위 그림의 위의 것은 IE7에서 표현되는 스크린이며, 아래는 Firefox2에서 표현되는 모습입니다. 디폴트 상태(normal)에서는 별다른 차이가 없지만, 전각(em) 포인트(pt)등의 단위에서는 약간의 차이가 눈에 띄입니다. 픽셀(px)단위가 비교적 차이가 없어 보입니다.

[ 글꼴 크기의 보정 ]

font-size-adjust: none (default value);

현재, IE7은 지원하지 않고 있으며, Firefox 2.0에서는 적용이 되는 속성으로 용도는 아래와 같습니다.

어떠한 이유로(사용자에게 글꼴이 없거나, 요소 하위에 다른 글꼴이 사용되는 등), 요소에 지정된 글꼴이 표시되지 않는 경우, 글꼴 기본 크기의 차이에 따른 이질감을 조정하기 위한 속성입니다. 해당 글꼴(지정한 글꼴) 크기에 대한 소문자 x의 높이의 비율을 지정해 두면, 다른 글꼴이 사용되더라도 소문자 x의 높이가 일정하게 유지되도록 하여 일관성을 유지하게 됩니다. 설정값은 하위요소로 상속됩니다.

아래는, Firefox 2.0font-size-adjust를 적용한 예입니다.

<div style="font-family: Verdana; font-size: 14pt; font-size-adjust: 0.54;">Verdana 14pt <font style="font-family: 'Times New Roman';">Times New Roman 14pt</font></div>

그림의 위쪽은 font-size-adjust를 적용하지 않은 경우이며, 아래는 0.54값이 적용된 경우입니다.

주의할 점은, 해당 값에 따라 지정된 글꼴(위의 경우 Verdana)도 크기가 보정될 수 있다는 점입니다. 따라서, 충분한 테스트 및 검증을 해 준 후 사용하도록 합니다.

한가지 재미있는 점은, 영문 글꼴을 대표글꼴로 설정하여 사용하는 경우, 한글의 크기가 브라우저에 따라 같지 않은 문제를, 이 속성을 통해 어느정도 보완할 수가 있다는 점이 있습니다. (적어도, IE에서는 적용되지 않기 때문입니다)

위와 같이, 절절한 font-size-adjust값을 주어, 한글 글꼴을 조정해 줄 수 있습니다. 물론, IE에서는 적용되지 않기 때문에, IE에 맞춘 스타일시트에 Firefox의 한글크기 문제가 있는 경우 사용할 수 있습니다.

[ 장평 설정 ]

font-stretch: norman (default value);

현재, IE7, Firefox 2.0모두 지원하지 않습니다. 총 9단계의 속성값이 있습니다.

ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded이 있으며, 왼쪽에서 오른족으로 갈 수록 폭이 넓어집니다.

CSS

설정

트랙백

댓글

현 재 페이지의 스크립트에서 다른 서버로 Ajax 호출을 시도하는 것은 허용되지 않습니다. 이것을 cross domain JSON을 이용하여 해결할 수 있는데 다음 URL에서 cross domain JSON을 이용한 원격 호출 방법과 간단한 JavaScript 유틸리티를 제시합니다.

그럼 어떻게 JSON을 이용하여 다른 서버의 서비스를 호출할 수 있는지 살펴보겠습니다. 원리를 알면 쉽게 나에게 적합한 유틸리티를 만들수 있을 겁니다.

스크립트 태그

다음은 스크립트 태그입니다. 보통 아래와 같이 사용합니다.

test.js

1. alert('OK');

 test.html

1 ...
2 <script type="text/javascript" src="js/test.js"></script>
3 ...

그럼 js 디렉토리에 아래와 같은 JavaScript를 생성하는 jsp를 만들고 스크립트 태그에 다음과 같이 수정해봅니다.

test.jsp

1 alert('<%=System.getProperty("os.name")%>');

test.html
1 ...
2 <script type="text/javascript" src="http://userhost:port/js/test.jsp"></script>
3 ...


System.getProperty("os.name")은 Host의 OS 이름을 가져오는 Java 코드이고 서버에서 실행되는 코드입니다.
위와 같이 하면 해당 서버의 OS 이름이 나타날 겁니다.


스크립트 src의 URL에 제약이 없다

위의 test.jsp가 이 서버말고 다른 서버(도메인)에 있더라도 동작합니다.
그럼 test.jsp를 다른 서버에 올려놓고 다음과 같이 스크립트 태그를 수정해 봅니다.
test.html
1 ...
2 <script type="text/javascript" src="http://remote:port/js/test.jsp"></script>
3 ...

원격 서버의 OS 이름이 나타날 겁니다.

그럼 test.jsp를 다음과 같은 스크립트를 생성하도록 바꾸고, test.html에는 getHostOs라는 JavaScript 함수를 만들어 놓습니다.
(내서버) test.html
1 ...
2 <script type="text/javascript">
3 function getHostOs(response) {
4     alert(response.osName);
5 }
6 </script>
7 <script type="text/javascript" src="http://remote:port/js/test.jsp"></script>
8 ...


(원격서버) test.jsp
1 getHostOs({osName:'<%=System.getProperty("os.name")%>'});

7번째 줄 javascript 태그에서 원격에서 생성된 스크립트를 실행합니다. 원격 서버에서 생성된 스크립트를 보니 JSON 데이터를 만들고 그걸 파라메터로 getHostOs 라는 함수를 호출하는군요. 이 함수는 이미 페이지에 준비되어 있습니다. (callback 함수라고 합니다.) 즉 아래와 동일한 결과죠.
1 ...
02 <script type="text/javascript">
03 function getHostOs(response) {
04     alert(response.osName);
05 }
06 </script>
07  
08 <script type="text/javascript">
09 getHostOs({osName:'Linux'});
10 </script>
11 ...

여기서 관심있게 볼 부분은 8번째 줄
{osName:'Linux'}이 원격에서 생성한 JSON 데이터라는 것입니다.


실전
원격의 JSON 데이터를 가지고 오기 위해서는 <script type... src="..."></script> 부분이 필요합니다.
원격 서비스 호출을 하는 JavaScript 유틸리티를 만들려면 원격 호출할 때마다 위 방식의 스크립트 태그가 필요하니 동적으로 생성하면 됩니다.
1 ...
2 scriptObj = document.createElement("script");
3 scriptObj.setAttribute("type", "text/javascript");
4 scriptObj.setAttribute("charset", "utf-8");
5 scriptObj.setAttribute("src", remoteUrl);
6 ...


원격 서비스마다 응답 JSON을 처리하는 방법이 다르므로 callback 함수 이름은 요청마다 다르게 해주어야 하며 원격 서버는 callback 이름을 파라메터로 받아 그 함수이름으로 JSON을 파라메터로 넘기는 스크립트를 생성해주어야 합니다. 즉 callback 함수로 감싸면 됩니다.

http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-tag.html  기사에 있는 예제 http://www.xml.com/2005/12/21/examples/jsr_class.zip 소스를 참고하시면 JSON을 이용한 자신만의 cross domain 호출 유틸리티를 만들 수 있을 겁니다.

다른 Cross domain Ajax 방법도 참조하세요.

설정

트랙백

댓글

JQuery 의 장점과  시작하기

  jquery 를 써야 할까요?



jQuery는 지구상에서 가장 인기있는 자바스크립트 라이브러리입니다. 2011년 6월 현재 w3techs.com 통계에 따르면 지구촌 1/3 웹 사이트가 jQuery를 사용하고 있고, 자바스크립트 라이브러리를 사용하는 사이트 중 4/5 웹 사이트가 jQuery를 사용하고 있습니다.
이 정도면 대세라 부를만 하지요.

장점과 초기시작 하는 방버을 알아보도록 하겠습니다.


JavaScript library

๏ 기능과 UI가 많아질 수록 복잡도가 증가한다.
  - 재사용될 수 있는 기능들을 라이브러리화 한다.
๏ 개발시 자주 사용되는 기능을 라이브러라화 하는 프로젝트들이 많다.
  - Prototype, mooTools, YUI, Dojo, Ext JS, etc.
๏ 개발해야 하는 제품의 특성에 따라서 사용한다.
  - 직접 만들수도 있고 공개 라이브러리를 사용할 수도 있다.
  - 효용성(크기, 기능, 시간 등)을 생각해 본다.



jQuery write less, do more

๏ 문법이 간결하다.
๏ 사용하기 쉽다.
๏ 빠르게 배울 수 있다.
๏ 다른 라이브러리들과 충돌을 일으키지 않는다.
๏ 다양한 플러그인이 존재한다.
๏ 브라우저 호환성 문제를 해결해준다.
๏ MIT and GPL licenses.



jQuery 라이브러리 참조하기

๏ jquery 라이브러리는 jquery.com에서 스크립트 파일을 다운로드 받을수 있습니다.
<script src="jquery.js"></script>
<script>
// your script goes here.
</script>

๏ 그러나 jQuery 라이브러리 파일을 다운받지 않고 CDN 서버가 제공하는 파일을 직접 링크해도 됩니다
๏ CDN(Content delivery network)도 사용할 수 있다.

- jQuery CDN : http://code.jquery.com/jquery-latest.min.js

- Google Ajax API CDN : http//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
- Microsoft CDN : http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js


<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script >
// your script goes here.
</script>





설정

트랙백

댓글

  • ugg 2013.04.10 18:48 답글 | 수정/삭제 | ADDR

    눈을 감아봐 입가에 미소가 떠오르면 네가 사랑하는 그 사람이 널 사랑하고 있는거야.

주소 :
http://www.lucidchart.com/documents/demo/4d004cbe-c2dc-4da9-8ee2-26100af90ae1


내용 :

설정

트랙백

댓글

Flash Movie는 기본적으로는 z-index와 관계없이 화면의 맨 앞에 보이게 된다.

wmode 값을 설정하여 플래시 플레이어를 제어 하여 배경을 투명하게 하거나 위에 레이어를 올릴 수 있다.
 <param name="wmode" value="window">

 <param name="wmode" value="opaque">

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

  • window는 Flash Movie 를 맨 위에 놓게 된다. (기본값)
  • opaque는 Movie 아래의 모든 것을 가리게 된다. 위에 레이어를 올릴 수 있다.
  • transparent는 Movie를 투명하게 하여 뒤의 html 부분을 보여준다.

transparent모드를 사용할 경우 animation performance를 떨어뜨리게 되기 때문에 반드시 필요한 경우에만 사용해야 한다. 면적이 넓으면 피하는 것이 좋다.

파이어폭스, 오페라, 사파리 등에서도 투명한 플래시를 사용하는 방법은 object 태그를 표준에 맞게 사용하면 된다.

설정

트랙백

댓글

PHP 날짜관련함수 - date()


<?
$today = date("F j, Y, g:i a");                 // March 10, 2001, 5:16 pm
$today = date("m.d.y");                        
// 03.10.01
$today = date("j, n, Y");                      
// 10, 3, 2001
$today = date("Ymd");                          
// 20010310
$today = date('h-i-s, j-m-y, it is w Day z ');  
// 05-16-17, 10-03-01, 1631 1618 6 Fripm01
$today = date('\i\t \i\s \t\h\e jS \d\a\y.');  
// It is the 10th day.
$today = date("D M j G:i:s T Y");              
// Sat Mar 10 15:16:08 MST 2001
$today = date('H:m:s \m \i\s\ \m\o\n\t\h');    
// 17:03:17 m is month
$today = date("H:i:s");                        
// 17:16:17
?>


PHP 날짜 함수 정리

 

 

* 전일 구하기


-오늘부터 5일후

date("Y-m-d",strtotime("+5 day"));


-오늘로부터 3일전
echo date("Y-m-d",strtotime("-3 day"));


-오늘로부터 6주 전

$calyoil = 5 - date("w"); //현재 요일에서 금요일을 구하기 위한 가감
$needday = strtotime("-6 week"); // 6
주전
$needday = date("Y-m-d" , strtotime("$calyoil days",$needday));

-윤년

if(29==date(t,mktime(0,0,0,2,1,$year))
echo "
윤년";
else echo "
윤년아님";

 

--mktime(,,,,,년도)--

 

-그 달의 마지막 날짜  가지고 오기

$lastday = date(t,mktime(0,0,1,$month,1,$year));

 

-금주의 시작일 구하기

$now=date("w");

$m=$now-1;

$start=date("Y-n-d",strtotime("-$m day"));





JavaScript 날짜 함수
 


Month ( 0 ~ 11까지 정의 된다 )  현재월을 표시하려면 month -1 하여라 ..

 

날짜 객체  생성  var today = new Date( , , ) ;

날짜 년 가지고 오기 today.getYear();

날짜 월 가지고 오기 today.getMonth();  ( 현재월 가지고 올경우  +1 )

날짜 일 가지고 오기 today.getDate();  (day 가 아니 getDate 이다)

날짜 월 짜리수 맞추기 위한 if = parseInt() < 10 ? - + parseInt() : parseInt();



Mysql 날짜 함수

 

Mysql 날짜 함수

select date_sub(now(), interval 5 day);
5
일후..
select date_add(now(), interval 5 day);
5
일전...


설정

트랙백

댓글

지메일에 “인물 위젯” 이라는 쓸만한 기능이 추가.

인물 위젯기능은 기본적으로 활성화 되어있으니 별도로 설정은 필요없다.

다만 필요없는 기능이라 생각하는 사람은 환경설정>기본설정에서 인물 위젯 항목을 찾아 숨기면 된다.

(인물 위젯 설정)

인물 위젯이 좋은점은 수신자가 여러명일 경우 누가 이메일을 받았는지 한눈에 볼 수 있다.

또한 발신자 또는 함께 수신한 사람을 선택하면 그 사람과 최근 주고받은 메일이나 함께한 일정 및 공유하는 구글문서등의 다양한 정보를 제공한다.

(인물 위젯)

최근 주고받은 메일은 해당월에 주고받은 메일만 보여주는것 같은데.. 차라리 최근 주고받은 메일 몇개를 보여주는게 낫지 않을까 싶다.

뭐.. 메일을 그리 자주 주고받지 않는 경우엔 최근 주고 받은 메일 목록이 없으니 불편하다능;;

이 부분은 추후에 옵션으로 선택하게 하던지 기능 개선이 필요할듯..

공식 블로그에 소개된 내용을 보면 구글계정을 적극 활용하는 사람은 아래처럼 다양한 정보를 볼 수 있다고 한다.

(인물 위젯 예시)

발신 및 수신자들과 그룹채팅도 가능한모양..

요즘 사회관계망 구축을 중시하다보니 지메일도 영향을 받는듯 싶은데 구글플러스와 맞물려서 연동만 잘되면 SNS에서 실패만하던 구글에게 꽤 큰 힘이 될 것 같다.

그런데 왜 내 주변엔 지메일 사용자가 이렇게 없는걸까.. ㅠㅠ;;

설정

트랙백

댓글

출처 : http://bahns.net/2642847

이번에는 성공적으로 웹 사이트를 만들고 운영하기 위한 9가지 역할을 소개하겠습니다.

이 그림은 Jesse James Garrett이 자신의 홈페이지에 공개한 다이어그램인데, 이전에 소개한 사용자 경험(UX)의 5가지 계층 다이어그램보다는 덜 알려진 다이어그램입니다. UX의 5가지 계층 다이어그램이 워낙 잘 만들어지긴 했지만, 이 것도 그 못지않게 잘 정리되었습니다.

기술과 사이트, 콘텐트의 3가지 역할이 조화를 이루면 좋은 사이트를 만들 수 있다는 내용인데, 이렇게 체계적으로 정리를 해보면 자기가 만드는 사이트의 강점과 약점이 한눈에 보일 것 같습니다.
 

 
[오래가는 웹기획 & UX 디자인]

웹기획 기본 이론 - 성공적인 웹사이트 구축을 위한 9가지 역할


웹사이트를 성공적으로 구축하기 위해서는 프로젝트 팀 내부에 다양한 역할이 필요한데, 사용자 경험의 측면에서 바라본 “사용자 경험의 5가지 계층”과는 약간 다른 관점에서 이들을 보기로 한다. 성공적으로 웹사이트를 구축하려면 아래와 같은 9가지 역할이 모두 제대로 수행되어야 한다.
 



     그림 1‑10 성공적인 웹사이트 구축을 위한 9가지 역할[1]
 

성공적으로 웹사이트를 구축하기 위해서는 크게 3가지 관점에서 고려할 역할들이 있다. 기술적인 역할, 사이트와 관련한 역할, 그리고 콘텐트와 관련한 역할이 그것이다. 이 역할들을 우선 전략적인 관점에서 설계하고, 그 후 전술적인 구현과 실행을 하게 된다. 웹 기획자들은 일반적으로 사이트와 콘텐트에 관련한 역할을 주로 맡아서 프로젝트에 참여하게 된다.

 
  • 사용자 리서치
    전략적인 설계의 기반은 사용자에 대한 파악에서 시작된다. 사용자 리서치를 수행하고 그 결과를 이용해서 사이트와 기술, 콘텐트 전략을 수립한다.
     
  • 프로젝트 관리
    전술적인 구현을 진행하는 과정에는 프로젝트의 시작부터 끝까지 전반적인 구현과 개발 상황을 점검하는 프로젝트 관리자가 필요하다. 기술 구현과 사이트 구현, 콘텐트 출판을 전반적으로 관리한다.
     
  • 기술 전략
    사이트 구축 이전에 어떤 기술을 사용할지 결정해야 한다. 최근에는 사이트 구축 시 다양한 기술을 사용할 수 있으며, 어떤 기술을 사용하는지에 따라 화면 구성과 기획 내용이 달라질 수 있다. 관련한 내용은 11페이지의 “웹사이트 구축
    을 위한 조직 형태와 역할”을 참고 하라.
     
  • 기술 구현
    개발자들이 기술에 대한 실제 구현을 진행한다. 기술의 복잡도가 높을 수록 개발에 전문적인 지식이 필요해지고, 테스트와 디버깅에 많은 시간과 노력을 투자해야 한다.
     
  • 사이트 전략
    사이트의 목표와 수익구조 등을 결정한다. 사용자의 요구 사항을 어떻게 사이트에 반영하고 그것을 수익에 연결할 것인지 고민한다. 사이트의 목표를 어떻게 설정하는지에 따라 이후의 전반적인 설계 방향이 결정된다.
     
  • 사이트 설계
    구축될 사이트의 구조를 설계한다. 인포메이션 아키텍처와 인터랙션 디자인 은 사이트 전략을 구조화된 설계로 만들어내는 과정이며 사이트의 뼈대를 만드는 작업이다.
     
  • 사이트 디자인[2]
    사이트 설계가 실제 사용자 경험이 되기 위해서는 각종 인터페이스와 내비게이션 및 메뉴, 인포메이션 디자인의 요소들이 비주얼 디자인의 결과물로 나와야 한다.
     
  • 콘텐트 전략
    사이트의 목적을 달성하기 위해서 사용자에게 어떤 콘텐트를 제공할 것인지 정의한다. 제공할 콘텐트의 양과 형태를 결정하고, 누가 어떻게 콘텐트를 생성할 것이며, 콘텐트를 승인하고 관리 할 주체는 누구인지 등 콘텐트와 관련한 다양한 전략적 이슈를 결정한다.
     
  • 콘텐트 출판
    콘텐트에 대한 전략을 수립한 이후에는 실제로 콘텐트를 작성해야 한다. 기초 자료를 수집, 정리하고, 원하는 형태의 글을 쓰고, 수정을 하고 승인을 거친 후 최종적으로 사용자에 내용을 전달해야 한다.


웹사이트를 구축하고 운영할 경우 지금 소개한 9가지 역할은 필수적인 것들이다. 이 중 한 두 가지 역할이 요청되는 수준보다 약하게 충족된다면, 사이트의 전반적인 품질은 나빠질 것이다.

각각의 기업에는 다른 영역보다 강점을 가진 영역이 있다. 기술적인 기반이 튼튼한 경우, 디자이너의 능력이 뛰어난 경우, 그리고 많은 필진을 보유한 경우 등 다양한 경우가 있겠지만 그것만으로는 한계가 있다. 성공적인 사이트 운영을 위해서는 강점을 가진 영역 외의 다른 역할들도 균형 있게 고려할 필요가 있다는 것을 명심해야 한다.



[1]
The Nine Pillars of Successful Web Teams - http://www.jjg.net/ia/files/pillars.pdf
[2] “사이트 디자인”이라는 용어에서 “디자인”이라는 단어는 설계의 의미가 아닌 비주얼 디자인을 의미한다.



설정

트랙백

댓글

출처 : http://cafe.naver.com/websparty


1. 모바일로 접속시 모바일 사이트 이동

 
<script type="text/javascript">
 var mobileKeyWords = new Array('iPhone', 'iPad', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson', 'Opera Mini', 'Microsoft Windows', 'Opera Modi');
 for (var word in mobileKeyWords){ 
 if (navigator.userAgent.match(mobileKeyWords[word]) != null){
 location.href = "http://모바일페이지 경로/";
 break;
 }  
 }
</script>




2. 모바일 접속과 데스크탑 접속에서 배경 이미지 다르게 하기

 <HEAD> </HEAD> 사이에

<script type="text/javascript">

  var veros = navigator.platform;
function mywin()   {

if (veros.indexOf("Mac") > -1 || veros.indexOf("Win") > -1){
 window.document.body.style.cssText = "BACKGROUND-POSITION: left top; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(a.jpg); BACKGROUND-REPEAT: no-repeat";

 }else{

 window.document.body.style.cssText = "BACKGROUND-POSITION: left top; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(b.jpg); BACKGROUND-REPEAT: no-repeat";
 }
}
</script>

넣고,  </BODY> 뒤에  <script type="text/javascript">mywin()</script> 하시면 됩니다.


 

설정

트랙백

댓글

이글은 iOS5의 새로운 모바일 사파리 것들 : 위치 : 고정, 오버플로 : 스크롤, 새로운 입력 유형 지원, 웹 노동자, ECMAScript 5라는 글에 기초하여 iOS5 Beta2 에 추가된 아래 기능들을 살펴보는 퀵 리뷰입니다.
  • 위치 : 고정
  • 오버플로 : 스크롤
  • - 웹킷 – 오버플로 – 스크롤 : 터치
  • 새로운 입력 형식 지원
  • 웹 노동자
  • ECMAScript 5

                                                                           

이 리뷰는 iOS5 beta2 기반으로 쓰여졌으며 최종 release 버전에서는 변경될 수 있습니다.

  

여전히 지원하지 않는 것들

  • 브라우저 기반 파일 업로드(input type=”file”) – Android에서는 2.2부터 지원 중
  • WebGL
  • indexedDB
  • 몇몇의 HTML5 input type 들 (color 등)
  • <datalist>

 

위치 : 고정

 2007년 아이폰이 출시된 이후로 논쟁의 중심이 되어왔던 position:fixed 가 iOS5에서 사용이 가능해졌습니다! 개발자들은 이제 웹 앱에서 손쉽게 상단과 하단 영역을 고정할 수 있습니다.

관련동영상 – https://www.youtube.com/watch?feature=player_embedded&v=JFzv3ETwfms

데모링크 – http://frontendstuff.com/css/examples/position-fixed.html

 아임IN 핫스팟 서비스 같은 경우에도 아래 그림과 같이 상단의 붉은색 바 영역을 고정하는 것에 대한 이슈가 있어 그 동안 만족할만한 해결책을 찾지 못하고 있었는데 iOS5에서 드디어 해결책을 제시해준 것 같습니다.

 아래 동영상은 아임IN 핫스팟 테스트버전에 적용하여 웹뷰에서 실제로 동작하는 모습입니다. 
[아임IN 핫스팟 position fixed 테스트 영상]

편법으로 제공하던 다른 방법들과 달리 간단한 코드로 훌륭한 퍼포먼스를 보여주고 있습니다.

 그러나 줌 확대/축소의 경우 고정된 영역부분에서 이상현상이 발생할 수 있으므로 viewport 속성에 user-scalable=no. 추가하는 것이 좋습니다.

오버플로 : 스크롤

 position:fixed 와 비슷한 문제인 overflow:scroll 도 iOS5에서 사용이 가능해졌습니다. 이전까지는 아이프레임처럼 스크롤을 따로 적용할 부분의 컨텐츠를 완전히 분리해야 했지만 더 이상 그럴 필요가 없어졌습니다. 스크롤 바가 표시되지 않아 직관적으로 스크롤이 되는 부분인지 구별하기 어려운 문제가 있지만 아이프레임이 두 손가락 스크롤인 것과 달리 한 손가락으로 스크롤이 되므로 인지하는데 큰 어려움은 없어 보입니다. 하지만 기본 스크롤과 달리 관성 스크롤을 지원하지 않는 것은 문제가 있어 보입니다.

관련동영상 – https://www.youtube.com/watch?v=KwpZ1F6dW5U&feature=player_embedded

데모링크 – http://frontendstuff.com/css/examples/position-fixed.html

관성 스크롤 문제가 해결된다면 아임IN 핫스팟의 경우 업체 상세정보 페이지의 이미지 컬렉션 부분에 적용해볼 수 있을 것 같습니다. 애플 개발자포럼에서는 overflow:scroll 이 적용된 컨텐츠 영역을 사용자에게 인지시킬 수 있는 좋은 아이디어를 찾고 있었는데 아임IN 핫스팟이 좋은 예가 될 수 있을 것 같습니다.

  

  

- 웹킷 – 오버플로 – 스크롤 : 터치 – Beta2에서 추가

 이 리뷰가 처음 iOS5 Beta1 기반으로 쓰여졌을 때 overflow:scroll에서 관성 스크롤 문제가 해결됐으면 하는 바람이 있었는데 이런 제 마음이 애플에 닿았는지 Beta2에서 바로 해결이 되어 나왔습니다. 이제 더 이상 iScroll 이나 Scrollability 같이 자바스크립트로 복잡하게 구현된 스크롤을 쓰지 않아도 간단한 CSS만으로도 iOS Native-Style 스크롤을 사용할 수 있게 되었습니다. 기존에 자바스크립트로 구현된 스크롤들은 게시물이 많아지면 많아질수록 퍼포먼스가 현저히 떨어지는 현상을 볼 수 있었는데 이번 업데이트는 webkit에서 직접 지원하는 기능이라 좋은 성능을 보여줄거라 기대됩니다.
애플에선 이번 Scroll 과 Position Fixed 패치를 위해 자사의 웹 프레임워크인 PastryKit을 도입했으며 이로 인해 변경된 사항은 아래와 같습니다.

  • 새로운 HTML5 준수 파서 도입
  • 텍스트 가로 레이아웃이 약간 변경 (소수점 단위의 정확한 글자 라운딩 처리)
  • <input type=number> 폼 필드의 검증기능 향상 (leading zeros 삭제 및 number formatting 기능 추가)
  • 터치 이벤트를 input 필드에서도 지원
  • window.onerror 를 지원

아래 동영상은 테스트 페이지를 iOS5 Beta2가 설치된 단말에서 테스트해본 영상입니다.
[- 웹킷 오버플로 - 스크롤 : 터치 테스트 영상]

새로운 입력 유형

 이제 iOS5 에서 date, datetime, month, time, range 등의 input 타입을 제공하게 되었습니다.

위의 그림들을 클릭하면 해당 데모페이지로 이동합니다. 그리고 위의 range 슬라이더를 사용하면 아래 그림과 같이 재미있는 것도 만들어볼 수 있습니다.

웹 근로자 (자바 스크립트)

 iOS3 에서 잠깐 모습을 비췄던 Web Workers가 iOS5 에서 다시 돌아왔습니다. Web Workers는 UI와 분리된 환경에서 동작하는 자바스크립트로 UI Thread와 별도로 독립적인 Thread가 생성되어 빠르게 병렬처리를 할 수 있도록 도와줍니다. 웹앱에서 로컬스토리지와 함께 사용하면 속도 개선 효과를 크게 볼 수 있을 거라 생각됩니다.

 

새로운 것들 5 ECMAScript (자바 스크립트)

 ECMAScript 5 호환 목록이 추가되었습니다.

자세한 사항은 http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-input-type-support-web-workers-ecmascript-5 중간 부분 표 참조

 

HTML5Test 점수

 HTML5 테스트 점수가 206점(iOS 4.3.3)에서 267점(iOS5 beta)으로 향상되었습니다. Form, Parsing rules, Web Workers 부분에서 점수를 더 받은 것 같습니다.

 

그밖에 새롭게 지원하는 것들

  • Inline SVG – <svg> 태그를 사용해 SVG 컨텐츠를 삽입하는 것이 가능
  • onsearch 이벤트 (자바 스크립트)
  • MathML elements recognized (based on html5test) – 수식입력이 가능
  • 캔버스 렌더링의 개선 속도 (소스)
  • UIWebView and home screen web apps now running on Nitro? (expected but not tested) – Nitro 엔진은 iOS4.3부터 지원했지만 full-screen 웹앱에선 작동하지 않는 버그가 존재했으며 iOS5는 이 점을 개선했지만 여전히 웹뷰에서는 작동하지 않고 있음
    iOS5(iPad)의 니트로 엔진 테스트(SunSpider test) 결과 (낮을수록 좋음)
    • 사파리 : 29
    • 전체 화면 webapp : 33
    • UIWebView : 97

결론

 iOS5의 브라우저 성능 향상 내용을 보면 점차 웹앱에 대한 지원을 확대하기 위한 방향으로 가는 것 같습니다. 하지만 웹앱의 경우 안드로이드도 고려해야 할 사항이므로 두 OS의 지원내용을 잘 비교하여 사용하는 것이 바람직할 것 같습니다.

설정

트랙백

댓글