분석 및 테스트콘텐츠마케팅

디스플레이는 매우 넓을 수 있지만 이것이 귀하의 웹 페이지가 넓어야 한다는 의미는 아닙니다.

아마도 당신은 다음과 같은 디자인이 포함된 웹사이트를 방문했을 것입니다. 전폭 브라우저의. 눈으로 페이지의 전체 너비를 훑어보았기 때문에 내용을 소화하기가 쉽지 않다는 것을 눈치채셨을 것입니다. 실제로 잘 알려진 가독성과 사용자 경험입니다(UX) 문제.

연구 타이포그래피 인지 심리학에서는 줄 길이가 짧을수록 읽기가 더 쉽고 편안해진다고 제안합니다. 텍스트 줄이 너무 길면 눈이 한 줄의 끝에서 다음 줄의 시작 부분까지 추적하는 것이 더 어려워집니다. 이는 눈의 피로를 증가시키고 내용물을 흡수하는 데 어려움을 줄 수 있습니다.

컬럼 사용 내역

컬럼 사용의 과학은 흥미롭고 실용성과 가독성에 뿌리를 두고 있습니다.

  1. 역사적 관점: 신문의 좁은 기둥의 전통은 인쇄 매체의 초기 시대로 거슬러 올라갑니다. 17세기 초 신문이 처음 등장했을 때 신문은 단일의 넓은 시트 형식을 사용하여 인쇄되는 경우가 많았습니다. 그러나 신문이 발전하면서 레이아웃은 여러 열을 포함하도록 변경되었습니다. 이러한 변화는 부분적으로 기술적 제약과 경제적 요인에 의해 주도되었습니다. 그 당시 사용된 인쇄기는 품질 저하 없이 넓은 공간에 걸쳐 인쇄하는 능력이 제한되어 있었고, 열이 좁을수록 한 페이지에 더 많은 텍스트를 넣을 수 있어 신문 제작 비용이 더 효율적이었습니다.
  2. 가독성과 안구 운동: 과학적 관점에서 볼 때, 신문 칼럼의 너비는 우리의 눈과 뇌가 쓰여진 정보를 처리하는 방식과 밀접하게 연관되어 있습니다. 텍스트 가독성을 위한 최적의 줄 길이는 일반적으로 줄당 약 50-60자입니다.
  3. 열 너비가 읽기 속도와 이해력에 미치는 영향: 연구에 따르면 열 너비가 좁으면 읽기 속도와 이해력이 향상될 수 있는 것으로 나타났습니다. 선이 짧을수록 눈의 움직임이 더 빨라지고 텍스트 스캔이 더 쉬워지기 때문입니다. 대조적으로, 넓은 열은 독자의 눈이 한 줄에서 한 줄로 더 많이 이동해야 하기 때문에 읽기 속도가 느려질 수 있습니다.
  4. 현대적인 디자인에 대한 적응: 전통적인 신문 형식은 동일하게 유지되었지만 디지털 미디어는 다양한 화면 크기와 독서 습관에 적응해야 했습니다. 온라인 신문과 전자책은 개인 취향과 다양한 장치 크기에 맞게 조정 가능한 열 너비를 제공하는 경우가 많습니다.

신문 칼럼 디자인에서 파생된 원리는 웹 디자인에도 영향을 미쳤습니다. 웹 사이트에서는 쉽게 읽을 수 있도록 좁은 텍스트 열이나 격자 레이아웃을 사용하는 경우가 많으며, 이는 신문 레이아웃 디자인의 수백 년 된 지혜를 반영합니다.

브라우저 너비 및 화면 해상도

통계적으로 가장 일반적인 브라우저 너비와 화면 해상도는 장치 유형에 따라 다릅니다. 다음은 모바일, 태블릿 및 데스크톱 장치에 대한 가장 일반적인 해상도와 시장 점유율 비율을 표시하는 표입니다.

변하기 쉬운태블릿바탕 화면
360×800(11.65%)768×1024(26.96%)1920×1080(22.7%)
390×844(7.26%)810×1080(9.68%)1366×768(14.47%)
414×896(5.66%)1280×800(6.76%)1536×864(10.41%)
393×873(5.16%)800×1180(5.04%)1440×900(6.61%)
328×926(3.84%)962×601(2.99%)1600×900(3.8%)

이러한 통계는 웹페이지 디자인에 큰 영향을 미칩니다. 화면 해상도가 다양하기 때문에 모든 경우에 적용할 수 있는 단일 접근 방식은 불가능합니다. 모바일 기기(55.67%)와 데스크톱(42.4%)을 통해 발생하는 트래픽의 상당 부분을 고려하면 기업은 모바일 반응형 디자인에 투자해야 합니다.

초광각 화면에 맞게 디자인하는 것은 텍스트의 가로 범위가 길어 읽기가 어려울 수 있으므로 가장 효과적인 접근 방식이 아닐 수 있습니다. 디자이너는 일반적으로 하나의 표준 데스크톱 및 모바일 해상도를 사용하여 디자인을 확장하여 여러 장치에서 원활한 사용자 경험을 보장합니다. 반응형 웹 디자인과 모바일 우선 웹 디자인 사이의 선택은 대상 고객과 선호하는 장치에 따라 다릅니다.

초광각 브라우저 디자인 모범 사례

사용자 인터페이스 디자인(UI) 긍정적인 사용자 경험 보장(UX) 초광각 디스플레이의 경우 몇 가지 모범 사례가 필요합니다. 이러한 관행은 공간 사용을 최적화하고 가독성을 높이며 탐색 용이성을 보장하는 것을 목표로 합니다. 다음은 몇 가지 주요 지침입니다.

  1. 응답 디자인: 웹사이트나 애플리케이션이 반응성이 뛰어나고 다양한 화면 크기에 유연하게 적응하는지 확인하세요. 이는 종횡비가 표준 화면과 크게 다른 초광각 디스플레이에 매우 중요합니다.
  2. 제어된 열 너비: 텍스트가 많은 콘텐츠의 경우 텍스트 열의 최대 너비를 제한합니다. 넓은 열은 한 줄의 끝에서 다음 줄의 시작 부분까지 눈이 먼 거리를 이동해야 하기 때문에 읽기를 어렵게 만들 수 있습니다.

경험상 좋은 규칙은 한 줄에 60-75자를 수용하는 열 너비를 유지하는 것입니다.

  1. 그리드 사용: 콘텐츠를 효과적으로 정리하기 위해 그리드 시스템을 구현합니다. 그리드는 균형 잡힌 레이아웃을 만드는 데 도움이 되며 울트라와이드 화면에서 공백을 관리하는 데 유용할 수 있습니다.
  2. 지대 설정: 다양한 유형의 콘텐츠나 상호 작용을 위해 화면을 별개의 영역으로 나눕니다. 이를 통해 사용자는 인터페이스를 보다 직관적으로 탐색하고 인지 부하를 줄일 수 있습니다.
  3. 사이드바 탐색: 탐색 및 추가 정보를 위해 사이드바를 사용하는 것을 고려해 보세요. 이는 기본 콘텐츠 영역에 영향을 주지 않고 추가 수평 공간을 효과적으로 활용합니다.
  4. 계층적 레이아웃: 콘텐츠 전체에서 사용자의 시선을 안내하기 위해 명확한 시각적 계층 구조를 사용합니다. 이는 방향 감각 상실 위험이 높은 대형 화면에서 특히 중요합니다.
  5. 일관된 정렬: 인터페이스 전반에 걸쳐 정렬 일관성을 유지합니다. 잘못 정렬된 요소는 더 넓은 화면에서 더 눈에 띄고 산만해질 수 있습니다.
  6. 집중 콘텐츠 영역: 중요한 콘텐츠에 집중된 영역을 만들어 사용자의 관심을 끌 수 있습니다. 이는 대비되는 색상, 크기 변형 또는 그래픽 요소를 사용하여 달성할 수 있습니다.
  7. 수평 스크롤 피하기: 가로 스크롤은 방향 감각을 혼란스럽게 할 수 있으므로 피해야 합니다. 더 넓은 화면에서도 콘텐츠를 수직으로 수용할 수 있는 레이아웃을 디자인하세요.
  8. 가독성을 위해 최적화: 텍스트 크기, 줄 간격, 글꼴 선택이 최적화되었는지 확인하세요. 너무 작거나 비좁은 텍스트는 대형 디스플레이에서 읽기 어려울 수 있습니다.
  9. 멀티태스킹 촉진: 초광각 화면은 더 많은 공간을 제공하므로 여러 개의 창이나 패널이 열려 있는 등 멀티태스킹이 용이한 인터페이스를 디자인합니다.
  10. 접근 용이성: 접근성을 염두에 두고 모든 사용자가 기기에 관계없이 사이트에 효과적으로 액세스하고 사용할 수 있도록 하세요.
  11. 여러 장치에서 테스트: 울트라와이드 모니터를 포함한 다양한 장치에서 디자인을 테스트하여 가능한 모든 시나리오에서 잘 확장되고 작동하는지 확인하세요.
  12. 고해상도 이미지 사용: 큰 화면에서도 픽셀화되지 않는 고해상도 이미지를 활용하여 인터페이스의 시각적 품질을 유지합니다.
  13. 균형 잡힌 공백: 공백을 신중하게 사용하여 혼잡하지 않으면서 넓은 화면 공간을 효과적으로 활용하는 레이아웃을 만듭니다.

울트라와이드 디스플레이를 위한 효과적인 UI/UX 디자인의 핵심은 공간을 채우기 위해 요소를 확장하는 것뿐만 아니라 사용자 참여와 경험을 향상시키기 위한 사려 깊은 구성과 콘텐츠 적용에 달려 있습니다.

일부 평균 글꼴 크기의 경우 픽셀 단위로 75자(문자 사이의 공백 포함) 너비는 대략 다음과 같습니다.

  • 10pt 글꼴: 375.0 픽셀
  • 12pt 글꼴: 450.0 픽셀
  • 14pt 글꼴: 525.0 픽셀
  • 16pt 글꼴: 600.0 픽셀
  • 18pt 글꼴: 675.0 픽셀
  • 20pt 글꼴: 750.0 픽셀

이러한 계산에서는 평균 글꼴의 문자 너비가 문자 사이의 공백을 포함하여 대략 높이의 절반이라고 가정합니다. 따라서 가독성을 최대화하려면 1920px 와이드 화면을 여러 열로 나누어야 할 수도 있습니다.

사용할 웹사이트 차원에 대한 결정은 연령, 성별, 위치, 소득 등 대상 고객의 인구통계를 기반으로 해야 합니다. 이는 대상 고객이 사용하는 장치를 결정할 수 있기 때문입니다.

Google Analytics 4: 화면 해상도

방문자의 후속 행동을 검토하려는 경우 GA4에서 이를 제공할 수 있습니다. 보고서 > 사용자 > 기술 > 개요.

주말이나 근무 시간 외, 이벤트 및 전환에 대한 데이터를 필터링하십시오. 방문자가 화면 해상도에 따라 상호 작용하는 시기와 이유를 기반으로 콘텐츠를 더 잘 표시할 수 있는 통찰력과 기회를 찾을 수 있습니다.

사용자별 GA4 화면 해상도

Douglas Karr

Douglas Karr 의 CMO입니다. 오픈인사이트 그리고 설립자 Martech Zone. Douglas는 수십 개의 성공적인 MarTech 스타트업을 도왔고, Martech 인수 및 투자에서 5억 달러가 넘는 실사를 도왔으며, 기업이 판매 및 마케팅 전략을 구현하고 자동화하도록 지속적으로 지원하고 있습니다. Douglas는 국제적으로 인정받는 디지털 혁신이자 MarTech 전문가이자 연설가입니다. Douglas는 Dummie's Guide와 비즈니스 리더십 서적을 집필한 작가이기도 합니다.

관련 기사

맨 위로 가기 버튼
닫기

애드블록 감지됨

Martech Zone 은(는) 광고 수익, 제휴 링크 및 후원을 통해 사이트에서 수익을 창출하기 때문에 이 콘텐츠를 무료로 제공할 수 있습니다. 사이트를 볼 때 광고 차단기를 제거해 주시면 감사하겠습니다.