외부 참조 없는 단일 파일 게시본 생성

이 판의 목적 · 계획 · 체크리스트

개발일지 HTML이 폴더 바깥의 그림을 상대 경로로 참조하여 게시판에서 그림이 표시되지 않았다. 그림과 글꼴, 스타일을 파일 안에 포함하여 다른 서버에서도 동일하게 표시되는 게시본을 작성한다.

계획

1. 상대 경로 그림 참조가 표시되지 않는 조건 확인
2. PNG를 base64로 변환하여 HTML에 삽입
3. 독자용 본편과 개발일지 두 편으로 게시본 분리
4. 게시판 편집기 대비. 인라인 style 병기와 외부 글꼴 요청 제거
5. 세 편을 함께 생성하는 posting.py 작성

체크리스트 5/8

1. 상대 경로 참조의 문제

1편의 개발일지 파일은 다음과 같이 상대 경로로 그림을 참조하였다.

<img src="../../image/chart01_rank_v1.0.0.0.png">

이 경로는 개발 폴더 안에서만 유효하므로, 파일을 게시판 편집기에 넣으면 그림이 표시되지 않는다. 상대 경로는 같은 폴더 구조가 존재하는 것을 전제로 하지만 게시판에는 image 폴더가 없기 때문이다.

따라서 그림과 글꼴, 스타일을 모두 파일 안에 포함하여 다른 폴더나 서버로 옮겨도 동일하게 표시되는 게시본을 작성하였다.

2. 그림의 base64 삽입

PNG 파일을 base64 문자열로 변환하여 img 태그의 src 속성값으로 지정하였다. 외부 파일 참조가 없어지므로 HTML 파일 하나에 그림이 포함된다.

b64 = base64.b64encode(open(png, "rb").read()).decode()
html = html.replace(src, f"data:image/png;base64,{b64}")

표 1은 변환 전후의 그림 파일 크기를 나타낸다.

base64로 변환하면 파일 크기가 원본보다 약 34% 증가하였다. 그림 2장을 합한 크기는 620KB 이하로, 게시본 한 개 파일에 포함할 수 있는 크기였다. 이보다 크면 그림 해상도를 낮추거나 게시판의 이미지 업로드 기능을 사용해야 한다.

3. 게시본 분리 기준

처음에는 개발일지 한 편만 게시할 계획이었으나, GenealogyPost가 정보를 다루는 온라인 잡지라는 점을 고려하여 방침을 변경하였다. 독자에게 필요한 단가 표와 선택 기준은 본편에 작성하고, 산출식 설계와 자료 수집 제약은 개발일지에 작성하였다. 표 2는 게시본별 대상 독자와 내용을 나타낸다.

세 편은 모두 같은 데이터셋에서 생성되므로, 자료가 갱신되면 posting.py를 한 번 실행하여 세 편을 함께 갱신한다. 게시본을 직접 수정하면 다음 갱신 시 수정 내용이 사라지므로 모든 수정은 생성 스크립트에 반영한다.

4. 오류 수정 내역

4.1 게시판 편집기의 style 태그 제거

게시판마다 허용하는 태그가 다르며, <style> 태그를 제거하는 편집기에서는 서식이 모두 사라진다. 이에 대비하여 본문의 주요 요소에는 인라인 style을 함께 지정하였다.

인라인으로 지정한 항목은 표 테두리, 그림 최대 폭, 목록 여백처럼 없으면 글을 읽기 어려운 항목으로 한정하였다. 색상과 세부 서식은 <style> 태그에만 두어 파일 크기 증가를 줄였다.

4.2 외부 글꼴 요청 제거

1편은 Google Fonts를 <link> 태그로 불러왔으나, 게시본에서는 이를 제거하고 맑은 고딕과 Apple SD Gothic Neo를 대체 글꼴로 지정하였다. 게시판에서 외부 글꼴 요청이 차단되면 글꼴이 바뀌어 줄 바꿈 위치가 달라지기 때문이다.

5. 산출물

표 3은 이번 판의 산출물을 나타낸다.

6. 다음 판 과제

다음 판에서는 게시본의 그림을 SVG 차트로 교체한다. base64로 삽입한 PNG보다 파일 크기가 약 20분의 1로 줄고 글자가 선명하게 표시되기 때문이다. 본편에는 예산을 입력하면 구매 가능한 제품을 계산하는 기능을 추가한다. 1편에서 계획한 수집 자동화는 이번 판에서도 진행하지 못하였다.