Created by Firejune at 2010/02/13 Apple에서 배울수 있는 디자인 전략 15가지 Joshua Johnson씨는 애플의 웹사이트를 통해서 배울수 있는 15가지 디자인 팁을 작성했습니다. 고급스러운 디자인으로 고객들을 매료시키는 기술을 관찰하고 배워봅시다. 여기에 올린 15가지 팁은 자신의 업무에 활용하거나 사이트 디자인 영감으로 활용되도록 의도하는 것에 목적을 두고 있습니다. 지나치게 애플 지향적으로 편중되어 있는 느낌을 받을 수 있고, 이해를 돕기 위해 사용된 이미지는 한국어 페이지로 교체했으며 의역했다는 점을 미리 밝혀둡니다. 1. 단순함을 유지하세요!
애플 홈페이지의 첫 화면은 매우 단순합니다. 가장 최신 제품을 보여주고 몇가지 관련정보들을 쉽게 찾을 수 있도록 배치했습니다. 이 페이지는 한눈에 보입니다. 자! 잠시 눈에 보이지 않는 부분에 대하여 상상해 봅시다. 그리고, 이 웹사이트를 방문해 보세요. 무엇이 다른가요? 예를 들면, 공항에 서있는 자신을 떠올려 보세요. 그리고 당신은 화장실을 찾고 있다고 가정해 봅시다. 터미널에 위치한 화장실 표지판을 찾기 위해 이리저리 둘러보면 매우 많은 표지판들이 눈에 들어옵니다. 이것은 건축 디자이너가 사람들이 원하는 필요한 모든 정보를 제공하기 위해 표지판들을
배치했기 때문입니다. 웹사이트역시 마찬가지입니다. 일반적으로 로고를 두드러지게 배치하고 모든 제품 범주에 대해 자세히 설명하고 기능들을 끝없이 나열하고 있습니다. 애플은 이러한 접근 방범에서 벗어나 고객의 입장에서 다시 디자인 했습니다. 고객이 가장 알고 싶어하는 것은 무엇일까요? 애플은 자신들의 최신 정보를 선택했습니다. 그 외적인 요소들은 철저하게 카테고라이징(범주화) 되어있고 즉시 검색해서 접근할 수 있으니까요. 이로써 애플은 사용성을 훼손하지 않고 매력적인 디자인을 고객에게 제공할 수 있게 되었습니다. 2. 매혹적인 제품 사진
애플의 홈페이지에서 가장 눈에 띄는 것은 로고도 아닌, 네비게이션도 아닌, 광고문구도 아닌 바로 제품의 사진입니다. 고객은 자연스럽게 제품 사진에 집중하게 됩니다. 이 사진들을 유심히 살펴보면 몇가지 법칙을 발견할 수 있습니다. 사진 한 장에 하나의 제품이 아닌 하나의 제품이 부각될 수 있는 다른 각도에서 촬영한 여러가지 모습들을 한장으로 보기 좋게 구성했다는 사실입니다. 이 사진 한 장으로 많은 것을 설명할 수 있기 때문에 보완 목적의 사진들을 추가적으로 사용할 필요가 없습니다.
당신의 제품은 애플처럼 볼품있는 제품이 아닌가요? 좋은 디자이너들은 볼품 없는 제품도 볼품있게 만드는 마법을 부릴수 있답니다. 3. 대비 효과 애플의 제품 이미지를 정말 멋져 보이게하는 또 다른 요점은 간단합니다. 인간 두뇌는 항상 대비에 반응합니다. 이것은 우리가 바다 수평선을 지긋이 응시하는 이유와도 같습니다. 새하얀 배경에 위치한 반짝 이는 검은색 아이폰을 응시하면서 무심코 "오오오오오!"라고 감탄하는 것 역시 그 이유입니다. 당신이 생산하는 모든 디자인에는 선택적인 대비를
사용해야합니다. 색상, 크기, 글꼴 두께 그리고 눈으로 볼 수 있는 모든 곳에 말예요. 애플은 제품 이미지에만 대비를 적용하고있는 것은 아닙니다. 위 화면을 살펴보세요. 그리고 자신이 어디에 주목하고 있는지를 생각해보세요. 아마도 큼직하면서 파란색상을 가진 다운로드 버튼일 것입니다. 이제 애플의 홈페이지를 순회해 보세요. 당신이 무언가를 다운로드하거나 제품을 구입하는 곳에는 항상 이 밝은 파란색 버튼이 고객의 주의력을 사로잡는 역할을 한다는 사실을 발견할 수 있었을 것입니다. 4. 작은 것에서 느껴지는 섬세함 애플의 홈페이지에 배치된 작은 항목들에 대하여 살펴보겠습니다. 결코 눈에 잘 띄는 것은 아니지만 작은 조각들을 매우 훌륭하게 디자인했습니다. 이러한 모습들은 고객에게 안정감 또는 세심함과 같은 감동 즉, 좋은 사용자 경험을 선사한다는 사실을 잊지 말아야 합니다. 반면 아래의 작은 구성요소들을 살펴봅시다. 소셜 미디어 로고들을 유심히 살펴보면 뒤처리가 깔끔하지 못한 부분을 발견할 수 있습니다. 일하기 싫어하는 디자이너에게 일을 강제로 시킨 것일까요? 디자이너가 일을 안해서 프로그래머가 붙인 것일까요?
이러한 작은 실수는 제품역시 개판(?)인 임을 증명하는 것과도 같으며 제품의 신뢰도가 떨어질 수도 있다는 사실임을 분명히 인지해야합니다. 보통 디자이너들은 유명 웹서비스들의 로고 자료를 백터 파일로 소장하고 있습니다. 아무리 작은 요소의 디자인이라도 포토샵의 요술지팡이 따위로 대충 얼버무리는 일이 발생해서는 안될 것입니다. 5. 플래시를 피하세요!
플래시를 증오하는 집단에서 활동하는 것은 아니지만, 사실을 들춰보면 다음과 같습니다. Wired에 게재된 스티브 잡스의 의견에 따르면 "플래시는 버그가 많다. 충돌 원인은 대부분 플래시인 것으로 조사되었기 때문이다. 앞으로 플래시는 아무도 쓰지 않게 될 것이고 세상은 HTML5로 이동할 것이다."라고 말했습니다. 이말은 곧 IT산업에 영향력이 있으며, 지도력을 겸비했고 많은 이로부터 존경받는 한 사람으로부터의 강한 메시지입니다. 솔직히 말해 그가 말한 내용이 올바른 방향처럼 느껴집니다. 웹 개발자로서 애플의 플래시 불매 운동에 참여하건 말건 어디까지나 당신의 선택이겠지만, 플래시 컨텐츠는 꼭 필요한 곳에만 사용하도록 독려하고 필요없이 남발하는 것을 스스로 자제한다면 플래시는 자연스레 이 세상에서 종적을 감출 것입니다. 또 다른 생존영역을 개척할 것입니다. 6. 항상 친절하게
애플은 수년간 "친절하지 않다"는 브랜드로 인식되고 있었습니다. 그래서 그들은 고객과 더욱 가까이 할 수 있도록 전면적으로 기업 이미지를 재구성했습니다. 기술 지원 및 애플 스토어의 실무 개선은 물론, 모든 기술지원 요원들이 미소를 띄고있는 이미지로 교체하여 고객에게 큰 영향을 주고 있습니다. 위 화면에서 보는 것 처럼 미소 짓고있는 직원은 이제 애플 웹사이트에서 뿐만 아니라 전화상담 또는 오프라인 샵에서도 쉽게 찾아볼 수 있습니다. 이러한 친절함과 놀라운 기술을 기반으로하는 디자인 사이에는 절묘한 균형이 형성되어 있습니다. 당신이 판매하는 상품이 무었인지, 고객이 가장 어렵게 생각하는 것은 무었인지를 헤아리고 고객이 쉽게 접근할 수 있도록 하는 것은 곧 친절함임을 잊지 마세요. 7. 그리드 활용
애플의 홈페이지는 위 화면처럼 대담하고 엄격한 격자 구조를 전역에 걸쳐 채용하고 있습니다. 왜그랬을까요? 위 페이지를 직접 방문하여 어느 만큼의 정보를 다루고 있는지 직접 살펴보세요. 압도적으로 많은 컨텐츠들이 매우 매력적으로 배치되어 있습니다.
일시적, 산발적인 속보, 공지 등에 대한 정보를 정해진 셀 안에서 다루고 있어 시각적 혼란과 혼동을 줄이고 있습니다. 또한 각 셀은 제목과 설명으로 구분된 텍스트와 임팩트있는 이미지를 포함하고 있습니다. 그럼에도 규칙성있는 테마를 가진 레이아웃이 일괄적으로 사용되고 있어 통일성 있고 컨텐츠로의 접근을 방해하지 않도록 안정감있게 구성되어 있습니다. 시야의 흐름이 깨지지 않기 때문입니다. 8. 사용법은 곧 홍보입니다. 애플은 이 마우스가 멀티 터치라는 메시지를 강조하기 위하여 위와 같은 이미지를 사용했습니다. 그럴싸한 광고문구도 없이 말예요. 대부분의 사람들은 이 이미지를 통하여 자신도 모르게 애플 마우스의 독특한 사용방법을 숙지하게 됩니다. 애플의 제품 일러스트에는 대부분 하드웨어와 소프트웨어가 어떻게 동작하는지 보여주는 동영상을 포함하고 있습니다. 이제는 사용법의 일부분을 TV광고에도 사용하기에 이르렀습니다. 이것은 소모성 질문들, 기술지원들을 줄이기 위한 아주 훌륭한 방법입니다. 또한 사용자는 지루한 사용법 책자를 훓어보지 않고도 구입즉시 기기를 사용할 수 있으며,
무엇보다도 장점들이 부각된 사용법으로 하여금 지금까지 고객들이 경험한 것을 직설적으로 비교케하여 제품의 가치를 스스로 판단하게 하는 강력한 마케팅 효과를 가집니다. 9. 일관성을 유지하세요! 위 화면은 itunes 스토어의 화면을 캡처한 것입니다. 낯익지 않나요? 만약 당신이 애플 홈페이지와 닮았다는 생각을 했다면 그 생각이 맞습니다. 자, Mac OS X의 파인더(Finder)를 실행시키고 주위를 둘러보세요. 그리고 애플에서 생산된 하드웨어들의 디자인을 살펴보세요. 그리드 기반의 디자인은 백색 금속의 질감을 가진 텍스처를 사용하며 파란색으로 이목을 집중시키고 있습니다. 많은 부분이 소프트웨어와 하드웨어 심지어 웹사이트에 이르기까지 일관된 디자인을 유지하고 있습니다. 애플 브랜드 본질(또는 룩앤필)은 어느 제품에나 존제하는 통일성있게 사용되는 디자인입니다. 당신의 제품들은 이러한 브랜드 차원의 디자인 통합이 잘 이루어지고 있습니까? 만약, 이를 개발하는 과정이라면 모든
제품들과 제품들이 가진 요소들 그리고 웹사이트, 심지어 TV, 신문 광고까지도 어떻게 통합할 것인지를 생각해야 합니다. 10. 쇼핑몰이란 느낌은 없습니다. 어느 제품을 조회하건 오른쪽 상단에 위치한 "지금 구입"을 클릭하면 아래와 같은 페이지로 이동합니다.
애플은 대표적인 온라인 상거래 사이트의 성공사례 연구대상으로 손꼽힙입니다. 단순히 제품을 홍보하고 판매하는 것에 그치지 않고 사이트 전체가 제품을 구입하도록 만드는 빌미를 제공합니다. 사용법을 교육하는 과정역시 제품구입 후에 해당하는 서비스가 아닌 제품을 구입하는 과정으로 만들어 버렸습니다. 중요한 점은 애플 홈페이지가 하나의 거대한 쇼핑몰처럼은 느껴지지 않는다는 것입니다. 애플은 제품에 대하여 상세한 정보들를 제공하는 제품 전용 페이지를 제공합니다. 그리고 이 페이지에 명시된 제품을 홍보하는 문구들은 대단히 인상적입니다. 대부분 유용성에 초점을 맞추고 있으며, 혁명적인, 환상적인, 아름다운, 놀라운, 강력한, 완전한, 즐거운 등의 형용사들로 가득차 있습니다. 해당 제품이 동일 제품 중 가장 좋다는 것을 일깨워주고 알리는데 총력을 기울인 이 페이지에서 쇼핑몰이라는 냄새는 조금도 풍기지
않습니다. 다소 오만해 보이기까지 합니다. 제품을 구입하는 페이지로 이동하기 위해 고객이 취하는 행동은 한번의 클릭으로 충분합니다. 구입 페이지로 이동하면 시각적 호소력을 박탈당한 전형적인 쇼핑몰로 진입하며 제품 보다는 지불하기까지의 과정에 충실한 페이지를 만날 수 있습니다. 11. 자신감있게! "이것 보세요! 애플의 제품들은 완전 놀랍습니다!" 애플의 홈페이지에 한동안 머물러 있다 보면 당신은 그들이 겸손하지 않다는 사실을 곧잘 알아챌 수 있을 것입니다. 그들의 표제에는 혁명적이고, 재미있고,
아름답고, 쉽고, 강력하고 등의 형용사로 가득 차 있습니다. 대단한 자신감입니다. 만약, 당신이 만든 제품에 자신이 있다면 그것을 상대방에게 전하려고 노력하세요. 당신의 사이트 전역에 제품에 관한 모든 것이 얼마만큼 위대한지를 상대방에게 납득시키고 설득시키는 데에 초점를 둡니다. 이것은 고객으로 하여금 상당히 긍정적인 첫인상을 남길수 있습니다. 단, 고객을 속였다는 느낌을 주거나 거짓된 내용이라면 분명, 독이 되어 돌아온다는 사실도 간과해서는 안될 것입니다. 12. 법율 사본을 쉽게 읽을 수 있도록 하세요.
이것은 작지만 중요합니다. 애플은 이러한 법적인 내용에 충실하며, 누구나 읽을 수 있도록 링크를 제공합니다. 법적인 내용에 대하여 무지한 고객이 피해를 입는 사례를 줄일수 있고, 회사 입장에서는 의도되지 않은 책임에 대하여 보호받을 수 있습니다. 이러한 페이지는 누구나 접근할 수 있어야 하고, 쉽게 찾을 수 있도록 배치해야 하며, 읽기 쉬운 구조로 작성되어야 합니다. 13. 탐색 가능한 푸터
위 화면의 푸터(바닥글)를 확인하세요. 애플은 각 페이지 하단에 매우 유용한 탐색 도구를 제공하고 있습니다. 이것은 대형 웹사이트들이 격는 탐색의 어려움을 해결하는 가장 좋은 방법입니다. 사이트맵을 범주화하여 고객이 찾고자 하는 범위를 좁혀나갈 수 있기 때문입니다. 단, 어디든 원하는 페이지로 이동하는 네비게이션을 제공한다면(규모가 작다면) 재고할 필요도 없는 것입니다. 14. 아름다운 아이콘 애플은 Mac OS X의 출시와 함께 완전히 새로운 영역의 아이콘을 가져왔습니다. 그 이후로 매력적인 아이콘이 웹상에 범람하게 되었으며, 누구나 무료 아이콘을 다운로드해서 사용하기에 이르렀습니다. 하지만 가져다 쓰기 전에 당신이 직접 만들어 사용하는 것을 고려하세요. 당신이 디자인한 웹사이트에 가장 적합한 아이콘이 무엇인지를 알고 있는 사람은 바로 당신이기 때문입니다.
15. 상호 작용하는 동적 컨텐츠 애플의 홈페이지를 둘러보면 대부분의 페이지에서 슬라이드쇼와 아코디언 그리고 동영상 재생기 등 인터랙티브한 컨텐츠들이 구석구석에 배치되어 있다는 사실을 알 수 있습니다. 이 요소들의 목적은 사용자로부터 지속적인 관심를 요구하는 것입니다. 정적인 컨텐츠들은 지루해지기 마련입니다. 뭔가 흥미로운 것을 찾고 있는 사용자에게 효과적으로 접근할 수 있는 방법은 동적인 컨텐츠를 제공하는 것입니다. 이러한 동적 컨텐츠를 사용할 때 가장 먼저 고려해야 할 사항은 사용자에게 별도의 플러그인 설치를 요구하지 않는 것입니다. 더 많은 환경에서 작동하는 기술을 사용하는 것이 좋습니다. 이를테면 자바스크립트와 같은 것들입니다. Powered by TCPDF (www.tcpdf.org)