자신의 웹페이지나 블로그를 다른 곳에 소개할 때 단순히 페이지를 스크린샷 하는 것보다 브라우저 프레임을 씌워서 공유하면 미관상 더 보기 좋다. BrowserFrame 이라는 사이트에서 크롬, 사파리 같은 웹브라우저의 목업(프레임) 생성 서비스를 제공한다. 다크 모드, 라이트 모드를 선택하거나 백그라운드 색상 등도 직접 변경할 수 있다.

 

  • 프레임(목업) 생성 방식 : URL 입력 후 페이지 로드, 이미지 직접 업로드
  • 프레임 종류 : 일반(Mac), 크롬(Mac/Win), 사파리, 파이어폭스(Mac/Win), 엣지, IE, 오페라
  • 프레임 DPI : Retina DPI
  • 다크, 라이트 모드 옵션
  • 배경/그림자/스크린 색상 변경, 가로/세로 크기 변경, 비율 조절

 

사용 방법


🔎 BrowserFrame 메인 화면 접속 → 화면 중간 브라우저 주소창에 URL 입력 → 엔터 버튼을 누르면 해당 페이지를 실시간으로 불러온다. 직접 찍은 웹페이지 스크린샷 이미지를 드래그하거나 복사-붙여넣기 단축키를 입력하여 업로드해도 된다. URL 불러오기 방식은 반응형 페이지의 경우 User Agent를 변경할 수 없기 때문에 직접 캡처해서 업로드하는게 더 편해보인다. 

 

🔎 브라우저 프레임 종류를 바꾸고 싶다면 좌측 메뉴에서 직접 선택하면 된다. 총 16가지의 프레임을 제공한다. Generic은 주소창이 빠진 사파리 프레임이다. 

 

🔎 스크롤을 조금만 내리면 안쪽 여백, 배경/그림자 색상 등을 조절하는 패널이 나온다. 

  • Padding : 안쪽 여백 조절 (브라우저의 콘텐츠와 바깥 테두리 사이의 여백)
  • Background Color(HEX) : 배경 색상
  • Shadow Color(HEX) : 그림자 색상
  • Screen Color(HEX) : 스크린 색상
  • Screen Width : 가로 크기 
  • Screen Height : 세로 크기
  • Screen Scale : 스크린 비율
  • Preview Scale : 미리 보기 비율

 

🔎 설정을 완료했다면 우측 하단 초록색 버튼을 눌러 완성된 목업 이미지를 다운로드한다. 다시 만들고 싶다면 X 버튼을 눌러 빈 브라우저 화면으로 돌아간다.  

 

 

브라우저 프레임 살펴보기


Generic Light/Dark
Chrome Mac Light/Dark
Safari Light/Dark
Firefox Mac Light/Dark
Edge Light/Dark
Opera Mac Light/Dark