





모자이크의 경우는 제품으로 모자이크를 구성하는 방식이다.
원래는 이미지에 각각의 포인트를 잡아서 그 포인트의 색상값에 따라서 제품별로 가장 근사한 색상을 가진 제품을 이미지의 위치로 이동을 시켜로 했었지만 제품의 업데이트의 용이성과 기획전의 성격을 가지는 서비스를 제공하기 위해서는 많은 양의 썸네일을 로드해 올수는 없는 노릇이었다.
그리고 개발쪽에서도 너무 많은 통신은 서버자체에 무리를 줄수 있다는 의견이 있었기 때문에 지금과 같은 형태로 구현이 되었다.
기본적으로 최대 30개의 제품이미지와 제품 정보를 xml로 받아서 제품의 이미지를 뿌리면서 각 이미지에
각각의 포인트에 색상에 맞추어서 이미지의 색상을 변경해 주는 식으로 모자이크가 구현이 된다.
이 모자이크는 기획전용이 있으며 사용자가 자신이 원하는 이미지를 업로드해서 모자이크를 구현할수도 있으며 기획전의 모자이크 또한 블로그로 가져가는 것이 가능하게 구현이 되어있다.
'work'에 해당되는 글 16건
- [2008/02/28] 11st 모자이크30
- [2008/02/28] 나만의 모자이크 만들기~
- [2008/02/28] 11st.co.kr 입체검색
- [2007/11/09] 메이플걸
- [2007/11/09] i - station T-43
- [2007/11/08] sgh-x650
- [2006/12/02] 라네즈 오픈 유어 아이즈... 이벤트 프로모션
- [2006/07/06] lg전자 브랜드 사이트
- [2006/06/19] mtv 메인
- [2006/06/15] 야후 미디어...오픈
초기 제안부터 해서 실구축에서의 기획의 및 클라이언트와 의견조율등 플래쉬에 관한 전반에 대한걸 수행을 했다. 정말이지 어찌보며 코드를 짜내면서 보내는 시간 보다 회의나 기타 업무 외적인 부분에 쏟아 부은 시간이 더 많다고 느껴질 정도이다.
우선은 11st의 특징인 즐거운 쇼핑과 , 빠른 쇼핑 이 거대한 두개의 카테고리중 즐거운 쇼핑을 구현하였고 이 즐거운 쇼핑쪽에 들어가는 5가지의 서비의 플래쉬 구축의 전반에 대해서 수행을 했다 그중 내가 실제 작업을 한부분은 2가지의 서비스 이다.
입체검색과 모자이크30을 내가 실제 제작을 하였고 나머지 i,m 코디 , 비교쇼핑, t-map 등은 초기 플래쉬 시안 제작과 기획에 참여를 하였다.
마지막으로 버츄얼 카테고리 보기또한 제작은 내가 하였다.
입체검색
http://www.11st.co.kr
즐거운 검색의 메인에서 검색을 하시면 색다른 검색을 할수 있습니다..^^





제작은 2.0 클래스 기반으로 제작을 하였다
초기 기획때 디자이너와 상의를 하면서 검색에 대한 모션을 제작을 하면서도 검색API와의 연동이 어떤식으로 될지에 대해서 검색API개발자와는 애기를 해볼 기회가 없었기에 초기 제작때는 막연함 감이 많아서 힘든 부분이 많았다.
검색자에서 파생되는 기능들인 제검색,결과내 재검색,속성검색,재솔트,거기에 백으로 이동해야 하는 기능
부가적으로 UI적인 측면에서는 휠을 이용해서 한계의 카테고리에 한에서 페이지의 갱신 없이 카테고리에 가지고있는 제품을 다 보여주기 위해서 기능적의로나 디자인적으로 양쪽다 잡아내기 위해서 너무나 코드가 방대해진면도 없지않아 있고 추가적으로 ui를 html베이스의 ui또한 플래쉬에서 구현하는것이 어려우면서도 재미있었지만 힘든작업이기도 했다.
http://girl.maplestory.nexon.com




회사를 옮기고 첫 작업인지라 나 나름대로으 실력도 보여줘야 했었고 또 팀원들과 처음으로 손발을 맞추는
프로젝트라 힘에 겨웠던 프로젝트다.
또한 커뮤니케이션이 얼마나 중요한 프로젝트인지 나에게 알게해준 프로젝트였다.. (밝힐순 없지만 여로모로 힘들었던...기억이..)
일단 메이플 걸이라는 비디오 자키들의 프로모션사이트 였다
프로모션 사이트이고 클라이언트의 요청은 색다른 UI형태를 보여달라는거 였다
여기서 부터 쉽지 않아지는데 일단 키보드키를 이용해서 다른 서브페이지로 이동이 가능해야 한다 또한
버튼을 클릭해서나 기존의 네비게이션 UI를 따라서도 작동을 해야 했다.








디자인의 초기 컨셉자체가 많은 기능을 가지고 있다는걸 표현하는게 중심이 되었다...
물론 제작된 홈페이지에는 그게 포함이 안되있다 단.... 그결과 엄청나게 많은 서브페이지에 페이지상에서 변환이 많아 졌을 뿐이다 UI적으로 많은 수의 아이콘들을 움직이게 하고 그 아이콘에서 페이지가 생성되는 쪽으로 가게 하고 싶었지만 아쉽게도 아직은 커뮤니케이션 스킬이 떨어지는건지 내 의견을 반영하는 것에는 무리 였나 보다..;;;; 다음부터는 좀더 노력해서 내 의견이 적용이 될수 있는 방향으로 가는걸 생각해 봐야 겠다.
일단 기술적으로는 해외 외국사이트의 트랜지션 효과를 따라했다..노골적으로...;;; 그래서 이 트랜지션 효과를 쓰기위해서는 다음 파일의 로딩이 완료되어야 하며 초기 보고있는 서브페이지의 플레이 상태를 체크 해서 현재보고있는 페이지의 솔팅이 완료되기 전에는 다음 페이지로 이동할수 없게 하는 나름대로 머리를 굴려서 제작이 되었다고나 할까...음... 머 특별한게 없는 마이크로 사이트였다...
뒷단에서는 나름대로 여러가지의 경우의 수를 산정해서 했지만 나의 노력은 별로 보이지 못했다고나 할까
이것도 아쉬움이 많았던 프로젝트...ㅎㅎ
http://khg790.dothome.co.kr/portfolio/lanege
정말 힘겹게 힘겹게 오픈시키고 안정화 시킨 사이트....
플래쉬 쪽의 전반적인 제어나 게시판 온라인 폴 기타 무비의 제어및 동영상 제어를 당담했다.(써놓고 보니 꽤나 되는군...-_-;;;;;)
게시판에서의 생각지 못한 에러나 다수의 FLV를 컨트롤 해야 하며 용량이 큰 FLV를 사용자가 최대한 쾌적한 환경에서 이벤트에 참여할수 있게 하기 위해서 생각 한것이 각 신별로 swf 와 그 씬에 들어가게 될 FLV들을 미리 다운 로드 받아 놓는 방식을 사용하기로 했다.
예상대로 진행 되는 무비들을 사용자가 전부 다 봐주신다면 네트워크가 원활한 곳에서는 무리 없이 진행이 가능했다 하지만..... 네트워크가 원할하지 못하거나 스킵으로 넘기는 경우에는 정말 생각지 못한 버그들이 수업이 나오기 시작했다 물론 게시판에서의 버그도 함께....;;;;
그 와중에서도 FLV를 컨트롤 하면서 갑자기 멈추는 현상이 발생한 것이다.
보통은 FLV를 외부에서 가져오지 않고 직접 프레임에 삽입 해서 사용했거나 단 한개나 두개정도의 FLV를 사용했기에 전혀 격어보지 못한 일이 발생을 한것이다...
급박하게 돌아가는 프로모션 사이트와 일정때문에 우여곡절 끝에 버그를 잡아 내고 오픈을 시켰다.
이 FLV가 멈추는 것은 stopAllSounds 의 사운드 메소드를 사용하면은 flv들이 죄다 멈처버린다는 것이다.
또한 계산하지 못했던 부분중에 하나인 사용자의 컴퓨터에 따라 swf프레임 플레이 되는것과 FLV의 속도가 달랐다는 것이다....^^;;;;
이걸 미치 깨닫지 못하다가 타이밍이 달라지는 문제를 잡기 위해서 죄다 큐포인트를 찍어서 무비클립을 이용해서 컨트롤을 하였다.
아무튼 프로젝트를 진행 하면서도 하나씩 하나씩 터져주는 문제들 때문에 힘이 들었지만 정말이지 한참은 기억에 남게될 프로젝트 일것이다.


온라인 풀의 형식으로 메뉴 자체를 동영상을 사용했다.

정말 단시간에 뚝딱 만들어진 게시판(프르젝트 일정의로 보면 많은 시간을 투자한샘..)
이 게시판에 인풋 텍스트를 마스크로 쒸워 놨더니 서버를 타는지....인풋 텍스트가 사라져 버렸다.....
이부분의 버그를 잡는데에도 많은 시간을 투자 했어야 했다....;;;
텍스트의 애니메이션은 랜덤값과 프레임을 이용해서 애니메이션이 된다.



사용자 시물레이션 정말이지 몇번이고 작업을 해왔었는데 이걸 작업할때는 이상하게 생각이 나질않아 다른 방식으로 제어를 하다가 차장님의 아이디어로 바꾼 부분이다....처음 부터 움직이는 영역을 프레임으로 제어를 할것을....가끔 바보같은 짓을 한다...><
프로젝트를 진행할 당시에는 잘 몰랐지만...이렇게 정리를 하고 나니 무지 많은걸 했다는 생각이 든다....^^;;;
게시판,온라인 풀,FLV컨트롤,플래쉬 무비의 전반적인 제어,사용자 시물레이션 등등....
많은 사람들이 함께 고생했고 나또한 무지 고생했던 프로젝트...
이제는 이벤트 기간동안 잘 마무리 됐으면 좋겠다.
엘지전자의 리뉴얼을 하게 되면서 후반부에 프로젝트에 참여하게 되면서 주로 액션스크립트 관련해서 작업을 참여하게 되었다.
그러면서 모션관련 해서 작업을하게된 사이트이다.
전체적으로 후반부에 참여를 하게 되면 기존의 메인이 되는 모션의 분위기를 깨지 않는 부분에 주력을 하면서 작업을 진행하게 되었다.




너무나 힘이들었던 작업....엠티비 사이트의 메인에 들어가는 플래쉬를 작업을 하였다.
처음에 기획에서 작업을 들어갔던 부분에서 오픈할때 들어간 결과물이 너무나 달랐다...-_-;;;;
기획을 대체 얼마나 바뀐것인지 사실 메인에 들어가는 플래시가 어려워 봐야 얼마나 어려울까 생각을 하실수도 있겠지만....저게 장난이 아니었다. 저 플래시에 들어가는 기능을 나열해 보자면...일단.
1. xml연동이 이루어지며 총 5개의 메뉴에서 각각 카테고리가 2개씩(1개만 들어갈수도 있다..-_-;; 문제가 더 커짐..)들어간다.
2. 시간이 지나면 노출을 하고 싶은 카테고리의 메인을 보여준다.(노출을 할것인지 말것인지 선택사항)
3. 플래시자체에 배너를 노출한다.일정시간이 경과하면 배너는 사라진다.
일단 비중이 큰부분은 이정도 이고 세세하게 들어가는 부분이 나름 많았다..
각 버튼이 오버 했을때에 대한 각 카테고리정보에 대한 인식이라던지 처음 기획단계에서 없던 부분들이 추가 되면서 xml에 추가사항들...
이번작업을 하면서 정말 느낀게 많다....^^;;;;; 정말이지 처음에 편하게 하자고 대충 구조를 잡았다가는 큰코 다친다는 것을..........-0-
아무튼 작업은 완료가 되었고 오픈이 된상태라 기쁘긴 하다....^^;;
아무래도 의도는 메인에서 각 주요 컨테츠들을 한번에 이동시키는 것과 노출하고 싶은 정보를 보여주고자 한점이 가장 큰 부분이었던거 같고.... 나머지는 플래쉬의 부하를 잡는것이 가장 큰 문제였다고나 할까...^^
플래시로 내가 작업한 부분이 비록 새부분에 불과하지만 들어가는 것마다 어찌나 작은곳에 여러가지의 기능을 넣어 대는지 나름대로 재미있기도 하고 신경이 많이 가는 부분의 작업이었다.

뉴스종합/ 스포츠/ 연예 등 주요 섹션의 핫이슈 관련 키워드를 플래쉬(flash)로 제작해서 실시간 제공하는데
xml연동의 작업이었고 부하를 줄이기 위해...신경을 가장 많이 썻다..^^;;;

‘포토뉴스’ 섹션을 상단 주요 섹션으로 분리, 사진으로 보는 뉴스를 플래시 슬라이드 쇼로 구현을 하였다
이것또한 물론 xml로 연동이 되면 오토로 볼것인지 수동으로 볼것인지 자동이면 어느정도의 시간인지
그리고 트랜지션 효과를 선택할수 있게 되어있다.

마지막으로 다른 작업에 비해 수월했던 누리꾼 그래프 ㅎㅎ..
차트의 느낌보다는 아무래도 애니메이션에 중점을 더 두는 작업이라....-_-;;;
아무튼 플래시부분에서 무리 없이 오픈이 되서 다행이다...^^
머 디자인 부분이야 워낙 잘하니...
링크는 이곳이다....http://kr.news.yahoo.com/








::: 사람과 사람의 교감! 人터넷의 첫 시작! 댓글을 달아주세요! :::