아이콘과 텍스트를 나란히 배치한 리스트는 웹에서 가장 흔한 UI 패턴 중 하나다. 혜택 목록, 기능 소개, 체크리스트처럼 작은 아이콘 옆에 한 줄짜리 라벨을 두는 구성은 어디서나 볼 수 있다. 그런데 이 단순해 보이는 패턴에는 실무에서 자주 놓치는 함정이 하나 숨어 있다. 텍스트가 한 줄일 때는 아이콘이 세로 중앙에 놓여 자연스럽지만, 화면 폭이 좁아지거나 라벨이 길어져 여러 줄로 줄바꿈되는 순간 여전히 중앙에 정렬된 아이콘이 어색하게 떠 보인다는 점이다. CSS 개발자 아마드 셰이드(Ahmad Shadeed)는 이 문제를 실제 프로젝트에서 마주친 뒤, HTML 구조에 따라 두 가지 접근을 정리해 공유했다.
중앙 정렬이 문제를 만드는 순간
가장 일반적인 구조는 아이콘과 콘텐츠를 담은 컨테이너를 flexbox로 묶고 align-items: center를 주는 방식이다. 한 줄일 때는 완벽하게 동작한다. 문제는 텍스트가 두 줄, 세 줄로 늘어날 때다. 중앙 정렬은 아이콘을 텍스트 블록 전체의 한가운데에 두기 때문에, 사람이 기대하는 '첫 줄과 나란히'라는 위치에서 벗어난다. 직관적으로는 center 대신 start를 쓰면 될 것 같지만, 여기서 더 큰 문제가 드러난다. 텍스트 요소는 line-height 때문에 글자 위아래로 눈에 보이지 않는 여백을 갖고 있고, align-items: start를 적용하면 아이콘이 이 여백을 포함한 컨테이너의 맨 위에 붙어 오히려 첫 줄 글자보다 위로 올라가 버린다.
값을 고정하지 않는 것이 핵심
해결의 방향은 아이콘을 아래로 살짝 밀어 첫 줄 글자와 나란히 맞추는 것이다. 문제는 얼마나 밀어야 하느냐다. 셰이드가 강조하는 지점이 바로 여기다. transform으로 몇 픽셀 같은 고정값을 주면 그 순간에는 맞아 보이지만, 아이콘 크기·글꼴 크기·컨테이너 폭 중 하나만 바뀌어도 즉시 어긋난다. 반응형 환경이나 사용자 글꼴 크기 조정을 고려하면 고정값은 거의 항상 깨진다는 뜻이다.
대신 그는 오프셋을 line-height 값과 이미 알고 있는 아이콘 크기에 상대적으로 계산하도록 만들었다. 이렇게 하면 세 가지 변수 중 무엇이 바뀌어도 정렬이 스스로 맞는다. 경우에 따라 오프셋이 음수가 되기도 하는데, 이는 아이콘이 글자 기준선보다 위로 조정되어야 하는 상황을 자연스럽게 흡수한다. 정렬을 '한 번 맞춰 두는 값'이 아니라 '주변 값에서 유도되는 관계'로 다루는 발상이 이 방법의 핵심이다.
아이콘이 HTML이 아니라 가상 요소일 때
실무에서는 아이콘을 별도의 HTML 요소로 넣지 않고 ::before 같은 가상 요소에 배경 이미지로 처리하는 경우도 많다. 마크업이 깔끔해지지만 이때는 별도의 함정들이 줄줄이 따라온다. 언뜻 괜찮아 보이다가도 글꼴 크기를 키우면 아이콘이 잘려 나가는데, 이는 background-size를 제한해야 하기 때문이다. 또 flex 아이템은 기본적으로 줄어들 수 있어서(flex-shrink), 글꼴이 커지면 아이콘 폭이 함께 쭈그러든다. 이를 막으려면 축소 동작을 명시적으로 꺼야 한다.
형태 문제도 있다. flex 컨테이너의 아이템은 기본적으로 세로로 늘어나는데, 아이콘이 늘어나지 않는 이유는 고정 높이를 줬기 때문이다. 그 결과 글꼴을 키우면 아이콘이 정사각형을 유지하지만, 줄이면 여백이 붙은 직사각형으로 변해 버린다. 셰이드는 aspect-ratio로 비율을 정사각형으로 강제해 이 문제를 해결한 뒤, HTML 아이콘에서 썼던 것과 동일한 상대적 오프셋 기법을 그대로 적용해 정렬을 마무리한다.
실무자가 가져갈 것
이 글의 가치는 특정 코드 조각보다 사고방식에 있다. 정렬 버그를 만났을 때 눈에 보이는 위치를 픽셀로 맞추려 들면 그 순간의 화면에서만 참인 해법이 나온다. 반면 line-height, 아이콘 크기, 종횡비처럼 레이아웃을 실제로 결정하는 값들 사이의 관계로 문제를 기술하면, 변수들이 바뀌어도 무너지지 않는 해법이 된다. 특히 사용자마다 글꼴 크기가 다르고 컨테이너 폭이 유동적인 요즘 웹에서는 '지금 화면에서 맞는 값'과 '어떤 조건에서도 맞는 규칙'의 차이가 곧 유지보수 비용의 차이로 이어진다.
한 가지 유의할 점은, 이 접근이 line-height 단위나 background-size, aspect-ratio 같은 비교적 최신 CSS 기능의 동작에 기대고 있다는 것이다. 따라서 지원 브라우저 범위와 실제 사용하는 아이콘 방식(HTML 요소인지 가상 요소인지)을 먼저 확인하고, 디자인 시스템 안에서 재사용 가능한 유틸리티로 정리해 두는 편이 현실적이다. 작아 보이는 정렬 하나지만, 규칙으로 풀어 두면 컴포넌트 전체의 일관성을 지키는 기반이 된다.