fix: 홈페이지 콘텐츠 텍스트들이 단어로 깨지는 것이 아니라 글자간으로 깨지게 되는 이슈를 해결한다. (#179)

[osohyun0224]

Fix: 홈페이지 콘텐츠 텍스트들이 단어로 깨지는 것이 아니라 글자간으로 깨지게 되는 이슈를 해결

이슈 해결

#179 이슈를 해결합니다.

작업 내용

• 콘텐츠 텍스트들이 단어로 깨지는 것이 아니라 글자간으로 깨지게 되어서 가독성이 떨어집니다.

---

변경 전 / 변경 후

As-Is	To-Be
단어 한글자씩 깨지며 줄바꿈됨	단어 글자마다 깨지지 않도록 개선

---

확인 사항

• 전 텍스트 단어깨짐 되지 않도록 체크
• 전역 스타일(global.css)에 적용

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
sipe-team	Ready	Preview, Comment	Apr 21, 2026 4:52am

[G-hoon]

수정해주신 word-break: keep-all 적용 방향 자체는 좋습니다 👍
한 가지 보완하면 좋을 부분이 있어서 코멘트 남깁니다.
keep-all은 "단어 중간에서 줄바꿈하지 마라"는 의미인데요, 이렇게 되면 줄바꿈이 가능한 지점이 줄어들게 됩니다.
예를 들어 좁은 영역에 긴 URL이나 영문 단어가 들어오면, 줄바꿈할 수 있는 곳이 없어서 텍스트가 컨테이너 밖으로 넘칠(overflow) 수 있어요.
overflow-wrap: break-word를 같이 넣어주면, 평소에는 단어 단위로 줄바꿈하되 컨테이너를 넘칠 것 같으면 단어 중간에서라도 줄바꿈해줍니다.
아래와 같이 하는 게 어떨지 고려해주시면 좋을 것 같습니다.

 * {
    box-sizing: border-box;
     appearance: none;
     word-break: keep-all;
     overflow-wrap: break-word;
  }

[osohyun0224]

수정해주신 word-break: keep-all 적용 방향 자체는 좋습니다 👍 한 가지 보완하면 좋을 부분이 있어서 코멘트 남깁니다. keep-all은 "단어 중간에서 줄바꿈하지 마라"는 의미인데요, 이렇게 되면 줄바꿈이 가능한 지점이 줄어들게 됩니다. 예를 들어 좁은 영역에 긴 URL이나 영문 단어가 들어오면, 줄바꿈할 수 있는 곳이 없어서 텍스트가 컨테이너 밖으로 넘칠(overflow) 수 있어요. overflow-wrap: break-word를 같이 넣어주면, 평소에는 단어 단위로 줄바꿈하되 컨테이너를 넘칠 것 같으면 단어 중간에서라도 줄바꿈해줍니다. 아래와 같이 하는 게 어떨지 고려해주시면 좋을 것 같습니다.

 * {
    box-sizing: border-box;
     appearance: none;
     word-break: keep-all;
     overflow-wrap: break-word;
  }

@G-hoon 지훈님 정성가득한 리뷰 감사드립니다!! 덕분에 새로운 내용을 알게 되었습니다..! overflow-wrap: break-word도 함께 추가해서 반영해두었습니다 ㅎㅎ

[KYBee]

as-is, to-be 가 잘 보여서 변경된 내용이 딱 보이네요 ㅎㅎ
고생하셨습니다 👍🏻

[KYBee]

저도 지훈님 코멘트로 새로운걸 배워가네요 ㅎㅎ