최근에 내가 구현했던 흔하지 않았던 UI들 모음

프론트엔드 개발자로 일하다 보면 디자이너가 제안한 UI를 구현하는 과정에서 표준 패턴만으로는 해결하기 어려운 상황을 종종 마주치게 된다. 이런 사례들을 해결하다 보면 역시 css 세계는 드넓구나 하는 생각이 들고 css의 가능성에 대해서 더 시야가 트이는 것 같다. 그리고 거기서 찾아오는 성취감은 덤이다. 사례가 아직 많진 않지만 마주할 때마다 이것도 모아두면 유용한 참고자료가 되지 않을까 싶어서 적어보고 계속해서 업데이트 해보려고 한다.

1. 중간에 있는 텍스트 truncate(ellipsis)하기

보통 truncate는 이렇게 텍스트 전체에 적용하거나 끝 부분에 적용한다. 그리고 이런 효과를 주기 위해서 다음 속성들을 활용한다.

1. overflow: hidden으로 컨테이너를 벗어나는 텍스트를 숨긴다.
2. text-overflow: ellipsis로 숨겨진 텍스트 대신 말줄임표를 표시한다.

하지만 중간 텍스트에 truncate를 적용해야 하는 경우가 생겼다. 처음엔 어떻게 구현하지 싶었는데 같은 원리를 적용하니까 수월하게 풀렸다. 적용할 텍스트를 inline-block으로 만들었고 텍스트 정렬이 틀어지기 때문에 vertical-align을 bottom으로 바꿨다.(이렇게 처리하는 이유) 그 다음엔 똑같이 width 제한을 주고 text-overflow 등을 조절했다.

이 방식의 핵심은 텍스트를 블록 요소처럼 다루면서도 인라인 흐름을 유지하는 것이다. inline-block은 요소가 인라인 요소처럼 텍스트 흐름 내에 배치되면서도 블록 요소처럼 너비와 높이를 가질 수 있게 해준다. 이를 통해 텍스트의 특정 부분만 제한된 너비를 갖도록 만들 수 있다.

실제 사용 사례와 고려사항

이 패턴은 사용자 프로필이나 댓글 시스템에서 특히 유용하다. 예를 들어, “홍길동님이 댓글을 남겼습니다”와 같은 알림에서 사용자 이름이 너무 길 경우 중간 부분을 생략하면서도 문장의 흐름을 유지할 수 있다. 또한 이메일 주소를 표시할 때 도메인 부분은 항상 보여주면서 사용자 이름 부분만 truncate하는 경우에도 활용할 수 있다.

.nickname {
  max-width: 100px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

2. Grid 열의 높이를 자식 중 가장 높은 요소에 맞추기

보통의 경우에는 grid를 사용할 때 자식 요소들 크기가 일정해서 높이에 대해 신경 쓸 일이 별로 없었는데 특정 케이스에서 높이가 더 긴 자식 요소가 있었고 그 행의 높이를 가장 높은 자식의 높이에 맞춰야했다. 이럴 때 grid-auto-rows의 minmax를 활용했다.

minmax 함수는 CSS Grid의 강력한 기능 중 하나로, 첫 번째 인자는 최소값, 두 번째 인자는 최대값을 의미한다. 최소 높이를 요구사항에 맞게 정하고 auto 값을 최대값으로 사용하면 콘텐츠에 따라 자동으로 크기가 조정된다. 이를 통해 콘텐츠의 양이 적을 때는 최소 높이를 유지하고, 콘텐츠가 많을 때는 자동으로 확장되는 유연한 레이아웃을 만들 수 있다. 아래 예시에서는 grid-auto-rows: minmax(200px, auto);로 스타일을 설정했다.

브라우저 호환성

grid-auto-rows 속성은 2017년 업데이트 버전 이후 버전에서는 대부분 작동한다. Firefox for Android 브라우저의 경우에는 79버전(Released 2020-07-28) 이후 버전에서 정상 작동한다.

mdn 링크