웹사이트 스크린샷을 프로처럼 보여주는 법
리디자인을 제안하든, 케이스 스터디를 쓰든, 포트폴리오를 갱신하든, 출시 소식을 SNS에 올리든 — 맨 웹사이트 스크린샷은 작업의 진가를 좀처럼 드러내지 못합니다. 그 스크린샷을 주소창과 부드러운 그림자, 잘 고른 배경이 있는 브라우저 창 프레임 안에 넣으면, 작업 중 캡처가 아니라 실제로 살아 움직이는 제품처럼 보입니다.
브라우저 프레임이 전달하는 것
브라우저 크롬은 청중이 즉시 읽어내는 시각적 약속입니다. 주소창과 창 컨트롤은 곧 "이건 지금 웹에서 돌아가고 있다"는 뜻입니다. 이 맥락은 세 가지를 동시에 해냅니다. 신뢰감을 주고, 스크린샷을 슬라이드 배경에 묻히지 않게 프레이밍하며, 구도에 초점을 만듭니다. 결과적으로 의도가 담긴 화면처럼 느껴지는데, 이는 고객이나 채용 담당자 앞에서 딱 원하는 인상입니다.
웹 컷을 위한 채우기 모드 선택
웹사이트 캡처는 형태가 제각각입니다 — 짧은 히어로 섹션, 긴 전체 페이지 스크롤, 넓은 대시보드. 여기서 채우기 옵션이 중요해집니다.
- 표준 뷰포트 캡처는 Fill이 잘 어울리며 브라우저의 16:10 화면에 맞습니다.
- 전체 페이지나 유난히 길거나 넓은 캡처는 Adaptive를 써서 브라우저 창을 이미지 비율에 정확히 맞추세요. 잘림도, 어색한 여백도 없이 프레임이 자라서 딱 맞습니다.
- 고정 프레임 안에서 모든 픽셀을 보존해야 한다면 Fit이 흰색·그레이·검정으로 색을 고를 수 있는 깔끔한 여백을 더합니다.
작업 흐름
- 페이지를 캡처합니다(긴 페이지는 브라우저 개발자도구의 전체 페이지 캡처가 유용합니다).
- 디자인 목업 생성기를 열고 Ctrl/Cmd + V로 붙여넣습니다.
- Web browser 프레임을 선택하고, 길거나 넓은 캡처는 Adaptive로 전환합니다.
- 덱에 맞는 테마를 고릅니다: 깔끔한 기업용 슬라이드는 Light, 현대적 제품 느낌은 Dark, 마케팅·SNS는 Gradient.
- 프로젝터와 레티나 화면에서 선명하도록 2x로 내보냅니다.
이런 목업이 빛나는 곳
- 피치덱·제안서 — 표지 슬라이드의 프레임 씌운 히어로 컷은 즉시 전문적인 톤을 세웁니다.
- 케이스 스터디 — 전/후 브라우저 프레임은 리디자인 작업을 한눈에 읽히게 합니다.
- 포트폴리오 — 프로젝트 전반에 일관된 프레임과 테마를 쓰면 흩어진 작업물이 하나로 묶여 보입니다.
- SNS 출시 — Gradient 테마는 피드에서 잘 읽히고 발표에 브랜드 배경을 입혀줍니다.
모바일 앱 소재는 앱스토어 스크린샷 가이드와 함께, 인쇄물과 표지는 책표지·인쇄 목업 가이드를 참고하세요.