본문 바로가기

Lecture & Tip/NuriShow[느뤼프로젝트]

드디어 WebViewer NuriShow ver1.0 Release 눈앞!!!

NuriShow를 기획한지 장장 2달여..
하지만 그간 기말고사와 프로젝트에 떠밀려 찬밥신세였다가
방학을 맞이하여 일주일여만에 대규모 업데이트!!

자 그 신비롭고 알흠다운 Dynamic Web Viewer의 세계로 떠나보자~!!
(냠 내가 만들고 혼자 신났음 ㅋㅋ)

------------------------------------------------------
NuriShow는 크게 3가지로 나뉜다. MainPage, SubShow, Upload 각 기능을 알아보쟈!

1.NuriShow Main Page
우선 NuriShow의 본체부터 살펴보자 본체는 다음과 같이 생겼다.


(깨비의 사진을 느뤼 맘데로 ㅋㅋ)

각부분별로 설명하자면 요렇다.
A - Image Screen : 선택한 이미지가 표시되는 곳.
B - Image Selecttion Zone : 이미지를 선택하는 곳, 마우스를 올리면 E의 Preview Screen에 표시된다. 로딩중인 이미지는 하얀 정사각 박스안에 바람개비가 돌고있다!! 요런에는 눌러도 소용없지용~
C - Category List : NuriShow는 기본적으로 카테고리별로 관리가 된다. 불행히도 아직 이미지별 관리기능은 없다! 추후 삽입예정(또 언제가 될지는 장담 못함!) 선택을 하면 해당 카테고리의 이미지를 볼 수 있다.
D - GET!! Button : 자신이 선택한 카테고리를 SubShow로 가져간다.누르게 되면 SubShow의 Html Tag가 클립보드에 카피가된다.이것을 자신이 포스팅할 곳에 가져가서 붙여넣기하면 오케이!!Ctrl+V
Upload Image : 카테고리 등록과 이미지 업로드를 하는 창을 연다. 테터관리자로 로그인해야만 보인다. 이것은 아래에서 자세히 설명
F - Prev,Next Button : 처음/이전/다음/마지막 페이지로 이동하는 네비게이션 버튼~
G - Empty Space : 추후 업그레이드를 통해 이미지별 댓글기능과 설명부분을 넣기위해 비워둔곳. 그리고 NuriShow Label이 붙어있다!! 누르면 당근 느뤼의 홈으로 자신이 순간이동하는 체험을 할 수 있다~ ㅋ

백문이 불여일견 한번 보시라!!--->> 클릭클릭!!

2.SubShow
다음은 MainPage에서 GET!!을통해 포스팅된 놈이다!!
포스팅을하면 자신이 선택한 카테고리의 이미지로 다음과 같은 놈이 뜨게 된다.



물론 위의것처럼 보이지 않는다.
일단 이미지만이 보이게 되는데 이미지를 마우슨 왼쪽클릭을 하면 위의 화면과 같은 버튼들이 보이게된다.

Image Number : 왼쪽 상단에 이미지 번호가 표시된다. 현재/전체
Image Size : 이미지의 사이즈. 지금 보이는 이미지의 로딩된 사이즈/이미지의 사이즈
View Source Button : 이것은 이미지를 퍼가기위해 만든 버튼 카테고리 생성하고 업로드할때 설정가능하다. 플래쉬는 캡춰가 아닌이상 퍼가기가 쉽지가 않다. 남들 퍼주기 싫은 사진은 이 기능을 활용하쟈
Go to MainShow : 이것은 현재 카테고리를 가지고 있는 Main Show Page로 이동시켜준다.
Image : 말 그데로 이미지. 이미지가 만약 슬라이드쇼 중이라면 마우스를 올리면 잠시 멈추게된다. 그리고 SubShow의 기능중 UI편의를 위해 휠을 이용한 네비게이션과 화살표키를 이용한 네비게이션을 제공한다.!! (사실 요놈은 개발중에 발견한 imazing에서 기능을 살짝 꿔왔다;;)

실물은 다음과 같다!!



이미지 위를 마우스로 휘젓다 보면 숨겨진 버튼이 있다 -,.-;;)

3.Upload Page



이것은 말그데로 카테고리 등록과 이미지 업로드를 위한 페이지
Flash 8이 나오면서 actionscript가 FileReference란 놈을 지원해준다.그것을 가지고 구현해놨다. Flash가 점점 영역을 확장해간다;;;

Title : 카테고리명이당.
ID : 눈치 빠른 사람은 알테지만 요놈은 단순히 년월일시분초밀리초로만들어진 것이당. 카테고리별 디렉토리 생성시 겹치지말라고
Width/Height : 보여줄 SubShow의 크기
Fit Stage : 이미지의 사이즈를 강제로 SubShow 크기에 맞춘다. 당근 비율 변환.근데 이미지의 찌그러짐 현상은 아직 극복 못하는 중;;;
Align Center : 이미지 가운데 정렬
Allow Source : 위에서 설명한 원본이미지 공개 버튼의 유무 설정
SlideShow : 슬라이드쇼 유무 설정, 뒤의 시간으로 설정
Browse Image : 업로드할 이미지를 선택한다. 다중선택이 가능하고 선택한 물건?? 이미지는 바로 옆 리스트에 안치..근데 결정적으로 아직 선택한 것을 지우는 기능이 없다!!!;; 왜냐? 아직 귀차나서;; 곧 추가됨;;
Submit Button : 등록 버튼. 누르면 이미지가 업로드되는 창이뜬다. 만약 입력이 덜되었거나 그러면 에러메세지 창이 뜬다!
Cancel Button : 창닫기.
-------------------------------------------------------

냠 이것으로 기본적인 Dynamic Web Viewer NuriShow ver1.0의 프리뷰를 마친당.

이후에 계속 수정과 업데이트를 통해 쭉쭉 뻗어나갈 것이당~

물론 이 물건은 소스등이 완전 공개될 예정이므로 가져가서
맘데로 고쳐쓰셔도 좋다. 근데 기왕이면 소스출처는 지우지말아주샴

아직 설치하는 법이 간편하지 못해 간편하게 되는 순간 올릴것임!!

근데 혹시나 그중간에 참지 못하고 이것을 써보고픈 열망에 사로잡힌 분이라면!!!

당근 제가 만든 허접한 물건을 써주신다는 기쁨에 메일로 쏴드림!!

자 물건이 몇개 안남아서 요 NuriShow를 단돈 0원에 모십니다~
바로 아래에 리플달아주세요~(홈쇼핑 버전 ㅋㅋ)

------2006.1.13 작송좌 느뤼!