brunch

매거진 융합의 눈으로 세상 바라보기

라이킷 168 댓글 33

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김태훈 Feb 24. 2016

10분만에 이해하는 아이폰 디자인 철학_액체에서 빛으로

iOS 7 에서 시작된 아이폰의 빛 디자인 도전기

아이폰은 언제나 놀라움과 감탄의 중심에 있었습니다. 많은 경쟁자들 속에서도 여전히 독보적 위치를 차지하고 있는 이유 중 하나를 저는 친숙함과 혁신성이라는 이율배반적 가치를 동시에 가지고 있기 때문으로 생각하는데요, 그렇다면 어떻게 아이폰은 친숙한 아름다움과 혁신적인 새로움을 동시에 제공하는지 그 디자인 철학을 최근의 디자인을 중심으로 쉽게 분석해 보았습니다. 이름하여 10분 만에 이해하는 아이폰 디자인 철학, '액체에서 빛으로’.

I 처음으로 ‘빛을 만진’ 21세기 인류

인간은 자고로 빛을 만진 적이 없었습니다. 또한, 빛이 나는 발광체를 바라보며 산 것도 그리 오래되지 않았답니다. TV, 컴퓨터 모니터 등 직접 발광 화면을 바라보고 산지가 겨우 한 세기 남짓하지요. 그러다가 최근 10년 사이에 인류는 빛을 보는 것을 너머 빛을 만지는 새로운 경험을 시작합니다. 스마트폰으로 대표되는 이러한 새로운 행동 변화의 선두에 아이폰이 있었죠. 하지만 새로움은 언제나 심적 반발을 야기하기 마련입니다. 때문에 세상에 없던 새로운 카테고리의 제품은 어지간히 잘 만들지 않으면 시장에서 받아들여지지 않거나 인기를 얻는데 상당한 시간이 걸리기 쉽죠. 아이폰은 그런 면에서 빛을 만진다는 큰 새로운 경험 변화에 도전했습니다.

<떨어져서 보던 화면을 이제 코앞에서 보죠>

I 빛을 만지기 전에 먼저 액체를 만지게

이 새로운 경험의 적응을 위해 아이폰은 인간에게 익숙한 경험을 차용(메타포)하여 화면을 디자인합니다. 빛을 만지는 익숙하지 않은 경험에 지금까지 인류가 해왔던 익숙하고 긍정적인 경험을 입혀서 제안을 하는 거죠. 그럼 사용자들이 거부감을 덜 느끼며 새로운 경험에 적응하게 되겠죠? 이렇게 아이폰이 처음에 적용한 디자인 컨셉은 '액체(물)' 이었습니다. 어떤 의미인지 iOS 의 버전 1 부터 6 까지를 먼저 한 번 보시죠.

<아이콘들이 탱글탱글 액체의 메타포를 가지고 있습니다>

아이폰의 초기 화면 디자인에서 사람들이 열광했던 점 중 하나는 투명한 푸딩 같은 아이콘이었습니다. 만지면 탱글탱글 움직일 것만 같아 한 번 눌러보고 싶게 만드는 볼록하고 투명한 아이콘. 이전 화면 기기에서는 볼 수 없었던 '투명한 물질성'을 극대화해서 표현했죠. 혹시 아이폰 5 나 6 이후, 즉, iOS 7 부터 사용하신 분들은 잘 모르실 수도 있어 먼저 이 당시의 아이폰 아이콘들을 구경 한 번 해볼까요? 이런 스타일의 아이콘 기억하거나 보셨던 분들 많을 겁니다.

<건드리면 손에 젤리 한 방울 묻을 것 같은 탱글함>

만지면 찰랑찰랑할 것도 같고 쫀득쫀득할 것도 같은 액체형 푸딩 같은 느낌의 아이콘은 스스로 빛을 내는 화면이라는 발광체의 특성을 잘 활용하고 있었습니다. 그림자가 생길 수 없는 화면의 특성 상 투명성과 반사 느낌을 이용해서 평면인 화면에 실제성을 디자인한 거죠. 투명성과 반사라고 하면 딱 떠오르는 게 있죠? 바로 액체 – 물입니다. 이렇게 화면을 만지는 경험을 액체라는 메타포를 사용하여 디자인하였고, 이미 인류에게 익숙한 액체나 젤리 등을 만지는 경험은 부정적이거나 꺼려지는 것이 아니라 재미있고 신기한 경험이라 긍정적으로 새로운 경험을 적응시킬 수 있었습니다. 게다가 끊임없이 움직여야 하는 화면의 특성 상 유동성이라는 성질을 가진 액체는 매우 적합한 비유였죠. 또한 효과의 극대화를 위해 버전이 더해갈수록 투명함의 깊이와 반사광의 표현이 정밀해집니다.

I 통일된 액체 컨셉 디자인 요소들

이렇게 발광체인 화면의 성질과 어울리는 액체성 컨셉의 디자인은 아이콘뿐만 아니라 배경화면 등에서도 통일성 있게 발견됩니다. iOS 4 부터의 아이폰은 배경화면을 적용하기 시작하는데요, 투명한 창문의 물방울이나 일렁이는 수면 등의 배경화면을 통해 액체 컨셉을 더욱 강조합니다. 처음으로 적용한 배경화면이 액체인 것은 우연이 아닌 거죠.

<기억 나시죠? 아이폰 4의 물방울 배경화면>

이렇게 아이폰은 액체를 만지는 감각을 사용하여 빛(화면)을 만지는 새로운 경험을 부드럽고 자연스럽게 적응시킵니다. 물이 흐르는 듯 매끄러운 화면 밀기 동적 인터페이스, 화면 끝까지 밀었을 때 화면 밖으로 부드럽게 밀려나갔다가 교묘한 가속도를 가지고 돌아오는 인터페이스 등은 단단한 물질이 아닌 액체나 젤리 성향의 감각을 느끼게 만듭니다. 또, 액체(물)에 각진 부분이 없는 특성 때문에 아이콘도 각진 부분 없이 모서리가 둥근 형태를 사용하고 아이콘의 그림자도 반투명한 물질이 비쳤을 때 형성되는 옅은 회색을 사용하여 통일성을 주었죠. 사각 형태 및 그림자를 기본으로 하는 안드로이드의 아이콘과는 다릅니다. 또, 수면에 무언가가 비치듯 바닥 반사를 통하여 현실감을 부여하는 디자인은 애플의 디자인 전매특허가 됩니다. 여기에 이러한 표현의 강조를 위해 눈에 잘 띄지 않는 세세한 디자인까지 지속적으로 개선을 하고 있었죠. iOS 버전 별로 아이콘 오른쪽 위의 빨간 숫자 알람의 컬러 및 채도가 조금씩 달라졌다는 사실. 혹시 아셨나요?

<수면에 반사되는 듯한 이 표현. 아시죠?>

이렇게 아이폰은 빛을 만지는 새로운 경험을 발광체인 화면의 특성을 영리하게 활용하여 액체라는 컨셉을 통해 훌륭히 구현해 냅니다. 전 세계 사람들은 이에 열광했고 이후 윈도우즈, 안드로이드의 OS 를 비롯한 많은 애플리케이션 등 수 많은 디자인이 이 컨셉의 영향을 받게 되죠. 하지만 이러한 디자인 경향이 무르익어가던 iOS 6 이후, 애플은 놀랍게도 완전히 새로운 컨셉의 화면 디자인 GUI로 또 한 번 전 세계에 충격을 주게 됩니다.

I 액체에서 빛으로. iOS 7 의 충격

iOS 1 에서 iOS 6 까지 액체 컨셉을 사용하여 빛을 만지는 감각을 지속적으로 극대화하던 아이폰은 iOS 7 에서 완전히 다른 디자인 철학을 제시합니다. 지금까지 빛을 만지는 경험을 익숙한 액체 메타포(비유)를 통해 구현했던 아이폰은 본격적으로 ‘빛’ 자체를 활용하여 화면을 디자인하기 시작합니다. 혁신성은 인정하지만 익숙함 면에서 너무 생소하지 않았을까요? 아닙니다. 놀랍게도 21세기, 새로운 시대의 아이들에게 빛을 만지는 경험은 이미 자연스러워져 버렸습니다. 익숙함 자체가 바뀌어 버린 거죠. 겨우 몇 개월 된 아기들이 아이패드로 뽀로로를 보고, 3-4살만 되면 스마트폰을 만지고 애플리케이션을 열 수 있습니다. 때문에 기성세대를 위해 액체나 젤리를 만지는 듯한 아날로그적 경험을 차용하여 화면을 디자인하던 아이폰은 미래를 위해 액체 컨셉을 제거하고 빛 자체를 활용하여 용감하고 대담한 디자인 변화를 시도한 것입니다. 진짜 나무를 만지는 것 보다 나무 같은 화면을 만지며 성장하는 새로운 세대를 위한 미래형 디자인에 도전하는 거죠. 어떤 혁신적인 변화를 겪었는지 현재까지 아이폰의 변화를 먼저 한 눈에 볼까요.

<아이폰 디자인 변화의 모든 것>

위 이미지에서 보실 수 있듯이 iOS 1 ~ 6 까지는 투명성, 반사광, 볼록함 등의 액상 물질성을 강조한 디자인 컨셉이 있었다면, iOS 7 ~ 9 는 이러한 물질성을 제거하고 ‘비물질적인 감각’ 으로 들어서고 있음을 알 수 있습니다. 물질성 비물질성 같은 말이 조금 어렵죠? 물질성이란, 우리가 현실 세계에서 보는 물질의 기본 특징들이라고 생각하시면 쉽습니다. 촉감, 형태, 두께, 무게감, 그림자 등 우리가 물질을 대할 때 감각적으로 느꼈던 것들이요. 그런데 iOS 7 부터는 이러한 물질성을 제거하기 위해 노력한 흔적이 역력하답니다. 소위 플랫디자인(Flat design) 이라고 분류되기도 하지만 제가 보기에는 플랫디자인과는 차별적 요소가 다소 있어 오히려 ‘빛 디자인‘ 이라고 부르고 싶어요.

<왼쪽 iOS 7 과 오른쪽 iOS 6 의 깊이감과 무게감 – 물질성을 비교 해 보세요>

I 아이콘의 비물질화

그렇다면 아이콘은 어떻게 바뀌었을까요? 대표적인 아이콘들의 변화를 보겠습니다.

<각 아이콘의 오른쪽이 iOS 7 이고 왼쪽이 iOS 6 입니다>

보시면 명백히 디자인의 컨셉이 달라졌음을 알 수 있습니다. 훨씬 단순화된 형태, 음영이 제거되면서 산뜻하게 높아진 색상(채도), 사라진 아이콘 그림자 등 물질성이 제거되고 마치 하나의 조명같이 디자인되어있음을 알 수 있습니다. 이는 아이콘의 배경 컬러 그라데이션을 보면 극적으로 드러나는데요, 기존 아이콘이 위를 밝고 아래를 어둡게 하여 음영을 표현했다면 새로운 아이콘은 아래와 위의 컬러가 부드럽게 그라데이션을 주며 변화가 있을 뿐 위와 아래라는 개념이 약해졌습니다. 또한, Photos 의 아이콘은 아예 빛의 삼원색 같은 느낌이 드는 식으로 디자인되어 있고 Calendar 는 종이 달력 같은 디자인 요소를 제거하고 딱 필요한 요일과 날짜의 정보만 극단적으로 가는 (무게감이 전혀 없는) 폰트로 표현했습니다. 전반적으로 아이콘의 두께도 가늘어져 무게감을 제거하고 있습니다. 한 마디로, 물질성이 사라지고 빛으로 모든 것을 표현하려 하고 있는 것이죠. 이러한 디자인 컨셉은 또한 배경화면의 변화에서도 드러납니다. 이전 아이폰의 기본 배경화면은 위에서 보셨듯이 물(액체)을 바탕으로 하고 있었는데요, iOS 7 에서는 어떻게 되었을까요?

I 배경화면은 부서지는 빛의 한 장면으로

위와 같이 부서지는 빛의 한 장면을 담아온 듯한 배경화면으로 바뀌었습니다. 빛은 경계가 져서 딱 잘리거나 특정 컬러로 전체가 채워지는 일이 없습니다. 언제나 더 밝은 곳과 더 어두운 곳이 그라데이션을 가지고 부드럽게 경계면이 형성되죠. iOS 7 부터는 아예 이러한 ‘빛으로 채워진 공간’ 같은 디자인으로 컨셉이 완전히 바뀝니다. 기존의 액체적 접근과는 다르죠. 그래서 전반적으로 화면에서 느껴지는 무게가 가벼워지고 중력 없이 공간에 붕 뜬 듯한 느낌을 받게 됩니다. 이는 사실 실체가 없는 온라인 서비스나 클라우딩 같이 아이폰이 제공하는 기능과 맞아떨어지는 컨셉이죠. 이와 관련해서는 심화 버전으로 따로 포스팅을 해 보겠습니다.

I 안드로이드 진영의 방향성

사실 iOS 7 가 처음 나왔을 때 디자인에 대한 호불호가 굉장히 갈렸었는데요 이러한 비물질적 감각에 대한 적응도에 따라 그 호불호가 나뉘지 않았나 생각합니다. 빛으로 디자인한 화면은 그 당시 처음이었고 아무래도 무언가를 ‘만질 때’ 빛이라는 무형의 것은 손에 착 달라붙지 않는 느낌이 있었기 때문이었죠. 하지만 지금은 이런 디자인이 이미 자연스러워서 대단한 것이 아니라고 느껴질 수도 있습니다. 그럼 iOS 7 이 공개된 2013년 6월과 비슷한 시기인 2013년 3월에 출시된 삼성 Galaxy S4 의 디폴트 배경화면을 통해 차이를 느껴봅시다. 잘잘못이나 가치 판단을 떠나 Galaxy S4 는 아주 현실적인 사진 한 컷을 통해 불러일으켜지는 감성을 전달하려 하는 방향성을 보여주고 있었죠. 빛으로 모든 것을 변환해서 표현하려던 아이폰과는 접근 방향이 달랐습니다.

<비슷한 시기의 Galaxy s4 의 배경화면>

또, Material Design 이라는 이름 하에 화면 상에서의 효과적인 물질성 표현으로 방향을 잡은 안드로이드 진영의 기본 배경화면을 보셔도 아이폰의 빛 컨셉과는 확연한 차이를 느끼실 수 있을 겁니다. 안드로이드의 디자인은 빛이 아니라 마치 종이 같은 느낌을 줍니다. 발전하는 화면의 표현력을 이용하여 정제되고 극대화된 실재감을 주겠다는 의도죠. 이러한 방향으로 진행된다면 구글은 어쩌면 화면에서 질감까지 느낄 수 있는 기술을 적용하려 할지도 모르겠습니다.

<안드로이드의 Material Design 에서 제공하는 기본 배경화면>

I 뿌연(Blur) 표현은 빛의 특성

iOS 7 에서 보여줬던 디자인 특징 중 하나는 뿌연(Blur) 레이어의 표현이었습니다. 아래에서 컨트롤 센터를 밀어 올리면 뒷 배경 앞으로 하얗고 뿌연 층이 하나 겹치게 되는데요 이러한 Blurring 표현도 빛을 이용한 기법이라고 생각합니다. 뿌옇게 표현된 화면은 마치 iOS 7 의 기본 배경 화면의 그라데이션 된 이미지처럼 빛으로 채워진 무한의 공간감을 느끼게 합니다. 또한 명확하게 경계가 나뉘는 것이 아니라 부드럽게 경계가 퍼지는 빛의 특성을 표현하기에도 적합했죠. 사진을 찍을 때 일부러 초점을 멀리해서 뿌옇게 표현하는 것도 물질적 표현이 아니라 빛과 공간에 대한 표현입니다. 이 컨트롤 센터 레이어를 끌어올리는 순간 뒷 배경이 멀리 빠지는 거죠. 안드로이드의 아래로 내리는 풀다운 메뉴와 비교하면 그 차이가 명확한데요 안드로이드는 검은색 반투명 레이어를 사용합니다. 마치 검은색 투명 셀로판지를 앞에 덮어놓은 듯한 느낌을 주죠. 아이폰은 반대로 초점을 흐트러뜨리고 빛을 주어 배경 화면을 하얗게 부서지는 빛으로 만들어 버립니다. 빛 컨셉의 디자인은 통일성을 가지고 이렇게 모든 곳에서 나타납니다.

<왼쪽이 iOS의 컨트롤 센터 / 오른쪽은 갤럭시S6 의 풀다운 메뉴>

I 빛을 만지는 경험 도전의 계속, iOS 8

자, 이제 아이폰이 추구하고자 하는 비물질적 감각 – 빛을 만지는 감각 – 이 어떤 방향성을 가지고 있는지 감이 잡히시죠? 이런 현상은 iOS 7 에서 시작해서 오늘날의 iOS 9 까지 지속되고 있습니다. iOS 7 에서 하도 디자인 호불호가 갈려서 iOS 8 에서는 전반적인 컬러톤을 낮추고 다시 물질성을 조금 살려 중용을 찾으려는 시도가 있었습니다. 아이폰 6 광고에서 자주 보셨던 빛나는 보라색 꽃 이미지가 대표적인 예인데요, 이는 언뜻 보면 꽃의 이미지를 전달하려는 것 같지만 사실 아주 어두운 공간에서 꽃에 반사되어 부서지는 빛의 명암 표현을 목적으로 하고 있습니다. 이 이미지에서 전달하고자 하는 것은 꽃이 아니라 사실은 보라색 빛인 거죠. 또, 기본으로 제공되는 다른 꽃의 배경화면은 아예 꽃을 빛 나는 흰 공간 안에 반투명하게 연출하여 꽃의 이미지를 제거하고 하나의 빛 나는 조명처럼 표현합니다. 자, iOS 1 에서부터 iOS 6 까지 사용했던 액체의 이미지는 어느 샌가 완전히 사라져있죠? 부유하는 듯한 가벼움과 무한의 공간감을 빛과 어둠으로 표현 해내고 있습니다.

I 당분간은 계속될 아이폰의 빛 컨셉, iOS 9

iOS 9 에서는 다시 과감하게 iOS 7 에서 보여줬었던 '빛 디자인 감각'을 되살려 높은 채도와 부드럽게 그라데이션되는 배경화면을 기본으로 채택했습니다. 다만 iOS 7 처럼 빛으로 채워진 무한 공간 같은 이미지가 아니고, 파도가 치는 장면을 빛으로 재해석하여 빛으로 표현하는 GUI에 대한 더 나은 디자인의 고민이 계속되고 있음을 간접적으로 알 수 있습니다. 앞으로 이러한 방향성을 바탕으로 몇 번의 디벨롭이 더 이루어질 것이라 생각되고, 이미 빛을 만지며 사는 인류가 된 우리에게 종이나 액체 같은 메타포를 사용하지 않고 빛을 직접 표현하는 디자인이 어떻게 변화될지 벌써부터 기대가 됩니다.

I 당신은 어떻게 디자인하고 있나요?

아이폰을 염두에 두고 애플리케이션이나 사이트를 기획 및 개발하고 계시다면, 지금까지 말씀드린 내용을 바탕으로 다양한 질문들을 한 번 스스로에게 해보시면 좋을 것 같습니다.

▶ 빛을 만지는 인류를 대상으로 메타포 없이 빛으로 직접 표현하는 아이폰의 디자인 철학과 같은 방향성을 가질 것인가?

▶ 그렇다면 어떻게 무게감과 물질성을 줄이고 부유하는 듯한 느낌을 극대화할 것인가?

▶ 아이폰도 생각하지 못했던 새로운 빛의 특성 표현을 어떻게 화면 상에 할 것인가?

▶ 빛의 특성은 또 무엇이 있고 빛이 공간에서, 표면에서, 꺾어지면서 나타날 때 어떤 특성이 있으며 이를 어떻게 디자인에 이용할 수 있을까?

▶ 반대로 오히려 앱에 들어가는 순간 전혀 다른 감각을 느낄 수 있도록 물질성이 극대화된 방식으로 디자인하는 것은 어떨까?

▶ 그렇다면 어떻게 안드로이드의 Material Design 과 차별화를 둘 것인가? 등등

이렇게 전체를 관통하는 디자인 철학이 있으면 수 많은 화두가 떠오를 수 있고, 누구도 생각하지 못했던 새로운 표현을 할 수 있을 겁니다. 지금 무언가를 개발하고 디자인하고 있다면 그것을 만드는 목적과 표현하고자 하는 방법이 무엇인지 자신의 디자인 철학을 아이폰과 비교하여 검토해 보세요. 생각지 못한 새로움이 발견될 수 있을 겁니다.

P.S : 이번 글은 화면 디자인(GUI) 에 초점을 맞추어 적어봤고, 아이폰 기기 자체의 디자인 철학에 관한 글을 더했습니다. 다음 글 '아이폰 디자인 철학을 하나의 글로 정리해봤습니다. - 인지의 단순 명료화를 지독하게 구현한 미니멀리즘의 대표 아이폰' 에서 뵙겠습니다.

keyword