2010년 7월 30일 금요일

[javascript] 브라우저 높이 구하기

<script>
document.writeln("브라우저의 전체 높이",screen.availHeight); //이것은 해상도의 높이에서 하단의 퀵런치 만큼의 사이즈만큼 빠지는거구요

document.writeln("브라우저의 전체 너비",screen.availWidth); //너비는 해상도와 일치할겁니다.

document.writeln("모니터의 해상도 높이 ",screen.height);

document.writeln("모니터의 해상도 너비 ",screen.width);

document.writeln("브라우저안쪽의 높이 ",document.body.clientHeight); //이것이 브라우저 안쪽의 높이구요
document.writeln("브라우저안쪽의 너비 ",document.body.clientWidth); //이것이 브라우저의 안쪽 너비죠..

document.writeln("문서 높이",document.body.scrollHeight); //이것이 문서 높이죠..
</script>

[javascript] ff에서 불투명 레이어 안먹힐 때

http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=111366

 

ff 에서 불투명 레이어 안먹힐 때.

 

.style.opacity = "0.x";

 

 

<div id="opqueLayer" style="display:block";></div>

<div class="layer_pltbody" style="display:block;" id="alertPopup01"></div>

 

<script type="text/javascript">

/* 화면전체를 덮을 영역 계산 */
oDiv = document.getElementById('opqueLayer');
oDiv.style.width="100%";
oDiv.style.height=document.body.scrollHeight;

//alert(document.body.clientHeight);
/* 불투명레이어와 알림팝업을 띄우는 함수 */
//viewAlertLayer01(알림팝업의id)  형식으로 호출하여 사용
obj_alertPop = document.getElementById('alertPopup01');//알림창객체
document.getElementById('opqueLayer').style.display = "block";//불투명레이어보이게함
var ver = getInternetExplorerVersion();
if ( ver>= 8.0 ) {
 obj_alertPop.style.top = (((document.body.clientHeight + (document.body.clientHeight/2)) - (obj_alertPop.clientHeight/2)))+300 + "px";//팝업레이어 topleft의 y좌표
obj_alertPop.style.left = ((document.body.scrollLeft + (document.body.clientWidth/2)) - (obj_alertPop.clientWidth/2))  + "px";//팝업레이어의 topleft x좌표
}

obj_alertPop.style.top = (((document.body.clientHeight + (document.body.clientHeight/2)) - (obj_alertPop.clientHeight/2))) + "px";//팝업레이어 topleft의 y좌표
obj_alertPop.style.left = ((document.body.scrollLeft + (document.body.clientWidth/2)) - (obj_alertPop.clientWidth/2))  + "px";//팝업레이어의 topleft x좌표
/*
obj_alertPop.style.top = ((document.body.scrollTop + (document.body.clientHeight/2)) - (obj_alertPop.clientHeight/2)) + "px";//팝업레이어 topleft의 y좌표
obj_alertPop.style.left = ((document.body.scrollLeft + (document.body.clientWidth/2)) - (obj_alertPop.clientWidth/2))  + "px";//팝업레이어의 topleft x좌표
*/
/* 덧글이열렸을 때 화면전체를 덮을 영역 재계산 */
oDiv = document.getElementById('opqueLayer');
oDiv.style.width="100%";
oDiv.style.height=document.body.scrollHeight;

/* 팝업내의 닫기/취소 버튼을 눌렀을 때 레이어를 닫기위해 사용하는 함수 */
function hideAlertLayer01(objName) {
 document.getElementById(objName).style.display = "none";
 document.getElementById('opqueLayer').style.display = "none";
}
</script>

 

2010년 7월 29일 목요일

2010년 6월 8일 화요일

[잡담] 검색의 비애

쇼핑클럽

'핑클'

 

검색 이후에...

 

한정식집 이름...'하련지'새로운 검색 키워드로~~

 

일부러 하련지로 한듯...

파도타기 절로 나옴.. ㅋ.

 

[잡담] 손님을..?

이런 음식점 이름도 첨본...

 

웃껴 죽..

4G다

어제 저녁부터 시작해서..

아이폰 4G 검색열풍..

오늘 새벽 1시정도에 검색해봤는데...

아침에 드디어 기사가 뜨기 시작.

네봉 실급검 1위에 등극...

 

아아... +ㅁ+ 4G 빨리 나오거라..

 

 

 


 

 


 

 

애플 아이폰4G feature 페이지 : http://www.apple.com/kr/iphone/features.html

 

Like1)

카메라 500만화소, 전/후방 카메라렌즈

3G에 전방 렌즈가 없어 아쉬웠는데 화상 통화 기능과 함께

보완된 점이라..사진좋아하는 나로써는 일단 만족.

 

Like2)

라디오 기능

이제 라됴 청취도 가능~~

 

Like3)

멀티태스킹

3G 잠깐 써봤는데...멀티태스킹이 안되서 불편한 점이라면

어플 하나 실행하고 쓰다가... 다시 메인이나 어플 검색 화면으로

돌아가서..또 골라줘야 되고

그게 매우 불편하긴했었는데..

이기능도 보완되었다니...

음..아무래두 4G가 수퍼폰이 되려는듯하다.

 

 

2010년 6월 7일 월요일

[tools] Smart Draw

Flow Chart,

Timeline

 

등등

http://www.smartdraw.com/downloads/

 

기획에 필요한 도식화 툴들을 만들 수 있는 프로그램

 

프리웨어인데 아무래두, 사용기간 제한이 있는 듯...?

 

 

 

[UI] 영상 "Hi" by Multitouch Barcelona

Hi from Multitouch Barcelona on Vimeo.



출처 : http://vimeo.com/4697849

2010년 6월 4일 금요일

[Planning] 잡생각 대마왕 훈련

[Chapter 1. 잡생각 대마왕]

 

1-1

지하철을 타고 집에 가는 길...

지하철 문옆에 달려있는 광고를 보고

모델의 몸매를 잠시 감상 한 후

메이크업 상태도 꼼꼼히 보고 ..

비판할점이 없나 찾아보고..

광고 카피나 광고 컨셉에 대해서 생각해보고

a.에이 별로네

b.어쭈 좀 괜찮은데

c.Coooool~

 

1-2

걸어다는 사람들의 뒷모습을 보면서

저 사람은 어딜 가고 잇을까?

저사람 앞모습은 어떻게 생겼을까?

저 옷과 저 가방을 든 건..

저 사람의 취향과 목소리는 어떨까 ?

저 사람이 저 길을 저렇게 걷고 있는 이유는 무엇이며

누구를 만나러 가는 것일까?

지쳤을까 혹은 생기발랄할까?

 

1-3

출퇴근길의 루트

신논현으로 갈까

학동으로 갈까

논현으로 갈까

신논현에서 골목으로 걸어갈까

신논현에서 큰길로 걸어갈까

1번째 블록에서 골목으로 꺾을까

2번째 블록에서 골목으로 꺾을까

따거운 햇살을 수첩으로 가릴까

그늘로 갈까

건물의 그림자를 찍을까 말까

나뭇잎의 그림자를 찍을까 말까

천천히 걸을까 뛸까

마주오는 사람의 얼굴을 쳐다볼까 말까

 

직장인의 하루

2010년 5월 25일 화요일

BM 방법론

출처 : http://blog.naver.com/yuki6174?Redirect=Log&logNo=10042886191

 

 

웹기획의 기본 - 사용자 경험(UX)의 5가지 계층 오래가는 웹기획& UX디자인

17) 웹기획의 기본 - 사용자 경험(UX)의 5가지 계층 오래가는 웹기획& UX디자인

이번 강좌에서는 웹 상의 사용자 경험을 5개의 계층으로 정리한 Garrett의 그림을 소개합니다.

이 그림은 웹 사이트를 구성하는 구조를 설명하기 위해서 가장 많은 사람들이 인용하는 그림으로 많은 사람들에게 인정을 받을 만큼 잘 구성된 다이어그램입니다. Garrett은 이 그림을 경험디자인의 요소(번역판)라는 책에서 상세히 설명하고 있습니다. 추가 설명이 필요하신 분들은 책을 보시면 될 것 같습니다. 다만, 책의 설명이 자세하지 못하고 다양한 측면을 개념적으로만 담고 있어서 이 한권으로 내용을 깊게 이해하기는 어렵습니다.

이 그림을 만든 Garrett은 최근에 Experience Design을 설명하는 다이어그램을 발표했는데, 그에 대해서는 이후 강좌에서 설명하도록 하겠습니다.

 


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

17) 웹기획 기본 이론 - 사용자 경험(UX)의 5가지 계층

이번에는 사용자의 경험을 5가지 계층으로 나눈 Jesse James Garrett의 그림을 소개한다. 웹 사이트가 사용자에게 전달되는 것은 아래와 같은 5가지 계층에 기반한다. 사용자는 눈에 보이는 요소들과 함께 보이지 않는 구조와 범위, 전략 등을 함께 경험하게 되며, 이런 5가지 계층이 웹 상의 사용자 경험을 만들어내게 된다. 
 

image035.PNG


그림 1-9 사용자 경험의 5가지 계층[1]

구조적인 측면에서 웹 사이트를 크게 정보(Information) 중심의 사이트와 태스크(Task) 중심의 사이트로 나눌 수 있다.

정보(Information) 중심의 사이트는 사이트의 목적이 정보 자체를 전달하는 것인 경우에 해당한다. 이 경우 사이트에서 중요한 점은 다양한 정보를 빠르고 정확하게 전달하는 것이다. 그래서 사용자들이 어떤 정보를 원하는지에 대한 요구사항을 수집하고, 정보를 어떻게 구성할지 결정하는 인포메이션 아키텍처를 설계하는 것이 중요하다. 정보의 구조를 만든 다음에는 그 정보들에 접근하는 길을 설계하는 내비게이션 디자인이 중요해진다.

태스크(Task) 중심의 사이트는 정보의 전달보다는 특정한 업무를 처리하는 것이 중요한 사이트이다. 정보 중심의 사이트는 각각의 정보들을 이용해서 이해하기 쉬운 페이지를 만들고 그 페이지를 연결하는 것이 중요한 반면, 태스크 중심의 사이트는 하나의 페이지에서 다양한 인터랙션이 일어나므로 그런 인터랙션을 어떻게 효율적이고 사용하기 쉽게 설계할 것인지가 중요하다. 또한, 정보 중심의 사이트에서는 사이트의 콘텐트에 대한 요구사항이 중요하지만, 태스크 중심의 사이트에서는 사용자가 어떤 기능을 필요로 하며 설계된 기능을 자연스럽게 사용할 수 있는지 조사하는 것이 중요하다.

이 그림에서 아래에 있는 전략과 범위 계층은 추상적이고 개념적인 정의들을 내리는 계층이고, 그 위에 있는 구조, 윤곽, 표면 계층으로 갈수록 점점 더 구체적인 실체를 만드는 계층이다. 표면 계층에서 이루어지는 비주얼 디자인은 이전의 설계 단계에서 정의된 내용을 디자이너가 시각적으로 디자인을 하는 과정을 이야기한다. 웹사이트의 사용자 경험은 이런 5가지의 계층을 거쳐서 설계되고 만들어진다.

사용자 경험 계층 그림은 이전에 소개한 웹사이트의 3가지 목적과도 연관이 될 수 있다. 웹사이트의 3가지 목적으로 소개한 정보 전달, 작업 처리, 프로모션 중에 사이트를 설계하는 구조적인 측면을 강조할 경우 정보 전달과 작업 처리를 기준으로 사이트를 나눌 수 있다. 정보 전달 목적은 정보 중심의 웹 사이트와 연관되고, 작업 처리 목적은 태스크 중심의 웹 애플리케이션과 연관된다.
 

사용자 경험의 5가지 계층

사용자 경험의 5가지 계층에서 정의, 설계 되는 내용들은 다음과 같다.
 

  • 표면 – 이미지와 텍스트 등 전체 요소 배치, 시각적 마무리
  • 윤곽 – 버튼과, 탭, 이미지, 텍스트 블록에 대한 배치
  • 구조 – 사이트의 추상적인 형태를 정의
  • 범위 – 사이트에서 제공할 기능과 태스크, 콘텐트의 범위를 정의
  • 전략 – 사이트에서 사업자와 사용자가 추구하는 목표 정의


각 계층별로 정의되고 설계되는 내용을 좀 더 자세히 살펴보기로 하자. 웹 상의 사용자 경험은 태스크 중심 사이트와 정보 중심 사이트에서 차이가 난다. 전략 계층에서 고려되는 사용자 요구와 사이트 목표는 사이트 형태와 상관없이 공통적으로 중요한 요소들이다. 이후의 범위, 구조와 윤곽 계층에서는 사이트의 형태에 따라 중요한 요소들에 차이가 생긴다. 태스크 중심의 사이트는 기능에 대한 요구사항과 인터랙션 디자인, 그리고 인터페이스 디자인이 더 중요하고, 정보 중심의 사이트는 그보다 콘텐트 요구사항, 인포메이션 아키텍처, 그리고 내비게이션 디자인을 중요하게 고려해야 한다.


하나의 사이트를 만들기 위해서는 그림에서 소개한 5가지 계층의 다양한 요소들을 잘 조화시켜야 한다. 일반적인 사이트들은 전달할 정보와 수행할 태스크가 혼합된 구조를 가지게 되므로 설계시에도 어느 한쪽만을 집중적으로 고려해서는 안된다. 그림에서 보이는 특정 영역에 지나치게 치우치지 않고 전체적으로 잘 조화될 수 있게 설계하는 것이 중요하다.

이렇게 각각의 계층에서 설계되는 요소들을 간단하게 아래와 같이 정리했다.

계층

태스크 중심 사이트
(웹 애플리케이션)

정보 중심 사이트
(웹 사이트)

5. 표면

비주얼 디자인

인터페이스 요소들의 시각적인 배치
주요 요소에 대한 시각적인 강조로 시선 유도, 통일성과 일관성 유지

4. 윤곽

인터페이스 디자인

인터페이스 요소들과 GUI 구성 요소들을 배치
버튼, 선택, 입력필드 등의 인터페이스 요소에 대한 일관된 사용

내비게이션 디자인

정보를 편리하게 찾을 수 있게 인터페이스 요소들을 배치
전역, 지역, 보조 내비게이션 설계
사이트 길 찾기의 기본 구조 제공

인포메이션 디자인

사용자의 이해를 위해 콘텐트 요소들을 배치
의미에 맞게 콘텐트 그룹화. 사용자들의 사고방식을 배치에 반영

3. 구조

인터랙션 디자인

기능 요구사항의 세부 태스크에 대한 동작 설계
태스크를 수행하고 완료하는 과정에 대한 패턴과 순서 정의

인포메이션 아키텍처

원하는 콘텐트를 편리하게 이용할 수 있게 콘텐트 공간을 설계
정보를 전달하는 과정에 관계되는 패턴과 순서 정의

2. 범위

기능 요구사항

사용자 요구사항 충족을 위해서 필요한 기능 범위 정의
각각의 기능에 대한 세부 태스크 정의,
태스크에 대한 세부 스펙 정리

콘텐트 요구사항

사용자 요구사항 충족을 위해서 필요한 콘텐트 요구사항 범위 정의
제공할 콘텐트 범위, 형태와 작성 프로세스 및 관리 주체 등을 정의

1. 전략

사용자 요구

사이트에서 사용자가 원하는 가치를 정의
사용자 리서치와 자료 분석을 통해 사용자의 요구사항 파악

사이트 목표

사이트에서 추구하는 사업적인 가치와 전략적인 목표를 정의
사이트의 성격, 제공할 경험의 형태, 수익구조 등을 정의

 

 Garrett의 이 그림은 웹 상의 사용자 경험(UX)을 눈에 보이는 표면적인 부분까지 정의한 그림이다. 사용자 경험(User Experience)을 좀 더 넓은 의미에서 정의한 내용은 이후 소개될 UX 디자인 관련 내용을 참고하기 바란다.


 

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

 

2010년 5월 19일 수요일

좋은 제안서나 기획서를 쓰기 위해..

좋은 제안서나 기획서를 쓰기 위해서는 많은 시간과 노력이 필요합니다. 특히, 마케팅, 광고, 온라인,브랜드 등 모든 기획자들이 공통으로 갖추어야 될 요건 중 하나가 바로 분석력과 자신의 아이디어를 논리적으로 표현할 수 있는 기획력이 중요합니다.

먼저 좋은 자료를 통해서 이러한 지식을 얻을 수 있는 데 개인적인 견해로 가장 빠른 방법은 역시 기존 기획자들이 현직에서 종사하면서 작성한 기획서 또는 제안서를 많이 보는 것이 가장 좋을 것 같습니다.

사이트를 하나 추천해 드리자면 플랜업 추천합니다.

다양한 사업기획서와 제안서 들을 참고하실수 있을겁니다.
아무리 좋은 아이디어가 있어도 그것을 기획서나 제안서로 잘 정리하지 못한다면 아무 소용이 없죠.

가시면 도움이 되리라 봅니다.

만약 혼자서 제안서를 작성하기가 어렵다면 플랜업 다이렉트 문서대행 서비스라는 것도 있습니다.

현직에 종사중이거나 프리랜서로 사업기획서나 제안서 등의 작성 대행을 연결해주고 하는 곳인데요

 

출처 : http://kin.naver.com/qna/detail.nhn?d1id=4&dirId=40401&docId=35258808&qb=7KCc7JWI7ISc&enc=utf8&section=kin&rank=4&sort=0&spq=1