포스트 메타데이터 이모지 제거

포스트 byline 에서 조회/공유/좋아요 메트릭을 나타내던 이모지를 모두 제거하는 작업을 했다.

이모지 정책, 왜 필요할까

개발 초기 단계에선 빠른 프로토타입과 시각적 임팩트를 위해 이모지를 적극 활용하곤 한다. 조회수는 👁️, 공유는 🔗, 좋아요는 ❤️ 식으로 표현하면 한눈에 직관적이고, 사용자도 금방 이해한다. 하지만 프로젝트가 성장하면서 UI 일관성, 접근성, 국제화라는 고려사항이 불거진다.

우리 팀이 "no-emoji rule" 을 수립한 건 여러 이유가 있다. 첫째는 렌더링 환경 차이다. 이모지는 브라우저, OS, 디바이스에 따라 모양이 달라진다. 어떤 환경에선 선명하게, 어떤 곳에선 흐릿하게, 때론 크기가 텍스트와 안 맞아 튈 수도 있다. 둘째는 스크린 리더 호환성이다. 스크린 리더가 이모지를 해석하는 방식은 불일치하고, 색각 이상이 있는 사용자에겐 같은 이모지가 다르게 인식될 수 있다. 셋째는 유지보수 맥락이다. 새 팀원이 합류했을 때 "왜 여기만 이모지고 저기는 아이콘인가?" 라는 질문이 자연스레 나온다. 정책이 명확하면 일관되게 구현할 수 있고, 코드 리뷰도 깔끔해진다.

작업 내용: Post.astro 정리

Post.astro 는 블로그 포스트 페이지의 메인 레이아웃 파일이다. byline 영역(포스트 제목 아래 메타정보 표시 부분)에서 view, share, like 메트릭을 표현하던 이모지들을 제거했다.

구체적으로는:

// Before
<div class="post-byline">
  👁️ {post.views} · 🔗 {post.shares} · ❤️ {post.likes}
</div>

// After
<div class="post-byline">
  <span class="metric metric-view">
    <svg class="icon icon-view">...</svg>
    {post.views}
  </span>
  <span class="metric metric-share">
    <svg class="icon icon-share">...</svg>
    {post.shares}
  </span>
  <span class="metric metric-like">
    <svg class="icon icon-like">...</svg>
    {post.likes}
  </span>
</div>

이렇게 하면 CSS 에서 아이콘 크기, 색상, 정렬을 통일적으로 관리할 수 있고, 다크 모드나 다양한 해상도에서도 일관된 모양을 유지한다. 스크린 리더도 aria-label 을 추가하면 명확하게 읽을 수 있다.

회고: 정책 준수와 코드 질감

이 작업은 단순 텍스트 치환이 아니라 팀 설계 정책의 실행이라고 본다. 한두 곳만 이모지를 쓰면 "어? 왜 여기만?" 하고 또 누군가 이모지를 추가할 기회가 생긴다. 결국 시간이 지나면 일관성이 흩어진다. 초기에라도 전체 codebase 를 한 번 정리해야 재발을 방지할 수 있다.

이런 정책 변경 작업을 할 때 내가 항상 고민하는 체크리스트:

• 완전성 검토: Post.astro 에만 이 패턴이 있나? 다른 컴포넌트(ArticleCard, AuthorBio 등)에도 이모지 메트릭이 남아 있진 않나? 사후에라도 grep 으로 주기적 점검이 필요하다.
• 점진적 롤아웃 vs 한 번에: 이 경우는 사용자 facing 변경이 미미해서 한 번에 merge 가능했다. 하지만 더 큰 UI 정책 변경이면 feature flag 나 A/B 테스트를 고려할 수 있다.
• 문서화: 팀 위키나 스타일 가이드에 "메트릭/라벨은 이모지 금지, SVG 아이콘 사용" 이라고 명시해두면 신규 피처 개발할 때 자연스레 따른다.

지금까지의 경험상, 이런 "조용한 정책 준수 작업" 들이 누적되면 UI 일관성이 한 단계 올라간다. 급진적 리팩토링보다는 매 커밋마다 한두 곳씩 정리하는 게 팀 에너지도 덜 들인다.

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

• 노트북 쿠팡에서 보기 →
• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →

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