태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'트렌드'에 해당되는 글 7건

  1. 2014.04.03 스팀펑크아트 展 by Limho
  2. 2012.11.13 스팀펑크(Steampunk)란? by Limho
  3. 2012.11.01 [Web Design Trend] Parallax Scrolling by Limho
  4. 2012.10.29 스큐어모피즘(Skeuomorphism)이란? (3) by Limho
  5. 2012.02.06 GUI Design Trend Forcasting - Steampunk by Limho
  6. 2011.06.12 [Web Design Trend] 다양한 디바이스 환경에 반응하는 Responsive Web Design-반응형 웹디자인 (2) by Limho
  7. 2010.04.14 “Apple처럼 oooo하게 해 주세요” (4) by Limho
2014.04.03 00:23

스팀펑크아트 展

장소: 예술의 전당 한가람디자인미술관
기간: 2014년 3월 8일 ~ 5월 18일
시간 : 오전 11시-오후 8시 (관람종료 50분 전 입장마감)
홈페이지 : http://www.artcenterida.com/?sd=3&sc=3_1


첫발
한국의 대중에게 '스팀펑크'라는 쟝르는 용어부터 생소하다. 하지만 알려진 몇 개의 영화를 예로 들어 설명하면 “아~ 그게 스팀펑크였구나~” 하며 친숙하게 느끼는 장르이기도 하다.
이 문화예술사조를 소개하는 전시회가 지난 3월 8일부터 예술의 전당 한가람디자인미술관에서 열리고 있는데 한국의 대중에게 이 장르를 소개하는 첫 번째 전시라는 것에 의미가 크다고 생각한다.

스팀펑크에 대해서는 전시회 홈페이지 브로셔과 pxd블로그의 스팀펑크에 관한 글을 참고하시라.


과거에 대한 회상과 미래에 대한 상상이 낳은 쟝르

스팀펑크는 증기기관 발명으로 비롯된 산업혁명이라는 눈부신 사회변혁에 대한 기억과 빅토리아시대의 생활양식에 대한 추억이 하나의 문화사조로 탄생한 것이다.
한국 땅에서 산업혁명의 시대를 온전히 지내본 경험이 없는 우리들에게 스팀펑크로부터 한 시대의 향수를 느끼기는 좀 힘들다. 하지만 미야쟈키 하야오의 만화영화들과 몇몇 유력한 게임들 그리고 몇 개의 흥행한 영화들에서 스팀펑크양식을 알게 모르게 접하고 시간이 지나 세대간 공감대도 만들어졌다. 이 장르에 관심을 갖게 된 사람들이 많아지고 있고 자신의 예술활동에 응용하는 작가들이 국내에서도 나타나기 시작했다.


참고
미야쟈키 하야오 감독은 '미래소년 코난(1978)’으로부터 ‘바람계곡의 나우시카(1984), ‘천공의 성 라퓨타(1986)’ 마녀배달부 키키(1989), '신비한 바다의 나디아(1990)’, '붉은 돼지(1992)', '하울의 움직이는 성(2004)’ 에 이르기까지 꾸준하게 증기기관 시대를 배경으로 한 만화영화를 만들었고 이 만화영화들은 적어도 20년~30년 차이의 세대를 아우르며 스팀펑크를 접할 수 있게 해 주었다.


첫술
이번 전시는 스팀펑크라는 장르가 탄생하게 된 역사적 배경에 관한 자료들과 대표작가들의 작품들을 만나볼 수 있는 전시회다. 이제 첫술을 떴다. 스팀펑크양식의 영화, 애니메이션, 게임 등에 대한 소개와 체험이 같이 제공된다면 더 풍성한 전시회가 되었을 것이라는 아쉬움도 들었다. 그런데 이번 전시의 명칭은 ‘스팀펑크아트전'이다. 저작권 활용에 관한 계약을 일일이 해야하는 상업물을 전시하기란 어려움이 많았을 것이라 생각하며 아쉬움을 덜었다.

관람Tip
하루 4회 도슨트 시간(오전 11시 30분, 오후 2시 4시 6시) 이 있으니 시간 맞춰 가면 좀더 자세한 설명을 들을 수 있다. 단, 관객이 붐비는 토요일과 일요일에는 도슨트시간이 없다.

-끝- 

[참고##트렌드##] 
[참고##전시와 작가##]


팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2012.11.13 04:15

스팀펑크(Steampunk)란?

본 내용은 위키피디아의 내용 일부를 토대로 작성되었다.

정의

'증기 기관 시대를 연상시키는 아날로그적 첨단 기계 양식'

1980년대 SF소설의 한 쟝르로서, 기계 미학의 시대 표현 양식이다.
19세기 영국 빅토리아 산업 혁명 시대의 증기 기관 동력을 이용한 기계나 그 시대의 복식과 도구들이, 미래 또는 알 수 없는 연대의 환경으로 등장하는 양식이다.
증기 기관 시대의 메카니즘과 생활 스타일이 (전기, 전자, 디지털 시대로 넘어오지 않고) 현재나 미래에까지 고도로 발달한 상황을 가정한 양식이다.
주로 판타지 세계를 그린 영화, 애니메이션, 게임에서 많이 차용하고 있으며 최근에는 아트, 패션, 디자인, 음악 분야에서도 응용하고 있다.

[관련 참고 용어]
Cyberpunk 사이버펑크
- 1980년대에 만들어진 용어로 '전기-전자 미학의 양식'을 의미한다.
- '스팀펑크'는 '사이버펑크'라는 단어의 운에 맞춰 후에 만들어진 용어이다.
- Mechanics는 스팀펑크,  Electronics는 사이버펑크와 연결지을 수 있다.
- 대표적인 영화 작품으로 마이너리티 리포트, 매트릭스, 제5원소, 공각기동대 등이 있다.


역사


- 1927년의 영화 'Metropolis'에 등장하는 도구들과 미쟝센을 보면 '기계 시대의 미래에 대한 상상'을 엿볼 수 있는데, 우리와 같은 후대 사람들은 그 상상의 한계를 느끼면서도 '고도로 발달된 기계 문명'이라는 영감을 받을 수 있었다.
- 이후 몇몇 소설 속에서 고도로 발달된 기계도시에 대한 묘사가 있었다.

- 1985년 영화 Brazil은 스팀펑크 스타일이 부흥하는 계기가 되었고, 1999년 영화 Wild Wild West처럼 완성도 높은 수준으로 발전하였다.

왼쪽부터  Metropolis, Brazil, Wild Wild West


- 1980년대부터 미야자키 하야오는 많은 애니메이션 작품들에서 스팀펑크 양식을 차용하고 있다.
아날로그 향수를 자극하는 판타지적 요소를 가진 스팀펑크 스타일을 활용하여 자연파괴에 대한 경고, 인간성 회복이라는 메시지를 전달하고 있다.

왼쪽부터 천공의 성 라퓨타, 바람계곡의 나우시카, 미래소년 코난, 하울의 움직이는 성


전자 제품에 대한 장식적 적용 사례



 최근의 '모던 스팀펑크' 제품 사례


왼쪽 제품:  Philco retro steampunk concept PC    오른쪽 : itypewriter

GUI에 적용된 사례

[참고##트렌드##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2012.11.01 07:40

[Web Design Trend] Parallax Scrolling

본 내용은 위키피디아의 내용 일부를 토대로 작성되었습니다.

1. 정의

Parallax Scrolling : 모니터상에서 화면이 (상하좌우)스크롤될 때, 배경 이미지들과 오브젝트 이미지들간 시차가 발생하여 스크롤되도록 하는 기법. 
Parallax : 시차, 관찰 위치에 의한 대상물의 변위 

[관련 참고 용어] 
Belt Scrolling
화면상의 특정 오브젝트를 조작하여 그 오브젝트 움직임의 양과 방향에 따라 화면이 스크롤되도록 하는 기법. 

게이머의 컨트롤에 의해 주인공 캐릭터(오브젝트)가 상하좌우 돌아다니면 그 방향의 새로운 배경과 오브젝트들이 스크롤되어 나타나 주어진 임무를 수행하는 아케이드게임에서 많이 사용하는 방식이다.
플래쉬 사이트에서 사용자가 조작하는 마우스 포인터의 움직임에 따라 화면이 스크롤되어 나타나는 것도 벨트 스크롤의 일종이라 볼 수 있다.

 
2. 역사 

디즈니사가 1940년대부터 애니메이션 제작에 사용한 '멀티플레인 카메라(Muntiplane Camera)촬영 기법'에서 그 기원을 찾아볼 수 있다.
카메라를 횡으로 움직이면 카메라에 가까운 이미지가 먼 이미지보다 더 많이 움직이게 되어 자연스런 공간감을 만들 수 있다.줌인(줌아웃)을 하면 가까운 이미지는 화면 뒤로 물러나고 먼 이미지가 점점 커져 나타나게 된다.

참고영상 - 월트 디즈니 애니메이션 https://www.youtube.com/watch?v=R5yJCncdiAc 

상당히 긴 컨텐트가 제한된 크기의 모니터내에서 오브젝트간 시차를 두고 스크롤되는 Parallax Scrolling 개념이 처음으로 적용된 사례는 1982년 Moon Patrol이라는 아케이드게임이다.

달에서 임무를 수행하는 차는 배경이 왼쪽으로 자동 스크롤됨에 따라 전진하는 것처럼 보이며 원거리의 산은 근거리물체들보다 천천히 이동하여 화면 전체에 공간감이 느껴지도록 하고 있다.
(이후 이러한 스크롤 방식의 아케이드 게임이 쏟아졌고 8-90년대 전자오락실의 추억을 간직한 사람이라면 흔히 볼 수 있었던 게임방식이었다.)

최근에는 안드로이드폰 Idle화면에서도 app icon들과 배경이미지의 공간감을 연출하기 위해 좌우스크린 이동시 적용되어 있다.


3. 구현방법


위에서 설명한 바와 같이 Layer를 사용하여 Layer간 시차를 주는 방식으로 구현하고 있다.
게임에서는 이미지의 메모리용량을 줄이기 위해 배경 패턴 타일을 반복하여 흐르게 하는 방법을 주로 쓰며, 메모리 크기가 중요한 웹사이트에서도 응용할 수 있는 부분이다.

4. 웹사이트에서의 구현기술


과거 Parallax Scrolling을 적용한 웹사이트들은 주로 Flash로 만들어졌다.
Flash의 호환 문제와 swf에 포함된 컨텐트들이 검색되지 않는 점 등으로 Flash의 역동적인 효과들을 대체하는 HTML기반의 코드들이 개발되고 있으며 Parallax Scrolling의 경우 jQuery, 자바스크립트, CSS3를 사용하여 구현이 가능하다.

5. 어떤 웹사이트에 적용하면 좋은가

애니메이션과 게임에서 주로 사용되었다는 점에서 알 수 있 듯,
- 이야기 형식(스토리텔링 기법)이 웹사이트컨셉에 어울리는 경우
- 메세지 전달을 위해 다른 공간으로의 자연스러운 이동이나 오브젝트들간의 유기적인 동작들이 필요한 경우
- 스텝을 나누어 메세지를 전달하면서 스텝간 연결 흐름을 자연스럽게 하고 싶은 경우
에 구현하면 좋다.
이외에도 One Page 웹사이트로 제작 시, 배경 이미지를 고정시키고 컨텐트만 스크롤되게 하여 이미지 용량을 줄이고 싶은 경우, 또는 공간감 원근감을 강조한 컨셉의 웹사이트를 만들고 싶은 경우에도 사용해 볼 수 있겠다.

6. Parallax Scrolling으로 구현한 웹사이트 사례 모음

본 글의 최하단에 링크된 List Pages에서 소개된 웹사이트들 중 몇가지를 추려 보았다.

Peugeot hybrid4



Angryorchard



Otavamedia



Bagigia



Tinke



Air Jordan 2012
 
[참고] List Pages
- http://www.wabbaly.com/parallax-scroll-effect-web-design/
- http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design
- http://www.topdesignmag.com/20-examples-of-one-page-websites-that-are-using-parallax-scrolling/ 

[참고##트렌드##] 


팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2012.10.29 08:14

스큐어모피즘(Skeuomorphism)이란?

스큐어모피즘에 대한 이야기는 이미 pxd블로그(http://story.pxd.co.kr/577)에서 다룬 바 있다.
본 내용은 위키피디아(http://en.wikipedia.org/wiki/Skeuomorph)의 내용을 기반으로 인터넷에 흩어진 기사들을 참고하여 필자의 의견을 덧붙인 글이다.



 1. 용어 정의 : Skeuomorphism(스큐어모피즘) 또는 Skeuomorph(스큐어모프)

그리스어로 Skeuos는 Vessel(용기) or Tool(도구), morphe는 Shape(형태)을 의미한다.
'어떤 도구의 형태,형식'이라는 뜻으로 '스큐어모피즘'을 의역해 보면 '원래 도구의 형태를 그대로 따라가는 양식' 정도의 풀이가 가능하겠다. 
쓰임새 또는 재료에 따라 자연스럽게 발전한 도구의 형태와 요소들이, 재료나 매체가 변화함에 따라 재구실을 못하게 되더라도 그 형태와 요소들이 의도적으로 유지되는 것을 가리킨다. 

[관련 참고 용어]
Real-Life Metaphor  
실세계의 모습과 현상, 사물의 형태나 상황을 다른 매체에 그대로 재현하는 방식으로 한국 디자이너들 사이에서는 '리얼메타포'라는 말로 사용하기도 한다. 
도구의 물질적인 형태형식을 모방한다는 스큐어모피즘에 비해 의미가 포괄적이다. 
Material Metaphor 
실생활에서 쓰이는 도구의 모양,재질감 등을 다른 매체에 그대로 구하는 방식을 말한다. 
Minimalism
쓸모없어진 요소의 잔재와 장식적 요소가 강조되는 스큐어모피즘과는 대척되는 디자인양식이다.



2. 역사적 예와 기타 예시


고대에 식물줄기로 엮어 만든 바구니를 토기화하면서 토기표면에 줄기로 엮은 듯한 패턴을 넣기도 했다. (장식효과와 함께 새로운 재료로 만들어진 토기가 기존의 바구니용도임을 알려주기 위함일 것이라 추측된다.)

그리스 신전이 나무로 지어지던 시대의 기둥처마와 같은 기능성 장식들이 돌기둥으로 재료가 바뀐 이후에도 유지되었던 것처럼, 새로운 재료가 갖는 특성에 맞춰 형태나 양식을 바꾸기보다는 이전의 익숙했던 모습을 그대로 재현함으로써 신을 믿는 대중에게 익숙함과 심리적인 안정감을 주려는 의도가 있었다.

철재 식기를 보다 값싼 도자기로 바꾸는 과정에서, 또 나무나 철재로 된 비싼 제품들이 플라스틱 제품으로 바뀌면서 이전의 모양이나 양식이 그대로 유지되기도 하였다.

이렇게, 시간이 지나 재료의 변화로 불필요한 요소가 되더라도 그것을 그대로 유지한다는 점이 저열한 사상으로 평가되거나 비효율적이라는  비난을 자연스럽게 받으며 스큐어모피즘은 '잔재(殘滓)'의 이미지를 갖게 되었다.
 

[기타 예시]

- '돛과의 연결기능이 없는 Bowsprit'. 심지어 사람이 설수 있도록 해 놓았고 영화 '타이타닉'에서 두 주인공이 뱃머리 러브씬을 찍은 부분이다.
- 주머니기능이 없는 옷주머니
- 나무바퀴의 살모양을 따라한 자동차휠
- 씨가의 코르크처럼 보이는 누런색 담배종이
- 휴대폰 사진찍기기능의 셧터소리
- 자동차내 플라스틱 대쉬보드의 가죽표면패턴
- 샹델리에의 촛불모양전구
- '저장'을 뜻하는 (사라진 저장매체인)3.5인치 플로피디스크 아이콘
- 디지털영상을 필름으로 찍은 것처럼 부드럽고 고급스러운 효과주기



3. Digital Skeuomorphic Design


재료의 변화와 더불어 최근에는 디지털 매체로 변화함에 따른 스큐어모피즘이 두드러진다.
대부분의 아날로그제품들이 디지털화되면서 기존의 아날로그의 모습을 그대로 차용하는 경우가 많아졌고 특히, 컴퓨터부문에서는 GUI역사와 함께 등장한 Desktop메타포 이후 각 애플리케이션들이 사용자에게 직관적으로 기능을 인지할 수 있도록 오프라인 제품의 모습을 그대로 모사하는 경우가 많아졌다.

새로운 매체를 맞아 새로운 방식을 모색하지 않고 생각없이 실사를 그대로 재현한 그래픽들의 천박함을 지적하는 목소리가 높아졌고, 일부 GUI디자인 가이드에서는 실사를 묘사하는 GUI에 대해 '불필요한 정보가 많고 복잡하며 난해해지는 경향이 있으니 지양해야한다'고 명시하기도 했다.



4. 장점과 단점 그리고 논란의 시각들 (Digital Skeuomorphic Design)


4.1. 장점 
익숙함의 제공, 낯설음에 대한 배려
- 아날로그적 사용감을 그대로 적용하여 제품에 대한 친밀감을 높일 수 있다.

- 시각적으로 어필할 수 있는 여지가 많다.
- 사물을 그대로 보여주어 직관적이기 때문에 사용법을 미리 짐작할 수 있게 해 줄 수 있다.

4.2. 단점(비난 받는 점)
잔재의 이미지, 새로운 고찰이 없는 사상의 저열함, 과다한 정보
- 아날로그에서는 편했던 조작이 디지털화면으로 옮겨올 경우 불편해지고 화면을 쓸데없이 많이 차지하는 경우가 많다.
- 하나의 시스템 안에서 어플리케이션들이 각각의 대표적 기기의 형태를 그래픽화한다면 전체 시스템 그래픽 look and feel의 일관성을 갖기 힘들다.
- 그 기기를 실제로 사용해보지 못한 사용자가 다수라는 점에서 실생활의 경험을 잘 전달하지도 못한다 볼 수 있다.
- 디자이너가 새로운 매체에 대해 그리고 디자인에 대해 덜 고민하게 되어 창의적 결과물을 기대하기 힘들다.
- 디자인컨셉(실제 경험을 그대로 화면에 옮긴다)이 명확하기 때문에 디자인 평가에서 비난을 피할 수 있다는 점을 디자이너들이 악용할 수 있다.

4.3. 논란의 주요 시각들
- 주로 인쇄 매체를 다루는 정통 그래픽 디자이너들이 디지털 스크린에서의 스큐어모피즘에 대해 부정적인 편인데 디지털 매체에서의 새로운 접근의 일종으로 인정할 필요가 있다는 시각도 있다.
- 건조하고 불친절한 표현보다는 스큐어모피즘이 사용자에게 부드럽게 다가가는 측면이 있다.
- 인지를 더 쉽게 하기 위해 사용된다고는 하나 실제로는 더 사용성을 저해한다는 의견도 있다.
- 주로 Over-Designed된 느낌이다.
- 다소 키치스럽다고 느껴진다.
- 정갈하지 못하며 너무 잰 체하는 그래픽으로 느껴져 반감을 살 수 있다.
- 때로는 인스타그램처럼 향취를 불러일으켜 사용을 유도하는 긍정적인 면도 있다.
- 정보가 과다한 스큐어모피즘보다는 MS의 메트로UI처럼 정제된 정보를 제공하는 것이 낫다.
- 표현의 문제, 스타일의 문제다. 무엇이 좋다 나쁘다가 아니라 적절하게 사용하였느냐와 어떤 표현이 사용자의 경험을 좋게 하느냐의 문제다.


5. GUI분야에서 스큐어모피즘을 선도/고수하는 애플


매킨토시를 통해 컴퓨터시스템 초기부터 Graphic User Interface의 부흥을 이끈 애플의 소프트웨어에서 많이 애용되는 그래픽 양식이 스큐어모피즘이다.
앞에서 말한 긍정적인 측면에서 채용한 것이지만, 애플 내부에서도 스큐어모피즘에 대해 비판의 목소리가 있다고 한다.
매뉴얼 없이도 누구나 바로 쓸 수 있는 제품을 만든다는 애플 제품의 목표와 부합되어 채택되었고, 이제는 애플의 아이덴티티가 된 그래픽 철학이기에 쉽게 바꿀 수 있는 부분이 아니어서 진화해 갈 것일라 예상해 볼 수 있다.


애플 스큐어모피즘에 대한 필자의 의견

애플 소프트웨어의 모든 화면들이 스큐어모피즘을 적용한 것은 아니라 프로그램을 구분하는 아이콘과 제품의 첫인상을 좌우하는 메인 스크린에 주로 사용하고 있다. 물론 몇몇 app들에서 과다사용되었다는 지적이 있고 특히 e-book의 경우 책장과 책을 그대로 모사해 버렸지만 대부분 app에서의 세부기능을 다루는 화면들은 Basic-Component로 구성된 화면들이 많다.
몇몇 app에서 수위 조절에 실패했지만, 전 제품에 대해 일관된 인상을 보여주고 있고 각 제품들 간에 가져야할 분별력을 갖추고 있다고 평가한다.
그래도, 대중들이 애플의 스큐어모피즘 그래픽에 식상해할 만한 시기이긴 하다.


6. 스큐어모피즘의 적절한 사용이라 평가받는 디자인들

- Kindle은 E-Ink-Screen방식으로 디지털 제품이지만 눈부심없이 인쇄책자의 경험을 그대로 구현하여 사용자들에게 좋은 경험을 제공하고 있다.

- 사례를 계속 추가할 예정이다.


7. 참고사이트

http://www.quora.com/Skeuomorphism : 소셜 Q&A 서비스인 '쿠오라'에 종종 스큐어모피즘에 대한 질문과 답변이 올라오곤 한다.

http://skeu.it/ : 스큐어모피즘 그래픽들을 모아놓은 사이트

- 애플 2인자, 왜 갑자기 떠나는가? 아이뉴스24 (2012년 10월 30일): 스큐어모픽 디자인을 둘러싼 스콧 포스톨과 조너단 아이브와의 갈등도 원인일 수 있다는 기사 

[참고##메타포##]


팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 1 Comment 3
Ad Test...
2012.02.06 12:34

GUI Design Trend Forcasting - Steampunk

디지털기기의 홍수, Apple발 미니멀리즘 강세 속에서 사람들은 아날로그향취와 사람손때의 애틋함을 점점더 느끼게 된 것 같습니다.
이런 분위기에서는 뭐든 나무로 만들면 사람들의 관심을 받을 수 있죠. :) 


이미지출처 : Wood Block Clock (www.geekologie.com), Wood Keyboard (www.aving.net)

또, 사람들은 전자음의 디지털기기보다는 섬세한 수공기계의 매커니즘에서 장인정신을 느끼고 열광합니다.
디지털시대의 이러한 감성은 많은 분야에 영향을 줄 것이라 생각합니다. GUI분야도 마찬가지일 것이고요. 이런 감성을 만족시킬 만한 것이 있다면 그것이 다음 트렌드일 것입니다.

음.. 우선, '트렌드(Trend - 경향, 추세, 대세, 유행)'에 대해 먼저 얘길 해야겠군요.
트렌드는 크게 6개월~1년의 단기유행(마이크로트렌드)과 수십년의 생명력으로 전분야에 영향을 주는 메가트렌드가 있고 그 중간급들을 '생명력과 분야파급력'기준으로 나눕니다.
그리고 트렌드의 싸이클을 관찰해 보면, 이전의 트렌드가 가지지 못한 성향을 충족하면서 그 식상함을 극복하는 것들이 새로운 트렌드로 사람들에게 받아들여지게 되죠. 물론 이전 트렌드의 강점은 어느정도 유지하면서 말입니다.

이런 의미에서 요즘의 제품과 GUI디자인 주류트렌드인 '직관적 Simplicity가 인간감성의 뿌리'라는 컨셉 이 소유하지 못한 성향을 충족하면서, 그 식상함을 어떻게 극복할 수 있을까 라는 질문에서부터 그 다음 트렌드를 예상해 볼 수 있을 것 같습니다.

여러가지 트렌드를 예상해 볼 수 있겠지만, Steampunk 스타일이 그 후보들 중 하나일 수도 있다는 생각입니다. (참고: 스팀펑크란?)


이미지출처 : www.datamancer.net

Steampunk는 1980년대 SF소설에 나타난 양식으로서 최첨단의 컴퓨터가 아닌 영국 빅토리아 산업혁명시대의 증기기관동력을 이용한 미래도구들이 등장하는 데에 기원을 두고 있습니다. 요즘은 영화와 에니메이션, 게임에서 많이 차용하고 있죠.
위키사전 : http://en.wikipedia.org/wiki/Steampunk
              http://ko.wikipedia.org/wiki/스팀펑크

지난 트렌드의 감성적 재해석과 업그레이드라는 측면에서 비슷한 스타일로는,
증기기관이라는 범주가 필요조건은 아닌, 미래적 복고스타일 Future Retro Style,


이미지출처 : http://smallsuncustom.blogspot.com

과거 각광받은 제품을 현대적 감각으로 재해석한 Updated Classic Style 이라는 것도 있습니다.

이미지출처 : www.vm.com

현재 대세진행 중인 극단의 Simple, Rational하고 건조한 GUI디자인이 갖지 못한 감성을 가지고 있고, 기존 트렌드가 가지고 있는 '쿨함'유지할 수 있는 방향으로 Steampunk스타일이 재해석된다면 괜찮을 것 같습니다. 잡스러움을 정리한 좀더 절제된 표현으로 업데이트한다면 말이죠.
트랜지션이나 인터렉션 이펙트 등에 기계적 미학을 절제있게 적용한다면 GUI디자인 주류 트렌드로 한자리 잡을 수 있지 않을까  조심스럽게 예상해 봅니다. ^^;

문제는 GUI디자인 트렌드들이 제품디자인과 상관관계를 갖고 있었다는 점인데요.
제품디자인의 컨셉이 Updated Steampunk Style이라면 두말할 것 없이 잘 어울리겠지만, 굉장히 모던하고 심플한 제품에도 어울릴 만한 Steampunk Style의 그래픽은 연구가 필요합니다.

GUI뿐만 아니라, 현재의 미니멀한 제품디자인의 그 다음 트렌드 중 일부로 '개인의 개성을 강조한 Updated Steampunk Style'을 상상해 볼 수 있지 않을까요?

음... 아님 말고요. :) 

[참고##트렌드##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2011.06.12 23:20

[Web Design Trend] 다양한 디바이스 환경에 반응하는 Responsive Web Design-반응형 웹디자인

PC모니터해상도는 점점 커지고 있고, 모바일Device의 해상도 또한 다양해지고 있습니다.
급변하는 환경에서 새로운 Device가 출현할 때마다 해상도Porting작업을 해야 한다면 비효율이겠죠.

지금 이 시간에도 '모바일버전 제작', 'PC버전 제작', 'N-Screen지원' 을 얘기하며 머리를 싸매고 있을 분들이 많을텐데 Responsive Web Design이 그 비효율을 줄일 묘안으로 떠오르고 있습니다. 게다가 굉장히 적절해 보입니다.

Responsive Web Design은 HTML파일 한 벌로 PC모니터, 태블릿PC, 모바일Device, TV 등의 다양한 스크린해상도에 대해 각각 최적화된 레이아웃과 인터페이스를 제공하는 웹디자인기법으로서 이러한 웹사이트들이 속속 만들어지고 있습니다.


적용 사이트 모음 : http://mediaqueri.es/  (이미지 클릭하여 웹사이트 오픈 후, 브라우져를 리사이징해 보세요.)


이미지출처 : http://mediaqueri.es/


넓은 의미에선 '사용자의 사용환경과 행동패턴에 유기적이고 적절하게 반응(대응)하는 웹요소들에 대한 총체적 디자인'을 말하는 것이겠지만, 현재는 사용환경에 가장 큰 영향을 주고 있는 다양한 해상도 지원이 초점인 것 같습니다.
 
자바스크립트나 css3의 미디어쿼리를 이용해 스크린 가로사이즈들을 규정하고 해상도별 임계치에 따라 임계치까지는 화면요소들의 Resizing이 일어나도록, 임계치를 벗어나면 Re-layout(Re-Grid)하는 방식으로 제작하고 있네요.
아래의 웹사이트처럼 Resizing을 주로 적용한 예도 있습니다.
http://www.designmadeingermany.de/magazin/5/

물론, 이러한 시도와 연구는 과거에도 있었습니다.
폰Device까지를 지원하진 못했지만 화면요소에 비율을 적용한 html, 플래쉬를 이용한 이미지 리사이징 등 다양한 디바이스에서의 웹브라우징을 지원하기 위해 노력했었죠.
http://www.meritzgroup.com/

이와 더불어 웹이 1024px해상도(960 Grid)를 기준으로 지원할 것이냐, 최근 대세인 1280px해상도(1140 Grid)까지를 지원해야 하느냐에 대한 논의도 활발합니다.
http://www.qbn.com/topics/646761/
http://news.ycombinator.com/item?id=1886187

Responsive Web Design에 대한 보다 상세한 정보는 아래의 Article을 참고하시기 바랍니다.
http://www.alistapart.com/articles/responsive-web-design/
예시디자인 - http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

아무튼 Responsive Web Design이 앞으로 어떻게 더 발전할 지 기대됩니다. 



* 주요 용어 : Fluid Grids, Flexible Images, Media Queries

* Grid 자료 다운로드
http://lessframework.com/
http://cssgrid.net/
http://adapt.960.gs/ (Javascript)

[참고##트렌드##]

위 내용을 구성하는 데에 정보를 주신 @keywonc 님께 감사드립니다.


팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 2
Ad Test...
2010.04.14 18:19

“Apple처럼 oooo하게 해 주세요”

어플리케이션 GUI 디자인을 의뢰하는 클라이언트들로부터 한동안 들어야 했던 말은 “iTunes 처럼 oooo하게 해 주세요” 였습니다..  oooo은 다양한 표현들이었지만 어쨌든 ‘iTunes처럼’ 으로 시작하는 요구 사항들이었죠. 이후 모바일 프로젝트에서는 “iPhone처럼(보다) oooo하게 해 주세요” 라는 말을 가장 많이 들은 것 같습니다.
이렇게 관용구처럼 쓰이게 된 데에는 애플의 뭔가가 많은 사람들을 감동시켰기 때문일 겁니다. 자타공인 최고라 할 수 있는 Apple사의 제품 디자인, GUI 디자인에 대해 짚어 보고 싶었습니다.

삼성, LG 같은 가전 제품 회사가 100가지 메뉴를 골고루 갖춘 식당이라면 Apple은 전문 메뉴를 가진 식당에 비유할 수 있겠습니다.  이 점이 제품의 일관된 이미지를 관리하는 데에 유리했고, 이런 강점이 GUI디자인 컨셉과 스타일 결정에도 유리하게 작용했던 것 같습니다. 그러나 그런 환경이 똑같이 주어진들 아무나 할 수 있는 것도 아닐 겁니다. 몇 년간 트랜드를 이끌어 갈만한 미래의 디자인 아이덴티티를 끌어 내기 위해 피나는 시도와 도전, 고뇌의 과정이 있어야겠죠.

오랜동안 MAC OS GUI테마였던 Apple platinum은 GUI 역사에서도 한 획을 그은 그래픽이었지만 Apple의 제품 디자인과는 별개로 진화했던 것 같습니다.

iMAC과 Apple yosemite 기종부터 Apple은 보다 선도적인 제품 소재(Material, Color, Finishing)를 선택하여 제품에 적용해 왔고 소재 컨셉을 그대로 GUI 디자인에 표현하기 시작했죠.

Aqua style은 제품 디자인뿐만 아니라 그래픽 분야에서도 선풍적이었습니다.

다시, Apple 제품의 이미지를 만들 제품 소재(aluminium)를 신중하게 선택하고 GUI에 적용했습니다.

하드웨어와 소프트웨어(OS)를 같이 만들어 제품 라인 전반에 반영한다는 것이 얼마나 위대한 지를 보여 줍니다. Apple에게는 컴퓨터를 하드웨어와 소프트웨어로 나눈다는 것이 의미가 없는 것 같습니다. 그 둘은 몸과 마음 같아서 제품을 만들 때 떨어뜨려 생각할 수 없다는 철학을 느끼게 합니다.

iPod / iPhone의 GUI도 같은 맥락에서 살펴 보면, 전면의 강화 유리 재질감이 적용되었다고 볼 수 있습니다. 기능에 따라 터치 외관 부분이 매번 실재 유리 재질의 콤포넌트들로 (물리적)재구성된다고 상상했을 때 도출될 수 있는 표현이라고 저는 생각합니다.

어떤 것을 상상해서 표현하느냐는 GUI 스타일과 컨셉을 결정하는 데 중요한 고민거리입니다. 그런데 많은 GUI 디자이너들이 이러한 고민 없이 애플 스타일의 완성도만을 따라 그리는 일이 많은 것 같습니다. 어쨌든 지금까지 언급한 것처럼 하드웨어 이미지와 소프트웨어 이미지가 자체의 퀄러티뿐 아니라 서로 조화를 잘 이루어 사람들의 마음을 움직이게 했던 것은 아닐까요.

음... 애플 모니터를 보다가 언뜻 스친 생각인데요... LCD/LED패널이 꺼졌을 때 Black이 아니라 aluminium 컬러와 질감으로 보여질수만 있다면 모니터를 이렇게 만들지는 않았을까요? ^^; (좀 오버인가? 어디까지나 제 상상입니다.)

이쯤되면 애플의 그 다음이 궁금해집니다.
알 수 없지만^^, 새로운 기술의 가치를 가장 이상적으로 구현하는 애플이라면, 요즘 주목을 끌고 있는 투명 패널에 관심이 있을 수도 있겠다는 생각이 듭니다. 물론 예전에 다소 허접하게 투명 body를 선보인 적이 있긴 하죠.

삼성이 투명 amoled를 개발했습니다.
그런데 투명 패널과 가장 잘 어울리는 OS GUI 디자인과 기막히게 정리된 내장이 다 들여다 보이는 투명 컴퓨터 본체를 만들어낼 만한 곳은 애플 밖에 없어 보이네요...:)

투명이든 뭐든 애플이 또 어떤 상상력으로 사람들을 즐겁게 해 줄 것인 지, 동종 업계 사람들을 또 얼마나 난감하게 만들 지 궁금합니다.

[참고##UI 역사##]


팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 4
Ad Test...