포트폴리오 이름 초협폭에서 단어 줄바꿈되던 버그 수정

포트폴리오 hero 섹션에서 이름이 초협폭(380px 이하) 화면에서 단어 중간에 깨지는 버그를 고쳤다. 모바일 반응형 디자인에서 자주 마주치는 typography 문제인데, 폰트 축소와 CSS word-break: keep-all 조합으로 해결했다.

문제 발견: 작은 화면에서 이름이 산산이

포트폴리오를 여러 기기 사이즈에서 테스트하던 중 아주 작은 화면에서 문제를 찾았다. 380px 정도(구형 스마트폰이나 태블릿 가로 모드)에서 hero 섹션의 이름이 제대로 표시되지 않았다. 큰 화면에서는 잘 보이던 이름이 '홍' '길' '동' 같은 식으로 글자 단위로 분리되면서 의미가 전달되지 않는 상태였다.

단순한 화면 깨짐처럼 보일 수 있지만, 포트폴리오의 첫 화면에 있는 가장 중요한 요소가 손상된 것이다. 특히 한국어 이름의 경우 한 글자씩 끊어지면 가독성은 물론 심미적으로도 좋지 않다.

왜 이런 일이 생기나: CSS의 word-break 기본 동작

웹에서 텍스트 줄바꿈이 어떻게 일어나는지 이해하는 게 핵심이다. 기본적으로 대부분의 브라우저는 공백이나 하이픈 같은 명시적인 break point에서만 줄바꿈을 시도한다. 하지만 컨테이너 폭이 매우 좁으면 상황이 달라진다.

380px라는 협소한 폭에 48px 크기의 폰트로 이름을 표시하려면, 한두 글자만으로도 거의 전체 폭을 차지하게 된다. 이때 CSS의 기본 word-break 값이 사실상 한 글자씩 끊어내는 것처럼 동작하게 되는 것이다. 컨테이너에 공간이 부족하니 브라우저는 "한 글자라도 다음 줄로 넘기자"는 식의 강제 동작을 한다.

해결책: 폰트 축소 + CSS keep-all 조합

두 가지 조치를 함께 적용했다:

1. 미디어 쿼리로 초협폭에서 폰트 크기 줄이기

/* 큰 화면: hero 이름 크기 */
.hero-title {
  font-size: 48px;
}

/* 초협폭(380px 이하): 폰트 축소 */
@media (max-width: 380px) {
  .hero-title {
    font-size: 28px;
  }
}

폰트를 48px에서 28px로 줄이면 한 글자가 차지하는 폭이 줄어들어서 컨테이너에 더 여유있게 들어갈 수 있다.

2. word-break: keep-all 적용

@media (max-width: 380px) {
  .hero-title {
    font-size: 28px;
    word-break: keep-all;
  }
}

keep-all은 "단어를 절대 중간에 끊지 말고, 꼭 필요하면 그 다음 줄로 전체가 넘어가라"는 의미다. 그러면 이름이 한 글자 또는 한 단어 단위로 다음 줄로 이동하지, 글자 중간에서 끊어지지 않는다.

다른 방법들과 왜 이것을 선택했나

비슷한 상황에서 사용할 수 있는 다른 CSS 속성들을 검토해봤다:

우리가 선택한 조합이 사용자 경험과 디자인 의도의 좋은 균형이었다. 이름이 완전히 보이면서도 컨테이너를 벗어나지 않고, 추가적인 라이브러리나 복잡한 로직도 필요 없다.

작업 후 배운 것들

이 fix는 한두 줄의 CSS 변경처럼 보이지만, 뒤에 여러 가지 반응형 디자인 원칙들이 숨어 있다:

초협폭 테스트는 "폰에서 확대해서 보기"가 아니라 실제 사이즈로. 380px는 구형 스마트폰이나 태블릿 가로 모드 같은 실존하는 기기다. 브라우저 DevTools에서 논리픽셀 기준으로 정확히 테스트해야 한다. 큰 폰을 구부려서 테스트하는 건 소용없다.

typography 속성들의 미묘한 차이가 중요하다. word-break, word-spacing, letter-spacing, white-space 같은 속성들은 한 두 개만 알아서는 안 되고, 서로 어떻게 상호작용하는지 이해해야 한다. 특히 한국어처럼 공백 없이 연결된 문자를 다루는 언어에서는 더욱 그렇다.

hero 섹션 같은 크리티컬한 부분은 설계 단계부터 초협폭을 고려해야 한다. 나중에 "갑자기" 모바일에서 깨지는 걸 발견하고 응급 패치하는 것보다, 처음부터 여러 breakpoint를 정해두고 각 단계에서 폰트 크기, 레이아웃, 여백을 다르게 설정하는 게 낫다.

이런 작은 수정도 팀과 공유할 가치가 있다. 타 팀 개발자나 디자이너가 비슷한 상황에서 같은 패턴을 적용할 수 있기 때문이다.

작은 화면에서의 typography 최적화는 "세세한 디테일"처럼 느껴질 수 있지만, 특히 포트폴리오처럼 첫 인상이 중요한 페이지에서는 사용자 경험을 크게 좌우한다. 한두 글자로 쪼개진 이름과 깔끔하게 표시되는 이름은 방문자가 받는 느낌이 완전히 다르다.

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

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

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