project | 2008/03/16 00:03

오픈한지 3개월이 지나서야 프로젝트 정리를 하는것 같다. 전반적으로 개발에서 많은 부분을 담당하진 않았지만 워낙 사이트의 양이 방대(?)해서 이것저것 관리해야할 것이 생각보다 상당히 많았던 프로젝트였다. 진행기간만 거의 반년이였던것 같다.

상대적으로 대역폭이 좋지않은 해외런칭을 기준으로 작업하다보니 어쩔수 없는  비디오압축으로 인해 영상의 화질이 저하되는 것이 상당히 아쉬운 부분이였다.

시간이 지날수록 점점 더 웹 시장이 변화하는 것 같다.
대부분의 글로벌 기업들이 단발성 온라인 프로모션이 아닌 전체적인 큰 틀을 가지고 온라인 마케팅을 진행하는 방향으로 움직여가고 있다.

온라인이 이젠 단지 웹사이트 제작에서 그치는 것이 아니라 앞으로는 디지털 브랜딩 컨텐츠로서 보다 적극적으로 온라인을 활용할 것 같다.
적어도 오프라인 컨텐츠와  온라인 컨텐츠를 같은 맥락으로 이해해야 하는데......
세상이 너무 빨리 변한다.
과연 내가 제대로 따라가고 있는건지 모르겠다.



사용자 삽입 이미지



Samsung Mobile - Your music


Project manager : 김희선
Planning : 김희선,김상미
Visual / UI Design : 박미연,변수웅, 김기한,이정인,이지혜
Interaction Design : 김기정, 김대우,김정빈
Movie : 박상화, 이동진, 곽재도,백수진
Illustration : 김요한, 문도영

http://www.samsungmobile.com/promotion/yourmusic/

*Award

FWA site of the day (2008.1.16)


 
 
태그 : dstrict, EPILOGUE, FWA, your music
이 글의 관련글(트랙백) 주소 :: http://kimkijeung.com/trackback/110
Tracked from Motion Graphic Designer 2008/04/30 17:03
제목 : music range가 FWA 오늘의 사이트로 선정되었습니다!
삼성모바일 Music Range가 FWA 오늘의 사이트에 선정되었습니다. 플랫폼을 시작으로 4개의 폰과 DJ 사이트, DJ 콘서트 현장 진행상황을 실시간으로 모니터링하는 페이지까지.. 방대한 양의 작업이었습니다. http://www.samsungmobile.com/promotion/yourmusic/크리에이티브 커먼즈 라이센스이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다. -->
BlogIcon flying by plecher 2008/04/25 00:32 ReplyDelete
난 별로 한거 없는데.. ㅡ.ㅡ;
다른 사람들 저거 할때 난 뭘했는지 기억도 안난다.

Name 
Password 
Homepage 
  secret
Comment 
  글쓰기

project | 2008/03/15 22:49

오랜만에 포트폴리오를 정리하면서 이전 프로젝트를 한번 되뇌어 보았다. 개인블로그를 만들기 이전의 사이트들이라 따로 기록이 남아있지 않았지만 그래도 그당시 가장 힘들었고  기억이 남는 사이트가 눈에 띄었다.

CYON idea house ......... 벌써 3년전의 프로젝트다. 당시에 팝업창을 이용한 사이트가 눈에 많이 띄었지만 아마 그 당시에 가장 많은 팝업창을 띄운걸로 기억난다.
웹환경에 바뀌었는지 지금 다시 보니깐 제대로 작동이 안되는 부분이 보인다.
멋도 모르는 신입시절에 되는지 안되는지도 모르고 시작했던 프로젝트였는데....지금와서 생각해보면 모르면 겁이 없다는 말이 새삼 떠오른다... 물론 지금의 내 모습을 있게한 소중한 프로젝트라고 생각한다. 그때는 몰랐는데 지금보니 이런저런 수상을 많이 한것 같다. ^^

 

사용자 삽입 이미지

 2005.6

http://www.cyon.co.kr/good/popup/cyonidea/index.jsp   (korean)
http://www.cyon.co.kr/good/popup/cyonidea/en/index.jsp (english)


*Award

FWA site of the day (2005.8.3)

2005 New York festivals : Interactive & Alternative Media Portable Electronics
뉴욕광고제 인터랙티브 어워드 휴대용전자기기부분 동상
http://www.newyorkfestivals.com/main.taf?erube_fh=nyf&nyf.submit.WinnerDetail=true&nyf.WinnerItemID=264031

2005 London International Awards : Interactive Media Electronics Finalists
런던 국제광고제 인터랙티브부분 입선
http://www.liaawards.com/2005liaa/finalists/finalists/interactive/i10.html


*Articles
http://www.breaknews.com/new/sub_read.html?uid=28487&section=section5


 
 
태그 : cyon idea house, EPILOGUE, FWA, London International Awards, New York festivals, postvisual
이 글의 관련글(트랙백) 주소 :: http://kimkijeung.com/trackback/109
BlogIcon 검쉰 2008/06/05 18:17 ReplyDelete
와~ 완벽하게 보이진 않지만, 그래도 멋지군요!
와우!

Name 
Password 
Homepage 
  secret
Comment 
  글쓰기

web | 2008/02/11 18:22

Flash 는 별개의 runtime 프로그램으로 Google 과 같은 검색엔진을 통한 인덱싱 문제에 상당한 어려움을 가지고 있다. 이것은 일반적인 flash 사이트일 경우 검색엔진을 통한 노출이 사실상 불가능하다는 의미이다. 이는 flash 파일의 내부를 분석하여 정보를 추출하는 알고리즘이 개발되지 않는 한 이러한 이슈는 계속 될 것으로 보인다.

위 문제의 대한 완벽한 해결방안은 현재로서는 없다. 하지만 html 페이지와 같은 텍스트 기반의 인덱싱 수준을 기대하기는 어렵지만 어느 정도 대체할 만한 방법론적 접근이 이루어지고 있다.
그 중에 가장 주목할 만한 방법은 바로 flash 페이지와 함께 메인 html 컨텐츠(primary HTML)를 사용하는 방법이다. 이것은 flash를 알지 못하는 검색엔진이나 올바른 환경을 가지지 못한 사용자의 접근성에 있어서도 효율적인 방법이다.

이를 위해서는  Flash embed source 로 많이 사용하고 있는 SWFObject 와 SWFAddress가 사용될 수 있다. SWFObject 는 Javascript 를 사용하여 적절한 flash player를 확인하고  DIV tag 의 내용을 flash content로 교체하여 임베드 할 수 있게 도와주는 오픈소스 코드로써 간단한 방법으로 flash 를 임베드할 수 있도록 많은 기능들을 제공하고 있어 플래시 개발자들에게 널리 알려져있다.
그리고 SWFAddress는 flash 사이트 상에서 deep linking 을 제공하는 스크립트로 각 링크마다 고유의 페이지 url을 가질수 있으며 따라서, 웹브라우저에서 Back,Forward 기능을 사용하여 플래시사이트를 제작할 수 있다.

아래코드는 프레임기반의 간단한 네비게이션 메뉴를 SEO를 고려하여 제작한 샘플이다.

<HTML sample code>

<script type="text/javascript" src="./js/swfobject.js"></script>
<script type="text/javascript" src="./js/swfaddress.js"></script>
</head>
<body>

<!--primary content, for non Flash visitors-->
<div id="flashcontent">  
   <p><a href="index.html#/menuBtn1">menu1 content</a></p>
   <p><a href="index.html#/menuBtn2">menu2 content</a></p>
   <p><a href="index.html#/menuBtn3">menu3 content</a></p>
   <p><a href="index.html#/menuBtn4">menu4 content</a></p>
   <p><a href="index.html#/menuBtn5">menu5 content</a></p>
</div>

<script type="text/javascript">
var so= new SWFObject("seo_flash.swf","flash", "300", "50", "9", "#ffffff");
  so.write("flashcontent"); 
</script>
<noscript>
   This content requires  a browser with JavaScript enabled.
</noscript>

위코드에서 div 태그부분을 보자.
swfobject 에서 div 태그는 해당 flash player 가 존재하지 않거나  ActiveX 가 활성화되지 않을경우 화면에 보여지는 내용이다. 알맞는 환경이 갖춰졌을 경우 div 태그안의 내용은 flash 파일로 대체되는 것이다. 플래시 컨텐츠가 보인다면 이 정보는 사용자에게 보여지지 않는다. 하지만 검색엔진에는 이 정보가 노출되는 것이다.
div 태그 안에는 flash 네비게이션 각 메뉴의 링크와 텍스트 정보가 포함되어있다. 그리고 앵커를 이용한 swfaddress 코드의 사용으로 flash 내부의 각각의 메뉴에 독립적인 url 을 생성해 주었다.
따라서, div 태그를 통한 외부링크도 실제적으로 사용가능하다. 다시말해, 검색엔진의 인뎅싱 결과로 생성된 링크가 실제 swf 파일 각각의 메뉴에 일대일대응으로 링크가 가능하다는 의미이다.



<flash sample code>

function handleChange(event:SWFAddressEvent) :void{
 var path:String = event.path;
 gotoAndStop('$' + path);
 SWFAddress.setTitle(path);
}

function onClick(event:MouseEvent):void{
 var target:MovieClip=event.currentTarget as MovieClip;
 SWFAddress.setValue("/"+target.name+"/");
}

for(var i:int=1 ; i<=5 ; i++){
 var buttonClip:MovieClip=this.getChildByName("menuBtn"+i) as MovieClip;
 buttonClip.buttonMode=true;
 buttonClip.addEventListener(MouseEvent.CLICK,onClick);
}

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleChange);



위와 같은 방법으로 컨텐츠를 구성한다면 플래시 안의 컨텐츠 내용을 검색엔진에 노출할 수 있을 것이다. 하지만 위 예제는 플래시로 구현할 수 있는 가장 간단한 형태로 실제 사이트 제작시 위와같이 단일한 링크 구성으로 이루어지는 경우는 거의 없을 것이다. 대부분 사용자의 메뉴클릭사이 마다 무수히 많은 인터랙션이 존재하고 시간의 흐름에 의한 에니메이션이 존재한다.
따라서,독립적인 메뉴의 링크를 통해 접속하는 경우 기존의 해당사이트와 단절된 느낌을 지울수는 없을 것이다. 이는 플래시 개발자가 좀더 고민해 보아야 할 문제이다.

download sample files...


reference from article below
-How to SEO Flash
(http://www.jehochman.com/articles/seo-friendly-flash.shtml)
-How Google crawls my site
(http://www.google.com/support/webmasters/bin/topic.py?topic=8843&hl=en)
-A modern approach to Flash SEO
(http://blog.deconcept.com/2006/03/13/modern-approach-flash-seo/)
-SWFObject
(http://blog.deconcept.com/category/swfobject/)
-SWFAddress
(http://www.asual.com/swfaddress/)





 
 
태그 : flash, SEO, SWFAddress, SWFObject
이 글의 관련글(트랙백) 주소 :: http://kimkijeung.com/trackback/108

Name 
Password 
Homepage 
  secret
Comment 
  글쓰기

web | 2008/02/04 16:38
SEO . 일명 검색엔진최적화 로서 구축하고 있는 웹사이트를 각종검색엔진에 잘 검색되도록 환경을 마련해 주는 것이다. 어찌보면 사용자를 위한 것이 아니라 로봇(spider. 검색엔진)들의 입맛에 맞게 데이타를 정리해주는 것으로 볼 수 있다. 하지만 검색엔진에 노출이 잘 되도록 한다는 의미는 사용자에게 보다 많고 정확한 정보를 전달하기 위한 과정으로 생각할 수 있다. 따라서 궁극적으로 SEO 는 사용자에게 보다 나은 검색 환경을 제공한다고 그 의미를 확장할 수도 있을 것이다.

물론 SEO 의 본래 목적은 마케팅 목적이다. 우리나라 포털들의 검색엔진은 대부분이 영리를 목적으로 서비스를 하기 때문에 아무리 사이트 개발자들이 SEO 를 충실히 따른다 해도 검색엔진 상위에 랭크될 수 없다. 여기서 다루는 것은 비영리를 목적으로 하는 검색엔진 , 다시말해 특별한 광고료를 지불하지 않아도 검색엔진에 노출되는 google 을 대표적인 모델로 삼고 글을 쓸 것이다.
물론 구글도 sponsored link 라고 하여 유료광고가 최상단에 등장하긴하지만 그것은 논외로 하겠다.
전세계 검색엔진의 거의 60%를 점유하고 있는 구글에서만 제대로 검색된다면 다른 검색엔진에서도 같은 결과를 얻을 수 있을 것이다.

How Search Engines work
검색엔진은 스파이더(spider)라고 하는 로봇들로 하여금 전세계 웹페이지를 돌아다니게 하면서 페이지의 컨텐츠를 읽고 분석하여 데이터베이스에 저장한다. 이를 인덱싱(indexing) 라고 하는데, 스파이더가 페이지의 데이타를 제대로 읽지 못하면 그 페이지는 검색엔진 색인에서 제외되는 것이다.

스파이더가 페이지의 데이타를 분석하는 기준은 크게 다음과 같이 정리할 수 있다.
 - 해당페이지가 무엇에 관한 내용인가? (키워드의 반복횟수)
 - 페이지에서 키워드 위치 (페이지 상단에 있는것이 더 좋은 랭킹포인트를 얻을 수 있음)
 - 키워드가 어떻게 표현되어있는가? (대소문자,볼드체와 같은 스타일)
 - 해당페이지와 연결된 링크는 어떤것이며 그 링크들의 중요도는 어떠한가?


위의 사항들이 가장 기본적인 것이지만 검색엔진이 제대로 크롤링을 할 수 없는 수많은 문제점들이 웹상에는 존재한다.
그 문제점들의 대표적인 것이 안타깝게도 flash 컨텐츠 이다. flash 컨텐츠에 대한 구글의 인덱싱 수준은 상당히 실망스런 수준이다. 전세계 수많은 웹사이트를이 flash로 제작되고 있고 그에 대한 데이타의 양도 상대적으로 어머어마하게 많아지고 있다. 하지만 검색엔진은 flash 컨텐츠 내부에 있는 텍스트나 링크정보를 가져오지 못한다. 할 수 있더라도 아주 미미한 수준이다. 아마도 가까운 미래에 해결 될 사항은 아닌것 같다. flash 컨텐츠의 SEO 대해서는 다음 포스트에서 더 자세히 살펴볼 것이다.

- 구글에서는 사이트 URL 파라미터로 session ID 를 사용하는것이 스파이더가 인덱싱을 할 수 없게 만드는 것이라고  경고하고 있다.

- 그리고 너무 복잡한 사이트 구조도 문제가 있다. 단방향 사이트 폴더 구조일 수록 스파이더에게  좀더 많은 페이지를 인덱싱할 수 있는 기회를 제공하게 되는데 되도록이면 폴더깊이는 3~5정도를 유지하는것이 가장 좋다. 구글스파이더는 6개의 폴더를 넘에가게 되면 잘못된 링크를 가져오게 되거나 아예 인덱싱을 안하는 경우가 있다.

- Redirect 는 되로록이면 피하는 것이 좋은데 불가피하게 사용할 경우 반드시 301 redirect 만을 사용해야한다. 302 redirect 를 사용할 경우 페널티를 받게 되어 랭킹포인트가 떨어지게 된다.

이외에도 robot.txt 파일의 설정으로 스파이더를 아예차단하는 경우, 자바스크립트나 복잡한 테이블그리고 그래픽이미지나 이미지 맵의 경우 페이지 자체를 인덱싱하지 못하는 경우가 있다.
상당수의 html 페이지는 주요컨텐츠 정보가 나오기 전에 자바스크립트코드나 css코드들로 꽉채워져 있는 경우가 있다. 150~200 라인 안쪽으로 해당페이지의 메인 키워드정보가 나와야지만 검색엔진의 랭킹포인트를 얻을 수가 있다. 따라서 자바스크립트코드나 css코드는 되도록이면 외부파일로 만들어 연결하고 그래픽이미지는 반드시 alt 속성을 제공하여 검색엔진에게 정보를 제공해야 할 것이다.

정리하면, SEO 를 위한 컨텐츠 작성방법은
 1. 반드시 title 태그와 meta태그를 작성한다. 이것이 검색엔진의 랭킹포인트를 얻는 가장 중요한 방법중의 하나이다.
2. 적절한 키워드를 작성한다. H1 태그, 링크텍스트틀 포함하여 작성한다. 해당페이지의 링크가 많으면  많을수록 좋다. 단 링크는 정확한 정보를 제공해야할 것이다. 허위링크나 불필요한 키워드의 반복으로 인해 페널티를 부여받을경우 인덱싱에서 제외될 것이다.
3. 대체페이지의 작성. 플래시사이트의 경우 대체페이지로서 primary HTML 을 제작한다.

개인적으로 SEO 측면을 간과해서는 안된다는 점을 인지하고 있다. 하지만 이것이 주가 되어 혹시나 SEO 면에서 문제라고 할 수 있는 flash 컨텐츠를 사용하지 말자고 하는것은  주객전도라고 말하고 싶다. 사용자에게 보다 풍부한 UX 를 느끼게하는  이점이 SEO에 묻혀버리기에는 그 경험이 너무 큰 가치가 있다고 생각한다. 물론 너무 과도한 flash 컨텐츠의 사용은 지양해야겠지만 말이다.

다음 포스트에서는 flash 컨텐츠에서의  SEO 측면에 대해  자세히 살펴볼 것이다. 텍스트기반의 페이지의 인덱싱 수준은 아니지만 flash 를 사용하면서도 충분히 SEO 를 고려할 수 있는 방법론적 접근을 제시할 수 있을 것이다.


reference from article below
-How Google crawls my site
(http://www.google.com/support/webmasters/bin/topic.py?topic=8843&hl=en)
-A modern approach to Flash SEO
(http://blog.deconcept.com/2006/03/13/modern-approach-flash-seo/)


 
 
태그 : Search Engine Optimization, SEO
이 글의 관련글(트랙백) 주소 :: http://kimkijeung.com/trackback/107
BlogIcon 안세원 2008/02/11 10:19 ReplyDelete
'검색되지 않는 페이지는 무의미하다'라느 지론을 가지고 있는 제가 플래쉬를 하면서 늘 가지고 있던 딜레마를 시원하게 긁어주는 글이네요!! 좋은 글 읽고 갑니다!
BlogIcon 기정e 2008/02/11 19:47 Delete
적어도 타이틀태그와 메타태그만 신경써서 적어준다면 검색엔진이 색인이 가능할텐데 상대적으로 만들기에만 급급한 나머지 SEO측면은 소홀히 다루는 경향이있는 것 같습니다. 저역시도 마찬가지구요. 가장좋은것은 구글같은 검색엔진이 swf파일의 데이타를 인덱싱할 수 있는 방법을 개발하는 것이고, 그 이전까지는 대체페이지 방식으로 플래시의 SEO측면에서의 단점을 보완해나가야할 듯 싶습니다.

Name 
Password 
Homepage 
  secret
Comment 
  글쓰기

programming | 2007/12/03 02:13

FDT를  3.0.2 build 1001  버전으로 업데이트를 하고 나서 이클립스에 메모리가 부족하다는 메시지가 생겨났다. 이전까지 별 무리없이 쓰고 있었는데 작업을 앞두고 갑자기 먹통이 되어버리니 참 답답할 노릇이였다. 아마도 여러가지 기능이 추가되면서 필요로 하는 메모리가 늘어난듯 싶다.
찾아보니 fdt 포럼에도 이같은 문제가 제기되었는데 단순히 아래 메시지가 나오는 것과
같이 설치폴더에 있는 eclipse.ini 환경설정 파일의 메모리 최대 사용량을 늘려주라는 이야기 뿐이였다.

사용자 삽입 이미지

물론 메로리 설정을 변경하고 이상이 없다면 다행이지만 나의 경우에는 -Xmx512 로 설정할 경우
eclipse 런처가 실행조차 안되는 문제가 발생한다.
한참만에 이것이 Eclipse 3.3.1 버전의 런처가  Sun VM 을 인식못하는 버그가 있다는 사실을 알아냈다. (http://wiki.eclipse.org/FAQ_How_do_I_increase_the_permgen_size_available_to_Eclipse%3F)

따라서 이러한 문제를 해결하려면  eclipse.ini 파일을 약간 수정해야한다.
 
<original eclipse.ini>
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize   -------> remove

256m                        -------->remove
-vmargs
-Xms40m
-Xmx256m                  ------> replace -Xmx256m to -Xmx512m


 eclipse.ini 을 열면 위와 같은 코드를 볼 수 있을 것이다.
FDT3.0 을 위해 최대 사용할 메모리를 늘리려면  맨 아래줄의 -Xmx256m 부분의 숫자 부분을 512 이상으로 변경해주면 된다. (자신의 메모리 용량에 따라 512이상으로 적절하게 설정해주면된다.)

그리고 붉은색 코드부분을 모두 삭제해준다.

<revised eclipse.ini>
-showsplash
org.eclipse.platform
-vmargs
-Xms40m
-Xmx512m


위과 같이 수정해 주면 이클립스 메모리 문제를 해결할 수 있을 것이다.



 
 
태그 : eclipse 3.3.1 bug, FDT, not enough menory
이 글의 관련글(트랙백) 주소 :: http://kimkijeung.com/trackback/106
BlogIcon 땡굴이 2007/12/08 01:45 ReplyDelete
앙.. 이런 문제가 있군요. 아직 메시지는 뜨지 않았지만 혹 뜨게 된다면 아주 유용하게 처리할 수 있겠습니다. 후후.. 감사해요..
BlogIcon 기정e 2007/12/09 02:37 Delete
이 문제 때문에 지난주말을 완전히 날려먹었죠~~~^^
이젠 개발할때 메모리까지 신경써야한다는 점이 신경쓰이긴하지만 한편으론 플래시가 그만큼 커졌다는 생각이 들어요.
BlogIcon 땡굴이 2007/12/10 16:36 ReplyDelete
어흥.. 말이 씨가 된었나봐요.. 크크.. 오늘 휴가라 집에서 작업하려는데 이 메시지가 뜨더라고요. 맥이라 ini파일 찾는 법을 몰라서 힘들었지만 손쉽게 문제를 해결했네요. 호호 다시 한번 감사합니다.
BlogIcon 기정e 2007/12/10 20:01 Delete
윽..그러세요...mac용은 패키지 내용을 뜯어봐야 eclipse.ini 파일이 보여서 좀 애먹으셨을거에요..^^ mac용 경로를 올릴까 하다가 안올렸는데..아마도 이클립스 유로파 버전으로 새로 설치하시고 fdt 설치하시는 분이라면 위 메시지가 반드시 뜨는거 같아요..
암튼 해결하셨다니 다행이에요~~
흑심 품은 마니또 2007/12/12 20:53 ReplyDelete
올~ 이렇게 남들에게 도움되는 좋은 정보를 공유하고 있었군아.

역시 멋쟁이 울 마니또 하하핫 하하핫

오늘 부터 스토커 적인 너의 사생활을 파해치기 시작해따 하하핫 하하핫

담에 또 놀러오께... ^^* 3주 후에 보자

행복한 하루 보내삼.

Name 
Password 
Homepage 
  secret
Comment 
  글쓰기


[PREV] [1][2][3][4][5] ... [21] [NEXT]

 
전체 (104)
flash (73)
math&physics (4)
programming (11)
Flex2 (1)
Mac (2)
photo (0)
project (6)
주저리주저리 (3)
유용한 자료들 (1)
diary (0)
Book (1)
web (2)
«   2008/08   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31