craftrun

만들기

사진 없이 글마다 커버 만들기

무료 사진은 다른 블로그와 겹치고 저작권도 신경 써야 합니다. 제목에서 그림을 만들어내는 방법과, 처음에 제목이 안 읽혔던 이유.

블로그 목록이 글자만 있으면 밋밋합니다. 워드프레스 테마들이 글마다 커버 이미지를 두는 데는 이유가 있습니다. 목록에서 눈이 걸리는 지점이 생기고, 공유했을 때 썸네일이 뜹니다.

그런데 글마다 사진을 구하는 건 생각보다 번거롭습니다.

그래서 만들어내기로 했습니다.

제목에서 그림 만들기

방식은 단순합니다. 글의 주소(슬러그)를 숫자로 바꾸고, 그 숫자로 도형 배치를 정합니다.

function hash(s) {
  let h = 2166136261;
  for (let i = 0; i < s.length; i++) {
    h ^= s.charCodeAt(i);
    h = Math.imul(h, 16777619);
  }
  return Math.abs(h);
}

이 숫자에서 비트를 하나씩 꺼내 격자 위에 원과 사각형을 얹습니다. 어떤 칸에 무엇이 놓이는지, 얼마나 큰지, 얼마나 진한지가 전부 여기서 나옵니다.

결과가 이렇게 됩니다.

난수를 쓰면 안 되는 이유

처음에는 그냥 난수를 쓸까 했습니다. 어차피 아무 배치나 예쁘면 되니까요.

그러면 두 가지가 망가집니다.

첫째, 빌드할 때마다 그림이 달라집니다. "만들어진 결과물이 생성기 출력과 일치하는가"를 보는 검사가 있는데, 매번 다르니 매번 실패합니다.

둘째, 독자가 글이 바뀐 줄 압니다. 어제 본 글을 오늘 다시 열었는데 그림이 다르면 이상합니다.

슬러그에서 만들면 둘 다 해결됩니다. 입력이 같으면 출력이 같으니까요.

카테고리마다 색을 다르게

색은 카테고리에서 가져옵니다.

const PALETTE = {
  '만들기': ['#1f3d6e', '#3f7fd6', '#8fc0ff'],
  '굴리기': ['#1d4b45', '#2f8f7e', '#8fd9c8'],
  '검색':   ['#4a3566', '#7b5ec4', '#c3b0f0'],
};

세 가지 색은 각각 배경, 도형, 강조에 씁니다. 이러면 목록에서 색만 보고도 종류가 구분됩니다. 글자를 읽기 전에 이미 정보가 전달됩니다.

왜 SVG인가

그림 형식으로 SVG를 골랐습니다.

단점도 있습니다. 공유 썸네일로는 약합니다. 카카오톡이나 페이스북 같은 곳의 미리보기 생성기는 SVG를 제대로 못 그리는 경우가 많습니다. 제대로 하려면 PNG로 구워야 하는데, 그러면 브라우저를 띄우는 단계가 빌드에 들어옵니다.

지금은 SVG로 두고, 공유 유입이 의미 있어지면 그때 붙이기로 했습니다. 없는 문제를 미리 풀지 않는 편이 낫습니다.

제목이 안 읽혔다

만들고 나서 목록을 봤더니 문제가 있었습니다. 제목이 도형에 묻혀서 안 읽혔습니다.

흰 글씨를 얹었는데, 그 자리에 밝은 원이 있으면 대비가 무너집니다. 도형을 한쪽으로 몰아 보려 했지만 배치가 무작위라 어디에 올지 보장할 수 없었습니다.

해결은 글자 뒤에 그늘을 까는 것이었습니다.

아래로 갈수록 진해지는 반투명 사각형을 도형 위, 글자 아래에 한 장 넣는다

위쪽은 투명해서 도형이 그대로 보이고, 아래쪽은 배경색으로 덮여서 흰 글씨가 또렷합니다. 사진 위에 글자를 얹을 때 흔히 쓰는 방법인데, 만들어낸 그림에도 똑같이 필요했습니다.

제목 줄바꿈은 직접

SVG 안의 텍스트는 자동으로 줄바꿈이 안 됩니다. 긴 제목은 화면 밖으로 나갑니다.

그래서 글자 수로 끊었습니다. 한글은 글자 폭이 거의 일정해서 글자 수로 세도 크게 어긋나지 않습니다. 16자 정도에서 끊고, 최대 세 줄까지만 넣습니다.

영문이 섞이면 폭이 달라지지만, 제목은 어차피 짧게 쓰는 게 좋으므로 실용적으로는 문제가 없었습니다.

정리

이미지SVG정적사이트디자인

같이 읽을 글