Behind the Blog— and Vibe Coding
블로그를 조금 손봤다. 정확히는 조금은 아니지만 아마 티가 나는 부분은 조금일 것이다. 그리고 그동안은 거의 순정 휴먼 코딩에 가까운 코드베이스였지만 이제는 AI에게 많은 부분을 위임했다. AI의 빠른 생산성 덕분에 엄청나게 빠른 속도로 Feature 개발이 완료되었고, 반대로 이제 점점 내가 직접 코드를 수정하기는 힘들어졌다.
예전엔 내가 손을 대기 어려워 질 정도로 AI에게 코딩을 맡기는게 약간은 두려웠는데, 이젠 말귀를 너무 잘 알아들어서 딱히 그걸 두려워할 필요가 없어졌다. /clear 명령어와 /rewind 그리고 Github만 있으면 더더욱 두렵지가 않다.
사실 이런 블로그 포스팅은 어떤 의미있는 팁이라기 보다는 블로그 만들기 비하인드에 가까운 이야기들인데 개인적으로는 좋아하는 뮤지션의 곡 작업 비하인드 같은 이야기를 보거나 듣는 것을 즐기기 때문에 누군가 이런 이야기도 즐길 수 있지 않을까 하는 생각에 포스팅하는 글이다.
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 특수문자를 써서 컬러를 적용했는데, 어쩌다 안드로이드 폰을 봤더니 알 수 없는 이모지로 렌더링 되고 있길래 바로 수정했다.
읽은 상태의 스타일이 읽기 전과 큰 차이가 없어서 좀 더 차이를 주었다.
참고로 meta + shift + p 를 누르면 목록에서 글의 읽은 상태를 초기화 할 수 있다.
포스팅 및 업데이트 빌드 시간 단축
이전에 비효율적으로 글자 하나만 고쳐도 빌드가 새로 돌도록 되어있어서 최적의 관심사만 업데이트하도록 변경했다.
meta description 수정
이전에 부제목을 description으로 적용해두었어서 공유할 때 좀 민망한 구석들이 있길래 본문 내용의 일부를 사용하도록 변경
이미지 사이즈를 미리 적용하기
로딩 이미지 플레이스 홀더가 로딩 될 이미지의 사이즈를 모르는 상태였는데, 역시나 AI 천재님의 도움으로 이제는 로딩 전후 이미지의 플레이스 홀더 사이즈를 동일하게 유지해서 레이아웃 틀어짐이 없어졌다. 개인적으로는 매우 만족하는 업데이트.
그 외 나만 아는 정말 작고 소소한 업데이트 다수…
사실 블로그를 만들고 운영하는 건 Ex-Product Designer로서 약간의 자존심같은 건데, 블로그 플랫폼을 쓰면 전혀 고민할 것도 없는데 이렇게 시간을 들여서—물론 나 말고 AI가— 고쳐 쓰는게 맞나 싶지만, 마치 아파트 말고 내 집을 지어서 페인트 칠도 하고 수리도 하고 사는 로망처럼 좀 더 입맛대로 하려는 욕심때문이긴하다. 물론 그 로망 때문에 상하수도 가스 교통 상황 등 모든게 구린 땅 같은 느낌이긴 하지만.
그나저나 정말 하루가 다르게 발전하는 AI를 보면서 그리고 그것을 써보면서 정말 많은 생각이 드는데 이 정도의 흐름이면 특정 서비스 플랫폼이나 특정 도구 종속적이던 것에서 오히려 풀려날 것 같다는 생각이 드는게 예전에는 어떤 어플리케이션에 특정 기능이 추가되기를 기다리는 것도 있었고, 작은 기능 하나를 위해서 무거운 소프트웨어를 돌려야하는 상황들도 있었는데 이제는 어지간한건 개인 커스텀으로 만들어 쓰는게 오히려 비용 효율적인 시대가 될 것 같다는 생각이 든다. 3D 프린터의 출현으로 공산품의 미래가 위협받았던 것에 비해 이쪽이 훨씬 강력한 건 Digital에서는 재료의 가격 차이가 없다는데 있지 않을까. 최근 Google이 만들어 쓰는 위젯을 발표하는 것을 보면서 이 범위가 확장된다면 정말 놀랍겠다는 생각이 든다.
