태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.


'trend'에 해당되는 글 4건

  1. 2012.10.29 스큐어모피즘(Skeuomorphism)이란? (3) by Limho
  2. 2012.02.06 GUI Design Trend Forcasting - Steampunk by Limho
  3. 2011.06.12 [Web Design Trend] 다양한 디바이스 환경에 반응하는 Responsive Web Design-반응형 웹디자인 (2) by Limho
  4. 2010.04.14 “Apple처럼 oooo하게 해 주세요” (4) by Limho
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...