블로그에서 AI 생성 그라디언트와 마케팅 문구를 걷어낸 이유

블로그 프론트엔드에서 AI 냄새 나는 그라디언트, 애니메이션, 마케팅 문구를 걷어냈다.

왜 이게 신경 쓰였나

요즘 AI가 뽑아주는 디자인에는 공통적인 패턴이 있다. linear-gradient(135deg, #667eea 0%, #764ba2 100%) 같은 보라-파랑 계열 그라디언트, 호버 시 scale + glow 동시에 터지는 애니메이션, 그리고 본문보다 긴 히어로 섹션 카피. 처음엔 "그냥 예쁘게 나왔네" 싶었는데, 며칠 지나서 다시 보니 내가 만든 느낌이 전혀 없었다.

팀에서 코드리뷰를 할 때 자주 하는 말이 있다. "이 코드가 우리 제품답냐". 기능이 돌아가는 것과, 그 코드/디자인이 우리 맥락에 맞는 것은 다른 문제다. 이번에 그 기준을 내 블로그에 그대로 적용한 셈이다.

건드린 파일들

변경 통계가 따로 없었지만, 파일 네 개를 동시에 건드렸다는 건 스타일 레이어가 컴포넌트 경계를 넘어 퍼져 있었다는 의미다. 한 군데 모여있지 않고 분산된 스타일 결정이 여러 파일에 걸쳐 있었던 것. 이게 실제로 리뷰하기도, 되돌리기도 번거로운 구조다.

어떻게 걷어냈나

그라디언트 쪽은 비교적 단순했다. 배경이나 border에 박혀 있는 gradient 속성을 단색으로 교체하거나 아예 제거했다.

/* before: AI가 얹어준 전형적인 패턴 */
.post-card:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgba(102, 126, 234, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* after: 그냥 읽히는 카드 */
.post-card:hover {
  background: var(--surface-hover);
  transform: translateY(-2px);
  transition: transform 0.15s ease;
}

애니메이션에서 all을 쓰는 건 성능 측면에서도 좋지 않다. 팀원들한테도 PR 리뷰할 때 자주 언급하는 포인트인데, transition 대상 속성은 명시적으로 지정하는 게 맞다. 이번에 내 코드에서 그걸 어기고 있었으니 솔직히 민망했다.

마케팅 카피 쪽은 조금 더 판단이 필요한 영역이었다. index.astro의 히어로 섹션에 AI가 생성해준 문구들이 있었는데, 읽다 보면 내가 쓴 말이 아니라는 게 바로 티가 난다. "경험을 공유합니다", "인사이트를 드립니다" 같은 류. 블로그는 결국 내가 쓴 글이 전부인데, 입구에서 그런 말이 앞서면 오히려 신뢰를 깎는다고 판단했다.

이런 작업의 우선순위

기능도 아니고, 버그 픽스도 아닌 스타일 정리. 일감 목록에서 이런 작업의 우선순위를 어떻게 매기냐는 팀마다 다르다. 나는 기술 부채와 같은 선상에 놓는 편이다. 코드 퀄리티가 쌓이면 나중에 건드리기 무서워지는 것처럼, 디자인/문구도 어색한 채로 쌓이면 나중에 "어디서부터 손대야 하지"가 된다.

특히 이런 류의 정리는 빨리 할수록 좋다. 패턴이 몇 군데 더 퍼지기 전에 기준을 잡는 것. 멘토링할 때도 자주 하는 말인데, 코드베이스의 "분위기"는 초반에 잡힌다. 한 번 어색한 패턴이 자리를 잡으면 다음 사람도 그걸 참고해서 비슷하게 쓴다.

이번 커밋은 기능적으로는 아무것도 바뀌지 않았다. 그런데 다시 열어봤을 때 "내가 만든 것 같다"는 느낌이 드는 건 이게 처음이었다. 그게 이 작업의 전부였다.

끝.

🛒 이 글과 어울리는 추천 상품

• 기계식키보드 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →
• 노이즈캔슬링헤드폰 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.