dstrict 에 해당하는 글5 개
2008/03/16   Project epilogue : Your music (1)
2007/05/18   Project epilogue : Ultra music F300 (7)
2007/01/22   Project epilogue : Samsung ICES2007 (4)
2006/10/18   Project epilogue : Veracruz
2006/09/25   Project epilogue :C406

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 | 2007/05/18 11:52

2달전에 오픈했어야할 사이트를 5월이 되서야 오픈하기 시작했다.
영상에 쓰려고한 beyonce 음악을 못 쓰는 바람에 발생하게 된 추가적인 사운드 작업으로 인한 딜레이..... 10개국 이상오픈으로 각국 언어변환 및 수많은 수정사항으로 인해 사이트 제작 시간보다 수정사항으로 인한 시간이 훨씬 오래 걸린 프로젝트였다. 아직도 서비스 되어야할 국가가 남아 있어서 6월은 되어야 완전히 끝날듯 싶다.....

플래시에서의 주요 Interaction 으로는 flip motion 으로 스크린이 전환되는 점이다. 제품 컨셉과도 어느정도 부합되는 면이 있어 사이트의 key motion 으로 적용되었다.
이걸 위해 sandy(http://sandy.media-box.net/blog) 라는 오픈 소스 flash 3D API 를 사용하였다.

플래시 IDE 상에서는 일반적으로 오브젝트를 변형 시킬때 어파인 변형(affine transformation)밖에 할 수 없다. sandy 는 이런 제한 사항을 해결해 주는데 이미지 데이타를 이용하여 이미지 왜곡이 가능하다.

해외사이트에 종종 이것을 활용한 사이트가 선보이긴 했지만 대부분의 경우 이미지 변형 정도로 그쳐서 구현한 노력에 비해 효과가 아쉬운 점이 있었다.
또한 실제 이미지와 변형과정에서 생기는 에니메이션의 차이가 너무 눈에 띄는 문제점도 가지고 있었다.
이번 프로젝트에서는 이런 기존의 사이트의 아쉬운 점들을 보완하고 좀더 다이나믹한 flip motion을구현하고자 여러가지 테스트를 수행했다. 최대한 실제 영상의 프레임과 이미지 변환과정 단계에서의 어색함을 없애는데 주력했다.

물론 너무 낮은 사양(?) 의 pc 에서는 끊기는 느낌이 없지않아 있지만....어느정도 사양이 되는 pc에서 확인했을때는 상당히 부드러운 느낌의 flip motion 을 보였다. 또한 이번엔 Subversion 을 이용하여 프로젝트를 진행하였는데 수많은 수정사항과 각국별 다른 버전의 소스들을 관리하는데 있어서 기대이상의 효과를 본것 같다.

이전까지는 작업파일을 백업을할때 그냥 압축파일을 만들어서 이용하였다. 그럴경우 작업폴더에 나중에 수많은 백업파일이 생길뿐더러 정확한 파일 정보를 알 수 없었다.
Subversion 은 소스파일을 저장소에서 버전별로 관리해주고 필요할때 저장했던 로그를 보고 언제든지 원하는 버전의 소스를 다운받아 사용할 수 있다.

삼성모바일쪽의 서버속도가 너무 느린 관계로 로딩에 좀 시간이 걸리는 것 같다.
적어도 속도가 50KB/sec 정도만 되었어도 볼 수 있을 정도 였는데 그 정도도 안나온다....
그렇다고 퀄리티를 다운시킬수도 없는 노릇이고.....
삼성모바일쪽 서버가 업그레이드 되지 않는 이상 이러한 문제는 계속될 것 같다.




사용자 삽입 이미지
사용자 삽입 이미지


Samsung mobile Ultra music F300

Project manager : 김희선
Planning : 김희선, 조주연
Visual / UI Design : 박미연
Interaction Design : 김기정, 김대우
Movie : 박상화, 이동진, 김요한, 곽재도

사이트 보기(영문버전)


 
 
태그 : dstrict, EPILOGUE, f300, ultra music
이 글의 관련글(트랙백) 주소 :: http://kimkijeung.com/trackback/97
Tracked from Motion Graphic Designer 2007/07/16 17:46
제목 : Ultra Music F300 Promo SiteMovie
처음잡은 메인메인이라고하기에는 너무 많은 도움을 받아서내가 메인이라기보다.디스트릭트 팀전체가 메인이었다.실력을 더키우자..메인으로써 잘 할수있을만큼 사이트보기
BlogIcon 땡굴이 2007/05/18 17:15 ReplyDelete
와우 멋진 작품이네요. 핸드폰도 제가 노리고 있는 모델인데 우리나라에서 출시가 될지 ^^.
BlogIcon 기정e 2007/05/19 01:17 ReplyDelete
아마도 제일 마지막으로 출시할듯 싶어요....이상하게 우리나라 제품인데 왜 먼저 판매를 안하는 건지 참.....암튼 땡굴님 오랜만이네요~~^^
BlogIcon jiigi(김경환) 2007/06/18 10:53 ReplyDelete
오우
바로 이거였군요.
고생많으혔습니다.!
BlogIcon MotionDJ 2007/07/16 17:51 ReplyDelete
ㅋㅋㅋ 김재도..;;;ㅋㅋㅋ
ㄴㄴ
곽재도;;ㅋㅋ
BlogIcon 기정e 2007/07/16 19:38 Delete
이름이 왜 바뀐거지?...으흐흐
수정완료!!!!!
BlogIcon Jd.K 2007/12/06 12:54 Delete
지켜보고있어요 기정님...
BlogIcon 기정e 2007/12/06 23:47 Delete
윽- 무섭네

Name 
Password 
Homepage 
  secret
Comment 
  글쓰기

project | 2007/01/22 09:50

정말 고생 많이 했던 프로젝트가 끝났다.. 지금까지 진행했던 프로젝트 중에서 가장 힘들고 어려웠던 프로젝트였던거 같다. 무었보다도 디자인에서 인터랙션 구현을 어떤식으로 할지 확실히 눈에 들어오지 않았던 점이 가장 난감한 상황이였던거 같다. 보통의 프로젝트의 경우 대충은 어느정도 이렇게 저렇게 하면 되겠다 하는 생각이 들었지만, 이번에는......뭔가 딱 들어맞게 생각이 드는게 없었다.


또한 일반적이 웹사이트가 아닌 블로그 형태의 데이타를 이용해 로컬데이터와 같이 다루는 면도 쉽지만은 않았다. 사이트 구조설계 및  최적화 그리고 그에 맞는 부드러운 인터랙션 모션을 구현하는데 있어서도 가장 많은 시간을 할애해서 작업을 진행하였다.
특히 고민을 많이 했던 부분은 사이트 구조설계였는데 이번 프로젝트만을 위해 새로 구성한 Class 파일만도 50여개나 달했다. 산술적으로 계산해 본결과 코딩라인만 해도.....10000 라인은 족히 될듯싶다....RIA 가 아닌 웹사이트에서 이정도 양은 정말....내가 생각해도 많다...
물론 다음 프로젝트가 현재 사이트에서 디자인만 바뀐다는 계획을 염두에 두고 체계적으로 개발을 했기 때문에 코딩라인이 자연스럽게 늘어날수는 있다고는 생각했는데 이정도일 줄은 몰랐다.

사용자 삽입 이미지사용자 삽입 이미지


최대한 코드 재사용성을 중심으로 코딩을 하였고 상속과 인터페이스를 적극활용하여 지금까지의 프로젝트 중에서 가장 구조적으로 완성도 있게 작업된거 같다.

또한 싱글턴, Command 패턴, Iterator , Factory method 패턴 과 같은 다양한 디자인 패턴(Design Pattern)도 상당히 많이 활용하였는데 책에서 볼때와 실무에서 적용할때와는 좀 다른 면이 있는거 같다. 한가지 패턴이 사용되었다기 보다는 여러가지 패턴이 조합되어 새로운 방식의 패턴을 활용했던거 같다. 늘 사용하면서 느끼는 거지만 일반 application 과는 달리 플래시는 Timeline 기반의 프로그램이다. 다시말해 사용자의 단한번의 마우스 클릭으로 바로바로 화면이 구성되는것 보다 어떤 인터랙션을 통해 스크립트 에니메이션이 가능하다는 말이다. 이런 점이 플래시의 가장 큰 장점일 수도 있고 개발자의 입장에서는 어려움이 될수도 있다고 생각한다.
따라서 일반적인 프록그램밍 언어에서 사용하는 패턴들을 완전히 똑같이 적용하는것에 있어서 좀 고민할 여지가 있었다.

사용자 삽입 이미지

사용자 삽입 이미지



* Samsung Exhibition ICES2007 Microsite

사이트 보기



사용자 삽입 이미지
Art Director : 최은석
Project manager : 김희선
Planning : 김희선, 조주연
Visual / UI Design : 박미연, 이지혜
Interaction Design : 김기정, 김대우


* Award

iF communication design award 2007  winner
http://www.ifdesign.de/entry_details_e.html?offset=3&sprache=1&award_id=132&beitrag_id=33209
 
 
태그 : dstrict, EPILOGUE, ices, iF design award, project, Samsung
이 글의 관련글(트랙백) 주소 :: http://kimkijeung.com/trackback/80
kylekaturn 2007/02/06 19:45 ReplyDelete
정말 수고 많으셨어요...
보람찬 프로젝트 였던것 같군요
보는 제 가슴이 다 두근두근하네요
BlogIcon inmingun 2007/04/24 15:04 ReplyDelete
아 정말 인터렉션입니다. ^^
BlogIcon 기정e 2007/04/26 01:04 Delete
아이디가 눈에 익으신분 같은데...^^
bonghwang 2007/07/10 17:07 ReplyDelete
우와..정말 멋지따.

Name 
Password 
Homepage 
  secret
Comment 
  글쓰기

project | 2006/10/18 15:52
* 로딩타임을 최소화한 transition movie로 각 컨텐츠의 도입부를 구성
--> 최소 80KB/S 의 전송속도 이상에서 로딩없는 무비를 볼수 있게 하였지만 영상에서의 사운드 유무에 따라 로딩에서의 문제점이 발생하였다. 사운드가 함께 임베드된 flv 파일은 스트리밍 사운드의 사용으로 일정량(약 20%) 을 로딩해야지만 플레이가 가능했다. 따라서 사운드과 비디오를 분리하여 사운드를 최대한 압축하여 sync를 event 사운드로 설정하고 사용하여 해결.

* 네트워크 지연률 --> 네트워크의 반응속도가 느려지게 되면 로딩없는 transition 무비 구성 자체가 불가능하게 된다. 로딩타임이 생긴다는 것이 아니라 서버와의 반응이 완료될때까지의 시간 지연으로 인해 딜레이가 생기게 된다.
영상자체를 transition movie 로 구성할 경우 반드시 체크해야할 사항이다.

* 영상 Layer 위치와 performance 관계 ---> 영상재생시 하위 Layer 에 복잡한 이미지가 있을경우 performance 가 올라가게 된다. 알파 채널을 사용한 영상도 아닌데 이러현상이 발생한다. 반드시 wmode 를 opaque 로 설정하거나 영상재생시 반드시 하위 Layer 에 있는 객체들은 모두 clear 하고 사용하는것이 원할한 영상재생에 있어 도움이 될것이다.

추석연휴도 반납한체 작업한 사이트가 드디어 끝났다.
사흘 밤낮으로 일한 모든 피곤이 별탈없이 사이트를 오픈 했다는 것만으로도 풀리는것 같다.
트래픽이 높아서 그런지 현대쪽의 네트워크가 불안정해 바로바로 사이트가 접속되지 않아 좀 아쉽다.

크기가 큰 동영상과 큰 이미지가 스크롤되는 형태라서 사이트 최적화에 많은 신경을 썼지만 그래도 모든 유저가 보기엔 무리일듯 싶다.



현대자동차 LUV 베라크루즈 온라인 카탈로그
http://ad.hyundai-motor.com/catalog/veracruz/index.html


*Award

FWA  site of the day (2006.11.13)

코리아 디자인 어워드 2006  디지털 미디어 부분
http://news.mk.co.kr/newsRead.php?no=554678&year=2006
http://mdesign.design.co.kr/in_magazine/sub.html?at=view&p_no=1&info_id=39376&c_id=00010001


 
 
태그 : dstrict, EPILOGUE, FWA, project, veracruz
이 글의 관련글(트랙백) 주소 :: http://kimkijeung.com/trackback/66
Tracked from Motion Graphic Designer 2007/07/16 17:52
제목 : [2006.10 ~ 2006. 11] 현대 베라크루즈(Veracruz) e-Catalog
현대 베라크루즈(Veracruz) e-Catalog URL : http://ad.hyundai-motor.com/catalog/veracruz (현대 자동차 공식 사이트내 링크) Overview현대 자동차에서 새로 출시하는 LUV 베라크루즈의 e-Catalog (런칭 사이트가 아닌 제품과 지속적 제품 프로모션을 위한 Interactive Contents) 를 제작했다부감샷 촬영을 통한 원페이지 구성과 제품메뉴별 Interactive Video를 제작..

Name 
Password 
Homepage 
  secret
Comment 
  글쓰기

project | 2006/09/25 14:57
1.Filereference --> browse 메소드 부분 file extention 설정부분에서 SP2 설치시에만 제대로 파일 필터링이 된다.
아무리 보여지는 파일 확장자를 제한하더라도 모든 파일 보이게 되는 문제
반드시 파일 확장자를 체크해서 필터링 되지 않는 경우를 생각해야함.

2.JSP 에서 Flash 메서드 호출 ---> 굳이 watch 오브젝트를 통해 감시하지 않더라도 ExternalInterface를 이용해
플래시 외부에서 플래시 내부의 메서드를 파라미터와 함께 호출할수 있다.
(단, 보안상 allowScriptAccess 의 값을 Always 로 설정해야만 Local 상에서도 제대로 작동)

3.Singleton pattern--> 싱글턴 사용으로 생성한 인스턴스 참조는 쉽지만 전역속성의 특징으로 플래시 파일을
unload 한다해도 메모리에 그대로 남아 있게 된다. 따라서 반드시 초기화가 필요한
인스턴스 생성인지 아닌지를 구분하여 사용해야 한다.

4.다국어 처리에 있어서 인코딩 문제 해결--> URL 인코딩을 통한 영문및 숫자 제외한 문자 처리 철저히해야함.


flash 자체에서 사진 업로드 기능을 구현, 다국어 환경에서의 플래시 인코딩 처리 문제 등등
나름대로 많은 새로운 것을 시도해 보고 몰랐던 내용을 안것같다.


멕시코 http://mx.samsungmobile.com/promotion/c406/index.jsp
칠레 http://cl.samsungmobile.com/promotion/c406/index.jsp

 
 
태그 : dstrict, EPILOGUE, project
이 글의 관련글(트랙백) 주소 :: http://kimkijeung.com/trackback/59

Name 
Password 
Homepage 
  secret
Comment 
  글쓰기


[PREV] [1] [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/11   »
            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