모바일 개발은 390px이 가장 안전하고 모던합니다

Prompt

---

반응형 모바일웹 개발할 때 디바이스 넓이는 얼마로 하는게 가장 모던트랜드에 적합한가요? 

나는 원래 390픽셀로 했는데 요즘은 480도 추천하더라고요. 

그런데 480은 모바일 치고는 너무 넓은것 아닌가 싶어서요.

---

---

결론부터 말씀드리면, **모바일 기준점(Breakpoint)으로 480px은 '최대치'**에 가깝고, 실제 디자인의 중심은 여전히 360px ~ 430px 사이에 두는 것이 가장 트렌디하고 안전합니다.

질문하신 480px이 요즘 언급되는 이유는 스마트폰이 점점 커지고, 특히 폴더블 폰의 커버 디스플레이나 대화면 'Pro Max' 기종들 때문입니다. 하지만 이를 "모바일 기본 넓이"로 잡기에는 위험 요소가 있습니다.

현시점 가장 적합한 가이드를 정리해 드립니다.

---

1. 왜 390px인가? (현재의 표준)

현재 모바일 웹 디자인의 가장 중심이 되는 수치는 390px입니다.

• 이유: 아이폰 13, 14, 15, 16 기본 모델의 논리적 해상도가 390px이기 때문입니다.
• 범위: 보통 **360px(보급형 안드로이드)**에서 430px(아이폰 Pro Max, 갤럭시 Ultra) 사이가 전체 모바일 시장의 90% 이상을 차지합니다.

2. 480px은 어떤 의미인가?

480px은 보통 **"큰 스마트폰과 작은 태블릿 사이"**의 경계선으로 쓰입니다.

• 트렌드: 요즘은 기기 종류가 너무 다양해서 "모바일 전용" 레이아웃이 깨지지 않고 유지되어야 하는 최대 마지노선을 480px로 잡는 경우가 많습니다.
• 주의점: 디자인을 480px 기준으로 하면 360px 기기에서는 요소들이 너무 다닥다닥 붙거나 작게 보일 수 있습니다. 따라서 작업은 390px 내외에서 하되, 480px까지 늘어나도 레이아웃이 무너지지 않도록 **유동적(Fluid)**하게 설계하는 것이 핵심입니다.

---

3. 추천하는 현대적 Breakpoint 전략

디바이스를 하나하나 맞추기보다, 아래와 같은 **'범위'**로 대응하는 것이 효율적입니다.

구분	해상도 범위 (Width)	비고
Small Mobile	320px ~ 360px	구형 기기 및 저가형 안드로이드
Standard Mobile	375px ~ 414px	가장 중요한 타겟 (iPhone, Galaxy)
Large Mobile	414px ~ 480px	대화면 스마트폰, 폴더블 커버 화면
Tablet	600px ~ 768px	iPad, 안드로이드 탭

---

💡 실무 팁: 어떻게 디자인해야 할까?

1. 390px을 기준으로 디자인하세요: 가장 대중적인 기준점입니다.
2. 최소 320px까지는 대응하세요: 480px을 신경 쓰다가 작은 화면을 놓치면 안 됩니다. 320px(아이폰 SE 등)에서 텍스트가 겹치지 않는지 확인이 필요합니다.
3. 고정 폭보다는 %나 flex를 활용하세요: width: 480px처럼 고정하기보다는, max-width: 480px로 제한을 두고 그 안에서는 화면에 꽉 차게(width: 100%) 흐르도록 만드는 것이 요즘 방식입니다.
4. 여백(Gutter)의 중요성: 화면이 480px까지 넓어질 때 콘텐츠가 양옆에 너무 붙지 않도록 적절한 padding을 주는 것만으로도 훨씬 세련된 느낌을 줄 수 있습니다.

요약하자면: 480px은 "모바일 레이아웃이 유지되는 끝단"으로 보시고, 실제 핵심 콘텐츠 배치는 390px을 기준으로 하시는 것이 가장 안전하고 모던합니다!

---