때는 2차 과제 준비 당시... UI를 얼추 끝냈다고 생각한 나는 점검 차원에서 화면 크기를 줄여 보며 반응형이 제대로 구현되었는지 테스트하고 있었다. 그런데 온보딩 마지막 단계 페이지에서 다음과 같은 문제가 발생했다.
화면 크기가 클 때는 “속도의 관성을 유지하여 목표를 달성하는 협업툴” 이라는 문구가 한 줄로 잘 보였지만, 화면이 줄어들자 줄바꿈이 발생하고 “지금 시작하기” 버튼도 아래로 살짝 밀려 내려가는 문제가 나타났다.
다른 온보딩 페이지들과 달리 이 페이지만 버튼 위치가 어긋나면서, 일관성이 깨진 UI가 되었다. 작은 CSS 속성이었지만 사용자 경험과 레이아웃 안정성에 직접적인 영향을 주었기 때문에 개선이 필요했다.
당시의 코드
해당 페이지의 일부 코드는 다음과 같았다.
// 코드 일부 생략...
<h1 className="font-bigtitle-b text-gray-600 text-center">
속도의 관성을 유지하여 목표를 달성하는 협업툴
</h1>
</div>텍스트는 단순히 중앙 정렬만 되어 있었고, 이 페이지는 PublicLayout 안에서 렌더링되는 구조였다.
const PublicLayout = () => {
return (
<main className="w-full h-screen overflow-auto basic-scroll">
<div className="min-h-screen flex flex-col items-center justify-center bg-gray-onboard">
<Outlet />
</div>
</main>
);
};
export default PublicLayout;문제 1 : 텍스트 줄바꿈
긴 문구가 h1 안에 들어가면서 화면 크기가 줄어들 때 자동 줄바꿈이 발생하였다.
한 줄로 강조되어야 할 문구가 두 줄로 나뉘어 디자인 의도가 무너진 것이다.
h1에 min-w-max 적용
텍스트 자체에 whitespace-nowrap을 주는 방법도 고려했지만, 다른 온보딩 페이지와의 일관성을 해칠 수 있었고 혹시라도 다른 페이지에서도 글자가 길어질 경우 일일이 추가해야하므로 다른 방법을 떠올렸다. 🤔
따라서 h1 요소에 min-w-max를 적용하여 해당 텍스트 자체가 최소 너비를 확보하도록 변경하였다!
<h1 className="min-w-max px-5 font-bigtitle-b text-gray-600">
속도의 관성을 유지하여 목표를 달성하는 협업툴
</h1>
이로써 화면이 좁아져도 줄바꿈은 일어나지 않고, 대신 컨테이너가 넘치면서 가로 스크롤로 처리되었다.
문제 2 : 레이아웃 전체 폭 부족
문제는 h1만 고친다고 끝나지 않았다...😅
텍스트가 min-w-max로 고정되더라도, 상위 컨테이너(div)가 여전히 min-h-screen flex flex-col ... 구조라서 페이지 자체가 텍스트보다 좁아지는 순간 가로 스크롤이 생기지 않았다.
PublicLayout 내부 div에도 min-w-max 적용
이를 해결하기 위해 PublicLayout 내부 div에도 min-w-max를 적용하였다.
즉, 페이지 전체 컨테이너 레벨에서 최소 너비를 보장하여, 뷰포트가 좁아질 경우 가로 스크롤이 정상적으로 작동하게 만들었다!
<main className="w-full h-screen overflow-auto basic-scroll">
<div className="min-w-max min-h-screen flex flex-col items-center justify-center bg-gray-onboard">
<Outlet />
</div>
</main>
결과적으로 텍스트뿐 아니라 페이지 전체가 “최소 폭”을 기준으로 동작하면서, 줄바꿈 없이 자연스럽게 가로 스크롤이 발생하였다.
문제 3 : 배경색 끊김
잘 해결되나 싶었지만.. 가로 스크롤을 사용해보니 아래 사진과 같이, 배경색이 전부 다 채워지지 않는 문제가 발생하였다.
배경색(bg-gray-onboard)을 div에만 적용했을 때는, 컨텐츠 영역까지만 색상이 채워지고 나머지는 흰 화면으로 남았다.
이 때문에 스크롤 시 배경이 끊겨 보이며, 화면 전체가 하나의 레이아웃처럼 보이지 않았다.
배경색을 main으로 이동
배경은 페이지 전체에 걸쳐야 하는 속성이므로, 내부 div가 아니라 상위 뼈대(main)에 적용하는 것이 적절하다!
따라서 배경색을 main에 적용한 코드는 다음과 같았다.
<main className="w-full h-screen overflow-auto basic-scroll bg-gray-onboard">
<div className="min-w-max min-h-screen flex flex-col items-center justify-center">
<Outlet />
</div>
</main>
수정 후에는 페이지 전체가 안정적으로 색상이 적용되어, 스크롤 시에도 끊김 없는 일관된 UI를 유지할 수 있었다. 🤩🤩
정리 및 느낀 점
-
h1에만min-w-max를 적용하면 텍스트 줄바꿈은 막을 수 있었지만, 레이아웃 전체에서는 여전히 문제가 발생하였다. 따라서 텍스트 요소와 레이아웃 컨테이너 양쪽 모두에min-w-max를 적용하여 페이지 단위에서 최소 폭을 보장하는 것이 필요했다. -
배경색은 개별 컴포넌트가 아니라 레이아웃 단위(main)에 적용해야 페이지 전체가 끊김 없이 안정적으로 보인다. 작은 CSS 속성 위치 변경만으로도 사용자 경험과 레이아웃 안정성이 크게 개선될 수 있음을 확인할 수 있었다.
-
처음에는 페이지 내부 코드만 조금 수정하면 될 것이라고 생각했지만, 실제로는 레이아웃 단위에서 접근해야 했다. 여러 차례 시도와 시행착오 끝에, UI 작업에서는 세부 속성뿐만 아니라 레이아웃이라는 큰 그림을 바라보는 시각이 반드시 필요하다는 점을 다시금 깨달았다. 이렇게 작은 문제 하나를 해결하는 과정조차 결국 끝이 없는 UI 공부의 일부였다. ( •̀ .̫ •́ )✧
