Lumora 블로그 - QA & 개발 노트

안녕하세요! Lumora입니다. 😊

누군가에게 내 작업물을 짠! 하고 공개한다는 건, 마치 예고 없이 집에 손님을 초대하는 기분과 비슷한 것 같습니다. 혼자 쓸 때는 전혀 불편함이 없던 것들이 남이 본다고 생각하면 갑자기 다 부끄러워지거든요... ㅋㅋ

최근 블로그를 찾아와 주신 분들 중에 종종 제 스킨이나 사이드바, 목차(TOC) 기능에 대해 물어보시는 분들이 계셨어요. 그래서 '에라 모르겠다, 깃허브에 퍼블릭으로 열어서 다 같이 쓰자!'라고 덜컥 스킨 배포를 결심해 버렸습니다.

하지만 결심과 동시에 시작된 건 뼈를 깎는 리팩토링이었습니다 ㅠㅠ

1. Refactoring: 복잡한 코드 걷어내기

야심 차게 코드를 열었는데, 웬걸... 제 개인 깃허브 링크부터 저한테만 맞춰진 요상한 자바스크립트 로직까지 아주 난장판이더라고요. 이걸 그대로 배포했다가는 적용하시는 분들 블로그 레이아웃이 터질 게(?) 뻔했습니다.

그래서 묵은 레거시를 대청소하는 마음으로 개인용 하드코딩 로직들을 싹 다 덜어냈습니다. 메인 화면의 답답했던 카드 테두리도 과감히 없애고, 오직 여백과 타이포그래피에만 집중하는 'Lumora Lite (Essential Dark)' 버전으로 새롭게 뼈대를 잡았어요.

가장 아끼던 방문자 통계 위젯도 무거운 박스를 벗어던지고 투명하고 미니멀하게 다이어트를 시켰답니다.

2. Customization: 단 한 줄로 끝내는 퍼스널 컬러

오픈소스로 배포하는 이상, 각자의 취향에 맞게 색상을 바꿀 수 있어야겠죠? 기존에는 딥 다크한 색상 코드를 CSS 여기저기에 박아뒀는데, 이걸 전부 찾아내서 누구나 쉽게 바꿀 수 있게 CSS 변수(:root)로 빼두었습니다.

제 블로그의 시그니처인 보라색은 저만의 퍼스널 컬러로 남겨두고, 배포용 스킨의 기본 테마는 '터미널 민트(#14B8A6)'로 세팅했습니다. 다크 회색 배경에 민트색 텍스트가 얹어지니, 마치 코딩할 때 터미널 창에서 'Success'가 뜬 것처럼 힙하고 깔끔하더라고요!

3. Feature: 숫자에 연연하지 않는 하트(공감) 버튼

블로그를 운영하다 보면 은근히 신경 쓰이는 게 바로 글 하단의 '공감(하트)' 개수입니다. 남의 눈치를 보지 않고 오롯이 내 글과 콘텐츠에만 집중할 수 있도록, 스킨 화면에서는 하트 숫자를 과감히 숨겼습니다! 

화면에는 '내가 이 글을 좋아한다'는 직관적인 빨간 하트 표시만 심플하게 남겨두었죠. 물론, 진짜 하트 개수가 몇 개인지는 블로그 관리자 페이지나 티스토리 어플을 통해 주인장만 몰래(?) 확인할 수 있으니 걱정 마세요.

4. Feature: 관리자에게만 보이는 은밀한 관리 버튼

블로그 주인장이라면 본문 '수정, 상태변경, 삭제' 기능을 자주 쓰실 텐데요. 방문자들에게는 이 버튼들이 굳이 보일 필요가 없다고 생각했습니다.

그래서 평소에는 화면에 보이지 않도록 깔끔하게 숨겨두었어요! 대신 관리자로 로그인한 상태에서 본문 오른쪽 상단 영역에 마우스를 올리면(호버) 해당 버튼들이 스르륵 나타납니다. 화면의 심플함은 지키면서 관리의 편의성도 야무지게 챙겼답니다.

관리자한테만 보이는 관리 버튼!

5. Manual: 꼭 확인해야 할 모바일 설정

스킨을 다듬으면서 가장 신경 썼던 부분 중 하나가 반응형이었습니다. PC와 모바일 모두 예쁘게 나오도록 깎아뒀는데, 여기서 아주 중요한 설정 하나가 필요하더라고요.

티스토리 기본 설정인 '모바일웹 자동 연결'이 켜져 있으면, 기껏 만든 예쁜 화면 대신 티스토리의 밋밋한 기본 모바일 스킨이 강제로 튀어나옵니다. "모바일에서는 민트색이 안 보여요 ㅠㅠ" 하는 슬픈 상황을 막기 위해, 아래 가이드에 이 부분을 가장 먼저 강조해 두었습니다.

혹시 스킨을 적용하실 분들은 아래의 2번 설정을 꼭! 확인해 주세요.

---

🚀 Lumora Lite 스킨 적용 및 설정 가이드

적용된 스킨 보기

드디어 세상에 나온 깃허브 레포지토리에서 스킨을 다운로드하실 수 있습니다!

1. 스킨 다운로드 및 적용

- Lumora Lite GitHub Releases 페이지(https://github.com/roparkinfiniq/tistory-skin-lumora/releases/tag/Lumora_Lite)에서 최신 버전의 .zip 파일을 다운로드합니다.

- 티스토리 관리자 > 꾸미기 > 스킨 변경 > 스킨 등록에서 압축을 푼 파일들을 모두 업로드합니다. (images 폴더 안의 파일도 한 번 더 추가해 주는 것 잊지 마세요!)

스킨변경 클릭합니다.

오른쪽 상단에 스킨 등록을 클릭하세요.

추가 버튼 클릭 후, 다운 받으셨던 파일들을 업로드하세요.

2. 모바일 반응형 설정 (⚠️ 잊지 마세요!)

- 티스토리 관리자 > 꾸미기 > 모바일 메뉴로 이동합니다.
- '티스토리 모바일웹 자동 연결을' [사용하지 않습니다] 로 변경 후 저장합니다.

 

모바일 탭 클릭

사용하지 않습니다로 설정하기

 

3. 나만의 포인트 컬러로 변경하기

- 관리자 > 스킨 편집 > html 편집 > CSS 탭 상단의 :root 블록을 찾습니다.
- --accent-color 값을 원하는 HEX 코드로 변경하면 블로그 전체 포인트 컬러가 1분 만에 바뀝니다!

여기에서 원하시는 컬러로 변경해요!

---

혼자 뚝딱거리며 쓰던 걸 이렇게 배포판으로 다듬어보니 감회가 새롭네요. ㅎㅎ
앞으로 진행될 자잘한 업데이트나 유지보수 내역도 깃허브와 블로그를 통해 종종 공유해 보겠습니다.

혹시 스킨을 적용해 보시거나 구경하시다가 '이런 기능 추가되면 좋겠다!' 혹은 '여기 레이아웃이 좀 깨져요!' 하는 피드백이 있다면 언제든 편하게 댓글 남겨주세요! 😊