만들어 쓰는 블로그— with Vibe Coding
블로그를 조금 손봤다. 정확히는 조금은 아니지만 아마 티가 나는 부분은 조금일 것이다. 그리고 그동안은 거의 순정 휴먼 코딩에 가까운 코드베이스였지만 이제는 AI에게 많은 부분을 위임했다. AI의 빠른 생산성 덕분에 엄청나게 빠른 속도로 Feature 개발이 완료되었고, 반대로 이제 점점 내가 직접 코드를 수정하기는 힘들어졌다.
예전엔 내가 손을 대기 어려워 질 정도로 AI에게 코딩을 맡기는게 약간은 두려웠는데, 이젠 말귀를 너무 잘 알아들어서 딱히 그걸 두려워할 필요가 없어졌다. /clear 명령어와 /rewind 그리고 Github만 있으면 더더욱 두렵지가 않다.
사실 이런 블로그 포스팅은 어떤 의미있는 팁이라기 보다는 블로그 만들기 비하인드에 가까운 이야기들인데 개인적으로는 좋아하는 뮤지션의 곡 작업 비하인드 같은 이야기를 보거나 듣는 것을 즐기기 때문에 누군가 이런 이야기도 즐길 수 있지 않을까 하는 생각에 포스팅하는 글이다.
웹 푸시 알림을 추가했다.
지금 오른쪽 상단에 볼 수 있는 NOTIFY 버튼이 그 결과물이다.
새 글 알림을 원한다면 NOTIFY 버튼을 눌러주세요. 👀
사실 블로그를 만들고 나서 가장 난감했던게 새로운 업데이트가 있을 때 그나마 관심이 있는 사람들에게 알리는 것이었는데, 네이버 블로그처럼 회원 체계와 알림 시스템을 만드는 건 어림도 없고, 가장 보편적인 방식이 이메일 구독 알림을 추가하는 것인데 왜인지는 모르겠지만 이메일 알림 또한 나도 몇 번 받아보니 노이즈 같아서 결국 Unscribe하는 경우가 많았다. 하지만, 어쨋든 간에 아이폰이 출시된지 20년이 다 되어가는 마당에 방문자가 스스로 계속 업데이트가 있는지 없는지 확인해야하는 것은 너무 구리고 나도 업데이트를 할 때마다 인스타그램으로 스토리를 공유하거나 하는 것도 성가셔서, 결국 이메일 알림이라도 보내야겠다고 생각하고 몇 가지 시도를 해봤다.
하지만 이것 또한 가볍게 하자면 간단한 방법들이 있기는 했지만 제대로 하려니 꽤 성가신 작업이었다. 맘에 안들었던 점은 Google 개인 메일을 활용해서 알림을 보내는 방식이 가장 접근성이 높았지만 개인 메일로 사이트의 업데이트 알림을 보낸다는게 찝찝한게 있었고 그 외에 다른 이메일 발송 플랫폼들을 보았지만 그 형태나 서비스의 범위가 내가 하려는 목적에는 너무 과하게 느껴져서 몇 개를 둘러보다가 곧 그만두었다.
그러다 Gemini 랑 대화하다보니 웹 푸시 알림을 하는게 가장 간단하다고 하길래 혹해서 프로토타입을 만들게 했는데, 그냥 딸깍 한 번에 주요 기능 구현을 다 해버렸길래… 그제서야 좀 더 살펴보니 생각보다 나쁘지 않다는 생각과 또 생각만큼 나쁜 구석들이 있었다. 그럼에도 결국 웹 푸시 알림을 사용하기로 한 것은 번잡스러운 서비스를 또 연결할 필요가 없고 브라우저 네이티브 API 만으로 가능했기 때문이다.
그렇게 1차로 토글 버튼을 추가해 알림 구독/취소만 하는 기능을 만들어 배포했는데 개발 환경에서는 AI가 기능을 다 만들어서 체크를 못했는데, 배포하고 보니 모바일에는 구독 버튼이 안뜨는 게 아닌가! 첨엔 캐쉬 때문인 줄 알고 계속 새로고침을 했는데 알고보니 Apple 정책상 iOS는 웹에서 푸시 알림 구독 기능이 막혀있단다. 그렇구나, 앱 생태계 유지 때문에 웹 알림을 막았구나… 물론 가능한 방법이 있기는 했는데, 바로 “홈 화면에 추가”를 하면 푸시 알림을 사용할 수 있다는 것이었다. 가끔 애플의 멋진 모습들에 박수를 기꺼이 보내다가도 이런 짜치는… 정책은 정말 좀 꼴 보기가 싫어질 때가 있다. 그래서 현재 알림을 켜려면 사이트를 홈 화면에 추가 해서 실행한 뒤에 알림 받기를 해야만 iOS에서도 웹 푸시 알림을 받을 수 있다.
어쨋든 웹 푸시 알림을 추가하고 테스트 했고 피드백과 유즈케이스를 좀 더 쪼개어서 납득 가능한 문구가 되도록 하고 토스트 같은 모달을 만들어서 적용했다. 아마 이 블로그의 새 글을 기다리는 사람은 별로 많지는 않겠지만 불친절하고 긴 업데이트 주기에도 혹시 업데이트가 있는지 와주는 사람들에게는 조금이나마 도움이 되는 기능이기를…
Notion Callout Block을 갤러리로 활용하기
이전의 글에서도 밝힌 적이 있지만 이 블로그의 글쓰기 엔진은 Notion이다. 이제 이 블로그를 오픈한지 1년 정도 지난 시점에 Notion을 글쓰기 툴로 선택한 것은 꽤 만족스럽다. 물론 Notion이 제공하는 글쓰기 범위 내에서만 기능을 만들 수 있었기 때문에 필수 구현 기능이었던 이미지 갤러리는 약간의 꼼수를 썼다.
이 블로그에서 보이는 가로 또는 그리드 이미지 갤러리는 Notion의 Callout Block을 활용한다. 하지만 꼼수로 활용하기 나쁘지 않은 지점은, Callout에 이모지를 적용할 수 있어서 그것으로 무궁무진한 분기를 만들 수 있다는 점이다. 하하
현재 블로그의 갤러리 기능은 특정 이모지와 함께 Callout Block 안에 이미지를 넣어두면 갤러리가 삽입된다. 노션에서 보면 좀 지저분하지만 Preview 페이지를 만들어 두고 쓰고 있어서 위지윅처럼 아주 직관적이진 않지만 불편하지도 않다. Callout은 뭔가를 그루핑할 수 있는 좋은 꼼수가 된다. 그리고 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 숫자 이모지를 사용해서 1단에서 5단 그리드 갤러리까지 현재 적용할 수 있다.
Image Caption 활용하기
본문에 이미지를 삽입할 때 이미지를 원본사이즈로 보여주고 싶거나 가로를 가득채워 보여주고 싶은 두가지 케이스가 있는데, 원래는 Full로 보여주는 건 딱히 방법이 없어서 1단 그리드 갤러리로 적용했는데 너무 번잡스러워서 이미지 캡션에 특정 키워드를 써두면 적용되는 옵션을 추가했다. 그리고 몇 가지 옵션들을 더 추가했다.
[full] 캡션 앞에 쓰면 이미지를 Full Width로 적용한다.
[plain] 캡션 앞에 쓰면 이미지 뷰어를 적용하지 않는다.
[url] 이미지 캡션이 URL인 여부를 파악해서 URL인 경우 이미지 클릭시 해당 링크로 이동한다. youtube 링크인 경우에는 play 아이콘이 중앙에 뜬다.
Image Viewer 개선하기
이번 업데이트에서 가장 시간을 들인 부분은 이미지 뷰어인데, 원래 이미지 뷰어에 시간을 거의 쓰지 않고 기본 기능만 구현해둔 것에서 하는 김에 아니, AI에게 맡기는 김에 애초의 계획들을 모두 구현했다. 사실 별도의 이미지로 보여주는 것 보다는 이전 포스팅에서 직접 써보면 바로 알 수 있다.
드래그를 통한 가로 스크롤
원래는 Shift + Scroll 만 가능하거나 트랙패드를 이용해야 할 수 있던 가로 스크롤을 드래그할 수 있도록 했다.
Image Viewer적용 단위를 갤러리 별로 구분
원래는 페이지 전체 이미지가 하나의 Image Viewer로 들어가는 구조였는데 섹션이 구분되는 이미지가 쭉 보이는게 좀 어색하다는 생각이 들어서 갤러리 단위로 구분되도록 했다.
Prev, Next 마우스 네비게이션 지원
어쩌면 가장 불친절한 부분이었는데, 이제 이미지 좌우에 hover하면 arrow가 표시되고 왼쪽 오른쪽으로 클릭하여 이동할 수 있다.
클릭 하이라이트를 주어 좀 더 인지가 가능하도록 했다.
소소한 디테일로 첫, 마지막 이미지에서 작동하지 않는 방향의 인디케이터가 딤드된다.
Prev, Next 트랜지션 추가
이것도 띡- 바뀌는게 방향성이 없어서 어디로 가는지 헷갈리는 경우가 (나는) 있었어서 약간의 트랜지션을 추가했다. 개인적으로 좋아하는 Easing에 Duration이다. 약간 비법 소스 같은
Easing값을 밝히자면 cubic-bezier(0.16, 1, 0.3, 1) 인데 UI 인터랙션에서는 어지간하면 대체로 다 붙는다. expo에 가까운 값이기 때문에 duration을 일반적인 것보다 조금 늘려도 자연스럽다.
마치면서
그 외에는 거의 눈에 띄지 않는 튜닝들인데,..
새로운 게시물 마크 및 읽은 상태 스타일 튜닝
이전에 Circle 특수문자를 써서 컬러를 적용했는데, 어쩌다 안드로이드 폰을 봤더니 알 수 없는 이모지로 렌더링 되고 있길래 바로 수정했다.
읽은 상태의 스타일이 읽기 전과 큰 차이가 없어서 좀 더 차이를 주었다.
⌘ + shift + p 를 누르면 목록에서 글의 읽은 상태를 초기화 할 수 있다.
포스팅 및 업데이트 빌드 시간 단축
이전에 비효율적으로 글자 하나만 고쳐도 빌드가 새로 돌도록 되어있어서 최적의 관심사만 업데이트하도록 변경했다.
meta description 수정
이전에 부제목을 description으로 적용해두었어서 공유할 때 좀 민망한 구석들이 있길래 본문 내용의 일부를 사용하도록 변경
이미지 사이즈를 미리 적용하기
로딩 이미지 플레이스 홀더가 로딩 될 이미지의 사이즈를 모르는 상태였는데, 역시나 AI 천재님의 도움으로 이제는 로딩 전후 이미지의 플레이스 홀더 사이즈를 동일하게 유지해서 레이아웃 틀어짐이 없어졌다. 개인적으로는 매우 만족하는 업데이트.
그 외 나만 아는 정말 작고 소소한 업데이트 다수…
사실 블로그를 만들고 운영하는 건 Ex-Product Designer로서 약간의 자존심같은 건데, 블로그 플랫폼을 쓰면 전혀 고민할 것도 없는데 이렇게 시간을 들여서—물론 나 말고 AI가— 고쳐 쓰는게 맞나 싶지만, 마치 아파트 말고 내 집을 지어서 페인트 칠도 하고 수리도 하고 사는 로망처럼 좀 더 입맛대로 하려는 욕심때문이긴하다. 물론 그 로망 때문에 상하수도 가스 교통 상황 등 모든게 구린 땅 같은 느낌이긴 하지만.
그나저나 정말 하루가 다르게 발전하는 AI를 보면서 그리고 그것을 써보면서 정말 많은 생각이 드는데 이 정도의 흐름이면 특정 서비스 플랫폼이나 특정 도구 종속적이던 것에서 오히려 풀려날 것 같다는 생각이 드는게 예전에는 어떤 어플리케이션에 특정 기능이 추가되기를 기다리는 것도 있었고, 작은 기능 하나를 위해서 무거운 소프트웨어를 돌려야하는 상황들도 있었는데 이제는 어지간한건 개인 커스텀으로 만들어 쓰는게 오히려 비용 효율적인 시대가 될 것 같다는 생각이 든다. 3D 프린터의 출현으로 공산품의 미래가 위협받았던 것에 비해 이쪽이 훨씬 강력한 건 Digital에서는 재료의 가격 차이가 없다는데 있지 않을까. 최근 Google이 만들어 쓰는 위젯을 발표하는 것을 보면서 이 범위가 확장된다면 정말 놀랍겠다는 생각이 든다.
