루이까또즈 브랜드 사이트

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

토끼 인형을 살려주세요...

Design/Web 2007. 3. 19. 02:05
네덜란드의 한 웹에이전시 홈페이지다. 홈페이지에 많은 정보를 담지 않아서 무엇을 하는 회사인지는 쉽게 알기가 어려운 사이트라는 생각이었다. 그러나 미션을 완료하고 보니 이 회사가 무엇을 하는 회사인지가 궁금해진다.

그래서 사이트의 이곳 저곳을 뒤적거려 보고 꼼꼼히 훑어 보는 와중에 이 회사가 어떤 회사이며 무엇을 하는 회사인지 알 수 있었다.

참 재미있는 사이트다. 하지만 절대 가볍지 않은 메시지를 전달하고 있는 듯하다. 자사에 대한 많은 정보를 제공하지 않는 대신, 이 회사가 어떠한 마인드를 갖고 무엇을 하는 회사인지는 충분히 알 수 있도록 제작된 듯 하다. 그것도 재미있게 사용자로 하여금 이 회사의 마인드에 동참할 수 있도록 확실한 메시지를 전달을 하고 있다.

적어도 웹에이전시라고 하면 그 회사가 무엇을 하는 회사인지를 우리는 알고 있다. 사용자가 특정 웹에이전시의 홈페이지를 방문하는 목적은 그 회사가 무엇을 하는 회사인지를 알기 위해 방문하는 것이 아니라 그 회사가 어떠한 생각을 가지고 있으며, 어떤 클라이언트와 무엇을 만들고 있는지를 알고 싶어서 일 것이다.

서비스의 본질이 무엇인가를 생각하게 하는 사이트다.


http://www.10mg.nl/

사용자 삽입 이미지
당신에게 주어진 시간은 단 1분,
1분 이내에 당신의 장난으로 숨을 쉬지 않는 불쌍한 토끼 인형을 살려야 한다...


사용자 삽입 이미지
전기 충격 3회 실시... 심장 박동수는 점점 증가하고...


사용자 삽입 이미지
시간이 없다. 수술에 들어간다. 일단 면도기로 배 부위의 털을 깎아주고 팬으로 오픈할 곳을 그리고 메스로 배를 가른다. 대장과 소장을 제치면 HandCursor가 보이고 그것을 끄집어 낸다.


사용자 삽입 이미지
10mg 알약을 오픈한 배에 넣으면 살게 되는데...


사용자 삽입 이미지
1분안에 해결하지 못한 토끼는 죽기도 하고...


사용자 삽입 이미지
살아서 행복해 하기도 한다.






    

설정

트랙백

댓글

  • leezche 2007.03.19 10:07 ADDR 수정/삭제 답글

    아이디어가 좋네요..
    단순하게 회사 소개를 나열한것이 아니라 방문한 사람에게 뭔가를 생각하게 만드는...
    좋은 사이트 보고 갑니다.. ^^

    • jasu 2007.03.19 17:29 신고 수정/삭제

      네... 사실 전 귀엽고 깜찍한 사이트보다는 깔끔한 사이트를 좋아하는데 이 싸이트는 내용이 깔끔해서 올렸습니다. ^^

  • k군 2007.03.19 16:36 ADDR 수정/삭제 답글

    괜찮은 아이디어네요. 쉽게 다가가지 못할만큼의 심오함을 가진 웹사이트.
    그만큼 방문자가 가진 마인드의 가치를 알수있는.. 덜덜덜.

    • jasu 2007.03.19 17:30 신고 수정/삭제

      재미있죠... 회사 사람들에게 돌려봤는데 누구는 징그럽다고 하고 누구는 불쌍하다고 하고...가지각색이네요..쿠쿠

  • 하얀별 2007.04.08 00:27 신고 ADDR 수정/삭제 답글

    너무 재미있네요!! ^^:::
    아이디어가 참.....

    • jasu 2007.04.08 20:06 신고 수정/삭제

      ^^ 디렉터의 딸이 토끼 인형을 가지고 놀고 있는 모습을 보고 생각할 수도 있겠죠...

  • adung 2007.04.24 12:03 ADDR 수정/삭제 답글

    하하 무서워 무서워서 하면서 마구마구 웃었네요~ 하하하

웹브라우저에 대한 생각...

Design/Web 2007. 3. 4. 04:30
사이트를 만들 때면 사용자의 컴퓨터 해상도에 대한 고민을 하게 되는데 요즘 들어 와이드 모니터들이 많이 늘어나고 기존의 1024x768 사이즈가 표준이 되던 시대도 이제는 어느 정도 지난 시기인 듯 싶다. 노트북만 하더라도 대부분 와이드 모니터를 사용하고 있고 출시되는 lcd 모니터들을 봐도 그러하다.

사이트의 완료 단계에서 가장 마지막에 사투를 벌이는 퍼블리시 관련 팀들은 이런 부분에 대한 고민을 하지 않을 수 없다. 해상도 뿐만이 아니라 브라우저의 종류에 따라서도 표준에 따른 결과 물을 만들어야 하는데, 우리나라의 경우는 90%가 넘는 사용자들이 IE를 사용하고 있기 때문에 IE에 맞춰서 작업을 진행하면 큰 무리는 없으나 글로벌한 사이트의 경우에는 다른 부라우저도 고려해야 한다.

국내에서도 IE가 7.0으로 버전업을 하면서 급속도로 파이어폭스를 사용하는 사용자들이 늘어나고 있는 추세인 듯 하다. 현재만 하더라도 10% 가량의 사용자들이 IE가 아닌 타 브라우저를 사용하고 있다고 하니, IE에만 맞춰서 작업한다는 것은 사이트의 퀄리티를 떨어뜨리는 결과를 낳게 된다.

나 도 얼마 전부터 파이어폭스를 사용하게 되었는데 그 계기는 블로그를 디자인 하면서부터 이다. IE에서 제대로 나오던 것이 파이어폭스에서는 문제를 만들고 있는 것을 보며 파이어폭스의 문제로만 생각하고 있었다. 그러나 가만히 자료를 찾아보고 문제가 되는 부분들을 수정하다 보니 그 동안 우리가 너무 IE의 표준 같지 않은 표준에 국한하여 생활하다 보니 생겨난 문제라는 것을 알게 되었다.

지 금의 브라우저들을 보면 양극화 되어 있다. IE인 브라우저와 IE가 아닌 브라우저, 이는 다시 생각해보면 비표준과 표준으로 생각해 볼 수가 있다. IE는 그 동안 독점하는 과정에서 표준에 반하는 기술을 표준으로 굳히려는 노력을 했을 뿐 사용자의 눈높이에 맞는 개발을 하지 못했다. 이로 인해서 새로 출시한 IE 7.0을 보면 어느 브라우저와 너무도 흡사하다는 생각을 하지 않을 수 없다.

또한 브라우징의 속도를 보면 차이를 눈으로 확인할 정도이니 IE 외의 다른 브라우저를 접해보지 않은 상태라면 모르나 접해본 사용자라면 상황이 다를 것이라는 생각이 든다. 물론 지금은 국내에서 대부분 IE를 사용하고 있고 IE에 국한된 표준을 따르는 사이트가 많기 때문에 사용자의 불편으로 쉽게 다른 브라우저로 넘어오지 못하는 사용자도 있는 것이 현실이다. 그러나 이러한 문제의 전환은 바로 지금도 진행되고 있다.  마이크로소프트사에서 브라우저에 대한 개발 노력이 미흡한 이상, 앞으로 브라우저의 대세는 서서히 기울 수 밖에 없을 것이다.

이미 온라인과 오프라인의 어플리케이션 경계선은 무너지고 있다. 이런 시점에서 웹브라우저에 대한 사용자의 눈높이는 높아질 수 밖에 없고 그 눈 높이에 맞추기 위해서는 마이크로소프트사도 지금의 안주에서 벗어나지 않으면 앞으로의 미래는 없을 것이다. 

다수의 사용자가 IE를 사용하는 것이 분명하고 그것에 맞춰서 사이트 작업이 진행되어야 하는 것은 당연한 결과다. 그러나 이제는 사용자가 그러한 좁은 문에서 밖을 내다볼 시기라고 생각된다.



    

설정

트랙백

댓글

  • TP 2007.03.04 04:14 ADDR 수정/삭제 답글

    파이어폭스.. 약간 무거운 감도 있지만 놀라운 부가 기능 때문에 계속 쓰고 있습니다. 다른 것을 쓸 생각을 못하겠네요 ;;

  • 문차일드 2007.03.04 04:33 ADDR 수정/삭제 답글

    PC방가면 IE에 여러가지 몹쓸설정으로 인터넷 이용하기가 정말 짜증나서
    요즘엔 바로 파이어폭스 깔고 서핑한답니다 ^^;

  • 필유 2007.03.04 05:03 신고 ADDR 수정/삭제 답글

    IE 쓰다가 처음 FF 쓰면 다소 무거운 느낌이 들긴 하죠. 하지만 FF만 쓰다 보면 적응이 돼서 못 느끼게 된답니다; 어떻게 보면 바로 이 '적응'이 무서운 거죠. 대다수의 사용자가 IE에만 적응되어 있으니까요. 게다가 (웹)개발자의 경우는 덜하지만 (웹)디자이너들의 IE 의존도 역시 심각한 수준입니다.

  • 이레오 2007.03.04 20:21 신고 ADDR 수정/삭제 답글

    저도 불여우를 씁니다만.. 정말 눈물겹습니다..
    웬만한 미아찾기 단체도 불여우를 지원 안하더라구요..
    몇몇 사람들이 애플컴에는 IE도 잘 안보인답니다..
    저는 해상도가 높아서 깨지는 부분이 많습니다..

  • 저도 피시방가면 웹검색을 못하게 됬어요 ㅠㅠ
    IE사용하면 답답해서 ㅠㅠ

  • Han Sanghun 2007.03.05 17:10 ADDR 수정/삭제 답글

    전 파폭을 사용한지 1년이 넘는 것 같군요 ㅎㅎㅎ
    다 좋은데, 초기 구동시간이 느리다는거...
    파폭, 오페라, IE 차례로 실행시켜보면 파폭이 제일 늦게 열려요 ㅠㅠ

    • jasu 2007.03.05 19:57 신고 수정/삭제

      전 익스플로러가 더 늦게 뜨는 느낌이...
      파폭의 시작 페이지를 기본 파폭 페이지로 설정해 놓으면 빠른거 같더군요...시작 페이지에 따라서 다소 늦는 경향이 있는 것 같아요

  • 미디어몹 2007.03.05 17:50 ADDR 수정/삭제 답글

    jasu 회원님의 상기 포스트가 미디어몹 메인에 링크되었습니다.

    • jasu 2007.03.05 19:57 신고 수정/삭제

      가보니 벌써 내려갔나보네요...쿠쿠

  • barabogi 2007.03.08 12:36 ADDR 수정/삭제 답글

    미디어몹에서 보고 찾아왔습니다. 윈도우용 파이어폭스에서는 문제가 없으나, 리눅스용 파이어폭스에서는 다음과 같이 배경이 아니라 앞면에 놓여 글의 앞부분을 가리는군요. 자세히는 모릅니다만, 플래시 소스 코드 수준에서 수정을 해야 문제가 해결되는 걸로 알고 있습니다. 문제점을 수정해 주신다면 더 멋진 배경이 되지 않을까 싶습니다 :)

    http://laue.postech.ac.kr/~barabogi/temp/jasu.jpg

    • jasu 2007.03.08 22:58 신고 수정/삭제

      리눅스를 사용하지 않다보니 정확히 무슨 문제인지는 확인이 안되고 있네요 아마도 플래시를 div 아래에 위치하기 위해서는 플래시 모드의 Transparent를 적용해서 뚫어야 하는데 기존에는 transparent로 소문자로 적용을 하고 있었습니다만 T가 대문자가 아니기이 리눅스 파이어폭스에서는 앞에 나타나는 것이 아닌가 해서 Transparent로 수정해 놓은 상태입니다.

      플래시가 앞에 나타나는 이유는 플래시를 뚫지 못하는 것 때문인 듯 싶은데 확인이 안되네요...;;

      그런데 미디어몹에 어디서 제 블로그를 보셨는지 모르겠네요...;;

라이브플렉스

Project/Web 2007. 3. 4. 03:27
사용자 삽입 이미지


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

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


    

설정

트랙백

댓글

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

Project/Web 2007. 3. 3. 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. 3. 3. 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. 3. 3. 02:50
2005년 9월 5일 오픈한 아다또 사이트

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


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






사용자 삽입 이미지


    

설정

트랙백

댓글