웹디자인의 교과서, 애플
애플을 사랑할 수 밖에 없는 이유
누구에게나 그렇겠지만, 애플은 모든 면에서 최고의 레퍼런스다. 제품, UI/UX, 그래픽, 사진, 광고, 카피라이팅 뭐 하나 빠지는 것 없이 최고다. 그래서인지 애플 홈페이지는 하루에도 수십 번씩 들어가 구경하는 편. 그동안 애플 웹사이트에서 감동 받은 부분이 많아 정리해보려한다.
1. 스크롤 효과
hover, click, drag, scroll 등 PC 환경에서 할 수 있는 인터렉션 중 우리에게 가장 익숙한 인터렉션은 스크롤일 것이다. 애플은 스크롤에 따라 동영상을 재생하는 것처럼 이미지 시퀀스가 나타나는 효과를 굉장히 자주, 그리고 아주 유려하게 사용한다. 스크롤했을 때 어떻게 변화할지 기대하게 만들고, 그 기대감으로 인해 계속 스크롤하게 만든다. 제품 페이지들이 짧은 편이 아님에도 지루함 없이 끝까지 볼 수 있게 만드는 이유다.
처음 이 효과가 두드러지게 활용된 제품은 아이폰X였던 것 같다. 이게 무려 2017년의 웹. X라는 네이밍, 제품 디자인, 월페이퍼 이미지도 상징적이었지만 X가 커지면서 디바이스가 되는 시퀀스 자체가 충격적이었다.
스크롤 효과는 애플 웹 페이지에 빠지지 않고 등장한다. 에어팟 프로, 아이폰SE2의 경우 회전하는 시퀀스를 통해 제품 자체를 더 역동적으로 보여주고 있다. 제품을 사기 전에 미리 체험하는 기분이다.
A이미지에서 B이미지로의 전환, 새로운 요소의 등장, 전면 스크린으로 확대, 제품 회전 등에도 스크롤을 활용했지만 어두운 화면에서 흰 화면으로 반전되며 극적으로 연출하기도 한다. 당연히 더 강렬하게 몰입하여 다음 컨텐츠에 집중할 수 있다.
2. 크고 시원하고 선명한 이미지
PC가 모바일과 가장 크게 다른 점은 화면의 크기다. 아주 크고 시원하게 이미지를 활용할 수 있고, 화면 전체를 고화질 이미지로 덮어버리면 압도감을 느끼게 하기도 한다. 환경 페이지에서 애플 제품의 알루미늄을 초고화질로, 질감이 느껴질 정도로 선명하게 노출하였는데, 인트로부터 강렬한 인상을 준다.
제품이 아닌 페이지들에서는 애플의 실사 이미지를 풍부하게 볼 수 있기 때문에 자주 보게 된다. 그 중 환경 페이지는 환경을 중시하는 애플의 가치관을 애플답게 잘 보여주어서 좋다. 그 외에도 보안, 접근성 등 애플이 중요하게 생각하는 가치들을 모두 별도의 페이지로 소개하고 있는데, 판매와 직결되지 않는 페이지들에도 정성을 들여 만드는 모습에 큰 감동을 받았다.
애플 사옥을 규모감 있게 담은 이미지더 대단한 부분은 가로 2560 이상의 화면에서도 고화질 그래픽을 대응하고 있는 점이다. 이미지 시퀀스나 고화질 이미지의 용량 문제를 기술적으로 해결하기 위한 노력도 병행되고 있고, 실제로 아주 무겁지도 않다.
애플은 단순히 예쁘고 선명한 이미지가 아니라 목적이 분명한 이미지를 만든다. 메인화면의 아이폰 이미지는 위에서 아래로 내려다보는 인물 사진과 그 사진이 담긴 아이폰을 위로 올려다보는 앵글로 담았는데, 아이폰 광각 렌즈의 기능과 성능을 감각적으로 보여준다. 사진 한 장만으로 모든 메시지를 전달한 것.
사람 이미지를 쓸 때도 애플의 톤으로 잘 전달하고 있다. 보통 이미지 위에 텍스트를 얹는다면 어두운 투명 레이어를 하나 올리고 텍스트를 쓰거나, 배경을 깔끔하게 비우고 쓰는 게 편하다. 하지만 애플은 주변은 어둡지만 중앙은 선명하게 보정하고, 글자에 좀 더 집중할 수 있도록 보케를 활용하였다. 사진 한 장을 고르고 보정하고 어떻게 활용할지 구상하는 것에도 굉장히 노력하고 있다는 것을 알 수 있다.
3. 변화를 보여주기 좋은 레이아웃
애플 홈페이지는 업데이트가 정말 잦은 편이다. 빠르게 대응할 수 있는 섹션별 레이아웃으로 대문에 각종 배너와 섹션을 구성했다. 컨텐츠는 자주 바뀌지만 이 레이아웃은 꽤 오래 유지되고 있다.
명확한 섹션 구분4. 적극적인 카드 활용
기업의 특성상 하고 싶은 말은 항상 많다. 갈수록 페이지 스크롤 길이가 길어지고, 텍스트도 많아질 수 밖에 없다. 그렇다고 각 카테고리마다 별도의 페이지로 파기엔 사용자가 이탈하기 쉽다.
이에 대한 해결책으로 요즘 카드UI를 적극적으로 활용하고 있다. 상징적인 그래픽과 짧은 타이틀로 주제를 설명하고, 빠르게 훑을 사람은 겉만 보고 나갈 수 있도록 구성했다. 자세한 내용은 카드 팝업창 내에서 설명하고, 그래도 안되는 것들은 아웃링크를 활용했다. 자연스럽게 커지거나 Flip되는 인터렉션을 통해 다른 카드도 열어보고 싶게 디자인했는데, 각 카드에 들어가는 그래픽은 간결한 타이포그래피와 애플 아이콘 등으로 보여준다.
실사 이미지를 활용한 카드는 좀 더 제약이 있을 수 밖에 없다. 이미지 위에 글자를 올려야하기 때문에 후가공이 많이 필요하다. 하지만 실사 이미지는 진짜 현실을 보여주는 직접적인 매개이고, 좋은 사진 만큼 사용자의 마음에 강하게 와닿는 매체는 없다. 영리하게도 이미지에 블러 효과를 넣은 팝업창을 활용하고 있는데, 애플 OS의 시그니처라고 할 수 있는 블러 효과를 넣음으로써 소소한 부분까지 브랜드의 일관성을 지키는 것처럼 보인다.
5. 위트
WWDC 2020 페이지의 경우 페이지를 새로고침할 때마다 다른 미모지가 나온다. 새로고침 해보지 않으면 모를 이스터에그인 셈. 참 귀엽다. 애플의 가장 큰 자산 중 하나인 미모지를 적극적으로 위트있게 사용한 케이스다. 맥북에 붙은 스티커나 미모지의 다양성도 주목할만하다. Ready. Set. Code. 라는 카피까지 매력적.
로띠인지 아닌지는 모르겠으나 스크롤에 따라 글자가 등장하는 효과를 넣기도 했다. 보안이라는 무거운 주제를 로고 플레이로 가볍고 재밌게 풀어낸 사례. 환경 페이지의 경우 애플의 로고 잎사귀가 초록색으로 바뀐다.
6. 타이포그래피
웹디자인의 기본이지만 가장 어려운 부분이다. 특히 웹폰트 쓰는 것이 매우 까다로운 문제인데 애플은 그냥 국가별로 SF서체를 제작함으로써 해결한 것 같다. 한국의 경우 SF Pro KR을 사용하고 있다.
애플은 볼드한 타이포그래피를 주로 사용하지만, 어쩔 수 없이 정보가 많은 페이지의 경우엔 보편적인 편집 디자인도 보여준다. 하지만 본문이 많은 경우에는 제목만 잘 보이게 하는 대비를 주고 있다. 아래 이미지만 봐도 어떤 정보가 가장 중요한지 한 번에 알 수 있고, 위계가 깔끔하게 정리되어있다.
아이콘과 이미지까지 완벽한 구성보지 않아도 되는 정보의 경우 각 탭을 클릭해서 볼 수 있도록 해놓았다. 아무래도 수치적인 부분을 넣기는 해야겠고, 가장 중요한 정보는 아닐테니 이런 식의 구성을 하지 않았나 생각해본다. (근데 이 막대 그래프 디자인도 꽤 많은 곳에서 따라했더라)
같은 크기의 타이틀에서 그레이 - 블랙으로 구분하는 타이포그래피도 애플에서 처음 시도된 것으로 안다. 갈수록 디지털 환경에서의 타이포그래피가 볼드해 지는 경향을 보이는데, 이런 디자인도 그 흐름 중 하나일 것 같다.
오리가미3 베타 사이트만 봐도 IT업계에서 애플 웹 디자인을 얼마나 따라하고 있는지 알 수 있다. 애플 사이트의 몇 가지 부분을 조합한 것처럼 보인다.
오리가미3 웹사이트는 박스 레이아웃도 애플과 거의 비슷했다.
뿐만 아니라 이미지 안의 영상이 스크롤 하면서 커지는 부분은 이제 Fancy한 웹사이트라면 적용되는 효과로 자리잡은 듯 하다.
그 외에도 그라데이션을 넣은 글자, 볼드한 타이틀 등 기본적인 요소들도 많은 디자이너들에게 영감이 되고 있고, 유사 디자인이 굉장히 많이 등장했다. 특히 그라데이션이 들어간 글자는 점점 더 과감하게 많은 브랜드에서 사용하고 있는 추세이며 유행을 넘어 누구나 활용하는 스타일이 되어가는 것 같다.
7. 감각적인 카피라이팅
애플은 누가 카피라이팅을 하는지 모르겠으나 영문으로 봐도 멋있고, 국문으로 봐도 멋있는 카피가 많다. 보통 짧고 강력하게 쓰여져 두고두고 생각이 난다.
아이폰X 카피IT업계에서 자칫 기술을 강조하느라 테키하게 느껴질 수 있는데, 매번 혁신적으로 새로운 카피를 창조해내는 것 같다. 특히 유행어처럼 많이 쓰는 '완전히 새로워진'이라는 수식어는 애플에서 가장 먼저 사용했던 문구이다.
그리고 국가별로 맥락에 맞게, 자연스럽게 번역된다.
메인 페이지가 아닌 곳들에서도 상식을 비트는 타이틀 문구들을 잘 뽑아낸다. (심지어 엄근진인데 너무 멋지다) 반면 본문은 대화하는 듯한 친근함을 준다. 글에서도 리듬감이 느껴지는 부분.
8. 낭만적인 스토리텔링
웹사이트는 필연적으로 이야기를 담을 수 밖에 없다. 스크롤에 따른 시간성, 각 페이지로 구성되는 공간성을 동시에 지니고 있기 때문이다.
아이패드 프로 제품 페이지에서 스크롤에 따라 애플 펜슬로 선이 그어지고, 그어진 선이 그림이 되고, 그 그림이 아이패드에 담기는 시퀀스가 담겨있다. 그림도 예쁘지만 물드는 것처럼 그려지는 묘사가 참 서정적이다. 모두를 위해 창의적인 도구를 만든다는 애플의 미션이 드러나는 부분이며, 디지털 환경임에도 아날로그적인 감정을 느끼게 한다.
요즘 모바일 앱에서의 UI, UX가 중요한 것은 모두가 알지만 PC웹의 역할은 축소된 것처럼 느껴진다. 웹사이트들은 일상 생활에서 너무나 많이 접하는 환경이고, 뭔가를 소개할 수 있는 가장 쉬운 매체이기도 하다. 여기엔 거의 모든 부분에 대해 세심한 고려가 필요하다.
애플 웹사이트에 투자되는 리소스는 실로 어마어마하다. 업데이트 속도나 페이지의 양만 봐도 그렇고, 아주 작은 역할을 하는 페이지까지 섬세하게 관리되고 있다는 느낌을 주기 때문이다. '웹디자인의 교과서'라는 제목으로 시작했지만, 애플의 웹사이트는 훌륭한 기획과 좋은 글, 아름다운 이미지, 수준 높은 기술 구현으로 이뤄진 종합적인 결과물이다.
그래서... 애플의 다음 업데이트가 기다려진다.
