[내일배움캠프] Day10 - 디자인카타 (월별 시세 비교 그래프, 어떤 보기 방식을 선택하시겠어요?)

---

 

[주제]

---

 

[선택과 이유]

 

내 선택은 B 디자인이다.

우선 예시에는 데이터가 많지 않기 때문에 한 눈에 바로 볼 수 있는 그래프로 골랐고,

A의 경우 많은 항목이나 세부 데이터를 다루는 경우에 사용하기 좋고 화면 공간이 제한된 장치에서 깔끔한 인터페이스 유지 할 수 있다는 장점이 있고,

B의 경우에는 사용자 동작 없이 한눈에 모든 시세 정보를 확인할 수 있지만 데이터가 많으면 화면이 복잡해지고 가독성이 떨어질 수 있기 때문에 두 가지를 적절하게 함께 쓰면 좋을 것 같다는 생각이 들었다.

평균 시세는 항상 보이게 하고, 최고 / 최저 시세나 전년 대비 증감률은 터치나 호버를 하면 보일 수 있게 하면 깔끔한 디자인과 빠른 정보 전달 두 가지를 모두 만족시킬 수 있을 것 같다.

 

---

 

1. 터치하면 결과값이 보이는 그래프 (인터랙티브 그래프)

장점

• 깔끔한 디자인: 불필요한 숫자나 정보가 항상 표시되지 않아 시각적으로 더 깨끗하고 집중하기 쉽습니다.
• 사용자 참여: 사용자가 직접 데이터를 탐색하면서 원하는 정보를 찾는 재미와 몰입감을 제공합니다.
• 복잡한 데이터 처리: 데이터 포인트가 많을 때 모든 값을 표시하면 복잡해지는데, 터치 시에만 값을 보여주면 혼잡함을 줄일 수 있습니다.

단점

• 추가 동작 필요: 사용자가 원하는 정보를 얻기 위해 터치나 클릭을 해야 하므로, 빠르게 정보를 파악하려는 사용자에게는 불편할 수 있습니다.
• 모바일 환경 제한: 손가락으로 작은 데이터 포인트를 정확히 터치하기 어려울 수 있습니다.

적합한 경우

• 복잡한 시세 데이터: 많은 항목이나 세부 데이터를 다루는 경우.
• 모바일/태블릿 환경: 화면 공간이 제한된 장치에서 깔끔한 인터페이스 유지.
• 탐색 중심의 사용자 경험: 사용자가 데이터를 직접 분석하고 탐색하는 상황.

---

 

2. 동작 없이 결과값이 항상 보이는 그래프 (정적 그래프)

장점

• 즉각적인 정보 제공: 사용자 동작 없이 한눈에 모든 시세 정보를 확인할 수 있습니다.
• 프레젠테이션 및 리포트용: 빠른 의사결정이 필요한 상황에서 즉각적인 데이터 제공이 용이합니다.
• 데스크탑 환경 최적화: 마우스를 사용하지 않는 사용자도 쉽게 데이터를 볼 수 있습니다.

단점

• 시각적 혼잡: 데이터 포인트가 많으면 화면이 복잡해지고 가독성이 떨어질 수 있습니다.
• 공간 제약: 화면이 작을 경우 모든 값을 보기 어렵고, 정보가 겹칠 수 있습니다.

적합한 경우

• 단순한 시세 데이터: 월별 데이터 포인트가 적고, 비교할 항목이 몇 개 안 되는 경우.
• 데스크탑 중심 환경: 큰 화면에서 데이터를 빠르게 검토해야 하는 경우.
• 보고서나 대시보드: 데이터가 항상 보이는 것이 필요한 정적인 문서나 프레젠테이션.

---

결론: 어떤 선택이 더 나을까?

• 모바일 중심 & 데이터가 복잡한 경우:
  터치하면 결과값이 보이는 그래프가 더 적합합니다. 깔끔한 디자인으로 가독성을 유지하고, 사용자가 원하는 데이터만 탐색하게 할 수 있습니다.
• 단순 데이터 & 빠른 정보 전달이 중요한 경우:
  동작 없이 결과값이 보이는 그래프가 더 좋습니다. 사용자가 바로 데이터를 파악할 수 있어 효율적입니다.

 

---

 

[UXUI 그래프에 관하여]

 

1. 그래프 유형

• 라인 차트(Line Chart): 월별 시세 변화를 시간의 흐름에 따라 연속적으로 보여줄 때 가장 효과적입니다. 여러 개의 시세(예: 다양한 상품, 지역, 회사 등)를 비교할 경우 각 시세를 다른 색상의 선으로 표시하면 됩니다.
• 막대 차트(Bar Chart): 월별 시세를 개별적으로 비교할 때 유용합니다. 특히 누적 막대 그래프(Stacked Bar Chart)는 여러 항목의 총합과 개별 항목을 동시에 보여줄 수 있습니다.
• 혼합형 그래프(Combination Chart): 예를 들어, 한 항목은 막대 차트로, 다른 항목은 라인 차트로 표시하면 비교가 더 쉽습니다. 예를 들어, 전년 대비 증감률은 선으로, 월별 시세는 막대로 표현할 수 있습니다.

---

2. 인터랙티브 요소 추가

• 툴팁(Tooltip): 사용자가 특정 데이터 포인트에 마우스를 올리면 해당 월의 정확한 시세, 전년 대비 증감률 등을 보여주는 팝업을 제공합니다.
• 필터 및 범위 선택: 사용자가 특정 기간(예: 최근 6개월, 1년)을 선택하거나, 특정 항목(예: 특정 지역, 상품군)을 필터링할 수 있도록 제공합니다.
• 줌 인/아웃 기능: 많은 데이터를 한 번에 볼 수 있도록 하되, 세부 사항을 보기 위해 확대/축소할 수 있는 기능을 추가합니다.

---

3. 디자인 및 시각적 요소

• 명확한 색상 구분: 항목별로 색상을 명확하게 구분하되, 색맹 사용자도 구분할 수 있도록 색상 대비를 고려하거나 패턴을 추가합니다.
• 일관된 스케일 및 레이블: y축(가격)과 x축(시간)의 단위를 일관되게 유지하고, 축 레이블을 쉽게 읽을 수 있도록 합니다.
• 강조 요소: 중요한 변화나 이상치를 강조하기 위해 색상이나 아이콘(예: 상승/하락 화살표)을 사용할 수 있습니다.

---

4. 모바일 친화적 디자인

• 반응형 레이아웃: 그래프가 데스크톱뿐만 아니라 모바일에서도 잘 보이도록 반응형으로 설계합니다.
• 터치 인터랙션 최적화: 모바일에서는 마우스 대신 터치로 조작하므로, 데이터 포인트 클릭이나 확대/축소 기능을 터치 기반으로 최적화합니다.

---

5. 사용자 중심의 접근

• 사용자 피드백 반영: 초기 버전을 사용자들에게 테스트해보고, 그들의 피드백을 통해 그래프의 가독성이나 인터랙티브 요소를 개선합니다.
• 단순함 유지: 과도한 정보나 복잡한 인터랙션은 피하고, 핵심 데이터에 집중할 수 있도록 단순한 디자인을 유지합니다.

---

예시 시나리오

• 부동산 시세 비교: 서울, 부산, 대구의 월별 아파트 시세를 비교하는 경우, 각 도시를 다른 색상의 선으로 표시하고, 중요한 변화(예: 급등/급락 시점)에 주석을 추가합니다.
• 금융 시장 데이터: 주식이나 암호화폐 시세 비교의 경우, 일일 변동 폭을 라인 차트로, 월별 평균 가격을 막대 차트로 혼합하여 시각화할 수 있습니다.

---

 

오늘은 과제2 정리, 마무리 다 했고!

포기할까했던 심화과정을 한 번 시도라도 해보자는 마음으로 무작정 하고있다

안해보는 것보단 낫겟지라는 마인드

예전에 튜터님이 방문하셨을 때 달력 참 어렵다고 하셨는데, 고놈의 달력을 내가 지금 하고있다니ㅋㅋㅋ

어려워도 어쩔거야! 해봐야지!

안되면 나중에 배우면 되는거고ㅎㅎ

혼자 이것저것 만져보고 해보니까 이해안되던 것들이 이젠 이해가 되고 절대 못할 것 같은 것들을 해내고 있다ㅎㅎ

아 내일도 최대한 프로토타입 만들어보고!

안되면 어쩔 수 없이 제출해야지ㅋㅋ