오픈 소스 · MIT · Pure CSS
liquidframe
Safari 브라우저의 디테일을 완벽히 묘사한 iPhone 목업.
현실적인 iOS 26 Liquid Glass Safari 화면을 구현해 둔 순수 CSS 기반의 iPhone 16 Pro 목업입니다. 티타늄 프레임, 다이내믹 아일랜드, 그리고 다른 어떤 목업에서도 신경 쓰지 않는 핵심 요소인 각 브라우저 레이아웃별 Safari 크롬 영역을 그대로 표현했습니다. 단 하나의 클래스 교체로 레이아웃 모드가 바뀝니다. 빌드와 종속 파일은 필요 없습니다.
작동 방식
- 1.
프레임 코드 복사
liquidframe.css를 연동하고 index.html에서 `.phone-frame` 블록을 복사하세요. 티타늄 프레임 바디와 다이내믹 아일랜드, 측면 물리 버튼, 그리고 디테일한 Safari 크롬 마크업이 이미 조립되어 준비되어 있습니다.
- 2.
크롬 모드 선택
`.phone-frame` 요소의 클래스를 `chrome-compact`, `chrome-bottom`, `chrome-top`, 또는 `chrome-pwa` 중 원하는 모드로 변경해 보세요. 자바스크립트를 사용하지 않고도 iOS 26 특유의 다양한 Safari 브라우저 레이아웃으로 즉시 바뀌며, 각 레이아웃에 최적화된 safe-area 여백이 즉각 잡힙니다.
- 3.
나의 웹페이지 넣기
`.phone-screen` 컨테이너 내부에 임의의 웹페이지 소스를 채워 넣으면 실제 iPhone 화면처럼 실감 나게 렌더링됩니다. `--chrome-top` 및 `--chrome-bot` CSS 변수 값을 조정해 브랜드 커스텀 앱 화면이나 크롬 색상 일치 라이브러리의 미리보기를 꾸밀 수도 있습니다.
주요 기능
진짜 iOS 26 Safari 브라우저 묘사
반투명 Liquid Glass 주소창 디자인부터 Safari 브라우저 전용 3대 레이아웃 구성까지, 시중의 다른 목업들은 대충 그리기 마련인 브라우저 영역의 모든 디테일을 정교하게 구현해 두었습니다.
단 하나의 클래스로 제어하는 4대 모드
Compact, Bottom, Top, 그리고 단독 구동되는 PWA 모드까지 완비했습니다. `.phone-frame` 요소의 클래스 속성을 교체해 자유롭게 화면을 바꿀 수 있으며, 실제 디바이스와 호환되는 safe-area 인셋 값이 반영되어 내부 콘텐츠가 자연스럽게 정렬됩니다.
종속 라이브러리 없는 순수 CSS
고급스러운 티타늄 프레임 질감และ 다이내믹 아일랜드, 볼륨/전원 등의 물리 버튼이 모두 순수한 CSS 코드로 제작되었습니다. 복잡한 빌드 가공 단계가 불필요하며, liquidframe.js 연동 여부는 온전히 사용자 선택입니다.
디자인 스크린샷 최적화 및 간편한 브랜딩
브라우저 바의 색조를 직접 정하고, 화면 배경 이미지를 바꿀 수 있으며, 프레임의 티타늄 마감 색상(내추럴 / 데저트 / 블랙 / 화이트)을 지정할 수 있습니다. 마케팅 웹페이지 소개, 시안 검토, 문서 가이드 및 라이브러리 시연에 매우 이상적입니다.
데모 살펴보기
라이브 데모 페이지에서 브라우저 크롬 모드와 다양한 마감 기종 색상들을 전환해 보세요. 마음에 드신다면 liquidframe.css 파일과 `.phone-frame` 마크업 구조를 본인 프로젝트로 가져가 쓰시면 됩니다. 외부 모듈 연동이 없는 간결한 MIT 라이선스입니다.