네이트검색, 위젯으로 날개를 달다.

Project/Web 2009.12.23 04:55

네이트 검색위젯이 12월 21일 사용자와 만나게 되었다. 개인적으로 짧은 프로젝트 일정이었고, 어느 때보다도 숨가빴던 시간이었기에 나에게 많은 고민을 안겨주었던 프로젝트였다.

네이트 검색위젯은 개별적인 위젯을 하나로 조립하여 사용할 수 있는 구조로 설계되었다. 사실 그렇게 하기 위해서가 아니라 그렇게 할 수밖에 없었던 이유가 더욱 컸을지 모른다. 색상 타입별로 70개의 위젯을 만들어야 하고, 모듈별로는 111개의 swf파일이 만들어져야 하는 상황이었기 때문이다. 그래서 나는 일주일에 15개씩 위젯을 양산(!?)했다.

위젯은 모션으로 시선을 빼앗을 필요가 없는 컨텐츠이다. 반면 디자인적으로는 다양한 블로그 레이아웃에 맞아야 한다. 그래서 플래시의 모션은 최대한 단순한 형태로 구현되었고, 디자인은 다양한 색상에 어울리기 위해서 5가지로 정리가 되었다. 디자인팀에서 5가지 색상 타입별로 이름을 정리하는 것도 쉬운 일이 아니었을 것이다. ^^

검색위젯 프로젝트에 참여했던 모든 작업자 분들에게 박수를 보낸다. 그리고 앞으로도 지속적으로 차별화되는 서비스로 발전해 나가길 기대해 본다.

검색위젯 섹션 페이지
http://slab.nate.com/widget/index.html

    

설정

트랙백

댓글

  • an쏘니 2009.12.27 23:17 신고 ADDR 수정/삭제 답글

    오~ 달았네? 뽀대난다ㅋㅋ

    • jasu 2009.12.28 13:06 신고 수정/삭제

      진정 그렇게 생각하는가!? ^^ 고맙다.

  • lovedev 2009.12.29 10:38 ADDR 수정/삭제 답글

    오~...
    네이트에도 랩이 있었근아..
    멋지당~

    • jasu 2009.12.31 23:57 신고 수정/삭제

      네이트도 랩이 있지 쿠쿠 재미있는 일들이 많이 있다. 실증 나면 놀러와라 쿠쿠

  • 검색위젯문의 2010.08.18 17:29 ADDR 수정/삭제 답글

    네이트검색위젯만든 분이신가보네요.
    네이트검색위젯은 타사이트 서비스를 저해하거나 방해하거나 시스템저하를 가져오지않나요?
    미니홈피에 다음위젯아시죠? 그거 설치할려고하니까
    허용하지않은 스크립트라서 시스템 운영을 저해하며 타사용자 시스템저하를 가져온다고 고객센터
    에서 답변메일이왔네요.

    위젯만든 입장에서 어떻게 생각하세요?
    위젯이 그정도의 위력이있는지 저도 몰랐네요 .

    다음위젯 이쁜거 많은데 위젯팩토리도 있고 그걸 싸이월드에 적용한다고 허용되지않은 스크립트라고
    하다니. 피해를 보지않을려면 알아서 삭제하라니 너무한것같네요.


    위젯의 배포 방법은 다똑같은거 아닙니까?

    네이트 검색위젯도 스크립트 오브젝트 플래시 이런걸로 배포되는데..

    타사이트 스크립트는 안된다니...


    싸이월드 고객센터에 문의해도 원하는 답변이안나와서

    검색하니 이블로그가 나와서 하소연해봅니다

    ps 네이트 검색위젯 이뻐요^^

    • jasu 2010.08.22 21:51 신고 수정/삭제

      안녕하세요. ^^
      미니홈피에서 다음위젯을 사용하시는데 문제가 생겼나보네요 제가 관련 내용에 대해 답변을 드릴 입장은 아니지만 제가 아는 범위 안에서 생각해 보면 이렇습니다.

      위젯을 블로그나 타 서비스 페이지에 삽입할 수 있는 방법으로는 크게 두 가지가 있습니다. 하나는 플래시로 위젯을 제작해서 붙여넣기를 하는 방법(대표적으로 유투브)과 자바스크립트를 사용하는 방법이 있습니다.

      플래시를 사용하는 경우, 서비스 제공자의 입장에서 오브젝트를 붙여 넣기도 편하고 플래시라는 독립된 플랫폼을 사용하기 때문에 다른 서비스의 스크립트와 충돌하는 문제가 적습니다. 하지만 플래시는 한 가지 문제가 있는데 IE 브라우저가 아닌 타 브라우저에서는 입력하는 한글이 깨지는 문제가 발생합니다.

      그러한 이유로 다음위젯의 경우, 플래시가 아닌 자바스크립트를 사용해서 위젯이 만들어진 것 같습니다. 그런데 어떤 서비스나 페이지를 구성하는 스크립트나 레이어 구조상 이러한 스크립트를 허용할 수 없는 경우가 발생할 수 있습니다. 물론 사용자 입장에서는 문제를 수정하면 되지 않냐고 하실 수 있지만 서버의 구조나 시스템 환경상 수정할 수 없는 경우도 있을 수 있고 기존의 다른 기능과의 충돌로 인해서 어려움이 있을 수 있습니다.

      물론 사용자가 어떠한 경우라도 편리하게 사용할 수 있도록 지원해줘야 하겠지만 각 포탈이 제공하는 기능이 완벽하게 호환되기는 어렵기 때문에 이러한 문제는 보통 두 회사가 함께 문제를 해결해야하니 생각보다 어려움이 있을 수 있습니다.

      다음위젯을 미니홈피에서 사용하는 경우라면 제 생각에는 네이트측에 문의하시는 것 보다는 위젯을 서비스하고 있는 다음측에 문의하시는 것이 좀더 도움을 받으실 수 있을 것 같습니다.
      감사합니다.

  • 답변감사합니다 2010.08.26 19:14 ADDR 수정/삭제 답글

    답변감사합니다

    제가 하고 싶은말은 네이트는 자체적으로 외부 스크립트를 설치를 못하게한다는 것입니다.
    <script> 태그는 안된다하더라도.. 보안문제가있을수있겠죠? xss 같은...
    object 태그부터 embed 등등 여러가지를 막아버리네요.
    이쁘게 잘만드셔서^^ 네이트 검색위젯도 미니홈피에 설치해놓으면 좋을것 같은데..
    미니홈피에 설치가안되죠.
    그래서 다음위젯뱅크의 위젯을
    여차저차한 방법으로 설치했는데
    허용 하지 않는 프로그램 설치한다고 알아서 삭제하라는 경고쪽지를 보내네요.

    자유도가 없는 싸이월드/네이트. 좀 그렇네요..
    네이트검색위젯 설치했다고 다른데서 사용자에게 삭제하라고 하면 만드신분 입장에서 좀그러시겠죠? ㅠㅠ

    그냥 주저리 주저리 하소연해봅니다. ㅠㅠ 수고하세요~

    .ps 플래시 타 브라우져에서는 인코딩이 안먹히나 보군요.. ie 에서도 여러가지 수정해야지. 한글이 먹히더라구요. ajax 포함 ㅠㅠ

    • jasu 2010.08.27 12:18 신고 수정/삭제

      네 저도 사용자로써 아쉬운 점이 많기는 합니다. 서비스의 기능을 변경하는 것은 쉬운 일이지만 회사의 정책을 변경하는 것은 다소 시간이 걸리는 것 같네요. 그래도 요즘 네이트가 많은 노력을 하고 있으니 앞으로는 나아지겠죠? ^^

미니홈피 스킨이 춤을 추다.

Project/Web 2009.12.15 21:50

미니홈피에 새로운 스킨이 오늘 출시 되었다. 바로 “뮤직스킨”이다. 올해 3월부터 R&D로 진행하던 작업이 실제로 서비스화 되었다. 뮤직스킨은 미니홈피에서 배경음악이 있을 경우, 배경음악의 비트에 맞춰서 비주얼이 움직이는 스킨이다. 기존의 gif 스킨과는 달리 자신이 사용하는 배경음악의 음의 흐름(높낮이)에 따라서 스킨이 표현되기 때문에 배경음악을 듣는 재미가 쏠쏠하다.

뮤직스킨은 스킨 영역에 플래시를 도입했다. 그렇기 때문에 제작자에 따라서 다양한 비주얼을 표현할 수 있는데, 그 제작 방법도 아주 간단하게 설계되었다. (물론 본인은 간단하게 설계를 했다고 하지만 이 말을 믿는 분은 그리 많지 않다. 그러나 진짜다;)

오늘 출시된 따끈따끈한 서비스이기 때문에 상품이 많이 등록되어 있지는 않지만 앞으로 계속적으로 다양하고 ,재미있고, 멋진 뮤직스킨들이 나올 것이다. 그 동안 미니홈피 관리에 소홀히 하신 분들이 있다면 아래 경로에 방문 하셔서 미리보기 해보시고 마음에 드는 뮤직스킨을 본인이 선호하는 음악과 설정해 보면 눈과 귀가 즐거울 것이다.

http://www.cyworld.com/mall/mall5_index.asp


그 동안 뮤직스킨을 위해 고생하신 많은 관계자분들에게 박수를 보낸다. 혼자 할 수 없는 일이 도움을 주신 많은 분들 덕에 결실을 맺었기 때문에 더욱 기분이 좋은지도 모르겠다. 앞으로도 지속적으로 사용자들이 원하고, 사용자들이 즐거워지는 서비스로 항해를 계속 할 것이라 나는 믿어 의심치 않는다.

    

설정

트랙백

댓글

  • 마코토팬더 2009.12.15 22:22 ADDR 수정/삭제 답글

    오랜 기간동안 정말 수고많으셨어요. 즐겁고 신나는 프로젝트였습니다.

    • jasu 2009.12.16 23:21 신고 수정/삭제

      아 과장님이야 말고 막판에 고생 많이 했지요 쿠쿠 수고하셨어요 저도 즐거웠습니다. 좋은 결과가 있겠죠 ^^ 다음에도 재밌는 프로젝트로 또 만나요

  • juniac 2009.12.15 22:58 ADDR 수정/삭제 답글

    형님 수고많으셧어요 고생한만큼 뭔가 있겠죠??? 있을태니까 쏘세여~

    • jasu 2009.12.16 23:23 신고 수정/삭제

      쿠쿠 고생한 만큼 사용자분들이 즐거워야지, 잘되면 기분 좋아서라도 술 한잔 해야지 암튼 고맙다. 네 덕분이다 수고했다.

  • dohoons 2009.12.16 18:07 ADDR 수정/삭제 답글

    정말 멋진 스킨이네요! 멋진 아이디어..

    • jasu 2009.12.16 23:25 신고 수정/삭제

      감사합니다. ^^ 재밌는 작업이었던 만큼 좋은 반응이면 좋겠네요 ^^

  • Han Sanghun 2009.12.16 23:57 ADDR 수정/삭제 답글

    재밌는 서비스가 추가되었군.
    전에는 뭔가 제약사항이 있어서, 배경을 플래시로 사용하지 못했는데, 그 문제가 해결되었나 보네. ^^

    • jasu 2009.12.17 23:46 신고 수정/삭제

      재미있는 서비스죠? ^^ 앞으로도 다양한 스킨들이 나오고 재미있는 서비스로 계속 이어갔으면 좋겠네요 ^^

  • Silver 2009.12.17 01:48 ADDR 수정/삭제 답글

    와.. 수고하셨습니다..
    놀라운 아이디어네요 ^^

    • jasu 2009.12.17 23:55 신고 수정/삭제

      상품화 하는 과정에서 모든 작업자들의 놀라움이 있었지요 ^^ 재미있는 프로젝트였습니다. 말씀 감사합니다.

  • 창열 2009.12.30 20:55 ADDR 수정/삭제 답글

    와우 오래전에 생각만 했던게 서비스가 되었군요

    정말 수고하셨습니다!!

    멋진 스킨들 많이나왔으면 좋겠네요!!

    • jasu 2009.12.31 23:59 신고 수정/삭제

      ^^ 재미 있고 멋진 스킨들이 앞으로 많이 나오겠죠, 플래시 개발자들이 많이 참여할 수 있는 기회가 있었으면 하는 개인적인 바람입니다만 아무튼 앞으로도 계속 발전하는 서비스가 되었으면 합니다. ^^

  • Sohoavenue 2010.04.24 23:51 신고 ADDR 수정/삭제 답글

    오와

    봐오던것이

    자수님이 만드신거였다니

    우와 우와 우와 ㅋㅋ 신기하네요

    • jasu 2010.04.29 11:43 신고 수정/삭제

      쿠쿠 저 혼자만 만들 수는 없는 일이지요. 기획, 디자인, 개발 모든 분들이 노력했습니다. 뮤직스킨 많이 사랑해 주세요 ^^

네이트, 시맨틱 검색을 말하다.

Project/Web 2009.09.30 15:36

네이트가 싸이월드와 통합하면서 많은 변화가 있었다. 회사의 모든 구성원들이 오늘을 준비하기 위해 많은 노력을 한 만큼, 사용자들에게 좋은 영향을 주었으면 좋겠다.

통합을 하면서 여러가지 많은 변화가 있었다. 그 중 하나는 바로 시맨틱(Semantic) 검색이다. 시맨틱은 주어진 단어와 문장의 의미를 파악하고 이를 해석하여 사용자가 찾고자 하는 결과를 추론하는 차세대 검색기술을 말한다. 사람이 이해하는 만큼, 문장의 의미를 시스템이 정확히 파악하기 위해서는 앞으로도 많은 연구와 개발이 필요하겠지만 네이트가 상용화에 첫 발을 내딛게 된 것에 본인은 큰 의미를 두고 싶다.

무엇보다 검색면에 플래시 UI를 도입하게 된 것은 개인적으로 참 의미가 있는 작업이었다. 뒤늦게 프로젝트에 참여하여 팀웍에 적응하는 시간조차 갖지 못하고 빠르게 진행하다 보니 나름대로 고충도 많았던 것 같다. 나의 부족함은 프로젝트에 참여했던 모든 분들이 너그럽게 이해해 주시리라 믿는다.

시맨틱 검색은 크게 검색어 -> 주제분류 -> 추천즉답 이라는 연결 고리를 갖고 있다. 검색 타이틀에 대한 주제분류를 하고 그 분류에 대한 추천즉답을 제시하게 되는데, 주제분류에 따라서는 몰랐던 내용도 알 수 있고, 때로는 재미있는 검색 결과도 볼 수 있다.

예를 들어 “아버지가방에들어가신다” 로 시맨틱 검색을 했을 경우 주제분류인 「예상전망」은 “결국은 아버지 가방에 들어가셨다로 그칠 전망이다.” 라는 결과를 볼 수 있다. 재미있는 결과다.

사실 텍스트 위주의 검색서비스에서 플래시를 UI로 채택한다는 것이 나에게 부담이기도 했지만 좋은 기회일 수 있다는 판단이 더 크게 작용했던 것 같다. 업계의 생리로 본다면 이번 작업은 거의 실시간으로 진행되었다. 이 과정에서 디자이너분이 고생을 많이 하셨는데 그걸 알면서도 시간적 여유가 없다는 이유로 본인이 충분히 배려하지 못한 부분에 대해서는 미안한 마음이다. 이해 하실 거라 믿는다.

정보 표현의 효율성을 생각하며 고민했던 샘플


어떤 일이든 고생한 만큼 의미가 크게 다가오는 것 같다. 이번 프로젝트에 참여하신 모든 분들에게 박수를 보내고 싶다. 본인은 내일부터 또 다른 프로젝트에 매진해야 할 것 같다. 매번 중요하지 않은 프로젝트가 없는 것을 보면 나에게는 큰 행운이다. ^^



    

설정

트랙백

댓글

  • 미스김 2009.10.01 04:55 ADDR 수정/삭제 답글

    고생했어요. 몸도. 마음도. 토닥토닥

    • jasu 2009.10.02 03:14 신고 수정/삭제

      쿠쿠 고마워요 개편에 관여한 모든 분들이 고생했지요. 고생한만큼 좋은 일들이 가득하길...

  • 마코토 팬더 2009.10.01 09:15 ADDR 수정/삭제 답글

    고생많으셨어요. 다음 프로젝트도 잘 부탁드립니다. 화이팅 :)

    • jasu 2009.10.02 03:15 신고 수정/삭제

      누구신가 한참 관련성을 찾다가 겨우 알았네요 쿠쿠 감사합니다. 또 열심히 달려야지요 ^^ 저도 잘 부탁 드립니다.

  • ms한 2009.10.01 12:07 ADDR 수정/삭제 답글

    긍정적마인드~ Good!

  • jin_u 2009.10.02 11:25 ADDR 수정/삭제 답글

    시맨틱이라 오랫만에 들어보는 단어구나. ^^ 내가 속세에 있지 않았나? 차세대란 단어가 맞는지는 잘 모르겠지만... 어쨌든, 한물간 느낌의 단어를 어느정도 잘 살리느냐와 사용하게 만들 것이냐에서 네이트가 얼마나 잘 리드하느냐... 그 자체야 말로 높이 평가할 만한거 같다. 새 것은 헌 것이고, 헌 것을 새 것으로 만드는 과정을 되풀이하는 사고체계에서 시맨틱 검색이라는 개념을 도입한 네이트에 경의를 표한다. ^^
    근데, 하단의 ajax인건가? 포퍼먼스가 같이 일어나니깐 끊어지는 느낌이 발생하는군. 플래시 클릭시 easeInOut 효과가 어떨까나...ㅋㅋ 다음주에 전화하마~ 조만간 보자. ^^

    • jasu 2009.10.02 15:07 신고 수정/삭제

      이 업계에 있는 사람들에게는 수면에 떠오르지 않은 오래된 단어이긴 한 것 같다. 수면에 올려 놓으려고 노력하는 네이트의 입장이니 이해할만 하지 않은가? ^^ 네 말대로 easeInOut이 좋을 것 같은데 단일 모션이 아니라 적용해 봐야 알거 같네. 의견 고맙다. 튜닝작업에서 반영하도록하마 ^^ 추석연휴 즐겁게 보내라

  • lovedev 2009.10.08 14:12 ADDR 수정/삭제 답글

    짝짝짝 멋지다~ ^^
    고생했네.. :)
    저 샘플 비슷하게 생긴거 예전에 여기서 본 기억이 있네..
    그 때 이걸 준비하고 있었던 거구나..
    또 다른 프로젝트라.. 기대된당~
    수고해~

    • jasu 2009.10.09 19:17 신고 수정/삭제

      쿠쿠 잘 지내는가?
      나이는 먹어가고 일은 재미있고 이래 살면 안될텐데
      오늘 따라 가정이 있는 네가 부럽구나
      나중에 또 봅세~

  • 지돌스타 2009.10.12 17:47 ADDR 수정/삭제 답글

    멋진 표현력과 아이디어가 돋보입니다. 자수님이 하시는 작업은 모두 느낌이 새롭습니다.

    • jasu 2009.10.13 01:00 신고 수정/삭제

      쿠쿠 제가 운이 좋을 뿐이죠 어떤 프로젝트건 혼자 하는 것은 없겠지요 저 보다도 다른 분들의 노력이 더욱 컸던 프로젝트였던 것 같네요 ^^ 아무튼 고마워요~ ^^

  • 2009.10.20 10:59 ADDR 수정/삭제 답글

    비밀댓글입니다

    • jasu 2009.10.20 16:53 신고 수정/삭제

      안녕하세요
      관련문제에 대해서 내부적으로 논의 중에 있습니다.
      빠른 시일에 처리될 수 있도록 유관부서에 전달 하도록 하겠습니다. 네이트 검색 서비스에 관심을 가져주셔서 감사합니다. ^^

  • 리노아 2009.11.08 23:24 ADDR 수정/삭제 답글

    고생 지지리~ 수고 많았어요.
    지금도 딴일로 고생하겠지만 ㅋㅋ
    연말에 성과 좋을거에요, 동결만 아니면 ㅋㅋㅋ

    • jasu 2009.11.10 22:39 신고 수정/삭제

      올해는 그렇다치고 내년에는 뭘할까~

  • 2010.11.21 05:34 ADDR 수정/삭제 답글

    비밀댓글입니다

미니홈피 갤러리 그림 그리기툴 개편

Project/Web 2009.01.20 10:37


오랜만에 재미있는 작업을 마무리 하고 오늘 오픈 하게 되었다. 만드는 서비스에 애정을 갖고 접근한 기획자, 개발자, 디저이너분들 덕에 즐겁게 작업할 수 있었다.

이번에 개편한 미니홈피 갤러리는 기존의 이미지 저장 형태를 벗어나 그리는 과정을 재생하는 기능을 제공하며 일반 동영상 플레이어처럼 외부 블로그로 퍼가기가 가능한 것이 특징이다.

개발 과정에서 FlashPlayer10버전이 배포되어 개발 버전에 고민을 했었는데 결국 두 버전을 혼용하는 것으로 개발을 진행하였다. 일부 기능(PC 저장하기)은 FlashPlayer10버전에서만 지원하며 나머지는 FlashPlayer9 버전에서도 정상적으로 사용 가능하도록 개발 하였다.

현재 일반, 칠판 그래피티와 같은 브러시 타입을 지원하며 기존의 갤러리툴에서 사용했던 도형도 일부 적용 하였다. 이번 작업은 테스트 주도적 프로세스로 진행했기 때문에 개발 중간에 발생할 수 있는 시행착오를 줄일 수 있었다. 개발자의 의도와 방향성을 충분히 배려하고 존중해준 기획자 분들에게 감사를 전한다.



http://www.cyworld.com/main2/notice/view.asp?seq=2123





http://dicaland.cafe24.com/cydrawing/Cydraw_808x626.swf


    

설정

트랙백

댓글

  • douglas9 2009.01.20 12:19 ADDR 수정/삭제 답글

    와우!!! 녹화가 되는 군요 -0-
    멋져요!~~

    • jasu 2009.01.22 10:48 신고 수정/삭제

      정확히는 좌표저장일거 같네요 ^^ 감사합니다.

  • 지돌스타 2009.01.20 13:14 ADDR 수정/삭제 답글

    멋집니다. 저도 3월부터 새로운 이미지 에디터를 만들려고 기획중에 있습니다.
    이거 만드는데 인력과 기간을 얼마나 잡고 하셨나요? 테스트 주도적 프로세스로 진행하셨다는데 매우 관심이 가네요. 노하우를 알고 싶습니다. ^^

    • jasu 2009.01.22 10:50 신고 수정/삭제

      안녕하세요...
      인력은 저렴하게 들었던 프로젝트인거 같네요 ^^;
      테스트 주도적 프로세스는 말이 좀 거창한거 같기는 합니다. ^^ 그냥 제가 임의로 이름을 붙인 것일 뿐이구요 기획->디자인->개발 이라는 기본적인 프로젝트 프로세스가 아니라 개발(샘플링)->기획->디자인->실제작 형태의 프로세스를 가지고 작업을 했던 것입니다. ^^

  • Blackiz 2009.01.20 15:14 ADDR 수정/삭제 답글

    오오 멋집니다.
    예전 싸이월드 그림그리기는 사용하기 불편해서 안쓰게 됬었습니다만
    이것이라면 괜찮을 것 같네요..

    • jasu 2009.01.22 10:52 신고 수정/삭제

      네 배보다 배꼽이 컸던 기존의 툴이여서 잘 사용을 못했던거 같기는 하네요 친숙한 플래시로 제작이 되었으니 가볍고 즐겁게 활용해 주세요~ ^^

  • 니케 2009.01.20 22:55 ADDR 수정/삭제 답글

    와.. 정말 멋지네요.
    그래피티.. 칠판 느낌. 모두 좋네요 ^^

    • jasu 2009.01.22 10:53 신고 수정/삭제

      각각의 브러시 느낌으로 재미있는 결과물들이 나올 수 있을 것 같은데 아직 홍보가 덜 되어 있는 듯 싶어요 ^^ 홍보좀 부탁드리겠습니다. ^^

  • lovedev 2009.01.21 20:26 ADDR 수정/삭제 답글

    와우..정말 멋집니다~
    정말 실용적인 비트맵 활용방법이네요..
    너무 멋져요 ^^

    • jasu 2009.01.22 10:55 신고 수정/삭제

      그리는 과정을 재생할 수 있는 기능으로 에니메이션 같은 다양한 결과물들을 만들 수 있을 듯 싶어요 ^^ 재밌게 이용해 주세요~

  • Han Sanghun 2009.01.22 18:07 ADDR 수정/삭제 답글

    와우, 멋진걸...
    이제는 포토샵도 만들어낼 수 있을 듯 ㅎㅎㅎ

    • jasu 2009.01.22 21:04 신고 수정/삭제

      쿠쿠 별말씀을요... 그리기 과정 재생 기능을 넣겠다고는 했는데 막상 하다보니 고민해야 할 것들이 한 둘이 아니였던 것 같네요 ^^ 아... 팔레트 부분은 디자인이 비슷한 형태라 상훈형님의 예전 편집스킨의 구조를 참고 했습니다. 미리 이야기를 못했네요; 감사합니다. ^^

  • 쿠나 2009.01.25 10:52 ADDR 수정/삭제 답글

    와우.. 역시 플래시 다루시는 실력이 범상치 않으시더니 여기 관련 종사직이셨군요 ㅎㅎ.
    플래시 관련해서 그래픽 객체를 동적으로 표현하는 법도 어서 공부해야 하는데 이거 시간이 남아나질 않습니다.. ㅠ_ㅠ

    • jasu 2009.01.28 12:48 신고 수정/삭제

      플래시를 취미로 하기에는 다른 특별한 재주가 없어요 ^^;

  • 검쉰 2009.01.25 20:28 신고 ADDR 수정/삭제 답글

    정말 멋지네요! :)
    저도 이런 종류의 에디터 만들어보고 싶네요 ㅎ

    • jasu 2009.01.28 12:49 신고 수정/삭제

      디자인의 힘입니다. 쿠쿠 기술적인 부분으로만 만든 샘플은 볼품이 없었거든요 ^^

  • 매지깅 2009.02.06 20:58 ADDR 수정/삭제 답글

    스케치판이랑 비슷해영 ㅠㅠ

    • jasu 2009.02.07 12:29 신고 수정/삭제

      그렇게 보이나요? 저는 그냥 이렇게 하면 재밌는 서비스가 되겠다 싶어서 열심히 보람있게 일했을 뿐인데... 오늘은 여러모로 마음이 아픈 날이네요

  • MissFlash 2009.02.12 10:27 ADDR 수정/삭제 답글

    Jasu님 안녕하세요, 오랫만에 놀러왔네요~

    재미있는 프로그램 잘 봤습니다.

    예전에 오이카키라는 프로그램에서 스크립트로 본적이 있는데, 플래시로 하게되면 아무래도 좀 더 다이나믹하고 화려하게 만들수 있겠네요 ^^;

    잘 봤습니다.

    • jasu 2009.02.13 15:46 신고 수정/삭제

      오랜만이시네요 ^^ 잊지 않고 찾아와 주시니 고맙네요

블로그의 올플래시 페이지 infinite 메뉴 추가

Project/Web 2007.04.15 02:26
예전 방문자 카운터 기능을 추가하면서 생각한 것이 있었다. div로 iframe을 잡고 상위 레이어를 올리면 올플래시 형태의 페이지를 만들 수 있을 거라는 생각에서 시도해 보았다.

이 구조를 넣으면서 여러가지 문제점이 생겼는데 문제점들은 아래와 같다.


1. 자바스크립트에서 플래시로 값을 넘겨주기 위해서는 플래시에서 ExternalInterface 클래스를 사용하게 된다. 이 클래스를 이용하면 html에 삽입된 javascript와 플래시간 상호 지정한 function을 호출할 수 있으며 return값도 전달 할 수 있다.
하지만 배경 화면에 해당하는 플래시에서 티스토리 스킨에 제공하고 있는 skin.html안에 삽입된 자바스크립트를 호출하는 것은 가능하나 그 자바스크립트에서 플래시로 값을 넘겨주지 못하는 문제점이 있다. 아마도 크로스 도메인 문제인 듯 싶다.

하루정도 고민 하다가 결국은 우회하기로 결정했다. 일단 하단에 있는 메뉴플래시에서 infinite 버튼을 클릭할 시에 상위에 있는 레이어를 display = block을 적용하고 플래시의 LocalConnection을 이용하여 레이어 안에 있는 플래시와 통신을 하는 방법이다.
여기도 또다시 문제점이 발생했는데 하위 플래시에서 레이어를 살리는 동시에 상위 플래시와 통신을 할 경우에는 기존에 있던 플래시가 포함된 레이어가 작동을 정지하면서 제대로 호출해주지 않는 문제가 발생했다. Display를 대신해 visibility을 이용해 보았지만 마찮가지였다.

상위 레이어가 살아났을 때 플래시에 레이어가 나타났다는 메시지를 전달함으로써 infinite의 초기 시작 모션을 적용해야 하는데 그 문제가 해결되지 않아서 발생하는 문제점이다.

익스플로러와 파이어폭스 두 브라우저에서 테스트해본 결과 두 브라우저 간의 약간의 차이가 발생했다.

그래서 LocalConnection으로 플래시간 통신을 하되 약간은 딜레이 타임을 적용하기로 하고 레이어를 살리고 초기 시작 모션들 들어가기 전에 0.5초간 로딩바를 보여주는 형태로 LocalConnection의 문제점을 해결했다. 사실 해결이라기보다는 궁여지책이다.


2. 두번째 문제는 익스플로러와 파이어폭스의 호환 문제다. document.all는 IE에서만 먹는 코딩 방식이라는 것을 알게 되었다.
보 통 IE에서 div의 style이나 레이어에 접근하기 위한 접근자 방식을 document.all.ID.style.display이런 형태로 썼는데, 이러한 코딩방식은 파이어폭스나 타 브라우저에서는 먹히지 않는 방식이다. MSDOM에서만 사용하는 것이며 W3C에서도 권하지 않는 방법이라고 한다. 우리나라의 경우는 90% 가량이 IE를 사용하고 있는 상황이기 때문에 IE를 사용하고 있다면 별 문제가 되지 않겠지만 타 브라우저를 사용하는 사용자에게는 치명적인 문제를 발생시킨다. 공든 탑이 이러한 표준 문제에서 무너질 수 있다.

W3C에서 권장하는 표준형은 document.getElementById("ID").style.display 이러한 형태로 접근하는 것이다.


3. 세번째 문제는 티스토리에 로그인한 상태에서 블로그에 접근했을 때는 오른쪽 상단에 티스토리 툴바가 보이게 된다.  테스트 과정에서 레이어의 index값을 아무리 올려도 상위에 있는 레이어보다 티스토리 툴바가 상위에 떠있는 것이다. 그래서 블로그 소스를 뒤져보니 상위에 뜨는 툴바의 index값이 무려 1000000라는 사실… 그래서 상위에 뜨는 레이어의 index 값을 1000001로 잡아서 해결했다.


4. 네번째는 문제라기 보다는 레이어를 올리는 과정에서 생겨난 부가적인 노동이다. 블로그에서 음악이 흘러나오도록 play를 시켜놓은 상태에서 infinite 페이지로 들어갔을 때는 끄고, play되고 있던 사용자라면 다시 나올 때 play를 시켜주는 것이다. 그리고 음악을 듣지 않고 있던 사용자라면 그대로 음악이 흘러나오지 않는 기능을 추가해야 했다. 그리고 블로그의 배경에서 랜덤으로 생겨나는 나비의 움직임이 infinite 페이지를 접근했을 때에 불필요하게 CPU의 낭비를 가져오고 있어서 infinite메뉴로 들어갔을 때는 나비들이 생성하지 않도록 interval을 clear시켜주고 다시 블로그로 나갔을 때는 생성하도록 설정해 놓았다.


Infinite메뉴를 추가하면서 가장 큰 문제는 자바스크립트에서 플래시로 통신하기가 어렵다는 것이 가장 큰 문제였던 것 같다. 일단 지금은 LocalConnection을 이용하여 플래시 간에 주거니 받거니 하고 있으니 나중에 알게 되면 수정해야 겠다.

Infinite 메뉴는 아직 구체적은 내용 구성과 구현 방법에 대해서는 생각해 둔 것은 없다. 일단 블로그에서 새로운 시도를 해본 것이고 캠버스에 어떤 것들을 담아갈지는 앞으로 시간 날 때 고민해 봐야 하겠다.

사용자 삽입 이미지


    

설정

트랙백

댓글

  • 2007.06.23 22:31 ADDR 수정/삭제 답글

    비밀댓글입니다

루이까또즈 브랜드 사이트

Project/Web 2007.03.27 00:48
사용자 삽입 이미지

루이까또즈 브랜드 사이트의 장점
루이까또즈는 사용자 중심으로 설계하려고 노력했다.
 
사용자 삽입 이미지

기본적으로 메뉴 구조라고 한다면 위와 같이 단일 메뉴, 순차적 메뉴, 트리 메뉴, 네트웍 메뉴 등으로 나눌 수 있을 것이다. 각각 특정 메뉴로 접근하는 방식에 차이가 있다. 웹은 기본적으로 이러한 여러 가지 메뉴 구조를 복합적으로 사용하고 있는데 루이까또즈는 이러한 메뉴구조를 좀더 다른 방식으로 접근한 형태이다.

루이까또즈의 경우는 기본적으로 트리 메뉴구조를 가지고 있으며 네트웍 메뉴 구조로 접근이 가능하다. 이를 다른 형태로 표현하면 아래와 같은 형태로, 사용자는 원하는 특정 페이지로 다이렉트 접근이 가능하다.
 
사용자 삽입 이미지

이런 형태는 자칫하면 사용자가 현재의 위치를 파악하지 못하는 문제점이 발생할 수 있는데 루이까또즈는 이러한 문제점을 해결하기 위해서 사용자가 새로운 페이지로 접근을 시도할 때 하나의 규칙을 만들었다.
 
사용자 삽입 이미지

SiteMap을 보면 1뎁스와 2뎁스 모두를 세로 직렬로 배치하여 현재 위치에서 원하는 페이지로 이동할 때 컨텐츠들은 위에서부터 아래로 정렬되어 있다는 것을 사용자가 학습할 수 있도록 모션을 적용하였다.

예를 들면 현재 AD CAMPAIGN에서 HISTORY 메뉴로 이동시 현재 컨텐츠는 위로 올라가고 HISTORY 컨텐츠는 아래에서 위로 올라오게 된다. 반면 HISTORY에서 WEBZINE 페이지로 이동시에는 현재 페이지는 아래로 내려가고 WEBZINE 페이지는 위에서 아래로 내려오게 함으로써 사용자가 현재 위치에서 원하는 위치로 이동할 때, 현재의 위치를 파악할 수 있도록 하였다.

로딩바의 형태도 이러한 규칙의 일환으로 위에서 내려오는 컨텐츠의 로딩바는 아래에서 위로, 아래에서 올라오는 컨텐츠의 로딩바는 위에서 아래로 채워지게 된다.

루이까또즈에서 가장 중요한 컨텐츠인 Collection은 로딩의 순서가 왼쪽에서 오른쪽으로 이루어지며 전체 로딩이 어느 정도 진행되었는지를 사용자가 알 수 있도록 메뉴 아래에 상태를 표시하고, 사용자가 특정 메뉴의 이미지를 먼저 보기위해 접근을 시도하면 해당 이미지를 개별적으로 로딩함으로써 사용성을 높이고자 했다.

루이까또즈 브랜드 사이트의 구조는 아래와 같은 형태로 사용자가 인지할 수 있을 것이다.
 
사용자 삽입 이미지


사이트의 단점
루이까또즈는 사용자 중심의 UI로 접근을 하였기 때문에 페이지 전환시 획일적인 모션 적용으로 인하여 다소 각 컨텐츠의 재미요소가 미흡한 단점이 있다. 이는 각 페이지로 넘어갔을 때 그 페이지에 고유의 모션을 통해서 어느 정도 해소할 수는 있겠으나 그런 과정에서 기존의 컨셉트에 부합되지 않는 문제점도 발생할 것으로 예상된다.

* 정해진 일정으로 빠듯하게 작업을 진행하였으나 클라이언트의 자료수급이 제때 이루어지지 않아 오픈 시일이 연기되었고, 클라이언트의 개인적인 취향에 따른 수정과 일관성 없는 요구사항으로 인하여 전체적인 컨셉트를 훼손하는 결과를 낳았던 것 같다.

항상 이런 부분들은 아쉬움을 남기지만 갑과 을의 관계에서 진행되는 프로젝트이므로 어쩔 수 없는 아쉬움이 아닌가 싶다.

http://www.louisquatorze.co.kr/

    

설정

트랙백

댓글

  • K군 2007.03.28 12:17 ADDR 수정/삭제 답글

    전 디자인도 디자인이지만, 편리성을 위해 사이트맵을 주로 이용하지요.
    포스팅과 상관없을려나?

    • jasu 2007.03.28 20:40 신고 수정/삭제

      ^^ 편한 사이트는 불편한 사이트보다 자주 들리겠죠...^ 저도 그렇구요...

  • rookiemodel 2007.04.10 19:58 ADDR 수정/삭제 답글

    종종 뜬금없는 인사'를 드리곤 하는 주진용입니다.
    이번에는 짧막하니 흔적 남겨두고 가네요/ ㅎㅎ
    구경 잘 하고 갑니다 자수님 ^^

    • jasu 2007.04.10 22:49 신고 수정/삭제

      안녕하세요...^^ 요즘 MSN을 잘 사용하지 않네요... 이렇게 글을 남기시는 것을 보면 앞으로 쭈욱 사용하지 않는게 좋을까...생각중입니다. ^^
      감사합니다. 요즘은 시간이 없어서 개인적인 놀이를 소홀히 하고 있다는 생각이 드네요... 뭔가 꿂틀거리고 선명하지는 않으나 아이디어가 있는거 같기도 하고 분출할 수 있는 구멍을 뚫어야 겠습니다.

라이브플렉스

Project/Web 2007.03.04 03:27
사용자 삽입 이미지


작년 말쯤에 오픈란 라이브 플렉스, 화면에 나타난 오브젝트들이 스테이지 사이즈에 따라 유동적으로 좌표를 찾아 가도록 만들었다.

http://www.liveplex.co.kr/


    

설정

트랙백

댓글

Dcaland.com - 사진 갤러리사이트

Project/Web 2007.03.03 03:30
Dcaland.com 사진 갤러리 사이트

이 사이트는 개인적인 취미인 디카 생활을 하면서 모아온 사진을 웹에 올리고자 만들었던 사이트다 이미지를 클릭했을 때 사진이 나타나는 모션을 만들고 그것을 어떻게 활용해 볼 방법이 없을 까 해서 만들게 되었다.

플래시8에서 추가된 FileReference 클래스를 이용하여 이미지 업로드를 지원했으며 모든 구성요소들이 현재 화면의 크기에 따라 유기적으로 위치를 잡고 사이즈를 조정하게 만들었다.

이 사이트 또한 나에게 여러가지 재미를 준 고마운 녀석인데 만들고 나서 언제나 그랬듯이 관리가 안되었던 것 같다. 추가적인 기능과 보완할 것들을 정리하고 수정해야 하는데 회사일이 그렇다보니...

http://www.dcaland.com
사용자 삽입 이미지

    

설정

트랙백

댓글

  • 쿵야 2007.03.04 01:02 신고 ADDR 수정/삭제 답글

    정말 멋집니다+ㅁ+!!!
    우와.....
    공부겸 만드셨다니 존경스럽습니다.ㅠ_ㅠ

    • jasu 2007.03.04 02:03 신고 수정/삭제

      혼자 집에서 놀꺼리가 별로 없어서 그런거 같아요...^^ 개인적으로 공부하고 연구하고 만드는 것들은 실무에서 활용을 많이 하니까 도움이 많이 되죠....

      내가 하는 일에 대한 열정과 재미가 없으면 개인적인 시간에 이런 것을 만드는 것 자체가 일이 될수밖에 없는 일인 듯 싶어요...쭈야님도 자신이 진정 원하는 일이 무엇인자를 찾아봐요... 늦었다는 생각을 하는 시기가 가장 빠른 시기일 수 있답니다. ^^ 참고로 전 원하는 일이 무엇인지는 28 나이에 알게 되었답니다.

  • 비룡포크 2007.03.13 11:08 ADDR 수정/삭제 답글

    오! 대단합니다. ^^ 참~ 프로그램도 잘하는거 같고- 색감각도 아주 뛰어납니다.
    주로 외국 사이트에서 느꼈던 창의성도 느껴지구요. 눈도 편하게 좋네요. ^^
    앞으로 이분야에 대성할 분이란 느낌이 드네요. 그럼, 앞으로도 종종오겠습니다.
    좋은 활동 부탁드려요! 다시한번 좋은 싸이트를 알게되서 감사합니다. ^^ 수고하세요!!

    • jasu 2007.03.13 19:42 신고 수정/삭제

      좋게 봐주시니 감사합니다.
      저도 아직 공부할 것도 많고 익혀야 할 것도 너무 많은 나이네요...^^ 아직은 젊으니 안주 보다는 도전적인 생활을 해야 겠지요...지켜봐 주세요...^^ 감사합니다.

N-collection.com 개인 사이트

Project/Web 2007.03.03 03:18
2005년 연말쯤에 만들었던 개인 홈페이지

이 사이트는 개인적인 포트폴리오 관리와 사진 갤러리를 통해 취미 활동을 하기 위해 제작하였다. 전체적으로 심플한 디자인과 CPU와 용량에 신경을 썼지만 관리가 제대로 되지 않았다.

항상 개인 홈페이지를 만들때면 잘 가꾸어 나가겠다고 하지만 회사 일들과 개인적인 생활을 하다보면 관리가 제대로 되지 않는다. 그래서 지금은 그냥 사용하기 편하고 유지 관리가 편리한 블로그를 활용할 생각이다.

이 사이트의 마지막 메뉴에는 탱크 게임을 만들어 놨는데 플래시툴을 개발했던 매크로미디어의 마지막으로 진행한(지금은 Adobe가 인수) MAX 2005 Korea에서 강연을 했던 스피커가 만든 게임을 보고 나름대로 비슷하게 만들어 봤었다.

http://dicaland.cafe24.com/nc_project/main.html
사용자 삽입 이미지



    

설정

트랙백

댓글

  • laballade 2007.03.04 08:23 ADDR 수정/삭제 답글

    홈페이지 정말 멋지네요..누가 추천해줘서 예전에 한번 방문한적이 있었는데...
    이제 블로그활동만 하시는 군요.

    • jasu 2007.03.05 01:38 신고 수정/삭제

      안녕하세요...
      언제 제 홈페이지에 방문하신 적이 있으신가 보네요 ^^ 반갑습니다. 블로그를 활용하고 있지만 글세요...또 언젠가 필 받고 개인적인 홈페이지를 구상할지도 모르겠네요...^^ 그 전에 여자친구 생긴다면 블로그 활동만 할 것 같네요 ^^;

Adatto 사이트

Project/Web 2007.03.03 02:50
2005년 9월 5일 오픈한 아다또 사이트

이 사이트는 웹에이전시에 근무한지 6개월이 지난 시점에서 처음 혼자서 플래시 부분을 담당하여 작업했던 사이트다. 지금 보면 여러가지로 미흡한 부분이 많이 보이지만 3일도 안되는 작업 일정동안 나름대로 노력했던 기억이다. 이 사이트는 월간 w.e.b 2005년 10월호에 Site of the Month로 선정되기도 하여 나에게는 의미있는 사이트가 되었다.


http://www.adattorelax.com/main.html






사용자 삽입 이미지


    

설정

트랙백

댓글