3·1절을 맞아 GS칼텍스에서 공개한 독립서체 '윤봉길'을 적용해보았습니다.

제 개인 인스턴스라는 점은 제가 관리자가 된다는 뜻이고 제가 하고 싶은 걸 시도해 볼 수 있다는 뜻이죠. 이번에는 스타일을 적용해보고 배운 점을 간략하게 적어봅니다.

커스텀 스타일을 적용하는 데 있어 기본적인 사항은 이 쪽 에 적혀있습니다.

  • 마스토돈 계정에서 ~/live/app/javascript/styles 에서 새로 custom.scss 를 생성하고
  • 스타일 작성을 마친 후에 파일 끝에는 반드시 @import application; 하고
  • ~/live/config/themes.yml 파일에서 custom: styles/custom.scss 의 형식으로 추가해서 테마 목록에 추가할 수 있습니다. (마스토돈 2.0.0부터 해당)
  • webpack-dev-server 를 재시작하고 mastodon 프로세스를 모두 재시작하면 새로 생성한 테마가 인식이 됩니다.

여기까지는 공식 문서에 적혀있는 내용. 아래서부터는 개인적으로 적용하면서 배운 내용.

  • scss 파일명은 상관이 없습니다.
  • 굳이 @import application; 안 해도 상관없긴 한데 그러려면 ~/live/app/javascript/styles/mastodon 에 있는 파일들 전부 @import 해야 함. 둘 다 안 하면
  • @import 도 순서에 영향을 받을 수 있는데 먼저 @import 하면서 !default; 지정하면 다음에 오는 @import 에서 !default; 지정해도 소용이 없습니다. 그래서 반드시 파일 끝에서 @import 해야 하는 것. via SO
  • 컨텐츠 보안 프로토콜 등의 사유로 외부 서버에서 폰트 로딩은 기본적으로 불가능한 듯. 다만 config/initializers/content_security_policy.rb 파일을 수정해주면 가능은 했다는 글. via GH 이번에는 그냥 내려받아서 로컬에서 적용
  • @import 'custom/variables'; 에서 variables 뒤에 s 붙어있습니다… 근데 또 @import 'application'; 에는 안 붙어있음…
  • webpack-dev-server를 재시작하라는데 몰라서 매번 변경사항 적용할 때마다 asset precompile하고 프로세스 재시작해 줌. 뭐 적용되면 된 거죠.
  • 오픈타입 폰트를 적용하지 asset precompile 과정에서 에러가 납니다. 트루타입이나 웹폰트를 쓰니 문제없이 진행됩니다

대충 트리를 그려보면 이런 식이 됩니다.

live
├── app
│   └── javascript
│       ├── application.scss >> custom.scss 에서 (보충적으로) import
│       ├── fonts
│       │   └── font_files_here >>> fonts_family_rules.scss 에서 참조
│       └── styles
│           ├── custom
│           │   └── variables.scss >>> custom.scss 에서 import
│           ├── custom.scss >>> themes.yml 에서 규정
│           └── fonts
│               └── fonts_family_rules.scss >>> variables.scss 에서 import
└── config
    └── themes.yml