Unsplash의Krishdiphong Prayoonwongkasem
Intro
깃허브 블로그의 장점중 하나는 블로그 테마를 본인 입맛대로 커스터마이징할 수 있다는 것입니다. 깃허브 블로그를 제작하는 과정은 본인이 마음에 드는 템플릿(테마) 파일을 받아서 초기화를 진행한 후에 깃허브를 통해 배포하는 것이 일반적이라 봅니다.
블로그를 오픈하는 과정하는 설명대로 따라가면 수월하게 할 수 있습니다만 이후의 블로그 관리는 조금 어려울 수 있습니다. 아이러니하게도 제가 블로그 관리에서 가장 어려움을 느꼈던 부분은 깃허브 블로그의 최고 장점이라 할 수 있는 커스터마이징 부분이었습니다.
아무래도 모바일 개발을 주력으로 하다 보니 웹 개발과 관련된 개념에 무지했고 이 때문에 깃허브 블로그 테마 폴더 구조 파악이 쉽지 않았습니다. 이쁘게 블로그를 내 입맛대로 꾸며보고 싶은데 문법, 개념, 구조를 모르니 테마 폴더를 어디서부터 건드리고 어떻게 코드를 작성해야 하는지 고민이 많았습니다.
그래서 이번 포스팅은 이렇게 웹 프로그래밍 지식이 부족한 제가 어떻게 블로그 테마 내 이것저것들을 수정을 할 수 있었는지 조그만한 팁을 공유하고자 합니다. 이 글을 읽고 블로그 테마 커스터마이징에 많은 도움이 되길 바라겠습니다!
크롬 개발자 도구를 활용하자
블로그 디자인에 사용되는 테마 템플릿의 폴더 구조를 완벽하게 파악한다는 것은 어렵기 때문에 크롬 개발자 도구를 이용해서 커스텀이 필요한 요소가 정의된 위치를 빠르게 파악해야 합니다. 이를 위해 본인의 깃허브 블로그를 크롬 브라우저로 접속한 다음에 개발자 도구 페이지(Ctrl(Cmd) + Shift + C)를 부릅니다.
개발자 도구를 통한 커스터마이징
디자인 수정이 필요한 요소 클릭하기
인라인 코드 블럭(inline code block)을 디자인 수정 요소 예시로 사용합니다.
개발자 도구를 열어서 디자인 수정이 필요한 요소에 커서를 올리면 해당 요소에 대한 정보가 간략하게 메시지 박스로 볼 수 있습니다. 그리고 요소를 클릭하면 오른쪽 개발자 도구 페이지에서 해당 요소와 관련된 코드와 코드 위치 정보가 나타납니다.
디자인 수정이 필요한 요소와 관련된 정보 확인하기
- 청록색 영역 ==
디자인 수정이 필요한 요소와 관련된 코드가 있는 영역입니다. 이곳에서 해당 요소가 어떻게 정의되었는지(모양, 색상, 크기, 효과 등) 확인할 수 있습니다.
- 초록색 영역 ==
청록색 영역에서 확인했던 디자인 정의 코드가 어느 위치에 있는지 표시하는 영역입니다. 어떤 코드 파일에 정의되어 있는지 확인할 수 있습니다. 그리고 정의된 코드가 위치한 라인까지 확인가능합니다.
원하는 디자인 속성이 정의되어 있는 코드 찾기
인라인 코드 블럭 디자인에서 색상을 바꾼다고 가정하겠습니다. 색상과 관련된 정보는 위 사진의 청록색 영역이 해당됩니다. 훑어보면 인라인 코드 블럭의 코드 텍스트의 색상을 설정하는 코드인 것 같습니다. 저기서 색상 값을 직접 입력하는 것이 아닌 다른 곳에서 정의한 색상 변수를 사용하므로 해당 색상 변수의 위치를 파악해 봅시다.
인라인 코드 블럭과 관련된 색상 변수는 세 가지로 뽑을 수 있습니다. 해당 세 가지 변수중 아무거나 클릭하면 해당 변수가 정의된 코드 파일 영역을 확인할 수 있습니다.
드디어 인라인 코드 블럭의 색상을 바꿀 수 있는 코드의 위치를 찾았습니다. 해당 코드가 위치해 있는 파일을 확인해 보니 이름은 light-syntax.scss 고 218 번 라인에 코드가 있는 것을 확인했습니다. 이제 직접 테마 폴더를 뒤져서 해당 코드를 찾아갑시다.
찾았습니다! 크롬 개발자 도구 설명대로 light-syntax.scss 파일 내 218 번 라인에 색상을 설정하는 변수가 있는 것을 확인했습니다. 인라인 코드 블럭의 텍스트 색상을 바꾼다고 하면 텍스트 색상은 --highlighter-rouge-color 가 관리합니다. 이 변수는 --main-color 를 참조하고 있기 때문에 최종적으로 --main-color 의 색상을 설정하면 됩니다.
현재 설정되어 있는 색상은 주석처리하고 빨간색으로 수정하겠습니다. 수정했다면 해당 파일을 저장하고 블로그를 업데이트합니다. 블로그 업데이트까지 끝냈다면 인라인 코드 텍스트 색상이 바뀌었는지 확인합니다.
정상적으로 바뀌었습니다! UI 컴포넌트의 색상뿐만 아니라 다른 속성도 이런 방식으로 커스텀하면 수월하게 디자인할 수 있습니다.
정리
지금까지 크롬 개발자 도구를 이용해 깃허브 블로그의 디자인을 어렵지 않게 수정할 수 있는 방법을 알아봤습니다. 글에서는 색상 속성만 다뤘으나 이것만 해도 다른 속성 수정도 무리 없이 수정할 수 있을 겁니다. 또한 저와 다른 테마를 사용하여 테마 폴더 구조가 다르더라도 결국 CSS 부분을 수정하는 것은 동일하기 때문에 크게 상관없다고 봅니다. 그럼 본인만의 멋진 블로그를 만드는 데 제 글이 도움이 되길 바랍니다. 감사합니다.