v1.2.1: 그래프와 눈치로 익혀가는 HTML

1. Poko product에서 그래프에 사용되는 Font의 경로 수정
2. 웹과 모바일 간의 그래프 크기 차이 조절

Font 경로 수정

• Hello! Poko에서 사용되는 그래프는 총 4개
• 로컬 개발 환경에서는 4개 모두 그래프의 font가 정상적으로 반영
• product에서 2개의 그래프의 font 반영이 되지 않음을 확인.

# 문제의 path
path = "/Users/ui-seok/Dev/poko/static/AppleGothic.ttf"

# 수정 path
path = "./static/AppleGothic.ttf" 

• 원인 : 배포 때 font 경로를 로컬에서 사용하던 걸 그대로 적용. 당연히 안됨.

  web:
    build: .
    # command: python3 manage.py runserver 0.0.0.0:8000
    command: gunicorn poko.wsgi:application --bind 0.0.0.0:8000

    volumes:
      - static_volume:/usr/src/app/static
      - media_volume:/usr/src/app/media

• 결과 : docker-compose.yml에서 지정한 static 경로로 수정 함. 모든 그래프에 정상적으로 폰트 반영.

웹과 모바일 간의 그래프 크기 차이 조절

• Hello! Poko에 사용되는 그래프 모두 웹에서는 적당한 크기로 정상 반영 되고 있음
  

• 문제가 되는 모바일 환경에서의 그래프
  

  • 그래프가 화면 보다 크게 출력 됨.

원인:

• 각 html에 있는 그래프가 다른 style을 적용과 적절하지 않은 크기로 조절되어 있음.

해결

• 4개의 그래프 중 가장 적당한 크기를 유지하고 있었던 그래프의 html을 참고하여 수정
  

        .container {
            max-width: 1200px; /* 최대 너비를 조절하여 레이아웃을 확장 */
            margin:  auto;
        }

<div class="container mt-4">
    <div class="row">
        <img src="{{ poko_image }}" alt="POKO" width="" height="300" class="resized-image">

<div class="row">

• 적절한 크기를 유지하고 있었던 그래프는 class container-row로 지정 되어 있었고 이를 토대로 나머지 그래프도 수정.

class container와 row

<div class="container mt-4">

container: 이 클래스는 Bootstrap 프레임워크에서 주로 사용되며, 컨테이너 요소를 정의한다. Bootstrap의 컨테이너는 페이지의 콘텐츠를 중앙으로 정렬하고, 여백을 추가하여 깔끔한 디자인을 제공한다.

mt-4: 이 클래스는 Bootstrap에서 제공하는 마진(top)을 추가하는 클래스입니다. mt-4는 위쪽 마진을 1.5rem 만큼 추가한다.

<div class="row">

row: 이 클래스는 Bootstrap 프레임워크에서 주로 사용되며, 그리드 시스템의 행을 정의한다. row 클래스를 사용하면 그리드 시스템의 열(col)을 안에 넣을 수 있다. 그리드 시스템은 웹 페이지의 레이아웃을 구성하는 데 사용되며, 이를 통해 웹 페이지를 여러 컬럼으로 나누고 반응형 디자인을 쉽게 구현할 수 있다.

번외

다른 해결방법 그래프가 svg임을 이용해 views에서 크기를 조절하는 방법도 있었음.

  
  # views.py
  
    # 그래프를 SVG 문자열로 저장
    imgdata = StringIO()
    plt.savefig(imgdata, format="svg")
    imgdata.seek(0)
    svg_bytes = imgdata.getvalue()  # svg 그래프 크기 조절을 위해 추가 됨

    # SVG 문자열을 가져와서 전달
    graph = imgdata.getvalue()
    # graph = imgdata.getvalue()

    graph = f'<div style="width: 70%; margin: 0 auto;">{svg_bytes}</div>'

svg란?

SVG(Scalable Vector Graphics)는 웹에서 벡터 그래픽을 표현하기 위한 XML 기반의 포맷. SVG는 그래픽을 정의하는 방법으로, 크기가 조절되어도 그래픽의 품질이 손상되지 않는다.이는 이미지를 확대하거나 축소할 때 깨지지 않고 선명하게 유지되는 것을 의미.

SVG 특징

1. 확장성: SVG 이미지는 확대나 축소가 가능하며, 화질이 손상되지 않음.
2. 텍스트 기반: SVG는 XML 기반으로 텍스트로 그래픽을 생성. 따라서 코드로 직접 수정이 가능하며, 검색 엔진 최적화(SEO)에도 유리.
3. CSS와의 통합: SVG는 CSS를 사용하여 스타일을 적용.
4. 자바스크립트와의 통합: SVG 요소에 대한 인터랙티브한 동작을 추가하기 위해 자바스크립트를 사용할 수 있다.

SVG와 Matplotli

Matplotlib에서 그래프를 SVG 형식으로 저장하는 이유

1. 고화질 그래픽: SVG는 벡터 그래픽 포맷이므로, 다양한 크기에서도 고화질로 그래픽을 표시할 수 있음.
2. CSS 스타일 적용: SVG 내부에 스타일을 적용하여 그래픽의 디자인을 유연하게 변경이 가능.
3. 웹 호환성: 웹 페이지에서 SVG를 사용하면 다양한 화면 크기와 해상도에 적응하여 그래픽을 표시할 수 있음.

SVG 그래프 출력과 조절 예시

Matplotlib에서 그래프를 SVG 형식으로 저장하면, 해당 SVG 문자열을 HTML 템플릿에 삽입하여 웹 페이지에서 그래프를 표시할 수 있다.

<svg> 태그를 사용하여 SVG 그래픽을 정의하고, 이를 템플릿에 삽입.

graph = 
  f'<div style="width: 70%; margin: 0 auto;">
  <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    {svg_graph}</svg>
  </div>'