Skip to main content
appkiro.com
Chrome 확장 프로그램 • 반응형 웹 테스트

모든 웹사이트를 검증하는 96개 스마트폰, 태블릿, 데스크톱 뷰포트

일반 Chrome 탭을 전문적인 반응형 테스트 스튜디오로 탈바꿈하세요. 실제 기기와 동일한 고화질 프레임 속에서 사이트를 검증하고, 터치 조작감과 키보드 가림 현상을 확인하며, 다중 뷰포트 동기화 및 접근성 검사를 한 번에 수행할 수 있습니다.

작동 방식 보기Try the Screenshot Extension

Chrome 웹 스토어 심사 중 — 프로덕션 배포 준비 완료

  • 96개 실제 하드웨어 디바이스 프로필
  • 스크린샷, 화면 녹화 및 일괄 캡처 지원
  • 브라우저에서 직접 로컬 구동, 계정 불필요
AppKiro 모바일 시뮬레이터: 96개 디바이스 목록과 함께 실제 iPhone 프레임에 렌더링된 웹사이트 미리보기
Swipe the image to see the full frame. Pick from 96 profiles, or open up to six viewports side by side in the same tab. Artwork from the extension's store listing.

96 ready-made device profiles

초소형 스마트워치와 대중적인 스마트폰부터 최신 폴더블, 대화면 태블릿, 4K 데스크톱 모니터까지. 모든 프로필에 정확한 CSS 뷰포트 규격과 픽셀 비율(DPR)이 적용되어 있습니다.

  • 31

    iPhone 제품군

    iPhone 5부터 iPhone 17 Pro Max, SE, X, XR 및 iPhone Air 모델까지 완벽 지원.

  • 32

    Android 스마트폰

    Galaxy S10~S26 Ultra, Pixel 5~10 Pro, 샤오미, OPPO, OnePlus, 화웨이, 인피닉스 및 Zebra 산업용 단말기.

  • 7

    폴더블 (Foldables)

    Galaxy Z Fold 2, Z Fold6, Z Flip3, Z Flip6, Pixel 9 Pro Fold, Pixel 10 Fold 및 Moto Razr 70 Ultra.

  • 11

    태블릿 (Tablets)

    iPad, iPad mini, iPad Air, iPad Pro 11" 및 13" M4, Galaxy Tab S7 및 S9 Ultra, Surface Pro 11, Surface Duo.

  • 11

    노트북 및 데스크톱

    MacBook Air, MacBook Pro 14" 및 16", iMac 24", Dell Latitude 및 1080p, 2K QHD, 4K UHD 해상도.

  • 3

    특수 디스플레이

    삼성 스마트 TV, 무인 결제 키오스크 단말기, Sonoff 스마트 월패드 디스플레이.

  • 1

    스마트워치 (Smartwatch)

    Apple Watch Series 6 (40 mm) — 지원해야 할 가장 작은 최소형 화면 기준 제공.

각 디바이스 프로필이 제공하는 핵심 정보:

  • CSS 뷰포트 규격 (너비 / 높이)
  • 디바이스 픽셀 비율 (Device Pixel Ratio - DPR)
  • 실제 모바일 User-Agent 문자열
  • 운영체제 이름 및 버전 식별값
  • 노치 및 다이내믹 아일랜드 형태
  • 안전 영역 패딩 (Safe-area insets)
  • 에뮬레이션 네트워크 연결 타입
  • 정밀한 포토릴리스틱 기기 외형 프레임

Custom Device Viewports

Add a custom device with its own name, viewport, pixel ratio, OS, network type and user-agent string. Star favorite devices to access them immediately.

단순한 창 크기 조절이 아닌, 실제 모바일 환경 재현

반응형 테스트는 너비만 줄이는 것으로 충분하지 않습니다. 모바일 특유의 터치 가속도, 동적 뷰포트 단위, 소프트웨어 키보드 밀림 현상까지 충실히 반영합니다.

  • 웹페이지가 모바일 브라우저로 명확히 인식

    메인 페이지와 모든 iframe에 User-Agent와 Client Hints가 주입되어, 디바이스 감지 스크립트가 데스크톱 대신 정확한 모바일 분기를 실행합니다.

  • 자연스러운 관성 터치 스크롤 제스처

    Touch 이벤트가 정상 발생하며 손가락 스크롤 시 부드러운 감속 관성이 적용됩니다. 마우스 오버(Hover)에만 의존하는 잘못된 UI를 즉시 잡아냅니다.

  • 가상 키보드 팝업 시 화면 레이아웃 변위

    입력 필드를 터치하면 키보드가 올라오며 뷰포트 높이가 줄어듭니다. 화면 하단 고정 버튼이 입력창을 가리는 치명적인 문제를 사전에 방지합니다.

  • 모바일 동적 뷰포트 단위 정확 계산

    vh, svh, dvh, lvh 단위가 가상 모바일 뷰포트를 기준으로 계산되며, env(safe-area-inset-*) 함수가 실제 노치와 홈바 영역을 정확하게 반환합니다.

  • 실제 상태 표시줄이 포함된 사실적인 기기 프레임

    배터리와 시계가 있는 상단 상태 표시줄과 하단 주소창이 함께 렌더링되어, 사용자가 첫 화면에서 보게 될 실제 유효 높이를 검증할 수 있습니다.

  • 스크린샷 촬영을 위한 시간 및 배터리 고정

    시간을 9:41로, 배터리를 100%로 고정해 문서나 마케팅 자료에 들어갈 캡처 이미지들을 일관되고 정돈된 모습으로 완성할 수 있습니다.

  • 데이터 초기화 없는 가로·세로 즉각 회전

    단 한 번의 클릭으로 세로(Portrait)와 가로(Landscape) 모드를 전환하며, 페이지가 새로고침되지 않아 입력 중인 데이터가 그대로 유지됩니다.

  • PWA 프로그레시브 웹 앱 자동 감지

    Web App Manifest가 포함된 사이트를 즉시 감지하여, 사용자가 앱으로 홈 화면에 설치했을 때의 독립형 창 화면을 손쉽게 미리 볼 수 있습니다.

동시에 나란히 비교하는 실시간 연동 뷰포트 모바일, 태블릿, 데스크톱 레이아웃을 한 모니터에 나란히 열어두고 비교하세요. 한 화면에서 스크롤하거나 클릭하면 다른 모든 기기가 동시에 반응합니다.

프레젠테이션, 버그 리포트, 문서를 위한 4가지 캡처 모드

시뮬레이션 화면에서 원하는 형태의 이미지를 즉시 생성하고 화살표와 텍스트로 수정 사항을 지목하세요.

  • 기기 프레임 포함 캡처 (With Device Frame)

    상태 표시줄과 사실적인 기기 외형이 포함된 이미지 — 클라이언트 보고서, 포트폴리오, 앱 소개 자료에 완벽하게 어울립니다.

  • 웹 페이지만 캡처 (Site Only)

    외부 기기 섀시 없이 순수 뷰포트 영역만 깔끔하게 잘라내어, 개발자 및 QA가 버그 티켓에 첨부하기 가장 좋은 형태를 제공합니다.

  • 전체 페이지 스크롤 캡처 (Full Page)

    해당 디바이스 너비에서 웹페이지 맨 아래까지 자동으로 스크롤하며 촬영하여 고해상도 세로형 긴 이미지 한 장으로 합쳐줍니다.

  • 브라우저 탭 전체 캡처 (Entire Tab)

    시뮬레이터 제어 툴바와 현재 디바이스 세부 설정이 포함된 브라우저 창 전체를 촬영하여 테스트 가이드 문서로 활용합니다.

The AppKiro Mobile Simulator capture dialog offering capture with the device, the site only, the entire page and the entire tab, with a batch capture entry underneath
Swipe the image to see the full frame. The capture dialog, with batch capture one row below the single-device modes.

Annotation tools in the editor

Mark up responsive issues right where they are captured before copying or saving.

  • Pen
  • Arrow
  • Line
  • Rectangle
  • Ellipse
  • Stroke colour
  • Stroke width
  • Undo

Export and handoff

Save as PNG or WebP, copy to clipboard, or upload to generate a quick shareable preview link.

A full-page capture of a site simulated on an iPhone, with the export panel showing the stitched image dimensions and buttons to download as WebP or PNG, copy the image, or upload and share it
Swipe the image to see the full frame. Full-page mode scrolls past the fold and stitches the result into one image at the device's width.

마이크 해설과 웹캠이 포함된 상호작용 비디오 녹화

별도의 무거운 녹화 프로그램을 켤 필요 없이, 버그 재현 영상이나 신기능 튜토리얼 영상을 간편하게 제작할 수 있습니다.

  • 기기 화면 또는 브라우저 탭 선택 녹화

    모바일 기기 내부 화면만 깔끔하게 녹화할지, 시뮬레이터 제어판이 포함된 탭 전체를 녹화할지 자유롭게 선택합니다.

  • 마이크 음성 해설 및 원형 웹캠 오버레이

    마이크로 설명을 음성 녹음하고 화면 구석에 진행자의 얼굴이 담긴 동그란 웹캠 창을 띄워 완성도 높은 데모 영상을 만듭니다.

  • 가볍고 선명한 WebM 파일 즉시 내보내기

    녹화가 끝나면 고화질 WebM 영상이 로컬 컴퓨터로 즉시 다운로드되어 슬랙, 지라, 노션 등에 바로 공유할 수 있습니다.

  • 100% 로컬 보안 처리

    브라우저의 표준 MediaRecorder API를 통해 기기 내부에서 인코딩되며, 어떤 영상 데이터도 외부 서버로 전송되지 않습니다.

수십 대의 기기 화면을 단 한 번에 일괄 캡처

기기를 일일이 바꿔가며 캡처하던 번거로움을 완전히 끝냅니다. 단 한 번의 클릭으로 전체 기기 매트릭스를 순차 촬영하여 보고서를 만듭니다.

The AppKiro Mobile Simulator batch capture dialog with a searchable device list, several iPhones selected, capture-mode and orientation options, and a start capture button showing eleven devices queued
Swipe the image to see the full frame. Pick the devices once, choose a capture mode and orientation, and the run does the rest.

  • 자주 쓰이는 디바이스 모음 프리셋

    대중적인 스마트폰 모음, 최신 iPhone 라인업, Android 매트릭스, 태블릿 모음 등 최적화된 프리셋을 원클릭으로 선택합니다.

  • 실시간 진행률 표시 및 실패 항목 재시도

    디바이스별 캡처 진행률을 실시간으로 확인하고, 네트워크 지연으로 인해 늦게 뜬 기기만 따로 골라 재시도할 수 있습니다.

  • ZIP 압축 파일 다운로드 또는 통합 연락 시트

    캡처된 모든 파일을 정돈된 폴더 구조의 ZIP 파일로 받거나, 모든 해상도가 한 장에 담긴 와이드 비교 시트(Contact Sheet)로 내보냅니다.

  • 자유로운 커스텀 디바이스 선택

    96개 목록에서 우리 서비스 사용자 로그 데이터에 부합하는 타깃 디바이스만 자유롭게 체크박스로 선택할 수 있습니다.

Presets for batch testing

  • Common Phones
  • iPhone Matrix
  • Android Matrix
  • Responsive QA
  • App Store sizes
  • Play Store sizes

WCAG 접근성 및 엄지 조작 편의성 즉시 오버레이

배포 전 모바일 뷰포트 내부에서 색상 대비 문제와 엄지손가락 터치 불편 요소를 손쉽게 찾아냅니다.

  • 텍스트 색상 대비율 분석

    WCAG AA 및 AAA 기준에 따라 전경 텍스트와 배경색 대비를 정밀 계산하여 야외 햇빛 아래에서 읽기 힘든 흐릿한 글자를 강조합니다.

  • 터치 타깃 최소 크기 검사 (Tap Targets)

    버튼과 링크가 권장 최소 터치 규격(48x48px 또는 44x44px)을 충족하는지 검사하여 좁은 화면에서의 오동작을 미연에 방지합니다.

  • 제목 태그 계층 구조 확인 (H1~H6)

    페이지 내 헤딩 태그의 논리적 순서를 검토하여 스크린 리더 사용자의 웹 탐색을 방해하는 건너뛰기 문제를 파악합니다.

  • 이미지 대체 텍스트(Alt) 누락 점검

    alt 속성이 누락되었거나 설명이 부족한 이미지를 즉각 표시하여 시각 장애인 접근성을 개선하고 이미지 SEO 점수를 높입니다.

  • 키보드 포커스 이동 순서 추적

    외장 키보드 사용자를 위한 Tab 키 포커스 이동 경로를 시각화하여 논리적이고 직관적인 탐색 흐름이 보장되는지 확인합니다.

  • 한 손 조작 엄지 도달 범위 분석 (Thumb Reach)

    한 손으로 스마트폰을 쥐었을 때의 조작 난이도(쉬운 영역, 뻗어야 하는 영역, 도달 불가 영역)를 시각화하여 핵심 버튼 배치를 최적화합니다.

Actionable inspection. Clicking a finding highlights the element without changing the page state.

개발자의 손에 맞춘 유연한 환경 구성

원하는 뷰포트 규격 추가부터 다크 모드, 키보드 단축키 매핑까지 전폭적인 자유도를 지원합니다.

The AppKiro Mobile Simulator settings panel on its device tab, offering full chrome, status bar and clean view display modes alongside switches for the device frame, the device name label, keyboard simulation and native scrollbars
Swipe the image to see the full frame. Full chrome, status bar only, or a clean viewport — plus the device frame, name label, keyboard simulation and scrollbars.

  • 나만의 맞춤 기기 등록

    특수한 키오스크 화면이나 새로 출시된 기기의 너비, 높이, DPR, OS 이름, User-Agent를 입력하여 전용 프로필을 생성합니다.

  • 편리한 단축키 설정

    Chrome 단축키 관리자에서 단축키를 지정하여 시뮬레이터 켜기/끄기, 기기 회전, 캡처를 1초 만에 실행합니다.

  • 상태 표시줄 세부 커스텀

    상태바 표시 여부, Wi-Fi 아이콘, 시간(9:41 등)을 고정하여 언제 찍어도 깨끗하고 정돈된 캡처 이미지를 얻을 수 있습니다.

  • 완벽한 다크 모드 지원

    개발자들의 눈 피로도를 덜어주는 깔끔한 다크 테마가 적용되어 장시간 작업 시에도 쾌적함을 유지합니다.

반응형 검증을 완료하는 4단계 프로세스

개발 완료부터 멀티 디바이스 검증 및 결과 공유까지의 불필요한 단계를 모두 줄였습니다.

  1. 1

    테스트할 사이트 접속

    Chrome에서 검증할 웹 주소로 이동합니다 (localhost 개발 서버, 사내 스테이징 환경 및 file:// 파일 지원).

  2. 2

    시뮬레이터 실행 후 디바이스 선택

    AppKiro 아이콘을 누르고 원하는 기기를 고르면 페이지가 실제 뷰포트 규격의 고화질 프레임 안에 즉시 담깁니다.

  3. 3

    터치 동작, 키보드 밀림, 멀티 뷰 검증

    부드러운 터치 스크롤을 확인하고 가상 키보드를 띄워 버튼 가림을 체크하거나 여러 화면을 동시에 비교합니다.

  4. 4

    캡처, 영상 녹화 또는 접근성 보고

    프레임 스크린샷 내보내기, 인터랙션 영상 녹화, 접근성 오버레이 진단 또는 일괄 캡처를 실행하여 팀과 공유합니다.

Chrome DevTools의 기기 모드보다 뛰어난 이유 개발자 도구(F12)는 훌륭한 기본 도구이지만, 실무 보고와 철저한 비주얼 QA를 위해서는 AppKiro만의 사실적인 프레임과 통합 도구가 필요합니다.

누가 AppKiro 모바일 시뮬레이터를 사용하나요?

최고의 모바일 웹 경험을 만들어가는 디지털 전문가들을 위해 만들어졌습니다.

  • 프론트엔드 및 웹 개발자

    CSS 미디어 쿼리 반응형 브레이크포인트를 검증하고, 노치 인셋 여백과 터치 메뉴 오작동을 로컬 서버에서 실시간으로 디버깅합니다.

  • QA 및 테스트 엔지니어

    크로스 디바이스 회귀 테스트 시간을 획기적으로 줄이고, 접근성 감사 및 기기 프레임이 포함된 명확한 버그 증빙 스크린샷을 생성합니다.

  • UI/UX 디자이너

    퍼블리싱된 웹 화면이 피그마 시안과 일치하는지 대조하고, 한 손 엄지손가락 조작 편의성을 평가하며 포트폴리오용 고해상도 목업을 추출합니다.

  • 마케터 및 콘텐츠 기획자

    최신 기기 프레임에 담긴 아름다운 랜딩 페이지 스크린샷을 찍고 소셜 미디어 배포용 반응형 소개 영상을 간편하게 녹화합니다.

  • 프로덕트 매니저 (PM)

    스프린트 리뷰 시 여러 대의 실제 휴대폰을 모을 필요 없이, 한 화면에서 다양한 기기 규격의 완성도를 신속하게 검토합니다.

Chrome DevTools의 기기 모드보다 뛰어난 이유

개발자 도구(F12)는 훌륭한 기본 도구이지만, 실무 보고와 철저한 비주얼 QA를 위해서는 AppKiro만의 사실적인 프레임과 통합 도구가 필요합니다.

  • 밋밋한 사각 박스가 아닌 실제 디바이스 외형

    DevTools는 밋밋한 회색 테두리만 보여줍니다. AppKiro는 상태 표시줄과 실제 베젤이 포함된 사실적인 스마트폰 외형을 제공하여 실제 사용자 시각을 그대로 보여줍니다.

  • 가상 키보드가 밀어 올리는 화면 레이아웃 변위 재현

    실제 스마트폰은 키보드가 팝업되면 가용 화면이 절반으로 줄어듭니다. DevTools는 이를 재현하지 않지만, AppKiro는 똑같이 위로 밀어 올려 버튼 가림 버그를 즉각 밝혀냅니다.

  • 여러 뷰포트를 동시에 나란히 동기화 비교

    DevTools는 한 번에 한 크기만 볼 수 있습니다. AppKiro는 모바일, 태블릿, 데스크톱을 한 화면에 띄우고 스크롤 한 번으로 3개 화면을 동시에 검증합니다.

  • 클라우드 랩 구독료 없이 100% 로컬 오프라인 작동

    비싼 클라우드 디바이스 대여료나 원격 스트리밍 렉이 없으며, 터널링 설정 없이도 폐쇄된 localhost 개발 환경을 완벽한 보안 속에 테스트할 수 있습니다.

이 확장 프로그램이 대신할 수 없는 것

설치 전에 미리 알아두면 좋은 브라우저 기반 뷰포트 시뮬레이터의 현실적인 한계입니다.

  • 뷰포트 시뮬레이터이며 실기기 테스트 랩이 아닙니다

    웹페이지는 사용 중인 데스크톱 Chrome 엔진으로 렌더링됩니다. iOS Safari나 WebKit 고유의 렌더링 버그, 기기별 특수 GPU나 하드웨어 센서 동작은 여기서 재현되지 않습니다.

  • 네이티브 모바일 앱 에뮬레이터가 아닙니다

    스마트폰과 태블릿의 모바일 웹 브라우징 환경만 시뮬레이션합니다. iOS나 Android 네이티브 앱 빌드를 실행할 수 없으며 Xcode 시뮬레이터나 Android Studio 에뮬레이터를 대신하지 않습니다.

  • 일부 웹페이지는 시뮬레이션할 수 없습니다

    iframe 삽입을 차단하는 보안 사이트나 chrome:// 같은 브라우저 내부 시스템 페이지, Chrome 웹 스토어는 브라우저 보안 정책상 시뮬레이션 창에서 열 수 없습니다.

모바일 시뮬레이터 FAQ

기기 프로필, 렌더링 정밀도 및 로컬 워크플로에 대한 명확한 답변입니다.

AppKiro Mobile Simulator는 어떤 도구인가요?

Chrome 브라우저 탭을 스마트폰, 태블릿, 폴더블, 노트북 시뮬레이터로 전환해 주는 확장 프로그램입니다. 실제 기기의 뷰포트 크기, 픽셀 비율 DPR, User-Agent, 노치 안전 영역에 맞춰 사이트를 렌더링하며 프레임 스크린샷 캡처, 화면 녹화, 일괄 캡처 및 접근성 오버레이를 제공합니다.

다양한 화면 크기에서 웹사이트를 어떻게 테스트하나요?

원하는 사이트에 접속한 후 시뮬레이터를 켜고 96개 프로필 중 하나를 선택하세요. 같은 탭 안에서 여러 화면을 나란히 열어둘 수도 있으며, 동기화 기능을 켜면 한쪽에서 스크롤하거나 클릭할 때 다른 모든 기기가 동일하게 반응합니다.

Chrome 개발자 도구(F12)의 기기 모드와 무엇이 다른가요?

DevTools는 뷰포트 크기와 User-Agent만 바꿉니다. AppKiro는 실제 상태 표시줄이 달린 고화질 기기 외형, 가상 키보드 팝업 시의 레이아웃 변위 재현, 올바른 svh/dvh/lvh 및 노치 계산, 다중 뷰포트 실시간 동기화, 화면 녹화, 디바이스 매트릭스 일괄 캡처, WCAG 접근성 진단 도구를 추가로 제공합니다.

실제 스마트폰이나 유료 클라우드 테스트 랩이 꼭 필요한가요?

대부분의 경우 필요하지 않습니다. 지금 사용 중인 PC의 Chrome 안에서 모든 작업이 직접 실행됩니다. 하드웨어 장치 없이도 반응형 레이아웃, 미디어 쿼리, 터치 사용성 질문을 충분히 완벽하게 검증할 수 있습니다.

어떤 디바이스 기종들이 포함되어 있나요?

총 96개 기기 프로필이 내장되어 있습니다: 31개 iPhone, 32개 Android 스마트폰, 7개 폴더블 기기, 11개 태블릿, 11개 노트북 및 데스크톱, 3개 특수 디스플레이(스마트 TV, 키오스크, Sonoff 월패드) 및 Apple Watch 1개. 필요에 따라 사용자 정의 기기를 추가할 수도 있습니다.

시뮬레이션 중인 기기 화면을 스크린샷으로 찍을 수 있나요?

네, 4가지 모드를 지원합니다: 기기 외형 프레임 포함, 웹사이트 페이지만, 전체 페이지 세로 스크롤 캡처, 브라우저 탭 전체. 캡처 후 화살표와 텍스트를 달 수 있는 에디터가 열리며 PNG나 WebP 다운로드, 클립보드 복사, 링크 공유가 가능합니다.

한 번에 여러 기기에서 동시에 스크린샷을 캡처할 수 있나요?

네, 일괄 캡처(Batch Capture) 기능을 통해 원하는 기기 그룹을 선택하면 단 한 번의 실행으로 해당 페이지를 모든 기기에서 자동 촬영합니다. 진행 상태 확인, 실패 항목 재시도, ZIP 압축 다운로드 또는 통합 비교 시트(Contact Sheet) 생성을 지원합니다.

사용자의 웹 서핑 데이터나 개인정보를 수집하나요?

전혀 수집하지 않습니다. 회원가입이 필요 없으며 추적 분석 스크립트도 일절 없습니다. 모든 시뮬레이션과 캡처는 내 컴퓨터 브라우저 내부에서만 안전하게 동작합니다. 사용자가 직접 '링크 공유'를 눌렀을 때만 해당 이미지가 단독 업로드됩니다.

localhost 개발 서버나 로컬 HTML 파일도 테스트할 수 있나요?

localhost나 내부 사내망 IP 주소도 일반 웹사이트처럼 완벽하게 작동합니다. 로컬 file:// 파일의 경우, chrome://extensions 페이지에서 해당 확장 프로그램의 '파일 URL에 대한 액세스 허용' 옵션만 켜주시면 됩니다.

이용 요금은 얼마이며 요구 사양은 어떻게 되나요?

100% 완전 무료이며 모든 기능이 제한 없이 열려 있습니다. 유료 구독 결제가 전혀 없습니다. Manifest V3를 지원하는 Chrome 116 이상 버전만 있으면 누구나 바로 사용할 수 있으며, 52개 다국어 인터페이스를 지원합니다.

AppKiro의 개발자 추천 도구

별도 설치 없이 웹 브라우저에서 바로 사용할 수 있는 편리한 이미지 및 디자인 검증 도구들입니다.

전문적인 반응형 모바일 테스트를 간편하게 끝내세요

Chrome에 AppKiro 모바일 시뮬레이터를 설치하고, 96개 실제 기기 뷰포트에서 레이아웃을 검증하며 고화질 프레임 스크린샷을 손쉽게 완성해보세요.

웹 도구 전체 보기Try the Screenshot Extension

Chrome 웹 스토어 심사 중 — 프로덕션 배포 준비 완료