블로그 작업노트 21: 광고 영역 이미지 배너 추가

26 views as of January 24, 2025.

광고영역 배너 이미지 등록
동영상 움짤 생성 제한
SEO 용 타임 태그 추가
이미지 오버 효과 추가

뭐 이제 어느정도 손도 다대서 마이너한 수정정도만이 작업노트의 내용이긴한데, 기록은 있어야 할거같아서 추가로 남기기로 했다.

광고영역 배너 이미지 등록

내 블로그 사이트는 광고를 결국 애드센스만 남겨두었다.

PC뷰에서는 컨텐츠 상단에 728x90 사이즈의 가로 배너가 있고 오른쪽 사이드 영역에 300x600짜리 광고를 넣었다.

모바일에서는 컨텐츠 상단에 반응형 크기로 광고가 하나 배치되어있다.

근데 문제가 애드센스가 매번 광고를 주진 않는다는거다.

필연적으로 일부 페이지에는 해당 광고 영역이 텅 비어있는데, 기존에 PC뷰에서 이를 메꾸기 위해서 사이드바 광고영역은 광고가 로딩이 안될때를 대비해서 내 블로그의 애니리뷰글을 보여주는 배너를 뒤에 제작해 동시에 띄워두는 방식으로 컨텐츠를 채웠다.

근데 문제는 상단 배너였다.

728x90 픽셀의 작은 영역은 뭐 컨텐츠를 배치하기도 뭐하고 무시하기도 애매한 여백이어서 이 부분을 어떻게 할까 계속 고민하다가 그냥 적당히 이미지 배너나 넣자라는 생각이들어 아래와 같이 보이게 처리했다.

그냥 이미지만 있으면 너무 심심해서 숨쉬는듯한 표현을 하기위해 투명도를 아래 애니메이션 수치대로 보이도록 추가했는데, 딱히 눈에 띄지는 않았다.

&::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-image: url(/bg-ad-728.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: 0;
    animation: breathing 5s infinite alternate ease-in-out;
}

@keyframes breathing {
    0% {
        opacity: 0.9;
    }
    20% {
        opacity: 0.65;
    }
    40% {
        opacity: 0.95;
    }
    60% {
        opacity: 0.7;
    }
    80% {
        opacity: 0.85;
    }
    100% {
        opacity: 1;
    }
}Copy

모바일뷰에서도 마찬가지로 적당한 이미지를 아래와 같이 채워놓았다.

가장좋은거는 저기도 적당한 컨텐츠영역으로 쓰는거긴하겠다만, 지금상황에선 뭘 더 해야할지 몰라서 일단 방치상태이다.

아마 나중에 뭘 더한다면 저 영역에 커서를 가져다대거나 링크를 주어 뭔가를 보여주거나 이동하게하는 그런정도아닐까 싶긴한데, 딱히 그런 기믹이 있다한들 나나 쓰지 방문자들은 신경도 안쓸거같긴하다.

동영상 움짤 생성 제한

두번째로는 밖으로 드러나지 않는 변경점인데, 나는 에디터로 올린 파일을 따로 관리하기 위한 페이지를 만들어둔게 있다.

대충 이런느낌의 관리 페이지인데, 가끔 움짤을 올리기위해서 영상을 따고 그걸 업로드할때 이미지로써 영상을 관리하기위해 동영상을 gif 움짤로 변화하는 코드를 백단에 만들어서 쓰고있다.

근데이게 배보다 배꼽이 크다고, 동영상의 길이가 길면길수록 gif 파일이 기하급수적으로 커지는 문제가 있었다.

동영상 파일은 최적화되어 꼴랑 3MB인데 정작 그걸관리하기위한 섬네일용 gif파일이 8MB인 웃긴상황말이다.

일반적으로 gif는 프레임을 전부 저장하다보니 프레임의 변화가많으면 용량이 그대로 수직상승하므로 이 부분에 대해서 어떻게 할까 고민하다가, 어차피 영상파일은 움짤을 표면적으로 제공하는게 아니기때문에 동영상->gif할때 앞 3초만 짤라서 움짤로 만드는 방식을 취해보았다.

$uploadPath = 'editor';
$tempPath = $file->getPathname();

// 랜덤한 파일명 생성 (hashName 방식)
$randomFileName = Str::random(40);
$mp4FilePath = sys_get_temp_dir() . '/' . $randomFileName . '.mp4';
$gifFilePath = sys_get_temp_dir() . '/' . $randomFileName . '.gif';

// Step 1: 섬네일(GIF) 생성
$palettePath = sys_get_temp_dir() . '/palette.png';
$gifDuration = 3; // GIF 변환 시 제한할 영상 길이 (초)
// 팔레트 생성 명령어 (입력 파일 앞에 -ss와 -t 추가)
$paletteCommand = "ffmpeg -ss 0 -t " . escapeshellarg($gifDuration) . " -i " . escapeshellarg($tempPath) .
    " -vf \"fps=15,scale=320:-1:flags=lanczos,palettegen\" -y " .
    escapeshellarg($palettePath);
exec($paletteCommand, $paletteOutput, $paletteReturnCode);

if ($paletteReturnCode !== 0 || !file_exists($palettePath)) {
    return response()->json(['error' => 'Palette generation failed.'], 500);
}

// GIF 생성 명령어 (입력 파일 앞에 -ss와 -t 추가)
$gifCommand = "ffmpeg -ss 0 -t " . escapeshellarg($gifDuration) . " -i " . escapeshellarg($tempPath) .
    " -i " . escapeshellarg($palettePath) .
    " -lavfi \"fps=15,scale=320:-1:flags=lanczos [x]; [x][1:v] paletteuse\" -y " .
    escapeshellarg($gifFilePath);
exec($gifCommand, $gifOutput, $gifReturnCode);

// 결과 확인
if ($gifReturnCode !== 0 || !file_exists($gifFilePath)) {
    return response()->json(['error' => 'Thumbnail creation failed.'], 500);
}
// 임시 파일 삭제
@unlink($palettePath);Copy

근데 이게 생각보다 잘먹혔다.

이렇게 영상의 일부분만 잘라서 gif로 변환하니 절대적인 프레임 개수가 작아지고 그만큼 gif 변환사이즈가 줄어들었다.

원래 8MB하던 움짤은 3초만 생성하니 0.3MB가가 되더라...

물론 해당움짤은 모든 내용을 보여주지 않으니 보여주기용도로는 쓸모가 없긴하다만, 관리용 섬네일로써는 최적이라고 생각한다.

SEO 용 타임 태그 추가

어쩌다가 구글에서 검색을 통해 내 사이트 글을 보게되었는데, 다른 글들과 다르게 날짜표기가 없었다.

이상하다 생각했는데, 내가 예전에 리뉴얼을할때 날짜표기를 "40 views as of January 16, 2025." 이런식으로 뷰 카운트와 짬뽕해서 쓰다보니까 생기는 문제같았다.

관련내용찾아보니 적당히 본문내에 타임 태그를 달아두던가 메타태그 오픈그래프에 날짜 추가하면된다고하길래, 오픈그래프 날짜까진 오바같고 타임 태그만 아래와 같이 추가했다.

<div class="txt_date">
    {{ number_format($post->hit) }} views as of <time datetime="{{ $post->getDate('created_at') }}" style="margin-left: 0.25rem">{{ $post->getDate('created_at', 'F j, Y') }}</time>.
</div>Copy

뭐 이제 크롤링되기만 기다려보는수밖에~