방학동안 학교에서 진행된 백엔드 특강에 참여했다. 2주동안 하루에 7시간씩 아침부터 저녁까지 필요한 내용들을 직접 찾아가며 공부하고 간단한 프로젝트에 적용시켜보는 과정을 반복하며 정말 힘들었지만, 짧은 기간동안 { HTTP 요청/응답 구조, FastAPI 프레임워크 사용법, DB 관리를 도와주는 ORM(SQLAlchemy), API 설계 시 고려할 사항, 주의사항 등 } 많은 개념들을 배우고 직접 사용해볼 수 있었다.

FastAPI 프레임워크에서는 기본적으로 Swagger UI를 통한 API 테스팅을 지원한다. 이 Swagger UI를 통한 API 테스팅이 너무나도 간편하고 직관적이어서 사실 API 설계 및 개발 단계에서는 프론트엔드 지식에 대한 필요성을 체감하지 못했었다.

API 구현과 테스트를 마친 뒤엔 시연을 위해 간단한 프론트엔드 페이지도 만들어야 했는데, HTML, CSS, JavaScript가 뭔지, 각각 브라우저에서 어떤 일을 하는지 정도만 겨우 아는 정도였기 때문에 이걸 어디서부터 어떻게 건드려야 할 지 정말 막막했다. 생성형 AI의 도움을 받아 어찌저찌 누더기같은 페이지를 만들어내긴 했지만, 프론트엔드에 대해서도 조금 더 배워둬야겠다는 생각이 들었다.

프론트에 대해 어떻게 배울 수 있을까? 이번에 참여했던 특강을 통해 배운 내용들을 곧바로 프로젝트에 적용시켜보는 방식의 학습이 굉장히 효과적이라는것을 느낄 수 있었기에, 프론트엔드 공부도 뭔가 프로젝트를 진행하면서 직접 부딛혀가며 배우고 싶다는 생각이 들었다. 그렇다고 처음부터 시작해야 하는 프로젝트는 너무 부담스럽고, 어느 정도 뼈대가 잡혀 있는걸 내 마음대로 이리저리 바꿔보고 싶었다.

그래서 내 블로그를 만들어보기로 했다.

플랫폼을 골라보자

블로그를 시작해봐야겠다고 마음먹기는 했는데, 블로그 플랫폼은 선택지가 너무 많다보니 어떤 플랫폼이 나랑 제일 잘 맞을지 알아보기 위해 간단하게나마 여러 플랫폼들을 사용해 봤다. 처음에 생각해봤던 플랫폼은 Velog, Naver Blog, Tistory, Jekyll + GitHub Pages 네가지였는데, 결국에는 후보에 없던 Ghost + GitHub Pages를 선택하게 되었다.

개발 및 기술 관련 블로그에서는 Velog 를 많이들 사용하던데, 개인적으로는 살짝 마음에 안 드는 부분이 있었다. 먼저 글 맨 아래에 관심 있을 만한 포스트라며 비슷한 주제의 글을 더 보여주는 부분이 있는데, 기본적으로 다른 블로그의 글까지 표시되는데다가 이걸 아예 꺼버릴 수도 없었다. 또 페이지 레이아웃이나 HTML/CSS를 전혀 건드릴 수 없어서 누구나 똑같이 생긴 블로그에 글을 쓴다는 점도 조금 싫었다. Naver Blog는 컴포넌트 레이아웃을 수정할 수는 있지만 HTML/CSS를 전혀 건드릴 수 없고, HTML/CSS를 어느정도 수정할 수 있게 해 주는 Tistory에서도 결국 건드릴 수 없는 부분이 있었다. 나는 나한테 필요한 부분, 내가 사용하는 부분만 남겨두고 싶었다.

그러려면 페이지를 구성하는 코드들을 전부 내가 관리할 수 있는 방법을 찾아야겠다는 생각이 들었고, 나는 블로그로 수익을 만들 생각이 없기 때문에 무료 웹 호스팅 서비스인 GitHub Pages를 활용한 블로그에 관심이 생겼다.

GitHub Pages가 기본적으로 Jekyll을 사용하고 있을 뿐 아니라 한글로 된 레퍼런스 자료도 굉장히 많아서 처음에는 Jekyll을 활용한 블로그를 생각했었는데, 이미 완성되어 있는 스킨을 골라 적용하는 선에서 그치지 않고 세세한 커스터마이징을 하려면 결국 Ruby 언어를 배워야 한다는 점과 별도의 에디터를 지원하지 않는다는 점이 마음에 걸렸다.

뭔가 마음에 쏙 드는건 없는데, 그렇다고 블로그 프론트엔드와 백엔드를 처음부터 구축해보자니 이건 배보다 배꼽이 더 커지는 꼴이고.. 고민하던 찰나에 설치형 블로그 플랫폼인 Ghost에 대해 알게 되었다.

먼저 활발하게 개발 및 유지보수되고있는 Node.js 기반 오픈소스 프로젝트인데다 활발하게 운영되고 있는 개발자 포럼이 있어서 뭔가 불편한 부분이 생겼을 때 혼자 헤메는 시간이 적을 것 같았고, 대형 블로그 플랫폼들과 맞먹을정도로 편리한 에디터(심지어 마크다운처럼 -, ##, ~~ 등을 사용할 수도 있다!)를 지원하며, 무엇보다도 공식 레퍼런스 문서가 이미지와 함께 정말 자세하게 작성되어 있다는 점이 마음에 들어서 이걸 한번 써보기로 했다.

공짜로는 안 될까요

Ghost가 제공하는 두 가지 옵션인 1. Ghost Pro 구독을 통한 Cloud Hosting과 2. Self Hosting 중 Self Hosting 방식을 사용하려면 AWS, Azure, GCP 같은 클라우드 서비스의 서버를 활용하거나 직접 홈 서버를 구성해서 Ghost 백엔드 서버를 계속 켜둬야 하는데, 세상에 공짜 컴퓨팅 자원은 없기 때문에 어떤 것을 선택하든 비용이 발생한다. 여러 명의 Author가 접속할 일이 없는 개인 블로그인데다, 유료 회원 기능과 회원 공개 기능도 사용하지 않을 것이기 때문에 백엔드 서버를 항상 실행시켜 둘 필요가 없지 않나? 하는 생각이 들었다.

작성이 끝난 포스트를 띄워주기만 하면 되는데, 어떻게 무료로 할 수 있는 방법이 없을까 싶어 이것저것 검색해보다 ghost static site generator라는걸 찾았다. 동작 방식을 간단히 설명하자면 wget을 사용해 Brute Force 방식으로 모든 페이지의 html 스냅샷을 /static 폴더에 저장해주는 것인데, 덕분에 이제 서버와의 연결 없이도 블로그 포스트들을 보여줄 수 있게 되었다.

Handlebars?

오픈 소스(+ 자유로운 MIT 라이센스!)니까 어떤 기능과 컴포넌트를 사용할 것인지 내 마음대로 설정할 수 있을 거라는 부푼 기대를 안고 테마를 다운받았는데 이게 웬걸, .hbs라는 처음 보는 확장자의 파일들이 잔뜩 들어있었다.

앞서 언급했다시피 Jekyll 대신 Ghost를 사용해야겠다고 마음먹게 된 이유는 Jekyll이 Ruby라는 언어로 작성된 프레임워크였기 때문에 블로그를 위해 새로운 언어를 배우고 싶지 않아서였는데, 분명 Ghost는 JavaScript 기반이라 그랬는었는데 어째서..

결국 새로운 언어를 배우는걸 피할 수는 없구나 싶어 handlebars에 대해 찾아봤는데, Handlebars 공식 레퍼런스 페이지와 ghost 공식 유튜브 채널의 영상을 통해 핵심 개념들을 빠르게 이해할 수 있었다:

• Handlebars는 HTML을 만들기 위한 템플릿 언어 (Originally designed to generate HTML)
• {{로 시작해 }}로 끝나는 Handlebars expression은 execution 시점에 실제 값으로 대체됨
• 주석 문장은 {{!로 시작함 ( {{! comments }} )
• #if, #each 같은 내장 helper들과 #foreach, #has 같은 Ghost 제공 helper를 사용할 수 있음
• {{>문법을 통해 partials를 불러와 사용할 수 있음 - 이걸 많이 사용하게 될 것!

테마를 처음부터 설계하려는게 아니라 기존 테마를 조금 수정해서 사용할 생각이었기 때문에 배워야 할 내용이 생각보다 많지 않았다. 기본적으로 HTML, CSS, JavaScript 코드인데, {{ }} 형식의 Handlebars 템플릿을 통해 여러가지 편의 기능들을 제공한다. 끗.

다크모드 적용하기

나처럼 늦은 시간대에 웹서핑을 하던 중 갑자기 새하얀 페이지가 나와서 화들짝 놀랐던 경험이 있는 사람이라면 왜 아직도 다크모드를 지원하지 않는 페이지가 이렇게 많을까? 하는 생각을 한번쯤 해 봤을 것 같다. 진짜 왜??

먼저, 놀랍게도 다크모드라는 개념 자체가 등장한지 그렇게 오래되지 않았다. 이 블로그에서 뿐만 아니라 다크모드를 지원하는 많은 웹페이지들에서 사용하고 있는 prefers-color-scheme:dark라는 미디어 쿼리 feature는 2019년부터 도입되기 시작했다. { 모바일 환경에서는 Android 10(2019.09.03 릴리즈), iOS 13(2019.09.20 릴리즈)부터 시스템 테마 옵션을 지원하기 시작함 }

다음으로는, 프론트엔드를 설계하는 단계에서부터 다크모드를 고려하지 않았다면 추후에 다크모드를 구현하는 과정이 굉장히 번거롭다. 컴포넌트에 사용할 색상들을 모두 CSS 변수에 저장해둔 다음 color: var(—-accent-color); 처럼 var() 함수를 통해 적용시키지 않고, color: #E6E6E6; 처럼 Hexadecimal 색상값을 하드코딩해뒀다면.. 특정 컴포넌트에 의도한 색상이 적용되지 않는다거나 하는 자잘한 오류 없이 다크모드를 완벽하게 지원하는게 정말 불가능에 가까울 것 같다. 2019년 이전에 만들어져 지금까지 운영되고 있는 웹 서비스라면 다크모드따위보다 우선순위가 높은 개발 요구사항들이 많을 것이고, 다크모드를 적용한다 하더라도 기존 프론트엔드를 리팩토링하는것보다 처음부터 다시 설계하는 편이 차라리 낫기 때문에, 추후에 프론트엔드 UI를 개편할 때 다크모드도 같이 구현하는 쪽으로 이야기가 된 것 아닐까.

이 글을 작성하는 시점 에 Velog와 네이버 블로그에서는 다크모드를 지원하지 않고, 티스토리의 경우 모든 스킨을 확인해볼 순 없었지만 사람들이 많이 사용하는 스킨의 다크모드는 어딘가 엉성하다고 느껴지는 부분이 있었다:

나는 어색해 보이는 부분이 없도록 내 블로그에 다크모드를 잘 적용시키고 싶었는데, 내가 베이스로 사용하려는 Edition 테마는 직접적으로 다크모드를 지원하지는 않지만 직관적인 이름의 CSS 변수들을 사용하고 있어서 다크모드를 금방 테스트해볼 수 있었다.

OS나 브라우저의 테마 설정값과 다른 값을 사용하고 싶은 사용자가 있을 수 있으니 설정을 오버라이딩(Overriding)할 수 있도록 토글 버튼을 만들어주고 싶었다. 그런데 이 버튼이 다크모드 토글 버튼이라는걸 알려주기 위한 이미지를 넣자니 다크모드에 적절한(검은 배경에 전체적인 페이지 디자인과 어울리는) 이미지를 찾을 수가 없었고, 유니코드 문자(☀️, 🌙, ...) 중에서는 마음에 드는게 없었다. 자연스러운 다크모드 토글 버튼이 있는 페이지들에서는 아이콘을 어떻게 구현했는지 궁금해 브라우저의 개발자 도구로 아이콘을 집어 보니 svg를 사용하고 있었다.

svg는 scalable vector graphics의 약자로, 웹 환경에서 벡터 그래픽을 지원하기 위한 포맷이다. xml 형식으로 원 그리기, 선 그리기 등의 작업들을 나열해두면 이를 통해 브라우저에서 동적으로 이미지를 생성해주는데, 결국 텍스트이기 때문에 이미지 파일보다 훨씬 작은 용량을 차지해서 로딩 시간이 단축될 뿐만 아니라 벡터 그래픽이라 아무리 확대해도 해상도 저하가 일어나지 않는다는 장점이 있다.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="45" cx="350" cy="100" stroke="currentColor">
</svg>

이번에도 여러 시행착오를 거쳐 해 모양과 달 모양 두가지 svg를 다크모드 토글 버튼에 적용시켰고, 토글 여부에 따라 아이콘이 변경되는것까지 확인한 다음 아래 기능을 구현하기 위한 Javascript 코드를 작성했다.

1. 사용자의 시스템 설정에 맞춰 다크모드 또는 라이트모드 페이지를 표시
2. 다크모드 토글 버튼 클릭 시, 테마를 변경하고 변경된 preference를 저장
3. 저장된 preference에 유효기간을 설정해, 일정 시간이 지나면 다시 시스템 설정을 확인

Ghost 개발자 포럼에서 다크모드 적용과 관련된 괜찮은 글을 찾았는데, 여기서 제공하는 다크모드 예시 코드에서는 preference를 저장하는 기능을 구현하기 위해 브라우저 쿠키를 사용하고 있었다.

쿠키란 브라우저의 메모리 공간에 저장되는 문자열인데, 일반적으로는 세션 정보를 관리하기 위해 사용된다. javascript에서는 document.cookie를 통해 쿠키를 다룰 수 있는데, 토글 버튼으로 작동하는 checkbox에 Event Listener를 등록해 checkbox의 상태가 변경될 경우 쿠키에 다크모드 preference를 저장해줌으로써 다크모드 토글 버튼을 구현했다.

블로그에 적용한 코드는 아래와 같다:

<div>
  <input type="checkbox" class="dm-checkbox" id="dm-checkbox">
  <label for="dm-checkbox" class="dm-checkbox-label">
    <span id="sun-icon">{{> "icons/sun"}}</span>
    <span id="moon-icon">{{> "icons/moon"}}</span>
  </label>
  <script>
  const checkbox = document.getElementById("dm-checkbox");

  checkbox.addEventListener("change", () => {
    document.body.classList.toggle("dark");
    const expiryDate = new Date();
    expiryDate.setTime(expiryDate.getTime() + (30 * 60 * 1000));
    document.cookie = `darkmode-prefered=${checkbox.checked};path=/;expires=${expiryDate.toUTCString()}`;
  });

  function getCookie(name) {
      let ca = document.cookie.split(';');
      for (let i = 0; i < ca.length; i++) {
          let c = ca[i].trim();
          if (c.indexOf(name) == 0) {
              return c.substring(name.length + 1, c.length);
          }
      }
      return "none";
  }

  function checkCookie() {
      let preference = getCookie("darkmode-prefered");
      if (preference === "true") {
          checkbox.checked = true;
          document.body.classList.add("dark");
      } else if (preference === "false") {
          checkbox.checked = false;
          document.body.classList.remove("dark");
      } else if (window.matchMedia("(prefers-color-scheme:dark)").matches) {
          checkbox.checked = true;
          document.body.classList.add("dark");
      }
  }

  checkCookie();
  </script>
</div>

이미지 업로드하기

서비스형 블로그 플랫폼에서는 에디터를 통해 사용자가 이미지를 업로드하면 https://postfiles.pstatic.net, https://img1.daumcdn.net, https://velog.velcdn.com 같은 자체 CDN을 통해 이미지를 무료로 호스팅해주는 대신, 사용자 경험을 크게 훼손하지 않는 선에서 광고 배너를 다는 방식으로 그 비용을 어느정도 회수하고 있는 것 같다.
(각각 글 작성 시점의 네이버 블로그, 티스토리, Velog 이미지 CDN 도메인)

문제는 GitHub Pages의 경우 자체적인 이미지 CDN을 제공하지 않기 때문에 이미지를 관리할 방법을 찾아야 한다는 것인데, 리포지토리 안에 이미지를 저장해둔 다음 불러오는 방식은 GitHub Pages의 사용량 제한 정책을 고려할 때 장기적으로 유지할 수 없다고 판단했다:

1. 리포지토리의 크기는 1GB 이하를 권장하며, 호스팅 되는 전체 페이지 크기의 합은 1GB를 초과할 수 없다 (리포지토리 크기와 Published Pages 크기가 다를 수 있음)
2. 100GB의 대역폭 제한이 존재한다 (이미지 파일 요청 또한 대역폭 산정에 포함된다!!!)

간단한 데모 페이지를 보여주는 정도라면 이미지를 직접 업로드해서 관리한다고 하더라도 100GB 대역폭을 넘지 않을테니 상관 없겠지만, 내가 만드려는건 블로그이기 때문에 당장은 괜찮을 지 몰라도 언젠가 문제가 될 수도 있겠다는 생각이 들었다.

이것 때문에 여기서 접고 서비스형 블로그 플랫폼으로 넘어갈까? 를 정말 진지하게 고민해봤는데, 이것저것 만지다 보니 내 블로그라는 애착이 생겨서 어떻게든 방법을 찾고 싶다는 생각이 들었고, 레퍼런스를 찾고자 github.io 도메인의 블로그들을 여럿 살펴봤다. 아까 언급했던 대로 리포지토리에 이미지를 저장해둔 다음 ![](assets/image.png) 처럼 불러와 사용하는 블로그도 분명 있었지만, 많은 블로그들에서 이미지 호스팅에 https://user-images.githubusercontent.com 이라는 CDN?을 사용한다는 뭔가 수상한 공통점을 찾을 수 있었다.

어떻게?

처음에는 "GitHub 이미지 호스팅 서비스를 제공하는데, 내가 몰랐나보다"라 생각했었는데, 사실 이건 편법이었다.

1. README.md 파일을 수정할 때, 에디터에 이미지를 drag & drop
2. Issue, Pull Request, Discussion 등의 탭에서 이미지를 drag & drop

하게 되면 해당 이미지에 대한 링크가 생성되는데, 이를 사용하는 것이었다.

즉, 리포지토리의 프로젝트와 관련된 활동들을 지원하기 위해 GitHub에서 선의로 제공하는 이미지 서비스를 악용하는 것인데, 심지어는 이걸 GitHub 블로그 이미지 업로드 팁이라며 소개해둔 글도 찾을 수 있었다..

잘 되는데 뭐가 문제야? 라고 생각할 수도 있지만, 도의적인 문제는 차치하더라도 이건 언제 막혀도 이상하지 않다는 점 때문에 다른 방법을 찾아보기로 했다.

다른 방법?

Google Drive나 OneDrive를 CDN처럼 사용할 수 있는 방법이 있기는 하지만 이것도 GitHub를 통한 방식과 마찬가지로 편법이었기 때문에 결국 이미지 CDN을 사용해야겠다는 생각이 들었지만, AWS의 S3 버킷이나 Cloudflare CDN 같은 유료 서비스의 경우 그렇게 큰 금액이 아니라고 해도 꾸준히 비용이 발생한다는 점이 마음에 걸렸다. 꾸준하게, 오랜 시간동안 블로그를 유지해나가려면 비용이 들지 않아야 할 것 같았다.

그러다 freeimage.host 라는 서비스를 찾았는데, 솔직히 어떻게 유지가 가능한건지 모르겠지만 꽤 오랜 기간동안(since 2018) 운영되고 있는 무료 이미지 호스팅 서비스가 있었다. 중요한 사진이나 민감한 개인정보가 담긴 사진을 보관하고 공유하기에는 적절하지 않을 지 몰라도, 나는 블로그에 누구나 볼 수 있도록 게시하기 위한 이미지들을 호스팅하는 용도로만 사용할 것이기 때문에 지금으로써는 문제가 될 소지가 없다고 판단했다.

운영 방침이 변경돼서 요금을 지불해야 한다던지, 서비스가 종료된다던지 하는 경우에 대비해서 원본 이미지들을 따로 백업해 두되, 앞으로 뭔가 문제가 생기기 전까지는 이 서비스를 활용해 이미지를 업로드할 생각이다.

디자인 수정하기

Ghost에서 몇가지 기본 테마들을 MIT 라이센스(저작권만 표시하면 자유롭게 수정, 배포, 사용하도록 허락해주는 관대한 라이센스)로 공개해준 덕분에, 기본 테마들 중 하나인 Edition 테마를 바탕으로 내가 원하는 디자인(진행중...)의 블로그를 만들어볼 수 있었다. 테마의 깔끔한 디자인이 전체적으로 마음에 들어서 자잘한 CSS 수정만 몇가지 적용시켜 사용중인데, 그마저도 대부분이 다크모드와 관련된 것들이다.

먼저 다크모드에서 CSS 변수의 색상값들을 전체적으로 변경했으며, 이미지/코드/마크다운 블럭의 각진 모서리를 살짝 라운딩 처리 해주고, opacity 속성을 사용해 다크모드에서의 이미지 밝기를 조금 낮춰줬으며, 다크모드에서의 하이라이트 색상을 어두운 테마와 어울리도록 변경해줬다. JS 라이브러리를 통해 구현한 코드 블럭, 목차와 관련된 디자인은 아래에 자세히 적어 두었다.

JS 라이브러리 적용하기

아무런 간섭 없이 컴포넌트들을 배치하고 디자인도 내 마음대로 바꿀 수 있다는 점은 정말 좋은데, 카테고리 모아 보기, 목차 표시, 코드 블럭 하이라이팅처럼 블로그 서비스 플랫폼들에서 기본적으로 제공하는 기능들이 없는 경우가 종종 있었다.

특히 Ghost 에디터에서 자체적으로 코드 블럭을 지원하는걸 보고 Syntax Highlighting도 당연히 적용될거라 생각했었는데, 테스트용 페이지를 만들어 코드 블럭을 로딩해보니 일반적인 문단과 구분되는 블럭이 표시되기는 하지만 함수 및 변수 선언, 문자열 등등 어느 요소에도 색이 들어가 있지 않았다.

다행히도 이를 구현해놓은 PrismJS라는 오픈소스 Javascript 라이브러리가 npm을 통해 배포되고 있었다. npm install을 통해 직접 설치하여 사용할 수도 있고 CDN을 통해 배포되는 JS, CSS 파일을 가져와서 사용할 수도 있는데, Ghost 공식 튜토리얼 문서에서 Code Injection을 활용한 방법을 소개하고 있어 이를 참고하여 구현했다. https://ghost.org/tutorials/code-snippets-in-ghost

PrismJS

PrismJS 공식 페이지를 보면 사용 가능한 여러 테마 옵션들이 있는데, 내가 보기에 라이트모드와 다크모드에 모두 어울리는 테마는 없었다. 기능을 위한 JS가 있고 스타일링을 위한 CSS가 있으니, 라이트모드일 때와 다크모드일 때 각각 다른 CSS를 적용시켜주면 되는 거 아닌가?

처음에는 단순하게 if문을 통해 어떤 CSS를 적용시킬 지 처리하도록 했는데, 페이지 로드 시점의 테마는 잘 감지하지만 다크모드 토글 버튼을 통한 테마(라이트/다크) 변경에 따라 스타일이 (당연히....) 동적으로 변경되지 않는 문제가 있었다.

테마의 스타일 변경을 감지하려면 HTML classList의 변화를 감지하는 방법과 다크모드 토글 버튼의 상태 변화를 감지하는 방법이 있는데, 토글 버튼의 상태를 감지하는것보다 classList의 변화를 감지하는게 더 직관적일 뿐만 아니라 추후 유지보수에도 더 좋은 방식일 것 같아(다크모드 토글 버튼의 구조나 클래스명 등이 바뀔 수 있으니!) classList 변화를 감지하는 방법을 선택하기로 했고, 이번에도 다크모드 토글 버튼처럼 addEventListener 를 활용하면 될 것 같았다.

하지만 버튼의 상태에 따라 테마를 적용해야 하는게 아니라 document.body의 classList에 dark가 있는지 없는지를 감지해 테마를 적용하도록 해야 하는데, DOM에는 요소의 클래스가 변경될 때 발생하는 표준 이벤트가 없으며 이를 감지하기 위해서는 MutationObserver 사용을 권장한다는 것을 알게 되었다.

그래서 기존에 적용되어있던 PrismJS 스타일을 모두 제거한 다음 현재 테마에 맞는 스타일시트를 HTML head에 추가해주는 updatePrismTheme() 함수를 최초 DOM 로드 시점에 한번 실행하고, MutationObserver를 통해 document.body의 classList가 변할때마다 updatePrismTheme() 함수를 실행해주도록 했다.

왜인지 테마를 변경할 때 코드블럭 안에서 +, = 같은 연산자의 배경색이 이상하게(이전 테마의 색도 아님) 변하는 문제가 있었는데, updatePrismTheme() 함수에서 명시적으로 연산자의 배경색을 제거한 다음 스타일시트를 적용시켜주니 해결됐다.

블로그에 적용한 코드는 아래와 같다:

<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        function updatePrismTheme() {
            const style = document.createElement('style');
            style.textContent = `.token.operator {
                background: none !important;
            }`;
            document.head.appendChild(style);

            const existingThemes = document.querySelectorAll('link[href*="prism-"]');
            existingThemes.forEach(theme => theme.remove());

            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = document.body.classList.contains('dark')
                ? 'https://cdn.jsdelivr.net/npm/prismjs/themes/prism-okaidia.min.css' // 다크모드일 때는 okaidia 테마 적용
                : 'https://cdn.jsdelivr.net/npm/prismjs/themes/prism.min.css'; // 라이트모드일 때는 prism 기본 테마 적용
            document.head.appendChild(link);

            Prism.highlightAll();
        }
        updatePrismTheme();

        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.attributeName === 'class') {
                    updatePrismTheme();
                }
            });
        });
        observer.observe(document.body, {
            attributes: true
        });
    });
</script>

Tocbot

목차를 사용하지 않아도 될 만큼 짧고 간단한 글이거나 브라우저 Viewport의 가로폭이 충분하지 않을 경우에는(ex. 모바일 브라우저) 표시되지 않으며, 처음에는 본문 옆 고정된 위치에 있다가 스크롤을 충분히 내리면 졸졸 따라오기 시작하는 목차를 만들고 싶었다.

사용자가 많은 플랫폼을 사용하는데서 오는 가장 큰 장점은 이미 나와 비슷한 생각이나 고민을 해 본 사람을 쉽게 찾을 수 있다는 것 아닐까? ghost 개발자 포럼에서 목차 구현과 관련된 글을 찾을 수 있었고, 샘플 코드의 CSS를 약간만 수정하여 내가 원하던 목차를 손쉽게 구현했다.

가로폭이 충분할 경우에만 목차를 표시해주기 위해 CSS 미디어 쿼리 @media(min-width: 1300px)를 사용했고, position: absolute; 옵션을 준 sidebar 안에 position: sticky; 옵션을 준 container를 담아 위치를 잡아줬으며, text-overflow: ellipsis; 옵션을 통해 Header가 목차를 위한 sticky 영역(블럭)을 넘어갈 경우 레이아웃을 벗어나거나 잘리는 대신 ...처럼 표시하도록 했고, font-weight, line-height, font-size, margin, padding등의 자잘한 옵션들은 여러 값을 테스트해보며 내 눈에 예뻐 보이는 값을 골랐다.

tocbot.init()의 파라미터 목록은 Tocbot 공식 페이지의 옵션 목록을 참고했으며, ghost의 에디터에서 제공하는 toggle이 목차에 표시되는 문제를 해결하기 위해 tocbot.init()에 ignoreSelector를 추가해줬다.

블로그에 적용한 코드는 아래와 같다:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.css">
<script src="https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.js"></script>

<script>
  const parent = document.querySelector(".gh-content.gh-canvas");
  const asideElement = document.createElement("aside");
  asideElement.setAttribute("class", "gh-sidebar");
  
  const containerElement = document.createElement("div");
  containerElement.setAttribute("class", "gh-toc-container");
  
  const divElement = document.createElement("div");
  divElement.setAttribute("class", "gh-toc");
  containerElement.appendChild(divElement);
  
  asideElement.appendChild(containerElement);
  parent.insertBefore(asideElement, parent.firstChild);
  
  tocbot.init({
    tocSelector: '.gh-toc',
    contentSelector: '.gh-content',
    headingSelector: 'h1, h2, h3, h4',
    // Ghost 에디터에서 자체적으로 제공하는 toggle은 목차에서 제외
    ignoreSelector: 'h4.kg-toggle-heading-text',
    hasInnerContainers: true,
    orderedList: false,
    collapseDepth: 6,
  });
  
  const toc = document.querySelector(".gh-toc");
  const sidebar = document.querySelector(".gh-sidebar");
  
  // 목차가 필요 없는 게시물에서는 목차를 표시하지 않기 위한 if문
  if (toc.querySelectorAll('li').length < 2) {
    sidebar.style.display = 'none';
  }
</script>

To be continued...

• { Site Analytics, 댓글, 웹폰트 } 적용기
• 불필요하거나 사용하지 않는 요소들 제거하기
• 그 외 여러 코드 개선점들과 수정사항

그리고 전체적인 소감은 다음 글에서 계속..

국민소득: 경제 내의 총 소득. 일반적으로 GDP(Gross Domestic Product)를 국민소득 지표로 사용함

GDP (Gross Domestic Product)

: GDP, 국내 총 생산이란 일정 기간동안 국가에서 생산된 모든 최종 재화와 서비스의 시장가치 합계

• 중간재는 포함되지 않음
• 가정에서 생산 및 소비되어 시장에 나오지 않는 재화와 서비스는 포함되지 않음
• 마약과 같이 불법적으로 생산 및 소비되는 재화와 서비스는 포함되지 않음

Y = C + I + G + NX // C = 소비, I = 투자, G = 정부지출, NX = 순수출

• C (Consumption, 소비): 재화와 서비스에 대한 지출 (신규 주택 구입 제외)
• I (Investment, 투자): 자본재, 재고, 건축물, 신규주택 구입에 대한 지출
• G (Government purchases, 정부지출): 중앙/지방 정부에 의한 재화와 서비스 지출
• NX (Net Export, 순수출): 총수출 - 총수입

모든 거래에는 사는 사람과 파는 사람이 존재하기 때문에 사는 사람의 지출은 곧 파는 사람의 소득이고, 따라서 한 나라 경제의 총소득은 총지출과 같다. 즉, 생산량 Y(C + I + G + NX)의 크기는 GDP와 같다

명목 GDP (Nominal GDP)

: 재화와 서비스의 가치를 현재 시장가치로 계산한 금액

실질GDP (Real GDP)

: 재화와 서비스의 가치를 주어진 기준연도의 시장가치로 계산한 금액으로, 생산량 변화에 집중함!

GDP 디플레이터 (GDP Deflator)

: 명목 GDP를 실질 GDP로 나눈 값. 명목GDP / 실질GDP * 100, 기준 연도의 실질GDP는 명목GDP와 같으므로 기준 연도의 GDP 디플레이터 값은 항상 100

• GDP 디플레이터는 산출량의 증가가 아닌 가격 상승으로 인한 명목 GDP의 증가량 비중을 나타낸다!

GDP의 한계

GDP는 경제적 후생을 측정하기 위한 최선의 지표이지만, 한계가 있다

• 여가의 가치, 깨끗한 자연 환경의 가치, 자원봉사처럼 시장 밖에서 일어나는 일들의 가치 등은 분명히 경제적 후생 수준에 영향을 미치지만 GDP에 포함되지 않는다
• GDP는 소득의 분배를 고려하지 않는다

24장 소비자물가지수

CPI (Consumer Price Index)

: 소비자물가지수, 일반적인 소비자가 접하는 재화와 서비스의 전반적인 비용

생활비는 소비자물가지수(CPI)를 활용해 측정하는데, CPI가 오르면 동일한 효용을 얻기 위한 지출액이 커진다 (전반적인 재화와 서비스의 비용들이 증가하므로)

물가: 시장에서 거래되는 모든 상품(재화와 서비스)들의 가격을 일정한 기준에 따라 평균한 종합적인 가격 수준

인플레이션: 나라의 전체적인 물가 수준이 상승하는 현상

CPI를 통한 인플레이션율 계산

인플레이션율 = (현재CPI - 과거CPI) / 과거CPI * 100. 즉, 인플레이션율은 CPI의 변동률

CPI의 한계

• 대체효과를 반영하지 못한다 (가격 변화에 따른 소비량 변화를 측정할 수 없음)
• 새로운 상품의 등장을 반영하지 못한다
• 상품의 품질 변화를 반영하지 못한다

GDP 디플레이터와 CPI의 차이

GDP 디플레이터와 GPI는 모두 인플레이션 지표이지만

• GDP 디플레이터는 국내에서 소비되는 모든 재화와 서비스의 가격을 반영
• CPI는 소비자가 구입하는 재화와 서비스의 가격만을 포함

명목이자율과 인플레이션율의 관계

• 명목이자율(nominal inflation ratio): 금융기관에서 제시하는 금리로, 물가변동을 감안하지 않은 일반적인 이자율
• 실질이자율(real inflation ratio): 인플레이션율을 감안해 조정한 실질적 이자율
  = 명목이자율 - 인플레이션율

서로 다른 시점의 재화 가치를 실질적으로 비교하기 위해서는 물가지수의 차이를 고려해야 한다!

기준 연도의 화폐 금액을 오늘날의 화폐 금액으로 환산?

현재 금액 = 기준 연도 금액 * (현재 CPI / 기준 연도 CPI)

25장 생산과 성장

생산성 (Productivity)

: 한 근로자가 단위 시간당 생산할 수 있는 재화와 서비스의 양
(Y/L은 사실 노동생산성이지만, 역사적으로 생산성의 정의로 사용되어왔음)

장기적으로 나라의 생활 수준은 재화와 서비스 생산 능력에 달려 있다. 생활 수준의 차이와 평균 소득의 차이는 결국 생산 능력의 차이에 의한 것!

생산성 결정 요소

: 물적 자본(K) + 인적 자본(H) + 자연 자원(N) + 기술 지식(A)
Y = A*F(L, K, H, N)

• K (physical Kapital, 물적 자본): 재화와 서비스 생산에 사용될 수 있는 장비와 건물의 재고
• H (Human capital, 인적 자본): (근로자 1인 당) 교육, 훈련, 경험 등을 통해 근로자들이 체득한 지식과 기술
• N (Natural resources, 자연 자원): 토지, 광물, 강 등 자연에 의해 제공되는 생산요소 (반드시 필요한 것은 아니다)
• A (Technological knowledge, 기술 지식): 재화와 서비스 생산에 대한 사회의 이해, 최적화 정도

저축의 증가는 자본량을 증가시킨다. 하지만, 자본량이 증가하면 증가할수록 그 한계생산성은 감소한다 (한계수확 체감 현상)

즉, 저축률이 상승하면 소득과 생산성의 절대수준은 증가하지만, 그 증가율이 높아지지는 않는다
-> 따라잡기 효과(catch-up effect) 발생

• 자본 투입량이 적인 상황(후진국)에서는 자본의 한 단위 추가 투입이 큰 폭의 생산성 향상을 만듦
• 자본 투입량이 이미 많은 상황(선진국)에서는 자본의 한 단위 추가 투입에 따른 생산성 향상폭이 점점 작아짐

26장 저축, 투자와 금융제도

금융 시스템 (Financial System)

: 한 사람의 저축을 (금융 기관을 통해) 다른 사람의 투자와 연결시켜주는 기관들로 구성됨

• 금융 시장
  • 주식 시장
  • 채권 시장
• 금융중개기관(Financial Intermediaries)
  • 은행
  • 뮤추얼펀드
  • etc (보험사, 신용조합, 연금 기관 등)

주식(Stock)

: 기업의 소유 지분 == 기업의 이윤에 대한 부분적 소유권

채권(Bond)

: 채무자(차입자)가 채권자에 대한 채무상환의무를 적시한 증서. 일종의 차용증

은행(Bank)

: 저축하려는 사람들의 예금을 받아, 차입하려는 사람들에게 자금을 대출해주는 기관

• 은행은 교환의 매개(medium of exchange)를 창출함으로써 재화와 서비스의 거래를 촉진시키는 기능도 한다 - 은행의 통화창출기능

뮤추얼펀드(Mutual Funds)

: 자신(뮤추얼펀드사)의 지분을 팔아 조성한 자금을 다양한 주식들과 채권들에 분산투자하는 기관

국민소득과 저축-투자 균형

국민소득, GDP는 총샌상량을 의미하는 동시에 총지출을 의미한다
-> Y = C + I + G + NX

• 무역수지가 균형(수출 == 수입)이거나 폐쇄경제일 경우
  -> Y = C + I + G

국민저축(S, national Saving)은 총소득에서 소비지출과 정부지출을 뺀 나머지
-> S = Y - C - G

• 세금은 국민에 -항, 정부에 +항이므로
  -> S = (Y - T - C) + (T - G)
  • 민간저축(Private Saving) = 가계소득(Y) - 세금(T) - 소비(C)
  • 정부저축(Public Saving) = 조세 수입(T) - 정부지출(G)
    • T > G 일 경우 재정 흑자
    • T < G 일 경우 재정 적자

대부자금시장의 균형

: 대부자금시장(Loanable Funds Market)은 자금의 수요자와 공급자를 연결시켜줌

• 대부자금의 수요자: 투자를 통해 자본을 유치하려는 기업 또는 신규 주택 구입을 위해 융자를 받으려고 하는 개인
• 대부자금의 공급자: 여유 자본, 자금을 저축하려는 사람들

대부자금시장의 수요-공급 균형은 실질이자율이 결정한다!
실질이자율 = 명목이자율 - 인플레이션율

정부정책에 의한 대부자금의 균형점 변화

• 이자소득에 대한 세금 감면
  -> 이자에 대한 세율을 인하하면 저축에 대한 인센티브가 증가하고, 결과적으로는 대부자금의 공급이 증가한다
  • 대부자금의 공급곡선이 오른쪽으로 이동
  • 균형 이자율이 하락
  • 이자율이 하락함에 따라 대부자금 수요량이 증가하고, 대부자금의 균형거래량이 증가한다
• 투자에 대한 세금 감면
  -> 투자에 대한 세금을 감면하면 자금에 대한 수요가 증가한다
  • 대부자금의 수요곡선이 오른쪽으로 이동
  • 균형 이자율이 상승
  • 이자율이 상승함에 따라 대부자금 공급량이 증가하고, 대부자금의 균형거래량이 증가한다
• 정부의 재정 적자
  -> 재정 적자를 완화시키기 위해 정부가 국채 발행을 통해 추가적으로 자금을 조달하게 되면, 안정성이 큰 국채로 금융 시장의 자금(유동성)이 몰림
  • 이는 대부자금의 공급을 감소시킨다 (대부자금 공급곡선을 왼쪽으로 이동시킴)
  • 균형 이자율이 상승
  • 민간 투자가 위축되어 대부자금의 균형거래량이 감소한다
    = 밀어내기 효과(Crowding-out effect): 정부가 민간 투자를 밀어내는 효과가 발생함

28장 실업

실업률 (Rate of Unemployment)

: 15세 이상 인구 중, 일을 하고 싶어하지만 일자리를 구하지 못한 사람들의 비율

실업률의 정의 = 실업자 수 / (취업자 수 + 실업자 수) * 100(%)

실업자가 총 네명이라면, 그중 한명은 조사 시점마다 달라지는 단기실업자
하지만, 나머지 셋은 실업이 지속되는 장기실업자

실업으로 인한 대부분의 사회적 문제는 실업 상태가 지속되는 장기 실업자들에 의해 발생한다

두 종류의 실업률

• 경기적 실업률(Cyclical Unemployment): 단기적인 경기 변동으로 인한 실업률
  -> 완전고용 상태에서는 Zero
• 자연 실업률(Natural Rate of Unemployment): 마찰적 실업 + 구조적 실업으로 인한 실업률
  완전고용 실업률이라고도 부르며, 실업률이 절대로 0이 될 수 없는 이유!
  • 마찰적 실업: 근로자들이 적성과 능력에 맞는 일을 찾는 동안 발생하는 일시적인 실업
    • 경제 여건은 항상 변하기 때문에 불가피하다
    • 일자리에 대한 정보, 직업훈련 등을 제공함으로써 완화할 수 있다
    • 실업급여는 실직 상태인 노동자들의 재취업 의사를 약화시키고, 직업 탐색에 따른 실업을 증가시킴으로써 마찰적 실업을 증가시킬 수 있다
  • 구조적 실업: 노동의 공급량이 노동 수요를 초과해서 발생하는 실업
    • 최저임금제(Minimum wages): 시장의 균형임금보다 높은 가격으로 최저임금이 설정되면, 노동의 공급이 노동의 수요를 초과하게 된다
      -> 실업(노동의 초과공급)을 유발함
    • 효율임금제(Efficiency wages): 일부 기업에서는 근로자들의 근로 의지를 높이고 이직률을 감소시키기 위해 시장의 균형임금보다 높은 임금을 지불하기도 한다
      -> 효율임금 또한 균형임금보다 높은 수준의 임금이기 때문에, 최저임금제와 비슷한 원리로 실업(노동의 초과공급)을 유발함
    • 노동조합(Unions, 노조): 노동조합은 일종의 공급 카르텔로서, 조합원과 비조합원간의 임금 격차를 유발한다 (미국의 경우, 내부자-외부자 임금 격차는 10-20% 사이)
      -> 단체교섭권과 파업권을 통해 조합원의 임금을 시장균형임금보다 높게 설정하게 되면 노동의 초과공급에 의한 실업을 유발함
      + 노조는 사용자의 경제력으로부터 피고용자를 보호하고, 기업에게 피고용자들의 관심사를 알리는 긍정적인 역할도 한다는 견해가 존재함

자연실업률 (Natural Rate of Unemployment)

: 경제가 장기적으로 지향하는 실업률!

• 완전고용 상태에서의 실업률로, 완전고용 실업률이라고도 부른다
• 바람직한 실업률을 의미하는 것은 아니며, 늘 일정한 것도 아니다
• 금융 정책은 자연실업률을 변화시킬 수 없지만, 노동시장에 영향을 미치는 정책은 자연실업률에 영향을 미칠 수 있다

실업률의 한계

실업률은 경제활동인구(취업자 + 실업자)만을 고려하기 때문에 불완전한 지표. 따라서 고용보조지표를 활용한다

• 15세 이상 인구(성인 인구) = 취업자 + 실업자 + 비경제활동인구
  • 경제활동인구: 취업자 + 실업자
  • 비경제활동인구: 학생, 종교인, 노인 등 취업자도 실업자도 아닌 사람

실업률은 실업자 수 / (취업자 수 + 실업자 수) * 100(%)

• 취업자 중, 불완전취업자를 반영하지 못함
• 비경제활동인구 중, 잠재 취업가능자와 잠재 구직자를 반영하지 못함

확장 실업률

: 불완전취업자와 잠재 경제활동인구까지 고려함으로써, 체감 실업률을 좀 더 잘 반영하는 지표

(실업자 + 불완전취업자 + 잠재경제활동인구) / (경제활동인구 + 잠재경제활동인구) * 100(%)

취업자의 분류

: 임금 근로자 + 자영업자 + 무급 가족 종사자(주부를 포함)

• 임금 근로자
  • 상용 근로자 (정규직)
  • 임시 근로자 (비정규직)
• 자영업자
  • 고용원이 있는 자영업자 (사업자)
  • 고용원이 없는 자영업자 (프리랜서)
• 무급 가족 종사자: 자영업자의 가족 또는 지인으로서, 임금을 받지 않고 해당 사업체 정규 근로시간의 3분의 1 이상을 종사하는 사람 (주부를 포함한다!)

29장 통화제도

화폐 (Money)

: 재화와 서비스의 거래에 사용되는 자산 (화폐도 자산의 일종이다)

• 어떤 것이 화폐인지를 결정하는 가장 중요한 요소는 유동성(Liquidity)!!
  • 물품화폐 (Commodity Money): 물건 자체적인 가치를 가지지만 화폐로써 기능하는것
    -> 금, 은
  • 법정화폐 (Fiat Money): 화폐로써 기능하지만 그 자체적인 가치는 없는 것
    -> 동전, 지폐, 수표

화폐의 기능

• 교환의 매개 (Medium of Exchange): 재화나 서비스를 구입하려는 사람이 판매하는 사람에게 주는 지불 수단
• 회계의 단위 (Unit of Account): 물건의 가격을 정하고, 채무를 기록할 때 사용되는 측정 기준
• 가치의 저장 수단 (Store of Value): 현재의 구매력을 미래로 이전시킬 수 있는 수단

M1, 협의(좁은 의미)의 통화

: 가장 좁은 의미의 통화량으로, 단기금융시장의 유동성 지표
현금과 같은, 유동성이 가장 큰 통화만을 의미하는 통화량

• (기념화폐를 제외한)현금
• 쉽게 현급화될 수 있는 예금(수시입출식 예금)

M2, 광의(넓은 의미)의 통화

: M1보다 넓은 의미의 통화량으로, 시중 유동성 지표

• M1
• 만기 2년 미만의 금융상품 (정기예금, 적금, CD, RP 등)
  -> 즉시 유동화하려면 약간의 손해를 감수해야하므로 환급성이 떨어짐

Lf, 금융기관 유동성

: 현금화하기 어려워 유동성이 낮은 통화까지 포함하는 통화량

• M2
• 만기 2년 이상인 정기예·적금, 및 금융채, 예수금

L, 광의유동성

: 한 나라에 유통되고 있는 모든 유동성의 크기!

• Lf
• 정부와 기업 등이 발행한 채권 (국공채, 회사채)

지급준비율 (Reserve Ratio)

: 시중은행이 고객의 예금 중 지급준비금(반드시 은행의 금고 또는 한국은행 예금으로 보유해야 하는 금액)으로 보유해야 하는 금액의 비율

• 지급준비금은 통화량에 포함되지 않는다!

지급준비제도와 은행의 통화창출

: 시중은행이 예금의 일부를 대출하면, 그 대출금은 즉시 통화량에 포함되는데, 이 대출금은 다시 은행에 예금되어 또 다른 대출을 만들어냄
-> 지급준비율이 10%일 경우 100만원의 예금은 90만원의 대출을 만들어내고, 이 90만원의 예금은 다시 81만원의 대출을 만들어내고, ...

예금통화승수

: 은행의 예금이 얼마만큼의 통화량을 창출할 수 있을지를 나타내는 수치

예금통화승수는 지급준비율의 역수. 즉, 지급준비율이 10%라면 예금통화승수는 10 (최초 예금의 10배만큼 통화가 창출됨)

M = mH // M = 통화량, m = 예금통화승수, H = 본원통화(High Powered Money)

화폐승수이론의 한계

• 현실에서는 예금에 의한 재대출이 일어나지 않는다
  • 대출받은 사람이 대출금 전액을 은행에 예금?
• 미국엔 법정 지급준비율이 존재하지 않는다
  • 예금의 총량은 신용의 총량에 의해 결정됨

공개시장조작

: 국채를 매입하거나 매각함으로써 시중에 유통되는 통화량을 조절하는 것
+ 최근에는 공개시장운영이라는 표현을 많이 사용함

• 중앙은행이 국공채를 사거나 판매하는 행위를 통해 통화량을 변화시키는 정책
  (+ 환매조건부 채권)
• 통화량을 증가시키려면 국채를 매입 (국채를 사들임으로써 시중에 현금이 풀림)
• 통화량을 감소시키려면 국채를 매각

30장 통화량 증가와 인플레이션

통화량이 증가하면 돈의 가치가 감소하고, 전반적인 물가가 상승한다
반대로 통화량이 감소하면 돈의 가치가 증가하고, 전반적인 물가는 감소한다

인플레이션이란, 물가 수준이 전반적으로 상승하는 현상 == 화폐 가치가 하락하는 것

화폐의 공급은 중앙은행이 담당하기 때문에, 화폐의 공급 곡선은 수직선이다

화폐의 수요는

• 이자율과 반비례 (화폐 또한 자본, 자산의 일종이기 때문)
• 물가와 비례 (물건들이 비싸지면 거래를 위해 더 많은 화폐를 보유해야 하기 때문)

화폐 수량 방정식

: M = (P * Y) / V, MV = PY(M = 통화량, V = 화폐 유통 속도, P = 물가, Y = 실질산출량)

화폐 수량설 (Quantity Theory of Money)

: 통화량이 물가 수준을 결정한다는 이론 (고전적인 이론)

• 고전적 이분성: 명목변수에 영향을 주는 변수와 실질변수에 영향을 주는 변수는 다르다!
• 화폐의 중립성: 통화량의 변화는 실질변수에 영향을 주지 않는다

화폐의 중립성은 고전학파의 주장이고, 장기적인 설명이다 (단기는 설명할 수 없다)

화폐 수량설의 논리?

1. 화폐 유통속도 V는 장기적으로 안정적이다 (상수)
2. 따라서 명목산출량(P*Y)은 통화량에 비례한다
3. 화폐의 중립성에 의해 통화량의 변화는 실질산출량에 영향을 주지 않는다
4. 즉, 통화량과 물가 수준은 비례한다
   -> 따라서 통화량의 급격한 증가는 인플레이션만 키우게 된다. 돈을 너무 많이 풀면(유통시키면) 초인플레이션이 발생한다

피셔 효과 (Fisher Effect)

: 인플레이션 기대 심리가 시중금리(명목이자율)에 영향을 끼친다

실질이자율 = 명목이자율 - 인플레이션율
명목이자율 = 실질이자율 + (예상)인플레이션율

실질이자율이 불변일 경우, (예상)인플레이션율이 증가하면 장기적으로는 명목이자율도 동일한 상승분만큼 상승한다!

인플레이션의 사회적 비용

• 구두창비용(shoe leather cost): 인플레이션이 일어나 화폐의 가치가 계속해서 하락할 것으로 예상되면, 사람들은 이에 합리적으로 대응하기 위해 화폐 보유량을 줄이고 이를 은행에 예금하려고 할 것 -> 그만큼 은행에 더 자주 찾아가게 되므로 (구두창이 닳는)거래비용이 발생한다(개인적으로는 구두창이 닳는다는 것은 은유적인 표현이고, 거래에 들어가는 시간과 같은 기회비용까지도 포함한다고 생각)
• 메뉴비용(menu cost): 메뉴판의 가격을 조정하는데 들어가는 비용
  물가가 계속 상승하면 각종 가격표들을 지속적으로 교체해줘야 하는데, 이는 다른 생산적인 활동에 투입될 수 있는 자원이 낭비되는 것으로 볼 수 있다
• 상대가격의 왜곡: 물가 상승으로 인해 가격들이 전반적으로 상승한다고 하더라도, 모든 상품의 가격들이 동일한 비율로 상승하는 것은 아니다
  -> 상대 가격의 변화로 인해 가격의 신호기능에 잡음이 생기기 때문에, 경제주체들이 합리적인 의사결정을 내리기 어려워진다 (어떤 재화의 가격 상승이 그 재화의 상대적 가치 증가를 의미하는지, 전반적인 물가 상승의 결과인지 모호해지기 때문에 자원이 효율적으로 분배되기 어려워진다)
• 조세 왜곡: 인플레이션이 발생하면 실질소득이 변하지 않았더라도 명목소득이 변화함에 따라 세금 부담도 함께 변화한다
  • 누진세율로 인해 인플레이션으로 인한 명목소득의 상승은 소득세 부담을 유발
  • 인플레이션으로 인해 명목이자율이 상승할 경우에도 세금이 증가
  • => 결과적으로는 실질이자율이 하락하여 저축에 대한 유인이 저하될 수 있다!
• 혼란과 불편: 물가가 상승하면 인플레이션으로 인해 화폐의 실질가치가 달라지고, 회계적으로 실질수입, 실질비용, 이윤 등을 비교하기 어려워진다
  + 경제에 대한 불확실성(uncertainty)과 위험(risk)으로 인해 경제활동이 위축된다
• 부의 자의적 재분배: 인플레이션은 채권자(돈을 빌려 준 사람)로부터 채무자(돈을 빌린 사람)에게 부를 이전시킨다. 즉, 인플레이션은 금융자산 보유자로부터 실물자산 보유자에게 부를 이전시킨다

인플레이션에 대한 오해?

인플레이션은 임금 근로자들의 실질임금을 낮추어 이들의 생활 수준을 낮춘다?
-> 단기적으로는 예상치 못한 인플레이션으로 인해 실질임금이 낮아질 수 있으나, 장기적으로 실질임금의 상승률은 생산성의 증가율과 일치하기 때문에 장기적으로는 임금근로자들의 생활 수준에 영향을 주지 않는다

31, 32장 개방경제의 거시경제학

순수출 (NX), 순자본유출(NCO)

: 개방경제체제에서, 다른 경제와의 상호작용을 나타냄

순수출 (Net Export, 무역수지)

: 수출액 - 수입액

순자본유출 (Net Capital Outflow, 자본수지)

: 내국인이 구입한 외국 자산 - 외국인이 구입한 국내 자산 == 순자본유입 - 순자본유출

순수출과 순자본유출의 항등관계

: 경제 전체적으로 볼 때, 순수출에 영향을 미치는 거래는 반드시 순자본유출에도 영향을 미친다
즉, NX == NCO

Y = C + I + G + NX
Y - C - G == S = I + NX == I + NCO
// 국민저축(S) = 국내투자(I) + 순자본유출(NCO)

환율

명목환율 (nominal exchange rate)

: 화폐간의 교환 비율

• 자국통화표시환율: $1 = 1,000원
• 외국통화표시환율: 1원 = $0.0010 (맨큐 교재에서는 이걸 사용)

실질환율 (real exchange rate)

: 재화나 서비스 간의 교환 비율
실질환율 = (e * P) / P*
= (명목환율 * 국내가격) / 해외가격

일물일가의 법칙

: 동일한 재화나 서비스의 가격은 어디에서나 같으므로, 실질환율은 항상 1이다

구매력 평가설 (Purchasing Power Parity)

: 일물일가의 법칙을 모든 재화와 서비스(물가)로 확장한 것. 장기적으로 명목 환율은 물가 수준의 차이를 반영한다!

(e * P) / P* = 1에서, e = P*/P

• 국내 물가가 상승하면 명목환율(외국통화표시환율)은 하락한다
• 반대로 국내 물가가 하락하면 명목환율은 상승한다

구매력 평가설의 한계

1. 모든 재화와 서비스가 교역재인 것은 아니다
   + 서비스는 비교역재의 성격이 강하다
2. 교역재들끼리도 완전한 대체재가 될 수 있는것은 아니다

33장 총수요와 총공급

1. 단기적인 경기 변동은 불규칙적이며 예측하기 어렵다
   1. 통화량 변동에 따른 경제변수들의 변동은 즉각적이지 않다
      -> 가격과 소득이 변동하는데에는 시간이 필요하며, 그동안은 통화량의 변동이 실질변수에 영향을 줄 수 있다 (단기에서는 화폐의 중립성이 성립하지 않는다)
2. 대부분의 거시경제 변수들은 함께 움직인다 (단기에서는 고전적 이분성이 성립하지 않는다. 즉, 단기에서는 명목변수가 실질변수에 영향을 끼칠 수 있다)
3. 생산량이 감소하면 실업이 증가한다!!

단기 경기변동을 설명하는 변수

• 실질GDP: 경기 전체의 재화와 서비스 산출량 (산출량)
• CPI(소비자물가지수): 경기 전체의 평균적인 물가 수준 (물가)

총수요 (Aggregate Demand)

: 각각의 물가 수준에서, 가계, 기업, 정부가 구입하고자 하는 재화와 서비스의 수량

Y = C + I + G + NX 에서, 총수요는 오른쪽 항들의 총합
총수요곡선(AD 곡선)이 우하향하는(기울기가 음수인) 이유?

• 자산효과(C): 물가가 하락하면 보유자산(화폐를 포함)의 실질 가치가 상승하므로, 소비자들의 자산이 증가하여 소비량이 증가
• 이자율효과(I): 물가가 하락하면 화폐에 대한 수요가 감소하여 이자율 하락, 이자율이 하락하면 자금을 차입하는데 드는 비용이 하락하여 투자가 증가
• 환율효과(NX): 물가가 하락하면 이자율이 하락하고, 투자가 증가
  -> 해외 순투자 또한 증가하므로 외환시장에 자국화폐 공급이 증가하고, 이로 인해 환율이 하락하기 때문에 결과적으로 순수출이 증가 (외국통화표시환율의 하락, 즉 자국화폐 가치의 하락을 의미함)

총공급 (Aggregate Supply)

: 각각의 물가 수준에서, 기업들이 생산 및 판매하고자 하는 재화와 서비스의 수량

총공급곡선에는 장기 총공급곡선(LRAS, Long-Run AS)과 단기 총공급곡선(SRAS, Short-Run AS)이 있는데, 물가가 상승하면 단기적으로는 생산자들이 공급하고자 하는 재화와 서비스의 수량(산출량)이 증가한다

단기 총공급곡선(SRAS 곡선)이 우상향하는(기울기가 양수인) 이유?

• 임금 경직성 이론: 명목임금의 변화 속도는 항상 물가가 변화하는 속도보다 느리기 때문에, 물가가 갑작스럽게 상승하면 단기적으로는 실질임금이 하락한다
  -> 고용에 드는 비용이 줄어들어 기업은 고용을 늘리고, 결과적으로 산출량이 증가한다
• 가격 경직성 이론: 메뉴비용 등 여러가지 이유로 인해, 재화나 서비스의 가격은 물가의 변동을 즉각적으로 반영할 수 없다
  -> 물가수준이 갑작스럽게 하락하면, 적정가격보다 가격이 높게 책정되어있는 기업들의 판매량이 감소하여 기업의 산출량이 감소한다
• 착각 이론(New classical, 새고전학파의 설명): 기업은 물가 상승에 따른 제품(재화 및 서비스)가격의 상승을 제품의 상대 가격(실질 시장가치) 상승으로 착각한다
  -> 물가가 상승함에 따라 기업은 산출량을 증가시킨다 <- 착각 때문에!

단기 총공급곡선이 우상향하는 이유에 대한 세가지 학설들의 공통점

: 실제 물가 수준이 사람들이 예상한 물가 수준과 다를 경우, 단기적으로는 산출량이 자연산출량과 달라질 수 있다!!
장기적으로는 경제주체들의 반응이 합리적이므로, 이러한 차이는 0에 수렴하게 된다
== 장기적으로 총공급곡선은 자연산출량에 수렴하게 된다

산출량 = 자연산출량 + a(실제 물가수준 - 예상 물가수준)(이때, a>0)

총수요곡선의 이동으로 인한 경기 변동

: 총수요곡선(AD)이 이동하면 단기적으로는 경제의 산출량과 물가 수준이 모두 변화하지만, 시간의 경과에 따라 단기총공급곡선이 이동하므로 산출량은 다시 자연산출량에 수렴하게 된다. 이때 총수요에 영향을 주는 정책은 경기의 변동을 완화시킬 수 있다

총공급곡선의 이동으로 인한 경기 변동

: 해로운 공급 충격으로 인해 단기 총공급곡선(SRAS)이 왼쪽으로 이동할 경우, 산출량이 감소하는 동시에 물가는 상승하는 스태그플레이션이 발생할 수 있다

대응책? - 총수요를 조절한다고 해도, 두가지 문제를 동시에 해결할 수는 없다..

• 정책적인 개입 없이, 물가와 임금이 조정되기를 기다린다
• 금융 및 재정정책을 통해 총수요를 증가시킨다
  -> 이렇게 하면 산출량은 자연산출량 수준에서 유지되지만, 물가수준은 더욱 큰 폭으로 상승하게 된다 (산출량을 유지시키기 위해서는 더욱 큰 폭의 인플레이션을 감수해야만 한다)

34장 통화정책과 재정정책이 총수요에 미치는 효과

총수요곡선이 우하향하는 이유(물가수준에 대해 마이너스 기울기를 가지는 이유)는 자산효과, 이자율효과, 환율효과

• 이중 가장 영향이 큰 것은 이자율효과!

유동성 선호 (Liquidity Preference)

: 유동성 선호 == 화폐 그 자체에 대한 수요, 화폐의 공급과 수요를 일치시키는 것은 이자율의 변동!!

유동성 선호 이론의 요점:

1. 물가 수준이 상승하면 화폐에 대한 수요가 증가한다
2. 화폐 수요가 증가하면 이자율이 상승한다 (화폐 공급, 통화량은 고정)
3. 이자율이 상승하면 투자가 감소하고, 결과적으로 총수요도 감소하게 된다

• 이때 화폐의 공급은 중앙은행이 조절하는 외생변수이므로, 화폐 공급량은 이자율과 무관하다. 즉, 화폐공급곡선은 수직선이다

화폐수요의 결정 요인?

화폐 수요를 결정하는 변수에는 여러 가지가 있지만, 유동성 선호 이론에서는 이자율이 화폐 수요를 결정하는 가장 중요한 변수!

화폐는 교환의 수단이지만 수익성이 0인 자산이므로, 이자율이 상승하면 화폐 보유에 따른 기회비용이 증가한다(화폐 형태로 보유하고 있는 자산은 이자를 받을 수 없기 때문). 즉, 화폐에 대한 수요가 감소한다 (이자율과 화폐 수요는 반비례)
-> 이자율의 변화에 따라 화폐 수요가 변화하고, 이를 통해 화폐의 수요와 공급이 일치하게 된다

정부의 재정정책이 총수요에 미치는 영향

: 정부 지출의 변화로 인한 총수요의 변화는 승수효과와 밀어내기 효과의 영향을 받는다

• 승수효과(Multiplier Effect): 재정지출이 증가하면 소득이 증가하고, 소득의 증가는 다시 소비의 증가를 가져온다 (Y = C + I + G + NX에서, G가 증가하면 Y가 증가하고, Y의 증가는 다시 C의 증가로 이어지고, C의 증가는 Y를 증가시키고, ...)
  • 승수효과의 크기 = 1 / (1 - MPC)
    Marginal Propensity of Consumer, 한계소비성향: 소득 증가분(추가 소득) 중 저축되지 않고 소비되는 소득의 비율
    -> 따라서 MPC값이 클수록 승수효과가 커진다!
• 밀어내기 효과(Crowding-out Effect, 구축효과): 확대재정(재정지출 확대)정책은 이자율을 상승시키고, 이자율의 상승은 민간 투자심리를 위축시켜 투자를 감소시킨다
  -> 이로 인해 승수효과에 따른 총수요 증가분이 일부 상쇄된다

정부지출의 변화 뿐만 아니라, 조세정책의 변화에 따른 총수요의 변화 또한 승수효과와 밀어내기 효과의 영향을 받는다!

이때, 경제주체들이 조세정책의 변화를 일시적인 것으로 받아들이는지 영구적인 것으로 받아들이는지에 따라 그 효과가 달라진다

• 경제주체들이 세금 감면을 일시적인 것으로 받아들일 경우, 증가된 소득 대부분을 저축할 것
• 반면 경제주체들이 세금 감면을 영구적인 것으로 받아들일 경우, 증가된 소득의 대부분이 소비될 것

정부가 세금을 낮춰주는 이유는 총수요를 증가시켜 경기를 부양하기 위함인데, 경제주체들이 세금 감면을 일시적인 것으로 받아들일 경우 그 효과가 미미할 수 있다!

경제 안정화 정책에 대한 찬반

• 케인즈학파: 단기적인 경기 등락은 사람들의 심리적 변화에 의해 발생한다
  -> 따라서 정부는 경기 변동을 완화시키기 위해 적극적으로 개입해야 한다
• 통화론자: 정부 정책은 그 효과가 나타나기까지의 시차가 존재한다
  -> 경기의 미세 조정(fine-tuning)은 불가능하고, 경기를 조절하려는 시도는 경기 변동을 더욱 악화시킬 뿐이다

자동 안정화 장치(Automatic Stabilizers)

: 정부의 개입 없이도 자동적으로 경기 변화를 완화시키는 제도적 장치들. 즉, 경기 침체기에는 총수요를 자동적으로 증가시키고, 경기 과열시에는 총수요를 자동적으로 감소시키는 장치들

• 누진소득세율: 경기가 과열되어 사람들의 명목소득이 증가할 경우, 높은 소득세율을 적용받는 사람들이 많아짐에 따라 세금 수입이 증가하고 총수요 증가폭이 완화됨
• 사회보장제도: 경기가 침체될 경우, 사회보장제도 수급자가 증가함에 따라 총수요 감소폭이 완화됨

35장 인플레이션과 실업의 상충관계

장기적인 실업률(자연실업률)은 노동 시장의 구조에 영향을 받는다

• 최저임금제, 효율임금제, 노동조합의 유무, 직업탐색의 효율 등

단기적인 실업률은 인플레이션율과 상충관계를 가진다
== 단기적으로, 인플레이션과 실업률은 반비례(마이너스 상관관계)

필립스곡선

: 인플레이션과 실업률 사이의 상충관계를 나타내는 곡선

• 단기 필립스곡선: 단기적으로 인플레이션과 실업률은 반비례
  -> 인플레이션율이 낮을 땐 실업률이 높고, 반대로 인플레이션율이 높을 땐 실업률이 낮다
• 장기 필립스곡선: 1960년대에 프리드먼과 펠프스는 장기적으로 인플레이션과 실업은 아무런 관련이 없다는 결론을 내림
  -> 장기 필립스곡선은 자연실업률에 수렴하므로 수직선이고, 금융정책은 단기에서 효과적일 수 있지만 장기적으로는 아무런 효과가 없다!

단기 필립스곡선과 장기 필립스곡선

단기적으로는 실업과 인플레이션 간에 상충관계가 존재한다는 실증적 증거와 장기 필립스곡선은 수직이라는 것을 어떻게 연결시킬 수 있을까?

실업률 = 자연실업률 - a(실제 인플레이션율 - 예상 인플레이션율)

예상 인플레이션율은 사람들이 전반적인 물가 수준이 얼마나 상승할것으로 예상하는지를 나타내는데, 장기적으로 예상 인플레이션율은 실제 인플레이션율의 변동에 맞춰 조정된다
-> 따라서 중앙은행은 단기에서만 예상치 못한 인플레이션을 만들어낼 수 있다
== 실업률을 자연 실업률 아래로 유지시키는 유일한 방법은, 실제 인플레이션율을 예상 인플레이션율보다 높게 유지하는 것 뿐이다! (하지만 장기적으로는 인플레이션에 대한 사람들의 기대가 조정되기 때문에, 장기적으로는 실업률을 자연실업률 아래로 유지시킬 수 없다)

해로운 공급 충격에 의한 필립스곡선의 이동

: 해로운 공급 충격에 의해 단기 총공급곡선(SRAS)이 왼쪽으로 이동하게 되면, 산출량이 감소하는 동시에 물가는 상승하는 스태그플레이션(stagflation)이 발생

== 단기 필립스곡선이 오른쪽으로 이동! (실업, 인플레 모두 증가, 인플레이션과 실업 간의 상충관계가 악화됨)

정책당국이 선택할 수 있는 옵션은 다음과 같다 - 둘 다 동시에 잡을수는 없다!

• 총수요를 증가시켜 총공급 감소에 따른 생산량 감소를 상쇄시킴
  -> 생산량을 유지함으로써 실업률은 낮출 수 있지만, 인플레이션의 악화를 감수해야함 (물가는 더욱 큰 폭으로 상승함)
• 총수요를 감소시켜 인플레이션율을 낮추고, (단기적인)실업률의 증가를 감수함

인플레이션 저감 정책의 사회적 비용

인플레이션을 낮추려면(disinflation), 금리 인상과 같은 통화긴축정책을 시행해야 함
-> 이를 위해서는 단기 필립스곡선을 따라 실업률이 높아지고, 경기가 침체되는 기간을 겪어야만 한다

• 희생비율(Sacrifice Ratio): 인플레이션을 1%p 낮추기 위해 줄어드는(희생해야 하는) 연간 산출량의 %p
• 미국의 희생비율 추정치는 5이다 (즉, 인플레이션율을 6% 낮추기 위해서는 30%의 연간 산출량 감소를 감수해야 할 것이다)

합리적 기대 이론

: 사람들은 미래를 예측할 때, 사용할 수 있는 모든 정보들을 최적으로 사용한다

• 합리적 기대 이론에 따르면, 사람들의 예상 인플레이션율이 빠르게 변화해서 단기 필립스곡선이 빠르게 조정될 경우, 인플레이션 저감 정책에 따른 희생비율이 추정치보다 훨씬 작을 수 있다!

인플레이션 저감 정책의 비용은, 인플레이션에 대한 사람들의 기대가 얼마나 빠르게 조정되느냐에 달려있다!!

생각은 벽에 붙어있는 메모와 비슷하다

어떤 생각은 단단히 달라붙어 좀처럼 흔들리지도 않는 반면, 어떤 생각은 시간이 지나며 자연스레 떨어져나가기도 한다. 종종 잘못된 내용도 붙어있을 수 있지만, 언제나 그걸 바로잡을 준비만 되어 있다면 괜찮지 않을까.

여기 내 생각들을 붙여보려 한다

블로그를 한번 해보고 싶다는 생각을 정말 오래전부터 가지고 있었다.

조금만 더 배우고, 조금만 더 다듬고, 바쁜 시간들을 조금만 더 보내고..

완벽한 환경이 주어지기만을 기다리고 있으면 아무것도 할 수 없다. 바로 지금!