Ghost

[Ghost&GPT] 8. ChatGPT와 시작하는 블로그 생활

나용진

2024년 9월 4일 • 12 min read

OpenAI의 ChatGPT를 이용해 고스트 블로그의 테마를 수정하려고 합니다

지난 포스트에서 워시앤페이 사용기를 올렸습니다. 사진이 너무 많아서 고스트 블로그의 Gallery 카드를 처음 써보게 되었는데, 갤러리를 통해 사진을 올리게 되면 사진이 다음과 같이 보이게 된다는 걸 알게 되었습니다.

갤러리의 문제는 다음과 같았습니다.

사진의 크기에 맞추어 갤러리를 짜주는 건 좋은데 사진의 크기가 너무 다양하기 때문에 전체적인 비율이 엉망이 되었다.
사진을 순서대로 보여주고 싶은데 갤러리에서는 순서를 알 수 없다.
갤러리가 블로그의 main 크기가 아니라 wide 크기이기 때문에 TOC가 가려진다.

해당 문제를 해결하기 위해 저는 ChatGPT에게 물어보기로 했습니다.

ChatGPT에게 물어보기

ChatGPT가 언제 처음 출시되었는 지를 찾아보았는데 오픈 베타로서 사람들이 대중적으로 사용할 수 있게 된 게 2023년 5월 24일이군요. 대충 계산해봐도 1년 3개월 조금 넘었을 뿐인데, ChatGPT의 등장 이전의 세계와 이후의 세계가 많이 다른 거 같은 느낌이 들기도 합니다.

ChatGPT에게 일을 시키려면 '내가 무슨 일을 시키고 싶은가?'를 정확하게 이해하고 시켜야합니다. 대충 개같이 말해도 찰떡같이 알아듣는 그런 건 없어요. ~~여러분들의 직장상사가 여러분들에게 원하는 그런 거~~ 그렇기 때문에 우선 내가 뭘 시켜야할 지를 정해야합니다. 요구사항 정의라고 말하죠.

1. 요구사항을 정리해보자

일단 시작은 다음과 같았습니다. 지금같은 갤러리 방식은 싫어. 그럼 어쩌라고?

이미지의 크기가 들쭉날쭉하지 않고 비슷했으면 좋겠다.
순서대로 볼 수 있으면 좋겠다.
갤러리의 크기가 main을 벗어나면 안된다.

해당 내용을 정리하면 다음과 같겠군요.

💡

크기가 어느정도는 균일한 이미지를 순서대로 볼 수 있게 했으면 좋겠다. 해당 표시는 포스트 콘텐츠의 크기와 동일해야한다.

2. 요구사항 달성을 위한 기능 고민하기

요구사항을 정리하면 다음 할 일은 해당 요구사항을 달성할 기능을 고민해보는 일입니다. 요구사항에 대해 하나하나 고민해보죠.

이미지의 크기가 들쭉날쭉하지 않고 비슷했으면 좋겠다.
→ 해당 방법은 코딩없이도 해결할 수 있긴 합니다. 이미지를 모두 동일한 사이즈로 바꿔주기만 하면 되거든요. 세로 사진의 경우 좌우로 백색 여백을 두면 됩니다.
→ 그렇지만 제가 일일히 이미지를 변경하고 하기는 귀찮은 일이기도 합니다. 일단은 기능으로 구현해보죠.
순서대로 볼 수 있으면 좋겠다.
→ 갤러리는 3*3 열로 전시가 됩니다. 가로로 쭉 나열되는 게 더 낫지 않을까 생각합니다.
갤러리의 크기가 main을 벗어나면 안된다.
→ main 영역은 720px입니다.

그렇다면 기능으로는 이렇게 될 거 같아요.

💡

main 영역을 벗어나지 않도록 720px 크기 내로 이미지 크기를 맞추고 해당 이미지들이 가로로 쭉 나열되면 좋겠다. 나열된 이미지는 슬라이딩으로 할까?

해당 기능을 어떤 방식으로 구현하든 그건 서비스를 기획하는 사람의 마음입니다. 하지만 어떤 방식으로 개발하느냐에 따라 개발에 들어가는 시간이 차이가 나며, 개발에 들어가는 시간은 IT 쪽에서는 제일 중요한 부분입니다. 제일 병목^Bottleneck인 구간이거든요. 그렇기 때문에 어느정도 타협하는 것도 방법입니다. 이건 나중에 또 말할 기회가 있겠죠.

3. 정리한 내용을 가지고 ChatGPT에게 시키기

내용을 정리하였으니 ChatGPT에게 물어봅시다. 우선 이미지를 스와이프^{Swipe, 좌우로 움직이는 동작}할 수 있는 방법을 물어보죠.

음... Swiper를 사용해라... 한번 찾아보죠.

찾아보니 대충 웹 페이지에서 다양한 스와이프 UI를 만들 수 있는 JavaScript 라이브러리군요. 적용하는 방법을 알려달라고 해봅시다.

그랭... 일단 라이브러리 추가를 위한 복사+붙여넣기는 했고... 근데 content.hbs 파일이 없는디...?

이쉬... ChatGPT의 단점이 이런 겁니다. Casper 테마의 구조가 한번 바뀐 걸 모르고 계속 이전 구조로만 말해주네요. 다시 물어물어 찾아보지만 갤러리의 카드 구조에 대해서는 찾을 수가 없군요. 왜 일까요?

으으음... 그러니깐 굳이 Card 정보를 찾을 필요 없이(어차피 찾을 수도 없으니) 갤러리가 랜더링될 때 그 부분만 바꿔주면 된다는 뜻 같군요. 그렇다면 웹 페이지 상에서 갤러리가 어떤 코드로 구현되어 있나 확인해보았습니다. 다행이도 그건 금방 찾았습니다.

<figure class="kg-card kg-callery-card kg-width-wide">
  <div class="kg-gallery-container">
  ...

찾은 내용은 얼른 ChatGPT에게 일러주도록 합니다.

넣으라는 코드는 다음과 같았습니다.

new Swiper(galleryContainer, {
  // 기타 옵션
  navigation: {
    nextEl: galleryContainer.querySelector('.swiper-button-next'),
    prevEl: galleryContainer.querySelector('.swiper-button-prev'),
  },
  pagination: {
    el: galleryContainer.querySelector('.swiper-pagination'),
    clickable: true,
  },
  // Swiper 초기화 후에 네비게이션 및 페이지네이션 스타일을 수동으로 설정하는 경우 주의
  on: {
    init: function() {
      // 필요 시 초기화 후 스타일 적용 코드 추가 가능
    }
  }
});

/* Swiper 컨테이너 크기 조정 */
.kg-gallery-container {
  width: 720px;  /* 너비를 720px로 고정 */
  max-width: 100%; /* 최대 너비를 100%로 설정하여 반응형 유지 */
  height: auto; /* 높이를 자동으로 설정 */
  max-height: 480px; /* 최대 높이를 480px로 설정 */
  margin: 0 auto; /* 가운데 정렬 */
  position: relative; /* 네비게이션 및 페이지네이션을 절대 위치로 설정하기 위해 필요 */
  overflow: hidden; /* 슬라이드되지 않은 이미지를 숨기기 위한 설정 */
  display: flex; /* 슬라이드 컨테이너를 유연하게 만들기 위해 플렉스박스를 사용 */
  align-items: center; /* 슬라이드를 수직 중앙 정렬 */
  justify-content: center; /* 슬라이드를 수평 중앙 정렬 */
}

/* Swiper 슬라이드 안의 이미지 크기 조정 */
.swiper-slide img {
  max-width: 100%; /* 이미지의 최대 너비를 100%로 설정하여 컨테이너에 맞추기 */
  max-height: 100%; /* 이미지의 최대 높이를 100%로 설정하여 컨테이너에 맞추기 */
  width: auto; /* 이미지의 너비를 자동으로 설정하여 비율 유지 */
  height: auto; /* 이미지의 높이를 자동으로 설정하여 비율 유지 */
  display: block; /* 이미지가 중앙에 정렬되도록 설정 */
  object-fit: contain; /* 이미지 비율을 유지하면서 컨테이너에 맞추기 */
}

/* 네비게이션 버튼 스타일 및 위치 */
.swiper-button-next,
.swiper-button-prev {
  color: #000 !important; /* 화살표 색상을 검정으로 강제 적용 */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; /* 화살표 크기 */
  height: 30px; /* 화살표 크기 */
  z-index: 10; /* 다른 요소 위에 오도록 설정 */
}

.swiper-button-next {
  right: 10px; /* 오른쪽 위치 조정 */
}

.swiper-button-prev {
  left: 10px; /* 왼쪽 위치 조정 */
}

/* 페이지네이션 위치 및 스타일 조정 */
.swiper-pagination {
  bottom: 10px; /* 페이지네이션을 이미지 아래로 이동 */
  text-align: center; /* 중앙 정렬 */
  position: absolute;
  width: 100%;
  z-index: 10;
}

.swiper-pagination-bullet {
  background-color: #000 !important; /* 페이지네이션 색상을 검정으로 강제 적용 */
}

해당 코드들을 각각 default.hbs와 screen.css에 쑤셔넣었으니 한번 잘 되나보죠.

이런 느낌이 아닌데... 이미지의 가운데 정렬을 추가해달라고 합니다.

답변이 왔습니다. 한번 다음 코드로 수정해본 뒤에 확인해보죠.

/* Swiper 컨테이너 크기 조정 */
.kg-gallery-container {
  width: 720px;  /* 너비를 720px로 고정 */
  max-width: 100%; /* 최대 너비를 100%로 설정하여 반응형 유지 */
  height: 500px; /* 높이를 500px로 설정 */
  margin: 0 auto; /* 가운데 정렬 */
  position: relative; /* 네비게이션 및 페이지네이션을 절대 위치로 설정하기 위해 필요 */
  overflow: hidden; /* 슬라이드되지 않은 이미지를 숨기기 위한 설정 */
  display: flex; /* 슬라이드 컨테이너를 유연하게 만들기 위해 플렉스박스를 사용 */
  align-items: center; /* 슬라이드를 수직 중앙 정렬 */
  justify-content: center; /* 슬라이드를 수평 중앙 정렬 */
  box-sizing: border-box; /* 패딩을 포함한 크기를 설정 */
}

/* Swiper 슬라이드 스타일 */
.swiper-slide {
  display: flex; /* 플렉스박스를 사용하여 이미지 중앙 정렬 */
  justify-content: center; /* 수평 중앙 정렬 */
  align-items: center; /* 수직 중앙 정렬 */
}

/* Swiper 슬라이드 안의 이미지 크기 조정 */
.swiper-slide img {
  max-width: 100%; /* 이미지의 최대 너비를 100%로 설정하여 컨테이너에 맞추기 */
  max-height: 480px; /* 이미지의 최대 높이를 480px로 설정 */
  width: auto; /* 이미지의 너비를 자동으로 설정하여 비율 유지 */
  height: auto; /* 이미지의 높이를 자동으로 설정하여 비율 유지 */
  display: block; /* 이미지가 중앙에 정렬되도록 설정 */
  object-fit: contain; /* 이미지 비율을 유지하면서 컨테이너에 맞추기 */
  margin: auto; /* 이미지가 중앙에 위치하도록 설정 */
}

/* 라이트 모드 스타일 설정 */
@media (prefers-color-scheme: light) {
  .swiper-button-next,
  .swiper-button-prev {
    color: #000 !important; /* 라이트 모드일 때 화살표 색상을 검정으로 설정 */
    position: absolute;
    top: 50%; /* 이미지의 중간에 위치 */
    transform: translateY(-50%); /* 수직 중앙 정렬 */
    width: 30px; /* 화살표 크기 */
    height: 30px; /* 화살표 크기 */
    z-index: 10; /* 다른 요소 위에 오도록 설정 */
    cursor: pointer; /* 커서를 포인터로 설정 */
  }

  .swiper-button-next {
    right: -40px; /* 오른쪽 이미지 밖으로 위치 조정 */
  }

  .swiper-button-prev {
    left: -40px; /* 왼쪽 이미지 밖으로 위치 조정 */
  }

  .swiper-pagination-bullet {
    background-color: #000 !important; /* 라이트 모드일 때 페이지네이션 색상을 검정으로 설정 */
  }
}

/* 다크 모드 스타일 설정 */
@media (prefers-color-scheme: dark) {
  .swiper-button-next,
  .swiper-button-prev {
    color: #fff !important; /* 다크 모드일 때 화살표 색상을 흰색으로 설정 */
    position: absolute;
    top: 50%; /* 이미지의 중간에 위치 */
    transform: translateY(-50%); /* 수직 중앙 정렬 */
    width: 30px; /* 화살표 크기 */
    height: 30px; /* 화살표 크기 */
    z-index: 10; /* 다른 요소 위에 오도록 설정 */
    cursor: pointer; /* 커서를 포인터로 설정 */
  }

  .swiper-button-next {
    right: -40px; /* 오른쪽 이미지 밖으로 위치 조정 */
  }

  .swiper-button-prev {
    left: -40px; /* 왼쪽 이미지 밖으로 위치 조정 */
  }

  .swiper-pagination-bullet {
    background-color: #fff !important; /* 다크 모드일 때 페이지네이션 색상을 흰색으로 설정 */
  }
}

/* 페이지네이션 위치 조정 (공통 스타일) */
.swiper-pagination {
  bottom: 10px; /* 페이지네이션을 컨테이너의 아래쪽에 위치 */
  text-align: center; /* 중앙 정렬 */
  position: absolute;
  width: 100%;
  z-index: 10;
}

완성! 이렇게 제 블로그에 갤러리를 이미지 스와이프가 되는 방향으로 변경하였습니다. 이런 방식으로 현재 블로그 테마의 개조를 진행하고 있으니 참고해주시면 될 거 같네요.