📱 모바일에서 깨진 프로필 UI, 이렇게 해결했다

이번에는 만든 프로필 화면을 모바일 뷰에서 확인하다가
텍스트가 겹치고 버튼이 깨지는 문제를 발견했다.
간단해 보였지만, 스타일 하나하나 뜯어보면서 직접 수정해야 해결할 수 있었다.

🐛 문제 상황

모바일 화면에서 확인했을 때:

• 프로필 상단의 딜하숍 텍스트가 프로필 이미지나 아이콘과 겹침

• 프로필 수정 버튼이 너무 커지거나, 텍스트가 이상하게 밀림

• 전반적으로 요소 간 간격이 좁아지면서 내용들이 겹치는 현상 발생

🔍 원인 분석

이번 문제는 전체적으로 position: absolute, left: 50%, transform: translate(-50%) 같은 정중앙 배치 방식이 많았고,
여기에 height: %, font-size: px나 vh 단위가 섞이면서
작은 화면에서는 위치와 크기 계산이 어긋나는 경우가 생겼다.

✅ 해결 방법

1. 텍스트와 이미지 위치 조정

• 딜하숍 텍스트의 left 값을 30% → 33%로 미세 조정

• 겹치지 않도록 top 위치도 살짝 내려서 여유 확보

2. 버튼 내부 정렬 개선

• EditProfileButton 내부에서 이미지(ButtonImage)와 텍스트(ButtonText) 간 간격을 margin-right: 23%로 조정

• 텍스트 크기도 font-size: 2vh로 상대 단위로 조정해서 화면에 따라 자연스럽게 줄어들게 처리

3. 전체적으로 vh, % 기반 비율 조정

• 버튼 높이, 텍스트 크기, 아이콘 크기 등을 vh, % 단위로 통일해서 뷰포트에 맞춰 자연스럽게 줄어들도록 설정

4. 불필요한 겹침 제거

• ProfileContainer 안에서 텍스트와 아이콘이 겹치지 않게 상대 위치 조정만으로 해결,
  구조 자체는 그대로 유지

💡 회고

처음엔 "이건 그냥 margin 좀 조절하면 되겠지?" 싶었는데,
결국은 요소별 left, top, font-size, width 하나하나 다 확인해보면서 수정해야 했다.

미디어 쿼리를 사용해서 해상도별 대응을 할 수도 있었지만
처음부터 이 화면은 PWA처럼 모바일 전용 화면을 웹에서도 그대로 보여주기 위한 구조였고,
그래서 다양한 해상도를 따로 대응하기보다는
처음부터 vh, %, 등 상대 단위를 기반으로 디자인을 맞추는 게 더 자연스러웠다.

그리고 이때 처음으로 알게 된 건,
mac에서 ⌘ + ⌥ + I(command + option + I) 단축키로 개발자 도구를 열고,
상단에서 디바이스 뷰(📱 아이콘)를 켜서 보는 모바일 모드와 그냥 브라우저 화면은 다르게 렌더링될 수 있다는 점이었다.
겉으로는 비슷해 보여도, 실제 사용자 환경과 정확히 같진 않기 때문에 반드시 두 방식 모두 확인해보는 습관이 필요하다고 느꼈다.

앞으로는 코드만 보고 "잘 나오겠지"가 아니라,
직접 브라우저에서 모바일 기기처럼 보면서 체크하는 과정을 더 습관화하려고 한다.