루이까또즈 브랜드 사이트

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

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

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

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

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

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

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

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

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

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


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

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

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

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

    

설정

트랙백

댓글

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

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

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

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

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

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


http://www.10mg.nl/

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


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


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


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


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


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






    

설정

트랙백

댓글

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

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



    

설정

트랙백

댓글

라이브플렉스

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
사용자 삽입 이미지

    

설정

트랙백

댓글

N-collection.com 개인 사이트

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

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

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

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

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



    

설정

트랙백

댓글

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






사용자 삽입 이미지


    

설정

트랙백

댓글