ㅁ DTFE2009 훈스닷넷 4세션 PhotoLight
Dev&Tech Festival 2009 행사 일환으로 지난 16일 훈스닷넷에서 UX 세미나가 진행되었어요.
비도 많이 내리는 굳은 날씨에도 불고 하고, 정말 많은 사람들이 와줘서 발표를 맡은 저로써는 약간 부담도 됐지만, 이렇게 관심을 가져주기고 찾아와 주심에 감사하기도 했어요^^
제가 진행한 세션은 PhotoLight라는 주제 였는데요. 디자이너인 김선구님과 PhotoLight가 무엇인지, 어떻게 기획을 했는지, 어떻게 구현했는지에 대해서 이야기했습니다.
간단하게 요약하자면, PhotoLight란 이미지 뷰어라고 생각하시면 될것 같아요. 사용자들에게 사진을 보면서 좀더 편하고, 즐겁게 볼 수 있는 이미지 뷰어지요.
어떻게 기획을 했고, 어떻게 디자이너와 협업을 했냐면요, 일단 기존은 사이트들의 포토갤러리들을 하나하나 들어가 보고 사용해 보고 대략적으로...개인적으로 불편했던 점..또 한 편했던 점들을 나름 정의하고 PhotoLight에서는 이런 기능들을 꼭 들어가야 겠다 정의 했죠. 그리고 디자이너와의 협업은 정말 저도 많이 고민했습니다. 김선구님과 제가 같은 회사에서 일하는것도 아니고 각자 회사일에 바빠서 별로 이야기 할 시간이 없었기때문이지요. 그래서 전 선구님과 협을 좀더 수월하게 하기위해
MVVM + Command Pattern를 이용하기로 했어요. 실제로 이런 패턴으로 작업을 하니 정말 디자이너와 협업이 수월하더라고요. 개발자가 디자인 없이 기능만 다 구현하고, 디자이너가 디자인을 입히는데...10분 안걸렸어요. 물론, 디자이너인 김선구님이 대략적으로 바인딩 걸려있는 것이 어떤건지 미리 알고 작업해 주셔서 더욱 수월했던 것 같아요^^
PhotoLight의 구현은 일단 FileUpload와 Viewer로 나눨수 있는데요.
- FileUpload를 이미 많은 자료들이 있으니, 저는 간단하게 PhotoLight에서 다중 파일 처리에 대해 애기할게요.
FileUpload를 WCF를 이용해서 Stream를 나눠서 파일을 보냈고요, 다중 파일을 선택해서 보내다보니, WCF서비스에서는 올라오는 이미지 파일들이 어떤 그룹인지 알수가 없어 하나의 이미지파일을 보낼때 마다 그룹 키를 함께 보내서 지금 올라오는 이미지들이 키를 중심으로 하나의 그룹이라는 것을 정의해 줬어요. 이 부분은 소스를 보면 알수 있을 거예요. 이렇게 올라온 이미지 파일을 DeepZoom파일로 변환해서 저장하기도 해요.
- Viewer에서는 WCF를 이용해서 해당 키를 호출해 주면요. 해당 WCF서비스에서는 DBServe에게 해당 데이터를 요청하고, 받은 데이터를 토대로 DataClass를 생성해서 PhotoLight에서 넘겨주게 되는 구조이죠.
이렇게해서 PhotoLight에서는 해당 데이터를 토대로 하나하나 이미지를 호출하게 됩니다. 기능들을 간단하게 슬라이드와 한장씩 보기, 딥줌보기가 있고요. 퍼가기 기능도 지원합니다. ^^ 세미나날 퍼가기 기능을 테스트 한다가 안되서 약간 당황스러웠습니다^^;;집에와서 확인해 보니 제가 마지막에 소스를 고치면서 퍼가기 부분은 예전소스 그대로 놨더라고요. 이런이런...저도 인간인지라...^^;;;
이상 간단하게 PhotoLight에 대해서 이야기 했고요. 제 발표 자료는 아래 링크를 통해 받아 보실수 있을 거예요.
- 전체 소스 :
다운로드 - PPT 자료 :
다운로드 - 실행 모습 :
http://temp.happydong214.com (집에서 개인서버로 돌리고 있는 중이라, 나중에는 닫힐수도 있습니다.)
부족함이 많은 세션이었지만, 함께 세미나에 동참했던 분들과 웃으면서 보내서, 정말 즐거웠던 시간이 아니었나 싶어요.
