GitHub의 Octoverse 디자인: 데이터 시각화 사례 연구

작년에 저는 GitHub와 협력하여 2021년 옥토버스 현황 보고서를 디자인했습니다. GitHub의 Octoverse는 수백만 개발자와 저장소의 실제 데이터를 분석하여 올해의 소프트웨어 개발 산업 통찰력을 제공합니다. 2021년 보고서는 코드 개발, 문서 작성, 보다 스마트하고 지속 가능한 방식으로 커뮤니티 지원을 통한 성능 및 웰빙 개선의 세 가지 주요 트렌드를 다룹니다.

프로젝트의 창의적인 연락 담당자로서 GitHub 팀이 데이터가 많은 보고서를 쉽게 이해할 수 있도록 지원하는 것이 내 일이었습니다. 데이터 시각화를 사용하여 GitHub 데이터 과학자들이 수집한 정보를 독자들이 푸는 데 도움이 되도록 20개 이상의 차트, 지도 및 그래프를 디자인했습니다.

이 데이터 시각화 사례 연구에서는 디자인 프로세스를 설명하고 GitHub의 Octoverse를 위해 만드는 데 도움이 된 웹 사이트를 소개하고 프로젝트에서 얻은 주요 학습 내용을 공유합니다.

데이터 시각화로 매력적인 디지털 경험 디자인하기

State of the Octoverse 2021은 7,300만 이상의 GitHub 개발자와 6,100만 이상의 새로운 저장소에서 수집된 데이터가 포함된 방대한 보고서입니다. 응답자 인구통계에 대한 설문조사가 포함된 것은 이번이 처음입니다. 데이터를 이해하려면 광범위한 설계 노력이 필요했습니다.

개발자 Jose Luis Garrido와 프로젝트 매니저 Miquel Lopez를 포함하는 우리의 겸손한 팀은 독자를 위해 이 방대한 양의 정보를 합성하는 임무를 맡았습니다. 지연된 시작과 다른 동시 프로젝트에도 불구하고 우리는 전달했습니다.

설계 프로세스 시작

내 데이터 시각화 디자인 프로세스의 첫 번째 단계는 발견이었습니다. GitHub의 데이터 과학자는 Excel 파일, PowerPoint 프레젠테이션 및 기타 데이터 세트를 통해 개발자 및 리포지토리에서 정보를 수집하고 분석했습니다.

이 정보와 GitHub의 초기 데이터 시각화 스케치 및 60페이지 컨텍스트 문서와 함께 각 데이터 세트를 가장 잘 설명하는 방법에 대해 생각하기 시작했습니다. 그런 다음 최대한의 사용자 참여와 직관적인 사용자 경험을 위해 각 차트, 지도 및 다이어그램을 디자인하기 시작했습니다.

차트 선택

효과적인 데이터 시각화를 선택하는 데에는 세 가지 핵심 사항이 있습니다.

1. 차트의 목적 식별

데이터는 막대 차트, 선 그래프, 히트맵, 폭포 차트 등 다양한 방법으로 나타낼 수 있습니다. 각 차트는 목적에 부합하며 명확하고 정확한 메시지가 전달되도록 올바른 차트를 사용하는 것이 중요합니다.

예를 들어, 두 수량 간의 차이를 표시하려면 막대 차트를 사용하십시오. 시간 경과에 따른 추세를 표시하려면 선 그래프를 사용하십시오.

2. 최종 사용자를 고려하십시오

또한 데이터를 읽고 분석하는 사용자의 능력을 알고 있어야 합니다. 우리 중 대부분은 원형, 막대 및 선 차트에 익숙합니다. 우리는 그것들을 어디에서나 볼 수 있고 읽을 줄 압니다.

반면에 많은 연구 간행물에서 여러 데이터 변수를 하나의 차트로 요약하는 데 사용되는 상자 그림을 읽는 방법을 아는 사람은 적습니다.

사용자에게 익숙하지 않은 시각화를 제공하면 데이터를 해석하는 데 어려움을 겪을 것입니다.

3. 명료한 디자인

데이터 시각화가 명확하고 간결합니까, 아니면 노이즈가 너무 많습니까? 막대 차트는 데이터를 표시하는 좋은 방법이 될 수 있지만 개별 레이블이 있는 막대가 100개인 경우에는 그렇지 않습니다. 마찬가지로 스트림 그래프는 아름답고 기능적이지만 명확한 데이터 패턴이 있는 경우에만 가능합니다. 때로는 더 적은 것이 더 많습니다.

완벽한 데이터 시각화 설계

2021년 옥토버스 현황 보고서 전체에서 해당 데이터 통찰력에 따라 신중하게 구성된 다양한 데이터 시각화를 찾을 수 있습니다.

나비 차트

개요 페이지에서 두 가지 데이터 세트에 대한 인포그래픽을 디자인해야 했습니다. 즉, 응답자가 전염병 이전과 이후에 어디에서 일했는지 보여줍니다. GitHub는 각각 4개의 데이터 포인트를 매핑한 두 개의 원형 차트를 제공했습니다: collocated, hybrid, 완전히 원격 및 해당 없음. 그러나 원형 차트는 두 데이터 집합을 비교할 때 특히 효과적이지 않습니다.

대신 나비 차트를 선택했습니다. 나비형 차트는 나비 날개를 닮은 두 개의 가로 막대로 데이터를 나란히 표시합니다. 이 차트는 동일한 매개변수를 공유하는 두 그룹 간의 차이를 명확하게 보여주고 두 데이터 세트를 훨씬 쉽게 비교할 수 있도록 합니다.

범프 차트

또 다른 효과적인 데이터 시각화는 범프 차트입니다. 이 차트를 사용하여 지난 8년 동안 개발자가 사용한 가장 인기 있는 컴퓨터 프로그래밍 언어에 대한 정보를 표시했습니다. 범프 차트는 일정 기간 동안 순위의 변화를 표시하는 데 유용하며 Octoverse 보고서의 필수 요소가 되었습니다.

트리맵

응답자가 코드를 제공하는 다양한 부문을 설명해야 했습니다. 최종 결정은 파이 차트와 트리맵으로 이루어졌습니다.

파이 차트는 섹터가 3개 또는 4개이고 양이 명확하게 다를 때 유용합니다. 그러나 우리의 뇌는 각도를 잘 처리하지 못하기 때문에 비슷한 크기의 쐐기가 많은 원형 차트가 있으면 사람들은 어느 쪽이 더 큰지 해독하기 어렵습니다.

대조적으로, 트리맵을 사용하면 세그먼트를 전체뿐만 아니라 서로 쉽게 비교할 수 있습니다. 가장 큰 사각형은 왼쪽 상단에 배치되고 점차적으로 작은 사각형이 배치됩니다. 쐐기나 각도를 비교하는 것보다 직선을 비교하는 것이 더 쉽습니다.

지도 문자

마지막으로 2021년 GitHub를 사용하는 조직의 지리적 분포를 지역 또는 국가별로 설명해야 했습니다. 이를 위해 인구 지도를 사용했습니다. 카토그램은 특정 경제적, 사회적, 정치적 또는 환경적 특징을 수용하기 위해 기하학이 왜곡된 지도입니다.

이 데이터 시각화에서 사각형의 크기는 모집단 크기를 나타냅니다. 또한 사각형 색상의 채도는 해당 영역에서 GitHub를 사용하는 조직의 수를 나타냅니다.

GitHub의 Octoverse 2021을 위한 반응형 웹사이트 디자인

데이터 시각화를 디자인하는 것 외에도 GitHub 팀이 Octoverse 2021을 위한 웹사이트를 제작하는 것을 도왔습니다. 이 사이트는 사용자가 보고서의 데이터 통찰력을 읽고, 탐색하고, 상호 작용할 수 있는 허브였습니다.

사용자 참여를 장려하기 위해 사이트의 렌더링을 다양한 크기의 표시 영역에 적용할 수 있는 완전 반응형 웹사이트를 선택했습니다. GitHub는 더 큰 기기가 Octoverse 방문의 대부분을 차지한다는 사실을 알게 된 후 데스크톱 버전에 특별한 주의를 기울일 것을 요청했습니다.

반응형 사이트를 디자인할 때 다음 모범 사례를 따랐습니다.

• 데스크탑 친화적인 서체와 모바일 친화적인 서체로 텍스트를 작성합니다. 여기에는 최적의 글꼴 크기, 서체, 줄 길이와 높이를 선택하고 텍스트가 다양한 중단점에서 어떻게 보이는지 조정하는 것이 포함됩니다.
• 스크롤을 장려하기 위해 각 페이지에 시각적 요소를 배치합니다.
• 레이아웃을 뷰포트 크기에 맞게 조정하는 사용자 친화적인 상단 탐색 모음을 디자인합니다.

처음부터 다양한 기기를 염두에 두고 웹사이트를 디자인했기 때문에 대부분의 차트는 모든 화면 크기에서 잘 렌더링되었습니다. "지속 가능한 커뮤니티" 섹션 끝에 있는 원형 덴드로그램과 같이 최적의 보기 가능성을 위해 약간만 조정하면 됩니다.

정보 아키텍처 구성

웹사이트의 정보 아키텍처에 대한 다양한 옵션을 살펴보았습니다. 너무 많은 정보로 사용자를 압도하고 싶지 않았지만 사이트가 흩어져 있거나 탐색하기 어려운 것도 원하지 않았습니다.

이를 염두에 두고 모든 콘텐츠가 동일한 페이지에 있는 긴 스크롤 웹사이트를 디자인하는 것으로 시작했습니다. 시각적으로 압도적일 때 각 차트를 별도의 페이지에 배치하려고 했습니다. 탐색을 돕기 위해 책에서 찾을 수 있는 것과 유사한 목차와 함께 각 페이지에 측면 탐색 메뉴를 추가했습니다. Octoverse 웹사이트의 최종 디자인은 세 가지 주요 트렌드에 대한 별도의 웹페이지와 가장 중요한 데이터를 요약한 홈페이지로 구성됩니다.

정보 아키텍처를 결정한 후 사이트의 콘텐츠 구조, 탐색 흐름, 이미지 및 그래픽 디자인으로 넘어갔습니다. 콘텐츠를 매핑하고 다른 페이지 간의 경로를 표시하기 위해 와이어프레임을 만들었습니다.

웹사이트를 인터랙티브하게 만들기

스크롤 진행률 표시기

매력적이고 역동적인 웹사이트에 대한 GitHub의 요청을 충족하기 위해 대화형 요소를 추가했습니다. 예를 들어, 상단 탐색 모음 아래에 방문자가 사이트에서 자신이 어디에 있었는지 추적할 수 있도록 스크롤 진행률 표시기를 디자인했습니다. 독자가 페이지를 아래로 스크롤하면 표시 막대의 크기가 점차적으로 조정되고 각 페이지에는 막대의 채우기 색상(회색, 자주색, 파란색 또는 녹색)이 다릅니다.

애니메이션 헤더, 이미지 및 데이터 시각화

웹사이트가 평면적으로 보이지 않도록 하기 위해 섹션 헤더에 애니메이션을 적용하기로 결정했습니다. 제가 삽화를 만들었고 우리 팀의 개발자가 애니메이션을 만들었습니다. 또한 홈페이지와 각 하위 섹션의 영웅 이미지와 각 웹 페이지 하단의 해당 챕터 카드에 애니메이션을 적용했습니다.

또한 일부 정적 데이터 시각화 차트를 대화형으로 만들었습니다. 예를 들어 범프 차트에서 선 위로 스크롤하면 해당 데이터 포인트를 강조하기 위해 선이 두꺼워집니다. 사이트 방문자가 데이터와 상호 작용하고 언어를 빠르게 비교할 수 있도록 하는 간단하지만 효과적인 애니메이션입니다.

GitHub를 위한 성공적인 데이터 시각화 및 디지털 디자인 생성: 주요 학습 사항

데이터는 이해할 수 있을 때만 유용하며 사용자가 쉽게 해독할 수 있는 데이터가 많은 콘텐츠를 설계하는 과정은 어렵습니다. 그럼에도 불구하고 GitHub와의 이번 협업은 데이터 시각화 디자인에 대한 지식을 넓혔습니다. 이 데이터 시각화 사례 연구에서 가장 중요한 정보는 다음과 같습니다.

• 브랜드 알기: 유형, 색상 및 이미지 사용과 같은 브랜드의 핵심 스타일 지침에 익숙해지면 디자이너가 창의적인 프로세스로 이동할 수 있기 때문에 디자인 프로세스의 속도가 빨라집니다. 컬래버레이션 전에 GitHub의 브랜드에 대해 많이 알고 있어서 운이 좋았고 이 지식을 사용하여 디자인을 알릴 수 있었습니다.
• 올바른 유형의 데이터 시각화 선택: 데이터 요소를 나타내는 올바른 시각화를 선택하는 것이 중요합니다. 잘못된 표현은 혼란을 일으키거나 잘못된 메시지를 전달할 수 있습니다.
• 색상을 현명하게 사용하십시오 . 올바른 색상 조합은 독자의 눈을 안내하고 특정 데이터 포인트에 주의를 집중시킵니다.
• 호기심을 유지하십시오. 매력적인 데이터 스토리를 전달하려고 할 때 복잡한 설계 문제에 부딪히게 되므로 흔하지 않은 솔루션과 지속적인 학습에 개방적인 태도를 취하는 것이 중요합니다.