목업이 어색해 보일 때 실제로 손댈 수 있는 것

스크린샷을 기기 프레임 안에 끼워 넣기만 하면 대개 어색합니다. 색과 비율이 맞아도 화면이 종이에 인쇄된 것처럼 납작하게 보입니다. 더 정교한 프레임으로 바꾸거나 스크린샷을 다시 찍어도 이 느낌은 잘 사라지지 않습니다.

원인은 프레임의 완성도가 아니라 화면 위에 얹히는 것들에 있습니다. 실제로 기기를 찍은 사진에는 스크린샷에 없는 것들이 함께 찍히기 때문입니다. 유리에 비친 빛, 화면 가장자리의 그늘, 기기가 바닥에 놓이며 생기는 그림자입니다. 사진에는 화면 전체에 얇게 깔리는 입자감도 섞여 있습니다.

이 글은 그 차이를 이 서비스의 에디터 기준으로 정리합니다. 지금 화면에 실제로 그려지는 것, 값을 바꿀 수 있는 것, 이 서비스가 지원하지 않아 다른 방법을 찾아야 하는 것 세 가지로 나눴습니다. 설계상 몇 겹으로 쌓느냐가 아니라 결과 이미지에 무엇이 남느냐를 기준으로 삼았습니다.

어느 증상이 눈에 걸리는지에 따라 볼 절이 달라집니다. 순서대로 읽지 않고 해당 절로 바로 내려가도 됩니다.

지금 화면에 실제로 그려지는 것

프레임을 고르면 기기 한 대 위에 네 가지가 올라갑니다. 올린 스크린샷, 화면 가장자리를 두르는 깊이링, 기기 본체를 이루는 프레임 아트, 그리고 유리 글레어입니다. 이 중 유리 글레어만 마감 패널의 체크박스를 따르고 나머지 셋은 프레임을 고르는 순간 자동으로 붙습니다.

기기를 다 그린 뒤에는 캔버스 전체에 그레인 한 겹이 덮입니다. 그레인은 기기에 붙는 겹이 아니라 이미지 전체를 덮는 별도 레이어입니다. 그래서 결과 이미지에 남는 것을 다 세면 기기당 네 가지에 전역 그레인 하나입니다.

이 목록에 없는 것은 지금 그려지지 않습니다. 기기 아래 접지 그림자와 손이 기기를 덮는 전경 마스크가 대표적입니다. 두 항목은 아래 지원하지 않는 것 절에 따로 적었습니다. 그림자가 안 보인다고 설정을 뒤지실 필요는 없습니다.

합성은 전부 브라우저 안에서 끝납니다. 올린 이미지는 서버로 보내지 않고, 위에서 말한 겹도 쓰고 있는 기기에서 그려집니다.

올린 이미지의 가장자리가 잘립니다 (스크린샷)

올린 이미지는 화면 영역을 가득 채웁니다. 비율이 다르면 남는 쪽이 잘립니다. 프레임의 화면 비율과 같은 비율로 찍은 스크린샷을 올리면 잘리는 부분이 생기지 않습니다. 아직 이미지를 올리지 않은 자리에는 점선 테두리와 안내 문구가 대신 표시됩니다.

여기서 프레임에 따라 결과가 갈립니다. 스크린 자리가 투명하게 뚫린 스마트폰 프레임(노치형과 안드로이드형 모두)을 고르면 화면이 프레임보다 뒤에 놓여 그 구멍으로 비칩니다. 노트북, 태블릿, 데스크탑, 브라우저처럼 화면이 불투명한 프레임에서는 반대로 화면이 프레임 위에 얹힙니다. 판정 기준은 노치 유무가 아니라 프레임 이미지에 투명 컷아웃이 있느냐입니다.

화면이 프레임 위에 스티커처럼 붙어 보입니다 (깊이링과 프레임 아트)

화면과 테두리가 같은 평면에 놓인 것처럼 보인다면 깊이링이 빠진 것입니다. 깊이링은 화면 가장자리를 따라 아주 옅은 어둠을 두르는 겹입니다. 실제 기기는 유리가 베젤보다 살짝 안쪽에 들어가 있어 테두리에 미세한 그늘이 생깁니다. 프레임 아트는 기기 본체 이미지이며, 브라우저 창 프레임만 이미지 대신 코드로 그린 창 크롬이 들어갑니다.

이 둘은 한 묶음으로 그려지고, 묶음이 스크린샷보다 앞이냐 뒤냐를 프레임 종류가 결정합니다. 화면이 프레임 뒤로 비치는 스마트폰 계열에서는 스크린샷 다음에 이 묶음이 올라와 깊이링이 화면 위에 얹힙니다. 화면을 프레임 위에 올리는 노트북·태블릿 계열에서는 묶음이 먼저 깔리고 스크린샷이 마지막에 올라오므로 깊이링이 스크린샷에 가려 보이지 않습니다.

같은 스크린샷이라도 노트북 프레임에서는 화면 가장자리의 그늘을 볼 수 없는 것이 이 때문입니다. 깊이링 자체는 검정 40% 선을 화면 모서리를 따라 두르고, 짧은 변의 2%만큼 번지게 한 것입니다. 선 두께는 짧은 변의 0.4%이며 최소 1픽셀입니다. 값이 이렇게 작아야 그늘로 읽히고, 더 키우면 화면에 검은 테두리를 그린 것처럼 보입니다(추정).

깊이링은 화면이 사각형으로 계산될 때만 붙습니다. 지금은 모든 프레임이 정면 사각형으로 그려지므로 스마트폰 계열에서는 언제나 붙습니다. 대각 스태거나 대각 캐스케이드에서 폰이 비스듬해 보이는 것은 화면을 기울인 것이 아니라 기기 전체를 평면에서 12도 돌린 것이라, 사각형 판정이 그대로 유지됩니다.

화면이 유리처럼 보이지 않습니다 (유리 글레어)

유리에 비친 빛이 없으면 화면은 유리가 아니라 인쇄물에 가깝게 보입니다. 반사는 두 겹으로 들어갑니다. 155도 방향의 선명한 반사와 135도 방향의 부드러운 반사이며, 불투명도는 각각 0.07과 0.06으로 둘 다 10%가 되지 않습니다. 두 겹은 스크린 합성으로 겹칩니다.

두 겹으로 나누는 것은 실제 유리 반사가 한 겹이 아니기 때문입니다(추정). 불투명도를 낮게 잡으면 반사가 화면 내용을 가리지 않습니다(추정). 이 두 문장은 코드에 근거가 없는 해석입니다.

글레어는 마감 패널의 체크박스로 켜고 끕니다. 기본값은 켜짐이고, 브라우저 크롬을 쓰는 두 포맷만 꺼진 상태로 시작합니다. 브라우저 창과 브라우저 + 폰입니다. 두 포맷의 창 크롬은 사진이 아니라 코드로 그린 그림이어서, 그 위에 유리막을 얹으면 반사가 겉돕니다. 프리셋 코드에도 같은 이유가 주석으로 적혀 있습니다(추정: 주석은 만든 사람이 남긴 의도이지 동작으로 확인되는 값이 아닙니다). 화면이 지나치게 번들거린다고 느끼면 이 체크박스를 끄는 것이 유일한 조절 방법입니다. 반사의 각도나 세기를 사용자가 바꾸는 기능은 없습니다.

깊이링과 마찬가지로 글레어도 화면이 사각형으로 계산될 때만 붙습니다. 화면을 사각형이 아닌 사변형으로 워프하는 경로에는 반사가 들어가지 않습니다. 다만 그 경로를 쓰는 포맷이 현재 하나도 없어서, 지금은 체크박스를 켜 두면 어느 포맷에서든 반사가 붙습니다.

전체가 지나치게 깨끗합니다 (캔버스 전역 그레인)

겹을 다 채워도 이미지가 어딘가 인공적으로 보일 때가 있습니다. 그레인은 디바이스의 겹이 아닙니다. 모든 디바이스를 그린 뒤 캔버스 전체에 한 번 덮는 별도 오버레이입니다. 디지털 이미지는 픽셀이 지나치게 균질해서 인공적으로 보이는데, 옅은 노이즈가 그 균질함을 깹니다.

SVG의 fractalNoise로 만든 256픽셀 타일을 반복해 쓰고 소프트 라이트로 합성합니다. 노이즈는 기본 주파수 0.8, 옥타브 2로 만듭니다. 기본 강도는 0.08입니다. 슬라이더는 100%까지 올라가지만 실제 렌더 불투명도는 0.2에서 잘리므로, 20%를 넘겨 올려도 화면은 더 이상 변하지 않습니다. 슬라이더를 끝까지 올렸는데 아무 변화가 없다면 고장이 아니라 이 상한 때문입니다.

이 서비스가 지원하지 않는 것

아래 세 가지는 화면에 나오지 않습니다. 준비 중이라는 뜻이 아니라, 지금은 이 에디터로 만들 수 없다는 뜻입니다. 목업에 꼭 필요한 항목이라면 이 에디터 밖에서 방법을 찾으셔야 합니다.

기기 아래 접지 그림자

기기 아래 그림자는 그려지지 않습니다. 그림자 강도의 기본값이 0으로 고정되어 있고, 강도가 0이면 그리기 전에 그대로 반환하기 때문입니다. 모든 포맷 프리셋이 같은 값을 쓰고, 편집 중이던 문서를 다시 열 때도 0으로 맞춥니다. 마감 패널에 그림자 슬라이더가 없으므로 값을 올릴 방법도 없습니다.

그림자 겹의 설계 자체는 코드에 남아 있습니다. 기기 본체보다 짧은 변의 4%만큼 안쪽으로 들어간 사각형에 흐림과 불투명도가 서로 다른 4겹을 쌓아, 프레임이 그림자의 날카로운 가장자리를 덮고 번진 부분만 밖으로 새어 나오게 하는 구조입니다. 내려둔 이유는 프레임 이미지가 그 사각형을 다 덮지 못하는 각도와 비율에서 그림자가 아니라 검은 카드를 덧댄 것처럼 보였기 때문입니다.

지금 기기 아래 그림자가 필요하면 내려받은 이미지에 다른 도구로 한 겹 얹는 방법뿐입니다. 배경을 단색이나 그라데이션으로 어둡게 잡아 기기와 배경의 경계를 부드럽게 만드는 것도 임시 대안이 됩니다.

손이 기기를 쥔 합성 (전경 마스크)

손이 기기를 쥔 합성은 화면 위를 손가락이 덮는 전경 겹이 있어야 성립합니다. 이 서비스에는 그 겹을 그리는 코드가 없습니다. 프레임 데이터에 전경 마스크를 넣을 자리(선택 항목)만 정의되어 있고, 실제로 그려 주는 컴포넌트는 캔버스 폴더에 존재하지 않습니다. 자리를 잡아 둔 것과 구현된 것은 다릅니다.

포맷 목록에도 손이 기기를 든 구도의 포맷은 없습니다. 목록의 포맷 18종은 모두 기기를 정면으로 놓습니다.

기기 기울임과 기울임 워프

기기를 비스듬히 기울인 구도의 포맷은 목록에 없습니다. 기울인 각도에서 렌더한 프레임 이미지가 없기 때문입니다.

화면을 사각형이 아닌 사변형으로 워프하는 코드는 들어 있습니다. 원근 투영 계산과 기울임 전용 베젤이 그것입니다. 다만 이 경로를 쓰는 포맷 프리셋이 하나도 없어서 실제로는 호출되지 않습니다. 좌우 원근으로 미리 렌더한 프레임 이미지를 가진 프레임도 없습니다. 그래서 지금 만들 수 있는 목업의 기기는 전부 정면입니다.

대각 스태거와 대각 캐스케이드가 원근처럼 보이는 것은 기울임이 아니라 평면 회전입니다. 기기를 12도 돌려 배치한 것이므로 화면은 여전히 정면 사각형이고, 그래서 깊이링과 글레어도 그대로 붙습니다. 진짜 원근이 필요하면 정면 배치로 내려받은 뒤 다른 도구에서 변형해야 합니다.

세 항목 모두 지금은 안 된다는 점이 중요합니다. 각 항목이 코드의 어느 값 때문에 그런 상태인지는 말미의 현재 지원 범위 표에 한 줄씩 적어 두었습니다.

직접 조절할 수 있는 것

편집 화면에서 값을 바꿀 수 있는 항목은 아래가 전부입니다. 목업이 어색할 때 손댈 수 있는 범위도 여기까지입니다.

마감: 두 가지

마감 패널에는 그레인 슬라이더와 유리 글레어 체크박스 두 개만 있습니다. 그레인은 0%에서 100%까지 움직이고 기본값은 8%이며, 앞서 적은 대로 20%를 넘기면 화면이 더 변하지 않습니다. 글레어는 켜짐과 꺼짐 두 상태뿐이고 세기를 조절하는 값은 없습니다. 그림자 항목은 이 패널에 없습니다.

배경: 네 가지

배경 패널에서 그라데이션, 단색, 이미지, 투명 중 하나를 고릅니다. 단색은 색 하나를 정하고, 그라데이션은 시작 색과 끝 색에 각도(0도에서 360도, 기본 135도)를 더해 정합니다. 이미지를 고르면 파일 선택창이 열리고 PNG, JPG, WebP를 받습니다. 투명을 고르면 PNG나 WebP로 내보낼 때 배경이 비워집니다.

포맷 18종

단일, 멀티 디바이스, 반응형(3종), 대각 스태거, 반복 그리드, 대각 캐스케이드, 폰 3연, 플랫레이, 브라우저 창에 더해 2026년 8월 태블릿 3연, 데스크탑 단독, 풀 라인업, 노트북 대각 2연, 브라우저+폰, 태블릿+폰, 폰 혼합 3연, 반복 그리드 대각 1·2가 추가되어 포맷은 18종입니다. 목록에 보이는 18개 모두 누르면 그대로 적용됩니다.

반복 그리드를 고르면 개수(3, 6, 9, 12)와 간격 컨트롤이 함께 나옵니다. 대각 스태거와 대각 캐스케이드는 좌표가 정해진 배치라 개수와 간격을 받지 않습니다. 폰 슬롯이 있는 포맷에서는 폰 종류를 노치형과 안드로이드형 중에서 바꿀 수 있고, 이 선택은 폰 슬롯에만 적용되어 태블릿과 노트북은 그대로 남습니다.

디바이스: 여섯 종과 개별 조작

디바이스 패널에서 스마트폰(노치), 스마트폰(안드로이드), 노트북, 태블릿, 데스크탑, 브라우저 창 여섯 종을 캔버스에 추가합니다. 프리셋 전용으로 쓰는 베젤 없는 평면 스크린은 이 목록에 나오지 않습니다.

기기를 선택하면 모서리 라운드를 0픽셀에서 120픽셀까지 조절할 수 있고, 잠금, 복제, 앞뒤 순서 변경, 삭제를 할 수 있습니다. 회전은 45도 단위 버튼으로 하며, 선택한 기기가 없으면 전체가 함께 돕니다. 화면 밖으로 나간 기기는 중앙 정렬 버튼으로 되돌립니다. 드래그하면 다른 기기와 캔버스 중심에 맞춰 정렬선이 뜹니다.

내보내기

형식은 PNG, JPG, WebP 중 하나이고 배율은 1배에서 4배까지입니다. 투명 배경 체크박스는 JPG에서만 잠깁니다. 투명을 쓰지 않으면 배경을 채울 색을 따로 고를 수 있고, JPG와 WebP에서는 품질을 50%에서 100%까지 정합니다. 결과는 파일로 내려받거나 클립보드로 복사합니다.

여기 적지 않은 조절기는 에디터에 없습니다. 그림자 슬라이더를 찾다가 못 찾았다면 화면 문제가 아니라 이 목록이 전부이기 때문입니다.

미리보기와 내려받은 파일이 달라 보일 때

편집 화면과 내려받은 파일은 같은 캔버스를 씁니다. 다만 완전히 동일하지는 않고 두 가지가 다릅니다.

첫째, 내보낼 때 편집 도구 레이어를 숨깁니다. 화면에서 보이던 선택 핸들과 정렬 가이드선은 결과물에 들어가지 않습니다. 투명 배경으로 내보내면 배경 레이어도 함께 숨깁니다.

둘째, 해상도가 다릅니다. 화면 렌더는 픽셀 비율을 최대 2배로 제한합니다. 고해상도 디스플레이에서 편집할 때 매 순간 큰 캔버스를 다시 그리면 메모리와 성능에 부담이 되기 때문입니다. 최종 해상도는 내보내기 배율에서 따로 정합니다.

4배로 내보냈는데도 흐릿할 때

올린 이미지는 긴 변 2000픽셀로 줄여서 작업합니다. 편집 중 메모리 부담을 줄이기 위한 처리입니다. 따라서 4배로 내보낸다고 해서 원본 스크린샷의 원래 해상도가 그대로 나오는 것은 아닙니다.

배율은 1배부터 4배까지 고를 수 있습니다. 올릴 수 있는 파일은 PNG, JPG, WebP이며 한 장에 25MB까지입니다.

외부 사실: 브라우저 캔버스 한계

캔버스 크기의 상한은 우리 코드가 아니라 브라우저 엔진이 정합니다. WebKit(사파리 엔진)은 변 길이가 아니라 면적으로 상한을 두고, 이 서비스도 같은 방식으로 면적만 검사하되 2015년 기준값 16,777,216을 안전값으로 적용합니다. 상한의 변경 이력과 1차 출처 W1·W2·W3, 배율별 계산표는 아래 글에 정리해 두었습니다.

내려받은 이미지를 상업적으로 써도 됩니까

제공하는 프레임은 제조사 워드마크를 지운 일반형 디자인입니다. 에디터에서 내려받은 결과물은 상업적 용도를 포함해 자유롭게 쓸 수 있습니다.

다만 프레임 원본의 출처 표기와 국내 지식재산 검토는 아직 진행 중입니다. 자세한 조건은 라이선스·크레딧 페이지에서 확인하시는 편이 좋습니다.

현재 지원 범위

지원하지 않는 것 절에서 설명한 상태를 한자리에 모았습니다. 사정과 대안은 그 절에 적었고, 이 표는 어떤 값이 그 상태를 만드는지만 담았습니다. 코드가 바뀌면 이 표부터 바뀝니다.

이 글의 수치는 전부 이 서비스의 실제 구현 코드에서 가져왔습니다. 문장마다 어느 파일의 어떤 값인지 맨 아래 "이 글의 근거"에 정리해 두었습니다.