---
title: "최신 모바일 디바이스 뷰포트(Viewport)"
id: "2770"
type: "post"
slug: "%ec%b5%9c%ec%8b%a0-%eb%aa%a8%eb%b0%94%ec%9d%bc-%eb%94%94%eb%b0%94%ec%9d%b4%ec%8a%a4-%eb%b7%b0%ed%8f%ac%ed%8a%b8viewport"
published_at: "2020-11-19T04:22:34+00:00"
modified_at: "2026-07-29T22:34:21+00:00"
url: "https://creative-band.com/article/wordpress/%ec%b5%9c%ec%8b%a0-%eb%aa%a8%eb%b0%94%ec%9d%bc-%eb%94%94%eb%b0%94%ec%9d%b4%ec%8a%a4-%eb%b7%b0%ed%8f%ac%ed%8a%b8viewport/"
markdown_url: "https://creative-band.com/article/wordpress/%ec%b5%9c%ec%8b%a0-%eb%aa%a8%eb%b0%94%ec%9d%bc-%eb%94%94%eb%b0%94%ec%9d%b4%ec%8a%a4-%eb%b7%b0%ed%8f%ac%ed%8a%b8viewport.md"
excerpt: "375px이 아니라 390px이었어. 게다가 412px이래..."
taxonomy_category:
  - "워드프레스"
---

새로운 아이폰을 구매했습니다. 그 전에 쓰던 아이폰 X과 그 전에 쓰던 아이폰 7은 가로 너비 375px의 뷰포트를 가지고 있었습니다. 안드로이드 OS 기반의 폰은 갤럭시를 기준으로 360px의 뷰포트를 가지고 있었습니다.

반응형 웹사이트를 구축하다보면 디바이스 별로 최적화를 해야할 때가 있습니다. 이때 뷰포트가 중요하죠. 그런데 오늘에서야 더 많은 뷰포트 설정이 필요하다는 것을 알게되었습니다.

- iPhone 12 mini – Viewport 360px
- iPhone SE 2 – Viewport 375px
- iPhone 12 Pro – Viewport 390px
- iPhone 12 Pro Max – Viewport 428px
- iPhone 8 Max, XR – Viewport 414px
- Galaxy S20 – Viewport 412px

오늘 이것 때문에 고생좀 했습니다. 변화에 보다 깊은 관심을 가져야겠습니다.

[프로젝트 의뢰하기 →](/project-inquiry/)
[카카오톡 채팅으로 문의하기 →](https://pf.kakao.com/_MwJKxl/chat)
[☺ 문단 디자인 해보기 →](/paragraph/)
[☺ 잘되는 웹사이트 자가진단 →](/self-check/)

- [https://creative-band.com/article/wordpress/permalink-setting-for-blog/](https://creative-band.com/article/wordpress/permalink-setting-for-blog/) - [워드프레스](https://creative-band.com/article/wordpress/) **[기업 웹사이트의 블로그 주소 체계](https://creative-band.com/article/wordpress/permalink-setting-for-blog/)**워드프레스로 기업 웹사이트를 구축하고 블로그도 운영할 계획이라면, 콘텐츠를 발행하기 전에 고유주소 체계부터 정해야 합니다. ![Creative Band](https://secure.gravatar.com/avatar/477c13dfee6c19b25845895880a5344d6854377fbc4e6361ee2d2e27d10f0a03?s=50&d=mm&r=g)by[Creative Band](https://creative-band.com/article/author/creativeband/) 2026-09-06
- [https://creative-band.com/article/wordpress/all-about-search-asset-management-system/](https://creative-band.com/article/wordpress/all-about-search-asset-management-system/) - [워드프레스](https://creative-band.com/article/wordpress/) **[크리에이티브밴드 검색자산 관리 시스템은 어떻게 작동하나요?](https://creative-band.com/article/wordpress/all-about-search-asset-management-system/)**웹사이트와 내부 자료를 분석해 콘텐츠를 기획·생성·점검하는 크리에이티브밴드 검색자산 관리 시스템의 작동 원리를 설명합니다. ![Creative Band](https://secure.gravatar.com/avatar/477c13dfee6c19b25845895880a5344d6854377fbc4e6361ee2d2e27d10f0a03?s=50&d=mm&r=g)by[Creative Band](https://creative-band.com/article/author/creativeband/) 2026-09-02
- [https://creative-band.com/article/search/what-is-a-search-asset/](https://creative-band.com/article/search/what-is-a-search-asset/) - [검색](https://creative-band.com/article/search/) - [워드프레스](https://creative-band.com/article/wordpress/) **[검색자산이란 무엇인가? AI 검색 시대에 웹사이트를 자산으로 만드는 방법](https://creative-band.com/article/search/what-is-a-search-asset/)**검색자산은 기업의 정보와 콘텐츠를 웹사이트에 축적·분류·연결한 정보 체계입니다. AI 검색 시대에 왜 필요하고 어떻게 구축·운영하는지 설명합니다. ![한재일](https://secure.gravatar.com/avatar/45ceb630886ddbe0235c583d42cb27e59bcd530bac4bd05dade6069e11763a02?s=50&d=mm&r=g)by[한재일](https://creative-band.com/article/author/jaeil-han/) 2026-09-01
- [https://creative-band.com/article/wordpress/search-asset-management-system/](https://creative-band.com/article/wordpress/search-asset-management-system/) - [검색](https://creative-band.com/article/search/) - [워드프레스](https://creative-band.com/article/wordpress/) - [유지관리 및 운영](https://creative-band.com/article/maintenance/) **[워드프레스 안에서 분석부터 발행까지, 검색자산 관리 시스템](https://creative-band.com/article/wordpress/search-asset-management-system/)**사이트와 내부 자료를 분석하고 콘텐츠 기획, 생성, SEO·GEO 점검, 내부 연결과 발행까지 지원하는 검색자산 관리 시스템을 소개합니다. ![Creative Band](https://secure.gravatar.com/avatar/477c13dfee6c19b25845895880a5344d6854377fbc4e6361ee2d2e27d10f0a03?s=50&d=mm&r=g)by[Creative Band](https://creative-band.com/article/author/creativeband/) 2026-08-29
- [https://creative-band.com/article/wordpress/web-typography-starts-with-a-paragraph/](https://creative-band.com/article/wordpress/web-typography-starts-with-a-paragraph/) - [워드프레스](https://creative-band.com/article/wordpress/) **[좋은 웹 타이포그래피는 하나의 문단에서 시작합니다](https://creative-band.com/article/wordpress/web-typography-starts-with-a-paragraph/)**좋은 웹 타이포그래피는 잘 읽히는 하나의 문단에서 시작합니다. 콘텐츠의 성격에 맞춰 서체를 선택하고 글줄 길이, 글자 크기와 행간의 균형을 찾은 뒤 제목과 여백으로 확장하는 크리에이티브밴드의 타이포그래피 설계 방법을 소개합니다. ![한재일](https://secure.gravatar.com/avatar/45ceb630886ddbe0235c583d42cb27e59bcd530bac4bd05dade6069e11763a02?s=50&d=mm&r=g)by[한재일](https://creative-band.com/article/author/jaeil-han/) 2026-08-22
- [https://creative-band.com/article/wordpress/wordpress-content-structure-guide-for-page-builders/](https://creative-band.com/article/wordpress/wordpress-content-structure-guide-for-page-builders/) - [워드프레스](https://creative-band.com/article/wordpress/) **[페이지 빌더 사용자를 위한 워드프레스 콘텐츠 구조 설계 가이드](https://creative-band.com/article/wordpress/wordpress-content-structure-guide-for-page-builders/)**페이지 빌더를 사용하기 전에 웹사이트의 콘텐츠 구조 설계가 필요합니다. 이 구조가 만들어져야 페이지 빌더도 제대로 활용할 수 있습니다. ![Creative Band](https://secure.gravatar.com/avatar/477c13dfee6c19b25845895880a5344d6854377fbc4e6361ee2d2e27d10f0a03?s=50&d=mm&r=g)by[Creative Band](https://creative-band.com/article/author/creativeband/) 2026-08-18
- [https://creative-band.com/article/wordpress/wordpress-page-builder-experience/](https://creative-band.com/article/wordpress/wordpress-page-builder-experience/) - [워드프레스](https://creative-band.com/article/wordpress/) **[워드프레스 페이지 빌더, 직접 사용해보고 생각이 달라졌다](https://creative-band.com/article/wordpress/wordpress-page-builder-experience/)**워드프레스 페이지 빌더를 실제 프로젝트에 사용하면서 경험한 장점과 한계를 정리했습니다. ![한재일](https://secure.gravatar.com/avatar/45ceb630886ddbe0235c583d42cb27e59bcd530bac4bd05dade6069e11763a02?s=50&d=mm&r=g)by[한재일](https://creative-band.com/article/author/jaeil-han/) 2026-08-15
- [https://creative-band.com/article/wordpress/%ec%9b%b9%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%a0%9c%ec%9e%91-%ec%9d%98%eb%a2%b0-%ec%a0%84%ec%97%90-%ec%a4%80%eb%b9%84%ed%95%98%eb%a9%b4-%ec%a2%8b%ec%9d%80-%ea%b2%83/](https://creative-band.com/article/wordpress/%ec%9b%b9%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%a0%9c%ec%9e%91-%ec%9d%98%eb%a2%b0-%ec%a0%84%ec%97%90-%ec%a4%80%eb%b9%84%ed%95%98%eb%a9%b4-%ec%a2%8b%ec%9d%80-%ea%b2%83/) - [워드프레스](https://creative-band.com/article/wordpress/) **[웹사이트 제작 의뢰 전에 준비하면 좋은 것](https://creative-band.com/article/wordpress/%ec%9b%b9%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%a0%9c%ec%9e%91-%ec%9d%98%eb%a2%b0-%ec%a0%84%ec%97%90-%ec%a4%80%eb%b9%84%ed%95%98%eb%a9%b4-%ec%a2%8b%ec%9d%80-%ea%b2%83/)**웹사이트 제작은 기업의 정보를 구조화하는 작업입니다. ![한재일](https://secure.gravatar.com/avatar/45ceb630886ddbe0235c583d42cb27e59bcd530bac4bd05dade6069e11763a02?s=50&d=mm&r=g)by[한재일](https://creative-band.com/article/author/jaeil-han/) 2026-07-22
- [https://creative-band.com/article/wordpress/%ed%97%b7%ea%b0%88%eb%a6%ac%eb%8a%94-%ec%9b%b9%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%9a%a9%ec%96%b4-%ec%a0%95%eb%a6%ac/](https://creative-band.com/article/wordpress/%ed%97%b7%ea%b0%88%eb%a6%ac%eb%8a%94-%ec%9b%b9%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%9a%a9%ec%96%b4-%ec%a0%95%eb%a6%ac/) - [워드프레스](https://creative-band.com/article/wordpress/) **[헷갈리는 웹사이트 용어 정리](https://creative-band.com/article/wordpress/%ed%97%b7%ea%b0%88%eb%a6%ac%eb%8a%94-%ec%9b%b9%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%9a%a9%ec%96%b4-%ec%a0%95%eb%a6%ac/)**웹사이트, 홈페이지, 웹페이지, 랜딩페이지, 메인 내비게이션, 메인 메뉴, 카테고리, 탭 등 ![한재일](https://secure.gravatar.com/avatar/45ceb630886ddbe0235c583d42cb27e59bcd530bac4bd05dade6069e11763a02?s=50&d=mm&r=g)by[한재일](https://creative-band.com/article/author/jaeil-han/) 2026-07-16
- [https://creative-band.com/article/wordpress/css%ec%9d%98-display-flex%ec%99%80-figma%ec%9d%98-auto-layout/](https://creative-band.com/article/wordpress/css%ec%9d%98-display-flex%ec%99%80-figma%ec%9d%98-auto-layout/) - [워드프레스](https://creative-band.com/article/wordpress/) **[CSS의 display: flex와 Figma의 Auto Layout](https://creative-band.com/article/wordpress/css%ec%9d%98-display-flex%ec%99%80-figma%ec%9d%98-auto-layout/)**display: flex 를 알면 figma와 워드프레스 페이지빌더가 더 쉽습니다. ![한재일](https://secure.gravatar.com/avatar/45ceb630886ddbe0235c583d42cb27e59bcd530bac4bd05dade6069e11763a02?s=50&d=mm&r=g)by[한재일](https://creative-band.com/article/author/jaeil-han/) 2026-07-14