UX & Design

웹디자인의 교과서, 애플

‘웹디자인’ 개념이 희미해진 지 오래다. 웹디자인 자체보다 사진과 그래픽을 중요하게 여기기도 하고, 갈수록 웹디자인 트렌드가 단순해져 따라 하는 데 큰 어려움도 없다. ‘Wix’나 ‘워드프레스’ 등을 통해 웹사이트를 만드는 일이 쉬워진 것도 이유 중 하나일 것이다. 하지만 온택트 시대와 디지털 네이티브(Digital Native) 세대를 맞아 여전히 웹사이트는 접근성이 높은 홍보 매체다. 브랜드의 디테일을 알리기에 더할 나위 없이 좋은 수단이기 때문이다.

이를 가장 잘 알고 사용하는 브랜드는 단연 애플(Apple)이다. 웹사이트 업데이트 주기만큼 잦은 매번 새로운 디자인, 새로운 웹 기술, 풍성한 콘텐츠를 선보이기 때문에 웹디자인의 ‘교과서’라 불러도 무방하다. 브랜드를 빛나게 하는 디지털 ‘공간’으로서 애플이 다뤘던 여러 요소를 소개한다.

1. 스크롤 효과

호버(Hover), 클릭(Click), 드래그(Drag), 스크롤(Scroll) 등 PC 환경에서 구현할 수 있는 인터랙션 중 우리에게 가장 익숙한 것은 바로 ‘스크롤’이다. 애플은 웹사이트 스크롤에 따라 동영상을 재생하는 것처럼 이미지 시퀀스가 나타나는 효과를 굉장히 자주, 그리고 유려하게 사용한다. 스크롤 했을 때 어떻게 변화할지 기대하게 해 사용자에게 지속적으로 스크롤을 유도한다. 제품 페이지들이 짧은 편이 아님에도 지루함을 느낄 새 없이 끝까지 볼 수 있게 만드는 이유다.

처음 이 효과가 두드러지게 활용된 제품은 ‘아이폰X’였다. 무려 2017년 웹사이트다. X라는 네이밍, 제품 디자인, 월페이퍼 이미지도 상징적이었지만 알파벳 X가 커지면서 디바이스가 되는 시퀀스 자체가 충격이었다.

스크롤 효과는 애플 웹 페이지에 빠지지 않고 등장한다. 에어팟 프로, 아이폰 SE2의 경우 제품이 회전하는 시퀀스를 통해 제품 자체를 더 역동적으로 보여준다. 제품을 실제로 체험하는 것보다 온라인에서 더 매력적으로 경험하게 한다.

A 이미지에서 B 이미지로 전환, 새로운 요소의 등장, 전면 스크린 확대, 제품 회전 등에도 스크롤을 활용했지만 어두운 화면에서 흰 화면으로 반전되며 극적인 연출을 부각하기도 한다. 이후 소비자는 더 강렬히 웹사이트에 몰입해 다음 콘텐츠에 집중할 수 있다.

2. 크고 선명한 이미지

PC와 모바일의 가장 큰 차이점은 화면 크기다. PC는 크고 시원하게 이미지를 활용할 수 있고, 화면 전체를 고화질 이미지로 덮어 압도감을 느끼게 할 수도 있다. 환경 페이지에서 애플 제품의 알루미늄을 초고화질로, 금속의 질감이 느껴질 정도로 선명하게 노출했는데 시작부터 강렬한 인상을 준다.

애플의 실사 이미지도 풍부하게 볼 수 있다. 그중 환경 페이지는 환경을 중시하는 애플의 가치관을 효과적으로 보여준다. 그 외에도 보안, 접근성 등 애플이 중요하게 생각하는 가치들을 모두 별도의 페이지로 소개하는데, 판매와 직결되지 않는 페이지에도 정성을 들여 제작했다. 소비자는 이 부분에서 브랜드의 진정성을 느낄 수 있다.

애플 사옥을 규모감 있게 담은 이미지

사소하지만 감동적인 디테일이라 느껴지는 부분은 가로 2560 픽셀 이상의 화면에서도 고화질 그래픽으로 대응한다는 점이다. 이미지 시퀀스나 고화질 이미지의 용량 문제를 기술적으로 해결하기 위한 노력도 병행되고 있고, 실제로 아주 무겁지도 않다.

애플은 단순히 예쁘고 선명한 이미지가 아니라 목적이 분명한 이미지를 만든다. 메인 화면의 아이폰 이미지는 위에서 아래로 내려다보는 인물 사진과 그 사진이 담긴 아이폰을 위로 올려다보는 앵글로 담았는데, 아이폰 광각 렌즈의 기능과 성능을 감각적으로 보여준다. 사진 한 장만으로 모든 메시지를 전달한다.

인물 이미지를 쓸 때도 애플 톤으로 잘 전달하고 있다. 보통 이미지 위에 텍스트를 쓰기 전에 어두운 투명 레이어를 하나 올리거나, 배경을 비우고 쓰는 편이다. 하지만 애플은 어두운 배경에 중앙은 선명하게 보정하고, 텍스트에 집중할 수 있도록 보케(Bokeh)를 활용했다. 사진 하나를 사용하는 것에도 많은 노력을 기울였다.

3. 콘텐츠의 변화를 쉽게 감지할 수 있는 레이아웃

애플 웹사이트는 업데이트가 잦은 편이다. 빠르게 대응할 수 있는 섹션별 레이아웃으로 대문에 각종 배너와 섹션을 구성했다. 콘텐츠는 자주 바뀌지만 이 레이아웃은 꽤 오래 유지되고 있으며 시의성 있는 주제, 크게 홍보해야 할 이벤트나 제품이 나올 때마다 변화를 시도한다.

명확한 섹션 구분

4. 적극적인 카드 활용

브랜드는 사용자에게 전하고자 하는 메시지가 항상 많다. 메시지가 많을수록 페이지 스크롤이 길어지고, 텍스트도 빽빽해질 수밖에 없다. 그렇다고 각 카테고리마다 별도 페이지를 생성하기에는 사용자의 이탈 가능성이 높아진다.

이에 대한 해결책으로 애플은 카드 디자인을 적극 활용하고 있다. 상징적인 그래픽과 짧은 타이틀로 주제를 설명하고, 빠르게 훑을 사람은 겉만 보고 이탈할 수 있도록 구성했다. 자세한 내용은 카드 팝업창 내에서 설명하고, 그래도 메시지가 부족한 것들은 아웃링크를 활용했다. 자연스럽게 커지거나 플립(Flip)되는 인터랙션을 통해 다른 카드도 열어보고 싶도록 디자인했는데, 각 카드에 구성된 그래픽은 간결한 타이포그래피와 애플 아이콘 등을 보여준다.

실사 이미지를 활용한 카드는 제약이 있기 마련이다. 이미지 위에 글자를 올려야 하기 때문에 후가공이 많이 필요하다. 하지만 실사 이미지는 현실을 보여주는 직접적인 매개이고, 좋은 사진만큼 사용자의 마음에 강하게 와닿는 매체는 없다. 영리하게도 이미지에 블러 효과를 넣은 팝업창을 활용하는데, 애플 OS의 시그니처라고 할 수 있는 블러 효과로 소소한 부분까지 일관성을 유지하는 것처럼 보인다.

5. 위트 있는 이스터에그

‘WWDC 2020’ 페이지의 경우 페이지를 새로 고침할 때마다 다른 미모지가 나왔다. 새로 고침하지 않으면 모를 이스터에그인 셈. 참 귀엽다. 애플의 자산 중 하나인 미모지를 적극적으로 위트 있게 사용한 케이스다. 맥북에 붙은 스티커나 미모지의 다양성도 주목할만하다. ‘Ready. Set. Code.’라는 카피까지 매력적이다.

스크롤에 따라 글자가 등장하는 효과를 넣기도 했다. 보안이라는 무거운 주제를 로고 플레이로 가볍고 재밌게 풀어낸 사례. 환경 페이지의 경우 애플 로고 이파리가 초록색으로 바뀐다.

6. 디지털 타이포그래피

타이포그래피는 웹디자인의 기본이지만 가장 어려운 부분이다. 특히 웹폰트 적용 문제인데 애플은 국가별로 SF 서체를 제작함으로써 해결했다. 한국의 경우 ‘SF Pro KR’을 사용하고 있다.

애플은 볼드한 타이포그래피를 주로 사용하지만, 부득이 정보가 많은 페이지의 경우 보편적인 편집 디자인도 보여준다. 하지만 본문이 많은 경우에는 제목이 가장 잘 보일 수 있도록 강력한 대비를 주고 있다. 아래 이미지만 봐도 어떤 정보가 가장 중요한지 한 번에 알 수 있고, 위계도 깔끔하다.

아이콘과 이미지까지 완벽하게 구성한 화면

보지 않아도 되는 정보의 경우 각 탭을 클릭해서 볼 수 있다. 아무래도 수치적인 부분은 넣되 중요성이 낮아 이런 식의 구성을 하지 않았나 생각해본다.

같은 크기의 타이틀에서 그레이, 블랙으로 구분하는 타이포그래피도 애플에서 처음 시도된 것으로 알고 있다. 갈수록 디지털 환경에서의 타이포그래피가 볼드(Bold, 굵게 표시하는 글꼴 스타일)한 경향을 보인다. 그 외에도 그라데이션을 넣은 글자, 볼드한 타이틀 등 기본적인 요소들도 많은 디자이너들에게 영감이 주고, 유사 디자인이 굉장히 많이 등장했다. 특히 그라데이션이 들어간 글자는 다양한 브랜드에서 적용하고 있는 추세며 유행을 넘어 누구나 활용하는 스타일이 됐다.

7. 감각적인 카피라이팅

애플의 카피는 영문과 국문 모두 눈길을 끈다. 간결하고 직관적이어서 두고두고 생각난다. 디지털 환경, 특히 모바일에 적합하게 글을 다듬는다. 애플 사이트에서 이상한 줄바꿈, 애매하게 한 글자만 떨어지는 글은 본 적이 없다.

IT업계에서 자칫 기술을 강조하느라 테키(Tacky, 조잡하거나 엉성한)하게 느껴질 수 있는데, 매번 혁신적으로 새로운 카피를 창조해낸다. 특히 유행어처럼 많이 쓰는 ‘완전히 새로워진’이라는 수식어는 애플에서 가장 먼저 사용했던 문구다. 그리고 모든 카페는 국가별로 맥락에 맞게, 자연스럽게 번역된다.

메인 페이지가 아닌 곳들에서도 상식을 비트는 타이틀 문구들을 잘 뽑아낸다. 반면 본문은 대화하는 듯한 친근함을 준다. 글에서도 리듬감이 느껴지는 부분.

8. 낭만적인 스토리텔링

웹사이트는 필연적으로 이야기를 담을 수밖에 없다. 스크롤에 따른 시간성, 각 페이지로 구성되는 공간성을 동시에 지니고 있기 때문이다.

아이패드 프로 제품 페이지에서 스크롤에 따라 애플 펜슬로 선이 그어지고, 그어진 선이 그림이 되고, 그 그림이 아이패드에 담기는 시퀀스가 녹아있다. 그림도 예쁘지만 물드는 것처럼 그려지는 묘사가 서정적이다. 모두를 위해 창의적인 도구를 만든다는 애플의 미션이 드러나는 부분이며, 디지털 환경임에도 아날로그 감성을 느끼게 한다.

요즘 모바일 앱에서의 UI·UX가 중요한 것은 모두가 알지만, PC 웹의 역할은 축소된 듯하다. 웹사이트는 일상생활에서 흔히 접하는 디지털 환경이고, 뭔가를 소개할 수 있는 가장 효율적인 매체이기도 하다.  거의 모든 부분에 대해 세심한 고려가 필요한 이유다.

애플 웹사이트에 투자되는 리소스는 실로 어마어마하다. 업데이트 속도나 페이지의 양만 봐도 아주 작은 역할을 하는 페이지까지 섬세하게 관리되고 있다는 느낌을 주기 때문이다. ‘웹디자인의 교과서’라는 제목으로 시작했지만, 애플 웹사이트는 훌륭한 기획과 좋은 글, 아름다운 이미지, 수준 높은 기술 구현으로 이뤄진 종합적인 결과물이다. 이것이 애플 웹사이트 업데이트를 매번 기다리는 이유다.

Comments
© DIGITAL iNSIGHT 디지털 인사이트. 무단전재 및 재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

Related Posts