FontAwesome 6.7.2 → 7.2.0 업그레이드 체크리스트

FontAwesome 7.x가 나온 지 좀 됐는데 미루던 업그레이드를 정리했습니다. 메이저 버전이라 깨질 가능성이 있어 부담스러웠는데, 막상 해보니 큰 사고는 없었지만 잔잔히 체크할 게 몇 가지 있었어요. 기록 차원으로 남깁니다.

1. 왜 7.x로 올리는가

6.x 라인은 더 이상 새 아이콘이 추가되지 않고 7.x에 신규 아이콘과 스타일 변형이 몰리고 있었습니다. 디자인 팀에서 7.x에 추가된 일부 아이콘을 쓰고 싶다는 요청이 들어왔고, 이참에 라이브러리 자체를 올리기로 했어요.

부가 동기:

• CSS 트리쉐이킹이 7.x에서 더 잘 동작 (사용하지 않는 아이콘 비중 줄어듦)
• 6.x EoL은 아직 멀지만 마이그레이션 비용을 미루면 더 커질 가능성

2. 업그레이드 전 체크리스트

다음 항목을 미리 정리했습니다.

마지막 항목이 가장 위험합니다. 의사 클래스에서 content: "\f007" 같은 식으로 아이콘 유니코드를 직접 박아 쓴 코드는 7.x에서 코드포인트가 바뀌면 침묵 깨짐(silent break)이 됩니다.

3. 실제로 깨졌던 부분

업그레이드 후 문제가 생긴 위치들:

3.1 fa-user-edit → fa-user-pen

6.x에서 alias로 동작하던 일부 아이콘이 7.x에서 표시 안 됐습니다. 7.x는 더 엄격해서 deprecated alias를 더 이상 받아주지 않는 경향이었어요.

<!-- 변경 전 -->
<i class="fas fa-user-edit"></i>

<!-- 변경 후 -->
<i class="fas fa-user-pen"></i>

3.2 fa-thumbs-o-up 류 outline 아이콘

-o- suffix로 outline을 표시하던 옛 명명 규칙이 완전히 빠졌습니다. far 스타일 prefix로 옮겨야 했어요.

<!-- 변경 전 -->
<i class="fa fa-thumbs-o-up"></i>

<!-- 변경 후 -->
<i class="far fa-thumbs-up"></i>

3.3 커스텀 CSS의 유니코드 직접 참조

pagination, breadcrumb 등 일부 컴포넌트에서 ::after { content: "\f054" } 식으로 chevron 아이콘 유니코드를 직접 쓰던 코드가 있었습니다. 7.x에서 일부 코드포인트가 재배치돼서 다른 아이콘이 표시되는 침묵 깨짐이 발생.

방어 방법은 두 가지였고, 둘 다 적용했습니다:

/* 변경 전 — 깨지기 쉬움 */
.breadcrumb-item::after {
  font-family: "Font Awesome 6 Free";
  content: "\f054";
}

/* 변경 후 — 명시적 버전 & 클래스 이름 사용 */
.breadcrumb-item::after {
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  content: "\f054";  /* 그래도 코드포인트 검증 필요 */
}

가능하면 아예 <i class="fas fa-chevron-right"></i> 같은 마크업으로 빼고, CSS pseudo-element에 의존하지 않는 게 장기적으로 더 안전합니다.

4. 업그레이드 후 회귀 점검

마지막에 빠진 곳이 항상 나오는 게 신기한데, 이번엔 *"고객지원 페이지의 카테고리 칩"*에 깨진 아이콘 하나가 있었어요. 자주 안 들어가는 페이지였습니다.

5. 정리

체감으로는 메이저 업그레이드치고 비교적 무사히 끝났습니다. 정리해두면:

• 인벤토리부터 — 어디서 뭘 쓰는지 모르고 시작하면 회귀 점검을 할 기준이 없습니다.
• CSS의 유니코드 직접 참조가 가장 위험. 가능하면 마크업으로 옮기기.
• deprecated alias는 다음 메이저 때 사라진다고 가정하고 잘 알려진 이름으로 미리 옮겨두기.
• 회귀 점검은 "자주 안 들어가는 페이지"가 가장 늦게 발견됩니다. 의식적으로 끝까지 훑기.

다음 메이저(8.x?)가 나올 즈음에는 이번 글이 단서가 되어 더 빠르게 끝낼 수 있기를 기대합니다.