홈페이지를 하늘소답게 꾸몄습니다

홈페이지를 다시 열 때 Jekyll 테마 Chirpy를 기본 모양 그대로 썼습니다. 그러다 보니 같은 테마를 쓰는 다른 블로그와 사진과 제목만 다르고 나머지는 똑같아 보였습니다. 그래서 2000년대 하늘소 홈페이지(hanulso.knu.ac.kr)를 참고해 하늘소다운 모습으로 꾸몄습니다.

옛 홈페이지

2007년 4월 첫 화면 윗부분 (인터넷 아카이브)

옛 홈페이지에는 뚜렷한 특징이 세 가지 있었습니다.

• 구름 낀 하늘 배너. 왼쪽에 「하늘소」, 오른쪽에 붓글씨로 「꿈 희망 끈기 노력」이 적혀 있었습니다. 하늘(꿈, 희망)과 소(끈기, 노력)를 합친 이름의 뜻 그대로입니다.
• 하늘색 메뉴 머리. 「하늘소 메뉴」, 「게시판 메뉴」 같은 머리가 하늘색(#76A6BE) 바탕에 짙은 청록(#337799) 밑줄을 둘렀습니다.
• 바탕체 글꼴. 본문이 명조 계열이었습니다.

옛 홈페이지의 머리 배너 원본 (1000×100)

바뀐 모습

바꾸기 전: Chirpy 기본 모양 (어두운 화면)

바꾼 뒤: 밝은 화면

바꾼 뒤: 어두운 화면

옛 홈페이지에서 가져온 것

• 구름 하늘. 옛 배너에서 글자가 없는 구름 부분을 잘라 왼쪽 사이드바 윗부분에 깔았습니다. 아래로 갈수록 옅어집니다.
• 표어. 사이트 소개 아래에 「꿈 · 희망 · 끈기 · 노력」을 붓글씨체로 넣었습니다.
• 하늘색. 옛 메뉴 머리의 두 색을 이 홈페이지의 기본색으로 삼았습니다. 선택된 메뉴, 링크, 목차 강조, 글 목록 카드의 왼쪽 띠에 씁니다.
• 메뉴 머리 모양의 제목. 글 안의 큰 제목에 옛 메뉴 머리처럼 하늘색 밑줄을 두르고, 작은 제목에는 왼쪽에 짙은 청록 막대를 붙였습니다.
• 명조 계열 제목. 제목은 고운바탕으로 바꿨습니다. 본문은 화면에서 읽기 편하도록 Pretendard를 씁니다.

글 안의 큰 제목(하늘색 밑줄)과 작은 제목(왼쪽 막대)

새로 더한 것

• 밤하늘. 어두운 화면에서는 같은 구름 하늘을 어둡게 눌러 밤하늘처럼 보이게 했습니다. 배경도 회색 대신 짙은 남색입니다.
• 마스코트 아이콘. 브라우저 탭과 홈 화면에 추가했을 때의 아이콘을 테마 기본 아이콘에서 마스코트(날개 달린 한우)로 바꿨습니다.
• 금빛 강조. 고정 글 표시처럼 작은 강조에는 마스코트의 금빛을 씁니다.
• 모바일. 좁은 화면에서는 사이드바가 숨으므로 위쪽 막대에 구름 하늘을 깔았습니다.

모바일: 밝은 화면(왼쪽)과 어두운 화면(오른쪽)

어떻게 바꿨나

테마 파일을 통째로 복사하지 않았습니다. Chirpy는 색을 CSS 변수(--sidebar-bg, --link-color 같은 것)로 관리하므로, 그 변수와 몇몇 모양만 덮어썼습니다. 그래서 나중에 테마를 새 버전으로 올려도 따라가기 쉽습니다.

파일	내용
assets/css/jekyll-theme-chirpy.scss	밝은 화면·어두운 화면의 색 변수, 사이드바 구름 하늘, 표어, 제목·카드 모양
_includes/metadata-hook.html	글꼴 불러오기 (Pretendard, 고운바탕, 나눔손글씨 붓)
assets/img/theme/sky-2007.jpg	옛 배너에서 자른 구름 하늘
assets/img/favicons/	마스코트 아이콘 (탭 아이콘, 홈 화면 아이콘)

세 글꼴은 모두 SIL 오픈 폰트 라이선스입니다.

이 홈페이지는 앱처럼 설치해 쓸 수 있게(PWA) 되어 있어서, 자주 들르신 분께는 예전 모양이 잠깐 남아 있을 수 있습니다. 새로고침하면 바뀐 모양으로 보입니다.

색이나 글꼴, 옛 홈페이지에서 더 가져오면 좋을 것이 있으면 GitHub 이슈나 아래 댓글로 알려 주세요.