top of page

Opinions  I  July 26, 2023  I  Written by 권오윤 이사

당신에게 현실 세계와 다른, 가상의 빈 공간이 주어진다면 당신은 그곳을 어떻게 채우고 싶은가?
공을 들여서라도 현실 세계와 비슷하게 꾸미고 싶은가? 아니면 조금은 쉽고 단순하게 그 공간을 창조하고 싶은가?

UI (User Interface)의 역사는 생각보다 오래되었다. 1961년, 미국의 더글라스 엥겔바트는 컴퓨터와 연결되어 포인팅을 할 수 있는 ‘마우스’라는 디바이스를 발명했고, 그 마우스가 적용된 최초의 PC라 여겨지는 ‘제록스 알토’가 출시 되었을 때 유저 인터페이스의 역사가 시작되었다. 인터페이스의 태동기의 UI 디자인은 디자인이라고 부르기도 민망할 정도로 단순했다. 맥킨토시의 Lisa와 Finder, 마이크로소프트의 윈도우스 1과 아미가의 워크벤치 등을 지나면서 꽤 오랜 기간 동안 디렉토리를 표현하기 위한 아이콘들과 창들만 아주 기본적인 형태로 다소 느린 진화의 과정을 보여왔다.

당신이 알아야 할 UI 디자인 트렌드 10가지 – 1/3편

초창기부터 컴퓨터 역사에서 가장 중요한 역할을 했던 인물인 ‘스티브 잡스’에게 위의 질문을 한다면 그는 뭐라고 대답할까? 그의 대답은 명확하다. 그는 인터페이스에 현실 세계를 그대로 옮기는 것을 좋아했고, ‘그 모양 그대로’라는 의미를 담고 있는 ‘Skeuomophism(스큐어모피즘)’의 지지자였다.

[왼쪽부터 ①제록스 스타, ②맥킨토시 리사, ③아미가 워크벤치]

[왼쪽부터 ①제록스 스타, ②맥킨토시 리사, ③아미가 워크벤치]

스티브 잡스는 초기의 맥킨토시 인터페이스부터 현실 도구들의 형상을 그대로 옮겨오려고 노력했다. 가상의 인터페이스도 현실의 세계와 최대한 비슷하게 보여지는 또 하나의 세계로 창조되길 원했던 것 같다. 그래픽으로 구현할 수 있는 표현이 발전할수록 더욱 정교하게 현실의 모양을 구현했다.

첫번째 트렌드 : Skeuomophism(스큐어모피즘)

[Mac OS의 Trash Bin]

[Mac OS의 Trash Bin]

스티브 잡스의 스큐어모피즘은 아이폰을 통해 모바일 인터페이스가 소개된 후 더욱 현실과 유사해진다. 아이폰의 아이콘들은 작은 공간임에도 단순화되지 않은 디테일한 형태에 빛의 반사와 음영을 모두 반영하고 있다. 뉴스 가판대 앱의 잡지에는 눈에 보이지도 않는 작은 텍스트가, 마이크에는 셀 수 없는 구멍들이 구현되어 있다. 하지만, 모두가 스티브 잡스처럼 인터페이스 내 현실 세계 복제를 좋아했을까? 그렇지는 않았다.

[스큐어모피즘을 대변하는 초기 iOS]

[스큐어모피즘을 대변하는 초기 iOS]

일단, 인터페이스는 현실 세계와는 엄연히 다른 곳이라고 여긴다면, 보다 쉽고 단순하게 그 공간을 채우고자 하는 부류도 있는 것이 당연하지 않을까? 1960년대부터 보다 적은 요소만으로 어수선함을 줄이고, 주목도를 높이는 이른바, 미니멀리즘이 ‘ Less is more’라는 모토와 함께 미술사조로 자리 잡고 있었다. 구글의 창업자들은 미니멀리즘의 신봉자였다. 검색엔진에 검색창 외에 무엇이 더 필요하겠는가? 극단적으로 평범한 페이지에 텍스트만으로 구성된 작가 알란 트로터의 홈페이지 같은 미니멀리즘의 추구는 일시적 경향에 머물지 않고 여전히 활발하게 시도되고 있다.

두번째 트렌드 : Minimalism (미니멀리즘)

​[야후와 구분되었던 구글의 극단적 미니멀리즘]

[야후와 구분되었던 구글의 극단적 미니멀리즘]

2012년이 되면서 스큐어모피즘과 정확히 반대되는 디자인 경향이 대세가 되었다. UI 세계의 지분, 반 이상을 차지하던 애플의 최고경영자가 바뀐 이후 디자인철학의 궤도가 수정되었고, 여기저기서 현실성보다는 보다 뚜렷하고 명확한 주목도를 추구하는 움직임이 나타났다. 이른바 Flat Design (플랫디자인)이 탄생했다.

세번째 트렌드 : Flat Design (플랫디자인)

[왼쪽부터 ①노선을 바꾼 iOS UI, ②극단적 Flat Design을 표방한 Windows8]

[왼쪽부터 ①노선을 바꾼 iOS UI, ②극단적 Flat Design을 표방한 Windows8]

​[왼쪽부터 ①작가 Alan Trotter의 홈페이지, ②My Diet App for iOS]

[왼쪽부터 ①작가 Alan Trotter의 홈페이지, ②My Diet App for iOS]

말 그대로 평평해졌다! 스큐어모피즘을 규정하는 가장 핵심적인 요소였던 Drop Shadow (그림자)가 없어졌다. 미니멀리즘의 기조 속에서 형태도 완전히 단순화되었다. iOS의 정교한 렌즈를 자랑하던 카메라 앱은 픽토그램으로 단순화되고, 해바라기 씨까지도 구현하던 사진 앱도 어느 정도 평면화 되었다. 마이크로소프트는 윈도우스 8을 출시하며 더욱 극단적 평면주의를 표방했다. 한동안 플랫디자인이 스큐어모피즘을 멸종시켰다고 생각했지만, 그 후로도 두 가지의 경향은 공존했다. 두 경향 모두 포기하기 힘든 뚜렷한 장점을 가지고 있었기 때문이다.

스큐어모피즘은 탁월하게 유저의 행동을 유발한다. 현실에서 보던 대상에 대해서는 그 장소가 인터페이스로 옮겨지더라도 어떻게 인터액션을 해야 하는지 바로 알아차린다. 하지만, 현실을 그래픽으로 구현한다는 것은 웬만한 디자인 소프트웨어나 전문기술로는 디자인 퀄리티를 구현하기가 쉽지 않다. 그래서 스큐어모피즘은 다양한 참여자를 배제한다. 다운로드 속도가 느린 곳에서도 스큐어모피즘은 골칫거리일 뿐 단순하고도 창의적으로 참여할 수 있는 기회를 박탈한다.

플랫 디자인의 가장 큰 장점은 일관성이다. 같은 디자인 테마로 만들어졌다면, 사진 앱에서 다이어리 앱으로 이동하더라도 이질감 없이 콘텐츠에만 집중할 수 있다. 스큐어모피즘에서 플랫디자인으로 전환한 많은 사례에서 유저 인터랙션이 늘었다는 리포트가 많다. 반면에 단점은 진입장벽이 낮기 때문에, 그야말로 낮은 품질의 디자인과 기능도 인터페이스 내에 뒤섞여 역설적으로 일관성이 훼손된다는 점이다. (2/3편에서 이어집니다)

​[왼쪽부터 ①DJ 앱의 스큐어모피즘, ②날씨앱의 플랫디자인]

[왼쪽부터 ①DJ 앱의 스큐어모피즘, ②날씨앱의 플랫디자인]

bottom of page