웹 디자인의 파레토 원칙 - 80/20 법칙으로 더 효과적인 웹 사이트 디자인하기

웹 디자인에서 완벽주의자가 되는 문제

완벽주의는 많은 그래픽 및 웹 디자이너에게 어려운 과제일 수 있습니다. 탁월함을 위해 노력하는 것은 훌륭하지만, 웹사이트의 모든 요소가 완벽해질 때까지 끝없이 변경하고 조정하는 과정에서 좌절감을 느낄 수 있습니다. 많은 디자이너가 디자인 프로세스에 휩쓸려 서체와 색상 팔레트를 선택하고 수백 개의 픽셀을 완벽하게 디자인하기 위해 고심하는 동안 시간을 잃어버리기 쉽습니다. 물론 훌륭한 결과물을 제공하는 것도 중요하지만 디자이너로서 이것이 무엇을 의미하는지 초점을 잃기 쉽죠? 웹 사이트는 디자이너의 목표가 아니라 고객이 원하는 결과를 충족하는 동시에 시간, 리소스 및 에너지의 제한 사이에서 균형을 잡는 것이어야 합니다. 제약 조건이 없다면 웹사이트는 지나치게 많은 요소와 기능으로 인해 사용자에게 혼란을 주는 과잉 엔지니어링, 느린 속도가 되기 쉽습니다. 또한 제한된 시간 내에 모든 기능을 맞추기가 어렵기 때문에 디자이너는 시간이 부족할 수 있으며, 마감일까지 좋은 웹사이트를 제공하지 못하면 관련된 모든 사람에게 큰 스트레스가 됩니다.

파레토 원칙이란 무엇인가요?

파레토 원칙이라고도 불리는 '80/20 법칙'은 결과의 80%는 20%의 원인에서 비롯된다는 것을 말합니다. 파레토 법칙은 1895년 이탈리아의 경제학자 빌프레도 파레토가 이탈리아 부의 80%가 인구의 20%만이 소유하고 있다는 사실을 관찰하면서 처음 소개되었습니다. 그는 또한 자신의 정원에 있는 완두콩 꼬투리의 20%가 완두콩의 80%를 생산한다는 사실도 발견했습니다! 파레토 원칙은 몇 가지 핵심 요소가 주어진 결과의 대부분을 만들어낸다는 것을 의미합니다. 그 이후로 비즈니스, 경제, 심리학 등 다양한 분야에 적용되었으며 일상 생활에서도 실용적으로 활용할 수 있습니다.

이는 소규모의 사례에도 잘 적용되는데, 대부분의 수입이 소수의 고정 고객으로부터 발생한다는 사실을 눈치채신 적이 있으신가요? 아니면 옷장의 대부분은 사용하지 않는데 항상 같은 옷만 입는 것 같다는 생각이 드시나요? 비율이 항상 정확히 80/20인 것은 아니며 항상 예외가 있기는 하지만, 어떤 행동이 성공에 가장 큰 영향을 미치는지 파악하고 그에 따라 우선순위를 정할 수 있도록 도와주는 훌륭한 도구입니다.

웹 디자인 및 디지털 마케팅의 파레토 원리

웹 디자인에 적용되는 파레토 원칙은 대부분의 결과가 소수의 핵심 기능에서 나온다고 가정합니다. 마케팅에서도 어떤 캠페인은 다른 캠페인보다 훨씬 더 좋은 성과를 거둘 수 있습니다. 최상의 결과를 얻으려면 이러한 소수의 핵심 기능에 먼저 집중하여 가장 많은 관심을 받고, 덜 중요한 부분은 더 빨리 처리하는 것이 좋습니다. 파레토 원칙을 활용하는 한 가지 방법은 사용자 경험과 유용성에 집중하는 것입니다. 사용자가 온라인 콘텐츠와 상호 작용하는 방식에 주의를 기울이고 필요한 것을 찾을 수 있도록 보장하면 단순히 미적인 측면에만 집중할 때보다 더 큰 보상을 얻을 수 있습니다. 완벽함이 항상 필요한 것은 아니며, 중요한 20%의 기능을 최적화함으로써 훨씬 더 효과적인 웹사이트를 만들 수 있다는 교훈을 얻을 수 있습니다.

예를 들어, 수공예 제품을 판매하는 소규모 이커머스 스토어의 트래픽 데이터를 살펴본 결과 몇 가지 파레토 추세를 발견했습니다. 예를 들어, 거의 모든 방문자가 모바일을 통해 사이트에 접속합니다. 대부분의 제품 판매는 소수의 카테고리에서 이루어집니다. 소셜 미디어 트래픽의 가장 큰 원천은 Facebook이었습니다. 제품 페이지의 히트 맵을 살펴보면 일부 영역에서 더 많은 참여가 이루어집니다. 페이지의 맨 윗줄과 왼쪽 아래에서 상호 작용 클러스터가 형성되는 전형적인 F 패턴을 어느 정도 관찰할 수 있습니다.

이 정보로 이 고객의 매출을 개선하기 위해 무엇을 할 수 있을까요?

이 예에서는 원래 데스크톱용으로 제작된 이 웹사이트의 모바일 환경을 개선하는 것이 가장 빠른 방법입니다. 모든 페이지의 히트맵을 조사하여 사용자 선호도에 대해 자세히 알아볼 수 있습니다. 예를 들어 FAQ 섹션에서 가장 많이 클릭된 질문을 숨겨두지 않고 홈 페이지로 이동할 수 있습니다. 클릭이 가장 많이 발생하는 페이지 영역에 수익성이 높은 제품을 표시할 수도 있습니다.

항상 '왜'로 시작하세요.

(이미지 출처: Envato Elements)

업계에서 경험한 바에 따르면, 많은 디자이너가 프로젝트의 목적과 관련된 핵심 정보가 누락되어 있더라도 기획서를 수락하고 디자인 작업을 시작하는 경우가 많았습니다. 아마도 기획서를 작성하는 사람이 이 정보를 암시적이라고 생각했거나 클라이언트가 간결하게 설명하지 않았을 것입니다. 작업을 시작하기 전에 잠시 한 발 물러서서 생각해 보세요. 지금 하고 있는 일을 하는 이유를 명확하게 이해하지 못하면 웹 디자인에 방향성이 부족해집니다. 웹 사이트가 자신과 클라이언트에게 보기에는 좋아 보일 수 있지만, 많은 시간을 투자했음에도 불구하고 클라이언트가 기대하는 결과를 얻지 못하면 실망스러운 결과를 초래할 수 있습니다.

스스로에게 물어보세요: 이 웹사이트의 존재 이유는 무엇인가요? 웹사이트의 최종 사용자는 누구이며, 이들은 웹사이트에서 어떻게 상호작용할 것인가? 웹사이트가 고객에게 어떻게 가치와 성공을 창출할 것인가? 클라이언트는 이러한 성공을 어떻게 측정할 것인가? 웹사이트는 어떻게 방문자를 유치하고 리드를 확보할 것인가? 이러한 질문에 답할 수 있고 '왜'를 이해하면 디자인 요소의 '무엇'과 '어떻게'의 우선순위를 정하기가 더 쉬워집니다. 원하는 결과를 시각화할 수 있으면 이를 달성하기 위해 가장 중요한 영역에 에너지를 집중하는 데 도움이 됩니다.

웹 디자인에서 최소 실행 가능한 제품 접근 방식 수용

웹사이트를 디자인할 때 결정해야 할 사항이 너무 많기 때문에 어디서부터 시작해야 할지 알기 어려울 수 있습니다. 최소기능제품(MVP) 접근 방식은 웹사이트의 핵심 요소만 즉시 구축한 다음 시간이 지남에 따라 고객 피드백을 통해 지속적으로 개선하는 것입니다. 일반적으로 비용과 시간을 절약하기 위해 또는 비즈니스 아이디어가 많은 가정을 기반으로 할 때 수행됩니다. 개발자는 모든 것을 한 번에 시도하는 대신 고객의 요구에 따라 기능의 우선 순위를 정하고 가능한 한 빨리 프로토타입을 만들 수 있습니다. 시간이나 예산에 대한 압박이 없더라도 웹사이트를 MVP로 수용하는 것은 파레토 원칙을 적용하고 완벽주의적 경향을 극복할 수 있는 환상적인 방법입니다. 나중에 언제든지 더 많은 기능을 추가할 수 있지만 지금은 가장 중요한 요소에 집중해야 한다는 것을 아는 것이 정신적으로 도움이 됩니다.

모바일 우선 디자인을 사용하면 웹사이트를 간소화할 수 있습니다.

웹사이트를 디자인할 때는 사용자에게 효과적이고 직관적인 경험을 제공하고자 합니다. 이를 달성하는 가장 좋은 방법은 '모바일 우선' 디자인 접근 방식으로 디자인하는 것입니다. 이 개념은 모바일에 맞게 조정된 데스크톱 웹사이트가 아니라 모바일 장치에 최적화된 웹사이트를 먼저 제작하는 것입니다. 이것이 왜 필요할까요? 2022년 techjury.net에 따르면 휴대폰이 웹사이트 트래픽의 60.66%를 생성하고 데스크톱과 태블릿을 합치면 39.34%를 차지할 것으로 예상됩니다. 이는 업종과 웹사이트에 따라 다를 수 있지만, 이러한 추세는 주목할 가치가 있습니다. 사이트의 모바일 버전에 디자인을 집중하면 성공 확률을 높일 수 있습니다.

모바일 디바이스용 디자인을 시작하면 문구와 군더더기를 넣을 공간이 줄어든다는 것을 금방 알 수 있습니다. 오랫동안 데스크톱용 디자인을 해왔다면 적응하기가 매우 어렵습니다. 그러나 이 접근 방식은 가장 큰 영향을 미치는 콘텐츠를 선택하는 데 도움이 되므로 파레토 원칙에 잘 맞습니다. 사이트가 사용자가 선호하는 모바일 플랫폼에 최적화되고 데스크톱에 맞게 조정하면 시각적으로 현대적이고 깔끔하게 보인다는 두 가지 이점이 있습니다. 나중에 웹사이트를 데스크톱에 맞게 조정해야 하지만 모바일 우선 접근 방식으로 작업할 때는 이미 간소화된 디자인이 있기 때문에 훨씬 쉬워집니다.

경쟁사 웹사이트 조사 및 분석

웹 디자인에 관해서는 흔히 영감을 주는 다른 웹사이트나 아름다운 디자인 요소를 갖춘 템플릿을 살펴보는 것을 연구라고 생각합니다. 하지만 웹 디자인에 대한 연구는 단순히 다른 웹사이트의 미학에 감탄하는 것 이상의 의미를 갖습니다. 사람들이 웹을 사용하는 방식, 사용자가 다양한 디자인과 상호 작용하는 방식, 효과적인 웹사이트를 만들기 위해 콘텐츠가 구성되는 방식을 이해해야 합니다. 클라이언트가 제공할 수 있는 분석 데이터를 요청하거나 Ranktracker와 같은 모니터링 도구를 사용하면 더 나은 웹사이트 성능을 위해 개선할 수 있는 영역을 더 잘 파악할 수 있습니다.

조사에는 경쟁사 분석을 통해 기존 업계 표준, 타겟 오디언스 및 사용자 선호도를 조사하는 것이 포함되어야 합니다. 경쟁업체는 고객에게 문의하거나 직접 검색하여 어떤 웹사이트가 상위권에 있는지 확인하여 찾을 수 있습니다. 경쟁업체를 파악한 후에는 해당 경쟁업체에 대한 신뢰할 수 있는 데이터 소스가 필요합니다. 제가 가장 좋아하는 Ranktracker의 기능 중 하나는 직접 식별한 경쟁업체를 추가할 수 있는 기능으로, 내 도메인 결과 옆 열에 경쟁업체의 실적을 표시해 줍니다. 경쟁업체가 내 키워드에서 나보다 순위가 높은 경우, 경쟁업체의 웹사이트를 분석하여 배울 가치가 있습니다. 경쟁업체를 추가하려면 해당 경쟁업체의 URL을 붙여넣기만 하면 됩니다.

경쟁사 분석을 수행하는 방법에 대한 심층적인 기사를 보려면 클릭하세요.

모든 조사를 하는 동안 포함할 수 있는 모든 가능한 기능과 요소의 '꿈의 목록'을 작성하세요(범위를 좁힐 수 있지만 모든 아이디어를 함께 모아두는 것이 도움이 됩니다).

계획: 주요 디자인 특징 파악하기

(이미지 출처: Envato Elements)

웹사이트의 디자인은 의도된 목적을 기반으로 해야 합니다. 꿈의 목록에 있는 모든 요소/기능을 살펴보고 고객이 목표를 달성하는 데 도움이 될 것으로 생각되는 요소를 선택하세요. 빈 종이에 웹사이트의 대략적인 와이어프레임을 그리기 시작합니다. 와이어프레임에 포함할 각 요소를 결과물과 연결해 보세요. 명확한 목적을 찾을 수 없다면 해당 섹션을 스크랩하세요. 디자인 미학에 대해 생각하지 말고 사용자 경험과 사용성에 가장 적합한 것이 무엇인지에 집중하세요.

일반적인 생각과는 달리, 첫 번째 와이어프레임을 멋진 디자인 소프트웨어로 디자인할 필요는 없습니다. 연필과 종이의 아날로그 방식도 잘 작동하며, 때로는 소프트웨어 자체에 방해받지 않기 때문에 더 좋은 결과를 얻을 수도 있습니다. 종이는 더 관대하고 영구적이지 않으며, 더 빠르게 사용할 수 있어 창작 과정에 도움이 될 수 있습니다. 고객에게 와이어프레임을 제시해야 하는 경우, 대략적인 드로잉을 완성한 후에는 보다 전문적으로 작업할 수 있습니다.

시간을 절약하기 위해 웹 플랫폼에서 디자인하지 말고 먼저 목업을 만드세요.

비행기를 만드는 동안에는 비행기를 조종할 수 없다는 옛 속담이 있습니다. 웹 디자인도 마찬가지입니다. 콘텐츠, 기능, 디자인에 대한 결정을 내리지 않은 상태에서 웹 사이트를 구축하려고 하면 좌절할 수밖에 없습니다. 일을 효율적으로 진행하려면 계획이 필요합니다. 모든 페이지의 목업을 만드는 것은 시간이 많이 걸리고 직관적이지 않은 것처럼 보이지만, 여러 가지 용도로 사용되며 장기적으로 시간을 절약할 수 있습니다. 목업을 사용하면 웹 개발을 시작하기 전에 고객이 웹 사이트를 시각화할 수 있습니다. 다양한 색상과 글꼴 옵션을 경험하고 변경해야 할 사항을 쉽게 예측할 수 있습니다. 목업에 대해 논의하면 토론과 질문의 기회가 많이 생깁니다. 고객이 라이브 사이트를 처음 봤을 때 만족할 가능성이 높아집니다. 가장 중요한 것은 목업으로 작업하면 거의 모든 창의적인 결정이 이미 이루어졌기 때문에 개발 단계에 들어가면 웹 사이트를 훨씬 빠르게 구축할 수 있다는 것입니다.

검색 엔진에서 높은 순위를 차지할 수 있는 콘텐츠로 작업하세요.

간혹 클라이언트가 미적 요소만 디자인하는 것이 자신의 역할이라고 생각하여 '플레이스홀더 텍스트'로 디자인을 시작하라고 고집하는 경우가 있습니다. 가능하면 일반적인 플레이스홀더 텍스트를 사용한 디자인 작업은 피하세요. 디자인이 아름답게 보일 수는 있지만 잘 작성된 콘텐츠와 같은 핵심 요소를 소홀히 하면 웹사이트의 목적이 없어집니다.

웹사이트는 방문자를 확보해야만 가치가 있으며, 검색 엔진 최적화(SEO)는 검색 엔진이 회원님의 웹사이트를 유기적으로 찾는 방식입니다. 페이지에서 사용하는 문구 선택은 SEO에 매우 중요하며, 디자인 요소는 문구를 뒷받침해야 합니다. 키워드가 무엇인지 미리 알고 있다면 추가적인 인사이트를 얻을 수 있습니다. 콘텐츠 카피라이터와 함께 작업하는 경우 카피라이터가 SEO에 대해 잘 알고 있는지 확인하세요. SEO 전문가가 아니더라도 이 주제에 익숙해지면 웹 디자인 과정에서 이를 더 잘 파악할 수 있습니다.

일부 키워드 검색 도구는 복잡하지만(특히 SEO를 처음 사용하는 경우) Ranktracker 키워드 파인더는 매우 간단하고 직관적입니다. 키워드를 목록에 추가하기만 하면 키워드 난이도에 따라 색상으로 구분된 결과를 표시합니다. 좋은 SEO를 위해서는 경쟁은 적지만 검색량이 적절한 키워드를 선택해야 하므로 검색량이 바로 표시되는 것이 매우 유용합니다.

따라서 시작하기 전에 최소한 문구 초안을 확보하세요. 독립형 디자이너라면 고객이 웹사이트의 어느 위치에 문구가 가장 잘 어울리는지 파악하는 데 도움을 주어야 할 수도 있습니다. 디자인 과정에서 문구가 몇 번 바뀔 수도 있지만, 시작하기 위한 문구가 있는 것이 아무것도 없는 것보다 훨씬 낫습니다.

글꼴, 색상, 계층 구조 및 시각적 요소에 대한 선택 간소화

경험이 적은 디자이너이거나 시간을 절약하고 싶다면 템플릿을 기초로 작업하는 것이 도움이 됩니다. 워드프레스와 같은 CMS의 경우 합리적인 가격에 수천 개의 훌륭한 템플릿이 있습니다. 이러한 템플릿에는 이미 일관된 스타일로 디자인된 글꼴, 색상, 계층 구조 및 시각적 요소가 포함되어 있습니다. 독창성이 걱정된다면 템플릿을 내 와이어프레임에 맞게 조정하기 때문에 결과물이 템플릿과 다르게 보일 수 있으니 안심하세요. 몇 가지 디자인 에셋과 일반적인 스타일로 시작하면 방향을 찾고 의사 결정의 피로를 줄이는 데 도움이 될 수 있습니다. 너무 많은 색상을 포함하지 마세요. 웹사이트 색상은 2가지 색상 또는 최대 3가지로 안전하게 제한할 수 있습니다. 웹사이트 색상을 선택할 때 유용한 아이디어와 트렌드를 확인하려면 웹사이트에 시도해 볼 수 있는 20가지 최고의 색상 조합을 확인하세요.

결론: 영향력 극대화

어디에 집중해야 하는지 알면 디자이너가 완벽주의적 성향을 관리하면서도 성공을 거둘 수 있습니다. 파레토 원칙은 웹 디자인에서 20%의 노력으로 사용자 경험의 80%를 달성할 수 있다는 경험 법칙입니다. 즉, 웹 디자이너는 콘텐츠, 페이지 디자인 요소, 사용성 및 기타 요소를 최적화하여 검색 엔진에서 좋은 순위를 차지할 수 있는 효과적인 웹사이트를 만드는 데 집중해야 합니다.